diff --git a/src/api/evaluate/api.evaluate.ts b/src/api/evaluate/api.evaluate.ts
index 82d7a66..cb4d9da 100644
--- a/src/api/evaluate/api.evaluate.ts
+++ b/src/api/evaluate/api.evaluate.ts
@@ -14,7 +14,7 @@ export default {
     `${evaluation}/check-doc-v1/${type}/${id}`,
   evaluationDoc1: (id: string, type: string) =>
     `${evaluation}/doc1/${type}/${id}`,
-  evaluationCheckdocV1: (id: string) => `${evaluation}/check-doc-v1/${id}`,
+  evaluationCheckdocV2: (id: string) => `${evaluation}/check-doc-v1/${id}`,
   evaluationPreparedocV2: (id: string) =>
     `${evaluation}/prepare-doc-v2/approve/${id}`,
   evaluationPreparedocRejectV2: (id: string) =>
diff --git a/src/modules/06_evaluate/components/EvaluateStepMain.vue b/src/modules/06_evaluate/components/EvaluateStepMain.vue
index 7191424..887feb8 100644
--- a/src/modules/06_evaluate/components/EvaluateStepMain.vue
+++ b/src/modules/06_evaluate/components/EvaluateStepMain.vue
@@ -1,7 +1,460 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { ref, reactive, onMounted, watch } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  FormSpec,
+  FormCommand,
+  FormCommandRef,
+} from "@/modules/06_evaluate/interface/evalute";
+
+import Stepper from "@/modules/06_evaluate/components/Stepper.vue";
+import Step1 from "@/modules/06_evaluate/components/step/step1.vue";
+import Step2 from "@/modules/06_evaluate/components/step/step2.vue";
+import Step3 from "@/modules/06_evaluate/components/step/step3.vue";
+import Step4 from "@/modules/06_evaluate/components/step/step4.vue";
+import Step5 from "@/modules/06_evaluate/components/step/step5.vue";
+import Step6 from "@/modules/06_evaluate/components/step/step6.vue";
+import Step7 from "@/modules/06_evaluate/components/step/step7.vue";
+import Step8 from "@/modules/06_evaluate/components/step/step8.vue";
+import Step9 from "@/modules/06_evaluate/components/step/step9.vue";
+import tab1 from "@/modules/06_evaluate/components/Tab1.vue";
+
+import ViewStep1 from "@/modules/06_evaluate/components/viewstep/viewStep1.vue";
+import ViewStep3 from "@/modules/06_evaluate/components/viewstep/viewStep3.vue";
+import ViewStep7 from "@/modules/06_evaluate/components/viewstep/viewStep7.vue";
+
+import PopupHistory from "@/modules/06_evaluate/components/viewstep/popupHistory.vue";
+
+import { useEvaluateStore } from "@/modules/06_evaluate/store";
+import { useCounterMixin } from "@/stores/mixin";
 
 const router = useRouter();
