From 2249097b075e216901f7c9a51c73385b52cec324 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Mon, 10 Jul 2023 10:10:46 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=A7=E0=B8=A1=E0=B9=84=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=8C=E0=B9=81=E0=B8=81=E0=B9=89=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99=E0=B8=87=E0=B8=A7=E0=B8=942?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.treelist.ts     |    8 +
 src/api/manage/api.person.ts                  |    3 +-
 src/api/manage/api.positionEmployee.ts        |    1 -
 src/assets/structChartData.ts                 |  511 +--
 src/components/TableHistory.vue               |    5 +
 src/interface/request/main/main.ts            |   26 +-
 src/interface/request/manage/prefix.ts        |    2 +-
 src/interface/response/manage/prefix.ts       |    2 +-
 .../components/organization/Organization.vue  |    2 +-
 .../components/organization/ShortName.vue     |   16 +-
 .../components/organization/TelExternal.vue   |   10 +-
 .../components/organization/TelInternal.vue   |   10 +-
 .../01_metadata/components/person/Prefix.vue  |    8 +-
 src/modules/01_metadata/views/Main.vue        |   34 +-
 .../components/DialogFooter.vue               |   20 +-
 .../components/Tree/MappingPositions.vue      |   60 +-
 .../interface/response/Mapping.ts             |    3 +-
 .../02_organizational/views/MainReport.vue    |  357 +-
 .../02_organizational/views/MainTree.vue      | 3033 +++++++++--------
 .../02_organizational/views/ManageReport2.vue |   17 +-
 .../views/ManageReport2Add.vue                |   64 +-
 .../views/ManageReport2History.vue            |    6 +-
 .../02_organizational/views/Report.vue        |  222 +-
 .../03_recruiting/components/DialogFooter.vue |   19 +-
 .../03_recruiting/components/ExamFinished.vue |   16 +
 .../03_recruiting/components/Family.vue       |   13 +-
 .../03_recruiting/components/Information.vue  |    4 +-
 .../03_recruiting/components/Occupation.vue   |    4 +-
 .../03_recruiting/components/Table.vue        |  376 +-
 .../components/TableCandidate.vue             |    3 +-
 .../03_recruiting/views/01_compete/Detail.vue |  100 +-
 .../views/01_compete/DetailEx.vue             |   63 +-
 .../03_recruiting/views/01_compete/Period.vue | 1275 +++----
 .../views/01_compete/PeriodAdd.vue            | 2009 ++++++-----
 .../views/01_compete/PeriodStat.vue           |    2 +-
 .../views/02_qualify/DisableDetail.vue        |    6 +-
 .../views/02_qualify/DisableDetailEx.vue      |   74 +-
 .../views/02_qualify/DisablePeriod.vue        | 1268 +++----
 .../views/02_qualify/DisablePeriodAdd.vue     |   13 +-
 .../03_recruiting/views/02_qualify/Manage.vue |    2 +-
 .../03_recruiting/views/02_qualify/Period.vue |  627 ++--
 .../views/02_qualify/PeriodAdd.vue            |  189 +-
 .../views/02_qualify/manageDetail.vue         |   20 +-
 .../03_recruiting/views/03_editor/index.vue   |   47 +-
 .../04_registry/components/Assessment.vue     |  106 +-
 src/modules/04_registry/components/Coin.vue   |  250 +-
 .../04_registry/components/DialogFooter.vue   |   77 +-
 .../04_registry/components/Discipline.vue     |  194 +-
 .../04_registry/components/Document.vue       |  100 +-
 .../04_registry/components/Education.vue      |  565 +--
 .../components/Information/Address.vue        |  155 +-
 .../components/Information/Certicate.vue      |   98 +-
 .../components/Information/Family.vue         |  662 +++-
 .../components/Information/Government.vue     |   42 +-
 .../components/Information/Information.vue    |  256 +-
 .../components/Information/OldName.vue        |  158 +-
 .../components/Information/top.vue            |    7 +-
 .../04_registry/components/Insignia.vue       |  274 +-
 src/modules/04_registry/components/Leave.vue  |  227 +-
 src/modules/04_registry/components/Other.vue  |   82 +-
 .../04_registry/components/Profile.vue        |  118 +-
 src/modules/04_registry/components/Record.vue |  242 +-
 src/modules/04_registry/components/Salary.vue |   99 +-
 .../04_registry/components/SalaryEmployee.vue |  891 +++--
 .../components/SalaryEmployeeTemp.vue         | 2087 ++++++++++++
 .../04_registry/components/TableProfile.vue   |   20 +-
 src/modules/04_registry/components/Talent.vue |  264 +-
 src/modules/04_registry/components/Train.vue  |  114 +-
 src/modules/04_registry/components/Work.vue   |  245 +-
 .../04_registry/components/profileType.ts     |   14 +-
 .../04_registry/interface/request/Coin.ts     |    2 +
 .../interface/request/Discipline.ts           |    3 +-
 .../interface/request/Education.ts            |    5 +-
 .../04_registry/interface/request/Insignia.ts |    2 +
 .../04_registry/interface/request/Record.ts   |    2 +
 .../04_registry/interface/request/Salary.ts   |    6 +-
 .../04_registry/interface/request/Talent.ts   |    2 -
 .../04_registry/interface/request/Work.ts     |    2 +
 .../04_registry/interface/response/Coin.ts    |    2 +
 .../interface/response/Discipline.ts          |    1 +
 .../interface/response/Education.ts           |    5 +-
 .../04_registry/interface/response/Family.ts  |   14 +
 .../interface/response/Insignia.ts            |    2 +
 .../04_registry/interface/response/Record.ts  |    2 +
 .../04_registry/interface/response/Salary.ts  |    6 +-
 .../04_registry/interface/response/Talent.ts  |    2 -
 .../04_registry/interface/response/Work.ts    |    2 +
 src/modules/04_registry/views/Main.vue        |  347 +-
 src/stores/mixin.ts                           |   31 +
 89 files changed, 11287 insertions(+), 7048 deletions(-)
 create mode 100644 src/modules/04_registry/components/SalaryEmployeeTemp.vue

diff --git a/src/api/02_organizational/api.treelist.ts b/src/api/02_organizational/api.treelist.ts
index 46dac9e6b..40285ee7a 100644
--- a/src/api/02_organizational/api.treelist.ts
+++ b/src/api/02_organizational/api.treelist.ts
@@ -35,6 +35,9 @@ export default {
   getTreeRoot: `${organizationPath}treeroot`,
   getDraftTreeRoot: `${organizationPath}history/treeroot`,
   getTreeHistory: `${organizationPath}publish-history`,
+
+  getPublishFileHistory: `${organizationPath}publish-file`,
+
   getTreeNode: (organizationId: string, keyId: string) =>
     `${organizationPath}tree?organizationId=${organizationId}&keyId=${keyId}`,
   getDraftTreeNode: (organizationId: string, keyId: string) =>
@@ -79,4 +82,9 @@ export default {
     `${postionMasterPath}/position-number/${id}`,
   getPositionNumberIdByOcId: (OcId: string) =>
     `${postionMasterPath}/position-number/Oc/${OcId}`,
+
+
+  /**
+   * api ประวัติการ publish
+   */
 };
diff --git a/src/api/manage/api.person.ts b/src/api/manage/api.person.ts
index cdc0c73bd..962cc5575 100644
--- a/src/api/manage/api.person.ts
+++ b/src/api/manage/api.person.ts
@@ -29,7 +29,6 @@ export default {
   /**
    * api เขต
    */
-  district,
   listDistrict: (id: string) => `${district}${id}`,
   listDistrictHistory: `${district}history`,
   listDistrictHistoryId: (id: string | string[]) => `${district}history/${id}`,
@@ -54,7 +53,7 @@ export default {
     `${subDistrict}history/published-history/${id}`,
 
   /**
-   * api คำนำหน้า
+   * api คำนำหน้าชื่อ
    */
   prefix,
   listPrefixHistory: `${prefix}history`,
diff --git a/src/api/manage/api.positionEmployee.ts b/src/api/manage/api.positionEmployee.ts
index 240d943cd..abd2be21b 100644
--- a/src/api/manage/api.positionEmployee.ts
+++ b/src/api/manage/api.positionEmployee.ts
@@ -64,7 +64,6 @@ export default {
   /**
    * api สถานะของตำแหน่ง
    */
-  positionEmployeeStatus,
   listPositionEmployeeStatusHistory: `${positionEmployeeStatus}history`,
   listPositionEmployeeStatusHistoryId: (id: string) =>
     `${positionEmployeeStatus}history/${id}`,
diff --git a/src/assets/structChartData.ts b/src/assets/structChartData.ts
index bac5fe2ff..1277ee406 100644
--- a/src/assets/structChartData.ts
+++ b/src/assets/structChartData.ts
@@ -10,263 +10,266 @@
  *		- offcier : เป็น Array ของ Object ที่เก็บตำแหน่งระดับเจ้าหน้าที่
  *		- children : เป็น Array ของหน่วยงานย่อย ซึ่ง Root ของ children ต้องเป็น Object ของหน่วยงานเสมอ
  *	- Object ส่วนที่เป็นตำแหน่งประกอบด้วย
- *		- positionID : Unique ID ของประเภทตำแหน่งนั้น เงื่อนไขเหมือน deptID
+ *		- positionID : Unique ID ของตำแหน่งประเภทนั้น เงื่อนไขเหมือน deptID
  *		- positionName : ชื่อตำแหน่ง
  *		- positionNum : เลขที่ประจำตำแหน่ง เช่น กทข.
  *		- totalPositionCount : จำนวนตำแหน่งทั้งหมด
  *		- totalPositionVacant : จำนวนตำแหน่งว่างทั้งหมด
  */
-const chartData = { // root ของข้อมูลเป็น Object (ไม่ใช่ Array แบบ TreeList)
-	deptID: 1, // Unique ID ของสำนัก/ฝ่าย/กอง (ถ้ามี?)
-	departmentName: "สำนักงานเลขานุการผู้ว่าราชการกรุงเทพมหานคร", // ชื่อสำนัก/ฝ่าย/กอง
-	totalPositionCount: 75, // จำนวนตำแหน่งทั้งหมดในหน่วยงาน
-	totalPositionVacant: 2, // จำนวนตำแหน่งว่างทั้งหมดในหน่วยงาน
-	heads: [ // Array ของผู้บริหารในหน่วยงานนั้น ๆ (ผู้อำนวยการ/หัวหน้า)
-		{
-			positionID: 2, // Unique ID ของประเภทตำแหน่งนั้น (ถ้ามี?)
-			positionName: "ผู้อำนวยการสูง", // ชื่อตำแหน่ง
-			positionNum: "(หัวหน้าสำนักงาน)", // เลขที่ประจำตำแหน่ง (ถ้ามี) เช่นพวก กทข.
-			totalPositionCount: 1, // จำนวนตำแหน่งทั้งหมด
-			totalPositionVacant: 0 // จำนวนตำแหน่งว่างทั้งหมด
-		}
-	],
-	officer: [ // Array ของเจ้าหน้าที่ในหน่วยงาน (รายการตำแหน่งในหน่วยงานที่ขึ้นตรงกับ deptID นั้น ๆ)
-	],
-	children: [ // Array ของหน่วยงานย่อย เช่น ฝ่าย กอง
-		{ // โครงสร้างที่เหลือจะเหมือนกับส่วน Root ทุกอย่าง คือแต่ละหน่วยงานย่อย มี heads ไว้ระบุหัวหน้า ผู้อำนวยการ มี Officer ไว้ระบุรายการตำแหน่งในหน่วยงาน มี Children ไว้ระบุหน่วยงานย่อย
-			deptID: 3,
-			departmentName: "ฝ่ายบริหารทั่วไป",
-			totalPositionCount: 14,
-			totalPositionVacant: 0,
-			heads: [
-				{
-					positionID: 2,
-					positionName: "นักจัดการงานทั่วไป",
-					positionNum: "ชพ. (หัวหน้าฝ่าย)",
-					totalPositionCount: 1,
-					totalPositionVacant: 0
-				}
-			],
-			officer: [
-				{
-					positionID: 3,
-					positionName: "นักจัดการงานทั่วไป",
-					positionNum: "ปก./ชก",
-					totalPositionCount: 1,
-					totalPositionVacant: 0
-				},
-				{
-					positionID: 4,
-					positionName: "นักทรัพยากรบุคคล",
-					positionNum: "ปก./ชก.",
-					totalPositionCount: 1,
-					totalPositionVacnt: 0
-				},
-				{
-					positionID: 5,
-					positionName: "นักวิชาการเงินและบัญชี",
-					positionNum: "ปก./ชก.",
-					totalPositionCount: 2,
-					totalPositionVacnt: 0
-				},
-				{
-					positionID: 6,
-					positionName: "นักวิชาการพัสดุ",
-					positionNum: "ปก./ชก.",
-					totalPositionCount: 1,
-					totalPositionVacnt: 0
-				},
-				{
-					positionID: 7,
-					positionName: "เจ้าพนักงานการเงินและบัญชี",
-					positionNum: "ปง./ชง.",
-					totalPositionCount: 3,
-					totalPositionVacnt: 0
-				},
-				{
-					positionID: 8,
-					positionName: "เจ้าพนักงานพัสดุ",
-					positionNum: "ปง./ชง.",
-					totalPositionCount: 1,
-					totalPositionVacnt: 0
-				},
-				{
-					positionID: 9,
-					positionName: "เจ้าพนักงานธุรการ",
-					positionNum: "ปง./ชง.",
-					totalPositionCount: 4,
-					totalPositionVacnt: 0
-				}
-			]
-		},
-		{
-			deptID: 4,
-			departmentName: "ส่วนประสานนโยบาย",
-			totalPositionCount: 15,
-			totalPositionVacant: 0,
-			heads: [
-				{
-					positionID: 10,
-					positionName: "ผู้อำนวยการต้น",
-					positionNum: "(ผู้อำนวยการส่วน)",
-					totalPositionCount: 1,
-					totalPositionVacant: 0,
-				}
-			],
-			children: [
-				{
-					deptID: 11,
-					departmentName: "กลุ่มงานประชุม",
-					totalPositionCount: 6,
-					totalPositionVacant: 0,
-					heads: [
-						{
-							positionID: 11,
-							positionName: "นักจัดการงานทั่วไป",
-							positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
-							totalPositionCount: 1,
-							totalPositionVacant: 0,
-						}
-					],
-					officer: [
-						{
-							positionID: 12,
-							positionName: "นักจัดการงานทั่วไป",
-							positionNum: "ปก./ชก.",
-							totalPositionCount: 4,
-							totalPositionVacant: 0
-						},
-						{
-							positionID: 13,
-							positionName: "เจ้าพนักงานธุรการ",
-							positionNum: "ปง./ชง.",
-							totalPositionCount: 1,
-							totalPositionVacant: 0
-						}
-					]
-				},
-				{
-					deptID: 12,
-					departmentName: "กลุ่มงานการเมืองและประสานนโยบาย",
-					totalPositionCount: 8,
-					totalPositionVacant: 0,
-					heads: [
-						{
-							positionID: 14,
-							positionName: "นักจัดการงานทั่วไป",
-							positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
-							totalPositionCount: 1,
-							totalPositionVacant: 0,
-						}
-					],
-					officer: [
-						{
-							positionID: 15,
-							positionName: "นักจัดการงานทั่วไป",
-							positionNum: "ปก./ชก.",
-							totalPositionCount: 4,
-							totalPositionVacant: 0
-						},
-						{
-							positionID: 16,
-							positionName: "เจ้าพนักงานสถิติ",
-							positionNum: "ปง./ชง.",
-							totalPositionCount: 1,
-							totalPositionVacant: 0
-						},
-						{
-							positionID: 17,
-							positionName: "เจ้าพนักงานธุรการ",
-							positionNum: "ปง./ชง.",
-							totalPositionCount: 2,
-							totalPositionVacant: 0
-						}
-					]
-				}
+const chartData = {
+  // root ของข้อมูลเป็น Object (ไม่ใช่ Array แบบ TreeList)
+  deptID: 1, // Unique ID ของสำนัก/ฝ่าย/กอง (ถ้ามี?)
+  departmentName: "สำนักงานเลขานุการผู้ว่าราชการกรุงเทพมหานคร", // ชื่อสำนัก/ฝ่าย/กอง
+  totalPositionCount: 75, // จำนวนตำแหน่งทั้งหมดในหน่วยงาน
+  totalPositionVacant: 2, // จำนวนตำแหน่งว่างทั้งหมดในหน่วยงาน
+  heads: [
+    // Array ของผู้บริหารในหน่วยงานนั้น ๆ (ผู้อำนวยการ/หัวหน้า)
+    {
+      positionID: 2, // Unique ID ของตำแหน่งประเภทนั้น (ถ้ามี?)
+      positionName: "ผู้อำนวยการสูง", // ชื่อตำแหน่ง
+      positionNum: "(หัวหน้าสำนักงาน)", // เลขที่ประจำตำแหน่ง (ถ้ามี) เช่นพวก กทข.
+      totalPositionCount: 1, // จำนวนตำแหน่งทั้งหมด
+      totalPositionVacant: 0, // จำนวนตำแหน่งว่างทั้งหมด
+    },
+  ],
+  officer: [
+    // Array ของเจ้าหน้าที่ในหน่วยงาน (รายการตำแหน่งในหน่วยงานที่ขึ้นตรงกับ deptID นั้น ๆ)
+  ],
+  children: [
+    // Array ของหน่วยงานย่อย เช่น ฝ่าย กอง
+    {
+      // โครงสร้างที่เหลือจะเหมือนกับส่วน Root ทุกอย่าง คือแต่ละหน่วยงานย่อย มี heads ไว้ระบุหัวหน้า ผู้อำนวยการ มี Officer ไว้ระบุรายการตำแหน่งในหน่วยงาน มี Children ไว้ระบุหน่วยงานย่อย
+      deptID: 3,
+      departmentName: "ฝ่ายบริหารทั่วไป",
+      totalPositionCount: 14,
+      totalPositionVacant: 0,
+      heads: [
+        {
+          positionID: 2,
+          positionName: "นักจัดการงานทั่วไป",
+          positionNum: "ชพ. (หัวหน้าฝ่าย)",
+          totalPositionCount: 1,
+          totalPositionVacant: 0,
+        },
+      ],
+      officer: [
+        {
+          positionID: 3,
+          positionName: "นักจัดการงานทั่วไป",
+          positionNum: "ปก./ชก",
+          totalPositionCount: 1,
+          totalPositionVacant: 0,
+        },
+        {
+          positionID: 4,
+          positionName: "นักทรัพยากรบุคคล",
+          positionNum: "ปก./ชก.",
+          totalPositionCount: 1,
+          totalPositionVacnt: 0,
+        },
+        {
+          positionID: 5,
+          positionName: "นักวิชาการเงินและบัญชี",
+          positionNum: "ปก./ชก.",
+          totalPositionCount: 2,
+          totalPositionVacnt: 0,
+        },
+        {
+          positionID: 6,
+          positionName: "นักวิชาการพัสดุ",
+          positionNum: "ปก./ชก.",
+          totalPositionCount: 1,
+          totalPositionVacnt: 0,
+        },
+        {
+          positionID: 7,
+          positionName: "เจ้าพนักงานการเงินและบัญชี",
+          positionNum: "ปง./ชง.",
+          totalPositionCount: 3,
+          totalPositionVacnt: 0,
+        },
+        {
+          positionID: 8,
+          positionName: "เจ้าพนักงานพัสดุ",
+          positionNum: "ปง./ชง.",
+          totalPositionCount: 1,
+          totalPositionVacnt: 0,
+        },
+        {
+          positionID: 9,
+          positionName: "เจ้าพนักงานธุรการ",
+          positionNum: "ปง./ชง.",
+          totalPositionCount: 4,
+          totalPositionVacnt: 0,
+        },
+      ],
+    },
+    {
+      deptID: 4,
+      departmentName: "ส่วนประสานนโยบาย",
+      totalPositionCount: 15,
+      totalPositionVacant: 0,
+      heads: [
+        {
+          positionID: 10,
+          positionName: "ผู้อำนวยการต้น",
+          positionNum: "(ผู้อำนวยการส่วน)",
+          totalPositionCount: 1,
+          totalPositionVacant: 0,
+        },
+      ],
+      children: [
+        {
+          deptID: 11,
+          departmentName: "กลุ่มงานประชุม",
+          totalPositionCount: 6,
+          totalPositionVacant: 0,
+          heads: [
+            {
+              positionID: 11,
+              positionName: "นักจัดการงานทั่วไป",
+              positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
+              totalPositionCount: 1,
+              totalPositionVacant: 0,
+            },
+          ],
+          officer: [
+            {
+              positionID: 12,
+              positionName: "นักจัดการงานทั่วไป",
+              positionNum: "ปก./ชก.",
+              totalPositionCount: 4,
+              totalPositionVacant: 0,
+            },
+            {
+              positionID: 13,
+              positionName: "เจ้าพนักงานธุรการ",
+              positionNum: "ปง./ชง.",
+              totalPositionCount: 1,
+              totalPositionVacant: 0,
+            },
+          ],
+        },
+        {
+          deptID: 12,
+          departmentName: "กลุ่มงานการเมืองและประสานนโยบาย",
+          totalPositionCount: 8,
+          totalPositionVacant: 0,
+          heads: [
+            {
+              positionID: 14,
+              positionName: "นักจัดการงานทั่วไป",
+              positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
+              totalPositionCount: 1,
+              totalPositionVacant: 0,
+            },
+          ],
+          officer: [
+            {
+              positionID: 15,
+              positionName: "นักจัดการงานทั่วไป",
+              positionNum: "ปก./ชก.",
+              totalPositionCount: 4,
+              totalPositionVacant: 0,
+            },
+            {
+              positionID: 16,
+              positionName: "เจ้าพนักงานสถิติ",
+              positionNum: "ปง./ชง.",
+              totalPositionCount: 1,
+              totalPositionVacant: 0,
+            },
+            {
+              positionID: 17,
+              positionName: "เจ้าพนักงานธุรการ",
+              positionNum: "ปง./ชง.",
+              totalPositionCount: 2,
+              totalPositionVacant: 0,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      deptID: 14,
+      departmentName: "ส่วนเรื่องราวร้องทุกข์",
+      totalPositionCount: 15,
+      totalPositionVacant: 0,
+      heads: [
+        {
+          positionID: 18,
+          positionName: "ผู้อำนวยการต้น",
+          positionNum: "(ผู้อำนวยการส่วน)",
+          totalPositionCount: 1,
+          totalPositionVacant: 0,
+        },
+      ],
+      children: [
+        {
+          deptID: 15,
+          departmentName: "กลุ่มงานรับเรื่องราวร้องทุกข์",
+          totalPositionCount: 7,
+          totalPositionVacant: 0,
+          heads: [
+            {
+              positionID: 19,
+              positionName: "นักจัดการงานทั่วไป",
+              positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
+              totalPositionCount: 1,
+              totalPositionVacant: 0,
+            },
+          ],
+          officer: [
+            {
+              positionID: 20,
+              positionName: "นักจัดการงานทั่วไป",
+              positionNum: "ปก./ชก.",
+              totalPositionCount: 4,
+              totalPositionVacant: 0,
+            },
+            {
+              positionID: 21,
+              positionName: "เจ้าพนักงานธุรการ",
+              positionNum: "ปง./ชง.",
+              totalPositionCount: 2,
+              totalPositionVacant: 0,
+            },
+          ],
+        },
+        {
+          deptID: 16,
+          departmentName: "กลุ่มงานตรวจสอบ ติดตามและประมวลผล",
+          totalPositionCount: 7,
+          totalPositionVacant: 0,
+          heads: [
+            {
+              positionID: 22,
+              positionName: "นักจัดการงานทั่วไป",
+              positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
+              totalPositionCount: 1,
+              totalPositionVacant: 0,
+            },
+          ],
+          officer: [
+            {
+              positionID: 23,
+              positionName: "นักจัดการงานทั่วไป",
+              positionNum: "ปก./ชก.",
+              totalPositionCount: 4,
+              totalPositionVacant: 0,
+            },
+            {
+              positionID: 24,
+              positionName: "เจ้าพนักงานธุรการ",
+              positionNum: "ปง./ชง.",
+              totalPositionCount: 2,
+              totalPositionVacant: 0,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
 
-			]
-		},
-		{
-			deptID: 14,
-			departmentName: "ส่วนเรื่องราวร้องทุกข์",
-			totalPositionCount: 15,
-			totalPositionVacant: 0,
-			heads: [
-				{
-					positionID: 18,
-					positionName: "ผู้อำนวยการต้น",
-					positionNum: "(ผู้อำนวยการส่วน)",
-					totalPositionCount: 1,
-					totalPositionVacant: 0
-				}
-			],
-			children: [
-				{
-					deptID: 15,
-					departmentName: "กลุ่มงานรับเรื่องราวร้องทุกข์",
-					totalPositionCount: 7,
-					totalPositionVacant: 0,
-					heads: [
-						{
-							positionID: 19,
-							positionName: "นักจัดการงานทั่วไป",
-							positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
-							totalPositionCount: 1,
-							totalPositionVacant: 0
-						}
-					],
-					officer: [
-						{
-							positionID: 20,
-							positionName: "นักจัดการงานทั่วไป",
-							positionNum: "ปก./ชก.",
-							totalPositionCount: 4,
-							totalPositionVacant: 0
-						},
-						{
-							positionID: 21,
-							positionName: "เจ้าพนักงานธุรการ",
-							positionNum: "ปง./ชง.",
-							totalPositionCount: 2,
-							totalPositionVacant: 0
-						}
-					]
-				},
-				{
-					deptID: 16,
-					departmentName: "กลุ่มงานตรวจสอบ ติดตามและประมวลผล",
-					totalPositionCount: 7,
-					totalPositionVacant: 0,
-					heads: [
-						{
-							positionID: 22,
-							positionName: "นักจัดการงานทั่วไป",
-							positionNum: "ชพ. (หัวหน้ากลุ่มงาน)",
-							totalPositionCount: 1,
-							totalPositionVacant: 0
-						}
-					],
-					officer: [
-						{
-							positionID: 23,
-							positionName: "นักจัดการงานทั่วไป",
-							positionNum: "ปก./ชก.",
-							totalPositionCount: 4,
-							totalPositionVacant: 0
-						},
-						{
-							positionID: 24,
-							positionName: "เจ้าพนักงานธุรการ",
-							positionNum: "ปง./ชง.",
-							totalPositionCount: 2,
-							totalPositionVacant: 0
-						}
-					]
-				}
-
-			]
-		}
-	]
-}
-
-export default chartData
\ No newline at end of file
+export default chartData;
diff --git a/src/components/TableHistory.vue b/src/components/TableHistory.vue
index ad631ec58..eddd27bfd 100644
--- a/src/components/TableHistory.vue
+++ b/src/components/TableHistory.vue
@@ -97,6 +97,7 @@
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
+                <q-th auto-width v-if="history == true" />
               </q-tr>
             </template>
             <!-- สำหรับเรียกใช้ template ตัวข้างนอก -->
@@ -156,6 +157,10 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
+  history: {
+    type: Boolean,
+    defualt: false,
+  },
   //   optionsHistory: Array,
   //   updateHistory: {
   //     type: Function,
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 377179b8d..4a463859c 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -127,12 +127,12 @@ const menuList = readonly<any[]>([
         role: "recruit",
         children: [
           {
-            label: "จัดการข้อมูลผู้สมัครสอบ" /* แข่งขัน */,
+            label: "จัดการรอบสอบแข่งขัน" /* แข่งขัน */,
             path: "competePeriod",
             role: "recruit",
           },
           {
-            label: "ข้อมูลสถิติการสมัครสอบ" /* แข่งขัน */,
+            label: "สถิติสมัครสอบแข่งขัน" /* แข่งขัน */,
             path: "competePeriodStat",
             role: "recruit",
           },
@@ -233,6 +233,26 @@ const tabList = readonly<tabType[]>([
     label: "ข้อมูลทั่วไป",
     tag: "information",
   },
+  {
+    key: 19,
+    label: "ประวัติการเปลี่ยนชื่อ",
+    tag: "oldName",
+  },
+  {
+    key: 16,
+    label: "ข้อมูลราชการ",
+    tag: "government",
+  },
+  {
+    key: 17,
+    label: "ข้อมูลที่อยู่",
+    tag: "address",
+  },
+  {
+    key: 18,
+    label: "ข้อมูลครอบครัว",
+    tag: "family",
+  },
   {
     key: 15,
     label: "ใบอนุญาตประกอบอาชีพ",
@@ -265,7 +285,7 @@ const tabList = readonly<tabType[]>([
   },
   {
     key: 7,
-    label: "ตำแหน่ง/เงินเดือน",
+    label: "ตำแหน่ง/เงินเดือน/ค่าจ้าง",
     tag: "position",
   },
   {
diff --git a/src/interface/request/manage/prefix.ts b/src/interface/request/manage/prefix.ts
index 26fa74e2e..b73cdfbc5 100644
--- a/src/interface/request/manage/prefix.ts
+++ b/src/interface/request/manage/prefix.ts
@@ -12,7 +12,7 @@ interface ResultHistoryObject {
   version: String;
 }
 
-//ข้อมูล คำนำหน้า
+//ข้อมูล คำนำหน้าชื่อ
 interface RequestPrefixHistoryObject {
   createdAt?: Date;
   createdFullName: String;
diff --git a/src/interface/response/manage/prefix.ts b/src/interface/response/manage/prefix.ts
index ac28ca790..a4a8f99ac 100644
--- a/src/interface/response/manage/prefix.ts
+++ b/src/interface/response/manage/prefix.ts
@@ -1,4 +1,4 @@
-//ข้อมูล คำนำหน้า
+//ข้อมูล คำนำหน้าชื่อ
 interface ResponsePrefixHistoryObject {
   createdAt?: Date;
   createdFullName: String;
diff --git a/src/modules/01_metadata/components/organization/Organization.vue b/src/modules/01_metadata/components/organization/Organization.vue
index 4f6d1a7b2..4e5b34c58 100644
--- a/src/modules/01_metadata/components/organization/Organization.vue
+++ b/src/modules/01_metadata/components/organization/Organization.vue
@@ -221,7 +221,7 @@ const { manageData, changeManageColumns, getOrganization, dataOrganization } =
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
-const tittleHistory = ref<string>("ประวัติแก้ไขชื่อหน่วยงาน"); //
+const tittleHistory = ref<string>("ประวัติแก้ไขชื่อหน่วยงาน/ส่วนราชการ"); //
 const myForm = ref<any>(null); //ref สำหรับเช็คข้อมูลว่ามีช่องว่างไหม
 const filter = ref<string>(""); //search data table
 const filterHistory = ref<string>(""); //search data table history
diff --git a/src/modules/01_metadata/components/organization/ShortName.vue b/src/modules/01_metadata/components/organization/ShortName.vue
index d93096222..10d6ade7a 100644
--- a/src/modules/01_metadata/components/organization/ShortName.vue
+++ b/src/modules/01_metadata/components/organization/ShortName.vue
@@ -266,7 +266,7 @@ const {
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
-const tittleHistory = ref<string>("ประวัติแก้ไขชื่อหน่วยงาน"); //
+const tittleHistory = ref<string>("ประวัติแก้ไขตัวย่อหน่วยงาน/ส่วนราชการ"); //
 const myForm = ref<any>(null); //ref สำหรับเช็คข้อมูลว่ามีช่องว่างไหม
 const filter = ref<string>(""); //search data table
 const filterHistory = ref<string>(""); //search data table history
@@ -282,7 +282,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "agencyCode",
     align: "left",
-    label: "รหัสหน่วยงาน",
+    label: "หน่วยงานต้นสังกัด",
     sortable: true,
     field: "agencyCode",
     headerStyle: "font-size: 14px",
@@ -293,7 +293,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "governmentCode",
     align: "left",
-    label: "รหัสส่วนราชการ",
+    label: "ส่วนราชการต้นสังกัด",
     sortable: true,
     field: "governmentCode",
     headerStyle: "font-size: 14px",
@@ -304,7 +304,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "ตัวย่อหน่วยงาน",
+    label: "ตัวย่อหน่วยงาน/ส่วนราชการ",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -387,7 +387,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "agencyCode",
     align: "left",
-    label: "รหัสหน่วยงาน",
+    label: "หน่วยงานต้นสังกัด",
     sortable: true,
     field: "agencyCode",
     headerStyle: "font-size: 14px",
@@ -398,7 +398,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "governmentCode",
     align: "left",
-    label: "รหัสส่วนราชการ",
+    label: "ส่วนราชการต้นสังกัด",
     sortable: true,
     field: "governmentCode",
     headerStyle: "font-size: 14px",
@@ -409,7 +409,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "ตัวย่อหน่วยงาน",
+    label: "ตัวย่อหน่วยงาน/ส่วนราชการ",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -691,7 +691,7 @@ const save = async (publish: boolean) => {
 
 /**
  * เช็ครหัสซ้ำกับข้อมูลที่มีอยู่แล้ว
- * @param val input รหัสส่วนราชการ
+ * @param val input ส่วนราชการต้นสังกัด
  */
 const checkDupDataGovernmentCode = (gCode: string, aCode: string) => {
   if (gCode == null || gCode == "") return true;
diff --git a/src/modules/01_metadata/components/organization/TelExternal.vue b/src/modules/01_metadata/components/organization/TelExternal.vue
index 5eb7278ba..677bc905a 100644
--- a/src/modules/01_metadata/components/organization/TelExternal.vue
+++ b/src/modules/01_metadata/components/organization/TelExternal.vue
@@ -1,4 +1,4 @@
-<!-- tab หมายเลขโทรศัพท์ภายนอก หน้าจัดการข้อมูลหลัก/ข้อมูลโครงสร้างหน่วยงาน -->
+<!-- tab หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก หน้าจัดการข้อมูลหลัก/ข้อมูลโครงสร้างหน่วยงาน -->
 <template>
   <div>
     <q-form ref="myForm">
@@ -213,7 +213,9 @@ const {
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
-const tittleHistory = ref<string>("ประวัติแก้ไขหมายเลขโทรศัพท์ภายนอก"); //
+const tittleHistory = ref<string>(
+  "ประวัติแก้ไขหมายเลขโทรศัพท์ที่ติดต่อจากภายนอก"
+); //
 const myForm = ref<any>(null); //ref สำหรับเช็คข้อมูลว่ามีช่องว่างไหม
 const filter = ref<string>(""); //search data table
 const filterHistory = ref<string>(""); //search data table history
@@ -229,7 +231,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "หมายเลขโทรศัพท์ภายนอก",
+    label: "หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -298,7 +300,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "หมายเลขโทรศัพท์ภายนอก",
+    label: "หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/01_metadata/components/organization/TelInternal.vue b/src/modules/01_metadata/components/organization/TelInternal.vue
index 1cdf05949..61365f3d8 100644
--- a/src/modules/01_metadata/components/organization/TelInternal.vue
+++ b/src/modules/01_metadata/components/organization/TelInternal.vue
@@ -1,4 +1,4 @@
-<!-- tab หมายเลขโทรศัพท์ภายใน หน้าจัดการข้อมูลหลัก/ข้อมูลโครงสร้างหน่วยงาน -->
+<!-- tab หมายเลขโทรศัพท์ที่ติดต่อจากภายใน หน้าจัดการข้อมูลหลัก/ข้อมูลโครงสร้างหน่วยงาน -->
 <template>
   <div>
     <q-form ref="myForm">
@@ -213,7 +213,9 @@ const {
 const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
-const tittleHistory = ref<string>("ประวัติแก้ไขหมายเลขโทรศัพท์ภายใน"); //
+const tittleHistory = ref<string>(
+  "ประวัติแก้ไขหมายเลขโทรศัพท์ที่ติดต่อจากภายใน"
+); //
 const myForm = ref<any>(null); //ref สำหรับเช็คข้อมูลว่ามีช่องว่างไหม
 const filter = ref<string>(""); //search data table
 const filterHistory = ref<string>(""); //search data table history
@@ -229,7 +231,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "หมายเลขโทรศัพท์ภายใน",
+    label: "หมายเลขโทรศัพท์ที่ติดต่อจากภายใน",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -298,7 +300,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "หมายเลขโทรศัพท์ภายใน",
+    label: "หมายเลขโทรศัพท์ที่ติดต่อจากภายใน",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/01_metadata/components/person/Prefix.vue b/src/modules/01_metadata/components/person/Prefix.vue
index 4505e13b1..f3e08a01b 100644
--- a/src/modules/01_metadata/components/person/Prefix.vue
+++ b/src/modules/01_metadata/components/person/Prefix.vue
@@ -1,4 +1,4 @@
-<!-- tab คำนำหน้า หน้าจัดการข้อมูลหลัก/ข้อมูลเกี่ยวกับบุคคล -->
+<!-- tab คำนำหน้าชื่อ หน้าจัดการข้อมูลหลัก/ข้อมูลเกี่ยวกับบุคคล -->
 <template>
   <div>
     <q-form ref="myForm">
@@ -209,7 +209,7 @@ const { manageData, changeManageColumns, getPrefix, dataPrefix } = store;
 const rows = ref<RequestItemsHistoryObject[]>(dataPrefix.data); //list data table
 const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
 const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
-const tittleHistory = ref<string>("ประวัติแก้ไขคำนำหน้า"); //
+const tittleHistory = ref<string>("ประวัติแก้ไขคำนำหน้าชื่อ"); //
 const myForm = ref<any>(null); //ref สำหรับเช็คข้อมูลว่ามีช่องว่างไหม
 const filter = ref<string>(""); //search data table
 const filterHistory = ref<string>(""); //search data table history
@@ -225,7 +225,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "คำนำหน้า",
+    label: "คำนำหน้าชื่อ",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -294,7 +294,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "คำนำหน้า",
+    label: "คำนำหน้าชื่อ",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/01_metadata/views/Main.vue b/src/modules/01_metadata/views/Main.vue
index 1f1fee168..72230ca57 100644
--- a/src/modules/01_metadata/views/Main.vue
+++ b/src/modules/01_metadata/views/Main.vue
@@ -469,7 +469,7 @@ const lists = ref<DataListsObject[]>([
   { name: "ข้อมูลเครื่องราชอิสริยาภรณ์", count: 0, id: 6 },
 ]);
 const tabsPerson = [
-  { label: "คำนำหน้า", value: "person_prefix" },
+  { label: "คำนำหน้าชื่อ", value: "person_prefix" },
   { label: "กลุ่มเลือด", value: "person_blood" },
   { label: "เพศ", value: "person_gender" },
   { label: "ศาสนา", value: "person_religion" },
@@ -478,23 +478,29 @@ const tabsPerson = [
   { label: "จังหวัด", value: "person_province" },
 ];
 const tabsOrganization = [
-  { label: "หน่วยงาน", value: "organization_organization" },
-  { label: "ชื่อย่อหน่วยงาน", value: "organization_shortName" },
-  { label: "ประเภท", value: "organization_type" },
-  { label: "ระดับ", value: "organization_level" },
-  { label: "สถานะ", value: "organization_status" },
-  { label: "เบอร์ติดต่อภายใน", value: "organization_telInternal" },
-  { label: "เบอร์ติดต่อภายนอก", value: "organization_telExternal" },
-  { label: "เบอร์โทรสาร", value: "organization_fax" },
+  { label: "ชื่อหน่วยงาน/ส่วนราชการ", value: "organization_organization" },
+  { label: "ตัวย่อหน่วยงาน/ส่วนราชการ", value: "organization_shortName" },
+  { label: "ประเภทของหน่วยงาน/ส่วนราชการ", value: "organization_type" },
+  { label: "ระดับของหน่วยงาน/ส่วนราชการ", value: "organization_level" },
+  { label: "สถานะของหน่วยงาน/ส่วนราชการ", value: "organization_status" },
+  {
+    label: "หมายเลขโทรศัพท์ที่ติดต่อจากภายใน",
+    value: "organization_telInternal",
+  },
+  {
+    label: "หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก",
+    value: "organization_telExternal",
+  },
+  { label: "หมายเลขโทรสาร", value: "organization_fax" },
 ];
 const tabsPosition = [
-  { label: "ชื่อตำแหน่ง", value: "position_path" },
-  { label: "ด้าน/สาขา", value: "position_pathSide" },
+  { label: "ตำแหน่งประเภท", value: "position_type" },
+  { label: "ชื่อสายงาน", value: "position_line" },
+  { label: "ชื่อตำแหน่งสายงาน", value: "position_path" },
+  { label: "ด้าน/สาขา ของสายงาน", value: "position_pathSide" },
+  { label: "ระดับตำแหน่ง", value: "position_level" },
   { label: "ชื่อตำแหน่งทางการบริหาร", value: "position_executive" },
   { label: "ด้านทางการบริหาร", value: "position_executiveSide" },
-  { label: "ตำแหน่งประเภท", value: "position_type" },
-  { label: "สายงาน ", value: "position_line" },
-  { label: "ระดับ", value: "position_level" },
   { label: "สถานะของตำแหน่ง", value: "position_status" },
 ];
 const tabsPositionEmployee = [
diff --git a/src/modules/02_organizational/components/DialogFooter.vue b/src/modules/02_organizational/components/DialogFooter.vue
index 0c2493149..a99ee7515 100644
--- a/src/modules/02_organizational/components/DialogFooter.vue
+++ b/src/modules/02_organizational/components/DialogFooter.vue
@@ -3,14 +3,14 @@
     <q-space />
     <q-btn
       v-if="!editvisible"
-      outline
+      flat
+      round
       :disabled="editvisible"
       :color="editvisible ? 'grey-7' : 'primary'"
       @click="edit"
-      label="แก้ไขข้อมูล"
-      
-    ><!--  icon="mdi-pencil-outline"
-      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
+      icon="mdi-pencil-outline"
+    >
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
     </q-btn>
     <div v-else>
       <!-- <q-btn
@@ -26,14 +26,14 @@
         <q-tooltip>ยกเลิก</q-tooltip>
       </q-btn> -->
       <q-btn
-        unelevated
-        label="บันทึก"
+        flat
+        round
         :disabled="!editvisible"
         :color="!editvisible ? 'grey-7' : 'public'"
         @click="checkSave"
-        
-      > <!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
       </q-btn>
     </div>
   </q-card-actions>
diff --git a/src/modules/02_organizational/components/Tree/MappingPositions.vue b/src/modules/02_organizational/components/Tree/MappingPositions.vue
index b6ae897b2..5e4889322 100644
--- a/src/modules/02_organizational/components/Tree/MappingPositions.vue
+++ b/src/modules/02_organizational/components/Tree/MappingPositions.vue
@@ -131,7 +131,7 @@
             <ddNoResultMsg />
           </template>
         </q-select>
-        <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
           <q-input
             :class="getClass(true)"
             hide-bottom-space
@@ -145,10 +145,33 @@
             type="textarea"
           />
         </div>
-        <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
           <q-toggle v-model="item.isActive" dense size="34px" color="positive">
             ปกติ
           </q-toggle>
+          <q-toggle
+            v-model="item.isCondition"
+            dense
+            size="34px"
+            color="positive"
+            class="q-pl-md"
+          >
+            ติดเงื่อนไข
+          </q-toggle>
+        </div>
+        <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
+          <q-input
+            :class="getClass(true)"
+            hide-bottom-space
+            :outlined="true"
+            dense
+            lazy-rules
+            :readonly="false"
+            :borderless="false"
+            v-model="item.conditionNote"
+            :label="`${'รายละเอียดเงื่อนไข'}`"
+            type="textarea"
+          />
         </div>
       </div>
     </div>
@@ -294,7 +317,7 @@
             label="จำนวน"
             :rules="[(val:any) => val > 0 || `${'ต้องมากกว่า 0'}`]"
           />
-          <div class="col-xs-12 col-sm-12 col-md-12">
+          <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
             <q-input
               :class="getClass(true)"
               hide-bottom-space
@@ -308,7 +331,7 @@
               type="textarea"
             />
           </div>
-          <div class="col-xs-12 col-sm-12 col-md-12">
+          <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
             <q-toggle
               v-model="item.isActive"
               dense
@@ -317,6 +340,29 @@
             >
               ปกติ
             </q-toggle>
+            <q-toggle
+              v-model="item.isCondition"
+              dense
+              size="34px"
+              color="positive"
+              class="q-pl-md"
+            >
+              ติดเงื่อนไข
+            </q-toggle>
+          </div>
+          <div class="col-xs-12 col-sm-12 col-md-12 q-pt-sm">
+            <q-input
+              :class="getClass(true)"
+              hide-bottom-space
+              :outlined="true"
+              dense
+              lazy-rules
+              :readonly="false"
+              :borderless="false"
+              v-model="item.conditionNote"
+              :label="`${'รายละเอียดเงื่อนไข'}`"
+              type="textarea"
+            />
           </div>
         </div>
       </q-card>
@@ -362,6 +408,8 @@ watch(myForm, (form: QForm | null, prevForm: QForm | null) => {
       positions.value[0].positionMasterId = props.editObj?.positionMasterId;
       positions.value[0].positionUserNote = props.editObj?.positionUserNote;
       positions.value[0].isActive = props.editObj?.isActive;
+      positions.value[0].isCondition = props.editObj?.isCondition;
+      positions.value[0].conditionNote = props.editObj?.conditionNote;
     }
   }
   emit("update:formprops", form);
@@ -373,6 +421,8 @@ const positionSet = ref<object>({
   positionMasterId: "", // ชื่อตำแหน่ง จากระบบข้อมูลหลัก Table PositionMaster เช่น นักจัดการงานทั่วไป,พยาบาลชำนาญการ
   positionUserNote: "",
   isActive: true,
+  isCondition: false,
+  conditionNote: "",
 }); //เก็บข้อมูลที่จะเลือกใน Drop Down แต่ละตัวจะต้องมี key ของมัน เพื่อส่งไปให้ API
 emit("update:positions", positions.value);
 
@@ -395,6 +445,8 @@ const fetchPositionMaster = async () => {
         positionFilter.value.push({
           id: e.id,
           isActive: e.isActive,
+          isCondition: e.isCondition,
+          conditionNote: e.conditionNote,
           positionType: e.positionType,
           positionLine: e.positionLine,
           positionPath: e.positionPath,
diff --git a/src/modules/02_organizational/interface/response/Mapping.ts b/src/modules/02_organizational/interface/response/Mapping.ts
index dae1752e9..7707cf465 100644
--- a/src/modules/02_organizational/interface/response/Mapping.ts
+++ b/src/modules/02_organizational/interface/response/Mapping.ts
@@ -24,6 +24,7 @@ interface ResponseObject {
 interface ResponseTree {
   no: number;
   profilePositionId: string | null;
+  organizationPositionId: string | null;
   name: string | null;
   edu: string | null;
   posiNumOld: string | null;
@@ -33,7 +34,7 @@ interface ResponseTree {
   levelOld: any;
   levelNew: any;
   change: string | null;
-  statusPosition: Boolean;
+  statusPosition: string | null;
   report2Id: string | null;
 }
 
diff --git a/src/modules/02_organizational/views/MainReport.vue b/src/modules/02_organizational/views/MainReport.vue
index 4733ef666..cef5c27fb 100644
--- a/src/modules/02_organizational/views/MainReport.vue
+++ b/src/modules/02_organizational/views/MainReport.vue
@@ -1,128 +1,116 @@
 <template>
-  <div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
-  <q-card flat bordered class="col-12">
-    <div class="row col-12">
-      <q-tabs
-        v-model="tab"
-        no-caps
-        inline-label
-        align="left"
-        class="text-primary"
-      >
-        <q-tab name="audit1" label="บัญชี 1" />
-        <q-tab name="audit2" label="บัญชี 2" />
-        <q-tab name="audit3" label="บัญชี 3" />
-      </q-tabs>
-    </div>
-    <q-separator />
-    <q-tab-panels
-      v-model="tab"
-      transition-prev="jump-up"
-      transition-next="jump-up"
-      animated
-      swipeable
-      class="row col-12 text-dark"
-    >
-      <q-tab-panel name="audit1">
-        <div class="row col-12 items-center q-gutter-md">
-          <q-select
-            class="col-xs-12 col-sm-6"
-            v-model="goverment"
-            label="ระบุรหัสส่วนราชการ"
-            dense
-            emit-value
-            map-options
-            option-label="name"
-            :options="govermentOP"
-            option-value="id"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-          />
-          <q-btn
-            size="md"
-            icon="mdi-download"
-            round
-            flat
-            color="primary"
-            @click="clickAccount1"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-        </div>
-      </q-tab-panel>
-      <q-tab-panel name="audit2">
-        <div class="row col-12 items-center q-gutter-md">
-          <q-select
-            class="col-xs-12 col-sm-6"
-            v-model="goverment"
-            label="ระบุรหัสส่วนราชการ"
-            dense
-            emit-value
-            map-options
-            option-label="name"
-            :options="govermentOP"
-            option-value="id"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-          />
+	<div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
+	<q-card flat bordered class="col-12">
+		<div class="row col-12">
+			<q-tabs
+				v-model="tab"
+				no-caps
+				inline-label
+				align="left"
+				class="text-primary"
+			>
+				<q-tab name="audit1" label="บัญชี 1" />
+				<q-tab name="audit2" label="บัญชี 2" />
+				<q-tab name="audit3" label="บัญชี 3" />
+			</q-tabs>
+		</div>
+		<q-separator />
+		<q-tab-panels
+			v-model="tab"
+			transition-prev="jump-up"
+			transition-next="jump-up"
+			animated
+			swipeable
+			class="row col-12 text-dark"
+		>
+			<q-tab-panel name="audit1">
+				<div class="row col-12 items-center q-gutter-md">
+					<q-select
+						class="col-xs-12 col-sm-6"
+						v-model="goverment"
+						label="ระบุหน่วยงานที่ต้องการออกรายงาน"
+						dense
+						:options="govermentOP"
+						lazy-rules
+						hide-bottom-space
+						:readonly="false"
+						:borderless="false"
+						:outlined="true"
+						:hide-dropdown-icon="false"
+					/>
+					<q-btn
+						size="md"
+						icon="mdi-download"
+						round
+						flat
+						color="primary"
+						@click="clickAccount1"
+					>
+						<q-tooltip>ดาวน์โหลด</q-tooltip>
+					</q-btn>
+				</div>
+			</q-tab-panel>
+			<q-tab-panel name="audit2">
+				<div class="row col-12 items-center q-gutter-md">
+					<q-select
+						class="col-xs-12 col-sm-6"
+						v-model="goverment"
+						label="ระบุรหัสส่วนราชการ"
+						dense
+						:options="govermentOP"
+						lazy-rules
+						hide-bottom-space
+						:readonly="false"
+						:borderless="false"
+						:outlined="true"
+						:hide-dropdown-icon="false"
+					/>
 
-          <q-btn
-            size="md"
-            icon="mdi-download"
-            flat
-            round
-            color="primary"
-            @click="clickAccount2"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-        </div>
-      </q-tab-panel>
-      <q-tab-panel name="audit3">
-        <div class="row col-12 items-center q-gutter-md">
-          <q-select
-            class="col-xs-12 col-sm-6"
-            v-model="goverment"
-            label="ระบุรหัสส่วนราชการ"
-            dense
-            emit-value
-            map-options
-            option-label="name"
-            :options="govermentOP"
-            option-value="id"
-            lazy-rules
-            hide-bottom-space
-            :readonly="false"
-            :borderless="false"
-            :outlined="true"
-            :hide-dropdown-icon="false"
-          />
-          <q-btn
-            size="md"
-            icon="mdi-download"
-            flat
-            round
-            color="primary"
-            @click="clickAccount3"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-            <!-- <viewpdf 
+					<q-btn
+						size="md"
+						icon="mdi-download"
+						flat
+						round
+						color="primary"
+						@click="clickAccount2"
+					>
+						<q-tooltip>ดาวน์โหลด</q-tooltip>
+					</q-btn>
+				</div>
+			</q-tab-panel>
+			<q-tab-panel name="audit3">
+				<div class="row col-12 items-center q-gutter-md">
+					<q-select
+						class="col-xs-12 col-sm-6"
+						v-model="goverment"
+						label="ระบุรหัสส่วนราชการ"
+						dense
+						:options="govermentOP"
+						lazy-rules
+						hide-bottom-space
+						:readonly="false"
+						:borderless="false"
+						:outlined="true"
+						:hide-dropdown-icon="false"
+					/>
+					<q-btn
+						size="md"
+						icon="mdi-download"
+						flat
+						round
+						color="primary"
+						@click="clickAccount3"
+					>
+						<q-tooltip>ดาวน์โหลด</q-tooltip>
+						<!-- <viewpdf 
                         :src="pdfSrc" 
                         :currentpage="pdfCurrentPage" 
                         :totalpage="pdfTotalPage" /> -->
-          </q-btn>
-        </div>
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-card>
+					</q-btn>
+				</div>
+			</q-tab-panel>
+		</q-tab-panels>
+	</q-card>
 </template>
 <script setup lang="ts">
 import { onMounted, computed, ref, watch } from "vue";
@@ -144,54 +132,123 @@ const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
+const { messageError, modalError, modalWarning } = mixin;
 const router = useRouter();
 const route = useRoute();
 const { date2Thai, success, dateToISO } = mixin;
 
-const govermentOP = ref<DataOption[]>([]);
-const govermentOPfilter = ref<DataOption[]>([]);
-const goverment = ref<string>("");
+const govermentOP = ref<any[]>([]);
+const govermentOPfilter = ref<any[]>([]);
+const goverment = ref<any>();
 const tab = ref<string>("audit1");
 
 const clickAccount1 = async () => {
-  window.open(config.API.getReportAccount1(goverment.value));
+	if (goverment.value === null || goverment.value === undefined) {
+		modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
+		return;
+	}
+	loaderPage(true);
+	await http
+		.get(config.API.getReportAccount1(goverment.value?.value as string), {
+			responseType: "blob",
+		})
+		.then((res) => {
+			var a = document.createElement("a");
+			a.href = URL.createObjectURL(res.data);
+			a.download = `รายงานบัญชี1_${goverment.value?.label}.pdf`;
+			// start download
+			a.click();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
+
+	// window.open(config.API.getReportAccount1(goverment.value));
 };
 
 const clickAccount2 = async () => {
-  window.open(config.API.getReportAccount2(goverment.value));
+	if (goverment.value === null || goverment.value === undefined) {
+		modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
+		return;
+	}
+	loaderPage(true);
+	await http
+		.get(config.API.getReportAccount2(goverment.value?.value as string), {
+			responseType: "blob",
+		})
+		.then((res) => {
+			var a = document.createElement("a");
+			a.href = URL.createObjectURL(res.data);
+			a.download = `รายงานบัญชี2_${goverment.value?.label}.pdf`;
+			// start download
+			a.click();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
+	//window.open(config.API.getReportAccount2(goverment.value));
 };
 
 const clickAccount3 = async () => {
-  window.open(config.API.getReportAccount3(goverment.value));
+	if (goverment.value === null || goverment.value === undefined) {
+		modalWarning($q, "คำเตือน", "กรุณาเลือกหน่วยงานที่ต้องการออกรายงาน!");
+		return;
+	}
+	loaderPage(true);
+	await http
+		.get(config.API.getReportAccount3(goverment.value?.value as string), {
+			responseType: "blob",
+		})
+		.then((res) => {
+			var a = document.createElement("a");
+			a.href = URL.createObjectURL(res.data);
+			a.download = `รายงานบัญชี3_${goverment.value?.label}.pdf`;
+			// start download
+			a.click();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
+	// window.open(config.API.getReportAccount3(goverment.value));
 };
 
 const fetchOrganizationAgency = async () => {
-  loaderPage(true);
-  await http
-    // .get(config.API.organizationAgency)
-    .get(config.API.getOCType)
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: any) => {
-        option.push({
-          id: r.organizationId.toString(),
-          name: r.organizationName.toString(),
-        });
-      });
-      govermentOP.value = option;
-      govermentOPfilter.value = option;
-    })
-    .catch((e) => {
-      console.log(e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	loaderPage(true);
+	await http
+		// .get(config.API.organizationAgency)
+		.get(config.API.getOCType)
+		.then((res) => {
+			const data = res.data.result;
+			let option: any[] = [];
+			data.map((r: any) => {
+				option.push({
+					value: r.organizationId.toString(),
+					label: r.organizationName.toString(),
+				});
+			});
+			govermentOP.value = option;
+			govermentOPfilter.value = option;
+		})
+		.catch((e) => {
+			console.log(e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 onMounted(async () => {
-  loaderPage(false);
-  await fetchOrganizationAgency();
+	loaderPage(false);
+	await fetchOrganizationAgency();
+	console.log(govermentOP.value);
 });
 </script>
diff --git a/src/modules/02_organizational/views/MainTree.vue b/src/modules/02_organizational/views/MainTree.vue
index c75566f2f..c212bb6e0 100644
--- a/src/modules/02_organizational/views/MainTree.vue
+++ b/src/modules/02_organizational/views/MainTree.vue
@@ -2,78 +2,102 @@
 <!-- หน้า ผังโครงสร้าง(Tree) ของ โครงสร้างอัตรากำลัง -->
 <!-- =============================== -->
 <template>
-  <div class="toptitle text-dark col-12 row items-center">ผังโครงสร้าง</div>
-  <div class="text-dark">
-    <q-card flat bordered class="col-12 q-mt-sm">
-      <q-layout
-        view="hHh Lpr lff"
-        container
-        style="height: 80vh"
-        class="shadow-2 rounded-borders page-relative"
-      >
-        <!--Drawer Person Detail-->
-        <q-drawer
-          v-model="isDrawer"
-          :width="220"
-          :breakpoint="400"
-          class="bg-grey-1"
-          bordered
-        >
-          <q-btn
-            size="13px"
-            class="btn-absolute btnShadow"
-            color="white"
-            dense
-            round
-            unelevated
-            @click="isDrawer = false"
-            v-if="isDrawer"
-          >
-            <q-icon name="chevron_left" size="20px" color="grey-7" />
-          </q-btn>
-          <q-scroll-area class="fit">
-            <div class="row col-12 text-dark q-pt-sm">
-              <div class="col-12 column items-center q-py-lg">
-                <img
-                  v-if="
-                    personDetail == null ||
-                    personDetail.avatar == '' ||
-                    personDetail.avatar ==
-                      'https://cdn.quasar.dev/img/boy-avatar.png'
-                  "
-                  src="@/assets/avatar_user.jpg"
-                  style="width: 90px; height: 90px; border-radius: 50%"
-                />
-                <img
-                  v-else
-                  :src="personDetail.avatar"
-                  style="width: 90px; height: 90px; border-radius: 50%"
-                />
-              </div>
-              <div class="col-12 items-center row col-12 justify-center">
-                <div style="font-weight: 600" class="q-mr-xs">
-                  {{ personDetail ? personDetail.name : "" }}
-                </div>
-                <q-btn dense flat size="10px">
-                  <q-icon
-                    name="mdi-open-in-new"
-                    size="15px"
-                    color="grey-6"
-                    @click="goToUserRegistry()"
-                  />
-                  <q-tooltip>ทะเบียนประวัติ</q-tooltip>
-                </q-btn>
-              </div>
-              <div class="q-pl-lg q-pt-sm q-gutter-xs textSub">
-                <div class="text-weight-medium q-pt-md row items-center">
-                  <q-icon size="10px" color="grey-4" name="mdi-circle" />
-                  <div class="q-pl-sm">ตำแหน่งเลขที่</div>
-                </div>
-                <div class="text-grey-7 q-pl-lg">
-                  {{ personDetail ? personDetail.positionNum : "" }}
-                </div>
+	<div class="toptitle text-dark col-12 row items-center">ผังโครงสร้าง</div>
+	<div class="text-dark">
+		<q-card flat bordered class="col-12 q-mt-sm">
+			<q-layout
+				view="hHh Lpr lff"
+				container
+				style="height: 80vh"
+				class="shadow-2 rounded-borders page-relative"
+			>
+				<!--Drawer Person Detail-->
+				<q-drawer
+					v-model="isDrawer"
+					:width="220"
+					:breakpoint="400"
+					class="bg-grey-1"
+					bordered
+				>
+					<q-btn
+						size="13px"
+						class="btn-absolute btnShadow"
+						color="white"
+						dense
+						round
+						unelevated
+						@click="isDrawer = false"
+						v-if="isDrawer"
+					>
+						<q-icon
+							name="chevron_left"
+							size="20px"
+							color="grey-7"
+						/>
+					</q-btn>
+					<q-scroll-area class="fit">
+						<div class="row col-12 text-dark q-pt-sm">
+							<div class="col-12 column items-center q-py-lg">
+								<img
+									v-if="
+										personDetail == null ||
+										personDetail.avatar == '' ||
+										personDetail.avatar ==
+											'https://cdn.quasar.dev/img/boy-avatar.png'
+									"
+									src="@/assets/avatar_user.jpg"
+									style="
+										width: 90px;
+										height: 90px;
+										border-radius: 50%;
+									"
+								/>
+								<img
+									v-else
+									:src="personDetail.avatar"
+									style="
+										width: 90px;
+										height: 90px;
+										border-radius: 50%;
+									"
+								/>
+							</div>
+							<div
+								class="col-12 items-center row col-12 justify-center"
+							>
+								<div style="font-weight: 600" class="q-mr-xs">
+									{{ personDetail ? personDetail.name : "" }}
+								</div>
+								<q-btn dense flat size="10px">
+									<q-icon
+										name="mdi-open-in-new"
+										size="15px"
+										color="grey-6"
+										@click="goToUserRegistry()"
+									/>
+									<q-tooltip>ทะเบียนประวัติ</q-tooltip>
+								</q-btn>
+							</div>
+							<div class="q-pl-lg q-pt-sm q-gutter-xs textSub">
+								<div
+									class="text-weight-medium q-pt-md row items-center"
+								>
+									<q-icon
+										size="10px"
+										color="grey-4"
+										name="mdi-circle"
+									/>
+									<div class="q-pl-sm">ตำแหน่งเลขที่</div>
+								</div>
+								<div class="text-grey-7 q-pl-lg">
+									{{
+										personDetail
+											? personDetail.positionNum
+											: ""
+									}}
+								</div>
 
-                <!-- <div class="text-weight-medium q-pt-md row items-center">
+								<!-- <div class="text-weight-medium q-pt-md row items-center">
                   <q-icon size="10px" color="grey-4" name="mdi-circle" />
                   <div class="q-pl-sm">ตำแหน่งในการบริหารงาน</div>
                 </div>
@@ -81,670 +105,935 @@
                   {{ personDetail ? personDetail.executivePosition : "" }}
                 </div> -->
 
-                <div class="text-weight-medium q-pt-md row items-center">
-                  <q-icon size="10px" color="grey-4" name="mdi-circle" />
-                  <div class="q-pl-sm">ประเภทตำแหน่ง</div>
-                </div>
-                <div class="text-grey-7 q-pl-lg">
-                  {{ personDetail ? personDetail.positionType : "" }}
-                </div>
+								<div
+									class="text-weight-medium q-pt-md row items-center"
+								>
+									<q-icon
+										size="10px"
+										color="grey-4"
+										name="mdi-circle"
+									/>
+									<div class="q-pl-sm">ตำแหน่งประเภท</div>
+								</div>
+								<div class="text-grey-7 q-pl-lg">
+									{{
+										personDetail
+											? personDetail.positionType
+											: ""
+									}}
+								</div>
 
-                <div class="text-weight-medium q-pt-md row items-center">
-                  <q-icon size="10px" color="grey-4" name="mdi-circle" />
-                  <div class="q-pl-sm">ระดับตำแหน่ง</div>
-                </div>
-                <div class="text-grey-7 q-pl-lg">
-                  {{ personDetail ? personDetail.positionLevel : "" }}
-                </div>
-              </div>
-            </div>
-          </q-scroll-area>
-        </q-drawer>
+								<div
+									class="text-weight-medium q-pt-md row items-center"
+								>
+									<q-icon
+										size="10px"
+										color="grey-4"
+										name="mdi-circle"
+									/>
+									<div class="q-pl-sm">ระดับตำแหน่ง</div>
+								</div>
+								<div class="text-grey-7 q-pl-lg">
+									{{
+										personDetail
+											? personDetail.positionLevel
+											: ""
+									}}
+								</div>
+							</div>
+						</div>
+					</q-scroll-area>
+				</q-drawer>
 
-        <!--Edit Button Set and Search Tree input and Show Free positionNum-->
-        <q-page-container class="col-12 row">
-          <q-page padding style="padding-top: 70px">
-            <!-- Button Set -->
-            <q-page-sticky
-              expand
-              position="top"
-              class="bg-white pageSK q-pt-sm"
-            >
-              <div
-                class="col-12 q-px-md row items-center q-py-sm q-col-gutter-xs"
-              >
-                <div class="row">
-                  <buttonsSet
-                    v-model:editvisible="isShowEditTree"
-                    :deleteDraft="deleteDraft"
-                    :publishDraft="publishDraft"
-                    :refreshData="resetTree"
-                    :publicData="version === 'published'"
-                  /><q-btn
-                    color="info"
-                    flat
-                    dense
-                    round
-                    size="14px"
-                    icon="mdi-history"
-                    @click="clickHistory"
-                    ><q-tooltip>ประวัติการเผยแพร่</q-tooltip>
-                  </q-btn>
-                </div>
-                <q-space />
-                <q-input
-                  outlined
-                  dense
-                  style="max-width: 200px"
-                  ref="treeFilterRef"
-                  v-model="treeFilter"
-                  placeholder="ค้นหา"
-                  debounce="300"
-                >
-                  <template v-slot:append>
-                    <q-icon v-if="treeFilter == ''" name="search" />
-                    <q-icon
-                      v-if="treeFilter !== ''"
-                      name="clear"
-                      class="cursor-pointer"
-                      @click="resetFilter"
-                    />
-                  </template>
-                </q-input>
-              </div>
-            </q-page-sticky>
+				<!--Edit Button Set and Search Tree input and Show Free positionNum-->
+				<q-page-container class="col-12 row">
+					<q-page padding style="padding-top: 70px">
+						<!-- Button Set -->
+						<q-page-sticky
+							expand
+							position="top"
+							class="bg-white pageSK q-pt-sm"
+						>
+							<div
+								class="col-12 q-px-md row items-center q-py-sm q-col-gutter-xs"
+							>
+								<div class="row">
+									<buttonsSet
+										v-model:editvisible="isShowEditTree"
+										:deleteDraft="deleteDraft"
+										:publishDraft="publishDraft"
+										:refreshData="resetTree"
+										:publicData="version === 'published'"
+									/><q-btn
+										color="info"
+										flat
+										dense
+										round
+										size="14px"
+										icon="mdi-history"
+										@click="clickHistory"
+										><q-tooltip
+											>ประวัติการเผยแพร่</q-tooltip
+										>
+									</q-btn>
+								</div>
+								<q-space />
+								<q-select
+									dense
+									outlined
+									v-model="selectedFile"
+									:options="fileList"
+									class="col-xs-12 col-sm-4 col-md-3"
+									map-options
+									emit-value
+									v-if="!isShowEditTree"
+								/>
+								<q-input
+									outlined
+									dense
+									style="max-width: 200px"
+									ref="treeFilterRef"
+									v-model="treeFilter"
+									placeholder="ค้นหา"
+									debounce="300"
+								>
+									<template v-slot:append>
+										<q-icon
+											v-if="treeFilter == ''"
+											name="search"
+										/>
+										<q-icon
+											v-if="treeFilter !== ''"
+											name="clear"
+											class="cursor-pointer"
+											@click="resetFilter"
+										/>
+									</template>
+								</q-input>
+							</div>
+						</q-page-sticky>
 
-            <!-- Tree View-->
-            <div class="q-gutter-sm">
-              <q-tree
-                v-show="!isShowEditTree"
-                no-transition
-                ref="qtreeView"
-                :nodes="dataTree"
-                :no-results-label="treeSearchNotFound"
-                :no-nodes-label="noTreeData"
-                node-key="keyId"
-                :filter="treeFilter"
-                :filter-method="treeFilterMethod"
-                v-model:expanded="expandedNodeView"
-              >
-                <!--organization บรรทัดแสดงชื่อหน่วยงาน -->
-                <template v-slot:header-organization="prop">
-                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-                    <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                    <div>
-                      <div class="text-weight-medium">
-                        {{ prop.node.organizationName }}
-                      </div>
-                      <div class="text-weight-light">
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.governmentCode
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.agency
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.government
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.department
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.pile
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.organizationShortName
-                        }}
-                      </div>
-                    </div>
-                    <!--แสดง Total Count PositionNum-->
-                    <q-badge
-                      rounded
-                      color="grey-2"
-                      text-color="dark"
-                      :label="prop.node.totalPositionCount"
-                    />
-                    <q-badge
-                      v-if="prop.node.totalPositionVacant > 0"
-                      rounded
-                      color="red"
-                      outline
-                      :label="prop.node.totalPositionVacant"
-                    />
-                  </div>
-                </template>
-                <!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
-                <template v-slot:header-person="prop">
-                  <div
-                    class="row items-center text-dark col-12 q-py-xs q-pl-sm rounded-borders pointer"
-                    style="width: 100%"
-                  >
-                    <img
-                      v-if="
-                        prop.node.avatar == '' ||
-                        prop.node.avatar ==
-                          'https://cdn.quasar.dev/img/boy-avatar.png'
-                      "
-                      src="@/assets/avatar_user.jpg"
-                      class="col-xs-1 col-sm-2"
-                      style="width: 28px; height: 28px; border-radius: 50%"
-                    />
-                    <img
-                      v-else
-                      :src="prop.node.avatar"
-                      class="col-xs-1 col-sm-2"
-                      style="width: 28px; height: 28px; border-radius: 50%"
-                    />
-                    <div class="row" @click="seeUserDetail(prop.node)">
-                      <!--=====ตำแหน่งว่าง สีแดง=====-->
-                      <div
-                        v-if="
-                          prop.node.name == `ว่าง` ||
-                          prop.node.name == `N/A` ||
-                          prop.node.name == null
-                        "
-                        class="q-px-sm text-weight-medium text-red"
-                      >
-                        ว่าง
-                      </div>
-                      <!--=====หัวหน้า สีเขียว=====-->
-                      <div v-else-if="prop.node.positionLeaderFlag">
-                        <div class="q-px-sm text-weight-medium text-primary">
-                          {{ prop.node.name }}
-                        </div>
-                      </div>
-                      <!--=====ลูกน้อง สีปกติ=====-->
-                      <div v-else>
-                        <div class="q-px-sm text-weight-medium">
-                          {{ prop.node.name }}
-                        </div>
-                      </div>
-                      <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                      <div class="q-pr-sm">
-                        {{ prop.node.positionName }}
-                      </div>
-                      <div class="q-pr-sm">
-                        {{ prop.node.positionNum }}
-                      </div>
-                      <div class="q-pr-sm">
-                        {{ prop.node.positionLevel }}
-                      </div>
-                    </div>
-                    <q-icon
-                      v-if="prop.node.positionLeaderFlag"
-                      class="q-mr-sm"
-                      size="15px"
-                      color="primary"
-                      name="mdi-bookmark"
-                    />
-                    <!-- <div
+						<!-- Tree View-->
+						<div class="q-gutter-sm">
+							<q-tree
+								v-show="!isShowEditTree"
+								no-transition
+								ref="qtreeView"
+								:nodes="dataTree"
+								:no-results-label="treeSearchNotFound"
+								:no-nodes-label="noTreeData"
+								node-key="keyId"
+								:filter="treeFilter"
+								:filter-method="treeFilterMethod"
+								v-model:expanded="expandedNodeView"
+							>
+								<!--organization บรรทัดแสดงชื่อหน่วยงาน -->
+								<template v-slot:header-organization="prop">
+									<div
+										class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+									>
+										<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+										<div>
+											<div class="text-weight-medium">
+												{{ prop.node.organizationName }}
+											</div>
+											<div class="text-weight-light">
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node
+																.governmentCode
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node.agency
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node.government
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node.department
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node.pile
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node
+																.organizationShortName
+												}}
+											</div>
+										</div>
+										<!--แสดง Total Count PositionNum-->
+										<q-badge
+											rounded
+											color="grey-2"
+											text-color="dark"
+											:label="
+												prop.node.totalPositionCount
+											"
+										/>
+										<q-badge
+											v-if="
+												prop.node.totalPositionVacant >
+												0
+											"
+											rounded
+											color="red"
+											outline
+											:label="
+												prop.node.totalPositionVacant
+											"
+										/>
+									</div>
+								</template>
+								<!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
+								<template v-slot:header-person="prop">
+									<div
+										class="row items-center text-dark col-12 q-py-xs q-pl-sm rounded-borders pointer"
+										style="width: 100%"
+									>
+										<img
+											v-if="
+												prop.node.avatar == '' ||
+												prop.node.avatar ==
+													'https://cdn.quasar.dev/img/boy-avatar.png'
+											"
+											src="@/assets/avatar_user.jpg"
+											class="col-xs-1 col-sm-2"
+											style="
+												width: 28px;
+												height: 28px;
+												border-radius: 50%;
+											"
+										/>
+										<img
+											v-else
+											:src="prop.node.avatar"
+											class="col-xs-1 col-sm-2"
+											style="
+												width: 28px;
+												height: 28px;
+												border-radius: 50%;
+											"
+										/>
+										<div
+											class="row"
+											@click="seeUserDetail(prop.node)"
+										>
+											<!--=====ตำแหน่งว่าง สีแดง=====-->
+											<div
+												v-if="
+													prop.node.name == `ว่าง` ||
+													prop.node.name == `N/A` ||
+													prop.node.name == null
+												"
+												class="q-px-sm text-weight-medium text-red"
+											>
+												ว่าง
+											</div>
+											<!--=====หัวหน้า สีเขียว=====-->
+											<div
+												v-else-if="
+													prop.node.positionLeaderFlag
+												"
+											>
+												<div
+													class="q-px-sm text-weight-medium text-primary"
+												>
+													{{ prop.node.name }}
+												</div>
+											</div>
+											<!--=====ลูกน้อง สีปกติ=====-->
+											<div v-else>
+												<div
+													class="q-px-sm text-weight-medium"
+												>
+													{{ prop.node.name }}
+												</div>
+											</div>
+											<!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+											<div class="q-pr-sm">
+												{{ prop.node.positionName }}
+											</div>
+											<div
+												class="q-pr-sm"
+												v-if="
+													prop.node.positionType !=
+														null &&
+													prop.node.positionType != ''
+												"
+											>
+												ประเภท{{
+													`${prop.node.positionType}`
+												}}
+											</div>
+											<div
+												class="q-pr-sm"
+												v-if="
+													prop.node.positionLevel !=
+														null &&
+													prop.node.positionLevel !=
+														''
+												"
+											>
+												ระดับ{{
+													`${prop.node.positionLevel}`
+												}}
+											</div>
+											<div
+												class="q-pr-sm"
+												v-if="
+													prop.node
+														.executivePosition !=
+														null &&
+													prop.node
+														.executivePosition != ''
+												"
+											>
+												{{
+													`(${prop.node.executivePosition})`
+												}}
+											</div>
+											<div class="q-pr-sm">
+												{{ prop.node.positionNum }}
+											</div>
+										</div>
+										<q-icon
+											v-if="prop.node.positionLeaderFlag"
+											class="q-mr-sm"
+											size="15px"
+											color="primary"
+											name="mdi-bookmark"
+										/>
+										<!-- <div
                       class="text-white"
                       style="font-size: 1px; display: none"
                     >
                       {{ prop.node.positionLevel }}
                     </div> -->
-                  </div>
-                </template>
-              </q-tree>
-            </div>
-            <!--Tree Edit-->
-            <div class="q-gutter-sm">
-              <!-- must use v-if to be able to use lazyLoad for second time-->
-              <q-tree
-                v-if="isShowEditTree"
-                no-transition
-                ref="qtreeEdit"
-                :nodes="dataTreeDraft"
-                :no-results-label="treeSearchNotFound"
-                :no-nodes-label="noTreeData"
-                node-key="keyId"
-                :filter="treeFilter"
-                :filter-method="treeFilterMethod"
-                @lazy-load="onLazyLoad"
-                v-model:expanded="expandedNodeEdit"
-                dense
-              >
-                <!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
-                <template v-slot:header-organization="prop">
-                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-                    <!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
-                    <div>
-                      <div class="text-weight-medium">
-                        {{ prop.node.organizationName }}
-                      </div>
-                      <div class="text-weight-light">
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.governmentCode
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.agency
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.government
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.department
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.pile
-                        }}
-                        {{
-                          prop.node.organizationParentId == null
-                            ? null
-                            : prop.node.organizationShortName
-                        }}
-                      </div>
-                    </div>
-                    <!--แสดง Total Count PositionNum-->
-                    <q-badge
-                      rounded
-                      color="grey-2"
-                      text-color="dark"
-                      :label="prop.node.totalPositionCount"
-                    />
-                    <q-badge
-                      v-if="prop.node.totalPositionVacant > 0"
-                      rounded
-                      color="red"
-                      outline
-                      :label="prop.node.totalPositionVacant"
-                    />
-                    <q-btn
-                      flat
-                      round
-                      color="green"
-                      @click.stop="
-                        (popupAddOrganization = true),
-                          (modalHeaderName = prop.node.organizationName),
-                          (rowClickTree = prop.node),
-                          (modalHeaderPosition =
-                            prop.node.keyId.search('-') > 0 ? true : false)
-                      "
-                      size="10px"
-                      icon="mdi-plus"
-                    >
-                      <q-tooltip>เพิ่มโครงสร้าง</q-tooltip>
-                    </q-btn>
-                    <!--
+									</div>
+								</template>
+							</q-tree>
+						</div>
+						<!--Tree Edit-->
+						<div class="q-gutter-sm">
+							<!-- must use v-if to be able to use lazyLoad for second time-->
+							<q-tree
+								v-if="isShowEditTree"
+								no-transition
+								ref="qtreeEdit"
+								:nodes="dataTreeDraft"
+								:no-results-label="treeSearchNotFound"
+								:no-nodes-label="noTreeData"
+								node-key="keyId"
+								:filter="treeFilter"
+								:filter-method="treeFilterMethod"
+								@lazy-load="onLazyLoad"
+								v-model:expanded="expandedNodeEdit"
+								dense
+							>
+								<!--organization บรรทัดแสดงชื่อหน่วยงาน & ปุ่ม + -->
+								<template v-slot:header-organization="prop">
+									<div
+										class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+									>
+										<!--แสดงชื่อแผนก พิมพ์ตัวหนา คลิกแล้วกาง/หุบ Tree-->
+										<div>
+											<div class="text-weight-medium">
+												{{ prop.node.organizationName }}
+											</div>
+											<div class="text-weight-light">
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node
+																.governmentCode
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node.agency
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node.government
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node.department
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node.pile
+												}}
+												{{
+													prop.node
+														.organizationParentId ==
+													null
+														? null
+														: prop.node
+																.organizationShortName
+												}}
+											</div>
+										</div>
+										<!--แสดง Total Count PositionNum-->
+										<q-badge
+											rounded
+											color="grey-2"
+											text-color="dark"
+											:label="
+												prop.node.totalPositionCount
+											"
+										/>
+										<q-badge
+											v-if="
+												prop.node.totalPositionVacant >
+												0
+											"
+											rounded
+											color="red"
+											outline
+											:label="
+												prop.node.totalPositionVacant
+											"
+										/>
+										<q-btn
+											flat
+											round
+											color="green"
+											@click.stop="
+												(popupAddOrganization = true),
+													(modalHeaderName =
+														prop.node
+															.organizationName),
+													(rowClickTree = prop.node),
+													(modalHeaderPosition =
+														prop.node.keyId.search(
+															'-'
+														) > 0
+															? true
+															: false)
+											"
+											size="10px"
+											icon="mdi-plus"
+										>
+											<q-tooltip
+												>เพิ่มโครงสร้าง</q-tooltip
+											>
+										</q-btn>
+										<!--
                         v-if="
                         prop.node.totalPositionCount ==
                         prop.node.totalPositionVacant
                       "
                     -->
-                    <q-btn
-                      v-if="prop.node.organizationId != orgRootIdDraft"
-                      flat
-                      round
-                      color="green"
-                      @click.stop="
-                        (popupEditSelectedOrganization = true),
-                          (modalHeaderName = prop.node.organizationName),
-                          (rowClickTree = prop.node),
-                          (modalHeaderPosition =
-                            prop.node.keyId.search('-') > 0 ? true : false)
-                      "
-                      size="10px"
-                      icon="mdi-pencil-outline"
-                    >
-                      <q-tooltip>แก้ไขหน่วยงาน</q-tooltip>
-                    </q-btn>
-                    <q-btn
-                      v-if="
-                        prop.node.totalPositionCount ==
-                          prop.node.totalPositionVacant &&
-                        prop.node.organizationId != orgRootIdDraft
-                      "
-                      flat
-                      round
-                      color="red"
-                      size="10px"
-                      class="q-mr-sm"
-                      icon="mdi-trash-can-outline"
-                      @click.stop="deleteOrganization(prop.node)"
-                    >
-                      <q-tooltip>ลบหน่วยงาน</q-tooltip>
-                    </q-btn>
-                    <q-space />
-                  </div>
-                </template>
-                <!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
-                <template v-slot:header-person="prop">
-                  <div class="row items-center q-px-xs q-pt-xs q-gutter-sm">
-                    <div
-                      rounded
-                      :style="
-                        !prop.node.isActive ? 'filter: grayscale(60%);' : ''
-                      "
-                    >
-                      <img
-                        v-if="
-                          prop.node.avatar == '' ||
-                          prop.node.avatar ==
-                            'https://cdn.quasar.dev/img/boy-avatar.png'
-                        "
-                        src="@/assets/avatar_user.jpg"
-                        class="col-xs-1 col-sm-2"
-                        style="width: 28px; height: 28px; border-radius: 50%"
-                      />
-                      <img
-                        v-else
-                        :src="prop.node.avatar"
-                        class="col-xs-1 col-sm-2"
-                        style="width: 28px; height: 28px; border-radius: 50%"
-                      />
-                    </div>
+										<q-btn
+											v-if="
+												prop.node.organizationId !=
+												orgRootIdDraft
+											"
+											flat
+											round
+											color="green"
+											@click.stop="
+												(popupEditSelectedOrganization = true),
+													(modalHeaderName =
+														prop.node
+															.organizationName),
+													(rowClickTree = prop.node),
+													(modalHeaderPosition =
+														prop.node.keyId.search(
+															'-'
+														) > 0
+															? true
+															: false)
+											"
+											size="10px"
+											icon="mdi-pencil-outline"
+										>
+											<q-tooltip>แก้ไขหน่วยงาน</q-tooltip>
+										</q-btn>
+										<q-btn
+											v-if="
+												prop.node.totalPositionCount ==
+													prop.node
+														.totalPositionVacant &&
+												prop.node.organizationId !=
+													orgRootIdDraft
+											"
+											flat
+											round
+											color="red"
+											size="10px"
+											class="q-mr-sm"
+											icon="mdi-trash-can-outline"
+											@click.stop="
+												deleteOrganization(prop.node)
+											"
+										>
+											<q-tooltip>ลบหน่วยงาน</q-tooltip>
+										</q-btn>
+										<q-space />
+									</div>
+								</template>
+								<!--person บรรทัดแถวแสดงชื่อพนักงานอย่างเดียว-->
+								<template v-slot:header-person="prop">
+									<div
+										class="row items-center q-px-xs q-pt-xs q-gutter-sm"
+									>
+										<div
+											rounded
+											:style="
+												!prop.node.isActive
+													? 'filter: grayscale(60%);'
+													: ''
+											"
+										>
+											<img
+												v-if="
+													prop.node.avatar == '' ||
+													prop.node.avatar ==
+														'https://cdn.quasar.dev/img/boy-avatar.png'
+												"
+												src="@/assets/avatar_user.jpg"
+												class="col-xs-1 col-sm-2"
+												style="
+													width: 28px;
+													height: 28px;
+													border-radius: 50%;
+												"
+											/>
+											<img
+												v-else
+												:src="prop.node.avatar"
+												class="col-xs-1 col-sm-2"
+												style="
+													width: 28px;
+													height: 28px;
+													border-radius: 50%;
+												"
+											/>
+										</div>
 
-                    <div
-                      rounded
-                      :class="
-                        !prop.node.isActive ? 'text-grey-6' : 'text-black'
-                      "
-                    >
-                      <!--=====ตำแหน่งว่าง สีแดง=====-->
-                      <div class="row">
-                        <div
-                          v-if="
-                            prop.node.name == `ว่าง` ||
-                            prop.node.name == `N/A` ||
-                            prop.node.name == null
-                          "
-                          class="q-px-sm text-weight-medium"
-                          :class="
-                            !prop.node.isActive ? 'text-grey-6' : 'text-red'
-                          "
-                        >
-                          ว่าง
-                        </div>
-                        <!--=====หัวหน้า สีเขียว=====-->
-                        <div v-else-if="prop.node.positionLeaderFlag">
-                          <div class="q-px-sm text-weight-medium text-primary">
-                            {{ prop.node.name }}
-                          </div>
-                        </div>
-                        <!--=====ลูกน้อง สีปกติ=====-->
-                        <div v-else>
-                          <div class="q-px-sm text-weight-medium">
-                            {{ prop.node.name }}
-                          </div>
-                        </div>
-                        <!--ต่อท้ายชื่อคน แสดงสีปกติ-->
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionName }}
-                        </div>
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionNum }}
-                        </div>
-                        <div class="q-pr-sm">
-                          {{ prop.node.positionLevel }}
-                        </div>
-                      </div>
-                      <div class="q-pl-sm text-weight-light">
-                        {{ prop.node.positionSideName }}
-                        <!-- {{ prop.node.executivePosition }} -->
-                        {{ prop.node.executivePositionSide }}
-                      </div>
-                    </div>
-                    <q-icon
-                      v-if="prop.node.positionLeaderFlag"
-                      class="q-mr-sm"
-                      size="15px"
-                      color="primary"
-                      name="mdi-bookmark"
-                    ></q-icon
-                    ><q-btn
-                      v-if="
-                        prop.node.name == `ว่าง` ||
-                        prop.node.name == `N/A` ||
-                        prop.node.name == null
-                      "
-                      flat
-                      round
-                      color="green"
-                      @click.stop="
-                        (popupEditSelectedPosition = true),
-                          (modalHeaderName = prop.node.positionName),
-                          (rowClickTree = prop.node),
-                          (modalHeaderPosition =
-                            prop.node.keyId.search('-') > 0 ? true : false)
-                      "
-                      size="10px"
-                      icon="mdi-pencil-outline"
-                    >
-                      <q-tooltip>แก้ไขตำแหน่ง</q-tooltip>
-                    </q-btn>
-                    <q-btn
-                      v-if="
-                        prop.node.name == `ว่าง` ||
-                        prop.node.name == `N/A` ||
-                        prop.node.name == null
-                      "
-                      flat
-                      round
-                      color="red"
-                      size="10px"
-                      class="q-mr-sm"
-                      icon="mdi-trash-can-outline"
-                      @click.stop="deletePosition(prop.node)"
-                    >
-                      <q-tooltip>ลบตำแหน่ง</q-tooltip>
-                    </q-btn>
-                    <q-space />
-                    <!-- <div
+										<div
+											rounded
+											:class="
+												!prop.node.isActive
+													? 'text-grey-6'
+													: 'text-black'
+											"
+										>
+											<!--=====ตำแหน่งว่าง สีแดง=====-->
+											<div class="row">
+												<div
+													v-if="
+														prop.node.name ==
+															`ว่าง` ||
+														prop.node.name ==
+															`N/A` ||
+														prop.node.name == null
+													"
+													class="q-px-sm text-weight-medium"
+													:class="
+														!prop.node.isActive
+															? 'text-grey-6'
+															: 'text-red'
+													"
+												>
+													ว่าง
+												</div>
+												<!--=====หัวหน้า สีเขียว=====-->
+												<div
+													v-else-if="
+														prop.node
+															.positionLeaderFlag
+													"
+												>
+													<div
+														class="q-px-sm text-weight-medium text-primary"
+													>
+														{{ prop.node.name }}
+													</div>
+												</div>
+												<!--=====ลูกน้อง สีปกติ=====-->
+												<div v-else>
+													<div
+														class="q-px-sm text-weight-medium"
+													>
+														{{ prop.node.name }}
+													</div>
+												</div>
+												<!--ต่อท้ายชื่อคน แสดงสีปกติ-->
+												<div class="q-pr-sm">
+													{{ prop.node.positionName }}
+												</div>
+												<div
+													class="q-pr-sm"
+													v-if="
+														prop.node
+															.positionType !=
+															null &&
+														prop.node
+															.positionType != ''
+													"
+												>
+													ประเภท{{
+														prop.node.positionType
+													}}
+												</div>
+												<div
+													class="q-pr-sm"
+													v-if="
+														prop.node
+															.positionLevel !=
+															null &&
+														prop.node
+															.positionLevel != ''
+													"
+												>
+													ระดับ{{
+														prop.node.positionLevel
+													}}
+												</div>
+												<div
+													class="q-pr-sm"
+													v-if="
+														prop.node
+															.executivePosition !=
+															null &&
+														prop.node
+															.executivePosition !=
+															''
+													"
+												>
+													{{
+														`(${prop.node.executivePosition})`
+													}}
+												</div>
+												<div class="q-pr-sm">
+													{{ prop.node.positionNum }}
+												</div>
+											</div>
+											<div
+												class="q-pl-sm text-weight-light"
+											>
+												{{ prop.node.positionSideName }}
+												<!-- {{ prop.node.executivePosition }} -->
+												{{
+													prop.node
+														.executivePositionSide
+												}}
+											</div>
+										</div>
+										<q-icon
+											v-if="prop.node.positionLeaderFlag"
+											class="q-mr-sm"
+											size="15px"
+											color="primary"
+											name="mdi-bookmark"
+										></q-icon
+										><q-btn
+											v-if="
+												prop.node.name == `ว่าง` ||
+												prop.node.name == `N/A` ||
+												prop.node.name == null
+											"
+											flat
+											round
+											color="green"
+											@click.stop="
+												(popupEditSelectedPosition = true),
+													(modalHeaderName =
+														prop.node.positionName),
+													(rowClickTree = prop.node),
+													(modalHeaderPosition =
+														prop.node.keyId.search(
+															'-'
+														) > 0
+															? true
+															: false)
+											"
+											size="10px"
+											icon="mdi-pencil-outline"
+										>
+											<q-tooltip>แก้ไขตำแหน่ง</q-tooltip>
+										</q-btn>
+										<q-btn
+											v-if="
+												prop.node.name == `ว่าง` ||
+												prop.node.name == `N/A` ||
+												prop.node.name == null
+											"
+											flat
+											round
+											color="red"
+											size="10px"
+											class="q-mr-sm"
+											icon="mdi-trash-can-outline"
+											@click.stop="
+												deletePosition(prop.node)
+											"
+										>
+											<q-tooltip>ลบตำแหน่ง</q-tooltip>
+										</q-btn>
+										<q-space />
+										<!-- <div
                       class="text-white"
                       style="font-size: 1px; display: none"
                     >
                       {{ prop.node.positionLevel }}
                     </div> -->
-                  </div>
-                </template>
-              </q-tree>
-            </div>
-          </q-page>
-        </q-page-container>
-        <!-- popup Add Organizations & Positions -->
-        <q-dialog v-model="popupAddOrganization" persistent>
-          <q-card class="text-dark" style="min-width: 950px">
-            <q-card-section class="row items-center q-py-sm">
-              <div class="text-bold">เพิ่มโครงสร้างอัตรากำลังภายใต้</div>
-              <strong class="text-primary q-pl-sm">{{
-                modalHeaderName
-              }}</strong>
-              <q-space />
-              <q-btn
-                icon="close"
-                unelevated
-                round
-                dense
-                style="color: #ff8080; background-color: #ffdede"
-                size="12px"
-                v-close-popup
-              />
-            </q-card-section>
+									</div>
+								</template>
+							</q-tree>
+						</div>
+					</q-page>
+				</q-page-container>
+				<!-- popup Add Organizations & Positions -->
+				<q-dialog v-model="popupAddOrganization" persistent>
+					<q-card class="text-dark" style="min-width: 950px">
+						<q-card-section class="row items-center q-py-sm">
+							<div class="text-bold">
+								เพิ่มโครงสร้างอัตรากำลังภายใต้
+							</div>
+							<strong class="text-primary q-pl-sm">{{
+								modalHeaderName
+							}}</strong>
+							<q-space />
+							<q-btn
+								icon="close"
+								unelevated
+								round
+								dense
+								style="
+									color: #ff8080;
+									background-color: #ffdede;
+								"
+								size="12px"
+								v-close-popup
+							/>
+						</q-card-section>
 
-            <q-separator />
+						<q-separator />
 
-            <q-card-section
-              style="min-height: 60vh; max-height: 70vh"
-              class="scroll"
-            >
-              <organizationComponent
-                v-model:organizprops="organizationData"
-                v-model:formprops="organizationForm"
-              />
-              <br />
-              <positionsComponent
-                v-model:positions="positionData"
-                v-model:formprops="positionForm"
-                :is-add-new="true"
-                v-if="modalHeaderPosition"
-              />
-            </q-card-section>
+						<q-card-section
+							style="min-height: 60vh; max-height: 70vh"
+							class="scroll"
+						>
+							<organizationComponent
+								v-model:organizprops="organizationData"
+								v-model:formprops="organizationForm"
+							/>
+							<br />
+							<positionsComponent
+								v-model:positions="positionData"
+								v-model:formprops="positionForm"
+								:is-add-new="true"
+								v-if="modalHeaderPosition"
+							/>
+						</q-card-section>
 
-            <q-separator />
+						<q-separator />
 
-            <q-card-actions align="right" class="text-primary q-py-sm">
-              <!-- Save for Add Organizations & Positions -->
-              <q-btn
-                unelevated
-                label="บันทึก"
-                :color="'public'"
-                @click="addStructure(rowClickTree)"
-                
-              >
-                <!-- icon="mdi-content-save-outline"
-                <q-tooltip>บันทึก</q-tooltip> -->
-              </q-btn>
-            </q-card-actions>
-          </q-card>
-        </q-dialog>
-        <!-- popup Edit Selected Position -->
-        <q-dialog v-model="popupEditSelectedPosition" persistent>
-          <q-card class="text-dark" style="min-width: 70vw">
-            <q-card-section class="row items-center q-py-sm">
-              <div class="text-bold">แก้ไขตำแหน่ง</div>
-              <strong class="text-primary q-pl-sm">{{
-                modalHeaderName
-              }}</strong>
-              <q-space />
-              <q-btn
-                icon="close"
-                unelevated
-                round
-                dense
-                style="color: #ff8080; background-color: #ffdede"
-                size="12px"
-                v-close-popup
-              />
-            </q-card-section>
-            <q-separator />
-            <q-card-section>
-              <positionsComponent
-                v-model:positions="positionData"
-                v-model:formprops="positionForm"
-                :is-add-new="false"
-                :editObj="rowClickTree"
-              />
-            </q-card-section>
-            <q-separator />
-            <q-card-actions align="right" class="text-primary q-py-sm">
-              <!-- save Edit Selected Position -->
-              <q-btn
-                unelevated
-                label="บันทึก"
-                :color="'public'"
-                @click="editPositionStructure(rowClickTree)"
-              > <!-- icon="mdi-content-save-outline"
-                <q-tooltip>บันทึก</q-tooltip> -->
-              </q-btn>
-            </q-card-actions>
-          </q-card>
-        </q-dialog>
-        <!-- popup Edit Selected Organization -->
-        <q-dialog v-model="popupEditSelectedOrganization" persistent>
-          <q-card class="text-dark" style="min-width: 70vw">
-            <q-card-section class="row items-center q-py-sm">
-              <div class="text-bold">แก้ไขหน่วยงาน</div>
-              <strong class="text-primary q-pl-sm">{{
-                modalHeaderName
-              }}</strong>
-              <q-space />
-              <q-btn
-                icon="close"
-                unelevated
-                round
-                dense
-                style="color: #ff8080; background-color: #ffdede"
-                size="12px"
-                v-close-popup
-              />
-            </q-card-section>
-            <q-separator />
-            <q-card-section>
-              <organizationEditComponent
-                v-model:organizprops="organizationDataEdit"
-                v-model:formprops="organizationForm"
-                :org="rowClickTree"
-              />
-            </q-card-section>
-            <q-separator />
-            <q-card-actions align="right" class="text-primary q-py-sm">
-              <!-- save Edit Selected Organization -->
-              <q-btn
-                unelevated
-                label="บันทึก"
-                :color="'public'"
-                @click="editOrgStructure(rowClickTree)"
-              ><!-- icon="mdi-content-save-outline"
-                <q-tooltip>บันทึก</q-tooltip> -->
-              </q-btn>
-            </q-card-actions>
-          </q-card>
-        </q-dialog>
-      </q-layout>
-    </q-card>
-  </div>
+						<q-card-actions
+							align="right"
+							class="text-primary q-py-sm"
+						>
+							<!-- Save for Add Organizations & Positions -->
+							<q-btn
+								flat
+								round
+								dense
+								:color="'public'"
+								@click="addStructure(rowClickTree)"
+								icon="mdi-content-save-outline"
+							>
+								<q-tooltip>บันทึก</q-tooltip>
+							</q-btn>
+						</q-card-actions>
+					</q-card>
+				</q-dialog>
+				<!-- popup Edit Selected Position -->
+				<q-dialog v-model="popupEditSelectedPosition" persistent>
+					<q-card class="text-dark" style="min-width: 70vw">
+						<q-card-section class="row items-center q-py-sm">
+							<div class="text-bold">แก้ไขตำแหน่ง</div>
+							<strong class="text-primary q-pl-sm">{{
+								modalHeaderName
+							}}</strong>
+							<q-space />
+							<q-btn
+								icon="close"
+								unelevated
+								round
+								dense
+								style="
+									color: #ff8080;
+									background-color: #ffdede;
+								"
+								size="12px"
+								v-close-popup
+							/>
+						</q-card-section>
+						<q-separator />
+						<q-card-section>
+							<positionsComponent
+								v-model:positions="positionData"
+								v-model:formprops="positionForm"
+								:is-add-new="false"
+								:editObj="rowClickTree"
+							/>
+						</q-card-section>
+						<q-separator />
+						<q-card-actions
+							align="right"
+							class="text-primary q-py-sm"
+						>
+							<!-- save Edit Selected Position -->
+							<q-btn
+								flat
+								dense
+								round
+								:color="'public'"
+								@click="editPositionStructure(rowClickTree)"
+								icon="mdi-content-save-outline"
+							>
+								<q-tooltip>บันทึก</q-tooltip>
+							</q-btn>
+						</q-card-actions>
+					</q-card>
+				</q-dialog>
+				<!-- popup Edit Selected Organization -->
+				<q-dialog v-model="popupEditSelectedOrganization" persistent>
+					<q-card class="text-dark" style="min-width: 70vw">
+						<q-card-section class="row items-center q-py-sm">
+							<div class="text-bold">แก้ไขหน่วยงาน</div>
+							<strong class="text-primary q-pl-sm">{{
+								modalHeaderName
+							}}</strong>
+							<q-space />
+							<q-btn
+								icon="close"
+								unelevated
+								round
+								dense
+								style="
+									color: #ff8080;
+									background-color: #ffdede;
+								"
+								size="12px"
+								v-close-popup
+							/>
+						</q-card-section>
+						<q-separator />
+						<q-card-section>
+							<organizationEditComponent
+								v-model:organizprops="organizationDataEdit"
+								v-model:formprops="organizationForm"
+								:org="rowClickTree"
+							/>
+						</q-card-section>
+						<q-separator />
+						<q-card-actions
+							align="right"
+							class="text-primary q-py-sm"
+						>
+							<!-- save Edit Selected Organization -->
+							<q-btn
+								flat
+								dense
+								round
+								:color="'public'"
+								@click="editOrgStructure(rowClickTree)"
+								icon="mdi-content-save-outline"
+							>
+								<q-tooltip>บันทึก</q-tooltip>
+							</q-btn>
+						</q-card-actions>
+					</q-card>
+				</q-dialog>
+			</q-layout>
+		</q-card>
+	</div>
 
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :filter="filterHistory"
-    :visible-columns="visibleColumnsHistory"
-    :boss="true"
-    v-model:modal="modalHistory"
-    v-model:inputfilter="filterHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td auto-width>
-          <q-icon
-            class="q-mr-sm"
-            size="15px"
-            color="primary"
-            name="mdi-bookmark"
-            v-if="props.row.isDirector"
-          ></q-icon>
-        </q-td>
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'isActive'" class="">
-            <q-icon
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else class="">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
+	<HistoryTable
+		:rows="rowsHistory"
+		:columns="columnsHistory"
+		:filter="filterHistory"
+		:visible-columns="visibleColumnsHistory"
+		:boss="true"
+		v-model:modal="modalHistory"
+		v-model:inputfilter="filterHistory"
+		v-model:inputvisible="visibleColumnsHistory"
+		v-model:tittle="tittleHistory"
+	>
+		<template #columns="props">
+			<q-tr :props="props">
+				<q-td auto-width>
+					<q-icon
+						class="q-mr-sm"
+						size="15px"
+						color="primary"
+						name="mdi-bookmark"
+						v-if="props.row.isDirector"
+					></q-icon>
+				</q-td>
+				<q-td v-for="col in props.cols" :key="col.name" :props="props">
+					<div v-if="col.name == 'isActive'" class="">
+						<q-icon
+							v-if="col.value == false"
+							name="mdi-close"
+							color="red"
+							class="text-h5"
+						/>
+						<q-icon
+							v-else
+							name="mdi-check"
+							color="positive"
+							class="text-h5"
+						/>
+					</div>
+					<div v-else class="">
+						{{ col.value }}
+					</div>
+				</q-td>
+			</q-tr>
+		</template>
+	</HistoryTable>
 </template>
 
 <script setup lang="ts">
@@ -763,27 +1052,32 @@ import { useDataStore } from "@/stores/data";
 import HistoryTable from "@/components/TableHistory.vue";
 import type { QTableProps } from "quasar";
 import type {
-  RequestItemsObject,
-  RequestItemsPublishHistoryObject,
-  Columns,
+	RequestItemsObject,
+	RequestItemsPublishHistoryObject,
+	Columns,
 } from "@/modules/02_organizational/interface/request/Mapping";
 const positionsComponent = defineAsyncComponent(
-  () =>
-    import("@/modules/02_organizational/components/Tree/MappingPositions.vue")
+	() =>
+		import(
+			"@/modules/02_organizational/components/Tree/MappingPositions.vue"
+		)
 ); //ชุด Dropdown ตำแหน่ง
 const organizationComponent = defineAsyncComponent(
-  () =>
-    import("@/modules/02_organizational/components/Tree/OrganizationDialog.vue")
+	() =>
+		import(
+			"@/modules/02_organizational/components/Tree/OrganizationDialog.vue"
+		)
 ); //ชุด Dropdown หน่วยงาน for Add
 const organizationEditComponent = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue"
-    )
+	() =>
+		import(
+			"@/modules/02_organizational/components/Tree/OrganizationDialogAddEdit.vue"
+		)
 ); //ชุด Dropdown หน่วยงาน for Edit ครั้งละ 1 หน่วยงาน
 
 const buttonsSet = defineAsyncComponent(
-  () => import("@/modules/02_organizational/components/Tree/TreeButtonsSet.vue")
+	() =>
+		import("@/modules/02_organizational/components/Tree/TreeButtonsSet.vue")
 ); //ชุด ปุ่มกด copy from TableView but delete Table
 
 // import CustomComponent from "@/components/CustomDialog.vue";
@@ -848,240 +1142,289 @@ const delStructureKey = ref<string>("");
 // first load page
 const rootNodeKey = ref<string>("");
 
+const fileList = ref<any[]>([]);
+const selectedFile = ref<string>("");
+
 const visibleColumnsHistory = ref<String[]>(["detail", "editUser", "editDate"]);
 const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "editUser",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "editUser",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "editDate",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "editDate",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
+	{
+		name: "detail",
+		align: "left",
+		label: "รายละเอียด",
+		sortable: true,
+		field: "detail",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "editUser",
+		align: "left",
+		label: "ผู้ดำเนินการ",
+		sortable: true,
+		field: "editUser",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "editDate",
+		align: "left",
+		label: "วันที่แก้ไข",
+		sortable: true,
+		field: "editDate",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
 ]);
 
 watch(isShowEditTree, (count, prevCount) => {
-  if (isShowEditTree.value) {
-    isDrawer.value = false;
-  }
+	if (isShowEditTree.value) {
+		isDrawer.value = false;
+	}
 }); // close drawer when enter edit mode
 
-onMounted(async () => {
-  console.log("onMounted");
-  await fetchTreeRoot(true); //fetch Root Edit Tree level 1
-  //   await loadViewTree();
-  expandedNodeView.value = [`1`];
+watch(selectedFile, async (value, oldValue) => {
+	await loadJsonTree(value);
+});
 
-  setTimeout(async () => {
-    // //delay เพื่อให้หน้า editTree แตก level 2 ให้เสร็จก่อน จึงค่อยมา render หน้า viewTree
-    // // isShowEditTree.value = false; //show View Tree สั่งแสดงหน้า viewTree
-    // await fetchTreeRoot(false); //fetch View Tree
-    await loadViewTree();
-    // // *** viewTree จะเปลี่ยนจาก โหลดทีละ level ตามที่ user click เป็น load file ที่มีข้อมูลครบทั้ง DB แล้วมาทีเดียว
-    // // *** น่าจะเปลี่ยนจาก v-if เป็น v-show เฉพาะ viewTree
-  }, 600);
-  await isTreeHasDraft();
+onMounted(async () => {
+	console.log("onMounted");
+	await fetchTreeRoot(true); //fetch Root Edit Tree level 1
+	expandedNodeView.value = [`1`];
+
+	await loadPublishScreen();
+
+	await isTreeHasDraft();
 });
 
 const loadTreeData = async () => {
-  //for test load file on server
-  await http
-    .get(
-      //   "https://s3cluster.frappet.com/bma-public-test/organization/strueture/tree.json"
-      //   "https://s3cluster.frappet.com/bma-public-test/organization/strueture/1-2-สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร.json"
-      //   `https://s3cluster.frappet.com/bma-public-test/organization/strueture/${node.organizationId}-${node.organizationName}.json`
-      "https://s3cluster.frappet.com/bma-public-test/organization/strueture/61a11705-8346-4336-8289-49f72ed9463f-%E0%B8%AA%E0%B8%B3%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%8A%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%81%E0%B8%A3%E0%B8%B8%E0%B8%87%E0%B9%80%E0%B8%97%E0%B8%9E%E0%B8%A1%E0%B8%AB%E0%B8%B2%E0%B8%99%E0%B8%84%E0%B8%A3.json"
-    )
-    .then((res) => {
-      console.log(res.data.result);
-      dataTree.value = res.data.result;
-    })
-    .catch((e) => {
-      manageApiErrorMsg(e);
-    });
+	//for test load file on server
+	await http
+		.get(
+			//   "https://s3cluster.frappet.com/bma-public-test/organization/strueture/tree.json"
+			//   "https://s3cluster.frappet.com/bma-public-test/organization/strueture/1-2-สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร.json"
+			//   `https://s3cluster.frappet.com/bma-public-test/organization/strueture/${node.organizationId}-${node.organizationName}.json`
+			"https://s3cluster.frappet.com/bma-public-test/organization/strueture/61a11705-8346-4336-8289-49f72ed9463f-%E0%B8%AA%E0%B8%B3%E0%B8%99%E0%B8%B1%E0%B8%81%E0%B8%87%E0%B8%B2%E0%B8%99%E0%B8%84%E0%B8%93%E0%B8%B0%E0%B8%81%E0%B8%A3%E0%B8%A3%E0%B8%A1%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%8A%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%81%E0%B8%A3%E0%B8%B8%E0%B8%87%E0%B9%80%E0%B8%97%E0%B8%9E%E0%B8%A1%E0%B8%AB%E0%B8%B2%E0%B8%99%E0%B8%84%E0%B8%A3.json"
+		)
+		.then((res) => {
+			console.log(res.data.result);
+			dataTree.value = res.data.result;
+		})
+		.catch((e) => {
+			manageApiErrorMsg(e);
+		});
 };
 
 const loadViewTree = async () => {
-  await fetchTreeRoot(false); //fetch root view tree level 1
-  dataTree.value[0].lazy = false; //must set lazy to false
-  await fetchChildrenByParentId(dataTree.value[0]); // fetch children view tree level 2
-  dataTree.value[0].children.forEach((element: any) => {
-    //fill all children of all level 2 nodes
-    loadFileServer(element);
-  });
+	await fetchTreeRoot(false); //fetch root view tree level 1
+	dataTree.value[0].lazy = false; //must set lazy to false
+	await fetchChildrenByParentId(dataTree.value[0]); // fetch children view tree level 2
+	dataTree.value[0].children.forEach((element: any) => {
+		//fill all children of all level 2 nodes
+		loadFileServer(element);
+	});
+};
+
+const loadPublishScreen = async () => {
+	console.log("onMounted");
+	await fetchPublishFile();
+	expandedNodeView.value = [`1`];
+	setTimeout(async () => {
+		await fetchTreeRoot(false); //fetch root view tree level 1
+		dataTree.value[0].lazy = false; //must set lazy to false
+		await loadJsonTree(selectedFile.value);
+	}, 600);
+};
+
+const loadJsonTree = async (fileName: string) => {
+	await http
+		.get(`${config.s3ClusterUrl}${fileName}`)
+		.then((res) => {
+			dataTree.value[0].lazy = false; //must set lazy to false
+			dataTree.value[0].children = res.data;
+		})
+		.catch((e) => {
+			manageApiErrorMsg(e);
+		})
+		.finally(() => {
+			//   loaderPage(false);
+		});
 };
 
 const loadFileServer = async (node: any) => {
-  // test data = "https://s3cluster.frappet.com/bma-public-test/organization/strueture/tree.json"
-  // request = `https://s3cluster.frappet.com/bma-public-test/organization/strueture/${node.organizationId}-${node.organizationName}.json`;
-  node.lazy = false; // must set lazy to false
-  await http
-    .get(
-      `${config.s3ClusterUrl}${node.organizationId}-${node.organizationName}.json`
-    )
-    .then((res) => {
-      console.log(res.data);
-      node.children = res.data;
-    })
-    .catch((e) => {
-      //   console.log(e);
-      //   console.log(e.response);
-      manageApiErrorMsg(e);
-    })
-    .finally(() => {
-      //   loaderPage(false);
-    });
+	// test data = "https://s3cluster.frappet.com/bma-public-test/organization/strueture/tree.json"
+	// request = `https://s3cluster.frappet.com/bma-public-test/organization/strueture/${node.organizationId}-${node.organizationName}.json`;
+	node.lazy = false; // must set lazy to false
+	await http
+		.get(
+			`${config.s3ClusterUrl}${node.organizationId}-${node.organizationName}.json`
+		)
+		.then((res) => {
+			console.log(res.data);
+			node.children = res.data;
+		})
+		.catch((e) => {
+			//   console.log(e);
+			//   console.log(e.response);
+			manageApiErrorMsg(e);
+		})
+		.finally(() => {
+			//   loaderPage(false);
+		});
 };
 
 const isTreeHasDraft = async () => {
-  //   loaderPage(true);
-  let orgHasDraft = false;
-  let orgPoHasDraft = false;
-  await http
-    .get(config.API.isOrgPohasDraft)
-    .then((res) => {
-      //   console.log("isOrgPohasDraft:", res.data.result);
-      orgPoHasDraft = res.data.result;
-    })
-    .catch((e) => {
-      console.log("====isOrgPohasDraft====");
-      console.log(e);
-      console.log(e.response);
-      messageError($q, e);
-    })
-    .finally(() => {
-      //   loaderPage(false);
-    });
+	//   loaderPage(true);
+	let orgHasDraft = false;
+	let orgPoHasDraft = false;
+	await http
+		.get(config.API.isOrgPohasDraft)
+		.then((res) => {
+			//   console.log("isOrgPohasDraft:", res.data.result);
+			orgPoHasDraft = res.data.result;
+		})
+		.catch((e) => {
+			console.log("====isOrgPohasDraft====");
+			console.log(e);
+			console.log(e.response);
+			messageError($q, e);
+		})
+		.finally(() => {
+			//   loaderPage(false);
+		});
 
-  await http
-    .get(config.API.isOrghasDraft)
-    .then((res) => {
-      //   console.log("isOrghasDraft:", res.data.result);
-      orgHasDraft = res.data.result;
-    })
-    .catch((e) => {
-      console.log("====isOrghasDraft====");
-      console.log(e);
-      console.log(e.response);
-      messageError($q, e);
-    })
-    .finally(() => {
-      //   loaderPage(false);
-    });
+	await http
+		.get(config.API.isOrghasDraft)
+		.then((res) => {
+			//   console.log("isOrghasDraft:", res.data.result);
+			orgHasDraft = res.data.result;
+		})
+		.catch((e) => {
+			console.log("====isOrghasDraft====");
+			console.log(e);
+			console.log(e.response);
+			messageError($q, e);
+		})
+		.finally(() => {
+			//   loaderPage(false);
+		});
 
-  if (orgHasDraft || orgPoHasDraft) {
-    version.value = "";
-  } else {
-    version.value = "published";
-  }
+	if (orgHasDraft || orgPoHasDraft) {
+		version.value = "";
+	} else {
+		version.value = "published";
+	}
 };
 
 /**โหลด Tree Root Node
  * @param isDraft แสดงข้อมูลดราฟหรือ Production
  */
 const fetchTreeRoot = async (isDraft: boolean) => {
-  //   console.log(isDraft);
-  loaderPage(true);
-  console.log("Call API14 GetTreeRoot");
-  isShowEditTree.value = isDraft; // to show same tree that we fetch
-  let request = "";
-  if (isDraft) {
-    request = config.API.getDraftTreeRoot;
-  } else {
-    request = config.API.getTreeRoot;
-  }
-  await http
-    .get(request)
-    .then((res) => {
-      if (isDraft) {
-        dataTreeDraft.value = res.data.result;
-        orgRootIdDraft.value = res.data.result[0].organizationId;
-      } else {
-        dataTree.value = res.data.result;
-        rootNodeKey.value = res.data.result[0].organizationId;
-      }
-    })
-    .catch((e) => {
-      console.log(e);
-      console.log(e.response);
-      manageApiErrorMsg(e);
-      //   messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-      if (isDraft) {
-        // ถ้าไม่ต้องการให้แตก node root on first load ก็ไม่ต้องใส่
-        // ต้องอยู่ตรงนี้ ถ้าอยู่ตรง .then จะ error คาดว่ามันทำงานก่อนที่ tree จะ render เสร็จ แต่ก็อาจจะไม่ใช่
-        qtreeEdit.value.setExpanded(dataTreeDraft.value[0].keyId, true);
-        expandedNodeEdit.value = [dataTreeDraft.value[0].keyId];
-      } else {
-        qtreeView.value.setExpanded(dataTree.value[0].keyId, true);
-      }
-    });
+	//   console.log(isDraft);
+	loaderPage(true);
+	console.log("Call API14 GetTreeRoot");
+	isShowEditTree.value = isDraft; // to show same tree that we fetch
+	let request = "";
+	if (isDraft) {
+		request = config.API.getDraftTreeRoot;
+	} else {
+		request = config.API.getTreeRoot;
+	}
+	await http
+		.get(request)
+		.then((res) => {
+			if (isDraft) {
+				dataTreeDraft.value = res.data.result;
+				orgRootIdDraft.value = res.data.result[0].organizationId;
+			} else {
+				dataTree.value = res.data.result;
+				rootNodeKey.value = res.data.result[0].organizationId;
+			}
+		})
+		.catch((e) => {
+			// console.log(e);
+			// console.log(e.response);
+			manageApiErrorMsg(e);
+			//   messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+			if (isDraft) {
+				// ถ้าไม่ต้องการให้แตก node root on first load ก็ไม่ต้องใส่
+				// ต้องอยู่ตรงนี้ ถ้าอยู่ตรง .then จะ error คาดว่ามันทำงานก่อนที่ tree จะ render เสร็จ แต่ก็อาจจะไม่ใช่
+				qtreeEdit.value.setExpanded(dataTreeDraft.value[0].keyId, true);
+				expandedNodeEdit.value = [dataTreeDraft.value[0].keyId];
+			} else {
+				qtreeView.value.setExpanded(dataTree.value[0].keyId, true);
+			}
+		});
 };
 
 /**โหลดลูก Tree
  * @param node Parent Node
  */
 const fetchChildrenByParentId = async (node: any) => {
-  //   console.log(isDraft);
-  console.log("Call API4");
-  loaderPage(true);
-  let request = "";
-  if (isShowEditTree.value) {
-    request = config.API.getDraftTreeNode(node.organizationId, node.keyId);
-  } else {
-    request = config.API.getTreeNode(node.organizationId, node.keyId);
-  }
+	//   console.log(isDraft);
+	console.log("Call API4");
+	loaderPage(true);
+	let request = "";
+	if (isShowEditTree.value) {
+		request = config.API.getDraftTreeNode(node.organizationId, node.keyId);
+	} else {
+		request = config.API.getTreeNode(node.organizationId, node.keyId);
+	}
 
-  await http
-    .get(request)
-    .then((res) => {
-      console.log(res.data.result);
-      node.children = res.data.result;
-    })
-    .catch((e) => {
-      // console.log(e);
-      // console.log(e.response);
-      manageApiErrorMsg(e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	await http
+		.get(request)
+		.then((res) => {
+			console.log(res.data.result);
+			node.children = res.data.result;
+		})
+		.catch((e) => {
+			// console.log(e);
+			// console.log(e.response);
+			manageApiErrorMsg(e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
+};
+
+const fetchPublishFile = async () => {
+	loaderPage(true);
+	await http
+		.get(config.API.getPublishFileHistory)
+		.then((res) => {
+			let data = res.data.result;
+			fileList.value = [];
+			data.map((e: any) => {
+				fileList.value.push({
+					value: e.fileName,
+					label: e.description,
+				});
+			});
+			selectedFile.value = fileList.value[0].value;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			loaderPage(false);
+		});
 };
 
 /**
@@ -1090,13 +1433,13 @@ const fetchChildrenByParentId = async (node: any) => {
  * @param node Auto send by Quasar Tree no need to send anything
  */
 const onLazyLoad = (node: any) => {
-  setTimeout(async () => {
-    /**
-     * เรียก API4 มาแสดงผล ทีละ shot
-     */
-    console.log("Call LazyLoad");
-    await fetchChildrenByParentId(node.node);
-    /**   loaderPage(true);
+	setTimeout(async () => {
+		/**
+		 * เรียก API4 มาแสดงผล ทีละ shot
+		 */
+		console.log("Call LazyLoad");
+		await fetchChildrenByParentId(node.node);
+		/**   loaderPage(true);
     let request = "";
     if (isShowEditTree.value) {
       request = config.API.getDraftTreeNode(
@@ -1136,15 +1479,15 @@ const onLazyLoad = (node: any) => {
         loaderPage(false);
       });*/
 
-    node.done(node.node.children); //return ค่าให้ q-tree generate children
-  }, 10);
+		node.done(node.node.children); //return ค่าให้ q-tree generate children
+	}, 10);
 };
 
 /**====== Drawer Functions
  * ========================
  */
 const goToUserRegistry = () => {
-  router.push(`/registry/${personDetail.value.profileId}`);
+	router.push(`/registry/${personDetail.value.profileId}`);
 };
 
 /**
@@ -1152,12 +1495,12 @@ const goToUserRegistry = () => {
  * @param node user ใน tree ที่จะดูข้อมูล (prop.node)
  */
 const seeUserDetail = (node: any) => {
-  if (node.name != null) {
-    isChevronR.value = true;
-    isDrawer.value = true;
-    // personDetail.value = JSON.parse(JSON.stringify(node));
-    personDetail.value = node;
-  }
+	if (node.name != null) {
+		isChevronR.value = true;
+		isDrawer.value = true;
+		// personDetail.value = JSON.parse(JSON.stringify(node));
+		personDetail.value = node;
+	}
 };
 
 /**====== Pop-up Add/Edit/Delete Organization Functions
@@ -1169,48 +1512,48 @@ const seeUserDetail = (node: any) => {
  * @param node node that you want to delete (prop.node)
  */
 const deleteOrganization = (node: any) => {
-  delStructureId.value = node.organizationId;
-  delStructureKey.value = node.keyId;
-  dialogMessage(
-    $q,
-    "ยืนยันลบหน่วยงาน",
-    "หากต้องการลบกดตกลง",
-    "mdi-help-circle-outline",
-    "ตกลง",
-    "red",
-    apiDeleteOrg,
-    undefined
-  );
+	delStructureId.value = node.organizationId;
+	delStructureKey.value = node.keyId;
+	dialogMessage(
+		$q,
+		"ยืนยันลบหน่วยงาน",
+		"หากต้องการลบกดตกลง",
+		"mdi-help-circle-outline",
+		"ตกลง",
+		"red",
+		apiDeleteOrg,
+		undefined
+	);
 };
 const apiDeleteOrg = () => {
-  // const deleteOrganization = (node: any) => {
-  isShowEditTree.value = false;
-  //   console.log("isShowEditTree", isShowEditTree.value);
-  setTimeout(async () => {
-    //delay for lazyLoad to be able to tricker again
-    loaderPage(true);
-    isShowEditTree.value = true;
-    await http
-      .delete(config.API.delTreeOrgDraft(delStructureId.value))
-      .then((res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        // console.log("delStructureKey", delStructureKey.value);
-        const nodeSplit = delStructureKey.value.split("-");
-        const nodeDelete = nodeSplit.splice(0, nodeSplit.length - 1);
-        const nodeJoin = nodeDelete.join("-");
-        // console.log("nodeJoin", nodeJoin);
-        qtreeEdit.value.setExpanded(nodeJoin, true);
-      })
-      .catch((e) => {
-        console.log(e);
-        console.log(e.response);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        loaderPage(false);
-        await isTreeHasDraft();
-      });
-  }, 20);
+	// const deleteOrganization = (node: any) => {
+	isShowEditTree.value = false;
+	//   console.log("isShowEditTree", isShowEditTree.value);
+	setTimeout(async () => {
+		//delay for lazyLoad to be able to tricker again
+		loaderPage(true);
+		isShowEditTree.value = true;
+		await http
+			.delete(config.API.delTreeOrgDraft(delStructureId.value))
+			.then((res) => {
+				success($q, "ลบข้อมูลสำเร็จ");
+				// console.log("delStructureKey", delStructureKey.value);
+				const nodeSplit = delStructureKey.value.split("-");
+				const nodeDelete = nodeSplit.splice(0, nodeSplit.length - 1);
+				const nodeJoin = nodeDelete.join("-");
+				// console.log("nodeJoin", nodeJoin);
+				qtreeEdit.value.setExpanded(nodeJoin, true);
+			})
+			.catch((e) => {
+				console.log(e);
+				console.log(e.response);
+				messageError($q, e);
+			})
+			.finally(async () => {
+				loaderPage(false);
+				await isTreeHasDraft();
+			});
+	}, 20);
 };
 
 /**ลบตำแหน่งที่ว่างออกจาก DB
@@ -1218,45 +1561,45 @@ const apiDeleteOrg = () => {
  * @param node node that you want to delete (prop.node)
  */
 const deletePosition = (node: any) => {
-  delStructureId.value = node.organizationPositionId;
-  delStructureKey.value = node.keyId;
-  dialogMessage(
-    $q,
-    "ยืนยันลบตำแหน่ง",
-    "หากต้องการลบกดตกลง",
-    "mdi-help-circle-outline",
-    "ตกลง",
-    "red",
-    apiDeletePosition,
-    undefined
-  );
+	delStructureId.value = node.organizationPositionId;
+	delStructureKey.value = node.keyId;
+	dialogMessage(
+		$q,
+		"ยืนยันลบตำแหน่ง",
+		"หากต้องการลบกดตกลง",
+		"mdi-help-circle-outline",
+		"ตกลง",
+		"red",
+		apiDeletePosition,
+		undefined
+	);
 };
 const apiDeletePosition = () => {
-  // const deletePosition = (node: any) => {
-  isShowEditTree.value = false;
-  setTimeout(async () => {
-    //delay for lazyLoad to be able to tricker again
-    loaderPage(true);
-    isShowEditTree.value = true;
-    await http
-      .delete(config.API.delTreePositionDraft(delStructureId.value))
-      .then((res) => {
-        success($q, "ลบข้อมูลสำเร็จ");
-        const nodeSplit = delStructureKey.value.split("-");
-        const nodeDelete = nodeSplit.splice(0, nodeSplit.length - 1);
-        const nodeJoin = nodeDelete.join("-");
-        qtreeEdit.value.setExpanded(nodeJoin, true);
-      })
-      .catch((e) => {
-        console.log(e);
-        console.log(e.response);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        loaderPage(false);
-        await isTreeHasDraft();
-      });
-  }, 20);
+	// const deletePosition = (node: any) => {
+	isShowEditTree.value = false;
+	setTimeout(async () => {
+		//delay for lazyLoad to be able to tricker again
+		loaderPage(true);
+		isShowEditTree.value = true;
+		await http
+			.delete(config.API.delTreePositionDraft(delStructureId.value))
+			.then((res) => {
+				success($q, "ลบข้อมูลสำเร็จ");
+				const nodeSplit = delStructureKey.value.split("-");
+				const nodeDelete = nodeSplit.splice(0, nodeSplit.length - 1);
+				const nodeJoin = nodeDelete.join("-");
+				qtreeEdit.value.setExpanded(nodeJoin, true);
+			})
+			.catch((e) => {
+				console.log(e);
+				console.log(e.response);
+				messageError($q, e);
+			})
+			.finally(async () => {
+				loaderPage(false);
+				await isTreeHasDraft();
+			});
+	}, 20);
 };
 
 /**======ButtonSet Function
@@ -1266,57 +1609,57 @@ const apiDeletePosition = () => {
  * ฟังก์ชัน clear data แบบร่าง
  */
 const deleteDraft = async () => {
-  loaderPage(true);
-  await http
-    .put(config.API.delTreeOrgPoDraft)
-    .then((res) => {
-      success($q, "ลบข้อมูลร่างสำเร็จ");
-    })
-    .catch((e) => {
-      console.log(e);
-      console.log(e.response);
-      messageError($q, e);
-    })
-    .finally(async () => {
-      loaderPage(false);
-      router.go(0);
-      await isTreeHasDraft();
-    });
+	loaderPage(true);
+	await http
+		.put(config.API.delTreeOrgPoDraft)
+		.then((res) => {
+			success($q, "ลบข้อมูลร่างสำเร็จ");
+		})
+		.catch((e) => {
+			console.log(e);
+			console.log(e.response);
+			messageError($q, e);
+		})
+		.finally(async () => {
+			loaderPage(false);
+			router.go(0);
+			await isTreeHasDraft();
+		});
 };
 
 /**Publish Draft
  * ฟังก์ชันเผยแพร่แบบร่าง
  */
 const publishDraft = async () => {
-  loaderPage(true);
-  await http
-    .put(config.API.publishOrgPoDraft)
-    .then((res) => {
-      success($q, "เผยแพร่ข้อมูลสำเร็จ");
-      //publish สำเร็จแล้ว ให้เช็คว่าถ้า BE generate file data เสร็จแล้วให้มีการเตือนให้ user reload viewTree ใหม่
-      //estimate time for be to regenerate new viewTree file is 30sec
-      //ยังไม่แน่ใจว่า BE จะ return success กลับมาเมื่อทำ publish สำเร็จ หรือเมื่อ generate new viewTree file เสร็จ
-      //ยูสเซอร์กด ตกลง ให้ Load viewTree ใหม่อีกครั้ง
-      dialogMessage(
-        $q,
-        "เผยแพร่ข้อมูลสำเร็จแล้ว",
-        "ต้องการโหลดข้อมูลใหม่หรือไม่",
-        "mdi-help-circle-outline",
-        "ตกลง",
-        "public",
-        loadViewTree,
-        undefined
-      );
-    })
-    .catch((e) => {
-      console.log(e);
-      console.log(e.response);
-      messageError($q, e);
-    })
-    .finally(async () => {
-      loaderPage(false);
-      await isTreeHasDraft();
-    });
+	loaderPage(true);
+	await http
+		.put(config.API.publishOrgPoDraft)
+		.then((res) => {
+			success($q, "เผยแพร่ข้อมูลสำเร็จ");
+			//publish สำเร็จแล้ว ให้เช็คว่าถ้า BE generate file data เสร็จแล้วให้มีการเตือนให้ user reload viewTree ใหม่
+			//estimate time for be to regenerate new viewTree file is 30sec
+			//ยังไม่แน่ใจว่า BE จะ return success กลับมาเมื่อทำ publish สำเร็จ หรือเมื่อ generate new viewTree file เสร็จ
+			//ยูสเซอร์กด ตกลง ให้ Load viewTree ใหม่อีกครั้ง
+			dialogMessage(
+				$q,
+				"เผยแพร่ข้อมูลสำเร็จแล้ว",
+				"ต้องการโหลดข้อมูลใหม่หรือไม่",
+				"mdi-help-circle-outline",
+				"ตกลง",
+				"public",
+				loadViewTree,
+				undefined
+			);
+		})
+		.catch((e) => {
+			console.log(e);
+			console.log(e.response);
+			messageError($q, e);
+		})
+		.finally(async () => {
+			loaderPage(false);
+			await isTreeHasDraft();
+		});
 };
 
 /**Refresh Data
@@ -1326,28 +1669,28 @@ const publishDraft = async () => {
  * ไม่ใช้แล้ว ยังไม่ลบเพราะไม่รู้เป้จะอยากได้อีกไหม
  */
 const resetTree = async () => {
-  dialogMessage(
-    $q,
-    "รีเฟรชหน้า",
-    "ต้องการรีเฟรชผังโครงสร้างใหม่หรือไม่",
-    "mdi-help-circle-outline",
-    "ตกลง",
-    "public",
-    loadViewTree,
-    undefined
-  );
+	dialogMessage(
+		$q,
+		"รีเฟรชหน้า",
+		"ต้องการรีเฟรชผังโครงสร้างใหม่หรือไม่",
+		"mdi-help-circle-outline",
+		"ตกลง",
+		"public",
+		loadPublishScreen,
+		undefined
+	);
 }; //ไม่ใช้แล้ว ยังไม่ลบเพราะไม่รู้เป้จะอยากได้อีกไหม
 const clearLocalStorage = async () => {
-  localStorage.removeItem("dataTree");
+	localStorage.removeItem("dataTree");
 }; //ไม่ใช้แล้ว ยังไม่ลบเพราะไม่รู้เป้จะอยากได้อีกไหม
 
 /**====== Tree Functions
  * ========================
  */
 const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  treeFilter.value = ""; // v-model="treeFilter"
-  treeFilterRef.value.focus(); // ref="treeFilterRef"
+	// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+	treeFilter.value = ""; // v-model="treeFilter"
+	treeFilterRef.value.focus(); // ref="treeFilterRef"
 }; //reset Tree Filter
 
 /**Search Tree Function
@@ -1357,36 +1700,36 @@ const resetFilter = () => {
  * @param filter searching word Auto send by quasar tree
  */
 const treeFilterMethod = (node: any, filter: string) => {
-  const filt = filter;
-  let hasMatch =
-    (node.organizationName && node.organizationName.indexOf(filt) > -1) ||
-    (node.positionNum && node.positionNum.indexOf(filt) > -1) ||
-    (node.name && node.name.indexOf(filt) > -1) ||
-    (node.positionName && node.positionName.indexOf(filt) > -1) ||
-    (node.governmentCode &&
-      node.governmentCode.toString().indexOf(filt) > -1) ||
-    (node.agency && node.agency.indexOf(filt) > -1) ||
-    (node.government && node.government.indexOf(filt) > -1) ||
-    (node.department && node.department.indexOf(filt) > -1) ||
-    (node.pile && node.pile.indexOf(filt) > -1) ||
-    (node.organizationShortName &&
-      node.organizationShortName.indexOf(filt) > -1) ||
-    (node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
-    (node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
-    (node.executivePositionSide &&
-      node.executivePositionSide.indexOf(filt) > -1) ||
-    (node.positionLevel && node.positionLevel.indexOf(filt) > -1);
+	const filt = filter;
+	let hasMatch =
+		(node.organizationName && node.organizationName.indexOf(filt) > -1) ||
+		(node.positionNum && node.positionNum.indexOf(filt) > -1) ||
+		(node.name && node.name.indexOf(filt) > -1) ||
+		(node.positionName && node.positionName.indexOf(filt) > -1) ||
+		(node.governmentCode &&
+			node.governmentCode.toString().indexOf(filt) > -1) ||
+		(node.agency && node.agency.indexOf(filt) > -1) ||
+		(node.government && node.government.indexOf(filt) > -1) ||
+		(node.department && node.department.indexOf(filt) > -1) ||
+		(node.pile && node.pile.indexOf(filt) > -1) ||
+		(node.organizationShortName &&
+			node.organizationShortName.indexOf(filt) > -1) ||
+		(node.positionSideName && node.positionSideName.indexOf(filt) > -1) ||
+		(node.executivePosition && node.executivePosition.indexOf(filt) > -1) ||
+		(node.executivePositionSide &&
+			node.executivePositionSide.indexOf(filt) > -1) ||
+		(node.positionLevel && node.positionLevel.indexOf(filt) > -1);
 
-  //hasMatch จะได้เป็น keyId ของ node ที่หาเจอโดย q-tree จะวนเรียก treeFilterMethod ทีละ node
-  //ถ้า 100 nodes ก็วนฟังชั่นนี้ 100 รอบ
-  //ยังไม่ใช้ เพราะเรียก api มาทีละ level user จะค่อยๆ แตก tree ออกมาอยู่แล้ว
-  //   if (hasMatch) {
-  //     // if the current node matches the filter, expand all nodes in the tree
-  //     expandedNode.value.push(node.keyId);
-  //     //expandAllNodes([node]);
-  //   }
+	//hasMatch จะได้เป็น keyId ของ node ที่หาเจอโดย q-tree จะวนเรียก treeFilterMethod ทีละ node
+	//ถ้า 100 nodes ก็วนฟังชั่นนี้ 100 รอบ
+	//ยังไม่ใช้ เพราะเรียก api มาทีละ level user จะค่อยๆ แตก tree ออกมาอยู่แล้ว
+	//   if (hasMatch) {
+	//     // if the current node matches the filter, expand all nodes in the tree
+	//     expandedNode.value.push(node.keyId);
+	//     //expandAllNodes([node]);
+	//   }
 
-  return hasMatch;
+	return hasMatch;
 };
 
 /**Add โครงสร้าง Org & Position
@@ -1394,67 +1737,67 @@ const treeFilterMethod = (node: any, filter: string) => {
  * @param node node that you want to add children data
  */
 const addStructure = async (node: any) => {
-  isShowEditTree.value = false; //ซ่อน editTree เพื่อให้สามารถเรียก lazyLoad ได้อีกครั้งเมื่อกลับมาแสดง
-  //   console.log(node);
-  console.log("organizationData.value", organizationData.value);
-  //   console.log("organizationForm.value", organizationForm.value);
-  console.log("positionData.value", positionData.value);
-  let organizCheck: Boolean = false;
-  let positionCheck: Boolean = false;
-  await organizationForm.value
-    ?.validate()
-    .then((e: Boolean) => (organizCheck = e));
-  await positionForm.value
-    ?.validate()
-    .then((e: Boolean) => (positionCheck = e));
-  //   if (positionData.value.length <= 0 && organizationData.value.length <= 0) {
-  //     popupAddOrganization.value = false;
-  //   } // no data to add close pop-up no message show when click save
-  if (
-    organizCheck == true &&
-    (positionCheck == true || modalHeaderPosition.value == false) &&
-    (positionData.value.length > 0 || organizationData.value.length > 0)
-  ) {
-    let reqOrgAr: Array<any> = JSON.parse(
-      JSON.stringify(organizationData.value)
-    );
-    reqOrgAr.forEach((a: any) => {
-      delete a["organizationShortName"];
-      delete a["organizationShortCode"];
-      a.organizationId = node.organizationId; //parentId ของ node ที่จะสร้าง
-    });
-    // console.log(node.organizationId);
-    console.log("Call API1");
-    loaderPage(true);
-    isShowEditTree.value = true; //ต้องกลับมาแสดง editTree อีกครั้ง & trigger lazyLoad โดย setExpanded
-    await http
-      .post(config.API.addTreeDraft, {
-        organizationId: node.organizationId, // GUID ของหน่วยงานต้นสังกัดที่ต้องการสร้างข้อมูล,  // ParentId ของ Org ที่จะเพิ่มใหม่
-        organizations: reqOrgAr,
-        positions: positionData.value, // รอต่อ api dropdown ตำแหน่งก่อน
-      })
-      .then(async (res) => {
-        success($q, "บันทึกข้อมูลร่างสำเร็จ");
+	isShowEditTree.value = false; //ซ่อน editTree เพื่อให้สามารถเรียก lazyLoad ได้อีกครั้งเมื่อกลับมาแสดง
+	//   console.log(node);
+	console.log("organizationData.value", organizationData.value);
+	//   console.log("organizationForm.value", organizationForm.value);
+	console.log("positionData.value", positionData.value);
+	let organizCheck: Boolean = false;
+	let positionCheck: Boolean = false;
+	await organizationForm.value
+		?.validate()
+		.then((e: Boolean) => (organizCheck = e));
+	await positionForm.value
+		?.validate()
+		.then((e: Boolean) => (positionCheck = e));
+	//   if (positionData.value.length <= 0 && organizationData.value.length <= 0) {
+	//     popupAddOrganization.value = false;
+	//   } // no data to add close pop-up no message show when click save
+	if (
+		organizCheck == true &&
+		(positionCheck == true || modalHeaderPosition.value == false) &&
+		(positionData.value.length > 0 || organizationData.value.length > 0)
+	) {
+		let reqOrgAr: Array<any> = JSON.parse(
+			JSON.stringify(organizationData.value)
+		);
+		reqOrgAr.forEach((a: any) => {
+			delete a["organizationShortName"];
+			delete a["organizationShortCode"];
+			a.organizationId = node.organizationId; //parentId ของ node ที่จะสร้าง
+		});
+		// console.log(node.organizationId);
+		console.log("Call API1");
+		loaderPage(true);
+		isShowEditTree.value = true; //ต้องกลับมาแสดง editTree อีกครั้ง & trigger lazyLoad โดย setExpanded
+		await http
+			.post(config.API.addTreeDraft, {
+				organizationId: node.organizationId, // GUID ของหน่วยงานต้นสังกัดที่ต้องการสร้างข้อมูล,  // ParentId ของ Org ที่จะเพิ่มใหม่
+				organizations: reqOrgAr,
+				positions: positionData.value, // รอต่อ api dropdown ตำแหน่งก่อน
+			})
+			.then(async (res) => {
+				success($q, "บันทึกข้อมูลร่างสำเร็จ");
 
-        //reload it's own node to see new added nodes
-        qtreeEdit.value.setExpanded(node.keyId, true);
-      })
+				//reload it's own node to see new added nodes
+				qtreeEdit.value.setExpanded(node.keyId, true);
+			})
 
-      .catch((e) => {
-        console.log(e);
-        console.log(e.response);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        loaderPage(false);
+			.catch((e) => {
+				console.log(e);
+				console.log(e.response);
+				messageError($q, e);
+			})
+			.finally(async () => {
+				loaderPage(false);
 
-        popupAddOrganization.value = false;
-        await isTreeHasDraft();
-      });
-  } else {
-    console.log("validation fail"); // or no data to add");
-  }
-  isShowEditTree.value = true;
+				popupAddOrganization.value = false;
+				await isTreeHasDraft();
+			});
+	} else {
+		console.log("validation fail"); // or no data to add");
+	}
+	isShowEditTree.value = true;
 };
 
 /**Edit โครงสร้างหน่วยงาน
@@ -1462,70 +1805,79 @@ const addStructure = async (node: any) => {
  * @param node node that you want to edit data
  */
 const editOrgStructure = async (node: any) => {
-  isShowEditTree.value = false; //start prepare for tricker LazyLoad
-  //   console.log(node);
-  //   console.log("organizationData.value", organizationData.value);
-  let organizCheck: Boolean = false;
+	isShowEditTree.value = false; //start prepare for tricker LazyLoad
+	//   console.log(node);
+	//   console.log("organizationData.value", organizationData.value);
+	let organizCheck: Boolean = false;
 
-  await organizationForm.value
-    ?.validate()
-    .then((e: Boolean) => (organizCheck = e));
-  //   if (organizationData.value.length <= 0) {
-  //     popupAddOrganization.value = false;
-  //   } // no data to add close pop-up when click save no message show
-  console.log("organizCheck=>", organizCheck);
-  //   console.log("organizationData.value.length=>", organizationData.value.length);
-  if (organizCheck == true) {
-    // console.log(node.organizationId);
-    console.log("Call API13");
-    loaderPage(true);
-    isShowEditTree.value = true; //end prepare for tricker LazyLoad
-    await http
-      .put(config.API.editTreeOrgDraft(node.organizationId), {
-        organizationId: node.organizationId, // GUID ของหน่วยงานที่ต้องการแก้ไขข้อมูล มีส่งไปใน uri ด้วย
-        organizationOrganizationId:
-          organizationDataEdit.value?.organizationOrganizationId,
-        organizationShortNameId:
-          organizationDataEdit.value?.organizationShortNameId,
-        organizationTypeId: organizationDataEdit.value?.organizationTypeId,
-        organizationLevelId: organizationDataEdit.value?.organizationLevelId,
-        organizationTelExternalId:
-          organizationDataEdit.value?.organizationExternalPhoneId,
-        organizationTelInternalId:
-          organizationDataEdit.value?.organizationInternalPhoneId,
-        organizationFaxId: organizationDataEdit.value?.organizationFaxId,
-        organizationOrder: organizationDataEdit.value?.organizationOrder,
-        organizationUserNote: organizationDataEdit.value?.organizationUserNote,
-        agency: organizationDataEdit.value?.agency,
-        government: organizationDataEdit.value?.government,
-        department: organizationDataEdit.value?.department,
-        pile: organizationDataEdit.value?.pile,
-        organizationStatusId: organizationDataEdit.value?.organizationStatusId,
-        isActive: organizationDataEdit.value?.isActive,
-      })
-      .then(async (res) => {
-        success($q, "บันทึกข้อมูลร่างสำเร็จ");
+	await organizationForm.value
+		?.validate()
+		.then((e: Boolean) => (organizCheck = e));
+	//   if (organizationData.value.length <= 0) {
+	//     popupAddOrganization.value = false;
+	//   } // no data to add close pop-up when click save no message show
+	console.log("organizCheck=>", organizCheck);
+	//   console.log("organizationData.value.length=>", organizationData.value.length);
+	if (organizCheck == true) {
+		// console.log(node.organizationId);
+		console.log("Call API13");
+		loaderPage(true);
+		isShowEditTree.value = true; //end prepare for tricker LazyLoad
+		await http
+			.put(config.API.editTreeOrgDraft(node.organizationId), {
+				organizationId: node.organizationId, // GUID ของหน่วยงานที่ต้องการแก้ไขข้อมูล มีส่งไปใน uri ด้วย
+				organizationOrganizationId:
+					organizationDataEdit.value?.organizationOrganizationId,
+				organizationShortNameId:
+					organizationDataEdit.value?.organizationShortNameId,
+				organizationTypeId:
+					organizationDataEdit.value?.organizationTypeId,
+				organizationLevelId:
+					organizationDataEdit.value?.organizationLevelId,
+				organizationTelExternalId:
+					organizationDataEdit.value?.organizationExternalPhoneId,
+				organizationTelInternalId:
+					organizationDataEdit.value?.organizationInternalPhoneId,
+				organizationFaxId:
+					organizationDataEdit.value?.organizationFaxId,
+				organizationOrder:
+					organizationDataEdit.value?.organizationOrder,
+				organizationUserNote:
+					organizationDataEdit.value?.organizationUserNote,
+				agency: organizationDataEdit.value?.agency,
+				government: organizationDataEdit.value?.government,
+				department: organizationDataEdit.value?.department,
+				pile: organizationDataEdit.value?.pile,
+				organizationStatusId:
+					organizationDataEdit.value?.organizationStatusId,
+				isActive: organizationDataEdit.value?.isActive,
+			})
+			.then(async (res) => {
+				success($q, "บันทึกข้อมูลร่างสำเร็จ");
 
-        //reload children nodes by setExpanded mother node
-        const nodeSplit = await node.keyId.split("-");
-        const nodeDelete = await nodeSplit.splice(0, nodeSplit.length - 1);
-        const nodeJoin = await nodeDelete.join("-");
-        qtreeEdit.value.setExpanded(nodeJoin, true);
-      })
-      .catch((e) => {
-        console.log(e);
-        console.log(e.response);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        loaderPage(false);
-        popupEditSelectedOrganization.value = false;
-        await isTreeHasDraft();
-      });
-  } else {
-    console.log("validation fail"); // or no data to add");
-  }
-  isShowEditTree.value = true;
+				//reload children nodes by setExpanded mother node
+				const nodeSplit = await node.keyId.split("-");
+				const nodeDelete = await nodeSplit.splice(
+					0,
+					nodeSplit.length - 1
+				);
+				const nodeJoin = await nodeDelete.join("-");
+				qtreeEdit.value.setExpanded(nodeJoin, true);
+			})
+			.catch((e) => {
+				console.log(e);
+				console.log(e.response);
+				messageError($q, e);
+			})
+			.finally(async () => {
+				loaderPage(false);
+				popupEditSelectedOrganization.value = false;
+				await isTreeHasDraft();
+			});
+	} else {
+		console.log("validation fail"); // or no data to add");
+	}
+	isShowEditTree.value = true;
 };
 
 /**Edit ตำแหน่ง ในโครงสร้าง
@@ -1533,84 +1885,92 @@ const editOrgStructure = async (node: any) => {
  * @param node node that you want to edit data
  */
 const editPositionStructure = async (node: any) => {
-  isShowEditTree.value = false; //start prepare for tricker LazyLoad
-  //   console.log("positionData.value", positionData.value);
-  //   console.log("Selectednode.keyId", node.keyId);
-  //   console.log("PrarentNode.keyId", node.keyId.slice(0, -2));
-  let positionCheck: Boolean = false;
-  await positionForm.value
-    ?.validate()
-    .then((e: Boolean) => (positionCheck = e));
+	isShowEditTree.value = false; //start prepare for tricker LazyLoad
+	//   console.log("positionData.value", positionData.value);
+	//   console.log("Selectednode.keyId", node.keyId);
+	//   console.log("PrarentNode.keyId", node.keyId.slice(0, -2));
+	let positionCheck: Boolean = false;
+	await positionForm.value
+		?.validate()
+		.then((e: Boolean) => (positionCheck = e));
 
-  if (positionCheck == true) {
-    console.log("Call API3");
-    loaderPage(true);
-    isShowEditTree.value = true; //end prepare for tricker LazyLoad
-    await http
-      .put(config.API.editTreePositionDraft(node.organizationPositionId), {
-        positionMasterId: positionData.value[0].positionMasterId,
-        positionUserNote: positionData.value[0].positionUserNote,
-        isActive: positionData.value[0].isActive,
-      })
-      .then(async (res) => {
-        success($q, "บันทึกข้อมูลร่างสำเร็จ");
+	if (positionCheck == true) {
+		console.log("Call API3");
+		loaderPage(true);
+		isShowEditTree.value = true; //end prepare for tricker LazyLoad
+		await http
+			.put(
+				config.API.editTreePositionDraft(node.organizationPositionId),
+				{
+					positionMasterId: positionData.value[0].positionMasterId,
+					positionUserNote: positionData.value[0].positionUserNote,
+					isActive: positionData.value[0].isActive,
+					isCondition: positionData.value[0].isCondition,
+					conditionNote: positionData.value[0].conditionNote,
+				}
+			)
+			.then(async (res) => {
+				success($q, "บันทึกข้อมูลร่างสำเร็จ");
 
-        //reload children nodes by setExpanded mother node
-        const nodeSplit = await node.keyId.split("-");
-        const nodeDelete = await nodeSplit.splice(0, nodeSplit.length - 1);
-        const nodeJoin = await nodeDelete.join("-");
-        qtreeEdit.value.setExpanded(nodeJoin, true);
-      })
-      .catch((e) => {
-        console.log(e);
-        console.log(e.response);
-        messageError($q, e);
-      })
-      .finally(async () => {
-        loaderPage(false);
-        popupEditSelectedPosition.value = false;
-        await isTreeHasDraft();
-      });
-  } else {
-    console.log("validation fail"); // or no data to add");
-  }
-  isShowEditTree.value = true;
+				//reload children nodes by setExpanded mother node
+				const nodeSplit = await node.keyId.split("-");
+				const nodeDelete = await nodeSplit.splice(
+					0,
+					nodeSplit.length - 1
+				);
+				const nodeJoin = await nodeDelete.join("-");
+				qtreeEdit.value.setExpanded(nodeJoin, true);
+			})
+			.catch((e) => {
+				console.log(e);
+				console.log(e.response);
+				messageError($q, e);
+			})
+			.finally(async () => {
+				loaderPage(false);
+				popupEditSelectedPosition.value = false;
+				await isTreeHasDraft();
+			});
+	} else {
+		console.log("validation fail"); // or no data to add");
+	}
+	isShowEditTree.value = true;
 };
 
 /**ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  */
 const clickHistory = async () => {
-  modalHistory.value = true;
-  //   rowsHistory.value = rawHistory.value.filter((f: any) => f.id == row.id);
+	modalHistory.value = true;
+	//   rowsHistory.value = rawHistory.value.filter((f: any) => f.id == row.id);
 
-  loaderPage(true);
-  await http
-    .get(config.API.getTreeHistory)
-    .then((res) => {
-      let data = res.data.result;
-      rowsHistory.value = [];
-      //   version.value = "published";
-      data.map((e: any) => {
-        rowsHistory.value.push({
-          detail: e.detail,
-          editUser: e.createdFullName,
-          editDate: e.createdAt,
-        });
-        // if (e.isPublished == false) {
-        //   version.value = "draft";
-        // }
-      });
-    })
-    .catch((e) => {
-      rowsHistory.value.splice(0);
-      console.log(e);
-      console.log(e.response);
-      manageApiErrorMsg(e);
-      //   messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	loaderPage(true);
+	await http
+		.get(config.API.getTreeHistory)
+		.then((res) => {
+			let data = res.data.result;
+			rowsHistory.value = [];
+			//   version.value = "published";
+			data.map((e: any) => {
+				rowsHistory.value.push({
+					detail: e.detail,
+					editUser: e.createdFullName,
+					editDate: e.createdAt,
+				});
+				// if (e.isPublished == false) {
+				//   version.value = "draft";
+				// }
+			});
+		})
+		.catch((e) => {
+			rowsHistory.value.splice(0);
+			console.log(e);
+			console.log(e.response);
+			manageApiErrorMsg(e);
+			//   messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 /**Check Error Code 404 before return error message
@@ -1618,103 +1978,104 @@ const clickHistory = async () => {
  * @param catchE throw catch error message (e)
  */
 const manageApiErrorMsg = (catchE: any) => {
-  if (catchE.response.status == 404 || catchE.response.data.status == 404) {
-    //Data not found is not error for GET method so do nothing
-    return;
-    //   } else if (
-    //     catchE.response.data.status == 400 ||
-    //     catchE.response.data.status == 403 ||
-    //     catchE.response.data.status == 404
-    //   ) {
-    //     //ใส่เป็น error กลางๆ ถ้ามีเคสให้เห็นมากขึ้น ถึงจะแยกข้อความได้
-    //     modalError(q, "พบข้อผิดพลาด", "ไม่พบข้อมูล");
-  } else {
-    messageError($q, catchE);
-  }
+	if (catchE.response.status == 404 || catchE.response.data.status == 404) {
+		//Data not found is not error for GET method so do nothing
+		return;
+		//   } else if (
+		//     catchE.response.data.status == 400 ||
+		//     catchE.response.data.status == 403 ||
+		//     catchE.response.data.status == 404
+		//   ) {
+		//     //ใส่เป็น error กลางๆ ถ้ามีเคสให้เห็นมากขึ้น ถึงจะแยกข้อความได้
+		//     modalError(q, "พบข้อผิดพลาด", "ไม่พบข้อมูล");
+	} else {
+		messageError($q, catchE);
+	}
 };
 </script>
 
 <style>
 .pointer:hover {
-  cursor: pointer;
-  background-color: #f4f4f4;
+	cursor: pointer;
+	background-color: #f4f4f4;
 }
 
 .q-tree__node-header {
-  padding: 0px;
-  margin-top: 0px;
-  border-radius: 4px;
-  outline: 0;
+	padding: 0px;
+	margin-top: 0px;
+	border-radius: 4px;
+	outline: 0;
 }
 /* .q-tree__node--selected .q-tree__node-header-content {
   border: 1px solid #02a998c0;
   border-radius: 4px;
 } */
 .topCard {
-  z-index: 50;
-  position: absolute;
-  left: 35px;
+	z-index: 50;
+	position: absolute;
+	left: 35px;
 }
 .my-custom-toggle {
-  border: 1px solid #02a998;
+	border: 1px solid #02a998;
 }
 .pageSK {
-  z-index: 30;
+	z-index: 30;
 }
 /* mouse over link */
 .abc:hover {
-  color: #ff00ff;
+	color: #ff00ff;
 }
 .btn-absolute {
-  z-index: 50;
-  position: absolute;
-  left: 200px;
-  top: 30px;
+	z-index: 50;
+	position: absolute;
+	left: 200px;
+	top: 30px;
 }
 .q-header {
-  z-index: 40;
+	z-index: 40;
 }
 .page-relative {
-  position: relative;
+	position: relative;
 }
 
 .my-list {
-  padding: 10px 10px;
+	padding: 10px 10px;
 }
 
 .my-card {
-  width: 100%;
-  max-width: 160px;
+	width: 100%;
+	max-width: 160px;
 }
 
 .sub-card {
-  height: 100%;
-  max-height: 265px;
+	height: 100%;
+	max-height: 265px;
 }
 
 .cardNum {
-  border-radius: 5px;
+	border-radius: 5px;
 }
 
 .fc-direction-ltr .fc-daygrid-event.fc-event-end,
 .fc-direction-rtl .fc-daygrid-event.fc-event-start {
-  padding-left: 5px;
+	padding-left: 5px;
 }
 
 .btnShadow {
-  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
+	box-shadow: 0 1px 2px rgb(0 0 0 / 10%),
+		3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
 }
 .texttop {
-  font-size: 18px;
-  font-weight: 500;
+	font-size: 18px;
+	font-weight: 500;
 }
 .textSub {
-  font-size: 0.8rem;
+	font-size: 0.8rem;
 }
 .btnline {
-  border: 1px solid #c8d3dba4;
+	border: 1px solid #c8d3dba4;
 }
 .q-tree {
-  color: #c8d3db;
+	color: #c8d3db;
 }
 </style>
diff --git a/src/modules/02_organizational/views/ManageReport2.vue b/src/modules/02_organizational/views/ManageReport2.vue
index 84724cb3d..7e73944a7 100644
--- a/src/modules/02_organizational/views/ManageReport2.vue
+++ b/src/modules/02_organizational/views/ManageReport2.vue
@@ -74,9 +74,6 @@
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
                 </div>
-                <div v-else-if="col.name == 'statusPosition'">
-                  {{ col.value ? "ถือครอง" : "ว่าง" }}
-                </div>
                 <div
                   v-else-if="col.name == 'levelOld' || col.name == 'levelNew'"
                 >
@@ -351,6 +348,7 @@ const doSearch = async () => {
             no: index + 1,
             report2Id: e.report2Id,
             profilePositionId: e.profilePositionId,
+            organizationPositionId: e.organizationPositionId,
             name: e.name ?? "-",
             edu: e.edu ?? "-",
             posiNumOld: e.posiNumOld ?? "-",
@@ -363,7 +361,8 @@ const doSearch = async () => {
               e.report2Id == "00000000-0000-0000-0000-000000000000"
                 ? "ไม่เปลี่ยนแปลง"
                 : "เปลี่ยนแปลง",
-            statusPosition: e.statusPosition,
+            statusPosition:
+              e.statusPosition?.toString() === "true" ? "ครอง" : "ไม่ครอง",
           });
         });
         rows.value = array;
@@ -402,11 +401,11 @@ const onConfirm = async () => {
 };
 
 const clickTransfer = async (rows: ResponseTree) => {
-  if (rows.statusPosition) {
-    router.push(
-      `/organizational/manage/report/${rows.profilePositionId ?? "1"}`
-    );
-  }
+  //   if (rows.statusPosition) {
+  router.push(
+    `/organizational/manage/report/${rows.organizationPositionId ?? "1"}`
+  );
+  //   }
 };
 </script>
 
diff --git a/src/modules/02_organizational/views/ManageReport2Add.vue b/src/modules/02_organizational/views/ManageReport2Add.vue
index 10cac68e6..bb0d3e27b 100644
--- a/src/modules/02_organizational/views/ManageReport2Add.vue
+++ b/src/modules/02_organizational/views/ManageReport2Add.vue
@@ -14,7 +14,7 @@
       @click="clickBack"
     />
     <label
-      >บัญชีจัดข้าราชการกรุงเทพมหานครสามัญเข้าประเภทตำแหน่ง สายงาน
+      >บัญชีจัดข้าราชการกรุงเทพมหานครสามัญเข้าตำแหน่งประเภท สายงาน
       และระดับตำแหน่ง</label
     >
   </div>
@@ -154,7 +154,7 @@
                 <q-select
                   class="col-xs-12 col-sm-6"
                   v-model="myData.category"
-                  label="ประเภทตำแหน่ง"
+                  label="ตำแหน่งประเภท"
                   dense
                   emit-value
                   map-options
@@ -384,7 +384,7 @@
                   dense
                   :options="categoryOP"
                   v-model="myData.category2"
-                  label="ประเภทตำแหน่ง"
+                  label="ตำแหน่งประเภท"
                   emit-value
                   map-options
                   option-label="name"
@@ -557,12 +557,13 @@
       <q-card-actions class="q-py-sm">
         <q-space />
         <q-btn
-          unelevated
+          flat
+          round
           color="public"
-          label="บันทึก"
+          icon="mdi-content-save-outline"
           @click="checkSave"
-        > <!-- icon="mdi-content-save-outline"
-          <q-tooltip>บันทึก</q-tooltip> -->
+        >
+          <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </q-card-actions>
     </q-form>
@@ -710,15 +711,42 @@ const fetchData = async () => {
       myData.value.category = data.category ?? "";
       myData.value.level = data.level ?? "";
       await updateGoverment(data.goverment2);
-      myData.value.goverment2 = data.goverment2 ?? "";
-      myData.value.agency2 = data.agency2 ?? "";
-      myData.value.posiNum2 = data.posiNum2 ?? "";
-      myData.value.posiManage2 = data.posiManage2 ?? "";
-      myData.value.sideManage2 = data.sideManage2 ?? "";
-      myData.value.posiWork2 = data.posiWork2 ?? "";
-      myData.value.sideWork2 = data.sideWork2 ?? "";
-      myData.value.category2 = data.category2 ?? "";
-      myData.value.level2 = data.level2 ?? "";
+      myData.value.goverment2 =
+        data.goverment2 == "00000000-0000-0000-0000-000000000000"
+          ? ""
+          : data.goverment2;
+      myData.value.agency2 =
+        data.agency2 == "00000000-0000-0000-0000-000000000000"
+          ? ""
+          : data.agency2;
+      myData.value.posiNum2 =
+        data.posiNum2 == "00000000-0000-0000-0000-000000000000"
+          ? ""
+          : data.posiNum2;
+      myData.value.posiManage2 =
+        data.posiManage2 == "00000000-0000-0000-0000-000000000000"
+          ? ""
+          : data.posiManage2;
+      myData.value.sideManage2 =
+        data.sideManage2 == "00000000-0000-0000-0000-000000000000"
+          ? ""
+          : data.sideManage2;
+      myData.value.posiWork2 =
+        data.posiWork2 == "00000000-0000-0000-0000-000000000000"
+          ? ""
+          : data.posiWork2;
+      myData.value.sideWork2 =
+        data.sideWork2 == "00000000-0000-0000-0000-000000000000"
+          ? ""
+          : data.sideWork2;
+      myData.value.category2 =
+        data.category2 == "00000000-0000-0000-0000-000000000000"
+          ? ""
+          : data.category2;
+      myData.value.level2 =
+        data.level2 == "00000000-0000-0000-0000-000000000000"
+          ? ""
+          : data.level2;
     })
     .catch((e) => {})
     .finally(() => {
@@ -913,7 +941,7 @@ const fetchPositionNum = async () => {
     });
 };
 
-//ประเภทตำแหน่ง
+//ตำแหน่งประเภท
 const fetchCategory = async () => {
   //   loaderPage(true);
   await http
@@ -1058,7 +1086,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
       });
       break;
     case "4":
-      //ประเภทตำแหน่ง
+      //ตำแหน่งประเภท
       update(() => {
         categoryOP.value = categoryOPfilter.value.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
diff --git a/src/modules/02_organizational/views/ManageReport2History.vue b/src/modules/02_organizational/views/ManageReport2History.vue
index 255801559..ae8be4187 100644
--- a/src/modules/02_organizational/views/ManageReport2History.vue
+++ b/src/modules/02_organizational/views/ManageReport2History.vue
@@ -11,7 +11,7 @@
       @click="clickBack"
     />
     <label
-      >ประวัติบัญชีจัดข้าราชการกรุงเทพมหานครสามัญเข้าประเภทตำแหน่ง สายงาน
+      >ประวัติบัญชีจัดข้าราชการกรุงเทพมหานครสามัญเข้าตำแหน่งประเภท สายงาน
       และระดับตำแหน่ง</label
     >
     <q-card flat bordered class="col-12 q-my-sm q-pt-sm">
@@ -147,7 +147,7 @@
                 />
                 <q-input
                   v-model="items.oldPositionType"
-                  label="ประเภทตำแหน่ง"
+                  label="ตำแหน่งประเภท"
                   class="col-xs-12 col-sm-6"
                   hide-bottom-space
                   :outlined="false"
@@ -259,7 +259,7 @@
                 />
                 <q-input
                   v-model="items.newPositionType"
-                  label="ประเภทตำแหน่ง"
+                  label="ตำแหน่งประเภท"
                   class="col-xs-12 col-sm-6"
                   hide-bottom-space
                   :outlined="false"
diff --git a/src/modules/02_organizational/views/Report.vue b/src/modules/02_organizational/views/Report.vue
index 75426f4da..4e8b2998a 100644
--- a/src/modules/02_organizational/views/Report.vue
+++ b/src/modules/02_organizational/views/Report.vue
@@ -1,91 +1,109 @@
 <template>
-  <div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
-  <div class="col-12 row"></div>
-  <q-card flat bordered class="col-12">
-    <div class="row col-12">
-      <q-tabs
-        v-model="tab"
-        no-caps
-        inline-label
-        align="left"
-        active-class="text-primary"
-        class="text-grey-7"
-      >
-        <q-tab name="audit1" label="บัญชี 1" />
-        <q-tab name="audit2" label="บัญชี 2" />
-        <q-tab name="audit3" label="บัญชี 3" />
-      </q-tabs>
-    </div>
-    <q-separator />
-    <q-tab-panels
-      v-model="tab"
-      transition-prev="jump-up"
-      transition-next="jump-up"
-      animated
-      swipeable
-      class="row col-12 text-dark"
-    >
-      <q-tab-panel name="audit1">
-        <div class="row col-12 items-center q-gutter-md">
-          <span class="text-subtitle1 text-weight-medium"
-            >รายงานบัญชีฉบับที่ 1</span
-          >
-          <q-select
-            class="col-xs-12 col-sm-6"
-            v-model="goverment"
-            label="รหัสส่วนราชการ"
-            dense
-            emit-value
-            map-options
-            option-label="name"
-            :options="govermentOP"
-            option-value="id"
-            lazy-rules
-            hide-bottom-space
-            :readonly="true"
-            :borderless="true"
-            :outlined="false"
-            :hide-dropdown-icon="true"
-          />
-          <q-btn size="md" icon="mdi-download" round flat color="primary">
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <!-- <viewpdf 
+	<div class="toptitle text-dark col-12 row items-center">รายงานบัญชี</div>
+	<div class="col-12 row"></div>
+	<q-card flat bordered class="col-12">
+		<div class="row col-12">
+			<q-tabs
+				v-model="tab"
+				no-caps
+				inline-label
+				align="left"
+				active-class="text-primary"
+				class="text-grey-7"
+			>
+				<q-tab name="audit1" label="บัญชี 1" />
+				<q-tab name="audit2" label="บัญชี 2" />
+				<q-tab name="audit3" label="บัญชี 3" />
+			</q-tabs>
+		</div>
+		<q-separator />
+		<q-tab-panels
+			v-model="tab"
+			transition-prev="jump-up"
+			transition-next="jump-up"
+			animated
+			swipeable
+			class="row col-12 text-dark"
+		>
+			<q-tab-panel name="audit1">
+				<div class="row col-12 items-center q-gutter-md">
+					<span class="text-subtitle1 text-weight-medium"
+						>รายงานบัญชีฉบับที่ 1</span
+					>
+					<q-select
+						class="col-xs-12 col-sm-6"
+						v-model="goverment"
+						label="รหัสส่วนราชการ"
+						dense
+						emit-value
+						map-options
+						option-label="name"
+						:options="govermentOP"
+						option-value="id"
+						lazy-rules
+						hide-bottom-space
+						:readonly="true"
+						:borderless="true"
+						:outlined="false"
+						:hide-dropdown-icon="true"
+					/>
+					<q-btn
+						size="md"
+						icon="mdi-download"
+						round
+						flat
+						color="primary"
+					>
+						<q-tooltip>ดาวน์โหลด</q-tooltip>
+					</q-btn>
+					<!-- <viewpdf 
                         :src="pdfSrc" 
                         :currentpage="pdfCurrentPage" 
                         :totalpage="pdfTotalPage" /> -->
-        </div>
-      </q-tab-panel>
-      <q-tab-panel name="audit2">
-        <div class="row col-12 items-center q-gutter-md">
-          <span class="text-subtitle1 text-weight-medium"
-            >รายงานบัญชีฉบับที่ 2</span
-          >
-          <q-btn size="md" icon="mdi-download" flat round color="primary">
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <!-- <viewpdf 
+				</div>
+			</q-tab-panel>
+			<q-tab-panel name="audit2">
+				<div class="row col-12 items-center q-gutter-md">
+					<span class="text-subtitle1 text-weight-medium"
+						>รายงานบัญชีฉบับที่ 2</span
+					>
+					<q-btn
+						size="md"
+						icon="mdi-download"
+						flat
+						round
+						color="primary"
+					>
+						<q-tooltip>ดาวน์โหลด</q-tooltip>
+					</q-btn>
+					<!-- <viewpdf 
                         :src="pdfSrc" 
                         :currentpage="pdfCurrentPage" 
                         :totalpage="pdfTotalPage" /> -->
-        </div>
-      </q-tab-panel>
-      <q-tab-panel name="audit3">
-        <div class="row col-12 items-center q-gutter-md">
-          <span class="text-subtitle1 text-weight-medium"
-            >รายงานบัญชีฉบับที่ 3</span
-          >
-          <q-btn size="md" icon="mdi-download" flat round color="primary">
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <!-- <viewpdf 
+				</div>
+			</q-tab-panel>
+			<q-tab-panel name="audit3">
+				<div class="row col-12 items-center q-gutter-md">
+					<span class="text-subtitle1 text-weight-medium"
+						>รายงานบัญชีฉบับที่ 3</span
+					>
+					<q-btn
+						size="md"
+						icon="mdi-download"
+						flat
+						round
+						color="primary"
+					>
+						<q-tooltip>ดาวน์โหลด</q-tooltip>
+					</q-btn>
+					<!-- <viewpdf 
                         :src="pdfSrc" 
                         :currentpage="pdfCurrentPage" 
                         :totalpage="pdfTotalPage" /> -->
-        </div>
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-card>
+				</div>
+			</q-tab-panel>
+		</q-tab-panels>
+	</q-card>
 </template>
 <script setup lang="ts">
 import { onMounted, computed, ref, watch } from "vue";
@@ -117,32 +135,32 @@ const goverment = ref<string>("");
 const tab = ref<string>("audit1");
 
 const fetchOrganizationAgency = async () => {
-  loaderPage(true);
-  await http
-    // .get(config.API.organizationAgency)
-    .get(config.API.listOrganizationAgency("หน่วยงาน"))
-    .then((res) => {
-      const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: any) => {
-        option.push({
-          id: r.organizationId.toString(),
-          name: r.organizationName.toString(),
-        });
-      });
-      govermentOP.value = option;
-      govermentOPfilter.value = option;
-    })
-    .catch((e) => {
-      console.log(e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	loaderPage(true);
+	await http
+		// .get(config.API.organizationAgency)
+		.get(config.API.listOrganizationAgency("หน่วยงาน"))
+		.then((res) => {
+			const data = res.data.result;
+			let option: DataOption[] = [];
+			data.map((r: any) => {
+				option.push({
+					id: r.organizationId.toString(),
+					name: r.organizationName.toString(),
+				});
+			});
+			govermentOP.value = option;
+			govermentOPfilter.value = option;
+		})
+		.catch((e) => {
+			console.log(e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 onMounted(async () => {
-  loaderPage(false);
-  await fetchOrganizationAgency();
+	loaderPage(false);
+	await fetchOrganizationAgency();
 });
 </script>
diff --git a/src/modules/03_recruiting/components/DialogFooter.vue b/src/modules/03_recruiting/components/DialogFooter.vue
index ddcd3a56e..20c8c16c2 100644
--- a/src/modules/03_recruiting/components/DialogFooter.vue
+++ b/src/modules/03_recruiting/components/DialogFooter.vue
@@ -22,24 +22,25 @@
     <div v-if="editData">
       <q-btn
         v-if="!editvisible"
-        outline
+        flat
+        round
         :disabled="editvisible"
         :color="editvisible ? 'grey-7' : 'primary'"
         @click="edit"
-        label="แก้ไขข้อมูล"
-      > <!-- icon="mdi-pencil-outline"
-        <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
+        icon="mdi-pencil-outline"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
       </q-btn>
       <div v-else>
         <q-btn
-          unelevated
-          label="บันทึก"
+          flat
+          round
           :disabled="!editvisible"
           :color="!editvisible ? 'grey-7' : 'public'"
           @click="checkSave"
-          
-        > <!-- icon="mdi-content-save-outline"
-          <q-tooltip>บันทึก</q-tooltip> -->
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </div>
     </div>
diff --git a/src/modules/03_recruiting/components/ExamFinished.vue b/src/modules/03_recruiting/components/ExamFinished.vue
index 57a8d2582..99060e6f1 100644
--- a/src/modules/03_recruiting/components/ExamFinished.vue
+++ b/src/modules/03_recruiting/components/ExamFinished.vue
@@ -17,6 +17,18 @@
         <div class="">เลขที่นั่งสอบ :</div>
         <div class="text-black text-bold q-pl-sm">{{ examSeat }}</div>
       </div>
+      <div class="row">
+        <div class="">วันสอบ :</div>
+        <div class="text-black text-bold q-pl-sm">5 มิ.ย. 2566</div>
+      </div>
+      <div class="row">
+        <div class="">ครั้งที่สอบ :</div>
+        <div class="text-black text-bold q-pl-sm">1</div>
+      </div>
+      <div class="row">
+        <div class="">ชุดข้อสอบ :</div>
+        <div class="text-black text-bold q-pl-sm">0506-1/2566</div>
+      </div>
     </div>
 
     <q-card-section class="col-3">
@@ -31,6 +43,10 @@
   </q-card>
   <q-card bordered flat class="col-12 row q-mt-md">
     <div class="q-pa-md row">
+      <div class="col-12 text-weight-bold row items-center">
+        ผลคะแนนสอบ
+        <q-space />
+      </div>
       <div class="row items-center q-gutter-y-sm col-12">
         <div class="col-xs-4 col-sm-5 text-weight-bold text-grey-7">ประเภท</div>
         <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
diff --git a/src/modules/03_recruiting/components/Family.vue b/src/modules/03_recruiting/components/Family.vue
index 6dbe2e344..7d0f903d9 100644
--- a/src/modules/03_recruiting/components/Family.vue
+++ b/src/modules/03_recruiting/components/Family.vue
@@ -27,6 +27,7 @@
           unchecked-icon="panorama_fish_eye"
           val="0"
           label="ไม่มี"
+          color="grey-9"
           dense
           :disable="!(status == 'checkRegister' || status == 'payment')"
         />
@@ -37,7 +38,7 @@
           :class="getClass(status == 'checkRegister' || status == 'payment')"
           :readonly="!(status == 'checkRegister' || status == 'payment')"
           :borderless="!(status == 'checkRegister' || status == 'payment')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
           :outlined="status == 'checkRegister' || status == 'payment'"
           dense
           lazy-rules
@@ -47,7 +48,7 @@
           option-label="name"
           :options="prefixOptions"
           option-value="id"
-          :label="`${'คำนำหน้า'}`"
+          :label="`${'คำนำหน้าชื่อ'}`"
         />
       </div>
 
@@ -115,7 +116,7 @@
           :class="getClass(status == 'checkRegister' || status == 'payment')"
           :readonly="!(status == 'checkRegister' || status == 'payment')"
           :borderless="!(status == 'checkRegister' || status == 'payment')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
           :outlined="status == 'checkRegister' || status == 'payment'"
           dense
           lazy-rules
@@ -125,7 +126,7 @@
           option-label="name"
           :options="prefixOptions"
           option-value="id"
-          :label="`${'คำนำหน้า'}`"
+          :label="`${'คำนำหน้าชื่อ'}`"
         />
       </div>
 
@@ -193,7 +194,7 @@
           :class="getClass(status == 'checkRegister' || status == 'payment')"
           :readonly="!(status == 'checkRegister' || status == 'payment')"
           :borderless="!(status == 'checkRegister' || status == 'payment')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
           :outlined="status == 'checkRegister' || status == 'payment'"
           dense
           lazy-rules
@@ -203,7 +204,7 @@
           option-label="name"
           :options="prefixOptions"
           option-value="id"
-          :label="`${'คำนำหน้า'}`"
+          :label="`${'คำนำหน้าชื่อ'}`"
         />
       </div>
       <div class="col-xs-6 col-sm-3 col-md-3">
diff --git a/src/modules/03_recruiting/components/Information.vue b/src/modules/03_recruiting/components/Information.vue
index ade873016..cf1bc5f3c 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -21,7 +21,7 @@
           :class="getClass(status == 'checkRegister' || status == 'payment')"
           :readonly="!(status == 'checkRegister' || status == 'payment')"
           :borderless="!(status == 'checkRegister' || status == 'payment')"
-          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+          :rules="[(val) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
           :outlined="status == 'checkRegister' || status == 'payment'"
           dense
           lazy-rules
@@ -31,7 +31,7 @@
           option-label="name"
           :options="prefixOptions"
           option-value="id"
-          :label="`${'คำนำหน้า'}`"
+          :label="`${'คำนำหน้าชื่อ'}`"
         />
       </div>
       <div class="col-xs-12 col-sm-5 col-md-5">
diff --git a/src/modules/03_recruiting/components/Occupation.vue b/src/modules/03_recruiting/components/Occupation.vue
index b9c22a933..fce1b52a6 100644
--- a/src/modules/03_recruiting/components/Occupation.vue
+++ b/src/modules/03_recruiting/components/Occupation.vue
@@ -1,8 +1,8 @@
-<!-- card อาชีพ -->
+<!-- card หน่วยงานผู้รับผิดชอบดำเนินการ -->
 <template>
   <HeaderTop
     v-model:edit="edit"
-    header="อาชีพ"
+    header="หน่วยงานผู้รับผิดชอบดำเนินการ"
     icon="mdi-briefcase"
     :addData="true"
     :editOnly="false"
diff --git a/src/modules/03_recruiting/components/Table.vue b/src/modules/03_recruiting/components/Table.vue
index 4b4016279..a118ab7f3 100644
--- a/src/modules/03_recruiting/components/Table.vue
+++ b/src/modules/03_recruiting/components/Table.vue
@@ -1,126 +1,128 @@
 <template>
-  <div class="q-pb-sm row q-col-gutter-sm">
-    <!--  -->
-    <div class="q-gutter-sm" v-if="nornmalData == true">
-      <q-btn
-        size="12px"
-        flat
-        round
-        color="add"
-        @click="checkAdd"
-        icon="mdi-plus"
-      >
-        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-      </q-btn>
-    </div>
-    <div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
-      <q-card bordered flat class="q-px-md no-wrap row">
-        <div class="col-12 text-subtitle2 row items-center">
-          <span class="text-weight-medium text-dark">ผู้สมัครสอบ</span>
-          <q-space />
-          <q-badge
-            color="white"
-            class="text-weight-bold text-subtitle1 text-primary"
-            :label="`${count}`"
-            rounded
-          />
-        </div>
-      </q-card>
-      <q-card bordered flat class="q-px-md no-wrap row">
-        <div class="col-12 text-subtitle2 row items-center">
-          <span class="text-weight-medium text-dark">สอบผ่าน</span>
-          <q-space />
-          <q-badge
-            color="white"
-            class="text-weight-bold text-subtitle1 text-blue"
-            :label="`${pass}`"
-            rounded
-          />
-        </div>
-      </q-card>
+	<div class="q-pb-sm row q-col-gutter-sm">
+		<!--  -->
+		<div class="q-gutter-sm" v-if="nornmalData == true">
+			<q-btn
+				size="12px"
+				flat
+				round
+				color="add"
+				@click="checkAdd"
+				icon="mdi-plus"
+			>
+				<q-tooltip>เพิ่มข้อมูล</q-tooltip>
+			</q-btn>
+		</div>
+		<div class="row q-gutter-sm q-pb-sm" v-if="conclude == true">
+			<q-card bordered flat class="q-px-md no-wrap row">
+				<div class="col-12 text-subtitle2 row items-center">
+					<span class="text-weight-medium text-dark"
+						>ผู้สมัครสอบ</span
+					>
+					<q-space />
+					<q-badge
+						color="white"
+						class="text-weight-bold text-subtitle1 text-primary"
+						:label="`${count}`"
+						rounded
+					/>
+				</div>
+			</q-card>
+			<q-card bordered flat class="q-px-md no-wrap row">
+				<div class="col-12 text-subtitle2 row items-center">
+					<span class="text-weight-medium text-dark">สอบผ่าน</span>
+					<q-space />
+					<q-badge
+						color="white"
+						class="text-weight-bold text-subtitle1 text-blue"
+						:label="`${pass}`"
+						rounded
+					/>
+				</div>
+			</q-card>
 
-      <q-card bordered flat class="q-px-md no-wrap row">
-        <div class="col-12 text-subtitle2 row items-center">
-          <span class="text-weight-medium text-dark">สอบไม่ผ่าน</span>
-          <q-space />
-          <q-badge
-            color="white"
-            class="text-weight-bold text-subtitle1 text-pink"
-            :label="`${notpass}`"
-            rounded
-          />
-        </div>
-      </q-card>
-    </div>
-    <q-space />
-    <div class="items-center q-gutter-sm" style="display: flex">
-      <!-- ค้นหาข้อความใน table -->
-      <q-input
-        standout
-        dense
-        :model-value="inputfilter"
-        ref="filterRef"
-        @update:model-value="updateInput"
-        outlined
-        debounce="300"
-        placeholder="ค้นหา"
-        style="max-width: 200px"
-      >
-        <template v-slot:append>
-          <q-icon v-if="inputfilter == ''" name="search" />
-          <q-icon
-            v-if="inputfilter !== ''"
-            name="clear"
-            class="cursor-pointer"
-            @click="resetFilter"
-          />
-        </template>
-      </q-input>
-      <!-- แสดงคอลัมน์ใน table -->
-      <q-select
-        :model-value="inputvisible"
-        @update:model-value="updateVisible"
-        :display-value="$q.lang.table.columns"
-        multiple
-        outlined
-        dense
-        :options="attrs.columns"
-        options-dense
-        option-value="name"
-        map-options
-        emit-value
-        style="min-width: 150px"
-        class="gt-xs"
-      >
-        <template> </template>
-      </q-select>
-    </div>
-  </div>
-  <q-table
-    ref="table"
-    flat
-    bordered
-    class="custom-table2"
-    v-bind="attrs"
-    virtual-scroll
-    :virtual-scroll-sticky-size-start="48"
-    dense
-    :pagination-label="paginationLabel"
-    :pagination="initialPagination"
-    :rows-per-page-options="[0]"
-  >
-    <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" v-html="col.label" />
-        </q-th>
-        <q-th auto-width v-if="nornmalData == true" />
-      </q-tr>
-    </template>
-    <template #body="props">
-      <slot v-bind="props" name="columns"></slot>
-    </template>
-  </q-table>
+			<q-card bordered flat class="q-px-md no-wrap row">
+				<div class="col-12 text-subtitle2 row items-center">
+					<span class="text-weight-medium text-dark">สอบไม่ผ่าน</span>
+					<q-space />
+					<q-badge
+						color="white"
+						class="text-weight-bold text-subtitle1 text-pink"
+						:label="`${notpass}`"
+						rounded
+					/>
+				</div>
+			</q-card>
+		</div>
+		<q-space />
+		<div class="items-center q-gutter-sm" style="display: flex">
+			<!-- ค้นหาข้อความใน table -->
+			<q-input
+				standout
+				dense
+				:model-value="inputfilter"
+				ref="filterRef"
+				@update:model-value="updateInput"
+				outlined
+				debounce="300"
+				placeholder="ค้นหา"
+				style="max-width: 200px"
+			>
+				<template v-slot:append>
+					<q-icon v-if="inputfilter == ''" name="search" />
+					<q-icon
+						v-if="inputfilter !== ''"
+						name="clear"
+						class="cursor-pointer"
+						@click="resetFilter"
+					/>
+				</template>
+			</q-input>
+			<!-- แสดงคอลัมน์ใน table -->
+			<q-select
+				:model-value="inputvisible"
+				@update:model-value="updateVisible"
+				:display-value="$q.lang.table.columns"
+				multiple
+				outlined
+				dense
+				:options="attrs.columns"
+				options-dense
+				option-value="name"
+				map-options
+				emit-value
+				style="min-width: 150px"
+				class="gt-xs"
+			>
+				<template> </template>
+			</q-select>
+		</div>
+	</div>
+	<q-table
+		ref="table"
+		flat
+		bordered
+		class="custom-table2"
+		v-bind="attrs"
+		virtual-scroll
+		:virtual-scroll-sticky-size-start="48"
+		dense
+		:pagination-label="paginationLabel"
+		:pagination="initialPagination"
+		:rows-per-page-options="[0]"
+	>
+		<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" v-html="col.label" />
+				</q-th>
+				<q-th auto-width v-if="nornmalData == true" />
+			</q-tr>
+		</template>
+		<template #body="props">
+			<slot v-bind="props" name="columns"></slot>
+		</template>
+	</q-table>
 </template>
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
@@ -130,106 +132,106 @@ const attrs = ref<any>(useAttrs());
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
 const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+	rowsPerPage: 0,
 });
 
 const props = defineProps({
-  count: Number,
-  pass: Number,
-  notpass: Number,
+	count: Number,
+	pass: Number,
+	notpass: Number,
 
-  inputfilter: String,
-  name: String,
-  icon: String,
-  inputvisible: Array,
-  editvisible: Boolean,
-  add: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  validate: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  nornmalData: {
-    type: Boolean,
-    defualt: true,
-  },
-  conclude: {
-    type: Boolean,
-    defualt: false,
-  },
+	inputfilter: String,
+	name: String,
+	icon: String,
+	inputvisible: Array,
+	editvisible: Boolean,
+	add: {
+		type: Function,
+		default: () => console.log("not function"),
+	},
+	validate: {
+		type: Function,
+		default: () => console.log("not function"),
+	},
+	nornmalData: {
+		type: Boolean,
+		defualt: true,
+	},
+	conclude: {
+		type: Boolean,
+		defualt: false,
+	},
 });
 
 const emit = defineEmits([
-  "update:inputfilter",
-  "update:inputvisible",
-  "update:editvisible",
+	"update:inputfilter",
+	"update:inputvisible",
+	"update:editvisible",
 ]);
 const updateInput = (value: string | number | null) => {
-  emit("update:inputfilter", value);
+	emit("update:inputfilter", value);
 };
 const updateVisible = (value: []) => {
-  emit("update:inputvisible", value);
+	emit("update:inputvisible", value);
 };
 
 const paginationLabel = (start: string, end: string, total: string) => {
-  return start + "-" + end + " ใน " + total;
+	return start + "-" + end + " ใน " + total;
 };
 
 const checkAdd = () => {
-  props.add();
+	props.add();
 };
 
 const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  emit("update:inputfilter", "");
-  filterRef.value.focus();
+	// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+	emit("update:inputfilter", "");
+	filterRef.value.focus();
 };
 </script>
 <style lang="scss">
 .icon-color {
-  color: #4154b3;
+	color: #4154b3;
 }
 
 .custom-table2 {
-  max-height: 64vh;
+	max-height: 64vh;
 
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
+	.q-table tr:nth-child(odd) td {
+		background: white;
+	}
 
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
+	.q-table tr:nth-child(even) td {
+		background: #f8f8f8;
+	}
 
-  .q-table thead tr {
-    background: #ecebeb;
-  }
+	.q-table thead tr {
+		background: #ecebeb;
+	}
 
-  .q-table thead tr th {
-    position: sticky;
-  }
+	.q-table thead tr th {
+		position: sticky;
+	}
 
-  .q-table td:nth-of-type(2) {
-    z-index: 3 !important;
-  }
+	.q-table td:nth-of-type(2) {
+		z-index: 3 !important;
+	}
 
-  .q-table th:nth-of-type(2),
-  .q-table td:nth-of-type(2) {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-  }
+	.q-table th:nth-of-type(2),
+	.q-table td:nth-of-type(2) {
+		position: sticky;
+		left: 0;
+		z-index: 1;
+	}
 
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
+	/* this will be the loading indicator */
+	.q-table thead tr:last-child th {
+		/* height of all previous header rows */
+		top: 48px;
+	}
 
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
+	.q-table thead tr:first-child th {
+		top: 0;
+	}
 }
 </style>
diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index 55f53c355..e454070d0 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-px-md q-pb-md">
-    <div class="col-12 row q-py-sm  q-gutter-sm items-center">
+    <div class="col-12 row q-py-sm items-center">
       <span class="text-subtitle1">{{ titleText }}</span>
       <q-select
         dense
@@ -23,6 +23,7 @@
         use-chips
         multiple
         v-if="statusPayment"
+        class="q-pl-sm"
       >
         <template v-slot:prepend>
           <q-icon name="attach_file" color="blue" />
diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index 2dfbdf764..6da585171 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -11,14 +11,16 @@
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    รายชื่อผู้สมัครสอบรอบ {{ name }} ครั้งที่ {{ round }}/{{ year }}
+    รายชื่อผู้สมัครสอบแข่งขัน {{ name }} ครั้งที่ {{ round }}/{{ year }}
     <q-space />
     <q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
       <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
       <q-menu>
         <q-list style="min-width: 100px">
           <q-item clickable v-close-popup @click="downloadExam()">
-            <q-item-section class="text-blue">ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section>
+            <q-item-section class="text-blue"
+              >ส่งออกข้อมูลผู้มีสิทธิ์สอบ</q-item-section
+            >
           </q-item>
           <q-item clickable v-close-popup @click="downloadPassExam()">
             <q-item-section class="text-primary"
@@ -158,7 +160,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px; min-width: 20px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "profileID",
@@ -187,7 +192,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "gender",
@@ -198,7 +206,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "position_name",
@@ -209,7 +220,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "university",
@@ -220,7 +234,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "degree",
@@ -231,7 +248,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "major",
@@ -242,7 +262,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "certificateNo",
@@ -253,7 +276,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "certificateIssueDate",
@@ -264,7 +290,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "examAttribute",
@@ -275,7 +304,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "examScore",
@@ -286,18 +318,24 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "examResult",
     align: "left",
-    label: "ผลการสอบ",
+    label: "ผลคะแนนสอบ",
     sortable: true,
     field: "examResult",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
   {
     name: "applyDate",
@@ -308,7 +346,10 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
   },
 ]);
 
@@ -392,22 +433,29 @@ const fetchData = async () => {
       examResult: "",
     })
     .then((res) => {
-      var header = res.data.result.header;
+      let header = res.data.result.header;
+      let period = res.data.result.period;
       count.value = header.count;
       pass.value = header.pass;
       notpass.value = header.notpass;
+
+      // period information
+      name.value = period.name;
+      round.value = period.order as string;
+      year.value =
+        period.year >= 2500 ? period.year : ((period.year + 543) as string);
+
       const data = res.data.result.data;
-      let result: RecruitDetailResponse[] = [];
       if (data.length > 0) {
-        data.map((r: RecruitDetailResponse) => {
-          r.personName = `${r.prefix}${r.fullName}`;
-          result.push(r);
-        });
+        let result: RecruitDetailResponse[] = [];
+        if (data.length > 0) {
+          data.map((r: RecruitDetailResponse) => {
+            r.personName = `${r.prefix}${r.fullName}`;
+            result.push(r);
+          });
+        }
+        rows.value = result;
       }
-      rows.value = result;
-      name.value = result[0].exam_name as string;
-      round.value = result[0].exam_order as string;
-      year.value = result[0].score_year as string;
     })
     .catch((e) => {
       messageError($q, e);
diff --git a/src/modules/03_recruiting/views/01_compete/DetailEx.vue b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
index 6319215b0..89dd0b905 100644
--- a/src/modules/03_recruiting/views/01_compete/DetailEx.vue
+++ b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
@@ -27,7 +27,7 @@
             </div>
 
             <div class="col-6 text-grey-7" v-if="prefix !== null">
-              คำนำหน้านาม
+              คำนำหน้าชื่อนาม
             </div>
             <div class="col-6 text-black" v-if="prefix !== null">
               {{ prefix }}
@@ -81,10 +81,10 @@
             </div>
 
             <div class="col-6 text-grey-7" v-if="major !== null">
-              จำนวนครั้งที่สมัครสอบ
+              ครั้งที่ประกาศรับสมัคร
             </div>
             <div class="col-6 text-black" v-if="major !== null">
-              {{ examCount }}
+              {{ examOrder }}
             </div>
 
             <div class="col-6 text-grey-7" v-if="cert_issuedate !== null">
@@ -111,7 +111,7 @@
         >
           <div class="col-12 row q-col-gutter-sm">
             <div class="col-12 text-weight-bold row items-center">
-              ผลการสอบ
+              ผลคะแนนสอบ
               <q-space />
               <q-btn
                 color="primary"
@@ -265,7 +265,7 @@ const scoreCFull = ref<string>("");
 const scoreC = ref<string>("");
 const scoreSumFull = ref<string>("");
 const scoreSum = ref<string>("");
-const examCount = ref<string>("");
+const examOrder = ref<string>("");
 const number = ref<string>("");
 const score_expired = ref<string>("");
 const mixin = useCounterMixin();
@@ -286,32 +286,33 @@ const fetchData = async () => {
     .get(config.API.getExamDetail(importId.value, examId.value))
     .then((res) => {
       let data = res.data.result;
-
-      profile_id.value = data.profileID;
-      examID.value = data.examID;
-      prefix.value = data.prefix;
-      fullname.value = data.fullName;
-      birthdate.value = data.dateOfBirth;
-      gender.value = data.gender;
-      degree.value = data.degree;
-      major.value = data.major;
-      university.value = data.university;
-      position_name.value = data.positionName;
-      cert_issuedate.value = data.certificateIssueDate;
-      examAttribute.value = data.examAttribute;
-      number.value = data.number;
-      examCount.value = data.examCount;
-      score_expired.value = data.scoreExpire;
-      if (data.scoreResult != null) {
-        scoreAFull.value = data.scoreResult.scoreAFull;
-        scoreA.value = data.scoreResult.scoreA;
-        scoreBFull.value = data.scoreResult.scoreBFull;
-        scoreB.value = data.scoreResult.scoreB;
-        scoreCFull.value = data.scoreResult.scoreCFull;
-        scoreC.value = data.scoreResult.scoreC;
-        scoreSumFull.value = data.scoreResult.scoreSumFull;
-        scoreSum.value = data.scoreResult.scoreSum;
-        examResultinscore.value = data.scoreResult.examResult;
+      if (data != null) {
+        profile_id.value = data.profileID;
+        examID.value = data.examID;
+        prefix.value = data.prefix;
+        fullname.value = data.fullName;
+        birthdate.value = data.dateOfBirth;
+        gender.value = data.gender;
+        degree.value = data.degree;
+        major.value = data.major;
+        university.value = data.university;
+        position_name.value = data.positionName;
+        cert_issuedate.value = data.certificateIssueDate;
+        examAttribute.value = data.examAttribute;
+        number.value = data.number;
+        examOrder.value = data.examOrder;
+        score_expired.value = data.scoreExpire;
+        if (data.scoreResult != null) {
+          scoreAFull.value = data.scoreResult.scoreAFull;
+          scoreA.value = data.scoreResult.scoreA;
+          scoreBFull.value = data.scoreResult.scoreBFull;
+          scoreB.value = data.scoreResult.scoreB;
+          scoreCFull.value = data.scoreResult.scoreCFull;
+          scoreC.value = data.scoreResult.scoreC;
+          scoreSumFull.value = data.scoreResult.scoreSumFull;
+          scoreSum.value = data.scoreResult.scoreSum;
+          examResultinscore.value = data.scoreResult.examResult;
+        }
       }
     })
     .catch((e) => {
diff --git a/src/modules/03_recruiting/views/01_compete/Period.vue b/src/modules/03_recruiting/views/01_compete/Period.vue
index 6fb0bfe6e..6ba96b5e6 100644
--- a/src/modules/03_recruiting/views/01_compete/Period.vue
+++ b/src/modules/03_recruiting/views/01_compete/Period.vue
@@ -1,355 +1,408 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    จัดการข้อมูลผู้สมัครสอบแข่งขัน
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :pagination="initialPagination"
-        :nornmalData="true"
-        :add="clickAdd"
-        :paging="true"
-        :titleText="''"
-      >
-        <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="clickDetail(props.row.id)"
-            >
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else-if="col.name == 'name'" class="table_ellipsis2">
-                {{ col.value }}
-              </div>
-              <div v-else-if="col.name == 'year'" class="table_ellipsis2">
-                {{ col.value + 543 }}
-              </div>
-              <div v-else-if="col.name == 'scoreCount'" class="table_ellipsis2">
-                <q-btn
-                  flat
-                  dense
-                  size="12px"
-                  round
-                  color="green"
-                  @click.stop.prevent="clickEdit(props.row.id)"
-                  v-if="col.value == null"
-                >
-                  <q-icon name="mdi-file-excel-outline" size="20px" />
-                  <!-- นำเข้าไฟล์ผลการสอบ -->
-                  <q-tooltip>นำเข้าไฟล์ผลการสอบ</q-tooltip>
-                </q-btn>
-                <div v-else>
-                  {{ col.value }}
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="green"
-                    @click.stop.prevent="clickEdit(props.row.id)"
-                    icon="mdi-file-excel-outline"
-                  >
-                    <q-tooltip>นำเข้าไฟล์ผลการสอบอีกครั้ง</q-tooltip>
-                  </q-btn>
+	<div class="toptitle text-dark col-12 row items-center">
+		จัดการรอบสอบแข่งขัน
+	</div>
+	<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+		<div>
+			<Table
+				style="max-height: 80vh"
+				:rows="rows"
+				:columns="columns"
+				:filter="filter"
+				:visible-columns="visibleColumns"
+				v-model:inputfilter="filter"
+				v-model:inputvisible="visibleColumns"
+				:pagination="initialPagination"
+				:nornmalData="true"
+				:add="clickAdd"
+				:paging="true"
+				:titleText="''"
+			>
+				<template #columns="props">
+					<q-tr :props="props" class="cursor-pointer">
+						<q-td
+							v-for="col in props.cols"
+							:key="col.name"
+							:props="props"
+							@click="clickDetail(props.row.id)"
+						>
+							<div v-if="col.name == 'no'">
+								{{ props.rowIndex + 1 }}
+							</div>
+							<div
+								v-else-if="col.name == 'name'"
+								class="table_ellipsis2"
+							>
+								{{ col.value }}
+							</div>
+							<div
+								v-else-if="col.name == 'year'"
+								class="table_ellipsis2"
+							>
+								{{ col.value + 543 }}
+							</div>
+							<div
+								v-else-if="col.name == 'scoreCount'"
+								class="table_ellipsis2"
+							>
+								<q-btn
+									flat
+									dense
+									size="12px"
+									round
+									color="green"
+									@click.stop.prevent="
+										clickEdit(props.row.id)
+									"
+									v-if="col.value == null"
+								>
+									<q-icon
+										name="mdi-file-excel-outline"
+										size="20px"
+									/>
+									<!-- นำเข้าไฟล์ผลคะแนนสอบ -->
+									<q-tooltip>นำเข้าไฟล์ผลคะแนนสอบ</q-tooltip>
+								</q-btn>
+								<div v-else>
+									{{ col.value }}
+									<q-btn
+										dense
+										size="12px"
+										flat
+										round
+										color="green"
+										@click.stop.prevent="
+											clickEdit(props.row.id)
+										"
+										icon="mdi-file-excel-outline"
+									>
+										<q-tooltip
+											>นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง</q-tooltip
+										>
+									</q-btn>
 
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="indigo"
-                    @click.stop.prevent="clickPassExam(props.row.id)"
-                    icon="mdi-clipboard-arrow-down"
-                  >
-                    <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
-                  </q-btn>
-                </div>
-              </div>
-              <div v-else-if="col.name == 'examCount'" class="table_ellipsis2">
-                <q-btn
-                  flat
-                  dense
-                  size="12px"
-                  color="green"
-                  round
-                  @click.stop.prevent="clickUpload(props.row.id)"
-                  v-if="col.value == null || col.value == '0'"
-                >
-                  <q-icon name="mdi-file-excel-outline" size="20px" />
-                  <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
-                </q-btn>
-                <div v-else>
-                  {{ col.value }}
+									<q-btn
+										dense
+										size="12px"
+										flat
+										round
+										color="indigo"
+										@click.stop.prevent="
+											clickPassExam(props.row.id)
+										"
+										icon="mdi-clipboard-arrow-down"
+									>
+										<q-tooltip
+											>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip
+										>
+									</q-btn>
+								</div>
+							</div>
+							<div
+								v-else-if="col.name == 'examCount'"
+								class="table_ellipsis2"
+							>
+								<q-btn
+									flat
+									dense
+									size="12px"
+									color="green"
+									round
+									@click.stop.prevent="
+										clickUpload(props.row.id)
+									"
+									v-if="col.value == null || col.value == '0'"
+								>
+									<q-icon
+										name="mdi-file-excel-outline"
+										size="20px"
+									/>
+									<q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
+								</q-btn>
+								<div v-else>
+									{{ col.value }}
 
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="green"
-                    @click.stop.prevent="clickUpload(props.row.id)"
-                    icon="mdi-file-excel-outline"
-                  >
-                    <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip>
-                  </q-btn>
+									<q-btn
+										dense
+										size="12px"
+										flat
+										round
+										color="green"
+										@click.stop.prevent="
+											clickUpload(props.row.id)
+										"
+										icon="mdi-file-excel-outline"
+									>
+										<q-tooltip
+											>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip
+										>
+									</q-btn>
 
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="indigo"
-                    @click.stop.prevent="clickCandidateList(props.row.id)"
-                    icon="mdi-clipboard-arrow-down"
-                  >
-                    <q-tooltip>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip>
-                  </q-btn>
-                </div>
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="primary"
-                @click="clickEditPeriod(props.row.id)"
-                icon="mdi-pencil-outline"
-              >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
+									<q-btn
+										dense
+										size="12px"
+										flat
+										round
+										color="indigo"
+										@click.stop.prevent="
+											clickCandidateList(props.row.id)
+										"
+										icon="mdi-clipboard-arrow-down"
+									>
+										<q-tooltip
+											>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip
+										>
+									</q-btn>
+								</div>
+							</div>
+							<div v-else>
+								{{ col.value }}
+							</div>
+						</q-td>
+						<q-td>
+							<q-btn
+								dense
+								size="12px"
+								flat
+								round
+								color="primary"
+								@click="clickEditPeriod(props.row.id)"
+								icon="mdi-pencil-outline"
+							>
+								<q-tooltip>แก้ไขข้อมูล</q-tooltip>
+							</q-btn>
+							<q-btn
+								dense
+								size="12px"
+								flat
+								round
+								color="red"
+								@click="clickDelete(props.row.id)"
+								icon="mdi-delete"
+							>
+								<q-tooltip>ลบข้อมูล</q-tooltip>
+							</q-btn>
 
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="12px"
-                icon="mdi-history"
-                @click="clickHistory(props.row.id)"
-              >
-                <q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </div>
-  </q-card>
+							<q-btn
+								color="info"
+								flat
+								dense
+								round
+								size="12px"
+								icon="mdi-history"
+								@click="clickHistory(props.row.id)"
+							>
+								<q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
+							</q-btn>
+						</q-td>
+					</q-tr>
+				</template>
+			</Table>
+		</div>
+	</q-card>
 
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'isActive'" class="">
-            <q-icon
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else-if="col.name == 'createdAt'" class="">
-            {{ textDate(col.value) }}
-          </div>
+	<HistoryTable
+		:rows="rowsHistory"
+		:columns="columnsHistory"
+		:filter="filterHistory"
+		:visible-columns="visibleColumnsHistory"
+		v-model:modal="modalHistory"
+		v-model:inputvisible="visibleColumnsHistory"
+		v-model:tittle="tittleHistory"
+		v-model:inputfilter="filterHistory"
+	>
+		<template #columns="props">
+			<q-tr :props="props">
+				<q-td v-for="col in props.cols" :key="col.name" :props="props">
+					<div v-if="col.name == 'isActive'" class="">
+						<q-icon
+							v-if="col.value == false"
+							name="mdi-close"
+							color="red"
+							class="text-h5"
+						/>
+						<q-icon
+							v-else
+							name="mdi-check"
+							color="positive"
+							class="text-h5"
+						/>
+					</div>
+					<div v-else-if="col.name == 'createdAt'" class="">
+						{{ textDate(col.value) }}
+					</div>
 
-          <div v-else class="">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
+					<div v-else class="">
+						{{ col.value }}
+					</div>
+				</q-td>
+			</q-tr>
+		</template>
+	</HistoryTable>
 
-  <!-- popup Edit window-->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader :tittle="textTittle" :close="clickClose" />
-        <q-separator />
-        <q-card-section>
-          <div class="col-12 row items-center q-col-gutter-sm">
-            <div class="col-12">
-              <q-input
-                outlined
-                v-model="name"
-                label="ชื่อการสอบแข่งขัน"
-                dense
-                autogrow
-                lazy-rules
-                autofocus
-                hide-bottom-space
-              ></q-input>
-            </div>
-            <div class="col-12">
-              <q-input
-                outlined
-                v-model="order"
-                label="ครั้งที่"
-                dense
-                autogrow
-                lazy-rules
-                autofocus
-                hide-bottom-space
-              ></q-input>
-            </div>
-            <div class="col-12">
-              <q-input
-                outlined
-                v-model="year"
-                label="ปีงบประมาณ"
-                dense
-                autogrow
-                lazy-rules
-                autofocus
-                hide-bottom-space
-              ></q-input>
-            </div>
-            <div class="col-12">
-              <q-file
-                v-model="files"
-                dense
-                label="เลือกไฟล์รายชื่อผู้สมัครสอบแข่งขัน"
-                outlined
-                use-chips
-                multiple
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="text-primary q-py-sm">
-          <q-space />
-          <q-btn
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="checkSave"
-          > <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
+	<!-- popup Edit window-->
+	<q-dialog v-model="modalAdd" persistent>
+		<q-card style="width: 600px">
+			<q-form ref="myForm">
+				<DialogHeader :tittle="textTittle" :close="clickClose" />
+				<q-separator />
+				<q-card-section>
+					<div class="col-12 row items-center q-col-gutter-sm">
+						<div class="col-12">
+							<q-input
+								outlined
+								v-model="name"
+								label="ชื่อการสอบแข่งขัน"
+								dense
+								autogrow
+								lazy-rules
+								autofocus
+								hide-bottom-space
+							></q-input>
+						</div>
+						<div class="col-12">
+							<q-input
+								outlined
+								v-model="order"
+								label="ครั้งที่"
+								dense
+								autogrow
+								lazy-rules
+								autofocus
+								hide-bottom-space
+							></q-input>
+						</div>
+						<div class="col-12">
+							<q-input
+								outlined
+								v-model="year"
+								label="ปีงบประมาณ"
+								dense
+								autogrow
+								lazy-rules
+								autofocus
+								hide-bottom-space
+							></q-input>
+						</div>
+						<div class="col-12">
+							<q-file
+								v-model="files"
+								dense
+								label="เลือกไฟล์รายชื่อผู้สมัครสอบแข่งขัน"
+								outlined
+								use-chips
+								multiple
+							>
+								<template v-slot:prepend>
+									<q-icon name="attach_file" />
+								</template>
+							</q-file>
+						</div>
+					</div>
+				</q-card-section>
+				<q-separator />
+				<q-card-actions class="text-primary q-py-sm">
+					<q-space />
+					<q-btn
+						flat
+						round
+						color="public"
+						@click="checkSave"
+						icon="mdi-content-save-outline"
+					>
+						<q-tooltip>บันทึก</q-tooltip>
+					</q-btn>
+				</q-card-actions>
+			</q-form>
+		</q-card>
+	</q-dialog>
 
-  <q-dialog v-model="modalScore" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myFormScore">
-        <DialogHeader :tittle="textTittleScore" :close="clickCloseScore" />
-        <q-separator />
-        <q-card-section>
-          <div class="col-12 row items-center q-col-gutter-sm">
-            <div class="col-12">
-              <q-file
-                v-model="files_score"
-                dense
-                label="เลือกไฟล์ผลการสอบแข่งขัน"
-                outlined
-                use-chips
-                multiple
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="text-primary q-py-sm">
-          <q-space />
-          <q-btn
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="checkSaveScore"
-          > <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
+	<q-dialog v-model="modalScore" persistent>
+		<q-card style="width: 600px">
+			<q-form ref="myFormScore">
+				<DialogHeader
+					:tittle="textTittleScore"
+					:close="clickCloseScore"
+				/>
+				<q-separator />
+				<q-card-section>
+					<div class="col-12 row items-center q-col-gutter-sm">
+						<div class="col-12">
+							<q-file
+								v-model="files_score"
+								dense
+								label="เลือกไฟล์ผลคะแนนสอบแข่งขัน"
+								outlined
+								use-chips
+								multiple
+							>
+								<template v-slot:prepend>
+									<q-icon name="attach_file" />
+								</template>
+							</q-file>
+						</div>
+					</div>
+				</q-card-section>
+				<q-separator />
+				<q-card-actions class="text-primary q-py-sm">
+					<q-space />
+					<q-btn
+						flat
+						round
+						color="public"
+						@click="checkSaveScore"
+						icon="mdi-content-save-outline"
+					>
+						<q-tooltip>บันทึก</q-tooltip>
+					</q-btn>
+				</q-card-actions>
+			</q-form>
+		</q-card>
+	</q-dialog>
 
-  <q-dialog v-model="modalCandidate" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myFormScore">
-        <DialogHeader :tittle="textTittleCandidate" :close="clickCloseCandidate" />
-        <q-separator />
-        <q-card-section>
-          <div class="col-12 row items-center q-col-gutter-sm">
-            <div class="col-12">
-              <q-file
-                v-model="files_candidate"
-                dense
-                label="เลือกไฟล์ผู้สมัครสอบแข่งขัน"
-                outlined
-                use-chips
-                multiple
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="text-primary q-py-sm">
-          <q-space />
-          <q-btn
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="checkSaveCandidate"
-            
-          > <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
+	<q-dialog v-model="modalCandidate" persistent>
+		<q-card style="width: 600px">
+			<q-form ref="myFormScore">
+				<DialogHeader
+					:tittle="textTittleCandidate"
+					:close="clickCloseCandidate"
+				/>
+				<q-separator />
+				<q-card-section>
+					<div class="col-12 row items-center q-col-gutter-sm">
+						<div class="col-12">
+							<q-file
+								v-model="files_candidate"
+								dense
+								label="เลือกไฟล์ผู้สมัครสอบแข่งขัน"
+								outlined
+								use-chips
+								multiple
+							>
+								<template v-slot:prepend>
+									<q-icon name="attach_file" />
+								</template>
+							</q-file>
+						</div>
+					</div>
+				</q-card-section>
+				<q-separator />
+				<q-card-actions class="text-primary q-py-sm">
+					<q-space />
+					<q-btn
+						flat
+						round
+						color="public"
+						@click="checkSaveCandidate"
+						icon="mdi-content-save-outline"
+					>
+						<q-tooltip>บันทึก</q-tooltip>
+					</q-btn>
+				</q-card-actions>
+			</q-form>
+		</q-card>
+	</q-dialog>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
@@ -358,8 +411,8 @@ import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type {
-  ResponseRecruitPeriod,
-  ResponseHistoryObject,
+	ResponseRecruitPeriod,
+	ResponseHistoryObject,
 } from "@/modules/03_recruiting/interface/response/Period";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import Table from "@/modules/03_recruiting/components/Table.vue";
@@ -387,6 +440,7 @@ const modalCandidate = ref<boolean>(false);
 const selected_row_id = ref<string>("");
 const rowsHistory = ref<ResponseHistoryObject[]>([]); //select data history
 const tittleHistory = ref<string>("ประวัติการนำเข้าข้อมูล"); //
+const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const modalError = ref<boolean>(false); // modal สำหรับแจ้งเตือนerror
 const modalErrorTittle = ref<string>(""); // tittle modal error
@@ -399,158 +453,113 @@ const textTittleScore = ref<string>("");
 const textTittleCandidate = ref<string>("");
 const rows = ref<any>([]);
 const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+	rowsPerPage: 0,
 });
 const visibleColumns = ref<String[]>([
-  "no",
-  "name",
-  "order",
-  "year",
-  "examCount",
-  "scoreCount",
+	"no",
+	"name",
+	"order",
+	"year",
+	"examCount",
+	"scoreCount",
 ]);
 
 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "รอบการสอบแข่งขัน",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "order",
-    align: "left",
-    label: "ครั้งที่",
-    sortable: true,
-    field: "order",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "year",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "examCount",
-    label: "จำนวนผู้สอบทั้งหมด",
-    align: "right",
-    field: "examCount",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "scoreCount",
-    label: "จำนวนที่บันทึกผลสอบ",
-    align: "right",
-    field: "scoreCount",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
+	{
+		name: "no",
+		align: "left",
+		label: "ลำดับ",
+		sortable: true,
+		field: "no",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "name",
+		align: "left",
+		label: "รอบสอบแข่งขัน",
+		sortable: true,
+		field: "name",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "order",
+		align: "left",
+		label: "ครั้งที่",
+		sortable: true,
+		field: "order",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "year",
+		align: "left",
+		label: "ปีงบประมาณ",
+		sortable: true,
+		field: "year",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "examCount",
+		label: "จำนวนผู้สอบทั้งหมด",
+		align: "right",
+		field: "examCount",
+		sortable: true,
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "scoreCount",
+		label: "จำนวนที่บันทึกผลสอบ",
+		align: "right",
+		field: "scoreCount",
+		sortable: true,
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
 ]);
 
 const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "description",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "description",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "createdAt",
-    align: "center",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
+	{
+		name: "description",
+		align: "left",
+		label: "รายละเอียด",
+		sortable: true,
+		field: "description",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "createdAt",
+		align: "center",
+		label: "วันที่ดำเนินการ",
+		sortable: true,
+		field: "createdAt",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "createdFullName",
+		align: "left",
+		label: "ผู้ดำเนินการ",
+		sortable: true,
+		field: "createdFullName",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
 ]);
 
 const visibleColumnsHistory = ref<String[]>([
-  "description",
-  "createdAt",
-  "createdFullName",
+	"description",
+	"createdAt",
+	"createdFullName",
 ]);
 
 onMounted(async () => {
-  loaderPage(false);
-  await fetchData();
+	loaderPage(false);
+	await fetchData();
 });
 
 /**
@@ -558,207 +567,207 @@ onMounted(async () => {
  * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
  */
 const textDate = (value: Date) => {
-  return dateText(value);
+	return dateText(value);
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.getCandidates)
-    .then((res) => {
-      const data = res.data.result;
-      let result: ResponseRecruitPeriod[] = [];
-      if (data.length > 0) {
-        data.map((r: ResponseRecruitPeriod) => {
-          if (r.score != null) {
-            r.scoreCount = r.score.scoreCount;
-            r.scoreImportDate = r.score.importDate;
-          }
-          result.push(r);
-        });
-      }
+	loaderPage(true);
+	await http
+		.get(config.API.getCandidates)
+		.then((res) => {
+			const data = res.data.result;
+			let result: ResponseRecruitPeriod[] = [];
+			if (data.length > 0) {
+				data.map((r: ResponseRecruitPeriod) => {
+					if (r.score != null) {
+						r.scoreCount = r.score.scoreCount;
+						r.scoreImportDate = r.score.importDate;
+					}
+					result.push(r);
+				});
+			}
 
-      rows.value = result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+			rows.value = result;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const clickPassExam = (id: string) => {
-  window.open(config.API.exportPassExamList(id));
+	window.open(config.API.exportPassExamList(id));
 };
 
 const clickCandidateList = (id: string) => {
-  window.open(config.API.exportCandidateList(id));
+	window.open(config.API.exportCandidateList(id));
 };
 
 const clickDetail = (id: string) => {
-  router.push(`/compete/import/${id}`);
+	router.push(`/compete/import/${id}`);
 };
 
 const clickEdit = async (id: string) => {
-  modalScore.value = true;
-  textTittleScore.value = "นำเข้าผลการสอบแข่งขัน";
-  selected_row_id.value = id;
+	modalScore.value = true;
+	textTittleScore.value = "นำเข้าผลคะแนนสอบแข่งขัน";
+	selected_row_id.value = id;
 };
 
 const clickUpload = async (id: string) => {
-  modalCandidate.value = true;
-  textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
-  selected_row_id.value = id;
+	modalCandidate.value = true;
+	textTittleCandidate.value = "นำเข้าผู้สมัครสอบแข่งขัน";
+	selected_row_id.value = id;
 };
 
 const clickEditPeriod = (id: string) => {
-  router.push(`/compete/period/${id}`);
+	router.push(`/compete/period/${id}`);
 };
 
 const clickHistory = async (id: string) => {
-  modalHistory.value = true;
-  loaderPage(true);
-  await http
-    .get(config.API.getImportHistory(id))
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = [];
-      if (data.length > 0) {
-        data.map((i: ResponseHistoryObject) => {
-          rowsHistory.value.push({
-            createdAt: i.createdAt,
-            createdFullName: i.createdFullName,
-            createdUserId: i.createdUserId,
-            id: i.id,
-            isActive: i.isActive,
-            lastUpdateFullName: i.lastUpdateFullName,
-            lastUpdateUserId: i.lastUpdateUserId,
-            lastUpdatedAt: i.lastUpdatedAt,
-            description: i.description,
-          });
-        });
-      }
-    })
-    .catch((e) => {
-      modalError.value = true;
-      modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
-      modalErrorDetail.value = e.response.data.message;
-      statusCode.value = e.response.data.status;
-    })
-    .finally(async () => {
-      loaderPage(false);
-    });
+	modalHistory.value = true;
+	loaderPage(true);
+	await http
+		.get(config.API.getImportHistory(id))
+		.then((res) => {
+			const data = res.data.result;
+			rowsHistory.value = [];
+			if (data.length > 0) {
+				data.map((i: ResponseHistoryObject) => {
+					rowsHistory.value.push({
+						createdAt: i.createdAt,
+						createdFullName: i.createdFullName,
+						createdUserId: i.createdUserId,
+						id: i.id,
+						isActive: i.isActive,
+						lastUpdateFullName: i.lastUpdateFullName,
+						lastUpdateUserId: i.lastUpdateUserId,
+						lastUpdatedAt: i.lastUpdatedAt,
+						description: i.description,
+					});
+				});
+			}
+		})
+		.catch((e) => {
+			modalError.value = true;
+			modalErrorTittle.value = "ไม่พบประวัติการเผยแพร่";
+			modalErrorDetail.value = e.response.data.message;
+			statusCode.value = e.response.data.status;
+		})
+		.finally(async () => {
+			loaderPage(false);
+		});
 };
 
 const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      loaderPage(true);
-      await http
-        .delete(config.API.deleteCandidates(id))
-        .then((res) => {
-          success($q, "ลบข้อมูลการสอบสำเร็จ");
-          fetchData();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          loaderPage(false);
-        });
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+	$q.dialog({
+		title: "ยืนยันการลบข้อมูล",
+		message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+		cancel: {
+			flat: true,
+			color: "negative",
+		},
+		persistent: true,
+	})
+		.onOk(async () => {
+			loaderPage(true);
+			await http
+				.delete(config.API.deleteCandidates(id))
+				.then((res) => {
+					success($q, "ลบข้อมูลการสอบสำเร็จ");
+					fetchData();
+				})
+				.catch((e) => {
+					messageError($q, e);
+				})
+				.finally(() => {
+					loaderPage(false);
+				});
+		})
+		.onCancel(() => {})
+		.onDismiss(() => {});
 };
 
 const clickAdd = () => {
-  router.push({ name: "competePeriodAdd" });
+	router.push({ name: "competePeriodAdd" });
 };
 
 const clickClose = async () => {
-  modalAdd.value = false;
-  await fetchData();
+	modalAdd.value = false;
+	await fetchData();
 };
 
 const clickCloseScore = async () => {
-  modalScore.value = false;
-  await fetchData();
+	modalScore.value = false;
+	await fetchData();
 };
 
 const clickCloseCandidate = async () => {
-  modalCandidate.value = false;
-  await fetchData();
+	modalCandidate.value = false;
+	await fetchData();
 };
 
 const checkSaveCandidate = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files_candidate.value[0]);
-  loaderPage(true);
-  await http
-    .post(config.API.uploadCandidates(selected_row_id.value), fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
-      modalCandidate.value = false;
-      selected_row_id.value = "";
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	const fd = new FormData();
+	fd.append("attachment", files_candidate.value[0]);
+	loaderPage(true);
+	await http
+		.post(config.API.uploadCandidates(selected_row_id.value), fd)
+		.then((res) => {
+			success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
+			modalCandidate.value = false;
+			selected_row_id.value = "";
+			fetchData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const checkSaveScore = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files_score.value[0]);
-  loaderPage(true);
-  await http
-    .post(config.API.saveScores(selected_row_id.value), fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผลการสอบสำเร็จ");
-      modalScore.value = false;
-      selected_row_id.value = "";
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	const fd = new FormData();
+	fd.append("attachment", files_score.value[0]);
+	loaderPage(true);
+	await http
+		.post(config.API.saveScores(selected_row_id.value), fd)
+		.then((res) => {
+			success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
+			modalScore.value = false;
+			selected_row_id.value = "";
+			fetchData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const checkSave = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files.value[0]);
-  fd.append("year", year.value.toString());
-  fd.append("order", order.value.toString());
-  fd.append("name", name.value);
-  loaderPage(true);
-  await http
-    .post(config.API.saveCandidates, fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
-      modalAdd.value = false;
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	const fd = new FormData();
+	fd.append("attachment", files.value[0]);
+	fd.append("year", year.value.toString());
+	fd.append("order", order.value.toString());
+	fd.append("name", name.value);
+	loaderPage(true);
+	await http
+		.post(config.API.saveCandidates, fd)
+		.then((res) => {
+			success($q, "นำเข้าข้อมูลผู้สมัครสอบแข่งขันสำเร็จ");
+			modalAdd.value = false;
+			fetchData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 </script>
 
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
index ec41e4b9a..fc0d44ffb 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
@@ -1,667 +1,797 @@
 <!-- page:จัดการรอบการสอบแข่งขัน สรรหา -->
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    <q-btn
-      icon="mdi-arrow-left"
-      unelevated
-      round
-      dense
-      flat
-      color="primary"
-      class="q-mr-sm"
-      @click="clickBack"
-    />
-    {{ edit ? "แก้ไขข้อมูลการสอบแข่งขัน" : "เพิ่มข้อมูลการสอบแข่งขัน" }}
-  </div>
-  <q-card flat bordered class="col-12">
-    <q-form ref="myForm">
-      <q-card-section class="q-pa-md">
-        <div class="col-xs-12 col-sm-8"></div>
-        <div class="col-12 row items-center q-col-gutter-x-sm">
-          <div class="col-xs-12 col-sm-8">
-            <q-input
-              outlined
-              v-model="name"
-              label="ชื่อรอบการสอบแข่งขัน/ชื่อประกาศ"
-              dense
-              lazy-rules
-              :rules="[
-                (val) =>
-                  !!val || `${'กรุณากรอกชื่อรอบการสอบแข่งขัน/ชื่อประกาศ'}`,
-              ]"
-            ></q-input>
-          </div>
-          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
-            <q-input
-              outlined
-              v-model="round"
-              type="number"
-              label="รอบการสอบ(ครั้ง)"
-              dense
-              lazy-rules
-              :rules="[(val) => val > 0 || `${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`]"
-            ></q-input>
-          </div>
-          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="yearly"
-              :locale="'th'"
-              autoApply
-              year-picker
-              :enableTimePicker="false"
-              @update:modelValue="updateYear"
-            >
-              <template #year="{ year }">{{ year + 543 }}</template>
-              <template #year-overlay-value="{ value }">{{
-                parseInt(value + 543)
-              }}</template>
-              <template #trigger>
-                <q-input
-                  dense
-                  lazy-rules
-                  outlined
-                  :model-value="yearly + 543"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`]"
-                  :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-sm-4 col-md-2" v-if="announcementExam">
-            <q-input
-              outlined
-              v-model="fee"
-              type="number"
-              label="ค่าธรรมเนียม"
-              dense
-              lazy-rules
-              input-class="text-right"
-              :rules="[
-                (val) => val >= 0 || `${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
-              ]"
-            ></q-input>
-          </div>
-          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateExam"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker q-mb-sm"
-                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
-                  :label="`${'วันที่สอบ'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
-                >
-                  <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-sm-3 col-md-3">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateAnnouncement"
-              :locale="'th'"
-              autoApply
-              borderless
-              range
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker q-mb-sm"
-                  :model-value="
-                    dateAnnouncement != null
-                      ? dateThaiRange(dateAnnouncement)
-                      : null
-                  "
-                  :label="`${'วันที่ประกาศ'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
-                >
-                  <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-sm-3 col-md-3" v-if="announcementExam">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateRegister"
-              :locale="'th'"
-              autoApply
-              borderless
-              range
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker q-mb-sm"
-                  :model-value="
-                    dateRegister != null ? dateThaiRange(dateRegister) : null
-                  "
-                  :label="`${'วันที่สมัคร'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สมัคร'}`]"
-                >
-                  <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-sm-3 col-md-3" v-if="announcementExam">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="datePayment"
-              :locale="'th'"
-              autoApply
-              borderless
-              range
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker q-mb-sm"
-                  :model-value="
-                    datePayment != null ? dateThaiRange(datePayment) : null
-                  "
-                  :label="`${'วันที่ชำระเงิน'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ชำระเงิน'}`]"
-                >
-                  <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="toptitle text-dark col-12 row items-center">
+		<q-btn
+			icon="mdi-arrow-left"
+			unelevated
+			round
+			dense
+			flat
+			color="primary"
+			class="q-mr-sm"
+			@click="clickBack"
+		/>
+		{{ edit ? "แก้ไขรอบสอบแข่งขัน" : "เพิ่มรอบสอบแข่งขัน" }}
+	</div>
+	<q-card flat bordered class="col-12">
+		<q-form ref="myForm">
+			<q-card-section class="q-pa-md">
+				<div class="col-xs-12 col-sm-8"></div>
+				<div class="col-12 row items-center q-col-gutter-x-sm">
+					<div class="col-xs-12 col-sm-8">
+						<q-input
+							outlined
+							v-model="name"
+							label="ชื่อรอบสอบแข่งขัน"
+							dense
+							lazy-rules
+							:rules="[
+								(val) =>
+									!!val || `${'กรุณากรอกชื่อรอบสอบแข่งขัน'}`,
+							]"
+						></q-input>
+					</div>
+					<div
+						class="col-xs-12 col-sm-4 col-md-1"
+						v-if="announcementExam"
+					>
+						<q-input
+							outlined
+							v-model="round"
+							type="number"
+							label="รอบการสอบ(ครั้ง)"
+							dense
+							lazy-rules
+							:rules="[
+								(val) =>
+									val > 0 ||
+									`${'กรุณากรอกรอบการสอบให้ถูกต้อง'}`,
+							]"
+						></q-input>
+					</div>
+					<div
+						class="col-xs-12 col-sm-4 col-md-1"
+						v-if="announcementExam"
+					>
+						<datepicker
+							menu-class-name="modalfix"
+							v-model="yearly"
+							:locale="'th'"
+							autoApply
+							year-picker
+							:enableTimePicker="false"
+							@update:modelValue="updateYear"
+						>
+							<template #year="{ year }">{{
+								year + 543
+							}}</template>
+							<template #year-overlay-value="{ value }">{{
+								parseInt(value + 543)
+							}}</template>
+							<template #trigger>
+								<q-input
+									dense
+									lazy-rules
+									outlined
+									:model-value="yearly + 543"
+									:rules="[
+										(val) =>
+											!!val ||
+											`${'กรุณาเลือกปีงบประมาณ'}`,
+									]"
+									: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-sm-4 col-md-2"
+						v-if="announcementExam"
+					>
+						<q-input
+							outlined
+							v-model="fee"
+							type="number"
+							label="ค่าธรรมเนียม"
+							dense
+							lazy-rules
+							input-class="text-right"
+							:rules="[
+								(val) =>
+									val >= 0 ||
+									`${'กรุณากรอกค่าธรรมเนียมให้ถูกต้อง'}`,
+							]"
+						></q-input>
+					</div>
+					<div
+						class="col-xs-12 col-sm-3 col-md-3"
+						v-if="announcementExam"
+					>
+						<datepicker
+							menu-class-name="modalfix"
+							v-model="dateExam"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									class="full-width datepicker q-mb-md"
+									:model-value="
+										dateExam != null
+											? date2Thai(dateExam)
+											: null
+									"
+									:label="`${'วันที่สอบ'}`"
+									:rules="[
+										(val) =>
+											!!val || `${'กรุณาเลือกวันที่สอบ'}`,
+									]"
+								>
+									<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-sm-3 col-md-3">
+						<datepicker
+							menu-class-name="modalfix"
+							v-model="dateAnnouncement"
+							:locale="'th'"
+							autoApply
+							borderless
+							range
+							:enableTimePicker="false"
+							week-start="0"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									class="full-width datepicker q-mb-md"
+									:model-value="
+										dateAnnouncement != null
+											? dateThaiRange(dateAnnouncement)
+											: null
+									"
+									:label="`${'วันที่ประกาศ'}`"
+									:rules="[
+										(val) =>
+											!!val ||
+											`${'กรุณาเลือกวันที่ประกาศ'}`,
+									]"
+								>
+									<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-sm-3 col-md-3"
+						v-if="announcementExam"
+					>
+						<datepicker
+							menu-class-name="modalfix"
+							v-model="dateRegister"
+							:locale="'th'"
+							autoApply
+							borderless
+							range
+							:enableTimePicker="false"
+							week-start="0"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									class="full-width datepicker q-mb-md"
+									:model-value="
+										dateRegister != null
+											? dateThaiRange(dateRegister)
+											: null
+									"
+									:label="`${'วันที่สมัคร'}`"
+									:rules="[
+										(val) =>
+											!!val ||
+											`${'กรุณาเลือกวันที่สมัคร'}`,
+									]"
+								>
+									<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-sm-3 col-md-3"
+						v-if="announcementExam"
+					>
+						<datepicker
+							menu-class-name="modalfix"
+							v-model="datePayment"
+							:locale="'th'"
+							autoApply
+							borderless
+							range
+							:enableTimePicker="false"
+							week-start="0"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									class="full-width datepicker q-mb-md"
+									:model-value="
+										datePayment != null
+											? dateThaiRange(datePayment)
+											: null
+									"
+									:label="`${'วันที่ชำระเงิน'}`"
+									:rules="[
+										(val) =>
+											!!val ||
+											`${'กรุณาเลือกวันที่ชำระเงิน'}`,
+									]"
+								>
+									<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-sm-3 col-md-3" v-if="announcementExam">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateAnnounce"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker q-mb-sm"
-                  :model-value="
-                    dateAnnounce != null ? date2Thai(dateAnnounce) : null
-                  "
-                  :label="`${'วันประกาศผลสอบ'}`"
-                  :rules="[(val) => !!val || `${'กรุณาเลือกวันประกาศผลสอบ'}`]"
-                >
-                  <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-sm-3 col-md-3"
+						v-if="announcementExam"
+					>
+						<datepicker
+							menu-class-name="modalfix"
+							v-model="dateAnnounce"
+							:locale="'th'"
+							autoApply
+							borderless
+							:enableTimePicker="false"
+							week-start="0"
+						>
+							<template #year="{ year }">
+								{{ year + 543 }}
+							</template>
+							<template #year-overlay-value="{ value }">
+								{{ parseInt(value + 543) }}
+							</template>
+							<template #trigger>
+								<q-input
+									outlined
+									dense
+									class="full-width datepicker q-mb-md"
+									:model-value="
+										dateAnnounce != null
+											? date2Thai(dateAnnounce)
+											: null
+									"
+									:label="`${'วันประกาศผลสอบ'}`"
+									:rules="[
+										(val) =>
+											!!val ||
+											`${'กรุณาเลือกวันประกาศผลสอบ'}`,
+									]"
+								>
+									<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-separator size="5px" color="grey-2" />
-          </div>
+					<div class="col-12">
+						<q-separator size="5px" color="grey-2" />
+					</div>
 
-          <div class="row col-12 items-top q-col-gutter-x-sm">
-            <div class="col-xs-12 col-sm-6">
-              <div class="text-bold text-subtitle2 q-pb-sm">รูปภาพประกอบ</div>
-              <div class="row justify-center row col-12">
-                <q-uploader
-                  color="gray"
-                  type="file"
-                  flat
-                  ref="uploader"
-                  class="full-width"
-                  text-color="dark"
-                  :max-size="10000000"
-                  accept=".jpg,.png,.pdf,.csv,.doc"
-                  bordered
-                  label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
-                  multiple
-                  @added="fileUploadImg"
-                  @removed="fileRemoveImg"
-                >
-                  <template v-slot:header="scope">
-                    <div
-                      class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
-                    >
-                      <q-btn
-                        v-if="scope.queuedFiles.length > 0"
-                        icon="clear_all"
-                        @click="scope.removeQueuedFiles"
-                        round
-                        dense
-                        flat
-                      >
-                        <q-tooltip>ลบทั้งหมด</q-tooltip>
-                      </q-btn>
-                      <q-btn
-                        v-if="scope.uploadedFiles.length > 0"
-                        icon="done_all"
-                        @click="scope.removeUploadedFiles"
-                        round
-                        dense
-                        flat
-                      >
-                        <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
-                      </q-btn>
-                      <q-spinner
-                        v-if="scope.isUploading"
-                        class="q-uploader__spinner"
-                      />
-                      <div class="col">
-                        <div class="q-uploader__title">
-                          {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
-                        </div>
-                        <div class="q-uploader__subtitle">
-                          {{ scope.uploadSizeLabel }}
-                          /
-                          {{ scope.uploadProgressLabel }}
-                        </div>
-                      </div>
-                      <q-btn
-                        v-if="scope.canAddFiles"
-                        type="a"
-                        icon="add_box"
-                        @click="scope.pickFiles"
-                        round
-                        dense
-                        flat
-                      >
-                        <q-uploader-add-trigger />
-                        <q-tooltip>เลือกไฟล์</q-tooltip>
-                      </q-btn>
-                      <q-btn
-                        v-if="scope.isUploading"
-                        icon="clear"
-                        @click="scope.abort"
-                        round
-                        dense
-                        flat
-                      >
-                        <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
-                      </q-btn>
-                    </div>
-                  </template>
-                </q-uploader>
-              </div>
-              <q-card
-                bordered
-                flat
-                class="full-width q-my-md"
-                v-if="fileImgs.length != 0"
-              >
-                <q-list separator>
-                  <q-item
-                    v-for="file in fileImgs"
-                    :key="file.id"
-                    class="q-my-xs"
-                  >
-                    <q-item-section>
-                      <q-item-label class="full-width ellipsis">
-                        {{ file.fileName }}
-                      </q-item-label>
+					<div class="row col-12 items-top q-col-gutter-x-sm">
+						<div class="col-xs-12 col-sm-6">
+							<div class="text-bold text-subtitle2 q-pb-sm">
+								รูปภาพประกอบ
+							</div>
+							<div class="row justify-center row col-12">
+								<q-uploader
+									color="gray"
+									type="file"
+									flat
+									ref="uploader"
+									class="full-width"
+									text-color="dark"
+									:max-size="10000000"
+									accept=".jpg,.png,.pdf,.csv,.doc"
+									bordered
+									label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+									multiple
+									@added="fileUploadImg"
+									@removed="fileRemoveImg"
+								>
+									<template v-slot:header="scope">
+										<div
+											class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
+										>
+											<q-btn
+												v-if="
+													scope.queuedFiles.length > 0
+												"
+												icon="clear_all"
+												@click="scope.removeQueuedFiles"
+												round
+												dense
+												flat
+											>
+												<q-tooltip>ลบทั้งหมด</q-tooltip>
+											</q-btn>
+											<q-btn
+												v-if="
+													scope.uploadedFiles.length >
+													0
+												"
+												icon="done_all"
+												@click="
+													scope.removeUploadedFiles
+												"
+												round
+												dense
+												flat
+											>
+												<q-tooltip
+													>ลบไฟล์ที่อัปโหลด</q-tooltip
+												>
+											</q-btn>
+											<q-spinner
+												v-if="scope.isUploading"
+												class="q-uploader__spinner"
+											/>
+											<div class="col">
+												<div class="q-uploader__title">
+													{{
+														"[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+													}}
+												</div>
+												<div
+													class="q-uploader__subtitle"
+												>
+													{{ scope.uploadSizeLabel }}
+													/
+													{{
+														scope.uploadProgressLabel
+													}}
+												</div>
+											</div>
+											<q-btn
+												v-if="scope.canAddFiles"
+												type="a"
+												icon="add_box"
+												@click="scope.pickFiles"
+												round
+												dense
+												flat
+											>
+												<q-uploader-add-trigger />
+												<q-tooltip>เลือกไฟล์</q-tooltip>
+											</q-btn>
+											<q-btn
+												v-if="scope.isUploading"
+												icon="clear"
+												@click="scope.abort"
+												round
+												dense
+												flat
+											>
+												<q-tooltip
+													>ยกเลิกการอัปโหลด</q-tooltip
+												>
+											</q-btn>
+										</div>
+									</template>
+								</q-uploader>
+							</div>
+							<q-card
+								bordered
+								flat
+								class="full-width q-my-md"
+								v-if="fileImgs.length != 0"
+							>
+								<q-list separator>
+									<q-item
+										v-for="file in fileImgs"
+										:key="file.id"
+										class="q-my-xs"
+									>
+										<q-item-section>
+											<q-item-label
+												class="full-width ellipsis"
+											>
+												{{ file.fileName }}
+											</q-item-label>
 
-                      <q-item-label caption>
-                        สถานะ: {{ file.fileType }} /
-                        {{ file.fileSize }}
-                      </q-item-label>
-                    </q-item-section>
-                    <q-item-section top side>
-                      <div class="q-gutter-sm">
-                        <q-btn
-                          size="12px"
-                          flat
-                          dense
-                          round
-                          color="blue"
-                          icon="mdi-download-outline"
-                          @click="downloadData(file.detail)"
-                        >
-                          <q-tooltip>ดาวน์โหลด</q-tooltip>
-                        </q-btn>
-                        <q-btn
-                          size="12px"
-                          flat
-                          dense
-                          round
-                          color="red"
-                          icon="mdi-delete-outline"
-                          v-if="edit"
-                          @click="deleteImgData(file.id)"
-                        >
-                          <q-tooltip>ลบไฟล์</q-tooltip>
-                        </q-btn>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-card>
-            </div>
-            <div class="col-xs-12 col-sm-6">
-              <div class="text-bold text-subtitle2 q-pb-sm">เอกสารประกอบ</div>
-              <div class="row justify-center row col-12">
-                <q-uploader
-                  color="gray"
-                  type="file"
-                  flat
-                  ref="uploader"
-                  class="full-width"
-                  text-color="dark"
-                  :max-size="10000000"
-                  accept=".jpg,.png,.pdf,.csv,.doc"
-                  bordered
-                  label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
-                  multiple
-                  @added="fileUploadDoc"
-                  @removed="fileRemoveDoc"
-                >
-                  <template v-slot:header="scope">
-                    <div
-                      class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
-                    >
-                      <q-btn
-                        v-if="scope.queuedFiles.length > 0"
-                        icon="clear_all"
-                        @click="scope.removeQueuedFiles"
-                        round
-                        dense
-                        flat
-                      >
-                        <q-tooltip>ลบทั้งหมด</q-tooltip>
-                      </q-btn>
-                      <q-btn
-                        v-if="scope.uploadedFiles.length > 0"
-                        icon="done_all"
-                        @click="scope.removeUploadedFiles"
-                        round
-                        dense
-                        flat
-                      >
-                        <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
-                      </q-btn>
-                      <q-spinner
-                        v-if="scope.isUploading"
-                        class="q-uploader__spinner"
-                      />
-                      <div class="col">
-                        <div class="q-uploader__title">
-                          {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]" }}
-                        </div>
-                        <div class="q-uploader__subtitle">
-                          {{ scope.uploadSizeLabel }}
-                          /
-                          {{ scope.uploadProgressLabel }}
-                        </div>
-                      </div>
-                      <q-btn
-                        v-if="scope.canAddFiles"
-                        type="a"
-                        icon="add_box"
-                        @click="scope.pickFiles"
-                        round
-                        dense
-                        flat
-                      >
-                        <q-uploader-add-trigger />
-                        <q-tooltip>เลือกไฟล์</q-tooltip>
-                      </q-btn>
-                      <q-btn
-                        v-if="scope.isUploading"
-                        icon="clear"
-                        @click="scope.abort"
-                        round
-                        dense
-                        flat
-                      >
-                        <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
-                      </q-btn>
-                    </div>
-                  </template>
-                </q-uploader>
-              </div>
-              <q-card
-                bordered
-                flat
-                class="full-width q-my-md"
-                v-if="fileDocs.length != 0"
-              >
-                <q-list separator>
-                  <q-item
-                    v-for="file in fileDocs"
-                    :key="file.id"
-                    class="q-my-xs"
-                  >
-                    <q-item-section>
-                      <q-item-label class="full-width ellipsis">
-                        {{ file.fileName }}
-                      </q-item-label>
+											<q-item-label caption>
+												สถานะ: {{ file.fileType }} /
+												{{ file.fileSize }}
+											</q-item-label>
+										</q-item-section>
+										<q-item-section top side>
+											<div class="q-gutter-sm">
+												<q-btn
+													size="12px"
+													flat
+													dense
+													round
+													color="blue"
+													icon="mdi-download-outline"
+													@click="
+														downloadData(
+															file.detail
+														)
+													"
+												>
+													<q-tooltip
+														>ดาวน์โหลด</q-tooltip
+													>
+												</q-btn>
+												<q-btn
+													size="12px"
+													flat
+													dense
+													round
+													color="red"
+													icon="mdi-delete-outline"
+													v-if="edit"
+													@click="
+														deleteImgData(file.id)
+													"
+												>
+													<q-tooltip
+														>ลบไฟล์</q-tooltip
+													>
+												</q-btn>
+											</div>
+										</q-item-section>
+									</q-item>
+								</q-list>
+							</q-card>
+						</div>
+						<div class="col-xs-12 col-sm-6">
+							<div class="text-bold text-subtitle2 q-pb-sm">
+								เอกสารประกอบ
+							</div>
+							<div class="row justify-center row col-12">
+								<q-uploader
+									color="gray"
+									type="file"
+									flat
+									ref="uploader"
+									class="full-width"
+									text-color="dark"
+									:max-size="10000000"
+									accept=".jpg,.png,.pdf,.csv,.doc"
+									bordered
+									label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+									multiple
+									@added="fileUploadDoc"
+									@removed="fileRemoveDoc"
+								>
+									<template v-slot:header="scope">
+										<div
+											class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
+										>
+											<q-btn
+												v-if="
+													scope.queuedFiles.length > 0
+												"
+												icon="clear_all"
+												@click="scope.removeQueuedFiles"
+												round
+												dense
+												flat
+											>
+												<q-tooltip>ลบทั้งหมด</q-tooltip>
+											</q-btn>
+											<q-btn
+												v-if="
+													scope.uploadedFiles.length >
+													0
+												"
+												icon="done_all"
+												@click="
+													scope.removeUploadedFiles
+												"
+												round
+												dense
+												flat
+											>
+												<q-tooltip
+													>ลบไฟล์ที่อัปโหลด</q-tooltip
+												>
+											</q-btn>
+											<q-spinner
+												v-if="scope.isUploading"
+												class="q-uploader__spinner"
+											/>
+											<div class="col">
+												<div class="q-uploader__title">
+													{{
+														"[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
+													}}
+												</div>
+												<div
+													class="q-uploader__subtitle"
+												>
+													{{ scope.uploadSizeLabel }}
+													/
+													{{
+														scope.uploadProgressLabel
+													}}
+												</div>
+											</div>
+											<q-btn
+												v-if="scope.canAddFiles"
+												type="a"
+												icon="add_box"
+												@click="scope.pickFiles"
+												round
+												dense
+												flat
+											>
+												<q-uploader-add-trigger />
+												<q-tooltip>เลือกไฟล์</q-tooltip>
+											</q-btn>
+											<q-btn
+												v-if="scope.isUploading"
+												icon="clear"
+												@click="scope.abort"
+												round
+												dense
+												flat
+											>
+												<q-tooltip
+													>ยกเลิกการอัปโหลด</q-tooltip
+												>
+											</q-btn>
+										</div>
+									</template>
+								</q-uploader>
+							</div>
+							<q-card
+								bordered
+								flat
+								class="full-width q-my-md"
+								v-if="fileDocs.length != 0"
+							>
+								<q-list separator>
+									<q-item
+										v-for="file in fileDocs"
+										:key="file.id"
+										class="q-my-xs"
+									>
+										<q-item-section>
+											<q-item-label
+												class="full-width ellipsis"
+											>
+												{{ file.fileName }}
+											</q-item-label>
 
-                      <q-item-label caption>
-                        สถานะ: {{ file.fileType }} /
-                        {{ file.fileSize }}
-                      </q-item-label>
-                    </q-item-section>
-                    <q-item-section top side>
-                      <div class="q-gutter-sm">
-                        <q-btn
-                          size="12px"
-                          flat
-                          dense
-                          round
-                          color="blue"
-                          icon="mdi-download-outline"
-                          @click="downloadData(file.detail)"
-                        >
-                          <q-tooltip>ดาวน์โหลด</q-tooltip>
-                        </q-btn>
-                        <q-btn
-                          size="12px"
-                          flat
-                          dense
-                          round
-                          color="red"
-                          icon="mdi-delete-outline"
-                          v-if="edit"
-                          @click="deleteDocData(file.id)"
-                        >
-                          <q-tooltip>ลบไฟล์</q-tooltip>
-                        </q-btn>
-                      </div>
-                    </q-item-section>
-                  </q-item>
-                </q-list>
-              </q-card>
-            </div>
-          </div>
-          <div class="col-12">
-            <q-separator size="5px" color="grey-2" class="q-my-lg" />
-          </div>
+											<q-item-label caption>
+												สถานะ: {{ file.fileType }} /
+												{{ file.fileSize }}
+											</q-item-label>
+										</q-item-section>
+										<q-item-section top side>
+											<div class="q-gutter-sm">
+												<q-btn
+													size="12px"
+													flat
+													dense
+													round
+													color="blue"
+													icon="mdi-download-outline"
+													@click="
+														downloadData(
+															file.detail
+														)
+													"
+												>
+													<q-tooltip
+														>ดาวน์โหลด</q-tooltip
+													>
+												</q-btn>
+												<q-btn
+													size="12px"
+													flat
+													dense
+													round
+													color="red"
+													icon="mdi-delete-outline"
+													v-if="edit"
+													@click="
+														deleteDocData(file.id)
+													"
+												>
+													<q-tooltip
+														>ลบไฟล์</q-tooltip
+													>
+												</q-btn>
+											</div>
+										</q-item-section>
+									</q-item>
+								</q-list>
+							</q-card>
+						</div>
+					</div>
+					<div class="col-12">
+						<q-separator
+							size="5px"
+							color="grey-2"
+							class="q-my-lg"
+						/>
+					</div>
 
-          <div class="col-12">
-            <div class="text-bold text-subtitle2 q-pb-sm q-pt-md">
-              รายละเอียด
-            </div>
-            <q-editor
-              v-model="editor"
-              :dense="$q.screen.lt.md"
-              toolbar-text-color="blue-grey-10"
-              toolbar-bg="blue-grey-2"
-              toolbar-toggle-color="blue-grey-8"
-              class="editor"
-              :toolbar="[
-                ['left', 'center', 'right', 'justify'],
-                [
-                  'bold',
-                  'italic',
-                  'strike',
-                  'underline',
-                  'subscript',
-                  'superscript',
-                ],
-                ['token', 'hr', 'link', 'custom_btn'],
-                ['print', 'fullscreen'],
-                [
-                  {
-                    label: $q.lang.editor.formatting,
-                    icon: $q.iconSet.editor.formatting,
-                    list: 'no-icons',
-                    options: ['p', 'h1', 'h2', 'h3'],
-                  },
-                  {
-                    label: $q.lang.editor.defaultFont,
-                    icon: $q.iconSet.editor.font,
-                    fixedIcon: true,
-                    list: 'no-icons',
-                    options: [
-                      'default_font',
-                      'arial',
-                      'arial_black',
-                      'comic_sans',
-                      'courier_new',
-                      'impact',
-                      'lucida_grande',
-                      'times_new_roman',
-                      'verdana',
-                    ],
-                  },
-                  'removeFormat',
-                ],
-                ['undo', 'redo'],
-                ['viewsource'],
-              ]"
-              :fonts="{
-                arial: 'Arial',
-                arial_black: 'Arial Black',
-                comic_sans: 'Comic Sans MS',
-                courier_new: 'Courier New',
-                impact: 'Impact',
-                lucida_grande: 'Lucida Grande',
-                times_new_roman: 'Times New Roman',
-                verdana: 'Verdana',
-              }"
-            />
-          </div>
-          <div class="col-12 q-mt-md">
-            <q-input
-              outlined
-              v-model="note"
-              label="หมายเหตุ"
-              dense
-              lazy-rules
-              type="textarea"
-            />
-          </div>
-        </div>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions class="text-primary q-py-sm">
-        <q-space />
-        <q-btn
-          flat
-          round
-          color="public"
-          @click="checkSave"
-          icon="mdi-content-save-outline"
-        >
-          <q-tooltip>{{ edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล" }}</q-tooltip>
-        </q-btn>
-      </q-card-actions>
-    </q-form>
-  </q-card>
+					<div class="col-12">
+						<div class="text-bold text-subtitle2 q-pb-sm q-pt-md">
+							รายละเอียด
+						</div>
+						<q-editor
+							v-model="editor"
+							:dense="$q.screen.lt.md"
+							toolbar-text-color="blue-grey-10"
+							toolbar-bg="blue-grey-2"
+							toolbar-toggle-color="blue-grey-8"
+							class="editor"
+							:toolbar="[
+								['left', 'center', 'right', 'justify'],
+								[
+									'bold',
+									'italic',
+									'strike',
+									'underline',
+									'subscript',
+									'superscript',
+								],
+								['token', 'hr', 'link', 'custom_btn'],
+								['print', 'fullscreen'],
+								[
+									{
+										label: $q.lang.editor.formatting,
+										icon: $q.iconSet.editor.formatting,
+										list: 'no-icons',
+										options: ['p', 'h1', 'h2', 'h3'],
+									},
+									{
+										label: $q.lang.editor.defaultFont,
+										icon: $q.iconSet.editor.font,
+										fixedIcon: true,
+										list: 'no-icons',
+										options: [
+											'default_font',
+											'arial',
+											'arial_black',
+											'comic_sans',
+											'courier_new',
+											'impact',
+											'lucida_grande',
+											'times_new_roman',
+											'verdana',
+										],
+									},
+									'removeFormat',
+								],
+								['undo', 'redo'],
+								['viewsource'],
+							]"
+							:fonts="{
+								arial: 'Arial',
+								arial_black: 'Arial Black',
+								comic_sans: 'Comic Sans MS',
+								courier_new: 'Courier New',
+								impact: 'Impact',
+								lucida_grande: 'Lucida Grande',
+								times_new_roman: 'Times New Roman',
+								verdana: 'Verdana',
+							}"
+						/>
+					</div>
+					<div class="col-12 q-mt-md">
+						<q-input
+							outlined
+							v-model="note"
+							label="หมายเหตุ"
+							dense
+							lazy-rules
+							type="textarea"
+						/>
+					</div>
+				</div>
+			</q-card-section>
+			<q-separator />
+			<q-card-actions class="text-primary q-py-sm">
+				<q-space />
+				<q-btn
+					flat
+					round
+					color="public"
+					@click="checkSave"
+					icon="mdi-content-save-outline"
+				>
+					<q-tooltip>{{
+						edit ? "แก้ไขข้อมูล" : "บันทึกข้อมูล"
+					}}</q-tooltip>
+				</q-btn>
+			</q-card-actions>
+		</q-form>
+	</q-card>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
@@ -671,8 +801,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRouter, useRoute } from "vue-router";
 import type { RequestPeriodCompete } from "@/modules/03_recruiting/interface/request/Period";
 import type {
-  DataOption,
-  UploadType,
+	DataOption,
+	UploadType,
 } from "@/modules/02_organizational/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -711,329 +841,358 @@ const id = ref<string>("");
 const pay = ref<string>("");
 const edit = ref<boolean>(false);
 const columnsPayment = ref<QTableProps["columns"]>([
-  {
-    name: "accountNumber",
-    align: "left",
-    label: "เลขบัญชี",
-    sortable: true,
-    field: "accountNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "bankName",
-    align: "left",
-    label: "ธนาคาร",
-    sortable: true,
-    field: "bankName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "accountName",
-    align: "left",
-    label: "ชื่อบัญชี",
-    sortable: true,
-    field: "accountName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+	{
+		name: "accountNumber",
+		align: "left",
+		label: "เลขบัญชี",
+		sortable: true,
+		field: "accountNumber",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "bankName",
+		align: "left",
+		label: "ธนาคาร",
+		sortable: true,
+		field: "bankName",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "accountName",
+		align: "left",
+		label: "ชื่อบัญชี",
+		sortable: true,
+		field: "accountName",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
 ]);
 const visibleColumnsPosition = ref<String[]>(["position", "type"]);
 const columnsPosition = ref<QTableProps["columns"]>([
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "type",
-    align: "left",
-    label: "ประเภทแบบฟอร์ม",
-    sortable: true,
-    field: "type",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+	{
+		name: "position",
+		align: "left",
+		label: "ตำแหน่ง",
+		sortable: true,
+		field: "position",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "type",
+		align: "left",
+		label: "ประเภทแบบฟอร์ม",
+		sortable: true,
+		field: "type",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
 ]);
 
 watch(organizationShortName, (count: DataOption, prevCount: DataOption) => {
-  organizationNameOptions.value = [];
+	organizationNameOptions.value = [];
 });
 
 watch(organizationName, (count: DataOption, prevCount: DataOption) => {
-  positionPathOptions.value = [];
+	positionPathOptions.value = [];
 });
 
 onMounted(async () => {
-  loaderPage(false);
-  if (route.params.id != undefined) {
-    edit.value = true;
-    id.value = route.params.id.toString();
-    await fetchData();
-  } else {
-    edit.value = false;
-  }
+	loaderPage(false);
+	if (route.params.id != undefined) {
+		edit.value = true;
+		id.value = route.params.id.toString();
+		await fetchData();
+	} else {
+		edit.value = false;
+	}
 });
 
 const clickBack = () => {
-  router.push({ name: "competePeriod" });
+	router.push({ name: "competePeriod" });
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.getPeriodById(id.value))
-    .then((res) => {
-      const data = res.data.result.periods;
-      const images = res.data.result.images;
-      const files = res.data.result.files;
+	loaderPage(true);
+	await http
+		.get(config.API.getPeriodById(id.value))
+		.then((res) => {
+			const data = res.data.result.periods;
+			const images = res.data.result.images;
+			const files = res.data.result.files;
 
-      id.value = data.id;
-      name.value = data.name;
-      round.value = data.order;
-      yearly.value = data.year;
-      fee.value = data.fee;
-      dateAnnouncement.value =
-        data.announcementStartDate != null && data.announcementEndDate != null
-          ? [
-              new Date(data.announcementStartDate),
-              new Date(data.announcementEndDate),
-            ]
-          : null;
-      dateExam.value = data.examDate != null ? new Date(data.examDate) : null;
-      dateRegister.value =
-        data.registerStartDate != null && data.registerEndDate != null
-          ? [new Date(data.registerStartDate), new Date(data.registerEndDate)]
-          : null;
-      datePayment.value =
-        data.paymentStartDate != null && data.paymentEndDate != null
-          ? [new Date(data.paymentStartDate), new Date(data.paymentEndDate)]
-          : null;
+			id.value = data.id;
+			name.value = data.name;
+			round.value = data.order;
+			yearly.value = data.year;
+			fee.value = data.fee;
+			dateAnnouncement.value =
+				data.announcementStartDate != null &&
+				data.announcementEndDate != null
+					? [
+							new Date(data.announcementStartDate),
+							new Date(data.announcementEndDate),
+					  ]
+					: null;
+			dateExam.value =
+				data.examDate != null ? new Date(data.examDate) : null;
+			dateRegister.value =
+				data.registerStartDate != null && data.registerEndDate != null
+					? [
+							new Date(data.registerStartDate),
+							new Date(data.registerEndDate),
+					  ]
+					: null;
+			datePayment.value =
+				data.paymentStartDate != null && data.paymentEndDate != null
+					? [
+							new Date(data.paymentStartDate),
+							new Date(data.paymentEndDate),
+					  ]
+					: null;
 
-      editor.value = data.detail;
-      note.value = data.note;
-      dateAnnounce.value =
-        data.announcementDate != null ? new Date(data.announcementDate) : null;
+			editor.value = data.detail;
+			note.value = data.note;
+			dateAnnounce.value =
+				data.announcementDate != null
+					? new Date(data.announcementDate)
+					: null;
 
-      fileDocs.value = files;
-      fileImgs.value = images;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+			fileDocs.value = files;
+			fileImgs.value = images;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const fileUploadDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    fileDocDataUpload.value.push(file);
-  });
+	files.forEach((file: any) => {
+		fileDocDataUpload.value.push(file);
+	});
 };
 
 const fileRemoveDoc = async (files: any) => {
-  files.forEach((file: any) => {
-    const index = fileDocDataUpload.value.findIndex(
-      (x: any) => x.__key == file.__key
-    );
-    if (index > -1) {
-      fileDocDataUpload.value.splice(index, 1);
-    }
-  });
+	files.forEach((file: any) => {
+		const index = fileDocDataUpload.value.findIndex(
+			(x: any) => x.__key == file.__key
+		);
+		if (index > -1) {
+			fileDocDataUpload.value.splice(index, 1);
+		}
+	});
 };
 
 const uploadDocData = async () => {
-  const formData = new FormData();
-  if (fileDocDataUpload.value.length > 0) {
-    fileDocDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    loaderPage(true);
-    await http
-      .put(config.API.periodRecruitDoc(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        loaderPage(false);
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        clickBack();
-      });
-  } else {
-    success($q, "บันทึกข้อมูลสำเร็จ");
-    clickBack();
-  }
+	const formData = new FormData();
+	if (fileDocDataUpload.value.length > 0) {
+		fileDocDataUpload.value.forEach((file: any) => {
+			formData.append("", file);
+		});
+		loaderPage(true);
+		await http
+			.put(config.API.periodRecruitDoc(id.value), formData)
+			.then((res) => {})
+			.catch((e) => {
+				messageError($q, e);
+			})
+			.finally(async () => {
+				loaderPage(false);
+				success($q, "บันทึกข้อมูลสำเร็จ");
+				clickBack();
+			});
+	} else {
+		success($q, "บันทึกข้อมูลสำเร็จ");
+		clickBack();
+	}
 };
 
 const uploadImgData = async () => {
-  if (fileImgDataUpload.value.length > 0) {
-    const formData = new FormData();
-    fileImgDataUpload.value.forEach((file: any) => {
-      formData.append("", file);
-    });
-    loaderPage(true);
-    await http
-      .put(config.API.periodRecruitImg(id.value), formData)
-      .then((res) => {})
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        loaderPage(false);
-      });
-  }
+	if (fileImgDataUpload.value.length > 0) {
+		const formData = new FormData();
+		fileImgDataUpload.value.forEach((file: any) => {
+			formData.append("", file);
+		});
+		loaderPage(true);
+		await http
+			.put(config.API.periodRecruitImg(id.value), formData)
+			.then((res) => {})
+			.catch((e) => {
+				messageError($q, e);
+			})
+			.finally(async () => {
+				loaderPage(false);
+			});
+	}
 };
 
 const fileUploadImg = async (files: any) => {
-  files.forEach((file: any) => {
-    fileImgDataUpload.value.push(file);
-  });
+	files.forEach((file: any) => {
+		fileImgDataUpload.value.push(file);
+	});
 };
 
 const fileRemoveImg = async (files: any) => {
-  files.forEach((file: any) => {
-    const index = fileImgDataUpload.value.findIndex(
-      (x: any) => x.__key == file.__key
-    );
-    if (index > -1) {
-      fileImgDataUpload.value.splice(index, 1);
-    }
-  });
+	files.forEach((file: any) => {
+		const index = fileImgDataUpload.value.findIndex(
+			(x: any) => x.__key == file.__key
+		);
+		if (index > -1) {
+			fileImgDataUpload.value.splice(index, 1);
+		}
+	});
 };
 
 const downloadData = async (path: string) => {
-  window.open(path);
+	window.open(path);
 };
 
 const updateYear = async (e: number) => {
-  yearly.value = e;
+	yearly.value = e;
 };
 
 const checkSave = async () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (success) => {
-      if (success) {
-        if (edit.value) {
-          await editData(id.value);
-        } else {
-          await addData();
-        }
-      }
-    });
-  }
+	if (myForm.value !== null) {
+		myForm.value.validate().then(async (success) => {
+			if (success) {
+				if (edit.value) {
+					await editData(id.value);
+				} else {
+					await addData();
+				}
+			}
+		});
+	}
 };
 
 const sendData = () => {
-  const valueData: RequestPeriodCompete = {
-    announcementEndDate:
-      dateAnnouncement.value !== null
-        ? dateToISO(dateAnnouncement.value[1])
-        : null,
-    announcementStartDate:
-      dateAnnouncement.value !== null
-        ? dateToISO(dateAnnouncement.value[0])
-        : null,
-    examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
-    detail: editor.value,
-    fee: fee.value,
-    id: "",
-    name: name.value,
-    note: note.value,
-    paymentEndDate:
-      datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
-    paymentStartDate:
-      datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
-    registerEndDate:
-      dateRegister.value !== null ? dateToISO(dateRegister.value[1]) : null,
-    registerStartDate:
-      dateRegister.value !== null ? dateToISO(dateRegister.value[0]) : null,
-    order: round.value,
-    year: yearly.value,
-    announcementDate:
-      dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
-  };
-  return valueData;
+	const valueData: RequestPeriodCompete = {
+		announcementEndDate:
+			dateAnnouncement.value !== null
+				? dateToISO(dateAnnouncement.value[1])
+				: null,
+		announcementStartDate:
+			dateAnnouncement.value !== null
+				? dateToISO(dateAnnouncement.value[0])
+				: null,
+		examDate: dateExam.value !== null ? dateToISO(dateExam.value) : null,
+		detail: editor.value,
+		fee: fee.value,
+		id: "",
+		name: name.value,
+		note: note.value,
+		paymentEndDate:
+			datePayment.value !== null ? dateToISO(datePayment.value[1]) : null,
+		paymentStartDate:
+			datePayment.value !== null ? dateToISO(datePayment.value[0]) : null,
+		registerEndDate:
+			dateRegister.value !== null
+				? dateToISO(dateRegister.value[1])
+				: null,
+		registerStartDate:
+			dateRegister.value !== null
+				? dateToISO(dateRegister.value[0])
+				: null,
+		order: round.value,
+		year: yearly.value,
+		announcementDate:
+			dateAnnounce.value !== null ? dateToISO(dateAnnounce.value) : null,
+	};
+	return valueData;
 };
 
 const deleteDocData = async (docId: string) => {
-  loaderPage(true);
-  await http
-    .delete(config.API.periodDeleteDoc(docId))
-    .then(async () => {
-      await fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      loaderPage(false);
-    });
+	loaderPage(true);
+	await http
+		.delete(config.API.periodDeleteDoc(docId))
+		.then(async () => {
+			await fetchData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			loaderPage(false);
+		});
 };
 
 const deleteImgData = async (docId: string) => {
-  loaderPage(true);
-  await http
-    .delete(config.API.periodDeleteImg(docId))
-    .then(async () => {
-      await fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      loaderPage(false);
-    });
+	loaderPage(true);
+	await http
+		.delete(config.API.periodDeleteImg(docId))
+		.then(async () => {
+			await fetchData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			loaderPage(false);
+		});
 };
 
 const addData = async () => {
-  loaderPage(true);
-  await http
-    .post(config.API.savePeriod, sendData())
-    .then(async (res) => {
-      const data = res.data.result;
-      id.value = data.id;
-      await uploadImgData();
-      await uploadDocData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      loaderPage(false);
-    });
+	loaderPage(true);
+	await http
+		.post(config.API.savePeriod, sendData())
+		.then(async (res) => {
+			const data = res.data.result;
+			id.value = data.id;
+			await uploadImgData();
+			await uploadDocData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			loaderPage(false);
+		});
 };
 
 const editData = async (id: string) => {
-  loaderPage(true);
-  await http
-    .put(config.API.editPeriod(id), sendData())
-    .then(async () => {
-      await uploadImgData();
-      await uploadDocData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      loaderPage(false);
-    });
+	loaderPage(true);
+	await http
+		.put(config.API.editPeriod(id), sendData())
+		.then(async () => {
+			await uploadImgData();
+			await uploadDocData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			loaderPage(false);
+		});
 };
 
 /**
@@ -1041,13 +1200,13 @@ const editData = async (id: string) => {
  * @param val ช่วงวันที่
  */
 const dateThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-    return "";
-  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
-    return `${date2Thai(val[0], true)}`;
-  } else {
-    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
-  }
+	if (val === null) {
+		return "";
+	} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
+		return `${date2Thai(val[0], true)}`;
+	} else {
+		return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
+	}
 };
 </script>
 
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodStat.vue b/src/modules/03_recruiting/views/01_compete/PeriodStat.vue
index 3bfe427ab..8dfad847f 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodStat.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodStat.vue
@@ -1,7 +1,7 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <template>
   <div class="toptitle text-dark col-12 row items-center">
-    ข้อมูลสถิติการสมัครสอบแข่งขัน
+    สถิติสมัครสอบแข่งขัน
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-px-md q-py-sm">
     <iframe
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
index 66d0f4751..1b31b8a2d 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@@ -29,7 +29,7 @@
           </q-item>
           <q-item clickable v-close-popup @click="downloadPassResultExam()">
             <q-item-section class="text-amber-9"
-              >ส่งออกข้อมูลผู้คัดเลือกผู้พิการได้</q-item-section
+              >ส่งออกข้อมูลผู้คัดเลือกคนพิการได้</q-item-section
             >
           </q-item>
         </q-list>
@@ -291,7 +291,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "examResult",
     align: "left",
-    label: "ผลการสอบ",
+    label: "ผลคะแนนสอบ",
     sortable: true,
     field: "examResult",
     headerStyle: "font-size: 14px",
@@ -372,7 +372,7 @@ const downloadPassResultExam = async () => {
     .then((res) => {
       var a = document.createElement("a");
       a.href = URL.createObjectURL(res.data);
-      a.download = `รายชื่อคัดเลือกผู้พิการได้.xlsx`;
+      a.download = `รายชื่อคัดเลือกคนพิการได้.xlsx`;
       // start download
       a.click();
     })
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
index 402f654b5..2908324fb 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetailEx.vue
@@ -26,12 +26,16 @@
               {{ profile_id }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="prefix !== null">คำนำหน้านาม</div>
+            <div class="col-6 text-grey-7" v-if="prefix !== null">
+              คำนำหน้าชื่อนาม
+            </div>
             <div class="col-6 text-black" v-if="prefix !== null">
               {{ prefix }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="fullname !== null">ชื่อ-นามสกุล</div>
+            <div class="col-6 text-grey-7" v-if="fullname !== null">
+              ชื่อ-นามสกุล
+            </div>
             <div class="col-6 text-black" v-if="fullname !== null">
               {{ fullname }}
             </div>
@@ -55,26 +59,32 @@
               {{ position_name }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="university !== null">สถานศึกษา</div>
+            <div class="col-6 text-grey-7" v-if="university !== null">
+              สถานศึกษา
+            </div>
             <div class="col-6 text-black" v-if="university !== null">
               {{ university }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="degree !== null">วุฒิการศึกษา</div>
+            <div class="col-6 text-grey-7" v-if="degree !== null">
+              วุฒิการศึกษา
+            </div>
             <div class="col-6 text-black" v-if="degree !== null">
               {{ degree }}
             </div>
 
-            <div class="col-6 text-grey-7" v-if="major !== null">สาขาวิชาเอก</div>
+            <div class="col-6 text-grey-7" v-if="major !== null">
+              สาขาวิชาเอก
+            </div>
             <div class="col-6 text-black" v-if="major !== null">
               {{ major }}
             </div>
 
             <div class="col-6 text-grey-7" v-if="major !== null">
-              จำนวนครั้งที่สมัครสอบ
+              ครั้งที่ประกาศรับสมัคร
             </div>
             <div class="col-6 text-black" v-if="major !== null">
-              {{ examCount }}
+              {{ examOrder }}
             </div>
 
             <div class="col-6 text-grey-7" v-if="cert_issuedate !== null">
@@ -101,7 +111,7 @@
         >
           <div class="col-12 row q-col-gutter-sm">
             <div class="col-12 text-weight-bold row items-center">
-              ผลการสอบ
+              ผลคะแนนสอบ
               <q-space />
               <q-btn
                 color="primary"
@@ -118,7 +128,11 @@
                         >ดาวน์โหลดผลคะแนน</q-item-section
                       >
                     </q-item>
-                    <q-item clickable v-close-popup @click="downloadCertificate()">
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="downloadCertificate()"
+                    >
                       <q-item-section class="text-blue"
                         >ดาวน์โหลดเอกสารรับรอง</q-item-section
                       >
@@ -138,12 +152,18 @@
               </q-btn>
             </div>
             <div class="row items-center q-gutter-y-sm col-12">
-              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">ประเภท</div>
-              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">คะแนนเต็ม</div>
+              <div class="col-xs-4 col-sm-5 text-weight-medium text-grey-7">
+                ประเภท
+              </div>
+              <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
+                คะแนนเต็ม
+              </div>
               <div class="col-xs-3 col-sm-2 text-primary text-weight-bold">
                 คะแนนที่ได้
               </div>
-              <div class="col-xs-2 col-sm-2 text-primary text-weight-bold"></div>
+              <div
+                class="col-xs-2 col-sm-2 text-primary text-weight-bold"
+              ></div>
 
               <div class="col-xs-4 col-sm-5 text-grey-7">ภาค ก</div>
               <div class="col-xs-3 col-sm-2 q-pr-xs">
@@ -181,10 +201,16 @@
               </div>
               <div class="col-xs-2 col-sm-2 q-pr-xs text-grey-7">คะแนน</div>
 
-              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">ผลการสอบ</div>
-              <div class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1">
+              <div class="col-xs-4 col-sm-5 text-weight-bold q-pt-sm">
+                ผลการสอบ
+              </div>
+              <div
+                class="col-xs-8 col-sm-6 q-pr-xs text-weight-bold text-subtitle1"
+              >
                 <span
-                  :class="examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'"
+                  :class="
+                    examResultinscore != 'ผ่าน' ? 'text-red' : 'text-positive'
+                  "
                   >{{ examResultinscore }}</span
                 >
               </div>
@@ -195,7 +221,7 @@
               </div>
 
               <div class="col-xs-6 col-sm-5 text-grey-7">
-                วันหมดอายุบัญชีคัดเลือกผู้พิการ
+                วันหมดอายุบัญชีคัดเลือกคนพิการ
               </div>
               <div class="col-xs-6 col-sm-7 q-pr-xs">
                 {{ score_expired }}
@@ -245,7 +271,7 @@ const scoreCFull = ref<string>("");
 const scoreC = ref<string>("");
 const scoreSumFull = ref<string>("");
 const scoreSum = ref<string>("");
-const examCount = ref<string>("");
+const examOrder = ref<string>("");
 const number = ref<string>("");
 const score_expired = ref<string>("");
 const attachments = ref<any>([
@@ -268,8 +294,7 @@ const fetchData = async () => {
     .get(config.API.getDisableExamDetail(importId.value, examId.value))
     .then((res) => {
       let data = res.data.result.data;
-      if (res.data.result != null) {
-        examCount.value = res.data.result.examCount;
+      if (data != null) {
         profile_id.value = data.profileID;
         examID.value = data.examID;
         prefix.value = data.prefix;
@@ -284,7 +309,7 @@ const fetchData = async () => {
         examAttribute.value = data.examAttribute;
         number.value = data.number;
         console.log(data);
-        examCount.value = data.examCount;
+        examOrder.value = data.examOrder;
         score_expired.value = data.scoreExpire;
         if (data.scoreResult != null) {
           scoreAFull.value = data.scoreResult.scoreAFull;
@@ -331,9 +356,12 @@ const downloadScore = async () => {
 const downloadCertificate = async () => {
   loaderPage(true);
   await http
-    .get(config.API.downloadDisableExamReport(importId.value, examId.value, 2), {
-      responseType: "blob",
-    })
+    .get(
+      config.API.downloadDisableExamReport(importId.value, examId.value, 2),
+      {
+        responseType: "blob",
+      }
+    )
     .then((res) => {
       var a = document.createElement("a");
       a.href = URL.createObjectURL(res.data);
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
index 097beb127..ccb021623 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriod.vue
@@ -1,357 +1,406 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    จัดการรอบคัดเลือกคนพิการ
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="rows"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :pagination="initialPagination"
-        :nornmalData="true"
-        :add="clickAdd"
-        :paging="true"
-        :titleText="''"
-      >
-        <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="clickDetail(props.row.id)"
-            >
-              <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else-if="col.name == 'name'" class="table_ellipsis2">
-                {{ col.value }}
-              </div>
-              <div v-else-if="col.name == 'year'" class="table_ellipsis2">
-                {{ col.value + 543 }}
-              </div>
-              <div v-else-if="col.name == 'scoreCount'" class="table_ellipsis2">
-                <q-btn
-                  flat
-                  dense
-                  size="12px"
-                  round
-                  color="green"
-                  @click.stop.prevent="clickEdit(props.row.id)"
-                  v-if="col.value == null"
-                >
-                  <q-icon name="mdi-file-excel-outline" size="20px" />
-                  <!-- นำเข้าไฟล์ผลการสอบ -->
-                  <q-tooltip>นำเข้าไฟล์ผลการสอบ</q-tooltip>
-                </q-btn>
-                <div v-else>
-                  {{ col.value }}
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="green"
-                    @click.stop.prevent="clickEdit(props.row.id)"
-                    icon="mdi-file-excel-outline"
-                  >
-                    <q-tooltip>นำเข้าไฟล์ผลการสอบอีกครั้ง</q-tooltip>
-                  </q-btn>
+	<div class="toptitle text-dark col-12 row items-center">
+		จัดการรอบคัดเลือกคนพิการ
+	</div>
+	<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+		<div>
+			<Table
+				style="max-height: 80vh"
+				:rows="rows"
+				:columns="columns"
+				:filter="filter"
+				:visible-columns="visibleColumns"
+				v-model:inputfilter="filter"
+				v-model:inputvisible="visibleColumns"
+				:pagination="initialPagination"
+				:nornmalData="true"
+				:add="clickAdd"
+				:paging="true"
+				:titleText="''"
+			>
+				<template #columns="props">
+					<q-tr :props="props" class="cursor-pointer">
+						<q-td
+							v-for="col in props.cols"
+							:key="col.name"
+							:props="props"
+							@click="clickDetail(props.row.id)"
+						>
+							<div v-if="col.name == 'no'">
+								{{ props.rowIndex + 1 }}
+							</div>
+							<div
+								v-else-if="col.name == 'name'"
+								class="table_ellipsis2"
+							>
+								{{ col.value }}
+							</div>
+							<div
+								v-else-if="col.name == 'year'"
+								class="table_ellipsis2"
+							>
+								{{ col.value + 543 }}
+							</div>
+							<div
+								v-else-if="col.name == 'scoreCount'"
+								class="table_ellipsis2"
+							>
+								<q-btn
+									flat
+									dense
+									size="12px"
+									round
+									color="green"
+									@click.stop.prevent="
+										clickEdit(props.row.id)
+									"
+									v-if="col.value == null"
+								>
+									<q-icon
+										name="mdi-file-excel-outline"
+										size="20px"
+									/>
+									<!-- นำเข้าไฟล์ผลคะแนนสอบ -->
+									<q-tooltip>นำเข้าไฟล์ผลคะแนนสอบ</q-tooltip>
+								</q-btn>
+								<div v-else>
+									{{ col.value }}
+									<q-btn
+										dense
+										size="12px"
+										flat
+										round
+										color="green"
+										@click.stop.prevent="
+											clickEdit(props.row.id)
+										"
+										icon="mdi-file-excel-outline"
+									>
+										<q-tooltip
+											>นำเข้าไฟล์ผลคะแนนสอบอีกครั้ง</q-tooltip
+										>
+									</q-btn>
 
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="indigo"
-                    @click.stop.prevent="clickPassExam(props.row.id)"
-                    icon="mdi-clipboard-arrow-down"
-                  >
-                    <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
-                  </q-btn>
-                </div>
-              </div>
-              <div v-else-if="col.name == 'examCount'" class="table_ellipsis2">
-                <q-btn
-                  flat
-                  dense
-                  size="12px"
-                  color="green"
-                  round
-                  @click.stop.prevent="clickUpload(props.row.id)"
-                  v-if="col.value == null || col.value == '0'"
-                >
-                  <q-icon name="mdi-file-excel-outline" size="20px" />
-                  <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
-                </q-btn>
-                <div v-else>
-                  {{ col.value }}
+									<q-btn
+										dense
+										size="12px"
+										flat
+										round
+										color="indigo"
+										@click.stop.prevent="
+											clickPassExam(props.row.id)
+										"
+										icon="mdi-clipboard-arrow-down"
+									>
+										<q-tooltip
+											>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip
+										>
+									</q-btn>
+								</div>
+							</div>
+							<div
+								v-else-if="col.name == 'examCount'"
+								class="table_ellipsis2"
+							>
+								<q-btn
+									flat
+									dense
+									size="12px"
+									color="green"
+									round
+									@click.stop.prevent="
+										clickUpload(props.row.id)
+									"
+									v-if="col.value == null || col.value == '0'"
+								>
+									<q-icon
+										name="mdi-file-excel-outline"
+										size="20px"
+									/>
+									<q-tooltip>นำเข้าไฟล์ผู้สมัครสอบ</q-tooltip>
+								</q-btn>
+								<div v-else>
+									{{ col.value }}
 
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="green"
-                    @click.stop.prevent="clickUpload(props.row.id)"
-                    icon="mdi-file-excel-outline"
-                  >
-                    <q-tooltip>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip>
-                  </q-btn>
+									<q-btn
+										dense
+										size="12px"
+										flat
+										round
+										color="green"
+										@click.stop.prevent="
+											clickUpload(props.row.id)
+										"
+										icon="mdi-file-excel-outline"
+									>
+										<q-tooltip
+											>นำเข้าไฟล์ผู้สมัครสอบอีกครั้ง</q-tooltip
+										>
+									</q-btn>
 
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="indigo"
-                    @click.stop.prevent="clickCandidateList(props.row.id)"
-                    icon="mdi-clipboard-arrow-down"
-                  >
-                    <q-tooltip>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip>
-                  </q-btn>
-                </div>
-              </div>
-              <div v-else>
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="primary"
-                @click="clickEditPeriod(props.row.id)"
-                icon="mdi-pencil-outline"
-              >
-                <q-tooltip>แก้ไขข้อมูล</q-tooltip>
-              </q-btn>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
+									<q-btn
+										dense
+										size="12px"
+										flat
+										round
+										color="indigo"
+										@click.stop.prevent="
+											clickCandidateList(props.row.id)
+										"
+										icon="mdi-clipboard-arrow-down"
+									>
+										<q-tooltip
+											>ดาวน์โหลดรายชื่อผู้มีสิทธิ์สอบ</q-tooltip
+										>
+									</q-btn>
+								</div>
+							</div>
+							<div v-else>
+								{{ col.value }}
+							</div>
+						</q-td>
+						<q-td>
+							<q-btn
+								dense
+								size="12px"
+								flat
+								round
+								color="primary"
+								@click="clickEditPeriod(props.row.id)"
+								icon="mdi-pencil-outline"
+							>
+								<q-tooltip>แก้ไขข้อมูล</q-tooltip>
+							</q-btn>
+							<q-btn
+								dense
+								size="12px"
+								flat
+								round
+								color="red"
+								@click="clickDelete(props.row.id)"
+								icon="mdi-delete"
+							>
+								<q-tooltip>ลบข้อมูล</q-tooltip>
+							</q-btn>
 
-              <q-btn
-                color="info"
-                flat
-                dense
-                round
-                size="12px"
-                icon="mdi-history"
-                @click="clickHistory(props.row.id)"
-              >
-                <q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </div>
-  </q-card>
+							<q-btn
+								color="info"
+								flat
+								dense
+								round
+								size="12px"
+								icon="mdi-history"
+								@click="clickHistory(props.row.id)"
+							>
+								<q-tooltip>แสดงประวัติการทำงาน</q-tooltip>
+							</q-btn>
+						</q-td>
+					</q-tr>
+				</template>
+			</Table>
+		</div>
+	</q-card>
 
-  <HistoryTable
-    :rows="rowsHistory"
-    :columns="columnsHistory"
-    :visible-columns="visibleColumnsHistory"
-    v-model:modal="modalHistory"
-    v-model:inputvisible="visibleColumnsHistory"
-    v-model:tittle="tittleHistory"
-  >
-    <template #columns="props">
-      <q-tr :props="props">
-        <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div v-if="col.name == 'isActive'" class="">
-            <q-icon
-              v-if="col.value == false"
-              name="mdi-close"
-              color="red"
-              class="text-h5"
-            />
-            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
-          </div>
-          <div v-else-if="col.name == 'createdAt'" class="">
-            {{ textDate(col.value) }}
-          </div>
+	<HistoryTable
+		:rows="rowsHistory"
+		:columns="columnsHistory"
+		:visible-columns="visibleColumnsHistory"
+		v-model:modal="modalHistory"
+		v-model:inputvisible="visibleColumnsHistory"
+		v-model:tittle="tittleHistory"
+	>
+		<template #columns="props">
+			<q-tr :props="props">
+				<q-td v-for="col in props.cols" :key="col.name" :props="props">
+					<div v-if="col.name == 'isActive'" class="">
+						<q-icon
+							v-if="col.value == false"
+							name="mdi-close"
+							color="red"
+							class="text-h5"
+						/>
+						<q-icon
+							v-else
+							name="mdi-check"
+							color="positive"
+							class="text-h5"
+						/>
+					</div>
+					<div v-else-if="col.name == 'createdAt'" class="">
+						{{ textDate(col.value) }}
+					</div>
 
-          <div v-else class="">
-            {{ col.value }}
-          </div>
-        </q-td>
-      </q-tr>
-    </template>
-  </HistoryTable>
+					<div v-else class="">
+						{{ col.value }}
+					</div>
+				</q-td>
+			</q-tr>
+		</template>
+	</HistoryTable>
 
-  <!-- popup Edit window-->
-  <q-dialog v-model="modalAdd" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myForm">
-        <DialogHeader :tittle="textTittle" :close="clickClose" />
-        <q-separator />
-        <q-card-section>
-          <div class="col-12 row items-center q-col-gutter-sm">
-            <div class="col-12">
-              <q-input
-                outlined
-                v-model="name"
-                label="ชื่อการคัดเลือกผู้พิการ"
-                dense
-                autogrow
-                lazy-rules
-                autofocus
-                hide-bottom-space
-              ></q-input>
-            </div>
-            <div class="col-12">
-              <q-input
-                outlined
-                v-model="round"
-                label="ครั้งที่"
-                dense
-                autogrow
-                lazy-rules
-                autofocus
-                hide-bottom-space
-              ></q-input>
-            </div>
-            <div class="col-12">
-              <q-input
-                outlined
-                v-model="year"
-                label="ปีงบประมาณ"
-                dense
-                autogrow
-                lazy-rules
-                autofocus
-                hide-bottom-space
-              ></q-input>
-            </div>
-            <div class="col-12">
-              <q-file
-                v-model="files"
-                dense
-                label="เลือกไฟล์รายชื่อผู้สมัครคัดเลือกผู้พิการ"
-                outlined
-                use-chips
-                multiple
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="text-primary q-py-sm">
-          <q-space />
-          <q-btn
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="checkSave"
-          ><!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
+	<!-- popup Edit window-->
+	<q-dialog v-model="modalAdd" persistent>
+		<q-card style="width: 600px">
+			<q-form ref="myForm">
+				<DialogHeader :tittle="textTittle" :close="clickClose" />
+				<q-separator />
+				<q-card-section>
+					<div class="col-12 row items-center q-col-gutter-sm">
+						<div class="col-12">
+							<q-input
+								outlined
+								v-model="name"
+								label="ชื่อการคัดเลือกคนพิการ"
+								dense
+								autogrow
+								lazy-rules
+								autofocus
+								hide-bottom-space
+							></q-input>
+						</div>
+						<div class="col-12">
+							<q-input
+								outlined
+								v-model="round"
+								label="ครั้งที่"
+								dense
+								autogrow
+								lazy-rules
+								autofocus
+								hide-bottom-space
+							></q-input>
+						</div>
+						<div class="col-12">
+							<q-input
+								outlined
+								v-model="year"
+								label="ปีงบประมาณ"
+								dense
+								autogrow
+								lazy-rules
+								autofocus
+								hide-bottom-space
+							></q-input>
+						</div>
+						<div class="col-12">
+							<q-file
+								v-model="files"
+								dense
+								label="เลือกไฟล์รายชื่อผู้สมัครคัดเลือกคนพิการ"
+								outlined
+								use-chips
+								multiple
+							>
+								<template v-slot:prepend>
+									<q-icon name="attach_file" />
+								</template>
+							</q-file>
+						</div>
+					</div>
+				</q-card-section>
+				<q-separator />
+				<q-card-actions class="text-primary q-py-sm">
+					<q-space />
+					<q-btn
+						flat
+						round
+						color="public"
+						@click="checkSave"
+						icon="mdi-content-save-outline"
+					>
+						<q-tooltip>บันทึก</q-tooltip>
+					</q-btn>
+				</q-card-actions>
+			</q-form>
+		</q-card>
+	</q-dialog>
 
-  <q-dialog v-model="modalScore" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myFormScore">
-        <DialogHeader :tittle="textTittleScore" :close="clickCloseScore" />
-        <q-separator />
-        <q-card-section>
-          <div class="col-12 row items-center q-col-gutter-sm">
-            <div class="col-12">
-              <q-file
-                v-model="files_score"
-                dense
-                label="เลือกไฟล์ผลการคัดเลือกผู้พิการ"
-                outlined
-                use-chips
-                multiple
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="text-primary q-py-sm">
-          <q-space />
-          <q-btn
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="checkSaveScore"
-          > <!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
+	<q-dialog v-model="modalScore" persistent>
+		<q-card style="width: 600px">
+			<q-form ref="myFormScore">
+				<DialogHeader
+					:tittle="textTittleScore"
+					:close="clickCloseScore"
+				/>
+				<q-separator />
+				<q-card-section>
+					<div class="col-12 row items-center q-col-gutter-sm">
+						<div class="col-12">
+							<q-file
+								v-model="files_score"
+								dense
+								label="เลือกไฟล์ผลการคัดเลือกคนพิการ"
+								outlined
+								use-chips
+								multiple
+							>
+								<template v-slot:prepend>
+									<q-icon name="attach_file" />
+								</template>
+							</q-file>
+						</div>
+					</div>
+				</q-card-section>
+				<q-separator />
+				<q-card-actions class="text-primary q-py-sm">
+					<q-space />
+					<q-btn
+						flat
+						round
+						color="public"
+						@click="checkSaveScore"
+						icon="mdi-content-save-outline"
+					>
+						<q-tooltip>บันทึก</q-tooltip>
+					</q-btn>
+				</q-card-actions>
+			</q-form>
+		</q-card>
+	</q-dialog>
 
-  <q-dialog v-model="modalCandidate" persistent>
-    <q-card style="width: 600px">
-      <q-form ref="myFormScore">
-        <DialogHeader
-          :tittle="textTittleCandidate"
-          :close="clickCloseCandidate"
-        />
-        <q-separator />
-        <q-card-section>
-          <div class="col-12 row items-center q-col-gutter-sm">
-            <div class="col-12">
-              <q-file
-                v-model="files_candidate"
-                dense
-                label="เลือกไฟล์ผู้สมัครคัดเลือกผู้พิการ"
-                outlined
-                use-chips
-                multiple
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card-section>
-        <q-separator />
-        <q-card-actions class="text-primary q-py-sm">
-          <q-space />
-          <q-btn
-            unelevated
-            label="บันทึก"
-            color="public"
-            @click="checkSaveCandidate"
-          ><!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
-          </q-btn>
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
+	<q-dialog v-model="modalCandidate" persistent>
+		<q-card style="width: 600px">
+			<q-form ref="myFormScore">
+				<DialogHeader
+					:tittle="textTittleCandidate"
+					:close="clickCloseCandidate"
+				/>
+				<q-separator />
+				<q-card-section>
+					<div class="col-12 row items-center q-col-gutter-sm">
+						<div class="col-12">
+							<q-file
+								v-model="files_candidate"
+								dense
+								label="เลือกไฟล์ผู้สมัครคัดเลือกคนพิการ"
+								outlined
+								use-chips
+								multiple
+							>
+								<template v-slot:prepend>
+									<q-icon name="attach_file" />
+								</template>
+							</q-file>
+						</div>
+					</div>
+				</q-card-section>
+				<q-separator />
+				<q-card-actions class="text-primary q-py-sm">
+					<q-space />
+					<q-btn
+						flat
+						round
+						color="public"
+						@click="checkSaveCandidate"
+						icon="mdi-content-save-outline"
+					>
+						<q-tooltip>บันทึก</q-tooltip>
+					</q-btn>
+				</q-card-actions>
+			</q-form>
+		</q-card>
+	</q-dialog>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
@@ -360,8 +409,8 @@ import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type {
-  ResponseRecruitPeriod,
-  ResponseHistoryObject,
+	ResponseRecruitPeriod,
+	ResponseHistoryObject,
 } from "@/modules/03_recruiting/interface/response/Period";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import Table from "@/modules/03_recruiting/components/Table.vue";
@@ -396,166 +445,121 @@ const textTittle = ref<string>("");
 const textTittleScore = ref<string>("");
 const textTittleCandidate = ref<string>("");
 const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+	rowsPerPage: 0,
 });
 const visibleColumns = ref<String[]>([
-  "no",
-  "name",
-  "round",
-  "year",
-  "examCount",
-  "scoreCount",
+	"no",
+	"name",
+	"round",
+	"year",
+	"examCount",
+	"scoreCount",
 ]);
 
 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "รอบการคัดเลือกผู้พิการ",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "round",
-    align: "left",
-    label: "ครั้งที่",
-    sortable: true,
-    field: "round",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "year",
-    align: "left",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "examCount",
-    label: "จำนวนผู้สอบทั้งหมด",
-    align: "right",
-    field: "examCount",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "scoreCount",
-    label: "จำนวนที่บันทึกผลสอบ",
-    align: "right",
-    field: "scoreCount",
-    sortable: true,
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
+	{
+		name: "no",
+		align: "left",
+		label: "ลำดับ",
+		sortable: true,
+		field: "no",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "name",
+		align: "left",
+		label: "รอบคัดเลือกคนพิการ",
+		sortable: true,
+		field: "name",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "round",
+		align: "left",
+		label: "ครั้งที่",
+		sortable: true,
+		field: "round",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "year",
+		align: "left",
+		label: "ปีงบประมาณ",
+		sortable: true,
+		field: "year",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "examCount",
+		label: "จำนวนผู้สอบทั้งหมด",
+		align: "right",
+		field: "examCount",
+		sortable: true,
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "scoreCount",
+		label: "จำนวนที่บันทึกผลสอบ",
+		align: "right",
+		field: "scoreCount",
+		sortable: true,
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
 ]);
 
 const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "description",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "description",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "createdAt",
-    align: "center",
-    label: "วันที่ดำเนินการ",
-    sortable: true,
-    field: "createdAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
+	{
+		name: "description",
+		align: "left",
+		label: "รายละเอียด",
+		sortable: true,
+		field: "description",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "createdAt",
+		align: "center",
+		label: "วันที่ดำเนินการ",
+		sortable: true,
+		field: "createdAt",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "createdFullName",
+		align: "left",
+		label: "ผู้ดำเนินการ",
+		sortable: true,
+		field: "createdFullName",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
 ]);
 
 const visibleColumnsHistory = ref<String[]>([
-  "description",
-  "createdAt",
-  "createdFullName",
+	"description",
+	"createdAt",
+	"createdFullName",
 ]);
 
 onMounted(async () => {
-  loaderPage(false);
-  await fetchData();
+	loaderPage(false);
+	await fetchData();
 });
 
 const clickPassExam = (id: string) => {
-  window.open(config.API.exportDisablePassExamList(id));
+	window.open(config.API.exportDisablePassExamList(id));
 };
 
 const clickCandidateList = (id: string) => {
-  window.open(config.API.exportDisableCandidateList(id));
+	window.open(config.API.exportDisableCandidateList(id));
 };
 
 /**
@@ -563,196 +567,196 @@ const clickCandidateList = (id: string) => {
  * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
  */
 const textDate = (value: Date) => {
-  return dateText(value);
+	return dateText(value);
 };
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.getDisableCandidates)
-    .then((res) => {
-      const data = res.data.result;
-      let result: ResponseRecruitPeriod[] = [];
-      if (data.length > 0) {
-        data.map((r: ResponseRecruitPeriod) => {
-          if (r.score != null) {
-            r.scoreCount = r.score.scoreCount;
-            r.scoreImportDate = r.score.importDate;
-          }
-          result.push(r);
-        });
-      }
+	loaderPage(true);
+	await http
+		.get(config.API.getDisableCandidates)
+		.then((res) => {
+			const data = res.data.result;
+			let result: ResponseRecruitPeriod[] = [];
+			if (data.length > 0) {
+				data.map((r: ResponseRecruitPeriod) => {
+					if (r.score != null) {
+						r.scoreCount = r.score.scoreCount;
+						r.scoreImportDate = r.score.importDate;
+					}
+					result.push(r);
+				});
+			}
 
-      rows.value = result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+			rows.value = result;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const clickDetail = (id: string) => {
-  router.push(`/disable/import/${id}`);
+	router.push(`/disable/import/${id}`);
 };
 
 const clickEdit = async (id: string) => {
-  modalScore.value = true;
-  textTittleScore.value = "นำเข้าผลการคัดเลือกผู้พิการ";
-  selected_row_id.value = id;
+	modalScore.value = true;
+	textTittleScore.value = "นำเข้าผลการคัดเลือกคนพิการ";
+	selected_row_id.value = id;
 };
 
 const clickUpload = async (id: string) => {
-  modalCandidate.value = true;
-  textTittleCandidate.value = "นำเข้าผู้สมัครคัดเลือกผู้พิการ";
-  selected_row_id.value = id;
+	modalCandidate.value = true;
+	textTittleCandidate.value = "นำเข้าผู้สมัครคัดเลือกคนพิการ";
+	selected_row_id.value = id;
 };
 
 const clickEditPeriod = (id: string) => {
-  router.push(`/disable/period/${id}`);
+	router.push(`/disable/period/${id}`);
 };
 
 const clickHistory = async (id: string) => {
-  modalHistory.value = true;
-  loaderPage(true);
-  await http
-    .get(config.API.getDisableImportHistory(id))
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = [];
-      if (data.length > 0) {
-        data.map((i: ResponseHistoryObject) => {
-          rowsHistory.value.push({
-            createdAt: i.createdAt,
-            createdFullName: i.createdFullName,
-            createdUserId: i.createdUserId,
-            id: i.id,
-            isActive: i.isActive,
-            lastUpdateFullName: i.lastUpdateFullName,
-            lastUpdateUserId: i.lastUpdateUserId,
-            lastUpdatedAt: i.lastUpdatedAt,
-            description: i.description,
-          });
-        });
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      loaderPage(false);
-    });
+	modalHistory.value = true;
+	loaderPage(true);
+	await http
+		.get(config.API.getDisableImportHistory(id))
+		.then((res) => {
+			const data = res.data.result;
+			rowsHistory.value = [];
+			if (data.length > 0) {
+				data.map((i: ResponseHistoryObject) => {
+					rowsHistory.value.push({
+						createdAt: i.createdAt,
+						createdFullName: i.createdFullName,
+						createdUserId: i.createdUserId,
+						id: i.id,
+						isActive: i.isActive,
+						lastUpdateFullName: i.lastUpdateFullName,
+						lastUpdateUserId: i.lastUpdateUserId,
+						lastUpdatedAt: i.lastUpdatedAt,
+						description: i.description,
+					});
+				});
+			}
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			loaderPage(false);
+		});
 };
 
 const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      loaderPage(true);
-      await http
-        .delete(config.API.deleteDisableCandidates(id))
-        .then((res) => {
-          success($q, "ลบข้อมูลการสอบสำเร็จ");
-          fetchData();
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          loaderPage(false);
-        });
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+	$q.dialog({
+		title: "ยืนยันการลบข้อมูล",
+		message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+		cancel: {
+			flat: true,
+			color: "negative",
+		},
+		persistent: true,
+	})
+		.onOk(async () => {
+			loaderPage(true);
+			await http
+				.delete(config.API.deleteDisableCandidates(id))
+				.then((res) => {
+					success($q, "ลบข้อมูลการสอบสำเร็จ");
+					fetchData();
+				})
+				.catch((e) => {
+					messageError($q, e);
+				})
+				.finally(() => {
+					loaderPage(false);
+				});
+		})
+		.onCancel(() => {})
+		.onDismiss(() => {});
 };
 
 const clickAdd = () => {
-  router.push({ name: "disablePeriodAdd" });
+	router.push({ name: "disablePeriodAdd" });
 };
 
 const clickClose = async () => {
-  modalAdd.value = false;
-  await fetchData();
+	modalAdd.value = false;
+	await fetchData();
 };
 
 const clickCloseScore = async () => {
-  modalScore.value = false;
-  await fetchData();
+	modalScore.value = false;
+	await fetchData();
 };
 
 const clickCloseCandidate = async () => {
-  modalCandidate.value = false;
-  await fetchData();
+	modalCandidate.value = false;
+	await fetchData();
 };
 
 const checkSaveCandidate = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files_candidate.value[0]);
-  loaderPage(true);
-  await http
-    .post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
-      modalCandidate.value = false;
-      selected_row_id.value = "";
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	const fd = new FormData();
+	fd.append("attachment", files_candidate.value[0]);
+	loaderPage(true);
+	await http
+		.post(config.API.uploadDisableCandidates(selected_row_id.value), fd)
+		.then((res) => {
+			success($q, "นำเข้าข้อมูลผู้สมัครสอบสำเร็จ");
+			modalCandidate.value = false;
+			selected_row_id.value = "";
+			fetchData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const checkSaveScore = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files_score.value[0]);
-  loaderPage(true);
-  await http
-    .post(config.API.saveDisableScores(selected_row_id.value), fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผลการสอบสำเร็จ");
-      modalScore.value = false;
-      selected_row_id.value = "";
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	const fd = new FormData();
+	fd.append("attachment", files_score.value[0]);
+	loaderPage(true);
+	await http
+		.post(config.API.saveDisableScores(selected_row_id.value), fd)
+		.then((res) => {
+			success($q, "นำเข้าข้อมูลผลคะแนนสอบสำเร็จ");
+			modalScore.value = false;
+			selected_row_id.value = "";
+			fetchData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const checkSave = async () => {
-  const fd = new FormData();
-  fd.append("attachment", files.value[0]);
-  fd.append("year", year.value.toString());
-  fd.append("round", round.value.toString());
-  fd.append("name", name.value);
-  loaderPage(true);
-  await http
-    .post(config.API.saveDisableCandidates, fd)
-    .then((res) => {
-      success($q, "นำเข้าข้อมูลผู้สมัครคัดเลือกผู้พิการสำเร็จ");
-      modalAdd.value = false;
-      fetchData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	const fd = new FormData();
+	fd.append("attachment", files.value[0]);
+	fd.append("year", year.value.toString());
+	fd.append("round", round.value.toString());
+	fd.append("name", name.value);
+	loaderPage(true);
+	await http
+		.post(config.API.saveDisableCandidates, fd)
+		.then((res) => {
+			success($q, "นำเข้าข้อมูลผู้สมัครคัดเลือกคนพิการสำเร็จ");
+			modalAdd.value = false;
+			fetchData();
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 </script>
 
diff --git a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
index ab201af97..8630c1005 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisablePeriodAdd.vue
@@ -1,4 +1,4 @@
-<!-- page:จัดการรอบการคัดเลือกผู้พิการ สรรหา -->
+<!-- page:จัดการรอบคัดเลือกคนพิการ สรรหา -->
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
@@ -12,7 +12,7 @@
       @click="clickBack"
     />
     {{
-      edit ? "แก้ไขข้อมูลการคัดเลือกผู้พิการ" : "เพิ่มข้อมูลการคัดเลือกผู้พิการ"
+      edit ? "แก้ไขข้อมูลการคัดเลือกคนพิการ" : "เพิ่มข้อมูลการคัดเลือกคนพิการ"
     }}
   </div>
   <q-card flat bordered class="col-12">
@@ -24,13 +24,12 @@
             <q-input
               outlined
               v-model="name"
-              label="ชื่อรอบการคัดเลือกผู้พิการ/ชื่อประกาศ"
+              label="ชื่อรอบคัดเลือกคนพิการ/ชื่อประกาศ"
               dense
               lazy-rules
               :rules="[
                 (val) =>
-                  !!val ||
-                  `${'กรุณากรอกชื่อรอบการคัดเลือกผู้พิการ/ชื่อประกาศ'}`,
+                  !!val || `${'กรุณากรอกชื่อรอบคัดเลือกคนพิการ/ชื่อประกาศ'}`,
               ]"
             ></q-input>
           </div>
@@ -836,7 +835,7 @@ const addData = async () => {
     .then(async (res) => {
       const data = res.data.result;
       id.value = data;
-      success($q, "บันทึกรอบการสอบผู้พิการสำเร็จ");
+      success($q, "บันทึกรอบการสอบคนพิการสำเร็จ");
       await uploadImgData();
       await uploadDocData();
       clickBack();
@@ -854,7 +853,7 @@ const editData = async (id: string) => {
   await http
     .put(config.API.editDisablePeriod(id), sendData())
     .then(async () => {
-      success($q, "แก้ไขรอบการสอบผู้พิการสำเร็จ");
+      success($q, "แก้ไขรอบการสอบคนพิการสำเร็จ");
       await uploadImgData();
       await uploadDocData();
       clickBack();
diff --git a/src/modules/03_recruiting/views/02_qualify/Manage.vue b/src/modules/03_recruiting/views/02_qualify/Manage.vue
index 3c2d2f50e..6702dd063 100644
--- a/src/modules/03_recruiting/views/02_qualify/Manage.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Manage.vue
@@ -108,7 +108,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "ชื่อรอบการคัดเลือก",
+    label: "ชื่อรอบคัดเลือก",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
diff --git a/src/modules/03_recruiting/views/02_qualify/Period.vue b/src/modules/03_recruiting/views/02_qualify/Period.vue
index c8a16735e..210a8200a 100644
--- a/src/modules/03_recruiting/views/02_qualify/Period.vue
+++ b/src/modules/03_recruiting/views/02_qualify/Period.vue
@@ -1,79 +1,88 @@
 <!-- page:จัดการรอบการสอบ สรรหา -->
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
-    จัดการรอบคัดเลือก
-  </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-    <div>
-      <Table
-        style="max-height: 80vh"
-        :rows="examData"
-        :columns="columns"
-        :filter="filter"
-        :visible-columns="visibleColumns"
-        v-model:inputfilter="filter"
-        v-model:inputvisible="visibleColumns"
-        :pagination="initialPagination"
-        :nornmalData="true"
-        :add="clickAdd"
-        :paging="true"
-        :titleText="''"
-      >
-        <template #columns="props">
-          <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              v-for="col in props.cols"
-              :key="col.name"
-              :props="props"
-              @click="clickEdit(props.row)"
-            >
-              <div v-if="col.name == 'no'" class="table_ellipsis2">
-                {{ props.rowIndex + 1 }}
-              </div>
-              <div v-else-if="col.name == 'yearly'" class="table_ellipsis2">
-                {{ col.value + 543 }}
-              </div>
-              <div
-                v-else-if="
-                  col.name == 'dateRegister' ||
-                  col.name == 'datePayment' ||
-                  col.name == 'dateAnnouncement'
-                "
-                class="table_ellipsis2"
-              >
-                {{ dateThaiRange(col.value) }}
-              </div>
-              <div
-                v-else-if="col.name == 'announcementExam'"
-                class="table_ellipsis2"
-              >
-                {{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
-              </div>
-              <div v-else-if="col.name == 'category'" class="table_ellipsis2">
-                {{ typeCategoryExam(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis2">
-                {{ col.value }}
-              </div>
-            </q-td>
-            <q-td>
-              <q-btn
-                dense
-                size="12px"
-                flat
-                round
-                color="red"
-                @click="clickDelete(props.row.id)"
-                icon="mdi-delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn>
-            </q-td>
-          </q-tr>
-        </template>
-      </Table>
-    </div>
-  </q-card>
+	<div class="toptitle text-dark col-12 row items-center">
+		จัดการรอบคัดเลือก
+	</div>
+	<q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
+		<div>
+			<Table
+				style="max-height: 80vh"
+				:rows="examData"
+				:columns="columns"
+				:filter="filter"
+				:visible-columns="visibleColumns"
+				v-model:inputfilter="filter"
+				v-model:inputvisible="visibleColumns"
+				:pagination="initialPagination"
+				:nornmalData="true"
+				:add="clickAdd"
+				:paging="true"
+				:titleText="''"
+			>
+				<template #columns="props">
+					<q-tr :props="props" class="cursor-pointer">
+						<q-td
+							v-for="col in props.cols"
+							:key="col.name"
+							:props="props"
+							@click="clickEdit(props.row)"
+						>
+							<div
+								v-if="col.name == 'no'"
+								class="table_ellipsis2"
+							>
+								{{ props.rowIndex + 1 }}
+							</div>
+							<div
+								v-else-if="col.name == 'yearly'"
+								class="table_ellipsis2"
+							>
+								{{ col.value + 543 }}
+							</div>
+							<div
+								v-else-if="
+									col.name == 'dateRegister' ||
+									col.name == 'datePayment' ||
+									col.name == 'dateAnnouncement'
+								"
+								class="table_ellipsis2"
+							>
+								{{ dateThaiRange(col.value) }}
+							</div>
+							<div
+								v-else-if="col.name == 'announcementExam'"
+								class="table_ellipsis2"
+							>
+								{{ col.value ? "ข่าวการสอบ" : "ข่าวทั่วไป" }}
+							</div>
+							<div
+								v-else-if="col.name == 'category'"
+								class="table_ellipsis2"
+							>
+								{{ typeCategoryExam(col.value) }}
+							</div>
+							<div v-else class="table_ellipsis2">
+								{{ col.value }}
+							</div>
+						</q-td>
+						<q-td>
+							<q-btn
+								dense
+								size="12px"
+								flat
+								round
+								color="red"
+								@click="clickDelete(props.row.id)"
+								icon="mdi-delete"
+							>
+								<q-tooltip>ลบข้อมูล</q-tooltip>
+							</q-btn>
+						</q-td>
+					</q-tr>
+				</template>
+			</Table>
+		</div>
+	</q-card>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
@@ -81,14 +90,14 @@ import { onMounted, ref } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type {
-  RequestPeriodExam,
-  RequestPosition,
-  RequestPayment,
+	RequestPeriodExam,
+	RequestPosition,
+	RequestPayment,
 } from "@/modules/03_recruiting/interface/request/Period";
 import type {
-  ResponsePeriodExam,
-  ResponsePosition,
-  ResponsePayment,
+	ResponsePeriodExam,
+	ResponsePosition,
+	ResponsePayment,
 } from "@/modules/03_recruiting/interface/response/Period";
 import type { Pagination } from "@/modules/03_recruiting/interface/index/Main";
 import Table from "@/modules/03_recruiting/components/Table.vue";
@@ -105,254 +114,248 @@ const router = useRouter();
 const { date2Thai, success, typeCategoryExam, messageError } = mixin;
 const filter = ref<string>(""); //search data table
 const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
+	rowsPerPage: 0,
 });
 const examData = ref<ResponsePeriodExam[]>([]);
 const visibleColumns = ref<String[]>([
-  "no",
-  "announcementExam",
-  "yearly",
-  "category",
-  "name",
-  "document",
-  "dateAnnouncement",
-  "dateRegister",
-  "datePayment",
-  "fee",
+	"no",
+	"announcementExam",
+	"yearly",
+	"category",
+	"name",
+	"document",
+	"dateAnnouncement",
+	"dateRegister",
+	"datePayment",
+	"fee",
 ]);
 const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "center",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "announcementExam",
-    align: "left",
-    label: "ประเภทการประกาศ",
-    sortable: true,
-    field: "announcementExam",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "yearly",
-    align: "center",
-    label: "ปีงบประมาณ",
-    sortable: true,
-    field: "yearly",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "category",
-    align: "left",
-    label: "สังกัด",
-    sortable: true,
-    field: "category",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "รายการประกาศ",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "fee",
-    align: "right",
-    label: "ค่าธรรมเนียม",
-    sortable: true,
-    field: "fee",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateAnnouncement",
-    align: "left",
-    label: "วันที่สมัคร",
-    sortable: true,
-    field: "dateAnnouncement",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateRegister",
-    align: "left",
-    label: "วันที่ชำระเงิน",
-    sortable: true,
-    field: "dateRegister",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "datePayment",
-    align: "left",
-    label: "วันที่ประกาศ",
-    sortable: true,
-    field: "datePayment",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+	{
+		name: "no",
+		align: "center",
+		label: "ลำดับ",
+		sortable: true,
+		field: "no",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "announcementExam",
+		align: "left",
+		label: "ประเภทการประกาศ",
+		sortable: true,
+		field: "announcementExam",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "yearly",
+		align: "center",
+		label: "ปีงบประมาณ",
+		sortable: true,
+		field: "yearly",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "category",
+		align: "left",
+		label: "สังกัด",
+		sortable: true,
+		field: "category",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "name",
+		align: "left",
+		label: "รายการประกาศ",
+		sortable: true,
+		field: "name",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "fee",
+		align: "right",
+		label: "ค่าธรรมเนียม",
+		sortable: true,
+		field: "fee",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "dateAnnouncement",
+		align: "left",
+		label: "วันที่สมัคร",
+		sortable: true,
+		field: "dateAnnouncement",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "dateRegister",
+		align: "left",
+		label: "วันที่ชำระเงิน",
+		sortable: true,
+		field: "dateRegister",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
+	{
+		name: "datePayment",
+		align: "left",
+		label: "วันที่ประกาศ",
+		sortable: true,
+		field: "datePayment",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+	},
 ]);
 
 onMounted(async () => {
-  loaderPage(false);
-  await fetchData();
+	loaderPage(false);
+	await fetchData();
 });
 
 const fetchData = async () => {
-  loaderPage(true);
-  await http
-    .get(config.API.periodExamType("all"))
-    .then((res) => {
-      const data = res.data.result;
-      let result: ResponsePeriodExam[] = [];
-      if (data.length > 0) {
-        data.map((r: RequestPeriodExam) => {
-          const positionData: ResponsePosition[] = [];
-          r.positionExam.map((r: RequestPosition) => {
-            positionData.push({
-              id: r.id,
-              position: {
-                id: r.positionId,
-                name: r.positionName,
-              },
-              type: {
-                id: r.typeId,
-                name: r.typeName,
-              },
-              highDegree: r.highDegree,
-            });
-          });
-          const bankData: ResponsePayment[] = [];
-          r.bankExam.map((r: RequestPayment) => {
-            bankData.push({
-              id: r.id,
-              accountNumber: r.accountNumber,
-              bankName: r.bankName,
-              accountName: r.accountName,
-            });
-          });
-          result.push({
-            id: r.id,
-            dateAnnounce:
-              r.announcementDate !== null ? new Date(r.announcementDate) : null,
-            announcementExam: r.announcementExam,
-            name: r.name,
-            checkDocument: r.checkDocument,
-            checkDisability: r.checkDisability,
-            round: r.round,
-            yearly: r.year,
-            fee: r.fee,
-            dateAnnouncement:
-              r.announcementStartDate !== null && r.announcementEndDate !== null
-                ? [
-                    new Date(r.announcementStartDate),
-                    new Date(r.announcementEndDate),
-                  ]
-                : null,
-            dateExam: r.examDate !== null ? new Date(r.examDate) : null,
-            dateRegister:
-              r.registerStartDate !== null && r.registerEndDate !== null
-                ? [new Date(r.registerStartDate), new Date(r.registerEndDate)]
-                : null,
-            datePayment:
-              r.paymentStartDate !== null && r.paymentEndDate !== null
-                ? [new Date(r.paymentStartDate), new Date(r.paymentEndDate)]
-                : null,
-            organizationName: {
-              id: r.organizationId,
-              name: r.organizationName,
-            },
-            organizationShortName: {
-              id: r.organizationCodeId,
-              name: r.organizationCodeName,
-            },
-            positionExam: positionData,
-            pay: r.bankExam.length > 0 ? "payment2" : "payment1",
-            bankExam: bankData,
-            editor: r.detail,
-            note: r.note,
-            category: r.category,
-          });
-        });
-      }
-      examData.value = result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      loaderPage(false);
-    });
+	loaderPage(true);
+	await http
+		.get(config.API.periodExamType("all"))
+		.then((res) => {
+			const data = res.data.result;
+			let result: ResponsePeriodExam[] = [];
+			if (data.length > 0) {
+				data.map((r: RequestPeriodExam) => {
+					const positionData: ResponsePosition[] = [];
+					r.positionExam.map((r: RequestPosition) => {
+						positionData.push({
+							id: r.id,
+							position: {
+								id: r.positionId,
+								name: r.positionName,
+							},
+							type: {
+								id: r.typeId,
+								name: r.typeName,
+							},
+							highDegree: r.highDegree,
+						});
+					});
+					const bankData: ResponsePayment[] = [];
+					r.bankExam.map((r: RequestPayment) => {
+						bankData.push({
+							id: r.id,
+							accountNumber: r.accountNumber,
+							bankName: r.bankName,
+							accountName: r.accountName,
+						});
+					});
+					result.push({
+						id: r.id,
+						dateAnnounce:
+							r.announcementDate !== null
+								? new Date(r.announcementDate)
+								: null,
+						announcementExam: r.announcementExam,
+						name: r.name,
+						checkDocument: r.checkDocument,
+						checkDisability: r.checkDisability,
+						round: r.round,
+						yearly: r.year,
+						fee: r.fee,
+						dateAnnouncement:
+							r.announcementStartDate !== null &&
+							r.announcementEndDate !== null
+								? [
+										new Date(r.announcementStartDate),
+										new Date(r.announcementEndDate),
+								  ]
+								: null,
+						dateExam:
+							r.examDate !== null ? new Date(r.examDate) : null,
+						dateRegister:
+							r.registerStartDate !== null &&
+							r.registerEndDate !== null
+								? [
+										new Date(r.registerStartDate),
+										new Date(r.registerEndDate),
+								  ]
+								: null,
+						datePayment:
+							r.paymentStartDate !== null &&
+							r.paymentEndDate !== null
+								? [
+										new Date(r.paymentStartDate),
+										new Date(r.paymentEndDate),
+								  ]
+								: null,
+						organizationName: {
+							id: r.organizationId,
+							name: r.organizationName,
+						},
+						organizationShortName: {
+							id: r.organizationCodeId,
+							name: r.organizationCodeName,
+						},
+						positionExam: positionData,
+						pay: r.bankExam.length > 0 ? "payment2" : "payment1",
+						bankExam: bankData,
+						editor: r.detail,
+						note: r.note,
+						category: r.category,
+					});
+				});
+			}
+			examData.value = result;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
 };
 
 const clickEdit = (col: ResponsePeriodExam) => {
-  router.push(`/qualify/period/${col.id}`);
+	router.push(`/qualify/period/${col.id}`);
 };
 
 const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {
-      await deleteData(id);
-    })
-    .onCancel(() => {})
-    .onDismiss(() => {});
+	$q.dialog({
+		title: "ยืนยันการลบข้อมูล",
+		message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
+		cancel: {
+			flat: true,
+			color: "negative",
+		},
+		persistent: true,
+	})
+		.onOk(async () => {
+			await deleteData(id);
+		})
+		.onCancel(() => {})
+		.onDismiss(() => {});
 };
 
 const clickAdd = () => {
-  router.push({ name: "qualifyPeriodAdd" });
+	router.push({ name: "qualifyPeriodAdd" });
 };
 
 const deleteData = async (id: string) => {
-  loaderPage(true);
-  await http
-    .delete(config.API.periodExamId(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      loaderPage(false);
-      await fetchData();
-    });
+	loaderPage(true);
+	await http
+		.delete(config.API.periodExamId(id))
+		.then((res) => {
+			success($q, "ลบข้อมูลสำเร็จ");
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			loaderPage(false);
+			await fetchData();
+		});
 };
 
 /**
@@ -360,13 +363,13 @@ const deleteData = async (id: string) => {
  * @param val ช่วงวันที่
  */
 const dateThaiRange = (val: [Date, Date]) => {
-  if (val === null) {
-    return "";
-  } else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
-    return `${date2Thai(val[0], true)}`;
-  } else {
-    return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
-  }
+	if (val === null) {
+		return "";
+	} else if (date2Thai(val[0], true) === date2Thai(val[1], true)) {
+		return `${date2Thai(val[0], true)}`;
+	} else {
+		return `${date2Thai(val[0], true)} - ${date2Thai(val[1], true)}`;
+	}
 };
 </script>
 
diff --git a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
index 0112f7120..83381a653 100644
--- a/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/02_qualify/PeriodAdd.vue
@@ -11,7 +11,7 @@
       class="q-mr-sm"
       @click="clickBack"
     />
-    {{ edit ? `แก้ไข${nameRaw}` : "เพิ่มระยะเวลาการคัดเลือก" }}
+    {{ edit ? `แก้ไขรอบคัดเลือก` : "เพิ่มรอบคัดเลือก" }}
     {{
       edit && announcementExam
         ? `ครั้งที่ ${roundRaw}/${yearlyRaw == null ? "" : yearlyRaw + 543}`
@@ -21,27 +21,26 @@
   <q-card flat bordered class="col-12 q-my-sm q-pt-sm">
     <q-form ref="myForm">
       <q-card-section class="q-pa-md">
-        <div class="col-xs-12 col-sm-8 items-top q-pb-md" v-if="!edit">
+        <div class="col-xs-12 col-sm-8 items-top q-pb-md">
           <q-toggle
             v-model="announcementExam"
             :false-value="true"
             :true-value="false"
             color="primary"
-            dense
-            class="text-weight-medium text-dark"
             label="ประกาศข่าวทั่วไป"
+            v-if="!edit"
           />
         </div>
         <div class="col-12 row items-top q-col-gutter-x-sm">
-          <div class="col-xs-12 col-sm-6 col-sm-8">
+          <div class="col-xs-12 col-sm-6 col-sm-5">
             <q-input
               outlined
               v-model="name"
-              label="ชื่อรอบการคัดเลือก/ชื่อประกาศ"
+              label="ชื่อรอบคัดเลือก/ชื่อประกาศ"
               dense
               lazy-rules
               :rules="[
-                (val) => !!val || `${'กรุณากรอกชื่อรอบการคัดเลือก/ชื่อประกาศ'}`,
+                (val) => !!val || `${'กรุณากรอกชื่อรอบคัดเลือก/ชื่อประกาศ'}`,
               ]"
             ></q-input>
           </div>
@@ -70,7 +69,7 @@
               ]"
             ></q-input>
           </div>
-          <div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-4 col-md-1" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="yearly"
@@ -105,7 +104,45 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-4">
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateExam"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker q-mb-md"
+                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
+                  :label="`${'วันที่สอบ'}`"
+                  clearable
+                  @clear="clearDateExam"
+                >
+                  <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-sm-3 col-md-3">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateAnnouncement"
@@ -126,7 +163,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker "
+                  class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateAnnouncement)"
                   :label="`${'วันที่ประกาศ'}`"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ประกาศ'}`]"
@@ -143,7 +180,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-4" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateRegister"
@@ -165,7 +202,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker "
+                  class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(dateRegister)"
                   :label="`${'วันที่สมัคร'}`"
                   clearable
@@ -183,7 +220,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-4" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="datePayment"
@@ -204,7 +241,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker "
+                  class="full-width datepicker q-mb-md"
                   :model-value="dateThaiRange(datePayment)"
                   :label="`${'วันที่ชำระเงิน'}`"
                   clearable
@@ -222,7 +259,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
+          <div class="col-xs-12 col-sm-3 col-md-3" v-if="announcementExam">
             <datepicker
               menu-class-name="modalfix"
               v-model="dateAnnounce"
@@ -242,7 +279,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker "
+                  class="full-width datepicker q-mb-md"
                   :model-value="
                     dateAnnounce != null ? date2Thai(dateAnnounce) : null
                   "
@@ -262,45 +299,7 @@
               </template>
             </datepicker>
           </div>
-          <div class="col-xs-12 col-sm-2 col-md-2" v-if="announcementExam">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="dateExam"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  outlined
-                  dense
-                  class="full-width datepicker "
-                  :model-value="dateExam != null ? date2Thai(dateExam) : null"
-                  :label="`${'วันที่สอบ'}`"
-                  clearable
-                  @clear="clearDateExam"
-                >
-                  <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-sm-6 col-md-6">
+          <!-- <div class="col-xs-12 col-sm-3 col-md-3">
             <selector
               outlined
               v-model="category"
@@ -315,42 +314,44 @@
               lazy-rules
               :rules="[(val:any) => !!val || `${'กรุณาเลือกสังกัด'}`]"
             ></selector>
-          </div>
-          <div class="col-xs-12 col-sm-4 col-md-2" v-if="announcementExam">
-            <selector
-              outlined
-              v-model="organizationShortName"
-              :options="governmentCodeOption"
-              label="รหัสส่วนราชการ"
-              clearable
-              option-value="id"
-              option-label="name"
-              dense
-              lazy-rules
-              :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
-              @update:model-value="(value:any) => selectGovernmentCode(value)"
-            ></selector>
-          </div>
-          <div class="col-xs-12 col-sm-6 col-md-6" v-if="announcementExam">
-            <selector
-              outlined
-              v-model="organizationName"
-              :options="organizationNameOptions"
-              label="หน่วยงาน"
-              clearable
-              option-value="id"
-              option-label="name"
-              dense
-              lazy-rules
-              :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
-              @update:model-value="(value:any) => selectOrganization(value)"
-            ></selector>
-          </div>
-          <div class="col-12 q-mb-sm">
-            <q-separator size="5px" color="grey-2" />
-          </div>
-          <div class="col-12 row" v-if="announcementExam">
-            <q-form ref="myFormPosition" class="col-12">
+          </div> -->
+          <div class="col-12" v-if="announcementExam">
+            <div class="row q-col-gutter-x-sm">
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <selector
+                  outlined
+                  v-model="organizationShortName"
+                  :options="governmentCodeOption"
+                  label="รหัสส่วนราชการ"
+                  clearable
+                  option-value="id"
+                  option-label="name"
+                  dense
+                  lazy-rules
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกรหัสส่วนราชการ'}`]"
+                  @update:model-value="(value:any) => selectGovernmentCode(value)"
+                ></selector>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6">
+                <selector
+                  outlined
+                  v-model="organizationName"
+                  :options="organizationNameOptions"
+                  label="หน่วยงาน"
+                  clearable
+                  option-value="id"
+                  option-label="name"
+                  dense
+                  lazy-rules
+                  :rules="[(val:any) => !!val || `${'กรุณาเลือกหน่วยงาน'}`]"
+                  @update:model-value="(value:any) => selectOrganization(value)"
+                ></selector>
+              </div>
+            </div>
+            <div class="col-12 q-mb-sm">
+              <q-separator size="5px" color="grey-2" />
+            </div>
+            <q-form ref="myFormPosition">
               <ProfileTable
                 :rows="rowsPosition"
                 :columns="columnsPosition"
@@ -472,7 +473,7 @@
             <div class="text-bold text-subtitle2 q-pb-md">
               เลือกวีธีการชำระเงิน
             </div>
-            <div class="row col-12 q-gutter-y-md ">
+            <div class="row col-12 q-gutter-y-md q-mb-md">
               <q-list dense bordered class="col-12 rounded-borders">
                 <q-item tag="label" v-ripple class="q-pa-md">
                   <q-radio
@@ -1415,7 +1416,7 @@ const addData = async () => {
     .then(async (res) => {
       const data = res.data.result;
       id.value = data;
-      success($q, "บันทึกรอบการคัดเลือกสำเร็จ");
+      success($q, "บันทึกรอบคัดเลือกสำเร็จ");
       await uploadImgData();
       await uploadDocData();
       await clickBack();
@@ -1433,7 +1434,7 @@ const editData = async (id: string) => {
   await http
     .put(config.API.periodExamId(id), sendData())
     .then(async (res) => {
-      success($q, "แก้ไขรอบการคัดเลือกสำเร็จ");
+      success($q, "แก้ไขรอบคัดเลือกสำเร็จ");
       await uploadImgData();
       await uploadDocData();
       await clickBack();
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 51f2aadb4..74b8776c2 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -34,13 +34,13 @@
   <q-slide-transition>
     <q-card class="row col-12 q-mb-sm" v-show="visible">
       <div class="col-12 row">
-        <div class="q-pb-md q-pt-sm row col-12 no-wrap">
+        <div class="q-py-md row col-12 no-wrap">
           <!-- การ์ดแสดงจำนวนข้อมูล -->
-          <div class="col-12 row q-px-md ">
-            <div class="row items-center col-12 q-gutter-sm q-pb-sm">
-              <div class="text-weight-medium">สรุปจำนวนผู้สมัครคัดเลือก</div>
+          <div class="col-12 row">
+            <div class="text-grey-7 row text-weight-medium col-12 q-pl-md">
+              สรุปจำนวนผู้สมัครคัดเลือก
               <datepicker
-                class="col-xs-12 col-sm-5 col-md-4"
+                class="q-pl-sm"
                 v-model="dateFilter"
                 :locale="'th'"
                 autoApply
@@ -58,9 +58,9 @@
                   <q-input
                     class="full-width inputgreen cursor-pointer"
                     hide-bottom-space
+                    outlined
                     dense
-                    prefix="วันที่"
-                    borderless
+                    label="วันที่"
                     lazy-rules
                     :model-value="dateThaiRange(dateFilter)"
                   >
@@ -75,10 +75,8 @@
                   </q-input>
                 </template>
               </datepicker>
-              <q-space />
               <q-btn
                 size="md"
-                dense
                 icon="mdi-download"
                 round
                 flat
@@ -112,7 +110,7 @@
                 <q-tooltip>ดาวน์โหลดรายชื่อผู้สอบแข่งขันได้</q-tooltip>
               </q-btn>
             </div>
-            <div class="row col-12 q-col-gutter-md">
+            <div class="row col-12 q-col-gutter-md fit q-pa-md">
               <div
                 style="width: 25%"
                 v-for="(num, index) in dataNum"
@@ -253,7 +251,7 @@
     </TableCandidate>
   </q-card>
   <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 550px">
+    <q-card style="min-width: 600px">
       <q-card-section class="row items-center q-py-sm">
         <div class="text-bold">บัตรประจำตัวผู้สอบ</div>
         <q-space />
diff --git a/src/modules/03_recruiting/views/03_editor/index.vue b/src/modules/03_recruiting/views/03_editor/index.vue
index 0e91abb4e..8f372fe5e 100644
--- a/src/modules/03_recruiting/views/03_editor/index.vue
+++ b/src/modules/03_recruiting/views/03_editor/index.vue
@@ -455,8 +455,8 @@
             lazy-rules
             :readonly="!editvisible"
             :borderless="!editvisible"
-            :rules="[(val) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-            label="ชื่อ"
+            :rules="[(val) => !!val || `${'กรุณากรอก ฃื่อ'}`]"
+            label="ฃื่อ"
           />
           <q-input
             v-model="inputLink"
@@ -493,55 +493,60 @@
         <q-space />
         <q-btn
           v-if="!editvisible"
-          unelevated
-          label="ลบข้อมูล"
+          flat
+          round
           :disabled="editvisible"
           :color="editvisible ? 'grey-7' : 'red'"
           @click="saveDelete()"
-        ><!--  icon="mdi-delete-outline"
-          <q-tooltip>ลบข้อมูล</q-tooltip> -->
+          icon="mdi-delete-outline"
+        >
+          <q-tooltip>ลบข้อมูล</q-tooltip>
         </q-btn>
         <q-btn
           v-if="!editvisible"
-          label="แก้ไขข้อมูล"
-          outline
+          flat
+          round
           :disabled="editvisible"
           :color="editvisible ? 'grey-7' : 'primary'"
           @click="editDialog()"
-        ><!-- icon="mdi-pencil-outline"
-          <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
+          icon="mdi-pencil-outline"
+        >
+          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
         </q-btn>
         <div v-else>
           <q-btn
             flat
-            label="ยกเลิกแก้ไข"
+            round
             :disabled="!editvisible"
             :outline="!editvisible"
             :color="!editvisible ? 'grey-7' : 'red'"
             @click="editDialog()"
-          ><!-- icon="mdi-undo"
-            <q-tooltip>ยกเลิก</q-tooltip> -->
+            icon="mdi-undo"
+          >
+            <q-tooltip>ยกเลิก</q-tooltip>
           </q-btn>
           <q-btn
-            unelevated
-            label="บันทึก"
+            flat
+            round
             :disabled="!editvisible"
             :color="!editvisible ? 'grey-7' : 'public'"
             @click="saveEdit"
-          ><!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
+            icon="mdi-content-save-outline"
+          >
+            <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </div>
       </q-card-actions>
       <q-card-actions class="text-primary q-py-sm" v-else>
         <q-space />
         <q-btn
-          unelevated
-          label="บันทึก"
+          flat
+          round
           color="public"
           @click="saveAdd"
-        ><!-- icon="mdi-content-save-outline"
-          <q-tooltip>บันทึก</q-tooltip> -->
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </q-card-actions>
     </q-card>
diff --git a/src/modules/04_registry/components/Assessment.vue b/src/modules/04_registry/components/Assessment.vue
index 5f171a8d6..c93364503 100644
--- a/src/modules/04_registry/components/Assessment.vue
+++ b/src/modules/04_registry/components/Assessment.vue
@@ -366,9 +366,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขผลก
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -597,36 +595,34 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileAssessmentId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            name: e.name,
-            point1Total: e.point1Total,
-            point1: e.point1,
-            point2Total: e.point2Total,
-            point2: e.point2,
-            pointSumTotal: e.pointSumTotal,
-            pointSum: e.pointSum,
-            date: new Date(e.date),
-            createdAt: new Date(e.createdAt),
-            createdFullName: e.createdFullName,
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileAssessmentId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          name: e.name,
+          point1Total: e.point1Total,
+          point1: e.point1,
+          point2Total: e.point2Total,
+          point2: e.point2,
+          pointSumTotal: e.pointSumTotal,
+          pointSum: e.pointSum,
+          date: new Date(e.date),
+          createdAt: new Date(e.createdAt),
+          createdFullName: e.createdFullName,
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -716,31 +712,29 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileAssessmentId(profileId.value), {
-        id: id.value,
-        name: name.value,
-        point1Total: point1Total.value,
-        point1: point1.value,
-        point2Total: point2Total.value,
-        point2: point2.value,
-        pointSumTotal: pointSumTotal.value,
-        pointSum: pointSum.value,
-        date: dateToISO(date.value),
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileAssessmentId(profileId.value), {
+      id: id.value,
+      name: name.value,
+      point1Total: point1Total.value,
+      point1: point1.value,
+      point2Total: point2Total.value,
+      point2: point2.value,
+      pointSumTotal: pointSumTotal.value,
+      pointSum: pointSum.value,
+      date: dateToISO(date.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
diff --git a/src/modules/04_registry/components/Coin.vue b/src/modules/04_registry/components/Coin.vue
index b30a37c71..122508ea6 100644
--- a/src/modules/04_registry/components/Coin.vue
+++ b/src/modules/04_registry/components/Coin.vue
@@ -25,8 +25,11 @@
               @click="selectData(props)"
               class="cursor-pointer"
             >
-              <div v-if="col.name == 'issueDate'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
+              <div
+                v-if="col.name == 'issueDate' || col.name == 'refCommandDate'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
               </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
@@ -118,9 +121,9 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="issuer"
-                :rules="[(val) => !!val || `${'กรุณากรอกหน่วยงานที่ออก'}`]"
+                :rules="[(val) => !!val || `${'กรุณากรอกผู้มีอำนาจลงนาม'}`]"
                 hide-bottom-space
-                :label="`${'หน่วยงานที่ออก'}`"
+                :label="`${'ผู้มีอำนาจลงนาม'}`"
                 @update:modelValue="clickEditRow"
               />
             </div>
@@ -140,6 +143,72 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -173,10 +242,14 @@
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div
-            v-if="col.name == 'issueDate' || col.name == 'createdAt'"
+            v-if="
+              col.name == 'issueDate' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
             class="table_ellipsis"
           >
-            {{ date2Thai(col.value) }}
+            {{ col.value == null ? null : date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
@@ -230,6 +303,8 @@ const id = ref<string>("");
 const issuer = ref<string>();
 const detail = ref<string>();
 const issueDate = ref<Date>(new Date());
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false); //modal add detail
@@ -244,14 +319,18 @@ const tittleHistory = ref<string>("ประวัติแก้ไขประ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.coined.columns.length == 0
-  ? (visibleColumns.value = ["issuer", "detail", "issueDate"])
+  ? (visibleColumns.value = [
+      "issuer",
+      "detail",
+      "issueDate",
+      "refCommandNo",
+      "refCommandDate",
+    ])
   : (visibleColumns.value = profileData.coined.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -268,7 +347,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "issuer",
     align: "left",
-    label: "หน่วยงานที่ออก",
+    label: "ผู้มีอำนาจลงนาม",
     sortable: true,
     field: "issuer",
     headerStyle: "font-size: 14px",
@@ -287,6 +366,28 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -303,7 +404,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "issuer",
     align: "left",
-    label: "หน่วยงานที่ออก",
+    label: "ผู้มีอำนาจลงนาม",
     sortable: true,
     field: "issuer",
     headerStyle: "font-size: 14px",
@@ -322,6 +423,28 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "createdFullName",
     align: "left",
@@ -349,6 +472,8 @@ const visibleColumnsHistory = ref<String[]>([
   "issuer",
   "detail",
   "issueDate",
+  "refCommandNo",
+  "refCommandDate",
   "createdFullName",
   "createdAt",
 ]);
@@ -362,31 +487,32 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileHonorId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            issuer: e.issuer,
-            detail: e.detail,
-            issueDate: new Date(e.issueDate),
-            createdAt: new Date(e.createdAt),
-            createdFullName: e.createdFullName,
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileHonorId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          issuer: e.issuer,
+          detail: e.detail,
+          issueDate: new Date(e.issueDate),
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdAt: new Date(e.createdAt),
+          createdFullName: e.createdFullName,
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -417,6 +543,8 @@ const getData = () => {
   issuer.value = row.issuer;
   detail.value = row.detail;
   issueDate.value = row.issueDate;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
   id.value = row.id;
 };
 
@@ -471,26 +599,27 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileHonorId(profileId.value), {
-        id: id.value,
-        issuer: issuer.value,
-        detail: detail.value,
-        issueDate: dateToISO(issueDate.value),
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileHonorId(profileId.value), {
+      id: id.value,
+      issuer: issuer.value,
+      detail: detail.value,
+      issueDate: dateToISO(issueDate.value),
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
@@ -504,6 +633,9 @@ const editData = async () => {
       issuer: issuer.value,
       detail: detail.value,
       issueDate: dateToISO(issueDate.value),
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -584,6 +716,8 @@ const selectData = async (props: DataProps) => {
   issuer.value = props.row.issuer;
   detail.value = props.row.detail;
   issueDate.value = props.row.issueDate;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
   id.value = props.row.id;
   await checkRowPage();
 };
@@ -598,6 +732,8 @@ const addData = () => {
   issuer.value = "";
   detail.value = "";
   issueDate.value = new Date();
+  refCommandNo.value = "";
+  refCommandDate.value = null;
 };
 
 /**
@@ -651,6 +787,9 @@ const clickHistory = async (row: RequestItemsObject) => {
           issuer: e.issuer,
           detail: e.detail,
           issueDate: new Date(e.issueDate),
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
           createdAt: new Date(e.createdAt),
           createdFullName: e.createdFullName,
         });
@@ -686,6 +825,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+const resetFilter = () => {};
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/DialogFooter.vue b/src/modules/04_registry/components/DialogFooter.vue
index c6f37a46e..c7b6623b4 100644
--- a/src/modules/04_registry/components/DialogFooter.vue
+++ b/src/modules/04_registry/components/DialogFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-card-actions class="text-primary q-py-sm q-gutter-sm">
+  <q-card-actions class="text-primary q-py-sm">
     <q-btn
       flat
       round
@@ -19,48 +19,51 @@
       :color="!next ? 'grey-7' : 'public'"
     />
     <q-space />
-    
+    <q-btn
+      v-if="modalEdit == true"
+      flat
+      round
+      color="red"
+      @click="clickDelete"
+      icon="mdi-delete"
+    >
+      <q-tooltip>ลบข้อมูล</q-tooltip>
+    </q-btn>
     <q-btn
       v-if="!editvisible"
-      outline
+      flat
+      round
       :disabled="editvisible"
       :color="editvisible ? 'grey-7' : 'primary'"
       @click="edit"
-      label="แก้ไขข้อมูล"
-    ><!-- icon="mdi-pencil-outline"
-      <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
-    </q-btn>
-    <q-btn
-      v-show="editvisible"
-      flat
-      :disabled="!editvisible"
-      :outline="!editvisible"
-      :color="!editvisible ? 'grey-7' : 'red'"
-      @click="cancel()"
-      label="ยกเลิกแก้ไข"
-      v-if="modalEdit == true"
-    > <!-- icon="mdi-undo"
-      <q-tooltip>ยกเลิก</q-tooltip> -->
-    </q-btn>
-    <q-btn
-      v-if="modalEdit == true"
-      unelevated
-      color="red"
-      @click="clickDelete"
-      label="ลบข้อมูล"
-    ><!-- icon="mdi-delete"
-      <q-tooltip>ลบข้อมูล</q-tooltip> -->
-    </q-btn>
-    <q-btn
-      v-if="editvisible"
-      unelevated
-      label="บันทึก"
-      :disabled="!editvisible"
-      :color="!editvisible ? 'grey-7' : 'public'"
-      @click="checkSave"
-    ><!-- icon="mdi-content-save-outline"
-      <q-tooltip>บันทึก</q-tooltip> -->
+      icon="mdi-pencil-outline"
+    >
+      <q-tooltip>แก้ไขข้อมูล</q-tooltip>
     </q-btn>
+    <div v-else>
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :outline="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'red'"
+        @click="cancel()"
+        icon="mdi-undo"
+        v-if="modalEdit == true"
+      >
+        <q-tooltip>ยกเลิก</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        :disabled="!editvisible"
+        :color="!editvisible ? 'grey-7' : 'public'"
+        @click="checkSave"
+        icon="mdi-content-save-outline"
+      >
+        <q-tooltip>บันทึก</q-tooltip>
+      </q-btn>
+    </div>
   </q-card-actions>
 </template>
 <script setup lang="ts">
diff --git a/src/modules/04_registry/components/Discipline.vue b/src/modules/04_registry/components/Discipline.vue
index 5571ad3fa..2299c82ab 100644
--- a/src/modules/04_registry/components/Discipline.vue
+++ b/src/modules/04_registry/components/Discipline.vue
@@ -27,7 +27,7 @@
                 v-if="col.name == 'refCommandDate' || col.name == 'date'"
                 class="table_ellipsis"
               >
-                {{ date2Thai(col.value) }}
+                {{ col.value == null ? null : date2Thai(col.value) }}
               </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
@@ -126,9 +126,9 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 v-model="level"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับความผิด'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือกระดับการลงโทษทางวินัย'}`]"
                 hide-bottom-space
-                :label="`${'ระดับความผิด'}`"
+                :label="`${'ระดับการลงโทษทางวินัย'}`"
                 @update:modelValue="clickEditRow"
                 emit-value
                 map-options
@@ -150,16 +150,35 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="refCommandNo"
-                :rules="[
-                  (val:string) =>
-                    !!val || `${'กรุณากรอกเอกสารอ้างอิง (เลขที่คำสั่ง)'}`,
-                ]"
+                v-model="unStigma"
                 hide-bottom-space
-                :label="`${'เอกสารอ้างอิง (เลขที่คำสั่ง)'}`"
+                :label="`${'ล้างมลทิน'}`"
                 @update:modelValue="clickEditRow"
               />
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
@@ -182,11 +201,9 @@
                     dense
                     lazy-rules
                     :borderless="!edit"
-                    :model-value="date2Thai(refCommandDate)"
-                    :rules="[
-                      (val:string) =>
-                        !!val || `${'กรุณาเลือกเอกสารอ้างอิง (ลงวันที่)'}`,
-                    ]"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
                     hide-bottom-space
                     :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
                   >
@@ -246,7 +263,7 @@
             "
             class="table_ellipsis"
           >
-            {{ date2Thai(col.value) }}
+            {{ col.value == null ? null : date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
@@ -346,8 +363,9 @@ const OpsFilter = ref<DisciplineOps>({
   ],
 });
 const detail = ref<string>();
+const unStigma = ref<string>();
 const refCommandNo = ref<string>();
-const refCommandDate = ref<Date>(new Date());
+const refCommandDate = ref<Date | null>(new Date());
 const date = ref<Date>(new Date());
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
@@ -363,9 +381,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขวิน
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -373,6 +389,7 @@ profileData.discipline.columns.length == 0
   ? (visibleColumns.value = [
       "level",
       "detail",
+      "unStigma",
       "refCommandNo",
       "refCommandDate",
       "date",
@@ -404,7 +421,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "level",
     align: "left",
-    label: "ระดับความผิด",
+    label: "ระดับการลงโทษทางวินัย",
     sortable: true,
     field: "level",
     headerStyle: "font-size: 14px",
@@ -412,10 +429,21 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "refCommandNo",
     align: "left",
-    label: "เอกสารอ้างอิง (เลขที่คำสั่ง)",
+    label: "เลขที่คำสั่ง",
     sortable: true,
     field: "refCommandNo",
     headerStyle: "font-size: 14px",
@@ -461,7 +489,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "level",
     align: "left",
-    label: "ระดับความผิด",
+    label: "ระดับการลงโทษทางวินัย",
     sortable: true,
     field: "level",
     headerStyle: "font-size: 14px",
@@ -469,10 +497,21 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "unStigma",
+    align: "left",
+    label: "ล้างมลทิน",
+    sortable: true,
+    field: "unStigma",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "refCommandNo",
     align: "left",
-    label: "เอกสารอ้างอิง (เลขที่คำสั่ง)",
+    label: "เลขที่คำสั่ง",
     sortable: true,
     field: "refCommandNo",
     headerStyle: "font-size: 14px",
@@ -517,6 +556,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
 const visibleColumnsHistory = ref<String[]>([
   "level",
   "detail",
+  "unStigma",
   "refCommandNo",
   "refCommandDate",
   "date",
@@ -547,33 +587,33 @@ const filterSelector = (val: string, update: Function, refData: string) => {
 };
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileDisId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            level: e.level,
-            detail: e.detail,
-            refCommandNo: e.refCommandNo,
-            refCommandDate: new Date(e.refCommandDate),
-            date: new Date(e.date),
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileDisId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          level: e.level,
+          detail: e.detail,
+          unStigma: e.unStigma,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          date: new Date(e.date),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -603,6 +643,7 @@ const getData = () => {
   const row = rows.value[rowIndex.value];
   level.value = row.level;
   detail.value = row.detail;
+  unStigma.value = row.unStigma;
   refCommandNo.value = row.refCommandNo;
   refCommandDate.value = row.refCommandDate;
   date.value = row.date;
@@ -660,28 +701,28 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileDisId(profileId.value), {
-        id: id.value,
-        level: level.value,
-        detail: detail.value,
-        refCommandNo: refCommandNo.value,
-        refCommandDate: dateToISO(refCommandDate.value),
-        date: dateToISO(date.value),
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileDisId(profileId.value), {
+      id: id.value,
+      level: level.value,
+      detail: detail.value,
+      unStigma: unStigma.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+      date: dateToISO(date.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
@@ -694,8 +735,10 @@ const editData = async () => {
       id: id.value,
       level: level.value,
       detail: detail.value,
+      unStigma: unStigma.value,
       refCommandNo: refCommandNo.value,
-      refCommandDate: dateToISO(refCommandDate.value),
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
       date: dateToISO(date.value),
     })
     .then((res) => {
@@ -776,6 +819,7 @@ const selectData = async (props: DataProps) => {
   rowIndex.value = props.rowIndex;
   level.value = props.row.level;
   detail.value = props.row.detail;
+  unStigma.value = props.row.unStigma;
   refCommandNo.value = props.row.refCommandNo;
   refCommandDate.value = props.row.refCommandDate;
   date.value = props.row.date;
@@ -792,8 +836,9 @@ const addData = () => {
   edit.value = true;
   level.value = "";
   detail.value = "";
+  unStigma.value = "";
   refCommandNo.value = "";
-  refCommandDate.value = new Date();
+  refCommandDate.value = null;
   date.value = new Date();
 };
 
@@ -843,8 +888,10 @@ const clickHistory = async (row: RequestItemsObject) => {
           id: e.id,
           level: e.level,
           detail: e.detail,
+          unStigma: e.unStigma,
           refCommandNo: e.refCommandNo,
-          refCommandDate: new Date(e.refCommandDate),
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
           date: new Date(e.date),
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
@@ -881,6 +928,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+const resetFilter = () => {};
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/Document.vue b/src/modules/04_registry/components/Document.vue
index 0a9e74270..f539f31d9 100644
--- a/src/modules/04_registry/components/Document.vue
+++ b/src/modules/04_registry/components/Document.vue
@@ -8,7 +8,6 @@
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :save="uploadData"
-      :addEmployee="statusAdd()"
     />
     <div class="row col-12 q-pt-sm">
       <q-card bordered flat class="full-width">
@@ -154,10 +153,6 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -167,9 +162,7 @@ const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const route = useRoute();
 const { success, messageError } = mixin;
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const edit = ref<boolean>(false);
 const uploader = ref<any>();
 const files = ref<any>([]);
@@ -178,37 +171,22 @@ const name = ref<string>("");
 
 onMounted(async () => {
   await getData();
-  defaultAdd();
 });
 
 const getData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profilePaperId(profileId.value))
-      .then((res) => {
-        const data = res.data.result;
-        files.value = data;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
-      });
-  }
-};
-
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  if (props.statusAdd) {
-    edit.value = props.statusAdd;
-    name.value = "";
-    if (uploader.value) {
-      uploader.value.reset();
-    }
-  }
+  loaderPage(true);
+  await http
+    .get(config.API.profilePaperId(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      files.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const deleteData = async (id: string) => {
@@ -228,33 +206,31 @@ const deleteData = async (id: string) => {
 
 const uploadData = async () => {
   if (file.value.length > 0) {
-    if (profileId.value !== "") {
-      const blob = file.value.slice(0, file.value[0].size);
-      const newFile = new File(blob, name.value, {
-        type: file.value[0].type,
+    const blob = file.value.slice(0, file.value[0].size);
+    const newFile = new File(blob, name.value, {
+      type: file.value[0].type,
+    });
+    const formData = new FormData();
+    formData.append("avatar", newFile);
+    formData.append("moss", "newFile");
+    console.log(formData);
+    loaderPage(true);
+    await http
+      .post(config.API.profilePaperId(profileId.value), formData)
+      .then((res) => {
+        const data = res.data.result;
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        uploader.value.reset();
+        name.value = "";
+        edit.value = false;
+        emit("update:statusEdit", false);
+        await getData();
       });
-      const formData = new FormData();
-      formData.append("avatar", newFile);
-      formData.append("moss", "newFile");
-      console.log(formData);
-      loaderPage(true);
-      await http
-        .post(config.API.profilePaperId(profileId.value), formData)
-        .then((res) => {
-          const data = res.data.result;
-          success($q, "บันทึกข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          uploader.value.reset();
-          name.value = "";
-          edit.value = false;
-          emit("update:statusEdit", false);
-          await getData();
-        });
-    }
   } else {
     // modalError(
     //   $q,
diff --git a/src/modules/04_registry/components/Education.vue b/src/modules/04_registry/components/Education.vue
index 83e947985..ed081db6f 100644
--- a/src/modules/04_registry/components/Education.vue
+++ b/src/modules/04_registry/components/Education.vue
@@ -23,15 +23,26 @@
               @click="selectData(props)"
               class="cursor-pointer"
             >
-              <div
-                v-if="col.name == 'startDate' || col.name == 'endDate'"
-                class="table_ellipsis"
-              >
-                {{ col.value + 543 }}
+              <div v-if="col.name == 'startDate'" class="table_ellipsis">
+                {{
+                  props.row.isDate == "true"
+                    ? date2Thai(props.row.startDate2)
+                    : col.value + 543
+                }}
+              </div>
+              <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
+                {{
+                  props.row.isDate == "true"
+                    ? date2Thai(props.row.endDate2)
+                    : col.value + 543
+                }}
               </div>
               <div v-else-if="col.name == 'finishDate'" class="table_ellipsis">
                 {{ date2Thai(col.value) }}
               </div>
+              <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
+                {{ col.value ? "ใช่" : "ไม่ใช่" }}
+              </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
               </div>
@@ -102,94 +113,219 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="startDate"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
+            <div class="col-12">
+              <q-card flat bordered class="q-px-sm q-pb-sm borderCard">
+                <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="false"
+                    label="ปี"
                     dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="startDate + 543"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกปีตั้งแต่'}`]"
-                    hide-bottom-space
-                    :label="`${'ตั้งแต่'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="endDate"
-                :locale="'th'"
-                autoApply
-                year-picker
-                :enableTimePicker="false"
-                :min-date="minDate"
-                :readonly="!edit"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
+                    :disable="!edit"
+                  />
+                  <q-radio
+                    v-model="isDate"
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    val="true"
+                    label="วัน/เดือน/ปี"
                     dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="endDate + 543"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกปีถึง'}`]"
-                    hide-bottom-space
-                    :label="`${'ถึง'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
+                    :disable="!edit"
+                  />
+                </div>
+                <div class="col-12 row q-col-gutter-sm">
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="startDate + 543"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกปีที่เริ่มต้นศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่เริ่มต้นศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="startDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(startDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวัน เดือน ปี ที่เริ่มต้นศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'วัน เดือน ปี ที่เริ่มต้นศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      v-if="isDate === 'false'"
+                      menu-class-name="modalfix"
+                      v-model="endDate"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      :min-date="minDate"
+                      :readonly="!edit"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="endDate + 543"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่จบการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                    <datepicker
+                      v-else
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="endDate2"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(endDate2)"
+                          :rules="[
+                            (val) =>
+                              !!val ||
+                              `${'กรุณาเลือกวัน เดือน ปี ที่จบการศึกษา'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'วัน เดือน ปี ที่จบการศึกษา'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </q-card>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
@@ -244,8 +380,7 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                v-model="positionPathId"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือกเป็นวุฒิการศึกษาในตำแหน่ง'}`]"
+                v-model="isEducation"
                 hide-bottom-space
                 :label="`${'เป็นวุฒิการศึกษาในตำแหน่ง'}`"
                 @update:modelValue="clickEditRow"
@@ -411,11 +546,19 @@
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="col.name == 'startDate' || col.name == 'endDate'"
-            class="table_ellipsis"
-          >
-            {{ col.value + 543 }}
+          <div v-if="col.name == 'startDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.startDate2)
+                : col.value + 543
+            }}
+          </div>
+          <div v-else-if="col.name == 'endDate'" class="table_ellipsis">
+            {{
+              props.row.isDate == true
+                ? date2Thai(props.row.endDate2)
+                : col.value + 543
+            }}
           </div>
           <div
             v-else-if="col.name == 'finishDate' || col.name == 'createdAt'"
@@ -423,6 +566,9 @@
           >
             {{ date2Thai(col.value) }}
           </div>
+          <div v-else-if="col.name == 'isEducation'" class="table_ellipsis">
+            {{ col.value ? "ใช่" : "ไม่ใช่" }}
+          </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
           </div>
@@ -478,7 +624,7 @@ const OpsFilter = ref<EduOps>({
   levelOptions: [],
   positionPathOptions: [],
 });
-const positionPathId = ref<string>();
+const isEducation = ref<boolean>();
 const institute = ref<string>();
 const degree = ref<string>();
 const field = ref<string>();
@@ -488,9 +634,12 @@ const duration = ref<string>();
 const durationYear = ref<number>(0);
 const other = ref<string>();
 const fundName = ref<string>();
+const isDate = ref<string>("true");
 const finishDate = ref<Date>(new Date());
 const startDate = ref<number>(new Date().getFullYear());
+const startDate2 = ref<Date>(new Date());
 const endDate = ref<number>(new Date().getFullYear());
+const endDate2 = ref<Date>(new Date());
 const minDate = ref<Date>();
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
@@ -506,9 +655,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขประ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -524,7 +671,7 @@ profileData.education.columns.length == 0
       "durationYear",
       "other",
       "fundName",
-      "positionPath",
+      "isEducation",
       "finishDate",
       "startDate",
       "endDate",
@@ -587,11 +734,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionPath",
+    name: "isEducation",
     align: "left",
     label: "เป็นวุฒิการศึกษาในตำแหน่ง",
     sortable: true,
-    field: "positionPath",
+    field: "isEducation",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -743,11 +890,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "positionPath",
+    name: "isEducation",
     align: "left",
     label: "เป็นวุฒิการศึกษาในตำแหน่ง",
     sortable: true,
-    field: "positionPath",
+    field: "isEducation",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -874,7 +1021,7 @@ const visibleColumnsHistory = ref<String[]>([
   "duration",
   "durationYear",
   "other",
-  "positionPath",
+  "isEducation",
   "fundName",
   "finishDate",
   "startDate",
@@ -924,10 +1071,11 @@ const fetchPositionPath = async () => {
     .get(config.API.positionPath)
     .then((res) => {
       const data = res.data.result;
-      let option: DataOption[] = [];
-      data.map((r: DataOption) => {
-        option.push({ id: r.id.toString(), name: r.name.toString() });
-      });
+      let option: any = [];
+      //   data.map((r: DataOption) => {
+      option.push({ id: true, name: "ใช่" });
+      option.push({ id: false, name: "ไม่ใช่" });
+      //   });
       Ops.value.positionPathOptions = option;
       OpsFilter.value.positionPathOptions = option;
     })
@@ -962,44 +1110,45 @@ const filterSelector = (val: any, update: Function, refData: string) => {
 };
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileEduId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            level: e.educationLevel,
-            levelId: e.educationLevelId,
-            positionPath: e.positionPath,
-            positionPathId: e.positionPathId,
-            institute: e.institute,
-            degree: e.degree,
-            field: e.field,
-            gpa: e.gpa,
-            country: e.country,
-            duration: e.duration,
-            durationYear: e.durationYear,
-            other: e.other,
-            fundName: e.fundName,
-            finishDate: new Date(e.finishDate),
-            startDate: new Date(e.startDate).getFullYear(),
-            endDate: new Date(e.endDate).getFullYear(),
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileEduId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          level: e.educationLevel,
+          levelId: e.educationLevelId,
+          positionPath: e.positionPath,
+          isEducation: e.isEducation,
+          institute: e.institute,
+          degree: e.degree,
+          field: e.field,
+          gpa: e.gpa,
+          country: e.country,
+          duration: e.duration,
+          durationYear: e.durationYear,
+          other: e.other,
+          fundName: e.fundName,
+          isDate: e.isDate.toString(),
+          finishDate: new Date(e.finishDate),
+          startDate: new Date(e.startDate).getFullYear(),
+          endDate: new Date(e.endDate).getFullYear(),
+          startDate2: new Date(e.startDate),
+          endDate2: new Date(e.endDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -1028,7 +1177,7 @@ const clickNext = async () => {
 const getData = () => {
   const row = rows.value[rowIndex.value];
   levelId.value = row.levelId;
-  positionPathId.value = row.positionPathId;
+  isEducation.value = row.isEducation;
   institute.value = row.institute;
   degree.value = row.degree;
   field.value = row.field;
@@ -1039,8 +1188,11 @@ const getData = () => {
   other.value = row.other;
   fundName.value = row.fundName;
   finishDate.value = row.finishDate;
+  isDate.value = row.isDate;
   startDate.value = row.startDate;
   endDate.value = row.endDate;
+  startDate2.value = row.startDate2;
+  endDate2.value = row.endDate2;
   id.value = row.id;
 };
 
@@ -1094,46 +1246,50 @@ const clickSave = async () => {
 /**
  * บันทึกเพิ่มข้อมูล
  */
-
 const saveData = async () => {
-  if (profileId.value !== "") {
-    //   const filter = OpsFilter.value.levelOptions.filter(
-    //     (r: any) => r.id == levelId.value
-    //   );
-    //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
-    //     (r: any) => r.id == positionPathId.value
-    //   );
-    loaderPage(true);
-    await http
-      .post(config.API.profileEduId(profileId.value), {
-        id: id.value,
-        //   educationLevel: filter[0].name,
-        educationLevelId: levelId.value,
-        positionPathId: positionPathId.value,
-        institute: institute.value,
-        degree: degree.value,
-        field: field.value,
-        gpa: gpa.value,
-        country: country.value,
-        duration: duration.value,
-        durationYear: durationYear.value,
-        other: other.value,
-        fundName: fundName.value,
-        finishDate: dateToISO(finishDate.value),
-        startDate: new Date(`${startDate.value}-01-01`),
-        endDate: new Date(`${endDate.value}-01-01`),
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  //   const filter = OpsFilter.value.levelOptions.filter(
+  //     (r: any) => r.id == levelId.value
+  //   );
+  //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
+  //     (r: any) => r.id == isEducation.value
+  //   );
+  loaderPage(true);
+  await http
+    .post(config.API.profileEduId(profileId.value), {
+      id: id.value,
+      //   educationLevel: filter[0].name,
+      educationLevelId: levelId.value,
+      isEducation: isEducation.value,
+      institute: institute.value,
+      degree: degree.value,
+      field: field.value,
+      gpa: gpa.value,
+      country: country.value,
+      duration: duration.value,
+      durationYear: durationYear.value,
+      other: other.value,
+      fundName: fundName.value,
+      isDate: isDate.value == "true" ? true : false,
+      finishDate: dateToISO(finishDate.value),
+      startDate:
+        isDate.value == "true"
+          ? dateToISO(startDate2.value)
+          : new Date(`${startDate.value}-01-01`),
+      endDate:
+        isDate.value == "true"
+          ? dateToISO(endDate2.value)
+          : new Date(`${endDate.value}-01-01`),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
@@ -1144,7 +1300,7 @@ const editData = async () => {
   //     (r: any) => r.id == levelId.value
   //   );
   //   const filterPositionPath = OpsFilter.value.positionPathOptions.filter(
-  //     (r: any) => r.id == positionPathId.value
+  //     (r: any) => r.id == isEducation.value
   //   );
   loaderPage(true);
   await http
@@ -1152,7 +1308,7 @@ const editData = async () => {
       id: id.value,
       //   educationLevel: filter[0].name,
       educationLevelId: levelId.value,
-      positionPathId: positionPathId.value,
+      isEducation: isEducation.value,
       institute: institute.value,
       degree: degree.value,
       field: field.value,
@@ -1162,9 +1318,16 @@ const editData = async () => {
       durationYear: durationYear.value,
       other: other.value,
       fundName: fundName.value,
+      isDate: isDate.value == "true" ? true : false,
       finishDate: dateToISO(finishDate.value),
-      startDate: new Date(`${startDate.value}-01-01`),
-      endDate: new Date(`${endDate.value}-01-01`),
+      startDate:
+        isDate.value == "true"
+          ? dateToISO(startDate2.value)
+          : new Date(`${startDate.value}-01-01`),
+      endDate:
+        isDate.value == "true"
+          ? dateToISO(endDate2.value)
+          : new Date(`${endDate.value}-01-01`),
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -1243,7 +1406,7 @@ const selectData = async (_props: DataProps) => {
   rawItem.value = _props.row;
   rowIndex.value = _props.rowIndex;
   levelId.value = _props.row.levelId;
-  positionPathId.value = _props.row.positionPathId;
+  isEducation.value = _props.row.isEducation;
   institute.value = _props.row.institute;
   degree.value = _props.row.degree;
   field.value = _props.row.field;
@@ -1254,8 +1417,11 @@ const selectData = async (_props: DataProps) => {
   other.value = _props.row.other;
   fundName.value = _props.row.fundName;
   finishDate.value = _props.row.finishDate;
+  isDate.value = _props.row.isDate;
   startDate.value = _props.row.startDate;
   endDate.value = _props.row.endDate;
+  startDate2.value = _props.row.startDate2;
+  endDate2.value = _props.row.endDate2;
   id.value = _props.row.id;
   await checkRowPage();
 };
@@ -1268,7 +1434,7 @@ const addData = () => {
   modal.value = true;
   edit.value = true;
   levelId.value = "";
-  positionPathId.value = "";
+  isEducation.value = false;
   institute.value = "";
   degree.value = "";
   field.value = "";
@@ -1278,9 +1444,12 @@ const addData = () => {
   durationYear.value = 0;
   other.value = "";
   fundName.value = "";
+  isDate.value = "true";
   finishDate.value = new Date();
   startDate.value = new Date().getFullYear();
   endDate.value = new Date().getFullYear();
+  startDate2.value = new Date();
+  endDate2.value = new Date();
 };
 
 /**
@@ -1330,7 +1499,7 @@ const clickHistory = async (row: RequestItemsObject) => {
           level: e.educationLevel,
           levelId: e.educationLevelId,
           positionPath: e.positionPath,
-          positionPathId: e.positionPathId,
+          isEducation: e.isEducation,
           institute: e.institute,
           degree: e.degree,
           field: e.field,
@@ -1340,9 +1509,12 @@ const clickHistory = async (row: RequestItemsObject) => {
           durationYear: e.durationYear,
           other: e.other,
           fundName: e.fundName,
+          isDate: e.isDate.toString(),
           finishDate: new Date(e.finishDate),
           startDate: new Date(e.startDate).getFullYear(),
           endDate: new Date(e.endDate).getFullYear(),
+          startDate2: new Date(e.startDate2),
+          endDate2: new Date(e.endDate2),
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -1383,4 +1555,7 @@ const getClass = (val: boolean) => {
 .modalfix {
   position: fixed !important;
 }
+.borderCard {
+  border: 1px solid #d0d0d0;
+}
 </style>
diff --git a/src/modules/04_registry/components/Information/Address.vue b/src/modules/04_registry/components/Information/Address.vue
index 99192c26b..64f63ecf4 100644
--- a/src/modules/04_registry/components/Information/Address.vue
+++ b/src/modules/04_registry/components/Information/Address.vue
@@ -5,12 +5,11 @@
       header="ข้อมูลที่อยู่"
       icon="mdi-map-marker"
       :save="saveData"
-      :history="!statusAdd()"
+      :history="true"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
       :historyClick="clickHistory"
-      :addEmployee="statusAdd()"
     />
     <q-form ref="myform">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
@@ -312,10 +311,6 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -512,28 +507,8 @@ const visibleColumnsHistory = ref<String[]>([
 onMounted(async () => {
   await getNewData();
   emit("update:statusEdit", false);
-  defaultAdd();
 });
 
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  if (props.statusAdd) {
-    edit.value = props.statusAdd;
-    addressData.value = {
-      address: null,
-      provinceId: null,
-      districtId: null,
-      subdistrictId: null,
-      addressC: null,
-      provinceIdC: null,
-      districtIdC: null,
-      subdistrictIdC: null,
-      same: "0",
-    };
-  }
-};
-
 const filterSelector = (val: any, update: Function, refData: string) => {
   switch (refData) {
     case "provinceOps":
@@ -581,39 +556,37 @@ const filterSelector = (val: any, update: Function, refData: string) => {
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  */
 const clickHistory = async () => {
-  if (route.params.id) {
-    modalHistory.value = true;
-    loaderPage(true);
-    await http
-      .get(config.API.profileAdrsHisId(route.params.id.toString()))
-      .then((res) => {
-        let data = res.data.result;
-        rowsHistory.value = [];
-        data.map((e: RequestItemsHistoryObject) => {
-          rowsHistory.value.push({
-            currentAddress: e.currentAddress,
-            currentDistrict: e.currentDistrict,
-            currentProvince: e.currentProvince,
-            currentSubDistrict: e.currentSubDistrict,
-            currentZipCode: e.currentZipCode,
-            registrationSame: e.registrationSame,
-            registrationAddress: e.registrationAddress,
-            registrationDistrict: e.registrationDistrict,
-            registrationProvince: e.registrationProvince,
-            registrationSubDistrict: e.registrationSubDistrict,
-            registrationZipCode: e.registrationZipCode,
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileAdrsHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          currentAddress: e.currentAddress,
+          currentDistrict: e.currentDistrict,
+          currentProvince: e.currentProvince,
+          currentSubDistrict: e.currentSubDistrict,
+          currentZipCode: e.currentZipCode,
+          registrationSame: e.registrationSame,
+          registrationAddress: e.registrationAddress,
+          registrationDistrict: e.registrationDistrict,
+          registrationProvince: e.registrationProvince,
+          registrationSubDistrict: e.registrationSubDistrict,
+          registrationZipCode: e.registrationZipCode,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const refreshData = async () => {
@@ -633,29 +606,27 @@ const getNewData = async () => {
 };
 
 const fetchData = async () => {
-  if (route.params.id) {
-    loaderPage(true);
-    await http
-      .get(config.API.profileAdrsId(route.params.id.toString()))
-      .then((res) => {
-        const data: ResponseObject = res.data.result;
-        addressData.value.address = data.registrationAddress;
-        addressData.value.addressC = data.currentAddress;
-        addressData.value.districtId = data.registrationDistrictId;
-        addressData.value.districtIdC = data.currentDistrictId;
-        addressData.value.provinceId = data.registrationProvinceId;
-        addressData.value.provinceIdC = data.currentProvinceId;
-        addressData.value.subdistrictId = data.registrationSubDistrictId;
-        addressData.value.subdistrictIdC = data.currentSubDistrictId;
-        addressData.value.same = data.registrationSame ? "1" : "0";
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
-      });
-  }
+  loaderPage(true);
+  await http
+    .get(config.API.profileAdrsId(route.params.id.toString()))
+    .then((res) => {
+      const data: ResponseObject = res.data.result;
+      addressData.value.address = data.registrationAddress;
+      addressData.value.addressC = data.currentAddress;
+      addressData.value.districtId = data.registrationDistrictId;
+      addressData.value.districtIdC = data.currentDistrictId;
+      addressData.value.provinceId = data.registrationProvinceId;
+      addressData.value.provinceIdC = data.currentProvinceId;
+      addressData.value.subdistrictId = data.registrationSubDistrictId;
+      addressData.value.subdistrictIdC = data.currentSubDistrictId;
+      addressData.value.same = data.registrationSame ? "1" : "0";
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const editData = async () => {
@@ -705,34 +676,12 @@ const editData = async () => {
 const saveData = async () => {
   await myform.value.validate().then(async (success: boolean) => {
     if (success) {
-      if (props.statusAdd) {
-        await addData();
-      } else {
-        await editData();
-      }
+      await editData();
     } else {
     }
   });
 };
 
-const addData = async () => {
-  //     loaderPage(true);
-  //   await http
-  //     .put(config.API.profileInforId(route.params.id.toString()), body)
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       edit.value = false;
-  //       emit("update:statusEdit", false);
-  //       await fetchData();
-  //       await changeBirth(informaData.value.birthDate ?? new Date());
-  //     });
-};
-
 const selectProvince = async (e: string | null, name: string) => {
   if (e != null) {
     if (name == "1") {
diff --git a/src/modules/04_registry/components/Information/Certicate.vue b/src/modules/04_registry/components/Information/Certicate.vue
index a2025677f..721bf17c0 100644
--- a/src/modules/04_registry/components/Information/Certicate.vue
+++ b/src/modules/04_registry/components/Information/Certicate.vue
@@ -285,10 +285,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const $q = useQuasar();
@@ -320,9 +316,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขใบอ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -490,33 +484,31 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileCertId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            certificateNo: e.certificateNo,
-            issuer: e.issuer,
-            issueDate: new Date(e.issueDate),
-            expireDate: new Date(e.expireDate),
-            certificateType: e.certificateType,
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileCertId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          certificateNo: e.certificateNo,
+          issuer: e.issuer,
+          issueDate: new Date(e.issueDate),
+          expireDate: new Date(e.expireDate),
+          certificateType: e.certificateType,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -603,28 +595,26 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileCertId(profileId.value), {
-        id: id.value,
-        certificateNo: certificateNo.value,
-        issuer: issuer.value,
-        issueDate: dateToISO(issueDate.value),
-        expireDate: dateToISO(expireDate.value),
-        certificateType: certificateType.value,
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileCertId(profileId.value), {
+      id: id.value,
+      certificateNo: certificateNo.value,
+      issuer: issuer.value,
+      issueDate: dateToISO(issueDate.value),
+      expireDate: dateToISO(expireDate.value),
+      certificateType: certificateType.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
diff --git a/src/modules/04_registry/components/Information/Family.vue b/src/modules/04_registry/components/Information/Family.vue
index d07de77a7..6c49531e0 100644
--- a/src/modules/04_registry/components/Information/Family.vue
+++ b/src/modules/04_registry/components/Information/Family.vue
@@ -5,24 +5,62 @@
       header="ข้อมูลครอบครัว"
       icon="mdi-account-group"
       :save="saveData"
-      :history="!statusAdd()"
+      :history="true"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="refreshData"
       :historyClick="historyData"
-      :addEmployee="statusAdd()"
     />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
-        <div class="col-xs-12 text-weight-bold">• บิดา</div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-12 row q-pb-sm q-pt-md">
+          <div class="col-xs-2 col-sm-1 text-weight-bold">• บิดา</div>
+          <div class="q-gutter-sm">
+            <q-radio
+              v-model="familyData.liveM"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              dense
+              color="blue"
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="familyData.liveM"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              color="red"
+              label="เสียชีวิต"
+              dense
+              :disable="!edit"
+            />
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdM"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -32,7 +70,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -69,7 +107,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -84,15 +122,54 @@
         </div>
 
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="col-xs-12 text-weight-bold">• มารดา</div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="row col-12 q-py-sm">
+          <div class="col-xs-2 col-sm-1 text-weight-bold">• มารดา</div>
+          <div class="q-gutter-sm">
+            <q-radio
+              v-model="familyData.liveF"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="familyData.liveF"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="!edit"
+            />
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdF"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="!edit"
             hide-bottom-space
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -102,7 +179,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -139,7 +216,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -153,27 +230,75 @@
           />
         </div>
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="col-xs-12 q-col-gutter-x-sm items-center flex q-my-sm">
-          <label class="text-weight-bold">• คู่สมรส</label>
-          <q-radio
-            v-model="familyData.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="1"
-            label="มี"
-            dense
-            :disable="!edit"
-            @update:model-value="selectRadio"
+
+        <div class="row col-12 q-py-sm">
+          <div class="col-xs-2 col-sm-1 text-weight-bold">• คู่สมรส</div>
+          <div class="q-gutter-sm">
+            <q-radio
+              v-model="familyData.same"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มี"
+              dense
+              :disable="!edit"
+              @update:model-value="selectRadio"
+            />
+            <q-radio
+              v-model="familyData.same"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="ไม่มี"
+              color="grey-9"
+              dense
+              :disable="!edit"
+              @update:model-value="selectRadio"
+            />
+          </div>
+          <q-separator
+            vertical
+            color="grey-4"
+            size="2px"
+            class="q-mx-md"
+            v-if="familyData.same == '1'"
           />
-          <q-radio
-            v-model="familyData.same"
-            checked-icon="task_alt"
-            unchecked-icon="panorama_fish_eye"
-            val="0"
-            label="ไม่มี"
+          <div class="q-gutter-sm" v-if="familyData.same == '1'">
+            <q-radio
+              v-model="familyData.liveC"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="familyData.liveC"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="!edit"
+            />
+          </div>
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
             dense
-            :disable="!edit"
-            @update:model-value="selectRadio"
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="familyData.citizenIdC"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
           />
         </div>
 
@@ -184,7 +309,7 @@
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -194,7 +319,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -203,7 +328,7 @@
           />
         </div>
 
-        <div class="col-xs-6 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+        <div class="col-xs-6 col-sm-2 col-md-2" v-if="familyData.same == '1'">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -245,7 +370,7 @@
             :label="`${'นามสกุล(เดิม)'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3" v-if="familyData.same == '1'">
+        <div class="col-xs-12 col-sm-2 col-md-2" v-if="familyData.same == '1'">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -261,7 +386,9 @@
 
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
       </div>
-      <div class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs">
+      <div
+        class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs q-mb-sm"
+      >
         <div class="col-xs-12 q-col-gutter-x-sm items-center flex">
           <label class="text-weight-bold">• บุตร</label>
           <div>
@@ -282,35 +409,70 @@
 
         <div
           class="row col-12 items-center q-col-gutter-xs"
-          v-for="items in familyData.childrens"
-          :key="items.id"
+          v-for="(items, index) in familyData.childrens"
+          :key="index"
         >
-          <q-btn
-            v-if="edit"
-            size="12px"
-            flat
-            round
-            :disable="!edit"
-            :color="!edit ? 'grey-7' : 'red'"
-            @click="deleteChildren(items)"
-            icon="mdi-delete-outline"
-          >
-            <q-tooltip>ลบข้อมูล</q-tooltip>
-          </q-btn>
-          <div
-            :class="
-              edit
-                ? 'col-xs-10 col-sm-2 col-md-2'
-                : 'col-xs-12 col-sm-3 col-md-3'
-            "
-          >
+          <div class="col-12 row q-gutter-sm q-pb-xs">
+            <q-avatar class="bg-grey-2" size="28px">{{ index + 1 }}</q-avatar>
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="!edit"
+            />
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="!edit"
+            />
+          </div>
+          <div>
+            <q-btn
+              v-if="edit"
+              flat
+              dense
+              size="12px"
+              round
+              :disable="!edit"
+              :color="!edit ? 'grey-7' : 'red'"
+              @click="deleteChildren(items)"
+              icon="mdi-delete-outline"
+            >
+              <q-tooltip>ลบข้อมูล {{ index + 1 }}</q-tooltip>
+            </q-btn>
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(edit)"
+              hide-bottom-space
+              :outlined="edit"
+              dense
+              lazy-rules
+              :readonly="!edit"
+              :borderless="!edit"
+              v-model="items.childrenCitizenId"
+              :label="`${'เลขที่บัตรประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+          </div>
+          <div class="col-xs-12 col-sm-2 col-md-2">
             <selector
               :hide-dropdown-icon="!edit"
               hide-bottom-space
               :class="getClass(edit)"
               :readonly="!edit"
               :borderless="!edit"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
               :outlined="edit"
               dense
               lazy-rules
@@ -320,7 +482,7 @@
               option-label="name"
               :options="Ops.prefixOps"
               option-value="id"
-              :label="`${'คำนำหน้า'}`"
+              :label="`${'คำนำหน้าชื่อ'}`"
               use-input
               input-debounce="0"
               @filter="(inputValue:any,
@@ -356,7 +518,13 @@
               :label="`${'นามสกุล'}`"
             />
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <div
+            :class="
+              edit
+                ? 'col-xs-10 col-sm-1 col-md-1'
+                : 'col-xs-12 col-sm-2 col-md-2'
+            "
+          >
             <q-input
               :class="getClass(edit)"
               hide-bottom-space
@@ -369,6 +537,12 @@
               :label="`${'อาชีพ'}`"
             />
           </div>
+          <div
+            class="col-12 q-my-sm"
+            v-if="index + 1 < familyData.childrens.length"
+          >
+            <q-separator v-if="edit" inset />
+          </div>
         </div>
       </div>
     </q-form>
@@ -390,15 +564,50 @@
             }`
           }}
         </div>
-        <div class="col-xs-12 text-weight-bold">• บิดา</div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 text-weight-bold">
+          • บิดา
+          <q-radio
+            v-model="familyDataHistory[indexRow].fatherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มีชีวิต"
+            dense
+            :disable="true"
+          />
+          <q-radio
+            v-model="familyDataHistory[indexRow].fatherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="เสียชีวิต"
+            dense
+            :disable="true"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].fatherCitizenId"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="true"
             hide-bottom-space
             :class="getClass(false)"
             :readonly="true"
             :borderless="true"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="false"
             dense
             lazy-rules
@@ -408,7 +617,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -445,7 +654,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
             :class="getClass(false)"
             hide-bottom-space
@@ -460,15 +669,50 @@
         </div>
 
         <div class="col-12 q-pt-md q-pb-sm"><q-separator /></div>
-        <div class="col-xs-12 text-weight-bold">• มารดา</div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 text-weight-bold">
+          • มารดา
+          <q-radio
+            v-model="familyDataHistory[indexRow].motherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="1"
+            label="มีชีวิต"
+            dense
+            :disable="true"
+          />
+          <q-radio
+            v-model="familyDataHistory[indexRow].motherLive"
+            checked-icon="task_alt"
+            unchecked-icon="panorama_fish_eye"
+            val="0"
+            label="เสียชีวิต"
+            dense
+            :disable="true"
+          />
+        </div>
+        <div class="col-xs-6 col-sm-2 col-md-2">
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].motherCitizenId"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
+        </div>
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <selector
             :hide-dropdown-icon="true"
             hide-bottom-space
             :class="getClass(false)"
             :readonly="true"
             :borderless="true"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="false"
             dense
             lazy-rules
@@ -478,7 +722,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -515,7 +759,7 @@
             :label="`${'นามสกุล'}`"
           />
         </div>
-        <div class="col-xs-12 col-sm-3 col-md-3">
+        <div class="col-xs-12 col-sm-2 col-md-2">
           <q-input
             :class="getClass(false)"
             hide-bottom-space
@@ -547,14 +791,62 @@
             unchecked-icon="panorama_fish_eye"
             val="0"
             label="ไม่มี"
+            color="grey-9"
             dense
             :disable="true"
             @update:model-value="selectRadio"
           />
+          <q-separator
+            vertical
+            color="grey-4"
+            size="2px"
+            class="q-mx-md"
+            v-if="familyData.same == '1'"
+          />
+          <div class="q-gutter-sm" v-if="familyData.same == '1'">
+            <q-radio
+              v-model="familyDataHistory[indexRow].coupleLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="true"
+            />
+            <q-radio
+              v-model="familyDataHistory[indexRow].coupleLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="true"
+            />
+          </div>
+        </div>
+        <div
+          class="col-xs-6 col-sm-2 col-md-2"
+          v-if="familyDataHistory[indexRow].couple == '1'"
+        >
+          <q-input
+            :class="getClass(false)"
+            hide-bottom-space
+            :outlined="false"
+            dense
+            lazy-rules
+            :readonly="true"
+            :borderless="true"
+            v-model="familyDataHistory[indexRow].coupleCitizenId"
+            :label="`${'เลขที่บัตรประชาชน'}`"
+            maxlength="13"
+            mask="#############"
+          />
         </div>
 
         <div
-          class="col-xs-12 col-sm-3 col-md-3"
+          class="col-xs-12 col-sm-2 col-md-2"
           v-if="familyDataHistory[indexRow].couple == '1'"
         >
           <selector
@@ -563,7 +855,7 @@
             :class="getClass(false)"
             :readonly="true"
             :borderless="true"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="false"
             dense
             lazy-rules
@@ -573,7 +865,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -617,7 +909,7 @@
           />
         </div>
         <div
-          class="col-xs-6 col-sm-3 col-md-3"
+          class="col-xs-6 col-sm-2 col-md-2"
           v-if="familyDataHistory[indexRow].couple == '1'"
         >
           <q-input
@@ -634,7 +926,7 @@
           />
         </div>
         <div
-          class="col-xs-12 col-sm-3 col-md-3"
+          class="col-xs-12 col-sm-2 col-md-2"
           v-if="familyDataHistory[indexRow].couple == '1'"
         >
           <q-input
@@ -662,14 +954,51 @@
           v-for="items in familyDataHistory[indexRow].childrens"
           :key="items.id"
         >
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <div class="col-12 row q-gutter-sm q-pb-xs">
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="1"
+              label="มีชีวิต"
+              color="blue"
+              dense
+              :disable="true"
+            />
+            <q-radio
+              v-model="items.childrenLive"
+              checked-icon="task_alt"
+              unchecked-icon="panorama_fish_eye"
+              val="0"
+              label="เสียชีวิต"
+              color="red"
+              dense
+              :disable="true"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
+            <q-input
+              :class="getClass(false)"
+              hide-bottom-space
+              :outlined="false"
+              dense
+              lazy-rules
+              :readonly="true"
+              :borderless="true"
+              v-model="items.childrenCitizenId"
+              :label="`${'เลขที่บัตรประชาชน'}`"
+              maxlength="13"
+              mask="#############"
+            />
+          </div>
+          <div class="col-xs-6 col-sm-2 col-md-2">
             <selector
               :hide-dropdown-icon="true"
               hide-bottom-space
               :class="getClass(false)"
               :readonly="true"
               :borderless="true"
-              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+              :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
               :outlined="false"
               dense
               lazy-rules
@@ -679,7 +1008,7 @@
               option-label="name"
               :options="Ops.prefixOps"
               option-value="id"
-              :label="`${'คำนำหน้า'}`"
+              :label="`${'คำนำหน้าชื่อ'}`"
               use-input
               input-debounce="0"
               @filter="(inputValue:any,
@@ -715,7 +1044,7 @@
               :label="`${'นามสกุล'}`"
             />
           </div>
-          <div class="col-xs-12 col-sm-3 col-md-3">
+          <div class="col-xs-12 col-sm-2 col-md-2">
             <q-input
               :class="getClass(false)"
               hide-bottom-space
@@ -785,10 +1114,6 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -815,16 +1140,22 @@ const familyData = ref<Family>({
   lastnameC: null,
   lastnameCOld: null,
   occupationC: null,
+  liveC: null,
+  citizenIdC: null,
   prefixM: null,
   prefixIdM: null,
   firstnameM: null,
   lastnameM: null,
   occupationM: null,
+  liveM: null,
+  citizenIdM: null,
   prefixF: null,
   prefixIdF: null,
   firstnameF: null,
   lastnameF: null,
   occupationF: null,
+  liveF: null,
+  citizenIdF: null,
   same: "0",
   childrens: [],
 });
@@ -840,37 +1171,8 @@ onMounted(async () => {
   await fetchPrefix();
   await fetchData();
   emit("update:statusEdit", false);
-  defaultAdd();
 });
 
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  if (props.statusAdd) {
-    edit.value = props.statusAdd;
-    familyData.value = {
-      prefixC: null,
-      prefixIdC: null,
-      firstnameC: null,
-      lastnameC: null,
-      lastnameCOld: null,
-      occupationC: null,
-      prefixM: null,
-      prefixIdM: null,
-      firstnameM: null,
-      lastnameM: null,
-      occupationM: null,
-      prefixF: null,
-      prefixIdF: null,
-      firstnameF: null,
-      lastnameF: null,
-      occupationF: null,
-      same: "0",
-      childrens: [],
-    };
-  }
-};
-
 const historyData = async () => {
   await fetchHistory();
 };
@@ -918,6 +1220,8 @@ const addChildren = async () => {
     childrenFirstName: "",
     childrenLastName: "",
     childrenCareer: "",
+    childrenLive: "1",
+    childrenCitizenId: "",
   });
 
   familyData.value.childrens.sort(
@@ -948,14 +1252,20 @@ const fetchHistory = async () => {
           coupleLastName: row.coupleLastName,
           coupleLastNameOld: row.coupleLastNameOld,
           coupleCareer: row.coupleCareer,
+          coupleLive: row.coupleLive ? "1" : "0",
+          coupleCitizenId: row.coupleCitizenId,
           fatherPrefixId: row.fatherPrefixId,
           fatherFirstName: row.fatherFirstName,
           fatherLastName: row.fatherLastName,
           fatherCareer: row.fatherCareer,
+          fatherLive: row.fatherLive ? "1" : "0",
+          fatherCitizenId: row.fatherCitizenId,
           motherPrefixId: row.motherPrefixId,
           motherFirstName: row.motherFirstName,
           motherLastName: row.motherLastName,
           motherCareer: row.motherCareer,
+          motherLive: row.motherLive ? "1" : "0",
+          motherCitizenId: row.motherCitizenId,
           childrens: row.childrens,
           createdFullName: row.createdFullName,
           createdAt: new Date(row.createdAt),
@@ -989,55 +1299,61 @@ const fetchHistory = async () => {
 };
 
 const fetchData = async () => {
-  if (route.params.id) {
-    loaderPage(true);
-    await http
-      .get(config.API.profileFamiId(route.params.id.toString()))
-      .then((res) => {
-        const data: ResponseObject = res.data.result;
-        familyData.value.prefixC = "";
-        familyData.value.prefixIdC = data.couplePrefixId;
-        familyData.value.firstnameC = data.coupleFirstName;
-        familyData.value.lastnameC = data.coupleLastName;
-        familyData.value.lastnameCOld = data.coupleLastNameOld;
-        familyData.value.occupationC = data.coupleCareer;
-        familyData.value.prefixM = "";
-        familyData.value.prefixIdM = data.fatherPrefixId;
+  loaderPage(true);
+  await http
+    .get(config.API.profileFamiId(route.params.id.toString()))
+    .then((res) => {
+      const data: ResponseObject = res.data.result;
+      familyData.value.prefixC = "";
+      familyData.value.prefixIdC = data.couplePrefixId;
+      familyData.value.firstnameC = data.coupleFirstName;
+      familyData.value.lastnameC = data.coupleLastName;
+      familyData.value.lastnameCOld = data.coupleLastNameOld;
+      familyData.value.occupationC = data.coupleCareer;
+      familyData.value.liveC = data.coupleLive ? "1" : "0";
+      familyData.value.citizenIdC = data.coupleCitizenId;
 
-        familyData.value.firstnameM = data.fatherFirstName;
-        familyData.value.lastnameM = data.fatherLastName;
-        familyData.value.occupationM = data.fatherCareer;
-        familyData.value.prefixF = "";
-        familyData.value.prefixIdF = data.motherPrefixId;
+      familyData.value.prefixM = "";
+      familyData.value.prefixIdM = data.fatherPrefixId;
+      familyData.value.firstnameM = data.fatherFirstName;
+      familyData.value.lastnameM = data.fatherLastName;
+      familyData.value.occupationM = data.fatherCareer;
+      familyData.value.liveM = data.fatherLive ? "1" : "0";
+      familyData.value.citizenIdM = data.fatherCitizenId;
 
-        familyData.value.firstnameF = data.motherFirstName;
-        familyData.value.lastnameF = data.motherLastName;
-        familyData.value.occupationF = data.motherCareer;
-        familyData.value.same = data.couple ? "1" : "0";
+      familyData.value.prefixF = "";
+      familyData.value.prefixIdF = data.motherPrefixId;
+      familyData.value.firstnameF = data.motherFirstName;
+      familyData.value.lastnameF = data.motherLastName;
+      familyData.value.occupationF = data.motherCareer;
+      familyData.value.liveF = data.motherLive ? "1" : "0";
+      familyData.value.citizenIdF = data.motherCitizenId;
+      familyData.value.same = data.couple ? "1" : "0";
 
-        if (data.childrens.length > 0) {
-          let dataChild: childrenFamily[] = [];
-          data.childrens.map((row: childrenFamily, index: number) => {
-            dataChild.push({
-              id: `${index + 1}`,
-              childrenPrefixId: row.childrenPrefixId,
-              childrenFirstName: row.childrenFirstName,
-              childrenLastName: row.childrenLastName,
-              childrenCareer: row.childrenCareer,
-            });
+      if (data.childrens.length > 0) {
+        let dataChild: childrenFamily[] = [];
+        data.childrens.map((row: childrenFamily, index: number) => {
+          dataChild.push({
+            id: `${index + 1}`,
+            childrenPrefixId: row.childrenPrefixId,
+            childrenFirstName: row.childrenFirstName,
+            childrenLastName: row.childrenLastName,
+            childrenCareer: row.childrenCareer,
+            childrenLive: row.childrenLive,
+            childrenCitizenId: row.childrenCitizenId,
           });
-          familyData.value.childrens = dataChild;
-        } else {
-          familyData.value.childrens = [];
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        loaderPage(false);
-      });
-  }
+        });
+        familyData.value.childrens = dataChild;
+      } else {
+        familyData.value.childrens = [];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      loaderPage(false);
+    });
 };
 
 const editData = async () => {
@@ -1049,14 +1365,20 @@ const editData = async () => {
     coupleLastName: familyData.value.lastnameC,
     coupleLastNameOld: familyData.value.lastnameCOld,
     coupleCareer: familyData.value.occupationC,
+    coupleLive: familyData.value.liveC == "1",
+    coupleCitizenId: familyData.value.citizenIdC,
     fatherPrefixId: familyData.value.prefixIdM,
     fatherFirstName: familyData.value.firstnameM,
     fatherLastName: familyData.value.lastnameM,
     fatherCareer: familyData.value.occupationM,
+    fatherLive: familyData.value.liveM == "1",
+    fatherCitizenId: familyData.value.citizenIdM,
     motherPrefixId: familyData.value.prefixIdF,
     motherFirstName: familyData.value.firstnameF,
     motherLastName: familyData.value.lastnameF,
     motherCareer: familyData.value.occupationF,
+    motherLive: familyData.value.liveF == "1",
+    motherCitizenId: familyData.value.citizenIdF,
     childrens: familyData.value.childrens,
     createdFullName: "-",
     createdAt: new Date(),
@@ -1076,32 +1398,10 @@ const editData = async () => {
     });
 };
 
-const addData = async () => {
-  //     loaderPage(true);
-  //   await http
-  //     .put(config.API.profileInforId(route.params.id.toString()), body)
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       edit.value = false;
-  //       emit("update:statusEdit", false);
-  //       await fetchData();
-  //       await changeBirth(informaData.value.birthDate ?? new Date());
-  //     });
-};
-
 const saveData = async () => {
   await myform.value?.validate().then(async (success: boolean) => {
     if (success) {
-      if (props.statusAdd) {
-        await addData();
-      } else {
-        await editData();
-      }
+      await editData();
     } else {
     }
   });
@@ -1123,6 +1423,8 @@ const selectRadio = (e: boolean, i: any) => {
     familyData.value.lastnameC = "";
     familyData.value.lastnameCOld = "";
     familyData.value.occupationC = "";
+    familyData.value.liveC = "";
+    familyData.value.citizenIdC = "";
   }
 };
 
diff --git a/src/modules/04_registry/components/Information/Government.vue b/src/modules/04_registry/components/Information/Government.vue
index da7a045bd..35d6fca2a 100644
--- a/src/modules/04_registry/components/Information/Government.vue
+++ b/src/modules/04_registry/components/Information/Government.vue
@@ -25,7 +25,7 @@
             :label="`${'สังกัด'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
           <q-input
             :class="getClass(false)"
             hide-bottom-space
@@ -85,7 +85,7 @@
             :label="`${'ประเภท'}`"
           />
         </div>
-        <div class="col-xs-6 col-sm-3 col-md-3">
+        <div class="col-xs-6 col-sm-3 col-md-3" v-if="employeeClass != 'temp'">
           <q-input
             :class="getClass(false)"
             hide-bottom-space
@@ -149,8 +149,18 @@
                 :readonly="!edit"
                 :borderless="!edit"
                 :model-value="date2Thai(new Date(govermentData.containDate))"
-                :rules="[(val) => !!val || `${'กรุณาเลือก วันที่บรรจุ'}`]"
-                :label="`${'วันที่บรรจุ'}`"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกวันที่บรรจุ'
+                        : 'กรุณาเลือกวันที่แต่งตั้ง'
+                    }`,
+                ]"
+                :label="`${
+                  profileType == 'officer' ? 'วันที่บรรจุ' : 'วันที่แต่งตั้ง'
+                }`"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -193,9 +203,19 @@
                 :borderless="!edit"
                 :model-value="date2Thai(new Date(govermentData.workDate))"
                 :rules="[
-                  (val) => !!val || `${'กรุณาเลือก เริ่มปฎิบัติราชการ'}`,
+                  (val) =>
+                    !!val ||
+                    `${
+                      profileType == 'officer'
+                        ? 'กรุณาเลือกเริ่มปฎิบัติราชการ'
+                        : 'กรุณาเลือกวันที่จ้างและแต่งตั้งมีผล'
+                    }`,
                 ]"
-                :label="`${'เริ่มปฎิบัติราชการ'}`"
+                :label="`${
+                  profileType == 'officer'
+                    ? 'เริ่มปฎิบัติราชการ'
+                    : 'วันที่จ้างและแต่งตั้งมีผล'
+                }`"
               >
                 <template v-slot:prepend>
                   <q-icon
@@ -211,7 +231,7 @@
             </template>
           </datepicker>
         </div>
-        <div class="col-xs-6 col-sm-6 col-md-6">
+        <div class="col-xs-6 col-sm-6 col-md-6" v-if="profileType == 'officer'">
           <q-input
             :class="getClass(edit)"
             hide-bottom-space
@@ -330,6 +350,14 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
+  profileType: {
+    type: String,
+    required: true,
+  },
+  employeeClass: {
+    type: String,
+    required: true,
+  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
diff --git a/src/modules/04_registry/components/Information/Information.vue b/src/modules/04_registry/components/Information/Information.vue
index 94e30b6b2..ad6287718 100644
--- a/src/modules/04_registry/components/Information/Information.vue
+++ b/src/modules/04_registry/components/Information/Information.vue
@@ -5,12 +5,11 @@
       header="ข้อมูลส่วนตัว"
       icon="mdi-account"
       :save="saveData"
-      :history="!statusAdd()"
+      :history="true"
       :changeBtn="changeBtn"
       :disable="statusEdit"
       :cancel="onCancel"
       :historyClick="clickHistory"
-      :addEmployee="statusAdd()"
     />
     <q-form ref="myform" class="col-12">
       <div class="row col-12 items-center q-col-gutter-x-sm q-col-gutter-y-sm">
@@ -25,7 +24,6 @@
             :borderless="!edit"
             v-model="informaData.cardid"
             @update:model-value="changeCardID"
-            maxlength="13"
             :rules="[
               (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
               (val:string) =>
@@ -33,6 +31,7 @@
                 `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
             ]"
             label="เลขบัตรประจำตัวประชาชน"
+            maxlength="13"
             mask="#############"
           />
         </div>
@@ -43,7 +42,7 @@
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+            :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -53,7 +52,7 @@
             option-label="name"
             :options="Ops.prefixOps"
             option-value="id"
-            :label="`${'คำนำหน้า'}`"
+            :label="`${'คำนำหน้าชื่อ'}`"
             use-input
             input-debounce="0"
             @filter="(inputValue:any,
@@ -116,11 +115,7 @@
                 lazy-rules
                 :readonly="!edit"
                 :borderless="!edit"
-                :model-value="
-                  informaData.birthDate == null
-                    ? ''
-                    : date2Thai(informaData.birthDate)
-                "
+                :model-value="date2Thai(informaData.birthDate)"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`]"
                 :label="`${'วัน/เดือน/ปี เกิด'}`"
               >
@@ -158,7 +153,6 @@
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก เพศ'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -183,7 +177,6 @@
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก สถานภาพ'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -211,7 +204,6 @@
             :readonly="!edit"
             :borderless="!edit"
             v-model="informaData.nationality"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก สัญชาติ'}`]"
             :label="`${'สัญชาติ'}`"
           />
         </div>
@@ -225,7 +217,6 @@
             :readonly="!edit"
             :borderless="!edit"
             v-model="informaData.ethnicity"
-            :rules="[(val:string) => !!val || `${'กรุณากรอก เชื้อชาติ'}`]"
             :label="`${'เชื้อชาติ'}`"
           />
         </div>
@@ -236,7 +227,6 @@
             :class="getClass(edit)"
             :readonly="!edit"
             :borderless="!edit"
-            :rules="[(val:string) => !!val || `${'กรุณาเลือก ศาสนา'}`]"
             :outlined="edit"
             dense
             lazy-rules
@@ -368,6 +358,7 @@
             unchecked-icon="panorama_fish_eye"
             val="0"
             label="ไม่มี"
+            color="grey-9"
             dense
             :disable="!edit"
           />
@@ -377,6 +368,11 @@
             v-if="same == '1'"
             v-model:statusEdit="edit"
             :fetchDataInformation="fetchDataComponent"
+            :perfixId="informaData.prefixId == null ? '' : informaData.prefixId"
+            :firstname="
+              informaData.firstname == null ? '' : informaData.firstname
+            "
+            :lastname="informaData.lastname == null ? '' : informaData.lastname"
           />
         </div>
       </div>
@@ -443,10 +439,6 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
 });
 const emit = defineEmits(["update:statusEdit"]);
 
@@ -515,7 +507,7 @@ const columnsHistory = ref<QTableColumn[]>([
   {
     name: "prefix",
     align: "left",
-    label: "คำนำหน้า",
+    label: "คำนำหน้าชื่อ",
     sortable: true,
     field: "prefix",
     headerStyle: "font-size: 14px",
@@ -701,36 +693,8 @@ onMounted(async () => {
   await fetchPerson();
   await fetchData();
   emit("update:statusEdit", false);
-  defaultAdd();
 });
 
-const statusAdd = () => props.statusAdd;
-
-const defaultAdd = () => {
-  if (props.statusAdd) {
-    edit.value = props.statusAdd;
-    informaData.value = {
-      cardid: null,
-      age: null,
-      prefix: null,
-      prefixId: null,
-      firstname: null,
-      lastname: null,
-      birthDate: null,
-      genderId: null,
-      bloodId: null,
-      nationality: null,
-      ethnicity: null,
-      statusId: null,
-      religionId: null,
-      tel: null,
-      employeeType: null,
-      employeeClass: null,
-      profileType: null,
-    };
-  }
-};
-
 const onCancel = async () => {
   if (myform.value != null) {
     myform.value.reset();
@@ -858,52 +822,50 @@ const checkCitizen = async (id: string) => {
  * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
  */
 const clickHistory = async () => {
-  if (route.params.id) {
-    modalHistory.value = true;
-    loaderPage(true);
-    await http
-      .get(config.API.profileInforHisId(route.params.id.toString()))
-      .then((res) => {
-        let data = res.data.result;
-        rowsHistory.value = [];
-        data.map((e: RequestItemsHistoryObject) => {
-          rowsHistory.value.push({
-            citizenId: e.citizenId,
-            prefix: e.prefix,
-            firstName: e.firstName,
-            lastName: e.lastName,
-            birthDate: new Date(e.birthDate),
-            gender: e.gender,
-            relationship: e.relationship,
-            bloodGroup: e.bloodGroup,
-            nationality: e.nationality,
-            race: e.race,
-            religion: e.religion,
-            telephoneNumber: e.telephoneNumber,
-            employeeType:
-              e.employeeType == "gov"
-                ? "งบประมาณเงินอุดหนุนรัฐบาล"
-                : e.employeeType == "bkk"
-                ? "งบประมาณกรุงเทพมหานคร"
-                : "-",
-            employeeClass:
-              e.employeeClass == "perm"
-                ? "ลูกจ้างประจำ"
-                : e.employeeClass == "temp"
-                ? "ลูกจ้างชั่วคราว"
-                : "-",
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  modalHistory.value = true;
+  loaderPage(true);
+  await http
+    .get(config.API.profileInforHisId(route.params.id.toString()))
+    .then((res) => {
+      let data = res.data.result;
+      rowsHistory.value = [];
+      data.map((e: RequestItemsHistoryObject) => {
+        rowsHistory.value.push({
+          citizenId: e.citizenId,
+          prefix: e.prefix,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          birthDate: new Date(e.birthDate),
+          gender: e.gender,
+          relationship: e.relationship,
+          bloodGroup: e.bloodGroup,
+          nationality: e.nationality,
+          race: e.race,
+          religion: e.religion,
+          telephoneNumber: e.telephoneNumber,
+          employeeType:
+            e.employeeType == "gov"
+              ? "งบประมาณเงินอุดหนุนรัฐบาล"
+              : e.employeeType == "bkk"
+              ? "งบประมาณกรุงเทพมหานคร"
+              : "-",
+          employeeClass:
+            e.employeeClass == "perm"
+              ? "ลูกจ้างประจำ"
+              : e.employeeClass == "temp"
+              ? "ลูกจ้างชั่วคราว"
+              : "-",
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const filterSelector = (val: any, update: Function, refData: string) => {
@@ -1000,49 +962,44 @@ const calRetire = async (birth: Date) => {
 };
 
 const fetchData = async () => {
-  if (route.params.id) {
-    loaderPage(true);
-    await http
-      .get(config.API.profileInforId(route.params.id.toString()))
-      .then(async (res: any) => {
-        const data: ResponseObject = res.data.result;
-        defaultCitizenData.value = data.citizenId;
-        informaData.value.cardid = data.citizenId;
-        informaData.value.prefix = "";
-        informaData.value.prefixId = data.prefixId;
-        informaData.value.firstname = data.firstName;
-        informaData.value.lastname = data.lastName;
-        informaData.value.birthDate = new Date(data.birthDate);
-        informaData.value.genderId = data.genderId;
-        informaData.value.bloodId = data.bloodGroupId;
-        informaData.value.nationality = data.nationality;
-        informaData.value.ethnicity = data.race;
-        informaData.value.statusId = data.relationshipId;
-        informaData.value.religionId = data.religionId;
-        informaData.value.tel = data.telephoneNumber;
-        informaData.value.age = data.age;
-        informaData.value.employeeType = data.employeeType;
-        informaData.value.employeeClass = data.employeeClass;
-        informaData.value.profileType = data.profileType;
-        dateBefore.value = new Date(data.birthDate);
-        same.value = data.changeName == true ? "1" : "0";
-        await calRetire(new Date(dateToISO(new Date(data.birthDate))));
-        if (
-          data.profileType == "officer" &&
-          columnsHistory.value.length >= 15
-        ) {
-          columnsHistory.value.splice(13, 1);
-          columnsHistory.value.splice(12, 1);
-        }
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        //   loaderPage(false);
-        await props.fetchDataProfile();
-      });
-  }
+  loaderPage(true);
+  await http
+    .get(config.API.profileInforId(route.params.id.toString()))
+    .then(async (res: any) => {
+      const data: ResponseObject = res.data.result;
+      defaultCitizenData.value = data.citizenId;
+      informaData.value.cardid = data.citizenId;
+      informaData.value.prefix = "";
+      informaData.value.prefixId = data.prefixId;
+      informaData.value.firstname = data.firstName;
+      informaData.value.lastname = data.lastName;
+      informaData.value.birthDate = new Date(data.birthDate);
+      informaData.value.genderId = data.genderId;
+      informaData.value.bloodId = data.bloodGroupId;
+      informaData.value.nationality = data.nationality;
+      informaData.value.ethnicity = data.race;
+      informaData.value.statusId = data.relationshipId;
+      informaData.value.religionId = data.religionId;
+      informaData.value.tel = data.telephoneNumber;
+      informaData.value.age = data.age;
+      informaData.value.employeeType = data.employeeType;
+      informaData.value.employeeClass = data.employeeClass;
+      informaData.value.profileType = data.profileType;
+      dateBefore.value = new Date(data.birthDate);
+      same.value = data.changeName == true ? "1" : "0";
+      await calRetire(new Date(dateToISO(new Date(data.birthDate))));
+      if (data.profileType == "officer" && columnsHistory.value.length >= 15) {
+        columnsHistory.value.splice(13, 1);
+        columnsHistory.value.splice(12, 1);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      //   loaderPage(false);
+      await props.fetchDataProfile();
+    });
 };
 
 const editData = async () => {
@@ -1055,10 +1012,7 @@ const editData = async () => {
     nationality: informaData.value.nationality,
     race: informaData.value.ethnicity,
     religionId: informaData.value.religionId,
-    birthDate:
-      informaData.value.birthDate == null
-        ? dateToISO(new Date())
-        : dateToISO(informaData.value.birthDate),
+    birthDate: dateToISO(informaData.value.birthDate) ?? dateToISO(new Date()),
     bloodGroupId: informaData.value.bloodId,
     relationshipId: informaData.value.statusId,
     telephoneNumber: informaData.value.tel,
@@ -1086,33 +1040,11 @@ const editData = async () => {
     });
 };
 
-const addData = async () => {
-  //     loaderPage(true);
-  //   await http
-  //     .put(config.API.profileInforId(route.params.id.toString()), body)
-  //     .then((res) => {
-  //       success($q, "บันทึกข้อมูลสำเร็จ");
-  //     })
-  //     .catch((e) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(async () => {
-  //       edit.value = false;
-  //       emit("update:statusEdit", false);
-  //       await fetchData();
-  //       await changeBirth(informaData.value.birthDate ?? new Date());
-  //     });
-};
-
 const saveData = async () => {
   if (myform.value != null) {
     await myform.value.validate().then(async (success: boolean) => {
       if (success) {
-        if (props.statusAdd) {
-          await addData();
-        } else {
-          await editData();
-        }
+        await editData();
       } else {
       }
     });
diff --git a/src/modules/04_registry/components/Information/OldName.vue b/src/modules/04_registry/components/Information/OldName.vue
index 62bf2056b..6c6cefadc 100644
--- a/src/modules/04_registry/components/Information/OldName.vue
+++ b/src/modules/04_registry/components/Information/OldName.vue
@@ -100,7 +100,7 @@
                 :class="getClass(edit)"
                 :readonly="!edit"
                 :borderless="!edit"
-                :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้า'}`]"
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
                 :outlined="edit"
                 dense
                 lazy-rules
@@ -110,7 +110,7 @@
                 option-label="name"
                 :options="Ops.prefixOps"
                 option-value="id"
-                :label="`${'คำนำหน้า'}`"
+                :label="`${'คำนำหน้าชื่อ'}`"
                 use-input
                 input-debounce="0"
                 @filter="(inputValue:any,
@@ -124,7 +124,7 @@
                 :outlined="edit"
                 dense
                 lazy-rules
-                :readonly="!edit"
+                :readonly="!edit || status == 'lastName'"
                 :borderless="!edit"
                 v-model="firstName"
                 :rules="[(val) => !!val || `${'กรุณากรอกชื่อ'}`]"
@@ -139,7 +139,7 @@
                 :outlined="edit"
                 dense
                 lazy-rules
-                :readonly="!edit"
+                :readonly="!edit || status == 'firstName'"
                 :borderless="!edit"
                 v-model="lastName"
                 :rules="[(val) => !!val || `${'กรุณากรอกนามสกุล'}`]"
@@ -324,6 +324,18 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  perfixId: {
+    type: String,
+    required: true,
+  },
+  firstname: {
+    type: String,
+    required: true,
+  },
+  lastname: {
+    type: String,
+    required: true,
+  },
 });
 
 const $q = useQuasar();
@@ -362,9 +374,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขประ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const file = ref<string | null>(null);
 const fileUpload = ref<any>([]);
 const rows = ref<RequestItemsObject[]>([]);
@@ -411,7 +421,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "prefix",
     align: "left",
-    label: "คำนำหน้า",
+    label: "คำนำหน้าชื่อ",
     sortable: true,
     field: "prefix",
     headerStyle: "font-size: 14px",
@@ -457,7 +467,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "prefix",
     align: "left",
-    label: "คำนำหน้า",
+    label: "คำนำหน้าชื่อ",
     sortable: true,
     field: "prefix",
     headerStyle: "font-size: 14px",
@@ -540,34 +550,32 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileChangeNameId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            prefix: e.prefix,
-            prefixId: e.prefixId,
-            firstName: e.firstName,
-            lastName: e.lastName,
-            status: e.status,
-            file: e.file,
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileChangeNameId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          prefix: e.prefix,
+          prefixId: e.prefixId,
+          firstName: e.firstName,
+          lastName: e.lastName,
+          status: e.status,
+          file: e.file,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -669,19 +677,44 @@ const clickSave = async () => {
       if (modalEdit.value) {
         await editData();
       } else {
-        await checkSave();
+        await saveData();
       }
     }
   });
 };
 
-const checkSave = async () => {
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
   if (fileUpload.value.length > 0) {
-    if (profileId.value !== "") {
-      await saveData();
-    } else {
-      await saveDataEmployee();
-    }
+    const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
+    const newFile = new File(blob, nameFile.value, {
+      type: fileUpload.value[0].type,
+    });
+    const formData = new FormData();
+    formData.append("", newFile);
+    if (prefixId.value != undefined)
+      formData.append("prefixId", prefixId.value);
+    if (firstName.value != undefined)
+      formData.append("firstName", firstName.value);
+    if (lastName.value != undefined)
+      formData.append("lastName", lastName.value);
+    if (status.value != undefined) formData.append("status", status.value);
+    loaderPage(true);
+    await http
+      .post(config.API.profileChangeNameId(profileId.value), formData)
+      .then((res) => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        modal.value = false;
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+        await props.fetchDataInformation();
+      });
   } else {
     dialogMessage(
       $q,
@@ -697,41 +730,6 @@ const checkSave = async () => {
   }
 };
 
-/**
- * บันทึกเพิ่มข้อมูล
- */
-const saveData = async () => {
-  const blob = fileUpload.value.slice(0, fileUpload.value[0].size);
-  const newFile = new File(blob, nameFile.value, {
-    type: fileUpload.value[0].type,
-  });
-  const formData = new FormData();
-  formData.append("", newFile);
-  if (prefixId.value != undefined) formData.append("prefixId", prefixId.value);
-  if (firstName.value != undefined)
-    formData.append("firstName", firstName.value);
-  if (lastName.value != undefined) formData.append("lastName", lastName.value);
-  if (status.value != undefined) formData.append("status", status.value);
-  loaderPage(true);
-  await http
-    .post(config.API.profileChangeNameId(profileId.value), formData)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      modal.value = false;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await fetchData();
-      await props.fetchDataInformation();
-    });
-};
-
-const saveDataEmployee = async () => {
-  console.log("saveDataEmployee");
-};
-
 /**
  * บันทึกแก้ไขข้อมูล
  */
@@ -845,9 +843,9 @@ const addData = () => {
   modalEdit.value = false;
   modal.value = true;
   edit.value = true;
-  prefixId.value = "";
-  firstName.value = "";
-  lastName.value = "";
+  prefixId.value = props.perfixId;
+  firstName.value = props.firstname;
+  lastName.value = props.lastname;
   status.value = "";
   file.value = "";
 };
diff --git a/src/modules/04_registry/components/Information/top.vue b/src/modules/04_registry/components/Information/top.vue
index 157698119..2a8221cf9 100644
--- a/src/modules/04_registry/components/Information/top.vue
+++ b/src/modules/04_registry/components/Information/top.vue
@@ -43,7 +43,7 @@
         size="12px"
         flat
         round
-        v-if="edit && !addEmployee"
+        v-if="edit"
         :color="!edit ? 'grey-7' : 'red'"
         @click="ClickCancel"
         icon="mdi-undo"
@@ -125,7 +125,6 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
-
   disable: {
     type: Boolean,
     defualt: false,
@@ -158,10 +157,6 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
-  addEmployee: {
-    type: Boolean,
-    defualt: false,
-  },
 });
 
 const emit = defineEmits(["update:edit"]);
diff --git a/src/modules/04_registry/components/Insignia.vue b/src/modules/04_registry/components/Insignia.vue
index a025efc25..b3ebf22ec 100644
--- a/src/modules/04_registry/components/Insignia.vue
+++ b/src/modules/04_registry/components/Insignia.vue
@@ -24,10 +24,14 @@
               class="cursor-pointer"
             >
               <div
-                v-if="col.name == 'receiveDate' || col.name == 'dateAnnounce'"
+                v-if="
+                  col.name == 'receiveDate' ||
+                  col.name == 'dateAnnounce' ||
+                  col.name == 'refCommandDate'
+                "
                 class="table_ellipsis"
               >
-                {{ date2Thai(col.value) }}
+                {{ col.value == null ? null : date2Thai(col.value) }}
               </div>
               <div v-else-if="col.name == 'year'" class="table_ellipsis">
                 {{ col.value + 543 }}
@@ -187,7 +191,7 @@
                 :readonly="true"
                 :borderless="true"
                 v-model="insigniaType"
-                :label="`${'ประเภท'}`"
+                :label="`${'ลำดับชั้น'}`"
                 @update:modelValue="clickEditRow"
                 hide-bottom-space
               />
@@ -328,6 +332,72 @@
                 </template>
               </datepicker>
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -364,11 +434,12 @@
             v-if="
               col.name == 'receiveDate' ||
               col.name == 'dateAnnounce' ||
-              col.name == 'createdAt'
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
             "
             class="table_ellipsis"
           >
-            {{ date2Thai(col.value) }}
+            {{ col.value == null ? null : date2Thai(col.value) }}
           </div>
           <div v-else-if="col.name == 'year'" class="table_ellipsis">
             {{ col.value + 543 }}
@@ -440,6 +511,8 @@ const section = ref<string>();
 const page = ref<string>();
 const receiveDate = ref<Date>(new Date());
 const dateAnnounce = ref<Date>(new Date());
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false); //modal add detail
@@ -454,9 +527,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขเคร
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -473,6 +544,8 @@ profileData.insignia.columns.length == 0
       "page",
       "receiveDate",
       "dateAnnounce",
+      "refCommandNo",
+      "refCommandDate",
     ])
   : (visibleColumns.value = profileData.insignia.columns);
 const columns = ref<QTableProps["columns"]>([
@@ -512,7 +585,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "insigniaType",
     align: "left",
-    label: "ประเภท",
+    label: "ลำดับชั้น",
     sortable: true,
     field: "insigniaType",
     headerStyle: "font-size: 14px",
@@ -597,6 +670,28 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -635,7 +730,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "insigniaType",
     align: "left",
-    label: "ประเภท",
+    label: "ลำดับชั้น",
     sortable: true,
     field: "insigniaType",
     headerStyle: "font-size: 14px",
@@ -720,6 +815,28 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "createdFullName",
     align: "left",
@@ -755,6 +872,8 @@ const visibleColumnsHistory = ref<String[]>([
   "page",
   "receiveDate",
   "dateAnnounce",
+  "refCommandNo",
+  "refCommandDate",
   "createdFullName",
   "createdAt",
 ]);
@@ -818,40 +937,41 @@ const fetchInsignia = async () => {
 };
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileInsignId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            insignia: e.insignia,
-            insigniaId: e.insigniaId,
-            insigniaType: e.insigniaType,
-            year: e.year,
-            no: e.no,
-            issue: e.issue,
-            volumeNo: e.volumeNo,
-            volume: e.volume,
-            section: e.section,
-            page: e.page,
-            receiveDate: new Date(e.receiveDate),
-            dateAnnounce: new Date(e.dateAnnounce),
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileInsignId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          insignia: e.insignia,
+          insigniaId: e.insigniaId,
+          insigniaType: e.insigniaType,
+          year: e.year,
+          no: e.no,
+          issue: e.issue,
+          volumeNo: e.volumeNo,
+          volume: e.volume,
+          section: e.section,
+          page: e.page,
+          receiveDate: new Date(e.receiveDate),
+          dateAnnounce: new Date(e.dateAnnounce),
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -890,6 +1010,8 @@ const getData = () => {
   page.value = row.page;
   receiveDate.value = row.receiveDate;
   dateAnnounce.value = row.dateAnnounce;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
   id.value = row.id;
 };
 
@@ -944,34 +1066,35 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileInsignId(profileId.value), {
-        id: id.value,
-        insigniaId: insigniaId.value,
-        insigniaType: insigniaType.value,
-        year: year.value,
-        no: no.value,
-        issue: issue.value,
-        volumeNo: volumeNo.value,
-        volume: volume.value,
-        section: section.value,
-        page: page.value,
-        receiveDate: dateToISO(receiveDate.value),
-        dateAnnounce: dateToISO(dateAnnounce.value),
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileInsignId(profileId.value), {
+      id: id.value,
+      insigniaId: insigniaId.value,
+      insigniaType: insigniaType.value,
+      year: year.value,
+      no: no.value,
+      issue: issue.value,
+      volumeNo: volumeNo.value,
+      volume: volume.value,
+      section: section.value,
+      page: page.value,
+      receiveDate: dateToISO(receiveDate.value),
+      dateAnnounce: dateToISO(dateAnnounce.value),
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
@@ -993,6 +1116,9 @@ const editData = async () => {
       page: page.value,
       receiveDate: dateToISO(receiveDate.value),
       dateAnnounce: dateToISO(dateAnnounce.value),
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -1081,6 +1207,8 @@ const selectData = async (props: DataProps) => {
   page.value = props.row.page;
   receiveDate.value = props.row.receiveDate;
   dateAnnounce.value = props.row.dateAnnounce;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
   id.value = props.row.id;
   await checkRowPage();
 };
@@ -1103,6 +1231,8 @@ const addData = () => {
   page.value = "";
   receiveDate.value = new Date();
   dateAnnounce.value = new Date();
+  refCommandNo.value = "";
+  refCommandDate.value = null;
 };
 
 /**
@@ -1161,6 +1291,9 @@ const clickHistory = async (row: RequestItemsObject) => {
           page: e.page,
           receiveDate: new Date(e.receiveDate),
           dateAnnounce: new Date(e.dateAnnounce),
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -1196,6 +1329,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+const resetFilter = () => {};
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/Leave.vue b/src/modules/04_registry/components/Leave.vue
index 37acb3bf6..fc4d1ae29 100644
--- a/src/modules/04_registry/components/Leave.vue
+++ b/src/modules/04_registry/components/Leave.vue
@@ -251,42 +251,50 @@
       <q-form ref="myForm">
         <DialogHeader tittle="การลา" :close="clickClose" />
         <q-separator />
-        <div class="col-xs-12 col-sm-12 col-md-12">
-          <data-table
-            :rows="rowsTotal"
-            :columns="columnsTotal"
-            :filter="filterTotal"
-            :visible-columns="visibleColumnsTotal"
-            v-model:inputfilter="filterTotal"
-            v-model:inputvisible="visibleColumnsTotal"
-            :nornmalData="true"
-          >
-            <template #columns="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <div v-if="col.name == 'no'">
-                    {{ props.rowIndex + 1 }}
-                  </div>
-                  <div
-                    v-else-if="
-                      col.name == 'numLeave' ||
-                      col.name == 'sumLeave' ||
-                      col.name == 'totalLeave'
-                    "
-                    class="table_ellipsis"
+        <q-card-section>
+          <div class="col-xs-12 col-sm-12 col-md-12">
+            <data-table
+              :rows="rowsTotal"
+              :columns="columnsTotal"
+              :filter="filterTotal"
+              :visible-columns="visibleColumnsTotal"
+              v-model:inputfilter="filterTotal"
+              v-model:inputvisible="visibleColumnsTotal"
+              :nornmalData="true"
+            >
+              <template #columns="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
                   >
-                    {{
-                      col.value == null ? "" : col.value.toLocaleString("en-US")
-                    }}
-                  </div>
-                  <div v-else>
-                    {{ col.value }}
-                  </div>
-                </q-td>
-              </q-tr>
-            </template>
-          </data-table>
-        </div>
+                    <div v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div
+                      v-else-if="
+                        col.name == 'numLeave' ||
+                        col.name == 'sumLeave' ||
+                        col.name == 'totalLeave'
+                      "
+                      class="table_ellipsis"
+                    >
+                      {{
+                        col.value == null
+                          ? ""
+                          : col.value.toLocaleString("en-US")
+                      }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </data-table>
+          </div>
+        </q-card-section>
         <q-separator />
       </q-form>
     </q-card>
@@ -436,9 +444,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขการ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filterTotal = ref<string>("");
 const rowsTotal = ref<RequestItemsTotalObject[]>([]); //select data history
@@ -708,36 +714,34 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    rows.value = [];
-    loaderPage(true);
-    await http
-      .get(config.API.profileLeaveId(profileId.value))
-      .then((res) => {
-        const data = res.data.result;
-        //   console.log(data);
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            typeLeave: e.typeLeave,
-            dateStartLeave: new Date(e.dateStartLeave),
-            dateEndLeave: new Date(e.dateEndLeave),
-            numLeave: e.numLeave,
-            sumLeave: e.sumLeave,
-            totalLeave: e.totalLeave,
-            status: e.status,
-            reason: e.reason,
-            typeLeaveId: e.typeLeaveId,
-          });
+  rows.value = [];
+  loaderPage(true);
+  await http
+    .get(config.API.profileLeaveId(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          typeLeave: e.typeLeave,
+          dateStartLeave: new Date(e.dateStartLeave),
+          dateEndLeave: new Date(e.dateEndLeave),
+          numLeave: e.numLeave,
+          sumLeave: e.sumLeave,
+          totalLeave: e.totalLeave,
+          status: e.status,
+          reason: e.reason,
+          typeLeaveId: e.typeLeaveId,
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const filterSelector = (val: any, update: Function, filtername: string) => {
@@ -958,31 +962,30 @@ const clickSave = async () => {
 //  * บันทึกเพิ่มข้อมูล
 //  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    const sum = Number(numLeave.value) + Number(numUsedLeave.value);
-    loaderPage(true);
-    await http
-      .post(config.API.profileLeaveId(profileId.value), {
-        dateStartLeave: dateToISO(dateRange.value[0]),
-        dateEndLeave: dateToISO(dateRange.value[1]),
-        numLeave: numLeave.value,
-        sumLeave: numUsedLeave.value,
-        totalLeave: sum,
-        status: statLeave.value,
-        reason: reason.value,
-        typeLeaveId: typeLeave.value,
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modalAdd.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  const sum = Number(numLeave.value) + Number(numUsedLeave.value);
+
+  loaderPage(true);
+  await http
+    .post(config.API.profileLeaveId(profileId.value), {
+      dateStartLeave: dateToISO(dateRange.value[0]),
+      dateEndLeave: dateToISO(dateRange.value[1]),
+      numLeave: numLeave.value,
+      sumLeave: numUsedLeave.value,
+      totalLeave: sum,
+      status: statLeave.value,
+      reason: reason.value,
+      typeLeaveId: typeLeave.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modalAdd.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 // /**
@@ -1181,30 +1184,28 @@ const addData = async () => {
  * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
  */
 const clickTotal = async () => {
-  if (profileId.value !== "") {
-    rowsTotal.value = [];
-    loaderPage(true);
-    await http
-      .get(config.API.profileLeaveTotalId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        data.map((e: ResponseTotalObject) => {
-          rowsTotal.value.push({
-            typeLeaveId: e.typeLeaveId,
-            totalLeave: e.totalLeave,
-            limitLeave: e.limitLeave,
-            remainLeave: e.remainLeave,
-            typeLeave: e.typeLeave,
-          });
+  rowsTotal.value = [];
+  loaderPage(true);
+  await http
+    .get(config.API.profileLeaveTotalId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      data.map((e: ResponseTotalObject) => {
+        rowsTotal.value.push({
+          typeLeaveId: e.typeLeaveId,
+          totalLeave: e.totalLeave,
+          limitLeave: e.limitLeave,
+          remainLeave: e.remainLeave,
+          typeLeave: e.typeLeave,
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 // /**
diff --git a/src/modules/04_registry/components/Other.vue b/src/modules/04_registry/components/Other.vue
index 433cd7843..9dd6f1094 100644
--- a/src/modules/04_registry/components/Other.vue
+++ b/src/modules/04_registry/components/Other.vue
@@ -213,9 +213,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขอื่
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -304,30 +302,28 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileOtherId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            date: new Date(e.date),
-            detail: e.detail,
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileOtherId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          detail: e.detail,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -411,25 +407,23 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileOtherId(profileId.value), {
-        id: id.value,
-        date: date.value,
-        detail: detail.value,
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileOtherId(profileId.value), {
+      id: id.value,
+      date: date.value,
+      detail: detail.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index b85921f96..ade292c48 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="col-12 row">
     <div class="row col-12" style="padding-top: 80px">
-      <div id="information" name="1" class="row col-12 information q-mt-sm">
+      <div id="information" name="1" class="row col-12 information">
         <!-- <Informationvue
           v-model:statusEdit="statusEdit"
           :profileType="profileType"
@@ -11,16 +11,20 @@
           :fetchDataProfile="fetchData"
         />
       </div>
-      <div id="government" name="16" class="row col-12">
-        <Government v-model:statusEdit="statusEdit" />
+      <div id="government" name="16" class="row col-12 q-mt-md">
+        <Government
+          v-model:statusEdit="statusEdit"
+          :profileType="profileType"
+          :employeeClass="employeeClass"
+        />
       </div>
-      <div id="address" name="17" class="row col-12">
+      <div id="address" name="17" class="row col-12 q-mt-md">
         <Address v-model:statusEdit="statusEdit" />
       </div>
-      <div id="family" name="18" class="row col-12">
+      <div id="family" name="18" class="row col-12 q-mt-md">
         <Family v-model:statusEdit="statusEdit" />
       </div>
-      <div id="certicate" name="15" class="row col-12">
+      <div id="certicate" name="15" class="row col-12 q-mt-md">
         <Certicate v-model:statusEdit="statusEdit" :profileType="profileType" />
       </div>
       <div id="education" name="2" class="row col-12 q-mt-md">
@@ -46,7 +50,10 @@
           v-model:statusEdit="statusEdit"
           v-if="profileType === 'officer'"
         />
-
+        <SalaryEmployeeTempVue
+          v-model:statusEdit="statusEdit"
+          v-else-if="employeeClass === 'temp'"
+        />
         <SalaryEmployeeVue v-model:statusEdit="statusEdit" v-else />
       </div>
       <div id="rule" name="8" class="row col-12 q-mt-md">
@@ -156,7 +163,7 @@
           "
         >
           <q-tooltip>{{
-            reasonStatus ? "กลับเข้าราชการ" : "ออกราชการ"
+            reasonStatus ? "การกลับเข้ารับราชการ" : "การออกจากราชการ"
           }}</q-tooltip>
         </q-btn>
 
@@ -486,9 +493,14 @@
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <q-btn unelevated label="บันทึก" color="public" @click="Retire"
-          ><!-- icon="mdi-content-save-outline"
-          <q-tooltip>บันทึก</q-tooltip> -->
+        <q-btn
+          flat
+          round
+          color="public"
+          @click="Retire"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </q-card-actions>
     </q-card>
@@ -496,75 +508,36 @@
   <full-loader :visibility="loader"></full-loader>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, defineAsyncComponent } from "vue";
+import { ref, onMounted } from "vue";
 import { useDataStore } from "@/stores/data";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-
+import EducationVue from "@/modules/04_registry/components/Education.vue";
+import TrainVue from "@/modules/04_registry/components/Train.vue";
+import InsigniaVue from "@/modules/04_registry/components/Insignia.vue";
+import CoinedVue from "@/modules/04_registry/components/Coin.vue";
+import AssessmentVue from "@/modules/04_registry/components/Assessment.vue";
+import SalaryVue from "@/modules/04_registry/components/Salary.vue";
+import SalaryEmployeeVue from "@/modules/04_registry/components/SalaryEmployee.vue";
+import SalaryEmployeeTempVue from "@/modules/04_registry/components/SalaryEmployeeTemp.vue";
+import DisciplineVue from "@/modules/04_registry/components/Discipline.vue";
+import LeaveVue from "@/modules/04_registry/components/Leave.vue";
+import TalentVue from "@/modules/04_registry/components/Talent.vue";
+import WorkVue from "@/modules/04_registry/components/Work.vue";
+import RecordVue from "@/modules/04_registry/components/Record.vue";
+import OtherVue from "@/modules/04_registry/components/Other.vue";
+import DocumentVue from "@/modules/04_registry/components/Document.vue";
+import Certicate from "@/modules/04_registry/components/Information/Certicate.vue";
+import Information from "@/modules/04_registry/components/Information/Information.vue";
+import Government from "@/modules/04_registry/components/Information/Government.vue";
+import Address from "@/modules/04_registry/components/Information/Address.vue";
+import Family from "@/modules/04_registry/components/Information/Family.vue";
 import OldName from "@/modules/04_registry/components/Information/OldName.vue";
 import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const EducationVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Education.vue")
-);
-const TrainVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Train.vue")
-);
-const InsigniaVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Insignia.vue")
-);
-const CoinedVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Coin.vue")
-);
-const AssessmentVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Assessment.vue")
-);
-const SalaryVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Salary.vue")
-);
-const SalaryEmployeeVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/SalaryEmployee.vue")
-);
-const DisciplineVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Discipline.vue")
-);
-const LeaveVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Leave.vue")
-);
-const TalentVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Talent.vue")
-);
-const WorkVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Work.vue")
-);
-const RecordVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Record.vue")
-);
-const OtherVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Other.vue")
-);
-const DocumentVue = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Document.vue")
-);
-const Certicate = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Information/Certicate.vue")
-);
-const Information = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Information/Information.vue")
-);
-const Government = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Information/Government.vue")
-);
-const Address = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Information/Address.vue")
-);
-const Family = defineAsyncComponent(
-  () => import("@/modules/04_registry/components/Information/Family.vue")
-);
-
 const $q = useQuasar();
 const store = useDataStore();
 const { changeTab, loaderPage } = store;
@@ -592,6 +565,7 @@ const activeImage = ref<any | null>(null);
 const images = ref<any>([]);
 const profileId = ref<string>(route.params.id.toString());
 const profileType = ref<string>("");
+const employeeClass = ref<string>("temp");
 const leaveDate = ref<Date>(new Date());
 const leaveDetail = ref<string>("");
 const leaveNumberOrder = ref<string>("");
@@ -655,6 +629,8 @@ const fetchData = async () => {
       imageUrl.value = data.avatar;
       position.value = data.position;
       profileType.value = data.profileType;
+      employeeClass.value =
+        data.employeeClass == null ? "" : data.employeeClass;
       const reason = reasonOptions.value.filter(
         (r: DataOption) => r.id == data.leaveReason
       );
diff --git a/src/modules/04_registry/components/Record.vue b/src/modules/04_registry/components/Record.vue
index 86a53b0f7..4eac4635c 100644
--- a/src/modules/04_registry/components/Record.vue
+++ b/src/modules/04_registry/components/Record.vue
@@ -23,8 +23,11 @@
               @click="selectData(props)"
               class="cursor-pointer"
             >
-              <div v-if="col.name == 'date'" class="table_ellipsis">
-                {{ date2Thai(col.value) }}
+              <div
+                v-if="col.name == 'date' || col.name == 'refCommandDate'"
+                class="table_ellipsis"
+              >
+                {{ col.value == null ? null : date2Thai(col.value) }}
               </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
@@ -134,6 +137,72 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -167,10 +236,14 @@
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div
-            v-if="col.name == 'date' || col.name == 'createdAt'"
+            v-if="
+              col.name == 'date' ||
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
+            "
             class="table_ellipsis"
           >
-            {{ date2Thai(col.value) }}
+            {{ col.value == null ? null : date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
@@ -219,6 +292,8 @@ const id = ref<string>("");
 const date = ref<Date>(new Date());
 const detail = ref<string>();
 const reference = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false); //modal add detail
@@ -234,15 +309,19 @@ const tittleHistory = ref<string>(
 );
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.record.columns.length == 0
-  ? (visibleColumns.value = ["date", "detail", "reference"])
+  ? (visibleColumns.value = [
+      "date",
+      "detail",
+      "reference",
+      "refCommandNo",
+      "refCommandDate",
+    ])
   : (visibleColumns.value = profileData.record.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -278,6 +357,28 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -313,6 +414,28 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "createdFullName",
     align: "left",
@@ -340,6 +463,8 @@ const visibleColumnsHistory = ref<String[]>([
   "date",
   "detail",
   "reference",
+  "refCommandNo",
+  "refCommandDate",
   "createdFullName",
   "createdAt",
 ]);
@@ -353,31 +478,32 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileNopaidId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            date: new Date(e.date),
-            detail: e.detail,
-            reference: e.reference,
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileNopaidId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          detail: e.detail,
+          reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -408,6 +534,8 @@ const getData = () => {
   date.value = row.date;
   detail.value = row.detail;
   reference.value = row.reference;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
   id.value = row.id;
 };
 
@@ -462,26 +590,27 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileNopaidId(profileId.value), {
-        id: id.value,
-        date: dateToISO(date.value),
-        detail: detail.value,
-        reference: reference.value,
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileNopaidId(profileId.value), {
+      id: id.value,
+      date: dateToISO(date.value),
+      detail: detail.value,
+      reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
@@ -495,6 +624,9 @@ const editData = async () => {
       date: dateToISO(date.value),
       detail: detail.value,
       reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -575,6 +707,8 @@ const selectData = async (props: DataProps) => {
   date.value = props.row.date;
   detail.value = props.row.detail;
   reference.value = props.row.reference;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
   id.value = props.row.id;
   await checkRowPage();
 };
@@ -589,6 +723,8 @@ const addData = () => {
   date.value = new Date();
   detail.value = "";
   reference.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
 };
 
 /**
@@ -638,6 +774,9 @@ const clickHistory = async (row: RequestItemsObject) => {
           date: new Date(e.date),
           detail: e.detail,
           reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -673,6 +812,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+const resetFilter = () => {};
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/Salary.vue b/src/modules/04_registry/components/Salary.vue
index e5d8812c7..e1e324155 100644
--- a/src/modules/04_registry/components/Salary.vue
+++ b/src/modules/04_registry/components/Salary.vue
@@ -149,9 +149,9 @@
                             :rules="[
                               (val:string) =>
                                 !!val ||
-                                `${'กรุณาเลือกวัน เดือน ปี รับตำแหน่ง'}`,
+                                `${'กรุณาเลือกวัน เดือน ปี'}`,
                             ]"
-                            :label="`${'วัน เดือน ปี รับตำแหน่ง'}`"
+                            :label="`${'วัน เดือน ปี'}`"
                             hide-bottom-space
                           >
                             <template v-slot:prepend>
@@ -257,9 +257,9 @@
                         :borderless="!edit"
                         v-model="positionTypeId"
                         :rules="[
-                          (val:string) => !!val || `${'กรุณาเลือกประเภทตำแหน่ง'}`,
+                          (val:string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`,
                         ]"
-                        :label="`${'ประเภทตำแหน่ง'}`"
+                        :label="`${'ตำแหน่งประเภท'}`"
                         @update:modelValue="clickEditRow"
                         emit-value
                         map-options
@@ -373,9 +373,6 @@
                         :readonly="!edit"
                         :borderless="!edit"
                         v-model="positionSalaryAmount"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                        ]"
                         :label="`${'เงินประจำตำแหน่ง'}`"
                         @update:modelValue="clickEditRow"
                         type="number"
@@ -391,17 +388,36 @@
                         :readonly="!edit"
                         :borderless="!edit"
                         v-model="mouthSalaryAmount"
-                        :rules="[
-                          (val) =>
-                            !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                        ]"
                         :label="`${'เงินค่าตอบแทนรายเดือน'}`"
                         @update:modelValue="clickEditRow"
                         type="number"
                         hide-bottom-space
                       />
                     </div>
-                    <div class="col-xs-12 col-sm-12 col-md-12">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-12 col-sm-12 col-md-12">
                       <q-input
                         :class="getClass(edit)"
                         :outlined="edit"
@@ -432,7 +448,7 @@
                           />
                         </template>
                       </q-input>
-                    </div>
+                    </div> -->
 
                     <div class="row col-xs-12 col-sm-12 col-md-12">
                       <selector
@@ -443,7 +459,7 @@
                         :readonly="!edit"
                         :borderless="!edit"
                         v-model="refSelected"
-                        :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
                         @update:modelValue="clickEditRowRef"
                         option-label="name"
                         :options="refOptions"
@@ -465,9 +481,6 @@
                         :readonly="!edit"
                         :borderless="!edit"
                         v-model="salaryRef"
-                        :rules="[
-                          (val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
-                        ]"
                         :label="`${'เอกสารอ้างอิง'}`"
                         @update:modelValue="clickEditRow"
                         type="textarea"
@@ -587,6 +600,8 @@ const positionLevelId = ref<string>();
 const positionExecutiveId = ref<string>();
 const positionExecutiveSideId = ref<string>();
 const posNoId = ref<string>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date>(new Date());
 const ocOptions = ref<DataOption[]>([]);
 const positionOptions = ref<DataOption[]>([]);
 const positionLineOptions = ref<DataOption[]>([]);
@@ -626,7 +641,11 @@ const refOptions = ref<DataOption[]>([
   },
   {
     id: "20",
-    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "21",
+    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
   },
   {
     id: "0",
@@ -758,7 +777,7 @@ const refOptionsFilter = ref<DataOption[]>([
   },
   {
     id: "20",
-    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} เงินเดือน {เงินเดือน} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
   },
   {
     id: "0",
@@ -911,13 +930,14 @@ profileData.salary.columns.length == 0
       "positionExecutiveSide",
       "salaryClass",
       "salaryRef",
+      "refCommandNo",
     ])
   : (visibleColumns.value = profileData.salary.columns);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
-    label: "วัน เดือน ปี รับตำแหน่ง",
+    label: "วัน เดือน ปี",
     sortable: true,
     field: "date",
     headerStyle: "font-size: 14px",
@@ -1016,7 +1036,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "positionType",
     align: "left",
-    label: "ประเภทตำแหน่ง",
+    label: "ตำแหน่งประเภท",
     sortable: true,
     field: "positionType",
     headerStyle: "font-size: 14px",
@@ -1079,12 +1099,23 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
-    label: "วัน เดือน ปี รับตำแหน่ง",
+    label: "วัน เดือน ปี",
     sortable: true,
     field: "date",
     headerStyle: "font-size: 14px",
@@ -1183,7 +1214,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "positionType",
     align: "left",
-    label: "ประเภทตำแหน่ง",
+    label: "ตำแหน่งประเภท",
     sortable: true,
     field: "positionType",
     headerStyle: "font-size: 14px",
@@ -1246,6 +1277,17 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "createdFullName",
     align: "left",
@@ -1285,6 +1327,7 @@ const visibleColumnsHistory = ref<String[]>([
   "positionExecutiveSide",
   "salaryClass",
   "salaryRef",
+  "refCommandNo",
   "createdFullName",
   "createdAt",
 ]);
@@ -1502,6 +1545,7 @@ const fetchData = async () => {
           positionExecutiveSideId: e.positionExecutiveSideId,
           salaryClass: e.salaryClass,
           salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -1599,6 +1643,7 @@ const getData = async () => {
   positionExecutiveSideId.value = row.positionExecutiveSideId;
   salaryClass.value = row.salaryClass;
   salaryRef.value = row.salaryRef;
+  refCommandNo.value = row.refCommandNo;
   id.value = row.id;
   await fetchPositionNumber(row.ocId);
 };
@@ -1679,7 +1724,7 @@ const templateDetail = async () => {
   );
   if (positionTypeF.length > 0) {
     salaryClass.value =
-      salaryClass.value + `ประเภทตำแหน่ง${positionTypeF[0].name} `;
+      salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
   }
 
   const positionLevelF = positionLevelOptions.value.filter(
@@ -1735,6 +1780,7 @@ const saveData = async () => {
       positionExecutiveSideId: positionExecutiveSideId.value,
       salaryClass: salaryClass.value,
       salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -1770,6 +1816,7 @@ const editData = async () => {
       positionExecutiveSideId: positionExecutiveSideId.value,
       salaryClass: salaryClass.value,
       salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -1863,6 +1910,7 @@ const selectData = async (props: DataProps) => {
   positionExecutiveSideId.value = props.row.positionExecutiveSideId;
   salaryClass.value = props.row.salaryClass;
   salaryRef.value = props.row.salaryRef;
+  refCommandNo.value = props.row.refCommandNo;
   id.value = props.row.id;
   await checkRowPage();
 };
@@ -1892,6 +1940,7 @@ const addData = () => {
   salaryClass.value = "";
   refSelected.value = null;
   salaryRef.value = "";
+  refCommandNo.value = "";
 };
 
 /**
@@ -1970,6 +2019,7 @@ const clickHistory = async (row: RequestItemsObject) => {
           positionExecutiveSideId: e.positionExecutiveSideId,
           salaryClass: e.salaryClass,
           salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -2005,6 +2055,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+const resetFilter = () => {};
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/SalaryEmployee.vue b/src/modules/04_registry/components/SalaryEmployee.vue
index 4028695ba..f85c2e02a 100644
--- a/src/modules/04_registry/components/SalaryEmployee.vue
+++ b/src/modules/04_registry/components/SalaryEmployee.vue
@@ -1,4 +1,3 @@
-divdivdivdivdivdiv
 <!-- card ตำแหน่ง/ค่าจ้าง -->
 <template>
   <q-card flat bordered class="col-12 q-px-lg q-py-md">
@@ -11,7 +10,7 @@ divdivdivdivdivdiv
         v-model:inputfilter="filter"
         v-model:inputvisible="visibleColumns"
         :add="clickAdd"
-        name="ตำแหน่ง/ค่าจ้าง (ลูกจ้าง)"
+        name="ตำแหน่ง/ค่าจ้าง"
         icon="mdi-cash"
         :statusEdit="statusEdit"
       >
@@ -65,58 +64,113 @@ divdivdivdivdivdiv
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
           <div class="row col-12 q-col-gutter-sm">
-            <q-card class="fit q-pa-sm">
-              <q-scroll-area visible style="height: 60vh">
-                <div class="row col-12 q-col-gutter-xs">
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <datepicker
-                      menu-class-name="modalfix"
-                      :readonly="!edit"
-                      v-model="date"
-                      :locale="'th'"
-                      autoApply
-                      :enableTimePicker="false"
-                      @update:modelValue="clickEditRow"
-                      week-start="0"
-                    >
-                      <template #year="{ year }">{{ year + 543 }}</template>
-                      <template #year-overlay-value="{ value }">{{
-                        parseInt(value + 543)
-                      }}</template>
-                      <template #trigger>
-                        <q-input
-                          :class="getClass(edit)"
-                          :outlined="edit"
-                          dense
-                          lazy-rules
-                          :borderless="!edit"
-                          :model-value="date2Thai(date)"
-                          :rules="[
+            <div class="col-xs-12 col-sm-5 row">
+              <q-card flat bordered class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 70vh">
+                  <q-input
+                    outlined
+                    dense
+                    v-model="search"
+                    placeholder="ค้นหา"
+                    class="q-mb-sm"
+                  >
+                    <template v-slot:append>
+                      <q-icon name="mdi-magnify" />
+                    </template>
+                  </q-input>
+                  <q-tree
+                    v-if="edit"
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:selected="agencyId"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  />
+                  <q-tree
+                    v-else
+                    :nodes="nodesTree"
+                    dense
+                    node-key="id"
+                    v-model:expanded="expanded"
+                    no-selection-unset
+                    selected-color="primary"
+                    @update:selected="onSelected"
+                    default-expand-all
+                  >
+                    <template v-slot:default-header="prop">
+                      <div class="row items-center">
+                        <div
+                          class="text-primary"
+                          v-if="selected == prop.node.id"
+                        >
+                          {{ prop.node.label }}
+                        </div>
+                        <div v-else>
+                          {{ prop.node.label }}
+                        </div>
+                      </div>
+                    </template>
+                  </q-tree>
+                </q-scroll-area>
+              </q-card>
+            </div>
+            <div class="col-xs-12 col-sm-7">
+              <q-card class="fit q-pa-sm">
+                <q-scroll-area visible style="height: 60vh">
+                  <div class="row col-12 q-col-gutter-xs">
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <datepicker
+                        menu-class-name="modalfix"
+                        :readonly="!edit"
+                        v-model="date"
+                        :locale="'th'"
+                        autoApply
+                        :enableTimePicker="false"
+                        @update:modelValue="clickEditRow"
+                        week-start="0"
+                      >
+                        <template #year="{ year }">{{ year + 543 }}</template>
+                        <template #year-overlay-value="{ value }">{{
+                          parseInt(value + 543)
+                        }}</template>
+                        <template #trigger>
+                          <q-input
+                            :class="getClass(edit)"
+                            :outlined="edit"
+                            dense
+                            lazy-rules
+                            :borderless="!edit"
+                            :model-value="date2Thai(date)"
+                            :rules="[
                                 (val:string) =>
                                   !!val ||
-                                  `${'กรุณาเลือกวัน เดือน ปี รับตำแหน่ง'}`,
+                                  `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
                               ]"
-                          :label="`${'วัน เดือน ปี รับตำแหน่ง'}`"
-                          hide-bottom-space
-                        >
-                          <template v-slot:prepend>
-                            <q-icon
-                              name="event"
-                              class="cursor-pointer"
-                              :style="
-                                edit
-                                  ? 'color: var(--q-primary)'
-                                  : 'color: var(--q-grey)'
-                              "
-                            >
-                            </q-icon>
-                          </template>
-                        </q-input>
-                      </template>
-                    </datepicker>
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <!-- <selector
+                            :label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
+                            hide-bottom-space
+                          >
+                            <template v-slot:prepend>
+                              <q-icon
+                                name="event"
+                                class="cursor-pointer"
+                                :style="
+                                  edit
+                                    ? 'color: var(--q-primary)'
+                                    : 'color: var(--q-grey)'
+                                "
+                              >
+                              </q-icon>
+                            </template>
+                          </q-input>
+                        </template>
+                      </datepicker>
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <!-- <selector
                       :class="getClass(edit)"
                       :outlined="edit"
                       dense
@@ -141,169 +195,180 @@ divdivdivdivdivdiv
                         doneFn:Function) => filterSelector(inputValue, doneFn,'posNo'
                         ) "
                     /> -->
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="posNoEmployee"
-                      :rules="[
-                            (val:string) =>
-                              !!val || `${'กรุณากรอกตำแหน่งเลขที่'}`,
-                          ]"
-                      :label="`${'ตำแหน่งเลขที่'}`"
-                      @update:modelValue="clickEditRow"
-                      hide-bottom-space
-                      autogrow
-                    />
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <selector
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="employeePositionId"
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
-                      :label="`${'ตำแหน่ง'}`"
-                      @update:modelValue="clickEditRow"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="employeePositionOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue:any,
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoEmployee"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionId"
+                        :rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+                        :label="`${'ตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
                         ) "
-                    />
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <!-- :rules="[(val:string) => !!val || `${'กรุณาเลือกด้าน/สาขา'}`]" -->
-                    <selector
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="employeePositionSideId"
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกด้านของตำแหน่ง'}`]"
-                      :label="`${'ด้านของตำแหน่ง'}`"
-                      @update:modelValue="clickEditRow"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="employeePositionSideOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue:any,
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeePositionSideId"
+                        :label="`${'ด้านของตำแหน่ง'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeePositionSideOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
                         ) "
-                    />
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <selector
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="employeeLevelId"
-                      :rules="[
-                            (val:string) => !!val || `${'กรุณาเลือกระดับชั้นงาน'}`,
-                          ]"
-                      :label="`${'ระดับชั้นงาน'}`"
-                      @update:modelValue="clickEditRow"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="employeeLevelOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue:any,
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeLevelId"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
                         ) "
-                    />
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <selector
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="employeeGroupId"
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกกลุ่มงาน'}`]"
-                      :label="`${'กลุ่มงาน'}`"
-                      @update:modelValue="clickEditRow"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="employeeGroupOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue:any,
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeGroupId"
+                        :label="`${'กลุ่มงาน'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeGroupOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
                         ) "
-                    />
-                  </div>
-                  <div class="col-xs-12">
-                    <selector
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="agencyId"
-                      :rules="[(val:string) => !!val || `${'กรุณาเลือกสังกัด'}`]"
-                      :label="`${'สังกัด'}`"
-                      @update:model-value="(value:string) => selectAgency(value)"
-                      emit-value
-                      map-options
-                      option-label="name"
-                      :options="agencyOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue:any,
+                      />
+                    </div>
+                    <!-- <div class="col-xs-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="agencyId"
+                        :label="`${'สังกัด'}`"
+                        @update:model-value="(value:string) => selectAgency(value)"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="agencyOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
                         ) "
-                    />
-                  </div>
-                  <div class="col-xs-6 col-sm-6 col-md-6">
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="amount"
-                      :rules="[(val:string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
-                      :label="`${'ค่าจ้าง'}`"
-                      @update:modelValue="clickEditRow"
-                      type="number"
-                      hide-bottom-space
-                    />
-                  </div>
-                  <!-- <div class="col-xs-4 col-sm-4 col-md-4">
+                      />
+                    </div> -->
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="amount"
+                        :label="`${'ค่าจ้าง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="number"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refCommandNo"
+                        hide-bottom-space
+                        :label="`${'เลขที่คำสั่ง'}`"
+                        :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                        @update:modelValue="clickEditRow"
+                      >
+                        <template v-slot:append>
+                          <q-icon
+                            name="mdi-file"
+                            class="cursor-pointer"
+                            @click="resetFilter"
+                          />
+                        </template>
+                      </q-input>
+                    </div>
+                    <!-- <div class="col-xs-4 col-sm-4 col-md-4">
                     <q-input
                       :class="getClass(edit)"
                       :outlined="edit"
@@ -312,9 +377,6 @@ divdivdivdivdivdiv
                       :readonly="!edit"
                       :borderless="!edit"
                       v-model="positionSalaryAmount"
-                      :rules="[
-                            (val:string) => !!val || `${'กรุณากรอกเงินประจำตำแหน่ง'}`,
-                          ]"
                       :label="`${'เงินประจำตำแหน่ง'}`"
                       @update:modelValue="clickEditRow"
                       type="number"
@@ -330,16 +392,13 @@ divdivdivdivdivdiv
                       :readonly="!edit"
                       :borderless="!edit"
                       v-model="mouthSalaryAmount"
-                      :rules="[
-                        (val) => !!val || `${'กรุณากรอกเงินค่าตอบแทนรายเดือน'}`,
-                      ]"
                       :label="`${'เงินค่าตอบแทนรายเดือน'}`"
                       @update:modelValue="clickEditRow"
                       type="number"
                       hide-bottom-space
                     />
                   </div> -->
-                  <div class="col-xs-6 col-sm-6 col-md-6">
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
                     <q-input
                       :class="getClass(edit)"
                       :outlined="edit"
@@ -348,73 +407,101 @@ divdivdivdivdivdiv
                       :readonly="!edit"
                       :borderless="!edit"
                       v-model="salaryClass"
-                      :rules="[
-                            (val:string) =>
-                              !!val || `${'กรุณากรอกตำแหน่ง (รายละเอียด)'}`,
-                          ]"
                       :label="`${'ตำแหน่ง (รายละเอียด)'}`"
                       @update:modelValue="clickEditRow"
                       hide-bottom-space
                       autogrow
                     >
-                      <!-- <template v-slot:append>
-                        <q-btn
-                          color="info"
-                          flat
-                          dense
-                          round
-                          size="14px"
-                          icon="mdi-plus"
-                          @click="templateDetail"
-                          :disable="!edit"
-                        />
-                      </template> -->
                     </q-input>
-                  </div>
+                  </div> -->
 
-                  <div class="row col-xs-12 col-sm-12 col-md-12">
-                    <selector
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
-                      :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="refSelected"
-                      :label="`${'ต้นแบบเอกสารอ้างอิง'}`"
-                      @update:modelValue="clickEditRowRef"
-                      option-label="name"
-                      :options="refOptions"
-                      option-value="id"
-                      hide-bottom-space
-                      use-input
-                      input-debounce="0"
-                      @filter="(inputValue:any,
+                    <div class="row col-xs-12 col-sm-12 col-md-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="refSelected"
+                        :label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRowRef"
+                        option-label="name"
+                        :options="refOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
                         doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
                         ) "
-                    />
-                  </div>
-                  <div class="col-xs-12 col-sm-12 col-md-12">
-                    <q-input
-                      :class="getClass(edit)"
-                      :outlined="edit"
-                      dense
-                      lazy-rules
+                      />
+                    </div>
+                    <div class="col-xs-12 col-sm-12 col-md-12">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="salaryRef"
+                        :label="`${'เอกสารอ้างอิง'}`"
+                        @update:modelValue="clickEditRow"
+                        type="textarea"
+                        hide-bottom-space
+                      />
+                    </div>
+                    <!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      menu-class-name="modalfix"
                       :readonly="!edit"
-                      :borderless="!edit"
-                      v-model="salaryRef"
-                      :rules="[
-                            (val:string) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`,
-                          ]"
-                      :label="`${'เอกสารอ้างอิง'}`"
+                      v-model="refCommandDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
                       @update:modelValue="clickEditRow"
-                      type="textarea"
-                      hide-bottom-space
-                    />
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(refCommandDate)"
+                          :rules="[
+                      (val:string) =>
+                        !!val || `${'กรุณาเลือกเลขที่คำสั่งลงวันที่'}`,
+                    ]"
+                          hide-bottom-space
+                          :label="`${'เลขที่คำสั่งลงวันที่'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div> -->
                   </div>
-                </div>
-              </q-scroll-area>
-            </q-card>
+                </q-scroll-area>
+              </q-card>
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -500,10 +587,6 @@ const props = defineProps({
     type: Boolean,
     required: true,
   },
-  statusAdd: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const $q = useQuasar();
@@ -519,6 +602,11 @@ const date = ref<Date>(new Date());
 const amount = ref<number | null>(null);
 const positionSalaryAmount = ref<number | null>(null);
 const mouthSalaryAmount = ref<number | null>(null);
+const search = ref<string>("");
+const refCommandNo = ref<any>();
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
 
 const posNoId = ref<string>("");
 const posNoEmployee = ref<string>("");
@@ -562,7 +650,11 @@ const refOptions = ref<DataOption[]>([
   },
   {
     id: "20",
-    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+  },
+  {
+    id: "21",
+    name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
   },
   {
     id: "0",
@@ -694,7 +786,7 @@ const refOptionsFilter = ref<DataOption[]>([
   },
   {
     id: "20",
-    name: "รับโอน {ประเภทตำแหน่ง} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+    name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
   },
   {
     id: "0",
@@ -826,9 +918,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขตำแ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<ResponseObjectEmployee[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -844,15 +934,16 @@ profileData.salary.columns.length == 0
       "positionEmployeePositionSide",
       "positionEmployeeLevel",
       "positionEmployeeGroup",
-      "salaryClass",
+      //   "salaryClass",
       "salaryRef",
+      "refCommandNo",
     ])
   : (visibleColumns.value = profileData.salary.columns);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
-    label: "วัน เดือน ปี รับตำแหน่ง",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
     sortable: true,
     field: "date",
     headerStyle: "font-size: 14px",
@@ -940,7 +1031,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "positionEmployeeLevel",
     align: "left",
-    label: "ระดับชั้นงาน",
+    label: "ระดับ",
     sortable: true,
     field: "positionEmployeeLevel",
     headerStyle: "font-size: 14px",
@@ -959,18 +1050,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-
-  {
-    name: "salaryClass",
-    align: "left",
-    label: "ตำแหน่ง (รายละเอียด)",
-    sortable: true,
-    field: "salaryClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
   {
     name: "salaryRef",
     align: "left",
@@ -982,12 +1072,23 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
-    label: "วัน เดือน ปี รับตำแหน่ง",
+    label: "วัน เดือน ปี จ้างและแต่งตั้ง",
     sortable: true,
     field: "date",
     headerStyle: "font-size: 14px",
@@ -1075,7 +1176,7 @@ const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "positionEmployeeLevel",
     align: "left",
-    label: "ระดับชั้นงาน",
+    label: "ระดับ",
     sortable: true,
     field: "positionEmployeeLevel",
     headerStyle: "font-size: 14px",
@@ -1094,17 +1195,17 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "salaryClass",
-    align: "left",
-    label: "ตำแหน่ง (รายละเอียด)",
-    sortable: true,
-    field: "salaryClass",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
+  //   {
+  //     name: "salaryClass",
+  //     align: "left",
+  //     label: "ตำแหน่ง (รายละเอียด)",
+  //     sortable: true,
+  //     field: "salaryClass",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  //   },
   {
     name: "salaryRef",
     align: "left",
@@ -1116,6 +1217,17 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "createdFullName",
     align: "left",
@@ -1150,8 +1262,9 @@ const visibleColumnsHistory = ref<String[]>([
   "positionEmployeePositionSide",
   "positionEmployeeLevel",
   "positionEmployeeGroup",
-  "salaryClass",
+  //   "salaryClass",
   "salaryRef",
+  "refCommandNo",
   "createdFullName",
   "createdAt",
 ]);
@@ -1172,6 +1285,7 @@ const fetchDataSelector = async () => {
   await fetchEmployeeLevel();
   await fetchEmployeeGroup();
   await fetchAgency();
+  await nodeTree();
   loaderPage(false);
 };
 // ตำแหน่ง
@@ -1210,7 +1324,7 @@ const fetchEmployeePositionSide = async () => {
       messageError($q, e);
     });
 };
-// ระดับชั้นงาน
+// ระดับ
 const fetchEmployeeLevel = async () => {
   await http
     .get(config.API.positionEmployeeLevel)
@@ -1266,6 +1380,25 @@ const fetchAgency = async () => {
     });
 };
 
+const nodeTree = async () => {
+  loaderPage(true);
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      nodesTree.value = data;
+      if (data.length > 0) {
+        expanded.value = [data[0].id];
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
+};
+
 const selectAgency = (val: string) => {
   fetchPositionNumber(val);
   clickEditRow();
@@ -1334,51 +1467,52 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 
 const fetchData = async () => {
   loaderPage(true);
-  if (profileId.value !== "") {
-    await http
-      .get(config.API.profileSalaryEmployeeId(profileId.value))
-      .then((res) => {
-        const data = res.data.result;
-        //   console.log(data);
-        rows.value = [];
-        data.map((e: ResponseObjectEmployee) => {
-          rows.value.push({
-            id: e.id,
-            date: new Date(e.date),
-            amount: e.amount,
-            positionSalaryAmount: e.positionSalaryAmount,
-            mouthSalaryAmount: e.mouthSalaryAmount,
-            oc: e.oc,
-            ocId: e.ocId,
-            posNo: e.posNo,
-            posNoId: e.posNoId,
-            posNoEmployee: e.posNoEmployee,
-            positionEmployeeGroup: e.positionEmployeeGroup,
-            positionEmployeeGroupId: e.positionEmployeeGroupId,
-            positionEmployeeLevel: e.positionEmployeeLevel,
-            positionEmployeeLevelId: e.positionEmployeeLevelId,
-            positionEmployeePosition: e.positionEmployeePosition,
-            positionEmployeePositionId: e.positionEmployeePositionId,
-            positionEmployeePositionSide: e.positionEmployeePositionSide,
-            positionEmployeePositionSideId: e.positionEmployeePositionSideId,
-            salaryClass: e.salaryClass,
-            salaryRef: e.salaryRef,
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  await http
+    .get(config.API.profileSalaryEmployeeId(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      rows.value = [];
+      data.map((e: ResponseObjectEmployee) => {
+        rows.value.push({
+          id: e.id,
+          date: new Date(e.date),
+          amount: e.amount,
+          positionSalaryAmount: e.positionSalaryAmount,
+          mouthSalaryAmount: e.mouthSalaryAmount,
+          oc: e.oc,
+          ocId: e.ocId,
+          posNo: e.posNo,
+          posNoId: e.posNoId,
+          posNoEmployee: e.posNoEmployee,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          positionEmployeeGroupId: e.positionEmployeeGroupId,
+          positionEmployeeLevel: e.positionEmployeeLevel,
+          positionEmployeeLevelId: e.positionEmployeeLevelId,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionId: e.positionEmployeePositionId,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeePositionSideId: e.positionEmployeePositionSideId,
+          salaryClass: e.salaryClass,
+          salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
+          //   refCommandDate: new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 const fetchPositionNumber = async (id: string) => {
   //   loaderPage(true);
+  if (id == null || id == "") return;
   await http
     .get(config.API.getPositionNumberIdByOcId(id))
     .then((res) => {
@@ -1445,6 +1579,7 @@ const getData = async () => {
 
   salaryClass.value = row.salaryClass ?? "";
   salaryRef.value = row.salaryRef ?? "";
+  refCommandNo.value = row.refCommandNo ?? "";
   id.value = row.id;
   await fetchPositionNumber(row.ocId ?? "");
 };
@@ -1520,7 +1655,7 @@ const templateDetail = async () => {
   //   );
   //   if (positionTypeF.length > 0) {
   //     salaryClass.value =
-  //       salaryClass.value + `ประเภทตำแหน่ง${positionTypeF[0].name} `;
+  //       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
   //   }
   //   const positionLevelF = positionLevelOptions.value.filter(
   //     (r: DataOption) => r.id == positionLevelId.value
@@ -1556,35 +1691,34 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileSalaryEmployeeId(profileId.value), {
-        amount: amount.value,
-        date: dateToISO(date.value),
-        positionSalaryAmount: positionSalaryAmount.value,
-        mouthSalaryAmount: mouthSalaryAmount.value,
-        ocId: agencyId.value,
-        //   posNoId: posNoId.value,
-        posNoEmployee: posNoEmployee.value,
-        positionEmployeeGroupId: employeeGroupId.value,
-        positionEmployeeLevelId: employeeLevelId.value,
-        positionEmployeePositionId: employeePositionId.value,
-        positionEmployeePositionSideId: employeePositionSideId.value,
-        salaryClass: salaryClass.value,
-        salaryRef: salaryRef.value,
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileSalaryEmployeeId(profileId.value), {
+      amount: amount.value,
+      date: dateToISO(date.value),
+      positionSalaryAmount: positionSalaryAmount.value,
+      mouthSalaryAmount: mouthSalaryAmount.value,
+      ocId: agencyId.value,
+      //   posNoId: posNoId.value,
+      posNoEmployee: posNoEmployee.value,
+      positionEmployeeGroupId: employeeGroupId.value,
+      positionEmployeeLevelId: employeeLevelId.value,
+      positionEmployeePositionId: employeePositionId.value,
+      positionEmployeePositionSideId: employeePositionSideId.value,
+      salaryClass: salaryClass.value,
+      salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
@@ -1607,6 +1741,7 @@ const editData = async () => {
       positionEmployeePositionSideId: employeePositionSideId.value,
       salaryClass: salaryClass.value,
       salaryRef: salaryRef.value,
+      refCommandNo: refCommandNo.value,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -1710,6 +1845,7 @@ const selectData = async (props: DataPropsEmployee) => {
   //   refSelected.value = props.row
   salaryClass.value = props.row.salaryClass ?? "";
   salaryRef.value = props.row.salaryRef ?? "";
+  refCommandNo.value = props.row.refCommandNo ?? "";
   id.value = props.row.id;
   await fetchPositionNumber(props.row.ocId ?? "");
   await checkRowPage();
@@ -1739,6 +1875,7 @@ const addData = () => {
   salaryClass.value = "";
   refSelected.value = null;
   salaryRef.value = "";
+  refCommandNo.value = "";
 };
 
 /**
@@ -1767,6 +1904,10 @@ const clickCancel = async () => {
   }
 };
 
+const onSelected = async (id: string) => {
+  await fetchPositionNumber(id);
+};
+
 /**
  * เช็คว่ามีการแก้ไขข้อมูล
  */
@@ -1817,6 +1958,7 @@ const clickHistory = async (row: RequestItemsEmployee) => {
           positionEmployeePositionSideId: e.positionEmployeePositionSideId,
           salaryClass: e.salaryClass,
           salaryRef: e.salaryRef,
+          refCommandNo: e.refCommandNo,
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -1852,6 +1994,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+const resetFilter = () => {};
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/SalaryEmployeeTemp.vue b/src/modules/04_registry/components/SalaryEmployeeTemp.vue
new file mode 100644
index 000000000..64bc1f4de
--- /dev/null
+++ b/src/modules/04_registry/components/SalaryEmployeeTemp.vue
@@ -0,0 +1,2087 @@
+<!-- card ตำแหน่ง/ค่าจ้าง -->
+<template>
+	<q-card flat bordered class="col-12 q-px-lg q-py-md">
+		<q-form ref="myForm">
+			<ProfileTable
+				:rows="rows"
+				:columns="columns"
+				:filter="filter"
+				:visible-columns="visibleColumns"
+				v-model:inputfilter="filter"
+				v-model:inputvisible="visibleColumns"
+				:add="clickAdd"
+				name="ตำแหน่ง/ค่าจ้าง"
+				icon="mdi-cash"
+				:statusEdit="statusEdit"
+			>
+				<template #columns="props">
+					<q-tr :props="props">
+						<q-td
+							v-for="col in props.cols"
+							:key="col.name"
+							:props="props"
+							@click="selectData(props)"
+							class="cursor-pointer"
+						>
+							<div
+								v-if="col.name == 'date'"
+								class="table_ellipsis"
+							>
+								{{ date2Thai(col.value) }}
+							</div>
+							<div
+								v-else-if="
+									col.name == 'positionSalaryAmount' ||
+									col.name == 'mouthSalaryAmount' ||
+									col.name == 'amount'
+								"
+								class="table_ellipsis"
+							>
+								{{
+									col.value == null
+										? ""
+										: col.value.toLocaleString("en-US")
+								}}
+							</div>
+							<div v-else class="table_ellipsis">
+								{{ col.value }}
+							</div>
+						</q-td>
+						<q-td auto-width>
+							<q-btn
+								color="info"
+								flat
+								dense
+								round
+								size="14px"
+								icon="mdi-history"
+								@click="clickHistory(props.row)"
+							/>
+						</q-td>
+					</q-tr>
+				</template>
+			</ProfileTable>
+		</q-form>
+	</q-card>
+	<!-- popup Edit window-->
+	<q-dialog v-model="modal" persistent>
+		<q-card style="width: 60vw; max-width: 80vw">
+			<q-form ref="myForm">
+				<DialogHeader tittle="ตำแหน่ง/ค่าจ้าง" :close="clickClose" />
+				<q-separator />
+				<q-card-section class="q-pa-sm bg-grey-1">
+					<div class="row col-12 q-col-gutter-sm">
+						<div class="col-xs-12 col-sm-5 row">
+							<q-card flat bordered class="fit q-pa-sm">
+								<q-scroll-area visible style="height: 70vh">
+									<q-input
+										outlined
+										dense
+										v-model="search"
+										placeholder="ค้นหา"
+										class="q-mb-sm"
+									>
+										<template v-slot:append>
+											<q-icon name="mdi-magnify" />
+										</template>
+									</q-input>
+									<q-tree
+										v-if="edit"
+										:nodes="nodesTree"
+										dense
+										node-key="id"
+										v-model:selected="agencyId"
+										v-model:expanded="expanded"
+										no-selection-unset
+										selected-color="primary"
+										@update:selected="onSelected"
+										default-expand-all
+									/>
+									<q-tree
+										v-else
+										:nodes="nodesTree"
+										dense
+										node-key="id"
+										v-model:expanded="expanded"
+										no-selection-unset
+										selected-color="primary"
+										@update:selected="onSelected"
+										default-expand-all
+									>
+										<template v-slot:default-header="prop">
+											<div class="row items-center">
+												<div
+													class="text-primary"
+													v-if="
+														selected == prop.node.id
+													"
+												>
+													{{ prop.node.label }}
+												</div>
+												<div v-else>
+													{{ prop.node.label }}
+												</div>
+											</div>
+										</template>
+									</q-tree>
+								</q-scroll-area>
+							</q-card>
+						</div>
+						<div class="col-xs-12 col-sm-7">
+							<q-card class="fit q-pa-sm">
+								<q-scroll-area visible style="height: 60vh">
+									<div class="row col-12 q-col-gutter-xs">
+										<div class="col-xs-6 col-sm-6 col-md-6">
+											<datepicker
+												menu-class-name="modalfix"
+												:readonly="!edit"
+												v-model="date"
+												:locale="'th'"
+												autoApply
+												:enableTimePicker="false"
+												@update:modelValue="
+													clickEditRow
+												"
+												week-start="0"
+											>
+												<template #year="{ year }">{{
+													year + 543
+												}}</template>
+												<template
+													#year-overlay-value="{
+														value,
+													}"
+													>{{
+														parseInt(value + 543)
+													}}</template
+												>
+												<template #trigger>
+													<q-input
+														:class="getClass(edit)"
+														:outlined="edit"
+														dense
+														lazy-rules
+														:borderless="!edit"
+														:model-value="
+															date2Thai(date)
+														"
+														:rules="[
+                                (val:string) =>
+                                  !!val ||
+                                  `${'กรุณาเลือกวัน เดือน ปี จ้างและแต่งตั้ง'}`,
+                              ]"
+														:label="`${'วัน เดือน ปี จ้างและแต่งตั้ง'}`"
+														hide-bottom-space
+													>
+														<template
+															v-slot:prepend
+														>
+															<q-icon
+																name="event"
+																class="cursor-pointer"
+																:style="
+																	edit
+																		? 'color: var(--q-primary)'
+																		: 'color: var(--q-grey)'
+																"
+															>
+															</q-icon>
+														</template>
+													</q-input>
+												</template>
+											</datepicker>
+										</div>
+										<!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <q-input
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="posNoEmployee"
+                        :label="`${'ตำแหน่งเลขที่'}`"
+                        @update:modelValue="clickEditRow"
+                        hide-bottom-space
+                        autogrow
+                      />
+                    </div> -->
+										<div class="col-xs-6 col-sm-6 col-md-6">
+											<selector
+												:class="getClass(edit)"
+												:outlined="edit"
+												dense
+												lazy-rules
+												:readonly="!edit"
+												:borderless="!edit"
+												v-model="employeePositionId"
+												:rules="[(val:string) => !!val || `${'กรุณาเลือกตำแหน่ง'}`]"
+												:label="`${'ตำแหน่ง'}`"
+												@update:modelValue="
+													clickEditRow
+												"
+												emit-value
+												map-options
+												option-label="name"
+												:options="
+													employeePositionOptions
+												"
+												option-value="id"
+												hide-bottom-space
+												use-input
+												input-debounce="0"
+												@filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePosition'
+                        ) "
+											/>
+										</div>
+										<div class="col-xs-6 col-sm-6 col-md-6">
+											<selector
+												:class="getClass(edit)"
+												:outlined="edit"
+												dense
+												lazy-rules
+												:readonly="!edit"
+												:borderless="!edit"
+												v-model="employeePositionSideId"
+												:label="`${'ด้านของตำแหน่ง'}`"
+												@update:modelValue="
+													clickEditRow
+												"
+												emit-value
+												map-options
+												option-label="name"
+												:options="
+													employeePositionSideOptions
+												"
+												option-value="id"
+												hide-bottom-space
+												use-input
+												input-debounce="0"
+												@filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeePositionSide'
+                        ) "
+											/>
+										</div>
+										<!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="employeeLevelId"
+                        :label="`${'ระดับ'}`"
+                        @update:modelValue="clickEditRow"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="employeeLevelOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeLevel'
+                        ) "
+                      />
+                    </div> -->
+										<div class="col-xs-6 col-sm-6 col-md-6">
+											<selector
+												:class="getClass(edit)"
+												:outlined="edit"
+												dense
+												lazy-rules
+												:readonly="!edit"
+												:borderless="!edit"
+												v-model="employeeGroupId"
+												:label="`${'กลุ่มงาน'}`"
+												@update:modelValue="
+													clickEditRow
+												"
+												emit-value
+												map-options
+												option-label="name"
+												:options="employeeGroupOptions"
+												option-value="id"
+												hide-bottom-space
+												use-input
+												input-debounce="0"
+												@filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'employeeGroup'
+                        ) "
+											/>
+										</div>
+										<!-- <div class="col-xs-12">
+                      <selector
+                        :class="getClass(edit)"
+                        :outlined="edit"
+                        dense
+                        lazy-rules
+                        :readonly="!edit"
+                        :borderless="!edit"
+                        v-model="agencyId"
+                        :label="`${'สังกัด'}`"
+                        @update:model-value="(value:string) => selectAgency(value)"
+                        emit-value
+                        map-options
+                        option-label="name"
+                        :options="agencyOptions"
+                        option-value="id"
+                        hide-bottom-space
+                        use-input
+                        input-debounce="0"
+                        @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'agency'
+                        ) "
+                      />
+                    </div> -->
+										<div class="col-xs-6 col-sm-6 col-md-6">
+											<q-input
+												:class="getClass(edit)"
+												:outlined="edit"
+												dense
+												lazy-rules
+												:readonly="!edit"
+												:borderless="!edit"
+												v-model="amount"
+												:label="`${'ค่าจ้าง'}`"
+												@update:modelValue="
+													clickEditRow
+												"
+												type="number"
+												hide-bottom-space
+											/>
+										</div>
+										<div class="col-xs-6 col-sm-6 col-md-6">
+											<q-input
+												:class="getClass(edit)"
+												:outlined="edit"
+												dense
+												lazy-rules
+												:readonly="!edit"
+												:borderless="!edit"
+												v-model="refCommandNo"
+												hide-bottom-space
+												:label="`${'เลขที่คำสั่ง'}`"
+												:rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+												@update:modelValue="
+													clickEditRow
+												"
+											>
+												<template v-slot:append>
+													<q-icon
+														name="mdi-file"
+														class="cursor-pointer"
+														@click="resetFilter"
+													/>
+												</template>
+											</q-input>
+										</div>
+										<!-- <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="positionSalaryAmount"
+                      :label="`${'เงินประจำตำแหน่ง'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div>
+                  <div class="col-xs-4 col-sm-4 col-md-4">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="mouthSalaryAmount"
+                      :label="`${'เงินค่าตอบแทนรายเดือน'}`"
+                      @update:modelValue="clickEditRow"
+                      type="number"
+                      hide-bottom-space
+                    />
+                  </div> -->
+										<!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <q-input
+                      :class="getClass(edit)"
+                      :outlined="edit"
+                      dense
+                      lazy-rules
+                      :readonly="!edit"
+                      :borderless="!edit"
+                      v-model="salaryClass"
+                      :label="`${'ตำแหน่ง (รายละเอียด)'}`"
+                      @update:modelValue="clickEditRow"
+                      hide-bottom-space
+                      autogrow
+                    >
+                    </q-input>
+                  </div> -->
+
+										<div
+											class="row col-xs-12 col-sm-12 col-md-12"
+										>
+											<selector
+												:class="getClass(edit)"
+												:outlined="edit"
+												dense
+												lazy-rules
+												:readonly="!edit"
+												:borderless="!edit"
+												v-model="refSelected"
+												:label="`${'ต้นแบบ (template) เอกสารอ้างอิง'}`"
+												@update:modelValue="
+													clickEditRowRef
+												"
+												option-label="name"
+												:options="refOptions"
+												option-value="id"
+												hide-bottom-space
+												use-input
+												input-debounce="0"
+												@filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'ref'
+                        ) "
+											/>
+										</div>
+										<div
+											class="col-xs-12 col-sm-12 col-md-12"
+										>
+											<q-input
+												:class="getClass(edit)"
+												:outlined="edit"
+												dense
+												lazy-rules
+												:readonly="!edit"
+												:borderless="!edit"
+												v-model="salaryRef"
+												:label="`${'เอกสารอ้างอิง'}`"
+												@update:modelValue="
+													clickEditRow
+												"
+												type="textarea"
+												hide-bottom-space
+											/>
+										</div>
+										<!-- <div class="col-xs-6 col-sm-6 col-md-6">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      :readonly="!edit"
+                      v-model="refCommandDate"
+                      :locale="'th'"
+                      autoApply
+                      :enableTimePicker="false"
+                      @update:modelValue="clickEditRow"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          :class="getClass(edit)"
+                          :outlined="edit"
+                          dense
+                          lazy-rules
+                          :borderless="!edit"
+                          :model-value="date2Thai(refCommandDate)"
+                          :rules="[
+                      (val:string) =>
+                        !!val || `${'กรุณาเลือกเลขที่คำสั่งลงวันที่'}`,
+                    ]"
+                          hide-bottom-space
+                          :label="`${'เลขที่คำสั่งลงวันที่'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              :style="
+                                edit
+                                  ? 'color: var(--q-primary)'
+                                  : 'color: var(--q-grey)'
+                              "
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div> -->
+									</div>
+								</q-scroll-area>
+							</q-card>
+						</div>
+					</div>
+				</q-card-section>
+				<q-separator />
+				<DialogFooter
+					:cancel="clickCancel"
+					:edit="clickEdit"
+					:save="clickSave"
+					:validate="validateData"
+					:clickNext="clickNext"
+					:clickPrevious="clickPrevious"
+					:clickDelete="clickDelete"
+					v-model:editvisible="edit"
+					v-model:next="next"
+					v-model:previous="previous"
+					v-model:modalEdit="modalEdit"
+				/>
+			</q-form>
+		</q-card>
+	</q-dialog>
+	<HistoryTable
+		:rows="rowsHistory"
+		:columns="columnsHistory"
+		:filter="filterHistory"
+		:visible-columns="visibleColumnsHistory"
+		v-model:modal="modalHistory"
+		v-model:inputfilter="filterHistory"
+		v-model:inputvisible="visibleColumnsHistory"
+		v-model:tittle="tittleHistory"
+	>
+		<template #columns="props">
+			<q-tr :props="props">
+				<q-td v-for="col in props.cols" :key="col.name" :props="props">
+					<div
+						v-if="col.name == 'date' || col.name == 'createdAt'"
+						class="table_ellipsis"
+					>
+						{{ date2Thai(col.value) }}
+					</div>
+					<div
+						v-else-if="
+							col.name == 'positionSalaryAmount' ||
+							col.name == 'mouthSalaryAmount' ||
+							col.name == 'amount'
+						"
+						class="table_ellipsis"
+					>
+						{{
+							col.value == null
+								? ""
+								: col.value.toLocaleString("en-US")
+						}}
+					</div>
+					<div v-else class="table_ellipsis">
+						{{ col.value }}
+					</div>
+				</q-td>
+			</q-tr>
+		</template>
+	</HistoryTable>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { useProfileDataStore } from "@/modules/04_registry/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
+import ProfileTable from "@/modules/04_registry/components/Table.vue";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogFooter from "@/modules/04_registry/components/DialogFooter.vue";
+import { useQuasar } from "quasar";
+import type {
+	RequestItemsEmployee,
+	DataPropsEmployee,
+} from "@/modules/04_registry/interface/request/Salary";
+import type { ResponseObjectEmployee } from "@/modules/04_registry/interface/response/Salary";
+import type {
+	DataOption,
+	treeTab,
+} from "@/modules/04_registry/interface/index/Main";
+import HistoryTable from "@/components/TableHistory.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QTableProps } from "quasar";
+
+const props = defineProps({
+	statusEdit: {
+		type: Boolean,
+		required: true,
+	},
+});
+
+const $q = useQuasar();
+const store = useProfileDataStore();
+const { profileData, changeProfileColumns } = store;
+const dataStore = useDataStore();
+const { loaderPage } = dataStore;
+const mixin = useCounterMixin();
+const { date2Thai, success, dateToISO, messageError, dialogMessage } = mixin;
+const route = useRoute();
+const id = ref<string>("");
+const date = ref<Date>(new Date());
+const amount = ref<number | null>(null);
+const positionSalaryAmount = ref<number | null>(null);
+const mouthSalaryAmount = ref<number | null>(null);
+const search = ref<string>("");
+const expanded = ref<string[]>([]);
+const selected = ref<string>("");
+const nodesTree = ref<treeTab[]>([]);
+const refCommandNo = ref<any>();
+
+const posNoId = ref<string>("");
+const posNoEmployee = ref<string>("");
+const posNoOptions = ref<DataOption[]>([]);
+const posNoOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionId = ref<string>("");
+const employeePositionOptions = ref<DataOption[]>([]);
+const employeePositionOptionsFilter = ref<DataOption[]>([]);
+
+const employeePositionSideId = ref<string>("");
+const employeePositionSideOptions = ref<DataOption[]>([]);
+const employeePositionSideOptionsFilter = ref<DataOption[]>([]);
+
+const employeeLevelId = ref<string>("");
+const employeeLevelOptions = ref<DataOption[]>([]);
+const employeeLevelOptionsFilter = ref<DataOption[]>([]);
+
+const employeeGroupId = ref<string>("");
+const employeeGroupOptions = ref<DataOption[]>([]);
+const employeeGroupOptionsFilter = ref<DataOption[]>([]);
+
+const agencyId = ref<string>("");
+const agencyOptions = ref<DataOption[]>([]);
+const agencyOptionsFilter = ref<DataOption[]>([]);
+
+const refSelected = ref<DataOption | null>(null);
+const refOptions = ref<DataOption[]>([
+	{
+		id: "17",
+		name: "****************  ข้าราชการสามัญ  **********************",
+		disable: true,
+	},
+	{
+		id: "18",
+		name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "19",
+		name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "20",
+		name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "21",
+		name: "เลื่อนระดับ {ประเภทตำแหน่ง} จาก ตำแหน่งเลขที่ {ตำแหน่งเลขที่เดิม} ตำแหน่ง {ตำแหน่งเดิม} ระดับ {ระดับเดิม} {สำนักเดิม} เงินเดือน {เงินเดือนเดิม} เป็น ตำแหน่งเลขที่ {ตำแหน่งเลขที่ใหม่} ตำแหน่ง {ตำแหน่งใหม่} ระดับ {ระดับใหม่} {สำนักใหม่} เงินเดือน {เงินเดือนใหม่} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "0",
+		name: "****************  ครู  **********************",
+		disable: true,
+	},
+	{
+		id: "1",
+		name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "2",
+		name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{ id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+	{
+		id: "4",
+		name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+	},
+	{
+		id: "5",
+		name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+	},
+	{
+		id: "6",
+		name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "7",
+		name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "8",
+		name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+	},
+	{
+		id: "9",
+		name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "10",
+		name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "11",
+		name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "12",
+		name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "13",
+		name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "14",
+		name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "15",
+		name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{ id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+	{
+		id: "21",
+		name: "****************  ลูกจ้าง  **********************",
+		disable: true,
+	},
+	{
+		id: "22",
+		name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "23",
+		name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "24",
+		name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "25",
+		name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "26",
+		name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "27",
+		name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "28",
+		name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{ id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+	{
+		id: "30",
+		name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "31",
+		name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+	},
+	{
+		id: "32",
+		name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+	},
+	{
+		id: "33",
+		name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+]);
+const refOptionsFilter = ref<DataOption[]>([
+	{
+		id: "17",
+		name: "****************  ข้าราชการสามัญ  **********************",
+		disable: true,
+	},
+	{
+		id: "18",
+		name: "รักษาการในตำแหน่ง {ตำแหน่ง} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "19",
+		name: "ช่วยราชการ หน่วนงาน {สังกัด} ตั้งแต่ {วัน} {เดือน} {พ.ศ.} ถึงวันที่ {วัน} {เดือน} {พ.ศ.} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "20",
+		name: "รับโอน {ตำแหน่งประเภท} จากตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} เป็นตำแหน่ง {ตำแหน่ง} ระดับ {ระดับ} สังกัด {สังกัด} ตำแหน่งเลขที่ {ตำแหน่งเลขที่} ค่าจ้าง {ค่าจ้าง} คำสั่ง กทม.ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "0",
+		name: "****************  ครู  **********************",
+		disable: true,
+	},
+	{
+		id: "1",
+		name: "บรรจุและแต่งตั้งผู้ผ่านการคัดเลือกได้วุฒิ  {วุฒิ} คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "2",
+		name: "เลื่อนค่าจ้าง (1 ขั้น) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{ id: "3", name: "ปรับอัตราค่าจ้างครู บัญชีใหม่ {พ.ศ.}" },
+	{
+		id: "4",
+		name: "ปรับให้เข้าระดับและขั้นค่าจ้างตามบัญชีอัตราค่าจ้างข้าราชการพลเรือน บัญชี ก. ท้ายพระราชบัญญัติระเบียบข้าราชการพลเรือน(ฉบับที่6) พ.ศ.{ปี}",
+	},
+	{
+		id: "5",
+		name: "ปรับอัตราค่าจ้าง ตามบัญชี ข. ท้าย พ.ร.บ.ระเบียบข้าราชการพลเรือน(ฉบับที่ ) พ.ศ.{ปี}",
+	},
+	{
+		id: "6",
+		name: "ปรับค่าจ้างตาม พ.ร.บ.ค่าจ้างฯ (ฉบับที่ ) {พ.ศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "7",
+		name: "ปรับค่าจ้างตาม พ.ร.ฎ.การปรับค่าจ้างขั้นต่ำขั้นสูงของข้าราชการสามัญฯ {พ.ศ.}  คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "8",
+		name: "ปรับอัตราค่าจ้างตามพระราชกฤษฎีกา การปรับอัตราค่าจ้างของข้าราชการ {พ.ศ.}",
+	},
+	{
+		id: "9",
+		name: "ปรับอัตราค่าจ้างตามหนังสือ ก.ค.ศ.ด่วนมาก ที่ / ลว. 4 ธ.ค. 2555 (ปรับตามคุณวุฒิ) คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "10",
+		name: "แต่งตั้งข้าราชการ คำสั่ง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "11",
+		name: "การแต่งตั้งข้าราชการสามัญ กทม.ฯ ตาม พรฎ.ระเบียบข้าราชการสามัญ กทม. พ.ศ. ดำรงตำแหน่งฯ ตาม พรบ.ระเบียบข้าราชการกทม.ฯ พ.ศ. คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "12",
+		name: "แต่งตั้งครูผู้ช่วยให้ดำรงตำแหน่งครู คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "13",
+		name: "ได้รับค่าจ้างสูงกว่าหรือต่ำกว่าขั้นต่ำฯ คำสั่ง กทม. ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "14",
+		name: "ได้รับค่าจ้างสูงกว่าขั้นสูงของอันดับและเลื่อนขั้นค่าจ้าง คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "15",
+		name: "ให้ข้าราชการสามัญ กทม. มีวิทยฐานะ {วิทยฐานะ} และรับค่าจ้างอันดับ {คศ.} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{ id: "16", name: "มาตรา 9 แห่ง พรฎ.ระเบียบข้าราชการสามัญ กทม. {พ.ศ}" },
+	{
+		id: "21",
+		name: "****************  ลูกจ้าง  **********************",
+		disable: true,
+	},
+	{
+		id: "22",
+		name: "จ้างและแต่งตั้งลูกจ้างประจำ คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "23",
+		name: "เลื่อนค่าจ้างตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "24",
+		name: "ได้รับอัตราค่าจ้างสูงกว่าอัตราค่าจ้างขั้นสูงของตำแหน่งที่ได้รับแต่งตั้งในแต่ละระดับ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "25",
+		name: "แก้ไขคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "26",
+		name: "ยกเลิกคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "27",
+		name: "แต่งตั้งลูกจ้างประจำตามมาตรฐานกำหนดตำแหน่งฯ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "28",
+		name: "แต่งตั้งลูกจ้างประจำ ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{ id: "29", name: "ไม่เลื่อนขั้นค่าจ้าง เนื่องจาก" },
+	{
+		id: "30",
+		name: "ได้รับเงินตอบแทนพิเศษร้อยละ {} คำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+	{
+		id: "31",
+		name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานคร ตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง พ.ศ. 2557",
+	},
+	{
+		id: "32",
+		name: "ปรับอัตราค่าจ้างลูกจ้างประจำกรุงเทพมหานครตามข้อบังคับกรุงเทพมหานครว่าด้วยการกำหนดอัตราค่าจ้างขั้นต่ำสุดและสูงสุดของลูกจ้าง (ฉบับที่ {}) พ.ศ. 2557",
+	},
+	{
+		id: "33",
+		name: "ปรับอัตราค่าจ้าง ตามหนังสือกระทรวงการคลังฯ ที่ กค 0428/ว 47 ลว. 29 พ.ค. 2558 และข้อบังคับ กทม. ว่าด้วยการกำหนดอัตราค่าจ้างฯ ตั้งแต่วันที่ 1 ธ.ค. 2557 ข้อ {} ตามคำสั่ง {สนข.} ที่ {ที่}/{พ.ศ} ลงวันที่ {วัน} {เดือน} {พ.ศ.}",
+	},
+]);
+const salaryClass = ref<string>();
+const salaryRef = ref<string>();
+const myForm = ref<any>(); //form data input
+const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
+const modal = ref<boolean>(false); //modal add detail
+const modalEdit = ref<boolean>(false); //modal ที่แสดงใช้สำหรับแก้ไขหรือไม่
+const rawItem = ref<ResponseObjectEmployee>(); //ข้อมูลเดิมที่เลือกใน row นั้น
+const rowIndex = ref<number>(0); //indexข้อมูลเดิมที่เลือกใน row นั้น
+const previous = ref<boolean>(); //แสดงปุ่มดูข้อมูลก่อนหน้า
+const next = ref<boolean>(); //แสดงปุ่มดูข้อมูลต่อไป
+const editRow = ref<boolean>(false); //เช็คมีการแก้ไขข้อมูล
+const rowsHistory = ref<ResponseObjectEmployee[]>([]); //select data history
+const tittleHistory = ref<string>("ประวัติแก้ไขตำแหน่ง/ค่าจ้าง"); //
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
+const profileId = ref<string>(route.params.id.toString());
+const rows = ref<ResponseObjectEmployee[]>([]);
+const filter = ref<string>(""); //search data table
+const visibleColumns = ref<String[]>([]);
+profileData.salary.columns.length == 0
+	? (visibleColumns.value = [
+			"date",
+			"amount",
+			"positionSalaryAmount",
+			"mouthSalaryAmount",
+			"oc",
+			"positionEmployeePosition",
+			"posNo",
+			"positionEmployeePositionSide",
+			"positionEmployeeLevel",
+			"positionEmployeeGroup",
+			//   "salaryClass",
+			"salaryRef",
+			"refCommandNo",
+	  ])
+	: (visibleColumns.value = profileData.salary.columns);
+const columns = ref<QTableProps["columns"]>([
+	{
+		name: "date",
+		align: "left",
+		label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+		sortable: true,
+		field: "date",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "amount",
+		align: "left",
+		label: "ค่าจ้าง",
+		sortable: true,
+		field: "amount",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	//   {
+	//     name: "positionSalaryAmount",
+	//     align: "left",
+	//     label: "เงินประจำตำแหน่ง",
+	//     sortable: true,
+	//     field: "positionSalaryAmount",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	//   {
+	//     name: "mouthSalaryAmount",
+	//     align: "left",
+	//     label: "เงินค่าตอบแทนรายเดือน",
+	//     sortable: true,
+	//     field: "mouthSalaryAmount",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	{
+		name: "oc",
+		align: "left",
+		label: "สังกัด",
+		sortable: true,
+		field: "oc",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "positionEmployeePosition",
+		align: "left",
+		label: "ตำแหน่ง",
+		sortable: true,
+		field: "positionEmployeePosition",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	//   {
+	//     name: "posNo",
+	//     align: "left",
+	//     label: "ตำแหน่งเลขที่",
+	//     sortable: true,
+	//     field: "posNo",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	{
+		name: "positionEmployeePositionSide",
+		align: "left",
+		label: "ด้านของตำแหน่ง",
+		sortable: true,
+		field: "positionEmployeePositionSide",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	//   {
+	//     name: "positionEmployeeLevel",
+	//     align: "left",
+	//     label: "ระดับ",
+	//     sortable: true,
+	//     field: "positionEmployeeLevel",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	{
+		name: "positionEmployeeGroup",
+		align: "left",
+		label: "กลุ่มงาน",
+		sortable: true,
+		field: "positionEmployeeGroup",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	//   {
+	//     name: "salaryClass",
+	//     align: "left",
+	//     label: "ตำแหน่ง (รายละเอียด)",
+	//     sortable: true,
+	//     field: "salaryClass",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	{
+		name: "salaryRef",
+		align: "left",
+		label: "เอกสารอ้างอิง",
+		sortable: true,
+		field: "salaryRef",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "refCommandNo",
+		align: "left",
+		label: "เลขที่คำสั่ง",
+		sortable: true,
+		field: "refCommandNo",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+	{
+		name: "date",
+		align: "left",
+		label: "วัน เดือน ปี จ้างและแต่งตั้ง",
+		sortable: true,
+		field: "date",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "amount",
+		align: "left",
+		label: "ค่าจ้าง",
+		sortable: true,
+		field: "amount",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	//   {
+	//     name: "positionSalaryAmount",
+	//     align: "left",
+	//     label: "เงินประจำตำแหน่ง",
+	//     sortable: true,
+	//     field: "positionSalaryAmount",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	//   {
+	//     name: "mouthSalaryAmount",
+	//     align: "left",
+	//     label: "เงินค่าตอบแทนรายเดือน",
+	//     sortable: true,
+	//     field: "mouthSalaryAmount",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	{
+		name: "oc",
+		align: "left",
+		label: "สังกัด",
+		sortable: true,
+		field: "oc",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "positionEmployeePosition",
+		align: "left",
+		label: "ตำแหน่ง",
+		sortable: true,
+		field: "positionEmployeePosition",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	//   {
+	//     name: "posNo",
+	//     align: "left",
+	//     label: "ตำแหน่งเลขที่",
+	//     sortable: true,
+	//     field: "posNo",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	{
+		name: "positionEmployeePositionSide",
+		align: "left",
+		label: "ด้านของตำแหน่ง",
+		sortable: true,
+		field: "positionEmployeePositionSide",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	//   {
+	//     name: "positionEmployeeLevel",
+	//     align: "left",
+	//     label: "ระดับ",
+	//     sortable: true,
+	//     field: "positionEmployeeLevel",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	{
+		name: "positionEmployeeGroup",
+		align: "left",
+		label: "กลุ่มงาน",
+		sortable: true,
+		field: "positionEmployeeGroup",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	//   {
+	//     name: "salaryClass",
+	//     align: "left",
+	//     label: "ตำแหน่ง (รายละเอียด)",
+	//     sortable: true,
+	//     field: "salaryClass",
+	//     headerStyle: "font-size: 14px",
+	//     style: "font-size: 14px",
+	//     sort: (a: string, b: string) =>
+	//       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+	//   },
+	{
+		name: "salaryRef",
+		align: "left",
+		label: "เอกสารอ้างอิง",
+		sortable: true,
+		field: "salaryRef",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "refCommandNo",
+		align: "left",
+		label: "เลขที่คำสั่ง",
+		sortable: true,
+		field: "refCommandNo",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "createdFullName",
+		align: "left",
+		label: "ผู้ดำเนินการ",
+		sortable: true,
+		field: "createdFullName",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+	{
+		name: "createdAt",
+		align: "left",
+		label: "วันที่แก้ไข",
+		sortable: true,
+		field: "createdAt",
+		headerStyle: "font-size: 14px",
+		style: "font-size: 14px",
+		sort: (a: string, b: string) =>
+			a.localeCompare(b, undefined, {
+				numeric: true,
+				sensitivity: "base",
+			}),
+	},
+]);
+const visibleColumnsHistory = ref<String[]>([
+	"date",
+	"amount",
+	"positionSalaryAmount",
+	"mouthSalaryAmount",
+	"oc",
+	"positionEmployeePosition",
+	"posNo",
+	"positionEmployeePositionSide",
+	"positionEmployeeLevel",
+	"positionEmployeeGroup",
+	//   "salaryClass",
+	"salaryRef",
+	"refCommandNo",
+	"createdFullName",
+	"createdAt",
+]);
+
+watch(visibleColumns, async (count: String[], prevCount: String[]) => {
+	await changeProfileColumns("salary", count);
+});
+
+onMounted(async () => {
+	await fetchData();
+	await fetchDataSelector();
+});
+
+const fetchDataSelector = async () => {
+	loaderPage(true);
+	await fetchEmployeePosition();
+	await fetchEmployeePositionSide();
+	await fetchEmployeeLevel();
+	await fetchEmployeeGroup();
+	await fetchAgency();
+	await nodeTree();
+	loaderPage(false);
+};
+// ตำแหน่ง
+const fetchEmployeePosition = async () => {
+	await http
+		.get(config.API.positionEmployeePosition)
+		.then((res) => {
+			const data = res.data.result;
+			let option: DataOption[] = [];
+			data.map((r: DataOption) => {
+				option.push({ id: r.id.toString(), name: r.name.toString() });
+			});
+
+			employeePositionOptions.value = option;
+			employeePositionOptionsFilter.value = option;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		});
+};
+// ด้านของตำแหน่ง
+const fetchEmployeePositionSide = async () => {
+	await http
+		.get(config.API.positionEmployeePositionSide)
+		.then((res) => {
+			const data = res.data.result;
+			let option: DataOption[] = [];
+			data.map((r: DataOption) => {
+				option.push({ id: r.id.toString(), name: r.name.toString() });
+			});
+
+			employeePositionSideOptions.value = option;
+			employeePositionSideOptionsFilter.value = option;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		});
+};
+// ระดับ
+const fetchEmployeeLevel = async () => {
+	await http
+		.get(config.API.positionEmployeeLevel)
+		.then((res) => {
+			const data = res.data.result;
+			let option: DataOption[] = [];
+			data.map((r: DataOption) => {
+				option.push({ id: r.id.toString(), name: r.name.toString() });
+			});
+
+			employeeLevelOptions.value = option;
+			employeeLevelOptionsFilter.value = option;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		});
+};
+// กลุ่มงาน
+const fetchEmployeeGroup = async () => {
+	await http
+		.get(config.API.positionEmployeeGroup)
+		.then((res) => {
+			const data = res.data.result;
+			let option: DataOption[] = [];
+			data.map((r: DataOption) => {
+				option.push({ id: r.id.toString(), name: r.name.toString() });
+			});
+
+			employeeGroupOptions.value = option;
+			employeeGroupOptionsFilter.value = option;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		});
+};
+
+// สังกัด
+const fetchAgency = async () => {
+	await http
+		.get(config.API.organizationRoot)
+		.then((res) => {
+			const data = res.data.result;
+			let option: DataOption[] = [];
+			data.map((r: any) => {
+				option.push({ id: r.id.toString(), name: r.label.toString() });
+			});
+
+			agencyOptions.value = option;
+			agencyOptionsFilter.value = option;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		});
+};
+
+const nodeTree = async () => {
+	loaderPage(true);
+	await http
+		.get(config.API.profileOrganizRoot)
+		.then((res: any) => {
+			const data = res.data.result;
+			nodesTree.value = data;
+			if (data.length > 0) {
+				expanded.value = [data[0].id];
+			}
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
+};
+
+const selectAgency = (val: string) => {
+	fetchPositionNumber(val);
+	clickEditRow();
+};
+
+const filterSelector = (val: any, update: Function, filtername: string) => {
+	switch (filtername) {
+		case "posNo":
+			update(() => {
+				posNoOptions.value = posNoOptionsFilter.value.filter(
+					(v: DataOption) => v.name.indexOf(val) > -1
+				);
+			});
+			break;
+		case "employeePosition":
+			update(() => {
+				employeePositionOptions.value =
+					employeePositionOptionsFilter.value.filter(
+						(v: DataOption) => v.name.indexOf(val) > -1
+					);
+			});
+			break;
+		case "employeePositionSide":
+			update(() => {
+				employeePositionSideOptions.value =
+					employeePositionSideOptionsFilter.value.filter(
+						(v: DataOption) => v.name.indexOf(val) > -1
+					);
+			});
+			break;
+		case "employeeLevel":
+			update(() => {
+				employeeLevelOptions.value =
+					employeeLevelOptionsFilter.value.filter(
+						(v: DataOption) => v.name.indexOf(val) > -1
+					);
+			});
+			break;
+
+		case "employeeGroup":
+			update(() => {
+				employeeGroupOptions.value =
+					employeeGroupOptionsFilter.value.filter(
+						(v: DataOption) => v.name.indexOf(val) > -1
+					);
+			});
+			break;
+		case "agency":
+			update(() => {
+				agencyOptions.value = agencyOptionsFilter.value.filter(
+					(v: DataOption) => v.name.indexOf(val) > -1
+				);
+			});
+			break;
+
+		case "ref":
+			update(() => {
+				refOptions.value = refOptionsFilter.value.filter(
+					(v: DataOption) => v.name.indexOf(val) > -1
+				);
+			});
+			break;
+
+		default:
+			break;
+	}
+};
+
+const fetchData = async () => {
+	loaderPage(true);
+	await http
+		.get(config.API.profileSalaryEmployeeId(profileId.value))
+		.then((res) => {
+			const data = res.data.result;
+			//   console.log(data);
+			rows.value = [];
+			data.map((e: ResponseObjectEmployee) => {
+				rows.value.push({
+					id: e.id,
+					date: new Date(e.date),
+					amount: e.amount,
+					positionSalaryAmount: e.positionSalaryAmount,
+					mouthSalaryAmount: e.mouthSalaryAmount,
+					oc: e.oc,
+					ocId: e.ocId,
+					posNo: e.posNo,
+					posNoId: e.posNoId,
+					posNoEmployee: e.posNoEmployee,
+					positionEmployeeGroup: e.positionEmployeeGroup,
+					positionEmployeeGroupId: e.positionEmployeeGroupId,
+					positionEmployeeLevel: e.positionEmployeeLevel,
+					positionEmployeeLevelId: e.positionEmployeeLevelId,
+					positionEmployeePosition: e.positionEmployeePosition,
+					positionEmployeePositionId: e.positionEmployeePositionId,
+					positionEmployeePositionSide:
+						e.positionEmployeePositionSide,
+					positionEmployeePositionSideId:
+						e.positionEmployeePositionSideId,
+					salaryClass: e.salaryClass,
+					salaryRef: e.salaryRef,
+					refCommandNo: e.refCommandNo,
+					createdFullName: e.createdFullName,
+					createdAt: new Date(e.createdAt),
+				});
+			});
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
+};
+
+const fetchPositionNumber = async (id: string) => {
+	//   loaderPage(true);
+	if (id == null || id == "") return;
+	await http
+		.get(config.API.getPositionNumberIdByOcId(id))
+		.then((res) => {
+			const data = res.data.result;
+			let option: DataOption[] = [];
+			data.map((r: DataOption) => {
+				option.push({ id: r.id.toString(), name: r.name.toString() });
+			});
+			posNoOptions.value = option;
+			posNoOptionsFilter.value = option;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
+};
+
+/**
+ * กดดูข้อมูลก่อนหน้า
+ */
+const clickPrevious = async () => {
+	edit.value = false;
+	rowIndex.value -= 1;
+	await getData();
+	await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const clickNext = async () => {
+	edit.value = false;
+	rowIndex.value += 1;
+	await getData();
+	await checkRowPage();
+};
+
+/**
+ * กดดูข้อมูลต่อไป
+ */
+const getData = async () => {
+	const row = rows.value[rowIndex.value];
+	date.value = row.date;
+	amount.value = row.amount;
+	positionSalaryAmount.value = row.positionSalaryAmount;
+	mouthSalaryAmount.value = row.mouthSalaryAmount;
+	selected.value = row.ocId;
+	//   positionId.value = row.positionId;
+	//   posNoId.value = row.posNoId;
+	//   positionLineId.value = row.positionLineId;
+	//   positionPathSideId.value = row.positionPathSideId;
+	//   positionTypeId.value = row.positionTypeId;
+	//   positionLevelId.value = row.positionLevelId;
+	//   positionExecutiveId.value = row.positionExecutiveId;
+	//   positionExecutiveSideId.value = row.positionExecutiveSideId;
+	posNoId.value = row.posNoId ?? "";
+	posNoEmployee.value = row.posNoEmployee ?? "";
+	employeePositionId.value = row.positionEmployeePositionId ?? "";
+	employeePositionSideId.value = row.positionEmployeePositionSideId ?? "";
+	employeeLevelId.value = row.positionEmployeeLevelId ?? "";
+	employeeGroupId.value = row.positionEmployeeGroupId ?? "";
+	agencyId.value = row.ocId ?? "";
+
+	salaryClass.value = row.salaryClass ?? "";
+	salaryRef.value = row.salaryRef ?? "";
+	refCommandNo.value = row.refCommandNo ?? "";
+	id.value = row.id;
+	await fetchPositionNumber(row.ocId ?? "");
+};
+
+/**
+ * เช็คปุ่มดูข้อมูล ย้อน กับ ต่อไป ว่าต้องแสดงไหม
+ */
+const checkRowPage = () => {
+	editRow.value = false;
+	next.value = true;
+	previous.value = true;
+	//   console.log(rowIndex.value);
+	if (rowIndex.value + 1 >= rows.value.length) {
+		next.value = false;
+	}
+	if (rowIndex.value - 1 < 0) {
+		previous.value = false;
+	}
+};
+
+/**
+ * กดปุ่มแก้ไขใน dialog
+ */
+const clickEdit = () => {
+	editRow.value = false;
+	next.value = false;
+	previous.value = false;
+};
+
+/**
+ * กดปุ่มเพิ่มด้านบน table
+ */
+const clickAdd = async () => {
+	editRow.value = false;
+	await addData();
+};
+
+/**
+ * gen ตำแหน่ง (รายละเอียด)
+ */
+const templateDetail = async () => {
+	//   salaryClass.value = "";
+	//   if (ocId.value != "") {
+	//     salaryClass.value = salaryClass.value + `สังกัด${ocId.value} `;
+	//   }
+	//   const positionF = positionOptions.value.filter(
+	//     (r: DataOption) => r.id == positionId.value
+	//   );
+	//   if (positionF.length > 0) {
+	//     salaryClass.value = salaryClass.value + `ตำแหน่ง${positionF[0].name} `;
+	//   }
+	//   const posNoF = posNoOptions.value.filter(
+	//     (r: DataOption) => r.id == posNoId.value
+	//   );
+	//   if (posNoF.length > 0) {
+	//     salaryClass.value = salaryClass.value + `ตำแหน่งเลขที่${posNoF[0].name} `;
+	//   }
+	//   const positionLineF = positionLineOptions.value.filter(
+	//     (r: DataOption) => r.id == positionLineId.value
+	//   );
+	//   if (positionLineF.length > 0) {
+	//     salaryClass.value = salaryClass.value + `สายงาน${positionLineF[0].name} `;
+	//   }
+	//   const positionPathSideF = positionSideOptions.value.filter(
+	//     (r: DataOption) => r.id == positionPathSideId.value
+	//   );
+	//   if (positionPathSideF.length > 0) {
+	//     salaryClass.value =
+	//       salaryClass.value + `ด้าน/สาขา${positionPathSideF[0].name} `;
+	//   }
+	//   const positionTypeF = positionTypeOptions.value.filter(
+	//     (r: DataOption) => r.id == positionTypeId.value
+	//   );
+	//   if (positionTypeF.length > 0) {
+	//     salaryClass.value =
+	//       salaryClass.value + `ตำแหน่งประเภท${positionTypeF[0].name} `;
+	//   }
+	//   const positionLevelF = positionLevelOptions.value.filter(
+	//     (r: DataOption) => r.id == positionLevelId.value
+	//   );
+	//   if (positionLevelF.length > 0) {
+	//     salaryClass.value = salaryClass.value + `ระดับ${positionLevelF[0].name} `;
+	//   }
+	//   const positionExecutiveF = positionExecutiveOptions.value.filter(
+	//     (r: DataOption) => r.id == positionExecutiveId.value
+	//   );
+	//   if (positionExecutiveF.length > 0) {
+	//     salaryClass.value =
+	//       salaryClass.value + `ตำแหน่งทางการบริหาร${positionExecutiveF[0].name} `;
+	//   }
+};
+
+/**
+ * กดบันทึกใน dialog
+ */
+const clickSave = async () => {
+	myForm.value.validate().then(async (result: boolean) => {
+		if (result) {
+			if (modalEdit.value) {
+				await editData();
+			} else {
+				await saveData();
+			}
+		}
+	});
+};
+
+/**
+ * บันทึกเพิ่มข้อมูล
+ */
+const saveData = async () => {
+	loaderPage(true);
+	await http
+		.post(config.API.profileSalaryEmployeeId(profileId.value), {
+			amount: amount.value,
+			date: dateToISO(date.value),
+			positionSalaryAmount: positionSalaryAmount.value,
+			mouthSalaryAmount: mouthSalaryAmount.value,
+			ocId: agencyId.value,
+			//   posNoId: posNoId.value,
+			posNoEmployee: posNoEmployee.value,
+			positionEmployeeGroupId: employeeGroupId.value,
+			positionEmployeeLevelId: employeeLevelId.value,
+			positionEmployeePositionId: employeePositionId.value,
+			positionEmployeePositionSideId: employeePositionSideId.value,
+			salaryClass: salaryClass.value,
+			salaryRef: salaryRef.value,
+			refCommandNo: refCommandNo.value,
+		})
+		.then((res) => {
+			success($q, "บันทึกข้อมูลสำเร็จ");
+			modal.value = false;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			await fetchData();
+		});
+};
+
+/**
+ * บันทึกแก้ไขข้อมูล
+ */
+const editData = async () => {
+	loaderPage(true);
+	await http
+		.put(config.API.profileSalaryEmployeeId(id.value), {
+			amount: amount.value,
+			date: dateToISO(date.value),
+			positionSalaryAmount: positionSalaryAmount.value,
+			mouthSalaryAmount: mouthSalaryAmount.value,
+			ocId: agencyId.value,
+			//   posNoId: posNoId.value,
+			posNoEmployee: posNoEmployee.value,
+			positionEmployeeGroupId: employeeGroupId.value,
+			positionEmployeeLevelId: employeeLevelId.value,
+			positionEmployeePositionId: employeePositionId.value,
+			positionEmployeePositionSideId: employeePositionSideId.value,
+			salaryClass: salaryClass.value,
+			salaryRef: salaryRef.value,
+			refCommandNo: refCommandNo.value,
+		})
+		.then((res) => {
+			success($q, "บันทึกข้อมูลสำเร็จ");
+			modal.value = false;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			await fetchData();
+		});
+};
+
+/**
+ * ลบข้อมูล
+ */
+const fetchDataDelete = async () => {
+	loaderPage(true);
+	await http
+		.delete(config.API.profileSalaryId(id.value))
+		.then((res) => {
+			success($q, "ลบข้อมูลสำเร็จ");
+			modal.value = false;
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(async () => {
+			await fetchData();
+		});
+};
+
+/**
+ *  dialog ลบข้อมูล
+ */
+const clickDelete = async () => {
+	dialogMessage(
+		$q,
+		"ลบข้อมูล",
+		"ต้องการทำการลบข้อมูลนี้ใช่หรือไม่",
+		"delete",
+		"ยืนยัน",
+		"red",
+		async () => await fetchDataDelete(),
+		async () => await fetchData(),
+		false
+	);
+};
+
+/**
+ * กดปิด dialog
+ */
+const clickClose = async () => {
+	if (editRow.value == true) {
+		dialogMessage(
+			$q,
+			"ข้อมูลมีการแก้ไข",
+			"ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?",
+			"info",
+			"ยืนยัน",
+			"primary",
+			async () => {
+				modal.value = false;
+				next.value = false;
+				previous.value = false;
+			},
+			undefined,
+			false
+		);
+	} else {
+		modal.value = false;
+		next.value = false;
+		previous.value = false;
+	}
+};
+
+/**
+ * กดเลือกข้อมูลที่จะแก้ไข
+ * @param props ค่า props ใน row ที่เลือก
+ */
+const selectData = async (props: DataPropsEmployee) => {
+	//   console.log(props.row);
+	modalEdit.value = true;
+	modal.value = true;
+	edit.value = false;
+	rawItem.value = props.row;
+	rowIndex.value = props.rowIndex;
+	date.value = props.row.date;
+	amount.value = props.row.amount;
+	positionSalaryAmount.value = props.row.positionSalaryAmount;
+	mouthSalaryAmount.value = props.row.mouthSalaryAmount;
+
+	posNoId.value = props.row.posNoId ?? "";
+	posNoEmployee.value = props.row.posNoEmployee ?? "";
+	employeePositionId.value = props.row.positionEmployeePositionId ?? "";
+	employeePositionSideId.value =
+		props.row.positionEmployeePositionSideId ?? "";
+	employeeLevelId.value = props.row.positionEmployeeLevelId ?? "";
+	employeeGroupId.value = props.row.positionEmployeeGroupId ?? "";
+	agencyId.value = props.row.ocId ?? "";
+
+	//   refSelected.value = props.row
+	salaryClass.value = props.row.salaryClass ?? "";
+	salaryRef.value = props.row.salaryRef ?? "";
+	refCommandNo.value = props.row.refCommandNo ?? "";
+	id.value = props.row.id;
+	await fetchPositionNumber(props.row.ocId ?? "");
+	await checkRowPage();
+};
+
+/**
+ * กดปุ่มเพิ่มบน table
+ */
+const addData = () => {
+	modalEdit.value = false;
+	modal.value = true;
+	edit.value = true;
+	date.value = new Date();
+	amount.value = null;
+	positionSalaryAmount.value = null;
+	mouthSalaryAmount.value = null;
+
+	posNoId.value = "";
+	posNoEmployee.value = "";
+	employeePositionId.value = "";
+	employeePositionSideId.value = "";
+	employeeLevelId.value = "";
+	employeeGroupId.value = "";
+	agencyId.value = "";
+	agencyOptions.value = [];
+
+	salaryClass.value = "";
+	refSelected.value = null;
+	salaryRef.value = "";
+	refCommandNo.value = "";
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+	if (editRow.value == true) {
+		dialogMessage(
+			$q,
+			"ข้อมูลมีการแก้ไข",
+			"ยืนยันยกเลิกการแก้ไขใช่หรือไม่",
+			"info",
+			"ยืนยัน",
+			"primary",
+			async () => {
+				edit.value = false;
+				await checkRowPage();
+				await getData();
+			},
+			undefined,
+			false
+		);
+	} else {
+		edit.value = false;
+		await checkRowPage();
+	}
+};
+
+const onSelected = async (id: string) => {
+	await fetchPositionNumber(id);
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRow = () => {
+	editRow.value = true;
+};
+
+/**
+ * เช็คว่ามีการแก้ไขข้อมูล
+ */
+const clickEditRowRef = () => {
+	editRow.value = true;
+	salaryRef.value = refSelected.value?.name;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsEmployee) => {
+	modalHistory.value = true;
+	loaderPage(true);
+	await http
+		.get(config.API.profileSalaryHisId(row.id))
+		.then((res) => {
+			const data = res.data.result;
+			//   console.log("clickHistory", data);
+			rowsHistory.value = [];
+			data.map((e: ResponseObjectEmployee) => {
+				rowsHistory.value.push({
+					id: e.id,
+					date: new Date(e.date),
+					amount: e.amount,
+					positionSalaryAmount: e.positionSalaryAmount,
+					mouthSalaryAmount: e.mouthSalaryAmount,
+					oc: e.oc,
+					ocId: e.ocId,
+					posNo: e.posNo,
+					posNoId: e.posNoId,
+					posNoEmployee: e.posNoEmployee,
+					positionEmployeeGroup: e.positionEmployeeGroup,
+					positionEmployeeGroupId: e.positionEmployeeGroupId,
+					positionEmployeeLevel: e.positionEmployeeLevel,
+					positionEmployeeLevelId: e.positionEmployeeLevelId,
+					positionEmployeePosition: e.positionEmployeePosition,
+					positionEmployeePositionId: e.positionEmployeePositionId,
+					positionEmployeePositionSide:
+						e.positionEmployeePositionSide,
+					positionEmployeePositionSideId:
+						e.positionEmployeePositionSideId,
+					salaryClass: e.salaryClass,
+					salaryRef: e.salaryRef,
+					refCommandNo: e.refCommandNo,
+					createdFullName: e.createdFullName,
+					createdAt: new Date(e.createdAt),
+				});
+			});
+		})
+		.catch((e) => {
+			messageError($q, e);
+		})
+		.finally(() => {
+			loaderPage(false);
+		});
+};
+
+/**
+ * validate input ใน dialog
+ */
+const validateData = async () => {
+	checkValidate.value = true;
+	await myForm.value.validate().then((result: boolean) => {
+		if (result == false) {
+			checkValidate.value = false;
+		}
+	});
+};
+
+/**
+ * class จัดรูปแบบแสดงระหว่างข้อมูลที่แก้ไขหรือแสดงเฉยๆ
+ * @param val ข้อมูล input สำหรับแก้ไขหรือไม่
+ */
+const getClass = (val: boolean) => {
+	return {
+		"full-width inputgreen cursor-pointer": val,
+		"full-width cursor-pointer": !val,
+	};
+};
+const resetFilter = () => {};
+</script>
+<style lang="scss">
+.modalfix {
+	position: fixed !important;
+}
+</style>
diff --git a/src/modules/04_registry/components/TableProfile.vue b/src/modules/04_registry/components/TableProfile.vue
index 5220c7f45..aa56a8a57 100644
--- a/src/modules/04_registry/components/TableProfile.vue
+++ b/src/modules/04_registry/components/TableProfile.vue
@@ -119,7 +119,13 @@
             <div class="dialog-card-contain">
               <q-card-section class="q-pa-md">
                 <div class="row col-12 q-col-gutter-sm">
-                  <div :class=" $q.screen.lt.md ? ' row col-12 q-col-gutter-xs' : 'no-wrap row col-12 q-col-gutter-xs'">
+                  <div
+                    :class="
+                      $q.screen.lt.md
+                        ? ' row col-12 q-col-gutter-xs'
+                        : 'no-wrap row col-12 q-col-gutter-xs'
+                    "
+                  >
                     <selector
                       hide-bottom-space
                       :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
@@ -137,7 +143,7 @@
                       input-debounce="0"
                       @update:model-value="updateEmployeeClass"
                     />
-                  <!-- @filter="(inputValue:any,
+                    <!-- @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'employeeTypeOps'
                       ) " -->
                     <q-input
@@ -177,7 +183,7 @@
                       }}</template>
                       <template #trigger>
                         <q-input
-                          class="full-width inputgreen cursor-pointer q-mb-sm"
+                          class="inputgreen cursor-pointer q-mb-sm"
                           hide-bottom-space
                           outlined
                           dense
@@ -190,14 +196,14 @@
                           clearable
                           @clear="clearDate"
                         >
-                          <template v-slot:prepend>
+                          <!-- <template v-slot:prepend>
                             <q-icon
                               name="event"
                               class="cursor-pointer"
                               style="color: var(--q-primary)"
                             >
                             </q-icon>
-                          </template>
+                          </template> -->
                         </q-input>
                       </template>
                     </datepicker>
@@ -308,8 +314,8 @@ const initialPagination = ref<Pagination>({
   rowsPerPage: 0,
 });
 const employeeClassOps = ref<DataOption[]>([
-  { id: "officer", name: "ข้าราชการกทม.สามัญ" },
-  { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
+  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+  //   { id: "employee", name: "ลูกจ้าง(ทั้งหมด)" },
   { id: "perm", name: "ลูกจ้างประจำ" },
   { id: "temp", name: "ลูกจ้างชั่วคราว" },
 ]);
diff --git a/src/modules/04_registry/components/Talent.vue b/src/modules/04_registry/components/Talent.vue
index 2c0ec3f84..4f4b981b0 100644
--- a/src/modules/04_registry/components/Talent.vue
+++ b/src/modules/04_registry/components/Talent.vue
@@ -23,13 +23,7 @@
               @click="selectData(props)"
               class="cursor-pointer"
             >
-              <div
-                v-if="col.name == 'dateStart' || col.name == 'dateEnd'"
-                class="table_ellipsis"
-              >
-                {{ date2Thai(col.value) }}
-              </div>
-              <div v-else class="table_ellipsis">
+              <div class="table_ellipsis">
                 {{ col.value }}
               </div>
             </q-td>
@@ -106,92 +100,6 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateStart"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(dateStart)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่เริ่มต้น'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
-              <datepicker
-                menu-class-name="modalfix"
-                :readonly="!edit"
-                v-model="dateEnd"
-                :locale="'th'"
-                autoApply
-                :enableTimePicker="false"
-                @update:modelValue="clickEditRow"
-                week-start="0"
-              >
-                <template #year="{ year }">{{ year + 543 }}</template>
-                <template #year-overlay-value="{ value }">{{
-                  parseInt(value + 543)
-                }}</template>
-                <template #trigger>
-                  <q-input
-                    :class="getClass(edit)"
-                    :outlined="edit"
-                    dense
-                    lazy-rules
-                    :borderless="!edit"
-                    :model-value="date2Thai(dateEnd)"
-                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
-                    hide-bottom-space
-                    :label="`${'วันที่สิ้นสุด'}`"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        :style="
-                          edit
-                            ? 'color: var(--q-primary)'
-                            : 'color: var(--q-grey)'
-                        "
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
             <div class="col-12">
               <q-input
                 :class="getClass(edit)"
@@ -240,14 +148,7 @@
     <template #columns="props">
       <q-tr :props="props">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          <div
-            v-if="
-              col.name == 'dateStart' ||
-              col.name == 'dateEnd' ||
-              col.name == 'createdAt'
-            "
-            class="table_ellipsis"
-          >
+          <div v-if="col.name == 'createdAt'" class="table_ellipsis">
             {{ date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
@@ -297,8 +198,6 @@ const id = ref<string>("");
 const field = ref<string>();
 const detail = ref<string>();
 const remark = ref<string>();
-const dateStart = ref<Date>(new Date());
-const dateEnd = ref<Date>(new Date());
 const reference = ref<string>();
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
@@ -314,21 +213,12 @@ const tittleHistory = ref<string>("ประวัติแก้ไขควา
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.talent.columns.length == 0
-  ? (visibleColumns.value = [
-      "field",
-      "detail",
-      "remark",
-      "dateStart",
-      "dateEnd",
-      "reference",
-    ])
+  ? (visibleColumns.value = ["field", "detail", "remark", "reference"])
   : (visibleColumns.value = profileData.talent.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -364,28 +254,6 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "dateStart",
-    align: "left",
-    label: "วันที่เริ่มต้น",
-    sortable: true,
-    field: "dateStart",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateEnd",
-    align: "left",
-    label: "วันที่สิ้นสุด",
-    sortable: true,
-    field: "dateEnd",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "reference",
     align: "left",
@@ -432,28 +300,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-  {
-    name: "dateStart",
-    align: "left",
-    label: "วันที่เริ่มต้น",
-    sortable: true,
-    field: "dateStart",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "dateEnd",
-    align: "left",
-    label: "วันที่สิ้นสุด",
-    sortable: true,
-    field: "dateEnd",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
   {
     name: "reference",
     align: "left",
@@ -492,8 +338,6 @@ const visibleColumnsHistory = ref<String[]>([
   "field",
   "detail",
   "remark",
-  "dateStart",
-  "dateEnd",
   "reference",
   "createdFullName",
   "createdAt",
@@ -508,34 +352,30 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileAbiliId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            field: e.field,
-            detail: e.detail,
-            remark: e.remark,
-            dateStart: new Date(e.dateStart),
-            dateEnd: new Date(e.dateEnd),
-            reference: e.reference,
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileAbiliId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          field: e.field,
+          detail: e.detail,
+          remark: e.remark,
+          reference: e.reference,
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -566,8 +406,6 @@ const getData = () => {
   field.value = row.field;
   detail.value = row.detail;
   remark.value = row.remark;
-  dateStart.value = row.dateStart;
-  dateEnd.value = row.dateEnd;
   reference.value = row.reference;
   id.value = row.id;
 };
@@ -623,29 +461,25 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileAbiliId(profileId.value), {
-        id: id.value,
-        field: field.value,
-        detail: detail.value,
-        remark: remark.value,
-        dateStart: dateToISO(dateStart.value),
-        dateEnd: dateToISO(dateEnd.value),
-        reference: reference.value,
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileAbiliId(profileId.value), {
+      id: id.value,
+      field: field.value,
+      detail: detail.value,
+      remark: remark.value,
+      reference: reference.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
@@ -659,8 +493,6 @@ const editData = async () => {
       field: field.value,
       detail: detail.value,
       remark: remark.value,
-      dateStart: dateToISO(dateStart.value),
-      dateEnd: dateToISO(dateEnd.value),
       reference: reference.value,
     })
     .then((res) => {
@@ -742,8 +574,6 @@ const selectData = async (props: DataProps) => {
   field.value = props.row.field;
   detail.value = props.row.detail;
   remark.value = props.row.remark;
-  dateStart.value = props.row.dateStart;
-  dateEnd.value = props.row.dateEnd;
   reference.value = props.row.reference;
   id.value = props.row.id;
   await checkRowPage();
@@ -759,8 +589,6 @@ const addData = () => {
   field.value = "";
   detail.value = "";
   remark.value = "";
-  dateStart.value = new Date();
-  dateEnd.value = new Date();
   reference.value = "";
 };
 
@@ -811,8 +639,6 @@ const clickHistory = async (row: RequestItemsObject) => {
           field: e.field,
           detail: e.detail,
           remark: e.remark,
-          dateStart: new Date(e.dateStart),
-          dateEnd: new Date(e.dateEnd),
           reference: e.reference,
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
diff --git a/src/modules/04_registry/components/Train.vue b/src/modules/04_registry/components/Train.vue
index 5b5bceb5c..822494e7b 100644
--- a/src/modules/04_registry/components/Train.vue
+++ b/src/modules/04_registry/components/Train.vue
@@ -459,9 +459,7 @@ const tittleHistory = ref<string>("ประวัติแก้ไขการ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
@@ -753,38 +751,36 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileTrainId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            name: e.name,
-            topic: e.topic,
-            yearly: e.yearly,
-            place: e.place,
-            duration: e.duration,
-            department: e.department,
-            numberOrder: e.numberOrder,
-            dateOrder: e.dateOrder,
-            startDate: new Date(e.startDate),
-            endDate: new Date(e.endDate),
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileTrainId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          name: e.name,
+          topic: e.topic,
+          yearly: e.yearly,
+          place: e.place,
+          duration: e.duration,
+          department: e.department,
+          numberOrder: e.numberOrder,
+          dateOrder: e.dateOrder,
+          startDate: new Date(e.startDate),
+          endDate: new Date(e.endDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -876,33 +872,31 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileTrainId(profileId.value), {
-        id: id.value,
-        name: name.value,
-        topic: topic.value,
-        yearly: yearly.value,
-        place: place.value,
-        duration: duration.value,
-        department: department.value,
-        numberOrder: numberOrder.value,
-        dateOrder: dateOrder.value,
-        startDate: dateToISO(startDate.value),
-        endDate: dateToISO(endDate.value),
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileTrainId(profileId.value), {
+      id: id.value,
+      name: name.value,
+      topic: topic.value,
+      yearly: yearly.value,
+      place: place.value,
+      duration: duration.value,
+      department: department.value,
+      numberOrder: numberOrder.value,
+      dateOrder: dateOrder.value,
+      startDate: dateToISO(startDate.value),
+      endDate: dateToISO(endDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
diff --git a/src/modules/04_registry/components/Work.vue b/src/modules/04_registry/components/Work.vue
index 9ce98bad0..c474f0597 100644
--- a/src/modules/04_registry/components/Work.vue
+++ b/src/modules/04_registry/components/Work.vue
@@ -24,10 +24,14 @@
               class="cursor-pointer"
             >
               <div
-                v-if="col.name == 'dateStart' || col.name == 'dateEnd'"
+                v-if="
+                  col.name == 'dateStart' ||
+                  col.name == 'dateEnd' ||
+                  col.name == 'refCommandDate'
+                "
                 class="table_ellipsis"
               >
-                {{ date2Thai(col.value) }}
+                {{ col.value == null ? null : date2Thai(col.value) }}
               </div>
               <div v-else class="table_ellipsis">
                 {{ col.value }}
@@ -178,6 +182,72 @@
                 @update:modelValue="clickEditRow"
               />
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                :class="getClass(edit)"
+                :outlined="edit"
+                dense
+                lazy-rules
+                :readonly="!edit"
+                :borderless="!edit"
+                v-model="refCommandNo"
+                hide-bottom-space
+                :label="`${'เลขที่คำสั่ง'}`"
+                @update:modelValue="clickEditRow"
+              >
+                <template v-slot:append>
+                  <q-icon
+                    name="mdi-file"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                :readonly="!edit"
+                v-model="refCommandDate"
+                :locale="'th'"
+                autoApply
+                :enableTimePicker="false"
+                @update:modelValue="clickEditRow"
+                week-start="0"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="getClass(edit)"
+                    :outlined="edit"
+                    dense
+                    lazy-rules
+                    :borderless="!edit"
+                    :model-value="
+                      refCommandDate == null ? null : date2Thai(refCommandDate)
+                    "
+                    hide-bottom-space
+                    :label="`${'เอกสารอ้างอิง (ลงวันที่)'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        :style="
+                          edit
+                            ? 'color: var(--q-primary)'
+                            : 'color: var(--q-grey)'
+                        "
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
           </div>
         </q-card-section>
         <q-separator />
@@ -214,11 +284,12 @@
             v-if="
               col.name == 'dateStart' ||
               col.name == 'dateEnd' ||
-              col.name == 'createdAt'
+              col.name == 'createdAt' ||
+              col.name == 'refCommandDate'
             "
             class="table_ellipsis"
           >
-            {{ date2Thai(col.value) }}
+            {{ col.value == null ? null : date2Thai(col.value) }}
           </div>
           <div v-else class="table_ellipsis">
             {{ col.value }}
@@ -269,6 +340,8 @@ const dateEnd = ref<Date>(new Date());
 const detail = ref<string>();
 const reference = ref<string>();
 const minDate = ref<Date>();
+const refCommandNo = ref<string>();
+const refCommandDate = ref<Date | null>(new Date());
 const myForm = ref<any>(); //form data input
 const edit = ref<boolean>(false); //เช็คการกดปุ่มแก้ไขใน dialog
 const modal = ref<boolean>(false); //modal add detail
@@ -283,14 +356,19 @@ const tittleHistory = ref<string>("ประวัติแก้ไขปฏิ
 const filterHistory = ref<string>(""); //search data table history
 const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
 const checkValidate = ref<boolean>(false); //validate data ผ่านหรือไม่
-const profileId = ref<string>(
-  route.params.id ? route.params.id.toString() : ""
-);
+const profileId = ref<string>(route.params.id.toString());
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
 profileData.work.columns.length == 0
-  ? (visibleColumns.value = ["dateStart", "dateEnd", "detail", "reference"])
+  ? (visibleColumns.value = [
+      "dateStart",
+      "dateEnd",
+      "detail",
+      "reference",
+      "refCommandNo",
+      "refCommandDate",
+    ])
   : (visibleColumns.value = profileData.work.columns);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -337,6 +415,28 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
@@ -383,6 +483,28 @@ const columnsHistory = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "refCommandNo",
+    align: "left",
+    label: "เลขที่คำสั่ง",
+    sortable: true,
+    field: "refCommandNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refCommandDate",
+    align: "left",
+    label: "เอกสารอ้างอิง (ลงวันที่)",
+    sortable: true,
+    field: "refCommandDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "createdFullName",
     align: "left",
@@ -411,6 +533,8 @@ const visibleColumnsHistory = ref<String[]>([
   "dateEnd",
   "detail",
   "reference",
+  "refCommandNo",
+  "refCommandDate",
   "createdFullName",
   "createdAt",
 ]);
@@ -428,32 +552,33 @@ onMounted(async () => {
 });
 
 const fetchData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .get(config.API.profileDutyId(profileId.value))
-      .then((res) => {
-        let data = res.data.result;
-        rows.value = [];
-        data.map((e: ResponseObject) => {
-          rows.value.push({
-            id: e.id,
-            dateStart: new Date(e.dateStart),
-            dateEnd: new Date(e.dateEnd),
-            detail: e.detail,
-            reference: e.reference,
-            createdFullName: e.createdFullName,
-            createdAt: new Date(e.createdAt),
-          });
+  loaderPage(true);
+  await http
+    .get(config.API.profileDutyId(profileId.value))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      data.map((e: ResponseObject) => {
+        rows.value.push({
+          id: e.id,
+          dateStart: new Date(e.dateStart),
+          dateEnd: new Date(e.dateEnd),
+          detail: e.detail,
+          reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
+          createdFullName: e.createdFullName,
+          createdAt: new Date(e.createdAt),
         });
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(() => {
-        loaderPage(false);
       });
-  }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      loaderPage(false);
+    });
 };
 
 /**
@@ -485,6 +610,8 @@ const getData = () => {
   dateEnd.value = row.dateEnd;
   detail.value = row.detail;
   reference.value = row.reference;
+  refCommandNo.value = row.refCommandNo;
+  refCommandDate.value = row.refCommandDate;
   id.value = row.id;
 };
 
@@ -539,27 +666,28 @@ const clickSave = async () => {
  * บันทึกเพิ่มข้อมูล
  */
 const saveData = async () => {
-  if (profileId.value !== "") {
-    loaderPage(true);
-    await http
-      .post(config.API.profileDutyId(profileId.value), {
-        id: id.value,
-        dateStart: dateToISO(dateStart.value),
-        dateEnd: dateToISO(dateEnd.value),
-        detail: detail.value,
-        reference: reference.value,
-      })
-      .then((res) => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-        modal.value = false;
-      })
-      .catch((e) => {
-        messageError($q, e);
-      })
-      .finally(async () => {
-        await fetchData();
-      });
-  }
+  loaderPage(true);
+  await http
+    .post(config.API.profileDutyId(profileId.value), {
+      id: id.value,
+      dateStart: dateToISO(dateStart.value),
+      dateEnd: dateToISO(dateEnd.value),
+      detail: detail.value,
+      reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      modal.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
 };
 
 /**
@@ -574,6 +702,9 @@ const editData = async () => {
       dateEnd: dateToISO(dateEnd.value),
       detail: detail.value,
       reference: reference.value,
+      refCommandNo: refCommandNo.value,
+      refCommandDate:
+        refCommandDate.value == null ? null : dateToISO(refCommandDate.value),
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -655,6 +786,8 @@ const selectData = async (props: DataProps) => {
   dateEnd.value = props.row.dateEnd;
   detail.value = props.row.detail;
   reference.value = props.row.reference;
+  refCommandNo.value = props.row.refCommandNo;
+  refCommandDate.value = props.row.refCommandDate;
   id.value = props.row.id;
   await checkRowPage();
 };
@@ -670,6 +803,8 @@ const addData = () => {
   dateEnd.value = new Date();
   detail.value = "";
   reference.value = "";
+  refCommandNo.value = "";
+  refCommandDate.value = null;
 };
 
 /**
@@ -720,6 +855,9 @@ const clickHistory = async (row: RequestItemsObject) => {
           dateEnd: new Date(e.dateEnd),
           detail: e.detail,
           reference: e.reference,
+          refCommandNo: e.refCommandNo,
+          refCommandDate:
+            e.refCommandDate == null ? null : new Date(e.refCommandDate),
           createdFullName: e.createdFullName,
           createdAt: new Date(e.createdAt),
         });
@@ -755,6 +893,7 @@ const getClass = (val: boolean) => {
     "full-width cursor-pointer": !val,
   };
 };
+const resetFilter = () => {};
 </script>
 <style lang="scss">
 .modalfix {
diff --git a/src/modules/04_registry/components/profileType.ts b/src/modules/04_registry/components/profileType.ts
index 85fe97d1e..e0cefd668 100644
--- a/src/modules/04_registry/components/profileType.ts
+++ b/src/modules/04_registry/components/profileType.ts
@@ -14,7 +14,7 @@ interface Information {
   prefixId: string | null;
   firstname: string | null;
   lastname: string | null;
-  birthDate: Date | null;
+  birthDate: Date;
   genderId: string | null;
   bloodId: string | null;
   nationality: string | null;
@@ -34,16 +34,22 @@ interface Family {
   lastnameC: string | null;
   lastnameCOld: string | null;
   occupationC: string | null;
+  citizenIdC: string | null;
+  liveC: string | null;
   prefixM: string | null; // male
   prefixIdM: string | null;
   firstnameM: string | null;
   lastnameM: string | null;
   occupationM: string | null;
+  citizenIdM: string | null;
+  liveM: string | null;
   prefixF: string | null; // female
   prefixIdF: string | null;
   firstnameF: string | null;
   lastnameF: string | null;
   occupationF: string | null;
+  citizenIdF: string | null;
+  liveF: string | null;
   same: string | null;
   childrens: childrenFamily[];
 }
@@ -149,16 +155,22 @@ const defaultFamily: Family = {
   lastnameC: null,
   lastnameCOld: null,
   occupationC: null,
+  citizenIdC: null,
+  liveC: "1",
   prefixM: null,
   prefixIdM: null,
   firstnameM: null,
   lastnameM: null,
   occupationM: null,
+  citizenIdM: null,
+  liveM: "1",
   prefixF: null,
   prefixIdF: null,
   firstnameF: null,
   lastnameF: null,
   occupationF: null,
+  citizenIdF: null,
+  liveF: "1",
   same: "0",
   childrens: [],
 };
diff --git a/src/modules/04_registry/interface/request/Coin.ts b/src/modules/04_registry/interface/request/Coin.ts
index a4ae439f3..583338641 100644
--- a/src/modules/04_registry/interface/request/Coin.ts
+++ b/src/modules/04_registry/interface/request/Coin.ts
@@ -9,6 +9,8 @@ interface RequestItemsObject {
   issuer: string;
   detail: string;
   issueDate: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/interface/request/Discipline.ts b/src/modules/04_registry/interface/request/Discipline.ts
index f9efd0107..0cc0906c7 100644
--- a/src/modules/04_registry/interface/request/Discipline.ts
+++ b/src/modules/04_registry/interface/request/Discipline.ts
@@ -8,8 +8,9 @@ interface RequestItemsObject {
   id: string;
   level: string;
   detail: string;
+  unStigma: string;
   refCommandNo: string;
-  refCommandDate: Date;
+  refCommandDate: Date | null;
   date: Date;
   createdFullName: string;
   createdAt: Date;
diff --git a/src/modules/04_registry/interface/request/Education.ts b/src/modules/04_registry/interface/request/Education.ts
index eb0270198..d5da9164f 100644
--- a/src/modules/04_registry/interface/request/Education.ts
+++ b/src/modules/04_registry/interface/request/Education.ts
@@ -9,7 +9,7 @@ interface RequestItemsObject {
   level: string;
   levelId: string;
   positionPath: string;
-  positionPathId: string;
+  isEducation: boolean;
   institute: string;
   degree: string;
   field: string;
@@ -19,9 +19,12 @@ interface RequestItemsObject {
   durationYear: number;
   other: string;
   fundName: string;
+  isDate: string;
   finishDate: Date;
   startDate: number;
   endDate: number;
+  startDate2: Date;
+  endDate2: Date;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/interface/request/Insignia.ts b/src/modules/04_registry/interface/request/Insignia.ts
index 8fa100368..f017b879d 100644
--- a/src/modules/04_registry/interface/request/Insignia.ts
+++ b/src/modules/04_registry/interface/request/Insignia.ts
@@ -18,6 +18,8 @@ interface RequestItemsObject {
   page: string;
   receiveDate: Date;
   dateAnnounce: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/interface/request/Record.ts b/src/modules/04_registry/interface/request/Record.ts
index 9dd8e20f5..b40baaf49 100644
--- a/src/modules/04_registry/interface/request/Record.ts
+++ b/src/modules/04_registry/interface/request/Record.ts
@@ -9,6 +9,8 @@ interface RequestItemsObject {
   date: Date;
   detail: string;
   reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/interface/request/Salary.ts b/src/modules/04_registry/interface/request/Salary.ts
index 726cf1300..2f3977809 100644
--- a/src/modules/04_registry/interface/request/Salary.ts
+++ b/src/modules/04_registry/interface/request/Salary.ts
@@ -35,6 +35,8 @@ interface RequestItemsObject {
   positionExecutiveSideId: string;
   salaryClass: string;
   salaryRef: string;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
@@ -47,7 +49,7 @@ interface RequestItemsEmployee {
   id: string;
   mouthSalaryAmount: number;
   oc: string | null;
-  ocId: string | null;
+  ocId: string;
   posNo: string | null;
   posNoId: string | null;
   posNoEmployee: string | null;
@@ -62,6 +64,8 @@ interface RequestItemsEmployee {
   positionSalaryAmount: number;
   salaryClass: string | null;
   salaryRef: string | null;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
 }
 
 //columns
diff --git a/src/modules/04_registry/interface/request/Talent.ts b/src/modules/04_registry/interface/request/Talent.ts
index 5fc664210..b66341543 100644
--- a/src/modules/04_registry/interface/request/Talent.ts
+++ b/src/modules/04_registry/interface/request/Talent.ts
@@ -9,8 +9,6 @@ interface RequestItemsObject {
   field: string;
   detail: string;
   remark: string;
-  dateStart: Date;
-  dateEnd: Date;
   reference: string;
   createdFullName: string;
   createdAt: Date;
diff --git a/src/modules/04_registry/interface/request/Work.ts b/src/modules/04_registry/interface/request/Work.ts
index 792ef7e43..58d2730cd 100644
--- a/src/modules/04_registry/interface/request/Work.ts
+++ b/src/modules/04_registry/interface/request/Work.ts
@@ -10,6 +10,8 @@ interface RequestItemsObject {
   dateEnd: Date;
   detail: string;
   reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/interface/response/Coin.ts b/src/modules/04_registry/interface/response/Coin.ts
index 0b2f50aeb..578dcbb5e 100644
--- a/src/modules/04_registry/interface/response/Coin.ts
+++ b/src/modules/04_registry/interface/response/Coin.ts
@@ -4,6 +4,8 @@ interface ResponseObject {
   issuer: string;
   detail: string;
   issueDate: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/interface/response/Discipline.ts b/src/modules/04_registry/interface/response/Discipline.ts
index 37a3143cf..bb6ca4262 100644
--- a/src/modules/04_registry/interface/response/Discipline.ts
+++ b/src/modules/04_registry/interface/response/Discipline.ts
@@ -3,6 +3,7 @@ interface ResponseObject {
   id: string;
   level: string;
   detail: string;
+  unStigma: string;
   refCommandNo: string;
   refCommandDate: Date;
   date: Date;
diff --git a/src/modules/04_registry/interface/response/Education.ts b/src/modules/04_registry/interface/response/Education.ts
index 7dcd3bdf2..832f48e51 100644
--- a/src/modules/04_registry/interface/response/Education.ts
+++ b/src/modules/04_registry/interface/response/Education.ts
@@ -4,7 +4,7 @@ interface ResponseObject {
   educationLevel: string;
   educationLevelId: string;
   positionPath: string;
-  positionPathId: string;
+  isEducation: boolean;
   institute: string;
   degree: string;
   field: string;
@@ -14,9 +14,12 @@ interface ResponseObject {
   durationYear: number;
   other: string;
   fundName: string;
+  isDate: string;
   finishDate: Date;
   startDate: number;
   endDate: number;
+  startDate2: Date;
+  endDate2: Date;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/interface/response/Family.ts b/src/modules/04_registry/interface/response/Family.ts
index 626ca73cc..04dc4b363 100644
--- a/src/modules/04_registry/interface/response/Family.ts
+++ b/src/modules/04_registry/interface/response/Family.ts
@@ -6,14 +6,20 @@ interface ResponseObject {
   coupleLastName: string | null;
   coupleLastNameOld: string | null;
   coupleCareer: string | null;
+  coupleLive: Boolean | null;
+  coupleCitizenId: string | null;
   fatherPrefixId: string | null;
   fatherFirstName: string | null;
   fatherLastName: string | null;
   fatherCareer: string | null;
+  fatherLive: Boolean | null;
+  fatherCitizenId: string | null;
   motherPrefixId: string | null;
   motherFirstName: string | null;
   motherLastName: string | null;
   motherCareer: string | null;
+  motherLive: Boolean | null;
+  motherCitizenId: string | null;
   createdFullName: string | null;
   createdAt: Date;
   childrens: childrenFamily[];
@@ -26,14 +32,20 @@ interface ResponseHistory {
   coupleLastName: string | null;
   coupleLastNameOld: string | null;
   coupleCareer: string | null;
+  coupleLive: string | null;
+  coupleCitizenId: string | null;
   fatherPrefixId: string | null;
   fatherFirstName: string | null;
   fatherLastName: string | null;
   fatherCareer: string | null;
+  fatherLive: string | null;
+  fatherCitizenId: string | null;
   motherPrefixId: string | null;
   motherFirstName: string | null;
   motherLastName: string | null;
   motherCareer: string | null;
+  motherLive: string | null;
+  motherCitizenId: string | null;
   createdFullName: string | null;
   createdAt: Date;
   childrens: childrenFamily[];
@@ -45,6 +57,8 @@ interface childrenFamily {
   childrenFirstName: string | null;
   childrenLastName: string | null;
   childrenCareer: string | null;
+  childrenLive: string | null;
+  childrenCitizenId: string | null;
 }
 
 export type { ResponseObject, childrenFamily, ResponseHistory };
diff --git a/src/modules/04_registry/interface/response/Insignia.ts b/src/modules/04_registry/interface/response/Insignia.ts
index d60b4e22d..4d26152a0 100644
--- a/src/modules/04_registry/interface/response/Insignia.ts
+++ b/src/modules/04_registry/interface/response/Insignia.ts
@@ -13,6 +13,8 @@ interface ResponseObject {
   page: string;
   receiveDate: Date;
   dateAnnounce: Date;
+  refCommandNo: string;
+  refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/interface/response/Record.ts b/src/modules/04_registry/interface/response/Record.ts
index c1c818f1b..2ed425be7 100644
--- a/src/modules/04_registry/interface/response/Record.ts
+++ b/src/modules/04_registry/interface/response/Record.ts
@@ -4,6 +4,8 @@ interface ResponseObject {
   date: Date;
   detail: string;
   reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/interface/response/Salary.ts b/src/modules/04_registry/interface/response/Salary.ts
index 3087ae9ca..dbf255081 100644
--- a/src/modules/04_registry/interface/response/Salary.ts
+++ b/src/modules/04_registry/interface/response/Salary.ts
@@ -25,6 +25,8 @@ interface ResponseObject {
   positionExecutiveSideId: string;
   salaryClass: string;
   salaryRef: string;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
@@ -37,7 +39,7 @@ interface ResponseObjectEmployee {
   id: string;
   mouthSalaryAmount: number;
   oc: string | null;
-  ocId: string | null;
+  ocId: string;
   posNo: string | null;
   posNoId: string | null;
   posNoEmployee: string | null;
@@ -52,6 +54,8 @@ interface ResponseObjectEmployee {
   positionSalaryAmount: number;
   salaryClass: string | null;
   salaryRef: string | null;
+  refCommandNo: string;
+  //   refCommandDate: Date | null;
 }
 
 export type { ResponseObject, ResponseObjectEmployee };
diff --git a/src/modules/04_registry/interface/response/Talent.ts b/src/modules/04_registry/interface/response/Talent.ts
index dc8d5cd4e..35bddad2d 100644
--- a/src/modules/04_registry/interface/response/Talent.ts
+++ b/src/modules/04_registry/interface/response/Talent.ts
@@ -4,8 +4,6 @@ interface ResponseObject {
   field: string;
   detail: string;
   remark: string;
-  dateStart: Date;
-  dateEnd: Date;
   reference: string;
   createdFullName: string;
   createdAt: Date;
diff --git a/src/modules/04_registry/interface/response/Work.ts b/src/modules/04_registry/interface/response/Work.ts
index a575f7811..fb269cf17 100644
--- a/src/modules/04_registry/interface/response/Work.ts
+++ b/src/modules/04_registry/interface/response/Work.ts
@@ -5,6 +5,8 @@ interface ResponseObject {
   dateEnd: Date;
   detail: string;
   reference: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
   createdFullName: string;
   createdAt: Date;
 }
diff --git a/src/modules/04_registry/views/Main.vue b/src/modules/04_registry/views/Main.vue
index 88575c644..6d3758e01 100644
--- a/src/modules/04_registry/views/Main.vue
+++ b/src/modules/04_registry/views/Main.vue
@@ -54,7 +54,9 @@
             :rows="rows"
             :columns="
               profileType == 'employee' || profileType == 'all'
-                ? columnsEmployee
+                ? profileEmployeeType == 'temp'
+                  ? columnsEmployeeTemp
+                  : columnsEmployee
                 : columns
             "
             :filter="filter"
@@ -155,6 +157,7 @@ const oldFullName = ref<string>("");
 const isShowRetire = ref<boolean>(false);
 const isProbation = ref<boolean>(false);
 const profileType = ref<string>("officer");
+const profileEmployeeType = ref<string>("temp");
 const retireYear = ref<number>();
 const govAge = ref<number>();
 const initialPagination = ref<Pagination>({
@@ -491,7 +494,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "createdAt",
     align: "left",
-    label: "วันที่เข้าสู่ระบบ",
+    label: "วันที่สร้าง",
     sortable: true,
     field: "createdAt",
     headerStyle: "font-size: 14px",
@@ -533,7 +536,7 @@ visibleColumnsEmployee.value = [
   "positionEmployeePositionSide",
   "numberPosition",
   "positionLine",
-  "positionType",
+  //   "positionType",
   "govAge",
   "positionEmployeeLevel",
   "positionEmployeeGroup",
@@ -629,24 +632,10 @@ const columnsEmployee = ref<QTableProps["columns"]>([
         sensitivity: "base",
       }),
   },
-  {
-    name: "positionType",
-    align: "left",
-    label: "ประเภท",
-    sortable: true,
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
   {
     name: "positionEmployeeLevel",
     align: "left",
-    label: "ระดับชั้นงาน",
+    label: "ระดับ",
     sortable: true,
     field: "positionEmployeeLevel",
     headerStyle: "font-size: 14px",
@@ -744,7 +733,7 @@ const columnsEmployee = ref<QTableProps["columns"]>([
   {
     name: "dateAppoint",
     align: "left",
-    label: "วันที่บรรจุ",
+    label: "วันที่จ้าง",
     sortable: true,
     field: "dateAppoint",
     headerStyle: "font-size: 14px",
@@ -755,7 +744,7 @@ const columnsEmployee = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
     align: "left",
-    label: "เริ่มปฎิบัติราชการ",
+    label: "วันที่เริ่มปฎิบัติราชการ",
     sortable: true,
     field: "dateStart",
     headerStyle: "font-size: 14px",
@@ -766,7 +755,7 @@ const columnsEmployee = ref<QTableProps["columns"]>([
   {
     name: "salaryDate",
     align: "left",
-    label: "วันที่เข้าสู่ตำแหน่ง",
+    label: "วันที่แต่งตั้ง",
     sortable: true,
     field: "salaryDate",
     headerStyle: "font-size: 14px",
@@ -809,7 +798,310 @@ const columnsEmployee = ref<QTableProps["columns"]>([
   {
     name: "createdAt",
     align: "left",
-    label: "วันที่เข้าสู่ระบบ",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isLeave",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "leaveDateOrder",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "leaveDateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsEmployeeTemp = ref<String[]>([]);
+visibleColumnsEmployeeTemp.value = [
+  "no",
+  "fullname",
+  "fullnameOld",
+  "oc",
+  "positionEmployeePosition",
+  "positionEmployeePositionSide",
+  //   "numberPosition",
+  "positionLine",
+  //   "positionType",
+  "govAge",
+  //   "positionEmployeeLevel",
+  "positionEmployeeGroup",
+  "dateAppoint",
+  "refSalary",
+  "dateStart",
+  "createdAt",
+  "salaryDate",
+  "age",
+  "amount",
+  //   "insignia",
+  //   "insigniaLast",
+  "isLeave",
+  "leaveDateOrder",
+];
+const columnsEmployeeTemp = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  //   {
+  //     name: "numberPosition",
+  //     align: "left",
+  //     label: "ตำแหน่งเลขที่",
+  //     sortable: true,
+  //     field: "numberPosition",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {
+  //     name: "positionEmployeeLevel",
+  //     align: "left",
+  //     label: "ระดับ",
+  //     sortable: true,
+  //     field: "positionEmployeeLevel",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  //   {เอาออกสำหรับลูกจ้างชั่วคราว
+  //     name: "insignia",
+  //     align: "left",
+  //     label: "เครื่องราชฯ",
+  //     sortable: true,
+  //     field: "insignia",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  //   {
+  //     name: "insigniaLast",
+  //     align: "left",
+  //     label: "เครื่องราชฯ(เดิม)",
+  //     sortable: true,
+  //     field: "insigniaLast",
+  //     headerStyle: "font-size: 14px",
+  //     style: "font-size: 14px",
+  //     sort: (a: string, b: string) =>
+  //       a.localeCompare(b, undefined, {
+  //         numeric: true,
+  //         sensitivity: "base",
+  //       }),
+  //   },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่จ้าง",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "วันที่เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryDate",
+    align: "left",
+    label: "วันที่แต่งตั้ง",
+    sortable: true,
+    field: "salaryDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refSalary",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "refSalary",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullnameOld",
+    align: "left",
+    label: "ชื่อ-สกุล(เดิม)",
+    sortable: true,
+    field: "fullnameOld",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
     sortable: true,
     field: "createdAt",
     headerStyle: "font-size: 14px",
@@ -955,7 +1247,13 @@ const doSearch = async () => {
       criteriaType: "employee_class",
       criteriaValue: employeeClass.value,
     });
-    visibleColumns.value = visibleColumnsEmployee.value;
+    if (employeeClass.value == "perm") {
+      profileEmployeeType.value = "perm";
+      visibleColumns.value = visibleColumnsEmployee.value;
+    } else {
+      profileEmployeeType.value = "temp";
+      visibleColumns.value = visibleColumnsEmployeeTemp.value;
+    }
   }
 
   if (selected.value == null || selected.value == "") return;
@@ -1002,8 +1300,7 @@ const doSearch = async () => {
           amount: e.amount == null ? "" : e.amount.toLocaleString(),
           insignia: e.insignia,
           insigniaLast: e.insigniaLast,
-          isLeave:
-            e.isLeave == false ? "ถือครอง" : `${typeRetire(e.leaveReason)}`,
+          isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
           leaveDateOrder:
             e.leaveDateOrder == null
               ? null
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index bef7827c8..7e380a117 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -452,6 +452,36 @@ export const useCounterMixin = defineStore("mixin", () => {
       .onDismiss(() => {});
   }
 
+  function modalWarning(q: any, title: string, message: string, ok?: Function) {
+    // q.dialog({
+    //   title: `<span class="text-red">${title}</span>`,
+    //   message: `<span class="text-black">${message}</span>`,
+    //   ok: {
+    //     push: true,
+    //     color: "primary",
+    //   },
+    //   focus: "none",
+    //   persistent: true,
+    //   html: true,
+    // })
+    //   .onOk(() => {
+    //     if (ok != undefined) ok();
+    //   })
+    //   .onCancel(() => {})
+    //   .onDismiss(() => {});
+
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title,
+        message: message,
+        icon: "warning",
+        color: "warning",
+        onlycancel: true,
+      },
+    });
+  }
+
   function modalConfirm(
     q: any,
     title: string,
@@ -685,5 +715,6 @@ export const useCounterMixin = defineStore("mixin", () => {
     typeRetire,
     typeChangeName,
     statusLeave,
+    modalWarning,
   };
 });