diff --git a/src/modules/05_leave/components/DialogDetail.vue b/src/modules/05_leave/components/DialogDetail.vue
index 163ff1b..8139d16 100644
--- a/src/modules/05_leave/components/DialogDetail.vue
+++ b/src/modules/05_leave/components/DialogDetail.vue
@@ -158,8 +158,11 @@ const formDataCancle = reactive<FromCancelDetail>({
   leaveDetail: "",
   leaveSubTypeName: "",
   leaveTotal: 0,
-  leaveStartDate: new Date(),
-  leaveEndDate: new Date(),
+  leaveDateStart: new Date(),
+  leaveDateEnd: new Date(),
+  leaveRange: "",
+  leaveRangeEnd: "",
+  leaveDirectorComment: "",
 });
 
 /** form ขอยกเลิก*/
@@ -197,7 +200,8 @@ async function fetchDataDetail(id: string) {
       formData.dateSendLeave =
         data.dateSendLeave && date2Thai(data.dateSendLeave);
       formData.status = data.status ?? "-";
-      formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate);
+      formData.leaveDateStart =
+        data.leaveStartDate && date2Thai(data.leaveStartDate);
       formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
       formData.leaveCount = calculateDurationYmd(
         data.leaveStartDate,
@@ -269,11 +273,7 @@ async function fetchDataDetail(id: string) {
       formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
       formData.approveStep = data.approveStep ?? "-";
       formData.dear = data.dear ?? "-";
-      checkLeaveType(
-        formData.leaveTypeId,
-        formData.ordainDayLocationName,
-        formData.studyDayTrainingSubject
-      );
+      checkLeaveType(formData.leaveTypeId);
     })
     .catch((err) => {
       props.onClickClose?.();
@@ -289,11 +289,7 @@ async function fetchDataDetail(id: string) {
  * @param leaveTypeId  ประเภทการลา
  * @param leaveTypeName  ประเภทการลา
  */
-function checkLeaveType(
-  leaveTypeId: string,
-  ordainDayLocationName: string,
-  studyDayTrainingSubject: string
-) {
+function checkLeaveType(leaveTypeId: string) {
   if (props.leaveType) {
     const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
     const type = filtertype.code;
@@ -346,9 +342,9 @@ async function fetchDataCancelDetail(id: string) {
       formDataCancle.leaveWrote = data.leaveWrote ?? "-";
       formDataCancle.fullname = data.fullName ?? "-";
       formDataCancle.status = convertStatud(data.status) ?? "-";
-      formDataCancle.leaveStartDate =
+      formDataCancle.leaveDateStart =
         data.leaveStartDate && date2Thai(data.leaveStartDate);
-      formDataCancle.leaveEndDate =
+      formDataCancle.leaveDateEnd =
         data.leaveEndDate && date2Thai(data.leaveEndDate);
       formDataCancle.leaveTotal = data.leaveTotal ?? "-";
       formDataCancle.leaveAddress = data.leaveAddress ?? "-";
diff --git a/src/modules/05_leave/components/formDetail/formCancel.vue b/src/modules/05_leave/components/formDetail/formCancel.vue
index 40411b9..c43564e 100644
--- a/src/modules/05_leave/components/formDetail/formCancel.vue
+++ b/src/modules/05_leave/components/formDetail/formCancel.vue
@@ -39,12 +39,6 @@ const props = defineProps({
         {{ props.data.fullname ? props.data.fullname : "-" }}
       </div>
     </div>
-    <div class="row">
-      <div class="col-xs-12 col-md-6 text-grey-8">สถานะการขอลา</div>
-      <div class="col-xs-12 col-md-6">
-        {{ props.data.status ? props.data.status : "-" }}
-      </div>
-    </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
       <div class="col-xs-12 col-md-6">
@@ -93,6 +87,12 @@ const props = defineProps({
         {{ props.data.leaveNumber ? props.data.leaveNumber : "-" }}
       </div>
     </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียดการลา</div>
+      <div class="col-xs-12 col-md-6">
+        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+      </div>
+    </div>
     <div class="row">
       <div class="col-xs-12 col-md-6 text-grey-8">เหตุผลการยกเลิกการลา</div>
       <div class="col-xs-12 col-md-6">
@@ -100,9 +100,19 @@ const props = defineProps({
       </div>
     </div>
     <div class="row">
-      <div class="col-xs-12 col-md-6 text-grey-8">รายละเอียดการลา</div>
+      <div class="col-xs-12 col-md-6 text-grey-8">สถานะการขอยกเลิก</div>
       <div class="col-xs-12 col-md-6">
-        {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
+        {{ props.data.status ? props.data.status : "-" }}
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-12 col-md-6 text-grey-8">ความคิดเห็นของผู้มีอำนาจ</div>
+      <div class="col-xs-12 col-md-6">
+        {{
+          props.data.leaveDirectorComment
+            ? props.data.leaveDirectorComment
+            : "-"
+        }}
       </div>
     </div>
     <div class="row">
diff --git a/src/modules/05_leave/interface/response/leave.ts b/src/modules/05_leave/interface/response/leave.ts
index 5df0e38..f45547d 100644
--- a/src/modules/05_leave/interface/response/leave.ts
+++ b/src/modules/05_leave/interface/response/leave.ts
@@ -105,8 +105,13 @@ interface FromCancelDetail {
   leaveNumber: String; //หมายเลขที่ติดต่อขณะลา
   leaveDetail: String; //รายละเอียดการลา
   leaveTotal: number; //จำนวนวันที่ลา
-  leaveStartDate: Date; //วัน เดือน ปีเริ่มต้นลา
-  leaveEndDate: Date; //วัน เดือน ปีสิ้นสุดลา
+  leaveStartDate?: Date; //วัน เดือน ปีเริ่มต้นลา
+  leaveEndDate?: Date; //วัน เดือน ปีสิ้นสุดลา
+  leaveDateStart?: Date;
+  leaveDateEnd?: Date; //วัน เดือน ปีสิ้นสุดลา
+  leaveRange?: string; //ช่วงการลา
+  leaveRangeEnd?: string; //ช่วงการลา
+  leaveDirectorComment?: string; //ความคิดเห็นของผู้บังคับบัญชา
 }
 
 interface FormDelete {