+const route = useRoute();
+const store = useEvaluateStore();
+const mixin = useCounterMixin();
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError, dialogConfirm } = mixin;
+
+const externalLink =
+  "https://accreditation.ocsc.go.th/accreditation/search/curriculum";
+
+// const evaluateId = ref<string>(route.params.id.toString());
+const showLoadStatus = ref<boolean>(false);
+
+const modalHistory = ref<boolean>(false);
+function onClickPopupHistory() {
+  modalHistory.value = !modalHistory.value;
+}
+
+async function onCilckNextStep() {
+  console.log(store.step);
+
+  const functionCreateDoc: (() => Promise<void>) | null =
+    store.step === 1
+      ? await saveStep1
+      : store.step === 3
+      ? await saveStep3
+      : store.step === 4
+      ? await saveStep4
+      : store.step === 5
+      ? await saveStep5
+      : store.step === 7
+      ? await saveStep7
+      : store.step === 8
+      ? await saveStep8
+      : store.step === 9
+      ? await saveStep9
+      : null;
+  store.step === 2 || store.step === 6
+    ? validateForm()
+    : store.step == 3 || store.step == 7
+    ? dialogConfirm(
+        $q,
+        () => {
+          functionCreateDoc?.();
+        },
+        "ยืนยันการยื่นเอกสาร",
+        "ต้องการยืนยันการยื่นเอกสารใช่หรือไม่? หากยืนยันแล้วคุณจะไม่สามารถกลับมาแก้ไขเอกสารได้อีก"
+      )
+    : store.step < 9 &&
+      dialogConfirm(
+        $q,
+        async () => {
+          showLoader();
+          await functionCreateDoc?.();
+        },
+        "ยืนยันการดำเนินการ",
+        "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+      );
+}
+
+async function validateForm() {
+  const hasError = [];
+  for (const key in formCommandRef) {
+    if (Object.prototype.hasOwnProperty.call(formCommandRef, key)) {
+      const property = formCommandRef[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    store.step === 2 ? saveStep2() : saveStep6();
+  }
+}
+
+const pdfSrc = ref<any>();
+async function updateFilePDF(url: any) {
+  pdfSrc.value = url;
+}
+
+/** function เช็คการยื่นข้อประเมิน*/
+async function fetchCheckStatus() {
+  showLoader();
+  await http
+    .get(config.API.evaluationCheckStatus())
+    .then((res) => {
+      const data = res.data.result;
+      const id =
+        route.params.type === "expert" ? data.expertId : data.specialExpertId;
+
+      router.push(`/evaluate/detail/${route.params.type}/${id}`);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchCheckStep(id: string) {
+  showLoadStatus.value = false;
+  if (id) {
+    await http
+      .get(config.API.evaluationCheckStep(id))
+      .then((res) => {
+        const data = res.data.result;
+
+        let step =
+          data.step === "CHECK_SPEC"
+            ? 1
+            : data.step === "PREPARE_DOC_V1"
+            ? 2
+            : data.step === "CHECK_DOC_V1"
+            ? 3
+            : data.step === "WAIT_CHECK_DOC_V1"
+            ? 4
+            : data.step === "ANNOUNCE_WEB"
+            ? 5
+            : data.step === "PREPARE_DOC_V2"
+            ? 6
+            : data.step === "WAIT_CHECK_DOC_V2"
+            ? 7
+            : data.step === "CHECK_DOC_V2"
+            ? 8
+            : data.step === "DONE"
+            ? 9
+            : 1;
+
+        store.currentStep = step;
+        store.step = step;
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        showLoadStatus.value = true;
+      });
+  } else (store.step = 1), (store.currentStep = 1);
+}
+
+/** STEP 1*/
+const formSpec = reactive<FormSpec>({
+  isEducationalQft: false, // คุณวุฒิการศึกษา
+  isGovermantServiceHtr: false, // ประวัติการรับราชการ
+  isOperatingExp: false, // ประสบการณ์ในการปฏิบัติงาน
+  isMinPeriodOfTenure: false, // ระยะเวลาขั้นต่ำในการดำรงตำแหน่งในสายงานที่ขอเข้ารับการคัดเลือก
+  isHaveSpecificQft: false, // มีคุณสมบัติตรงตามคุณสมบัติเฉพาะสำหรับตำแหน่งที่กำหนด ในมาตราฐานกำหนดตำแหน่ง
+  isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
+  isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก
+});
+const formDetail = ref<any>();
+const formDataStep1 = ref<any>();
+async function fetchDataStep1(id: string) {
+  showLoadStatus.value = false;
+  showLoader();
+  await http
+    .get(config.API.evaluationCheckspecByid(id))
+    .then((res) => {
+      const data = res.data.result;
+      formDataStep1.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+      showLoadStatus.value = true;
+    });
+}
+
+async function updateCheckSpec(data: FormSpec) {
+  formSpec.isEducationalQft = data.isEducationalQft;
+  formSpec.isGovermantServiceHtr = data.isGovermantServiceHtr;
+  formSpec.isOperatingExp = data.isOperatingExp;
+  formSpec.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
+  formSpec.isHaveSpecificQft = data.isHaveSpecificQft;
+  formSpec.isHaveProLicense = data.isHaveProLicense;
+  formSpec.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
+}
+
+function updateFormDetail(data: any) {
+  formDetail.value = data;
+}
+
+async function saveStep1() {
+  const salaries = formDetail.value.trainings.map((e: any) => ({
+    amount: e.amount,
+    date: e.date,
+    mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
+    posNo: e.posNo,
+    position: e.position,
+    positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
+    refCommandDate: e.refCommandDate,
+    refCommandNo: e.refCommandNo ? e.refCommandNo : "",
+    salaryClass: e.salaryClass ? e.salaryClass : "",
+    salaryRef: e.salaryRef ? e.salaryRef : "",
+    salaryStatus: e.salaryStatus ? e.salariesStatus : "",
+  }));
+
+  const educations = formDetail.value.educations.map((e: any) => ({
+    country: e.country,
+    degree: e.degree,
+    duration: e.duration,
+    durationYear: e.durationYear.toString(),
+    educationLevel: e.educationLevel,
+    endDate: e.endDate,
+    field: e.field,
+    finishDate: e.finishDate,
+    fundName: e.fundName,
+    gpa: e.gpa,
+    institute: e.institute,
+    isDate: e.isDate,
+    isEducation: e.isEducation,
+    other: e.other,
+    startDate: e.startDate,
+  }));
+  const evaluateType = route.params.type.toString();
+
+  const form = {
+    userId: formDetail.value.id,
+    citizenId: formDetail.value.citizenId,
+    prefix: formDetail.value.prefix,
+    fullName: `${formDetail.value.firstName}   ${formDetail.value.lastName}.`,
+    position: formDetail.value.position,
+    oc: formDetail.value.oc,
+    salary: formDetail.value.salary.toString(),
+    positionLevel: formDetail.value.positionLevel,
+    posNo: formDetail.value.posNo,
+    birthDate: formDetail.value.birthDate,
+    govAge: formDetail.value.govAge,
+    type: evaluateType.toUpperCase(),
+    step: "PREPARE_DOC_V1",
+    isEducationalQft: formSpec.isEducationalQft,
+    isGovermantServiceHtr: formSpec.isGovermantServiceHtr,
+    isOperatingExp: formSpec.isOperatingExp,
+    isMinPeriodOfTenure: formSpec.isMinPeriodOfTenure,
+    isHaveSpecificQft: formSpec.isHaveSpecificQft,
+    isHaveProLicense: formSpec.isHaveProLicense,
+    isHaveMinPeriodOrHoldPos: formSpec.isHaveMinPeriodOrHoldPos,
+    reason: "",
+    educations: [...educations],
+    certificates: [...formDetail.value.certificates],
+    salaries: [...salaries],
+    trainings: [...formDetail.value.trainings],
+    assessments: [...formDetail.value.assessments],
+  };
+
+  fetchCheckStatus();
+
+  await http
+    .post(config.API.evaluationCheckspec(), form)
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+
+  // showLoader();
+  // await saveEvaluation(formSpec, formDetail.value);
+}
+
+/** STEP 2*/
+const formCommand = reactive<FormCommand>({
+  commanderFullname: "",
+  commanderPosition: "",
+  commanderAboveFullname: "",
+  commanderAbovePosition: "",
+});
+const commanderFullnameRef = ref<object | null>(null);
+const commanderPositionRef = ref<object | null>(null);
+const commanderAboveFullnameRef = ref<object | null>(null);
+const commanderAbovePositionRef = ref<object | null>(null);
+const fileEvaluation1Ref = ref<object | null>(null);
+const fileEvaluation2Ref = ref<object | null>(null);
+const fileEvaluation3Ref = ref<object | null>(null);
+const fileEvaluation4Ref = ref<object | null>(null);
+const fileEvaluation5Ref = ref<object | null>(null);
+const fileEvaluation6Ref = ref<object | null>(null);
+const formCommandRef: FormCommandRef = {
+  commanderFullname: commanderFullnameRef,
+  commanderPosition: commanderPositionRef,
+  commanderAboveFullname: commanderAboveFullnameRef,
+  commanderAbovePosition: commanderAbovePositionRef,
+  fileEvaluation1: fileEvaluation1Ref,
+  fileEvaluation2: fileEvaluation2Ref,
+  fileEvaluation3: fileEvaluation3Ref,
+  fileEvaluation4: fileEvaluation4Ref,
+  fileEvaluation5: fileEvaluation5Ref,
+  fileEvaluation6: fileEvaluation6Ref,
+};
+
+function updateformCommand(val: any, ref: any) {
+  formCommand.commanderFullname = val.commanderFullname;
+  formCommand.commanderPosition = val.commanderPosition;
+  formCommand.commanderAboveFullname = val.commanderAboveFullname;
+  formCommand.commanderAbovePosition = val.commanderAbovePosition;
+
+  commanderFullnameRef.value = ref.commanderFullnameRef;
+  commanderPositionRef.value = ref.commanderPositionRef;
+  commanderAboveFullnameRef.value = ref.commanderAboveFullnameRef;
+  commanderAbovePositionRef.value = ref.commanderAbovePositionRef;
+  fileEvaluation1Ref.value = ref.fileEvaluation1Ref;
+  fileEvaluation2Ref.value = ref.fileEvaluation2Ref;
+  fileEvaluation3Ref.value = ref.fileEvaluation3Ref;
+  fileEvaluation4Ref.value = ref.fileEvaluation4Ref;
+  fileEvaluation5Ref.value = ref.fileEvaluation5Ref;
+  fileEvaluation6Ref.value = ref.fileEvaluation6Ref;
+}
+async function saveStep2() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(
+          config.API.evaluationPreparedoc(
+            route.params.id.toString(),
+            "approve"
+          ),
+          formCommand
+        )
+        .then(() => {
+          route.params.id && fetchCheckStep(route.params.id.toString());
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+  );
+}
+
+async function saveStep3() {
+  showLoader();
+  await http
+    .put(config.API.evaluationCheckdoc(route.params.id.toString(), "approve"))
+    .then(() => {
+      route.params.id && fetchCheckStep(route.params.id.toString());
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+async function saveStep4() {
+  console.log("Save 4");
+}
+async function saveStep5() {
+  console.log("Save 5");
+}
+async function saveStep6() {
+  const body = {
+    commanderAboveFullnameDoc2: formCommand.commanderAboveFullname,
+    commanderAbovePositionDoc2: formCommand.commanderAbovePosition,
+    commanderFullnameDoc2: formCommand.commanderFullname,
+    commanderPositionDoc2: formCommand.commanderPosition,
+  };
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.evaluationCheckdocV2(route.params.id.toString()), body)
+        .then(() => {
+          route.params.id && fetchCheckStep(route.params.id.toString());
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการดำเนินการ",
+    "ต้องการยืนยันการดำเนินการต่อใช่หรือไม่?"
+  );
+}
+async function saveStep7() {
+  showLoader();
+  await http
+    .put(config.API.evaluationPreparedocV2(route.params.id.toString()))
+    .then(() => {
+      route.params.id && fetchCheckStep(route.params.id.toString());
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+}
+async function saveStep8() {
+  console.log("Save 8");
+}
+async function saveStep9() {
+  console.log("Save 9");
+}
+
+watch(
+  () => store.step,
+  () => {
+    if (route.params.id) {
+      const id = route.params.id.toString();
+      store.step === 1 && fetchDataStep1(id);
+    }
+  }
+);
+
+onMounted(async () => {
+  route.params.id && fetchCheckStep(route.params.id.toString());
+  route.name === "evaluate-add" && (showLoadStatus.value = true);
+});
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -23,9 +476,154 @@ const router = useRouter();
 
     <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
       <div class="col-12 row">
-        <q-card bordered class="col-12 row caedNone q-pa-md"> </q-card>
+        <q-card bordered class="col-12 row caedNone q-pa-md q-col-gutter-md">
+          <div class="col-xs-12 col-sm-3">
+            <div class="toptitle">
+              {{
+                route.params.type === "expert"
+                  ? "ประเมินชำนาญการ"
+                  : "ประเมินชำนาญการพิเศษ"
+              }}
+              <q-btn
+                flat
+                round
+                dense
+                color="primary"
+                icon="history"
+                @click="onClickPopupHistory"
+              >
+                <q-tooltip>ประวัติการประเมิน</q-tooltip>
+              </q-btn>
+            </div>
+            <Stepper />
+          </div>
+
+          <div class="col-xs-12 col-sm-9" v-if="showLoadStatus">
+            <div class="col-12 row">
+              <div class="col-9">
+                <div class="toptitle">
+                  {{ store.step }}.{{ store.title[store.step - 1] }}
+                </div>
+              </div>
+              <div class="col-3 text-right">
+                <q-btn
+                  v-if="store.step === 1"
+                  :href="externalLink"
+                  target="_blank"
+                  outline
+                  color="blue"
+                  no-caps
+                >
+                  ตรวจสอบคุณสมบัติกับ ก.พ.
+                </q-btn>
+              </div>
+            </div>
+            <div class="row q-col-gutter-md col-12">
+              <div
+                :class="
+                  store.step === 2 ||
+                  store.step === 4 ||
+                  store.step === 5 ||
+                  store.step === 6 ||
+                  store.step === 8 ||
+                  store.step === 9
+                    ? 'col-xs-12 col-sm-12 row'
+                    : 'col-xs-12 col-sm-5 row'
+                "
+              >
+                <q-card flat bordered class="col-12 q-pa-md">
+                  <q-card-section>
+                    <Step1
+                      v-if="store.step === 1"
+                      @update:spec="updateCheckSpec"
+                      :data="formDataStep1"
+                    />
+                    <Step2
+                      v-if="store.step === 2"
+                      @update:form="updateformCommand"
+                    />
+                    <Step3
+                      v-if="store.step === 3"
+                      @update:file="updateFilePDF"
+                    />
+                    <Step4 v-if="store.step === 4" />
+                    <Step5 v-if="store.step === 5" />
+                    <Step6
+                      v-if="store.step === 6"
+                      @update:form="updateformCommand"
+                    />
+                    <Step7
+                      v-if="store.step === 7"
+                      @update:file="updateFilePDF"
+                    />
+                    <Step8 v-if="store.step === 8" />
+                    <Step9 v-if="store.step === 9" />
+                  </q-card-section>
+                </q-card>
+              </div>
+              <div
+                class="col-xs-12 col-sm-7 row"
+                v-if="store.step === 1 || store.step === 3 || store.step === 7"
+              >
+                <q-card flat bordered class="col-12">
+                  <q-card-section>
+                    <ViewStep1
+                      v-if="store.step === 1"
+                      @update:formDeital="updateFormDetail"
+                      :data="formDataStep1"
+                    />
+                    <ViewStep3
+                      v-if="store.step === 3 && pdfSrc"
+                      :pdfSrc="pdfSrc"
+                    />
+                    <ViewStep7
+                      v-if="store.step === 7 && pdfSrc"
+                      :pdfSrc="pdfSrc"
+                    /> </q-card-section
+                ></q-card>
+              </div>
+            </div>
+            <div class="q-mt-md q-gutter-md" align="right">
+              <q-btn
+                v-if="
+                  store.step >= store.currentStep &&
+                  store.step !== 3 &&
+                  store.step !== 4 &&
+                  store.step !== 5 &&
+                  store.step !== 7 &&
+                  store.step !== 8 &&
+                  store.step !== 9
+                "
+                unelevated
+                label="ดำเนินการต่อ"
+                color="public"
+                @click="onCilckNextStep()"
+              />
+              <q-btn
+                v-else-if="
+                  store.step >= store.currentStep &&
+                  (store.step == 3 || store.step == 7)
+                "
+                unelevated
+                label="ยื่นเอกการ"
+                color="public"
+                @click="onCilckNextStep()"
+              />
+            </div>
+          </div>
+        </q-card>
       </div>
     </div>
   </div>
+
+  <PopupHistory
+    :modal="modalHistory"
+    :close="onClickPopupHistory"
+    :id="store.evaluateId"
+  />
 </template>
-<style scoped></style>
+<style>
+.q-stepper--vertical .q-stepper__step-inner {
+  padding: 0;
+}
+</style>
diff --git a/src/modules/06_evaluate/components/Tab1.vue b/src/modules/06_evaluate/components/Tab1.vue
index c20b75f..b03ae2a 100644
--- a/src/modules/06_evaluate/components/Tab1.vue
+++ b/src/modules/06_evaluate/components/Tab1.vue
@@ -229,7 +229,7 @@ async function saveStep5() {
   console.log("Save 5");
 }
 async function saveStep6() {
-  nextCheckDoc2(formCommand);
+  // nextCheckDoc2(formCommand);
 }
 async function saveStep7() {
   nextPrepareDoc2();
diff --git a/src/modules/06_evaluate/components/step/step1.vue b/src/modules/06_evaluate/components/step/step1.vue
index 7d8d669..d276323 100644
--- a/src/modules/06_evaluate/components/step/step1.vue
+++ b/src/modules/06_evaluate/components/step/step1.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted, ref } from "vue";
+import { reactive, onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -18,12 +18,12 @@ const store = useEvaluateStore();
 
 const { showLoader, hideLoader, messageError } = mixin;
 
-/** props ID จาก Tab1.vue*/
+/** props  จาก Tab1.vue*/
 const props = defineProps({
-  evaluateId: {
-    type: String,
-  },
   educations: Array,
+  data: {
+    type: Array,
+  },
 });
 
 const emit = defineEmits(["update:spec"]);
@@ -50,26 +50,26 @@ async function updateValue() {
  *  function fetchData ตรวจสอบคุณสมบัติ
  * @param id ประเมิน
  */
-async function fetchCheckSpec(id: string) {
-  showLoader();
-  await http
-    .get(config.API.evaluationCheckspecByid(id))
-    .then((res) => {
-      const data = res.data.result;
-      formData.isEducationalQft = data.isEducationalQft;
-      formData.isGovermantServiceHtr = data.isGovermantServiceHtr;
-      formData.isOperatingExp = data.isOperatingExp;
-      formData.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
-      formData.isHaveSpecificQft = data.isHaveSpecificQft;
-      formData.isHaveProLicense = data.isHaveProLicense;
-      formData.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+async function fetchCheckSpec(data: any) {
+  // showLoader();
+  // await http
+  //   .get(config.API.evaluationCheckspecByid(id))
+  //   .then((res) => {
+  // const data = res.data.result;
+  formData.isEducationalQft = data.isEducationalQft;
+  formData.isGovermantServiceHtr = data.isGovermantServiceHtr;
+  formData.isOperatingExp = data.isOperatingExp;
+  formData.isMinPeriodOfTenure = data.isMinPeriodOfTenure;
+  formData.isHaveSpecificQft = data.isHaveSpecificQft;
+  formData.isHaveProLicense = data.isHaveProLicense;
+  formData.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
+  // })
+  //     .catch((err) => {
+  //       messageError($q, err);
+  //     })
+  //     .finally(() => {
+  //       hideLoader();
+  //     });
 }
 
 /**
@@ -88,7 +88,9 @@ function closeModal() {
 
 /**hook lifecycle*/
 onMounted(() => {
-  props.evaluateId && fetchCheckSpec(props.evaluateId);
+  // setTimeout(() => {
+  // }, 1000);
+  props.data && fetchCheckSpec(props.data);
 });
 </script>
 
diff --git a/src/modules/06_evaluate/components/step/step2.vue b/src/modules/06_evaluate/components/step/step2.vue
index abb53b2..48a2580 100644
--- a/src/modules/06_evaluate/components/step/step2.vue
+++ b/src/modules/06_evaluate/components/step/step2.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, reactive } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useQuasar } from "quasar";
 import keycloak from "@/plugins/keycloak";
@@ -19,15 +20,11 @@ import { useEvaluateStore } from "@/modules/06_evaluate/store";
 const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
+const route = useRoute();
 
 const { showLoader, hideLoader, date2Thai, messageError, success } = mixin;
 
-/** props ID จาก Tab1.vue*/
-const props = defineProps({
-  evaluateId: {
-    type: String,
-  },
-});
+const evaluateId = ref<string>(route.params.id.toString());
 
 /** emit */
 const emit = defineEmits(["update:form"]);
@@ -213,6 +210,7 @@ async function fetchPathUpload(
   const body = {
     fileList: { fileName: type, metadata: {} },
   };
+
   if (id && file) {
     showLoader();
     await http
@@ -315,7 +313,7 @@ const downloadFile6 = ref<string>("");
 async function downloadFile(fileName: string) {
   showLoader();
   await http
-    .get(config.API.loadFileDocument("เล่ม 1", store.evaluateId, fileName))
+    .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
       if (fileName === "1-แบบพิจารณาคุณสมบัติบุคคล") {
         downloadFile1.value = res.data.downloadUrl;
@@ -356,9 +354,9 @@ onMounted(async () => {
     fileEvaluation6Ref: fileEvaluation6Ref.value,
   };
   if (store.currentStep > 2) {
-    fetcheSigner(store.evaluateId);
+    fetcheSigner(evaluateId.value);
   }
-  fetchCheckSpec(store.evaluateId);
+  fetchCheckSpec(evaluateId.value);
   emit("update:form", formCommand, ref);
   downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล");
   downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน");
@@ -441,7 +439,7 @@ onMounted(async () => {
                   @click="
                     fetchPathUpload(
                       'เล่ม 1',
-                      props.evaluateId,
+                      evaluateId,
                       '1-แบบพิจารณาคุณสมบัติบุคคล',
                       fileEvaluation1
                     )
@@ -523,7 +521,7 @@ onMounted(async () => {
                   @click="
                     fetchPathUpload(
                       'เล่ม 1',
-                      props.evaluateId,
+                      evaluateId,
                       '2-แบบแสดงรายละเอียดการเสนอผลงาน',
                       fileEvaluation2
                     )
@@ -606,7 +604,7 @@ onMounted(async () => {
                   @click="
                     fetchPathUpload(
                       'เล่ม 1',
-                      props.evaluateId,
+                      evaluateId,
                       '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก.)',
                       fileEvaluation3
                     )
@@ -688,7 +686,7 @@ onMounted(async () => {
                   @click="
                     fetchPathUpload(
                       'เล่ม 1',
-                      props.evaluateId,
+                      evaluateId,
                       '4-แบบประเมินคุณลักษณะบุคคล',
                       fileEvaluation4
                     )
@@ -769,7 +767,7 @@ onMounted(async () => {
                   @click="
                     fetchPathUpload(
                       'เล่ม 1',
-                      props.evaluateId,
+                      evaluateId,
                       '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
                       fileEvaluation5
                     )
@@ -851,7 +849,7 @@ onMounted(async () => {
                   @click="
                     fetchPathUpload(
                       'เล่ม 1',
-                      props.evaluateId,
+                      evaluateId,
                       '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
                       fileEvaluation6
                     )
diff --git a/src/modules/06_evaluate/components/step/step3.vue b/src/modules/06_evaluate/components/step/step3.vue
index 6f4439b..ccfe457 100644
--- a/src/modules/06_evaluate/components/step/step3.vue
+++ b/src/modules/06_evaluate/components/step/step3.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
@@ -11,13 +12,16 @@ import { useEvaluateStore } from "@/modules/06_evaluate/store";
 const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
+const route = useRoute();
 const { showLoader, hideLoader, messageError } = mixin;
 
-const props = defineProps({
-  evaluateId: {
-    type: String,
-  },
-});
+const evaluateId = ref<string>(route.params.id.toString());
+
+// const props = defineProps({
+//   evaluateId: {
+//     type: String,
+//   },
+// });
 const emit = defineEmits(["update:file"]);
 
 const selectedItem = ref(1);
@@ -37,9 +41,9 @@ function handleItemClick(itemNumber: number) {
 }
 async function fetchDocument(fileName: string) {
   // showLoader();
-  props.evaluateId &&
+  evaluateId.value &&
     (await http
-      .get(config.API.loadFileDocument("เล่ม 1", props.evaluateId, fileName))
+      .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
       .then((res) => {
         downloadFile(res.data.downloadUrl);
       })
diff --git a/src/modules/06_evaluate/components/step/step5.vue b/src/modules/06_evaluate/components/step/step5.vue
index a12ea28..753187a 100644
--- a/src/modules/06_evaluate/components/step/step5.vue
+++ b/src/modules/06_evaluate/components/step/step5.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import config from "@/app.config";
 import http from "@/plugins/http";
 import { useQuasar } from "quasar";
@@ -8,13 +9,10 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const mixins = useCounterMixin();
 const $q = useQuasar();
+const route = useRoute();
 const { date2Thai, success } = mixins;
 
-const props = defineProps({
-  evaluateId: {
-    type: String,
-  },
-});
+const evaluateId = ref<string>(route.params.id.toString());
 
 const dateStartAnnounce = ref<string | null>(date2Thai(new Date()));
 const dateEndAnnounce = ref<string | null>(date2Thai(new Date()));
@@ -37,13 +35,13 @@ const items = ref<any>([
 const statusFile = ref<boolean>(false);
 
 async function onClickfetchDocument(fileName: string, type: string) {
-  props.evaluateId &&
+  evaluateId.value &&
     (await http
-      .get(config.API.loadFileDocument("เล่ม 1", props.evaluateId, fileName))
+      .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
       .then((res) => {
         const downloadUrl = res.data.downloadUrl;
         type === "COPPY" && coppyLink(downloadUrl);
-        statusFile.value = true;
+        type === "CHECK" && (statusFile.value = true);
       })
       .catch((err) => {}));
 }
@@ -62,9 +60,9 @@ async function coppyLink(link: string) {
 }
 
 async function fetchCheckDate() {
-  props.evaluateId &&
+  evaluateId.value &&
     (await http
-      .get(config.API.evaluationCheckDate(props.evaluateId))
+      .get(config.API.evaluationCheckDate(evaluateId.value))
       .then((res) => {
         const data = res.data.result;
         dateStartAnnounce.value = date2Thai(data.dateStartAnnounce);
diff --git a/src/modules/06_evaluate/components/step/step6.vue b/src/modules/06_evaluate/components/step/step6.vue
index 9bbb100..047d143 100644
--- a/src/modules/06_evaluate/components/step/step6.vue
+++ b/src/modules/06_evaluate/components/step/step6.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import axios from "axios";
@@ -14,14 +15,11 @@ import { useEvaluateStore } from "@/modules/06_evaluate/store";
 const $q = useQuasar();
 const store = useEvaluateStore();
 const mixins = useCounterMixin();
+const route = useRoute();
 
 const { date2Thai, showLoader, hideLoader, messageError, success } = mixins;
 
-const props = defineProps({
-  evaluateId: {
-    type: String,
-  },
-});
+const evaluateId = ref<string>(route.params.id.toString());
 
 const emit = defineEmits(["update:form"]);
 
@@ -134,9 +132,9 @@ async function fetcheSigner(id: string) {
 const dateEndPrepareDoc2 = ref<string | null>(date2Thai(new Date()));
 
 async function fetchCheckDate() {
-  props.evaluateId &&
+  evaluateId.value &&
     (await http
-      .get(config.API.evaluationCheckDate(props.evaluateId))
+      .get(config.API.evaluationCheckDate(evaluateId.value))
       .then((res) => {
         const data = res.data.result;
         // dateStartPrepareDoc2.value = date2Thai(data.dateStartPrepareDoc2);
@@ -159,7 +157,7 @@ onMounted(async () => {
     fileEvaluation1Ref: fileEvaluation1Ref.value,
   };
   if (store.currentStep > 2) {
-    fetcheSigner(store.evaluateId);
+    fetcheSigner(evaluateId.value);
   }
   await fetchCheckDate();
   emit("update:form", formCommand, ref);
@@ -261,7 +259,7 @@ onMounted(() => {
                   @click="
                     fetchPathUpload(
                       'เล่ม 2',
-                      props.evaluateId,
+                      evaluateId,
                       '1-เอกสารเล่ม 2',
                       fileEvaluation1
                     )
diff --git a/src/modules/06_evaluate/components/step/step7.vue b/src/modules/06_evaluate/components/step/step7.vue
index ccab3bc..0589a6e 100644
--- a/src/modules/06_evaluate/components/step/step7.vue
+++ b/src/modules/06_evaluate/components/step/step7.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
@@ -11,6 +12,9 @@ import { useEvaluateStore } from "@/modules/06_evaluate/store";
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const $q = useQuasar();
+const route = useRoute();
+
+const evaluateId = ref<string>(route.params.id.toString());
 
 const { showLoader, hideLoader, messageError } = mixin;
 
@@ -26,12 +30,12 @@ const selectedItem = ref(1);
 
 async function fetchDocument() {
   showLoader();
-  props.evaluateId &&
+  evaluateId.value &&
     (await http
       .get(
         config.API.loadFileDocument(
           "เล่ม 2",
-          props.evaluateId,
+          evaluateId.value,
           "1-เอกสารเล่ม 2"
         )
       )
diff --git a/src/modules/06_evaluate/components/step/step8.vue b/src/modules/06_evaluate/components/step/step8.vue
index fd76c1e..ac03aad 100644
--- a/src/modules/06_evaluate/components/step/step8.vue
+++ b/src/modules/06_evaluate/components/step/step8.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import axios from "axios";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -14,14 +15,11 @@ import { useCounterMixin } from "@/stores/mixin";
 const store = useEvaluateStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
+const route = useRoute();
 
 const { showLoader, hideLoader, messageError, success, date2Thai } = mixin;
 
-const props = defineProps({
-  evaluateId: {
-    type: String,
-  },
-});
+const evaluateId = ref<string>(route.params.id.toString());
 
 const status = ref<string>("WAIT_CHECK_DOC_V2");
 const tabMenu = ref<string>("director");
@@ -70,9 +68,9 @@ const meetingList = ref<any>();
 
 async function fetchDirector() {
   showLoader();
-  props.evaluateId &&
+  evaluateId.value &&
     (await http
-      .get(config.API.evaluationDirectorMeetring(props.evaluateId))
+      .get(config.API.evaluationDirectorMeetring(evaluateId.value))
       .then((res) => {
         const directors = res.data.result.directors;
         const meetings = res.data.result.meetings;
@@ -261,7 +259,7 @@ onMounted(async () => {
                     @click="
                       fetchPathUpload(
                         'เล่ม 2',
-                        props.evaluateId,
+                        evaluateId,
                         '2-เอกสารเล่ม 2 (ฉบับแก้ไข)',
                         fileEvaluationEdit
                       )
diff --git a/src/modules/06_evaluate/components/viewstep/popupHistory.vue b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
index e2060e1..cb55974 100644
--- a/src/modules/06_evaluate/components/viewstep/popupHistory.vue
+++ b/src/modules/06_evaluate/components/viewstep/popupHistory.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
+import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -8,9 +9,16 @@ import HeaderDialog from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
+const route = useRoute();
 const mixins = useCounterMixin();
 const { showLoader, hideLoader, date2Thai } = mixins;
 
+// const evaluateId = ref<string>(route.params.id.toString());
+
+const evaluateId = computed(() => {
+  const id = route.params.id ? route.params.id.toString() : "";
+  return id;
+});
 /** รับ props Tab 1  */
 const props = defineProps({
   id: {
@@ -89,7 +97,7 @@ async function fetchListHistory(id: string) {
 watch(
   () => props.modal,
   () => {
-    props.modal && props.id && fetchListHistory(props.id);
+    props.modal && fetchListHistory(evaluateId.value);
   }
 );
 </script>
diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index 08d8821..600631f 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useQuasar } from "quasar";
 
 import type {
   EducationForm,
@@ -17,6 +18,7 @@ import { useEvaluateDetailStore } from "@/modules/06_evaluate/stores/evaluteDeta
 const mixin = useCounterMixin();
 const store = useEvaluateDetailStore();
 const $q = useQuasar();
+const route = useRoute();
 
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 const {
@@ -26,10 +28,9 @@ const {
   columnProjectsProposed,
 } = store;
 
-/** props ID จาก Tab1.vue*/
 const props = defineProps({
-  evaluateId: {
-    type: String,
+  data: {
+    type: Array,
   },
 });
 
@@ -52,8 +53,6 @@ const formDetail = reactive({
   salaries: [],
   trainings: [],
   assessments: [],
-  // Type: "",
-  // Step: "",
 });
 
 async function fetchDetail() {
@@ -121,16 +120,15 @@ async function fetchDetail() {
         yearly: e.yearly,
       }));
       formDetail.assessments = data.assessments;
-      // fromDetail.Type = data.
-      // fromDetail.Step = data.
-
       emit("update:formDeital", data);
     })
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      setTimeout(() => {
+        hideLoader();
+      }, 500);
     });
 }
 
@@ -138,80 +136,67 @@ async function fetchDetail() {
  *  function fetchData ตรวจสอบคุณสมบัติ
  * @param id ประเมิน
  */
-async function fetchCheckSpec(id: string) {
-  showLoader();
-  await http
-    .get(config.API.evaluationCheckspecByid(id))
-    .then((res) => {
-      const data = res.data.result;
-      formDetail.userId = data.id;
-      formDetail.citizenId = data.citizenId;
-      formDetail.prefix = data.prefix;
-      formDetail.fullName = data.fullName;
-      formDetail.position = data.position;
-      formDetail.oc = data.oc;
-      formDetail.salary = data.salary.toLocaleString("th-TH");
-      formDetail.positionLevel = data.positionLevel;
-      formDetail.posNo = data.posNo;
-      formDetail.birthDate = data.birthDate && date2Thai(data.birthDate);
-      formDetail.govAge = data.govAge;
-      formDetail.educations = data.education;
+async function fetchCheckSpec(data: any) {
+  formDetail.userId = data.id;
+  formDetail.citizenId = data.citizenId;
+  formDetail.prefix = data.prefix;
+  formDetail.fullName = data.fullName;
+  formDetail.position = data.position;
+  formDetail.oc = data.oc;
+  formDetail.salary = data.salary.toLocaleString("th-TH");
+  formDetail.positionLevel = data.positionLevel;
+  formDetail.posNo = data.posNo;
+  formDetail.birthDate = data.birthDate && date2Thai(data.birthDate);
+  formDetail.govAge = data.govAge;
+  formDetail.educations = data.education;
 
-      formDetail.certificates = data.certificate.map((e: CertificatesForm) => ({
-        certificateNo: e.certificateNo,
-        certificateType: e.certificateType,
-        expireDate: date2Thai(e.expireDate),
-        issueDate: date2Thai(e.issueDate),
-        issuer: e.issuer,
-      }));
-      formDetail.salaries = data.salaries.map((e: any) => ({
-        amount: e.amount,
-        date: date2Thai(e.date),
-        mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
-        posNo: e.posNo,
-        position: e.position,
-        positionSalaryAmount: e.positionSalaryAmount
-          ? e.positionSalaryAmount
-          : 0,
-        refCommandDate: e.refCommandDate ? e.refCommandDate : "",
+  formDetail.certificates = data.certificate.map((e: CertificatesForm) => ({
+    certificateNo: e.certificateNo,
+    certificateType: e.certificateType,
+    expireDate: date2Thai(e.expireDate),
+    issueDate: date2Thai(e.issueDate),
+    issuer: e.issuer,
+  }));
+  formDetail.salaries = data.salaries.map((e: any) => ({
+    amount: e.amount,
+    date: date2Thai(e.date),
+    mouthSalaryAmount: e.mouthSalaryAmount ? e.mouthSalaryAmount : 0,
+    posNo: e.posNo,
+    position: e.position,
+    positionSalaryAmount: e.positionSalaryAmount ? e.positionSalaryAmount : 0,
+    refCommandDate: e.refCommandDate ? e.refCommandDate : "",
 
-        refCommandNo: e.refCommandNo ? e.refCommandNo : "",
-        salaryClass: e.salaryClass ? e.salaryClass : "",
-        salaryRef: e.salaryRef ? e.salaryRef : "",
-        salaryStatus: e.salaryStatus ? e.salariesStatus : "",
-        //
-        oc: "-",
-        lineWork: "-",
-        side: "-",
-        positionType: "-",
-        level: "-",
-        positionsAdministrative: "-",
-        aspectAdministrative: "-",
-      }));
-      formDetail.trainings = data.training.map((e: any) => ({
-        dateOrder: date2Thai(e.dateOrder),
-        department: e.department,
-        duration: e.duration,
-        endDate: date2Thai(e.endDate),
-        name: e.name,
-        numberOrder: e.numberOrder,
-        place: e.place,
-        startDate: date2Thai(e.startDate),
-        topic: e.topic,
-        yearly: e.yearly,
-      }));
-      formDetail.assessments = data.assessment;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+    refCommandNo: e.refCommandNo ? e.refCommandNo : "",
+    salaryClass: e.salaryClass ? e.salaryClass : "",
+    salaryRef: e.salaryRef ? e.salaryRef : "",
+    salaryStatus: e.salaryStatus ? e.salariesStatus : "",
+    //
+    oc: "-",
+    lineWork: "-",
+    side: "-",
+    positionType: "-",
+    level: "-",
+    positionsAdministrative: "-",
+    aspectAdministrative: "-",
+  }));
+  formDetail.trainings = data.training.map((e: any) => ({
+    dateOrder: date2Thai(e.dateOrder),
+    department: e.department,
+    duration: e.duration,
+    endDate: date2Thai(e.endDate),
+    name: e.name,
+    numberOrder: e.numberOrder,
+    place: e.place,
+    startDate: date2Thai(e.startDate),
+    topic: e.topic,
+    yearly: e.yearly,
+  }));
+  formDetail.assessments = data.assessment;
 }
 
 onMounted(async () => {
-  props.evaluateId ? fetchCheckSpec(props.evaluateId) : fetchDetail();
+  route.name === "evaluate-add" && (await fetchDetail());
+  props.data && fetchCheckSpec(props.data);
 });
 </script>
 
diff --git a/src/modules/06_evaluate/router.ts b/src/modules/06_evaluate/router.ts
index 3f279bd..f57a7f8 100644
--- a/src/modules/06_evaluate/router.ts
+++ b/src/modules/06_evaluate/router.ts
@@ -24,7 +24,7 @@ export default [
     },
   },
   {
-    path: "/evaluate/detail/:id",
+    path: "/evaluate/detail/:type/:id",
     name: "evaluate-detail",
     component: evaluateStep,
     meta: {