diff --git a/src/modules/15_probationReport/components/01_SurveyPage.vue b/src/modules/15_probationReport/components/01_SurveyPage.vue
new file mode 100644
index 0000000..dbd17d5
--- /dev/null
+++ b/src/modules/15_probationReport/components/01_SurveyPage.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useProbationReport } from "@/modules/15_probationReport/store";
+
+import type { ListDataText } from "@/modules/15_probationReport/interface/Main";
+
+const store = useProbationReport();
+const router = useRouter();
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
+
+const $q = useQuasar();
+const myForm = ref<QForm>();
+const mixin = useCounterMixin();
+
+const { messageError, success, dialogConfirm, showLoader, hideLoader } = mixin;
+const route = useRoute();
+
+const assignId = ref<string>("baa3d9f6-9d21-4c58-85f2-114abf8de25c");
+const status = ref<boolean>(true);
+
+const answer1 = ref<string>("");
+const answer2 = ref<string>("");
+const answer3 = ref<number>(0);
+
+const classBordered = ref<string>("");
+
+/** ดึง ข้อมูลแบบสำรวจ */
+async function getSurveyData() {
+  showLoader();
+  await http
+    .get(config.API.summaryDetail())
+    .then(async (res: any) => {
+      const data = await res.data.result.data;
+      assignId.value = res.data.result.assignId;
+      if (data !== null) {
+        answer1.value = data.answer1;
+        answer2.value = data.answer2;
+        answer3.value = data.answer3;
+        status.value = false;
+      }
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/** save ข้อมูล */
+async function save() {
+  if (answer3.value !== 0) {
+    const data = {
+      answer1: answer1.value,
+      answer2: answer2.value,
+      answer3: answer3.value,
+    };
+    dialogConfirm($q, async () => {
+      showLoader();
+      await http
+        .post(config.API.summarySurveyDetail(assignId.value), data)
+        .then((res: any) => {
+          success($q, "บันทึกสำเร็จ");
+          getSurveyData();
+        })
+        .catch((e: any) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  } else if (answer3.value == 0) {
+    classBordered.value = "border_custom";
+  }
+}
+
+/** ถ้าเป็น 0 ใส่ class */
+watch(answer3, () => {
+  if (answer3.value == 0) {
+    classBordered.value = "border_custom";
+  } else classBordered.value = "";
+});
+
+/** get ค่า เมื่อโหลดหน้า */
+onMounted(() => {
+  if (store.tabMain === "SURVEY") {
+    getSurveyData();
+  }
+});
+</script>
+<template>
+  <q-form greedy @submit.prevent @validation-success="save()">
+    <q-card-section>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+          คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
+        </div>
+        <div class="col-12">
+          <q-input
+            :readonly="!status"
+            label="ความคิดเห็น"
+            class="bg-white"
+            dense
+            borderless
+            outlined
+            v-model="answer1"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+          />
+        </div>
+      </div>
+
+      <div class="col-12 row q-mt-md">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-input
+            :readonly="!status"
+            label="ความคิดเห็น"
+            class="bg-white"
+            dense
+            borderless
+            outlined
+            v-model="answer2"
+            type="textarea"
+            :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
+          />
+        </div>
+      </div>
+
+      <div :class="`col-12 row q-mt-md ${classBordered}`">
+        <div class="text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
+        </div>
+        <q-space />
+        <q-btn-group outline>
+          <q-btn
+            v-for="(item, index) in 5"
+            :disable="!status"
+            :class="answer3 == item && 'active'"
+            outline
+            color="grey-6"
+            :label="item"
+            @click="answer3 = item"
+          >
+            <q-tooltip>
+              <div class="text-body2">
+                <span>{{ optionText[index].label }}</span>
+              </div>
+            </q-tooltip>
+          </q-btn>
+        </q-btn-group>
+      </div>
+      <div class="col-12 q-mt-md">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+      <div class="col-12 row q-pb-sm">
+        <div class="col-12 text-top0 items-center q-pa-md">
+          เกณฑ์การประเมินความคาดหวัง
+        </div>
+        <div class="q-gutter-sm row">
+          <div class="col-12 row items-center">
+            <div class="col-2 row justify-center">
+              <q-btn outline color="grey-6" :label="'1'"> </q-btn>
+            </div>
+            <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
+            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
+          </div>
+          <div class="col-12 row items-center">
+            <div class="col-2 row justify-center">
+              <q-btn outline color="grey-6" :label="'2'"> </q-btn>
+            </div>
+            <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
+            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
+          </div>
+          <div class="col-12 row items-center">
+            <div class="col-2 row justify-center">
+              <q-btn outline color="grey-6" :label="'3'"> </q-btn>
+            </div>
+            <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
+            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
+          </div>
+          <div class="col-12 row items-center">
+            <div class="col-2 row justify-center">
+              <q-btn outline color="grey-6" :label="'4'"> </q-btn>
+            </div>
+            <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
+            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
+          </div>
+          <div class="col-12 row items-center">
+            <div class="col-2 row justify-center">
+              <q-btn outline color="grey-6" :label="'5'"> </q-btn>
+            </div>
+            <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
+            <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
+          </div>
+        </div>
+      </div>
+    </q-card-section>
+    <q-separator v-if="status" />
+
+    <q-card-actions align="right" v-if="status">
+      <q-btn label="บันทึก" color="secondary" type="submit"
+        ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+      >
+    </q-card-actions>
+  </q-form>
+</template>
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  color: #c10015;
+  padding: 10px;
+}
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
+</style>
diff --git a/src/modules/15_probationReport/components/02_ResultPage.vue b/src/modules/15_probationReport/components/02_ResultPage.vue
new file mode 100644
index 0000000..6a0f505
--- /dev/null
+++ b/src/modules/15_probationReport/components/02_ResultPage.vue
@@ -0,0 +1,475 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const mixin = useCounterMixin();
+
+const { date2Thai, showLoader, hideLoader } = mixin;
+const route = useRoute();
+const assignId = ref<string>("baa3d9f6-9d21-4c58-85f2-114abf8de25c");
+const status = ref<boolean>(false);
+
+const develop_orientation_score = ref<number>();
+const develop_self_learning_score = ref<number>();
+const develop_training_seminar_score = ref<number>();
+const develop_other_training_score = ref<number>();
+const develop_total_score = ref<number>();
+const develop_orientation_percent = ref<number>();
+const develop_self_learning_percent = ref<number>();
+const develop_training_seminar_percent = ref<number>();
+const develop_other_training_percent = ref<number>();
+const develop_total_percent = ref<number>();
+const develop_result = ref<number>();
+const achievement_score = ref<number>();
+const achievement_score_total = ref<number>();
+const achievement_percent = ref<number>();
+const achievement_result = ref<number>();
+const behavior_score = ref<number>();
+const behavior_score_total = ref<number>();
+const behavior_percent = ref<number>();
+const behavior_result = ref<number>();
+const sum_score = ref<number>();
+const sum_percent = ref<number>();
+const reason = ref<string>();
+const pass_result = ref<number>();
+const evaluate_date = ref<Date>();
+const dev_options = reactive([
+  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
+  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
+]);
+const result_option = reactive([
+  { name: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ", value: 1 },
+  { name: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ", value: 2 },
+  { name: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก", value: 3 },
+]);
+
+/** get คะแนน */
+async function getReportScore() {
+  showLoader();
+  await http
+    .get(config.API.summaryReportDetail(assignId.value))
+    .then((res) => {
+      const data = res.data.result;
+      develop_orientation_score.value = data.develop_orientation_score;
+      develop_self_learning_score.value = data.develop_self_learning_score;
+      develop_training_seminar_score.value =
+        data.develop_training_seminar_score;
+      develop_other_training_score.value = data.develop_other_training_score;
+      develop_total_score.value = data.develop_total_score;
+      develop_orientation_percent.value = data.develop_orientation_percent;
+      develop_self_learning_percent.value = data.develop_self_learning_percent;
+      develop_training_seminar_percent.value =
+        data.develop_training_seminar_percent;
+      develop_other_training_percent.value =
+        data.develop_other_training_percent;
+      develop_total_percent.value = data.develop_total_percent;
+      develop_result.value = data.develop_result == 0 ? 2 : data.develop_result;
+
+      achievement_score.value = data.achievement_score;
+      achievement_score_total.value = data.achievement_score_total;
+      achievement_percent.value = data.achievement_percent;
+      achievement_result.value = data.achievement_result;
+
+      behavior_score.value = data.behavior_score;
+      behavior_score_total.value = data.behavior_score_total;
+      behavior_percent.value = data.behavior_percent;
+      behavior_result.value = data.behavior_result;
+
+      sum_score.value = data.sum_score;
+      sum_percent.value = data.sum_percent;
+
+      reason.value = data.reason;
+      pass_result.value = data.pass_result;
+      evaluate_date.value = data.evaluate_date;
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** get ค่า เมื่อโหลดหน้า */
+onMounted(() => {
+  getReportScore();
+});
+</script>
+<template>
+  <div class="row col-12 q-ma-xs">
+    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
+      <div>ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
+    </div>
+    <div class="row col-12 q-pt-lg q-px-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+          ผลการประเมิน
+        </div>
+      </div>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ achievement_score }}</div>
+                  <div class="col">{{ achievement_percent }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="achievement_result == 1">
+              ผ่าน (สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2. คะแนนพฤติกรรมการปฏิบัติราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ behavior_score }}</div>
+                  <div class="col">{{ behavior_percent }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="behavior_result == 1">
+              ผ่าน (สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label class="text-black"
+                >ผลคะแนนรวมการประเมินการทดลอง</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ sum_score }}</div>
+                  <div class="col">{{ sum_percent }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="pass_result == 1">
+              ผ่าน (สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="row col-12 q-pt-lg q-px-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+        >
+          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
+            <div class="row q-gutter-md q-pl-md">
+              <div class="col-8 text-weight-medium">หัวข้อ</div>
+              <div class="col">คะแนน</div>
+              <div class="col">ร้อยละ</div>
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">1. การปฐมนิเทศ</div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="develop_orientation_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="develop_orientation_percent"
+              />
+            </div>
+          </div>
+
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
+            <div class="col">
+              <q-input
+                dense
+                outlined
+                type="number"
+                :readonly="!status"
+                v-model="develop_self_learning_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="develop_self_learning_percent"
+              />
+            </div>
+          </div>
+
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="develop_training_seminar_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="develop_training_seminar_percent"
+              />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">
+              4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
+            </div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="develop_other_training_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="develop_other_training_percent"
+              />
+            </div>
+          </div>
+
+          <q-separator class="q-my-xs" />
+          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
+            <div class="row q-gutter-md q-pl-sm">
+              <div class="col-8 text-weight-medium">
+                <q-item-label
+                  >คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
+                >
+              </div>
+              <div class="col q-pl-md">{{ develop_total_score }}</div>
+              <div class="col q-pl-md">{{ develop_total_percent }}</div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+    <div class="row col-12 q-gutter-lg q-mt-md">
+      <div class="col-xs-12 col-sm-6">
+        <div class="col-12 text-top0 items-center">
+          ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-select
+            class="col-12"
+            dense
+            v-model="develop_result"
+            outlined
+            :options="dev_options"
+            option-label="label"
+            option-value="value"
+            map-options
+            emit-value
+            :readonly="!status"
+          />
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-sm-11">
+        <div class="col-12 text-top0 row items-center">
+          เหตุผลอื่น ๆ ในการพิจารณา
+        </div>
+        <q-input
+          type="textarea"
+          outlined
+          dense
+          class="col-12"
+          v-model="reason"
+          lazy-rules
+          autogrow
+          hide-bottom-space
+          :row="3"
+          :readonly="!status"
+        />
+      </div>
+
+      <div class="col-xs-12 col-sm-11">
+        <div class="col-12 row q-col-gutter-md">
+          <div class="col-xs-12 col-sm-6">
+            <div class="col-12 text-top0 items-center">
+              ผลการทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12">
+              <q-select
+                class="col-12"
+                dense
+                v-model="pass_result"
+                outlined
+                :options="result_option"
+                option-label="name"
+                option-value="value"
+                map-options
+                emit-value
+                :readonly="!status"
+              />
+            </div>
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <div class="col-12 text-top0 items-center">
+              วัน เดือน ปี ที่ประเมิน
+            </div>
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="evaluate_date"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                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
+                    :readonly="!status"
+                    class="full-width datepicker"
+                    :model-value="
+                      evaluate_date != null ? date2Thai(evaluate_date) : null
+                    "
+                    :rules="[(val:string) => !!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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.color-txt {
+  color: black !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/15_probationReport/store.ts b/src/modules/15_probationReport/store.ts
new file mode 100644
index 0000000..0d20211
--- /dev/null
+++ b/src/modules/15_probationReport/store.ts
@@ -0,0 +1,8 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
+
+export const useProbationReport = defineStore("ProbationReportStore", () => {
+  const tabMain = ref<string>("SURVEY");
+  return { tabMain };
+});
diff --git a/src/modules/15_probationReport/views/main.vue b/src/modules/15_probationReport/views/main.vue
index d4d351c..228c509 100644
--- a/src/modules/15_probationReport/views/main.vue
+++ b/src/modules/15_probationReport/views/main.vue
@@ -1,99 +1,13 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { QForm, useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 
-import http from "@/plugins/http";
-import config from "@/app.config";
+import { useProbationReport } from "@/modules/15_probationReport/store";
 
-import type { ListDataText } from "@/modules/15_probationReport/interface/Main";
+import SurveyPage from "@/modules/15_probationReport/components/01_SurveyPage.vue";
+import ResultPage from "@/modules/15_probationReport/components/02_ResultPage.vue";
 
+const store = useProbationReport();
 const router = useRouter();
-const optionText = ref<ListDataText[]>([
-  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
-  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
-  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
-  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
-  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
-]);
-
-const $q = useQuasar();
-const myForm = ref<QForm>();
-const mixin = useCounterMixin();
-
-const { messageError, success, dialogConfirm, showLoader, hideLoader } = mixin;
-const route = useRoute();
-
-const assignId = ref<string>("baa3d9f6-9d21-4c58-85f2-114abf8de25c");
-const status = ref<boolean>(true);
-
-const answer1 = ref<string>("");
-const answer2 = ref<string>("");
-const answer3 = ref<number>(0);
-
-const classBordered = ref<string>("");
-
-/** ดึง ข้อมูลแบบสำรวจ */
-async function getSurveyData() {
-  showLoader();
-  await http
-    .get(config.API.summaryDetail())
-    .then(async (res: any) => {
-      const data = await res.data.result.data;
-      assignId.value = res.data.result.assignId;
-      if (data !== null) {
-        answer1.value = data.answer1;
-        answer2.value = data.answer2;
-        answer3.value = data.answer3;
-        status.value = false;
-      }
-      hideLoader();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    });
-}
-
-/** save ข้อมูล */
-async function save() {
-  if (answer3.value !== 0) {
-    const data = {
-      answer1: answer1.value,
-      answer2: answer2.value,
-      answer3: answer3.value,
-    };
-    dialogConfirm($q, async () => {
-      showLoader();
-      await http
-        .post(config.API.summarySurveyDetail(assignId.value), data)
-        .then((res: any) => {
-          success($q, "บันทึกสำเร็จ");
-          getSurveyData();
-        })
-        .catch((e: any) => {
-          messageError($q, e);
-        })
-        .finally(() => {
-          hideLoader();
-        });
-    });
-  } else if (answer3.value == 0) {
-    classBordered.value = "border_custom";
-  }
-}
-
-/** ถ้าเป็น 0 ใส่ class */
-watch(answer3, () => {
-  if (answer3.value == 0) {
-    classBordered.value = "border_custom";
-  } else classBordered.value = "";
-});
-
-/** get ค่า เมื่อโหลดหน้า */
-onMounted(() => {
-  getSurveyData();
-});
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -113,175 +27,32 @@ onMounted(() => {
       </div>
       <div class="col-12">
         <q-card bordered>
-          <q-form greedy @submit.prevent @validation-success="save()">
-            <q-card-section>
-              <div class="col-12 row">
-                <div class="col-12 text-top0 items-center">
-                  <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-                  คุณคิดเห็นอย่างไรกับการทดลองปฏิบัติหน้าที่ราชการ?
-                </div>
-                <div class="col-12">
-                  <q-input
-                    :readonly="!status"
-                    label="ความคิดเห็น"
-                    class="bg-white"
-                    dense
-                    borderless
-                    outlined
-                    v-model="answer1"
-                    type="textarea"
-                    :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
-                  />
-                </div>
-              </div>
+          <q-tabs
+            v-model="store.tabMain"
+            inline-label
+            align="left"
+            class="text-grey"
+            active-color="primary"
+            indicator-color="primary"
+          >
+            <q-tab
+              name="SURVEY"
+              label="แบบสํารวจความคิดเห็น ด้านในแสดงหน้าปัจจุบัน"
+            />
+            <q-tab name="RESULT" label="ผลการประเมินการ" />
+          </q-tabs>
 
-              <div class="col-12 row q-mt-md">
-                <div class="col-12 text-top0 items-center">
-                  <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
-                  ปัญหาและอุปสรรคที่พบระหว่างการทดลองปฏิบัติหน้าที่ราชการ
-                </div>
-                <div class="col-12">
-                  <q-input
-                    :readonly="!status"
-                    label="ความคิดเห็น"
-                    class="bg-white"
-                    dense
-                    borderless
-                    outlined
-                    v-model="answer2"
-                    type="textarea"
-                    :rules="[(val: string) => !!val || `${'กรุณากรอกความคิดเห็น'}`]"
-                  />
-                </div>
-              </div>
+          <q-separator />
 
-              <div :class="`col-12 row q-mt-md ${classBordered}`">
-                <div class="text-top0 items-center">
-                  <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
-                  ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
-                </div>
-                <q-space />
-                <q-btn-group outline>
-                  <q-btn
-                    v-for="(item, index) in 5"
-                    :disable="!status"
-                    :class="answer3 == item && 'active'"
-                    outline
-                    color="grey-6"
-                    :label="item"
-                    @click="answer3 = item"
-                  >
-                    <q-tooltip>
-                      <div class="text-body2">
-                        <span>{{ optionText[index].label }}</span>
-                      </div>
-                    </q-tooltip>
-                  </q-btn>
-                </q-btn-group>
-              </div>
-              <div class="col-12 q-mt-md">
-                <q-separator size="3px" color="grey-2" />
-              </div>
-              <div class="col-12 row q-pb-sm">
-                <div class="col-12 text-top0 items-center q-pa-md">
-                  เกณฑ์การประเมินความคาดหวัง
-                </div>
-                <div class="q-gutter-sm row">
-                  <div class="col-12 row items-center">
-                    <div class="col-2 row justify-center">
-                      <q-btn outline color="grey-6" :label="'1'"> </q-btn>
-                    </div>
-                    <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
-                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
-                  </div>
-                  <div class="col-12 row items-center">
-                    <div class="col-2 row justify-center">
-                      <q-btn outline color="grey-6" :label="'2'"> </q-btn>
-                    </div>
-                    <div class="q-pl-md col-3">
-                      ต่ำกว่าความคาดหวังค่อนข้างมาก
-                    </div>
-                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
-                  </div>
-                  <div class="col-12 row items-center">
-                    <div class="col-2 row justify-center">
-                      <q-btn outline color="grey-6" :label="'3'"> </q-btn>
-                    </div>
-                    <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
-                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
-                  </div>
-                  <div class="col-12 row items-center">
-                    <div class="col-2 row justify-center">
-                      <q-btn outline color="grey-6" :label="'4'"> </q-btn>
-                    </div>
-                    <div class="q-pl-md col-3">
-                      สูงว่าความคาดหวังค่อนข้างมาก
-                    </div>
-                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
-                  </div>
-                  <div class="col-12 row items-center">
-                    <div class="col-2 row justify-center">
-                      <q-btn outline color="grey-6" :label="'5'"> </q-btn>
-                    </div>
-                    <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
-                    <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
-                  </div>
-                </div>
-              </div>
-            </q-card-section>
-            <q-separator v-if="status" />
+          <q-tab-panels v-model="store.tabMain" animated>
+            <q-tab-panel name="SURVEY" class="q-pa-none">
+              <SurveyPage
+            /></q-tab-panel>
 
-            <q-card-actions align="right" v-if="status">
-              <q-btn label="บันทึก" color="secondary" type="submit"
-                ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
-              >
-            </q-card-actions>
-          </q-form>
+            <q-tab-panel name="RESULT"> <ResultPage /> </q-tab-panel>
+          </q-tab-panels>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.text-top2 {
-  font-weight: 500;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.text-top0 {
-  font-weight: 600;
-  padding-bottom: 8px;
-  color: rgb(70, 68, 68);
-}
-
-.q-rating__icon {
-  text-shadow: transparent !important;
-}
-
-.q-card {
-  box-shadow: 0px 0px 0px 0px !important;
-}
-
-.border_custom {
-  border: 2px solid #c10015;
-  border-radius: 5px;
-  color: #c10015;
-  padding: 10px;
-}
-.q-btn-group--outline > .q-btn-item:not(:last-child):before {
-  border-right: 1px solid #c4c4c4;
-}
-.q-btn-group--outline > .q-btn-item.active {
-  color: #2196f3 !important;
-  background-color: #cde6fb !important;
-}
-.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
-  border-left: 1px solid #2196f3 !important;
-  background-color: #cde6fb;
-}
-.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
-  border: 1px solid #2196f3;
-  background-color: #cde6fb;
-}
-</style>