diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index 9a2b93e20..f17086d3f 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -2,5 +2,11 @@
  * api เครื่องราชอิสริยาภรณ์
  */
 import env from "../index";
-
-export default {};
+const insignia = `${env.API_URI}/insignia`;
+export default {
+  getRoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  listRoundInsignia: (type: string) => `${insignia}/period/${type}`,
+  editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  RoundInsignia: (id: string) => `${insignia}/period/${id}`,
+  docRoundInsignia: (id: string) => `${insignia}/period/${id}`,
+};
diff --git a/src/modules/07_insignia/components/1_Proposals/addProposals.vue b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
index 63ee7bb6a..ba6c3ec5c 100644
--- a/src/modules/07_insignia/components/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/addProposals.vue
@@ -13,163 +13,304 @@
       />
       <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
     </div>
-    <div class="col-12">
-      <q-card bordered>
-        <div class="col-12 row q-col-gutter-md q-pa-md">
-          <div class="col-xs-12 col-sm-12 row">
-            <q-separator />
-            <div class="col-12 row q-pa-sm q-col-gutter-sm">
-              <q-input
-                class="col-10"
-                dense
-                outlined
-                v-model="roundInsig"
-                label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
-              />
-              <q-input
-                class="col-2"
-                dense
-                outlined
-                v-model="year"
-                label="ปีที่เสนอ"
-              />
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateStart"
-                :locale="'th'"
-                autoApply
-                class="col-xs-12 col-sm-5"
-                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="col-xs-12 col-sm-5"
-                    :model-value="
-                      dateStart != null ? date2Thai(dateStart) : 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>
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="dateEnd"
-                class="col-xs-12 col-sm-5"
-                :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="col-xs-12 col-sm-4"
-                    :model-value="dateEnd != null ? date2Thai(dateEnd) : 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>
+    <q-form ref="myForm">
+      <div class="col-12">
+        <q-card bordered>
+          <div class="col-12 row q-col-gutter-md q-pa-md">
+            <div class="col-xs-12 col-sm-12 row">
+              <q-separator />
+              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+                <q-input
+                  class="col-10"
+                  dense
+                  outlined
+                  v-model="roundInsig"
+                  label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
+                />
+                <q-input
+                  class="col-2"
+                  dense
+                  outlined
+                  v-model="year"
+                  label="ปีที่เสนอ"
+                />
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateStart"
+                  :locale="'th'"
+                  autoApply
+                  class="col-xs-12 col-sm-5"
+                  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="col-xs-12 col-sm-5"
+                      :model-value="
+                        dateStart != null ? date2Thai(dateStart) : 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>
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="dateEnd"
+                  class="col-xs-12 col-sm-5"
+                  :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="col-xs-12 col-sm-4"
+                      :model-value="dateEnd != null ? date2Thai(dateEnd) : 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>
 
-              <q-input
-                class="col-xs-12 col-sm-2"
-                dense
-                outlined
-                v-model="datelast"
-                label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
-              />
-              <q-file
-                class="col-xs-12 col-sm-10"
-                outlined
-                dense
-                v-model="files"
-                label="อัปโหลดเอกสารประกอบ"
-                hide-bottom-space
-                lazy-rules
-                :rules="[
-                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
-                ]"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-              </q-file>
+                <q-input
+                  class="col-xs-12 col-sm-2"
+                  dense
+                  outlined
+                  v-model="datelast"
+                  label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
+                />
+                <q-file
+                  class="col-xs-12 col-sm-10"
+                  outlined
+                  dense
+                  v-model="files"
+                  @added="fileUploadDoc"
+                  label="อัปโหลดเอกสารประกอบ"
+                  hide-bottom-space
+                  lazy-rules
+                  :rules="[
+                    (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                  ]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon name="attach_file" />
+                  </template>
+                </q-file>
+              </div>
             </div>
           </div>
-        </div>
-        <q-separator />
-        <q-separator />
-        <div class="row col-12 q-pa-sm">
-          <q-space />
-          <q-btn
-            unelevated
-            dense
-            class="q-px-md items-center"
-            color="light-blue-10"
-            label="บันทึก"
-            @click="router.go(-1)"
-          />
-        </div>
-      </q-card>
-    </div>
+          <q-separator />
+          <q-separator />
+          <div class="row col-12 q-pa-sm">
+            <q-space />
+            <q-btn
+              unelevated
+              dense
+              class="q-px-md items-center"
+              color="light-blue-10"
+              label="บันทึก"
+              @click="checkSave"
+            />
+          </div>
+        </q-card>
+      </div>
+    </q-form>
   </div>
 </template>
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref } from "vue";
-import { useQuasar } from "quasar";
+import { ref, onMounted } from "vue";
+import { useQuasar, QForm } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
+  mixin;
 const router = useRouter();
 const $q = useQuasar();
+const id = ref<string>("");
+const myForm = ref<QForm | null>(null); //form data input
+const edit = ref<boolean>(false);
 const dateStart = ref<any>(new Date());
 const dateEnd = ref<any>(new Date());
-
+const files = ref<any[]>([]);
+const fileDocDataUpload = ref<File[]>([]);
 const roundInsig = ref<string>("");
-const year = ref<string>("");
-const datelast = ref<string>("");
+const yearOffer = ref<number>(0);
+const datelast = ref<number>(0);
+
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.getRoundInsignia("insignia"))
+    .then((res) => {
+      const data = res.data.result.periods;
+      const files = res.data.result.files;
+
+      id.value = data.id;
+      roundInsig.value = data.period_name;
+      yearOffer.value = data.year;
+      datelast.value = data.amount;
+      dateStart.value = data.startDate;
+      dateEnd.value = data.endDate;
+
+      files.value = files;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const routeName = router.currentRoute.value.name;
+
+const fileUploadDoc = async (files: any) => {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+};
+
+const uploadDocData = async () => {
+  const formData = new FormData();
+  if (fileDocDataUpload.value.length > 0) {
+    fileDocDataUpload.value.forEach((file: any) => {
+      formData.append("", file);
+    });
+    showLoader();
+    await http
+      .put(config.API.docRoundInsignia(id.value), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        hideLoader();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        clickBack();
+      });
+  } else {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+    clickBack();
+  }
+};
+
+const editData = async (id: string) => {
+  showLoader();
+  await http
+    .put(config.API.editRoundInsignia(id))
+    .then(async () => {
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+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();
+        }
+      }
+    });
+  }
+};
+
+// const sendData = () => {
+//   const valueData: any = {
+//     Name: roundInsig.value,
+//     year: year.value,
+//     Amount: datelast.value,
+//     dateStart: dateStart.value !== null ? dateToISO(dateStart.value) : null,
+//     dateEnd: dateEnd.value !== null ? dateToISO(dateEnd.value) : null,
+//   };
+//   return valueData;
+// };
+
+const addData = async () => {
+  const formData = new FormData();
+  formData.append("Name", roundInsig.value);
+  formData.append("year", parseInt(yearOffer.value).toString());
+  formData.append("Amount", files.datelast);
+  if (dateStart.value !== null) {
+    formData.append("StartDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("EndDate", dateToISO(dateEnd.value));
+  }
+
+  showLoader();
+  await http
+    .post(config.API.listRoundInsignia("insignia"), formData)
+    .then(async (res) => {
+      const data = res.data.result;
+      id.value = data.id;
+      await uploadDocData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const clickBack = () => {
+  router.push({ name: "insigniaProposals" });
+};
 </script>
diff --git a/src/modules/07_insignia/components/1_Proposals/listProposals.vue b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
index 1969ecb05..6cdff4beb 100644
--- a/src/modules/07_insignia/components/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/components/1_Proposals/listProposals.vue
@@ -171,12 +171,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import router from "@/router";
+import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+import { useRoute } from "vue-router";
+import config from "@/app.config";
 
+import http from "@/plugins/http";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  messageError,
+  statusLeave,
+  dialogMessage,
+  dateToISO,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
 const pagination = ref({
@@ -205,6 +222,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "year",
@@ -214,6 +233,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "name",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "startDate",
@@ -223,6 +244,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "position",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "endDate",
@@ -232,6 +255,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "level",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "status",
@@ -241,6 +266,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "institution",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
     name: "statusRoyal",
@@ -250,6 +277,8 @@ const columns = ref<QTableProps["columns"]>([
     field: "institution",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
 
@@ -297,6 +326,38 @@ const rows = ref<FormProprsalsRound[]>([
   },
 ]);
 
+onMounted(async () => {
+  await fetchData();
+});
+
+const fetchData = async () => {
+  rows.value = [];
+  showLoader();
+  await http
+    .get(config.API.listRoundInsignia("insignia"))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      data.map((e: any) => {
+        rows.value.push({
+          id: e.period_id,
+          round: e.period_name,
+          year: e.period_year,
+          startDate:
+            e.startDate == null ? null : date2Thai(new Date(e.startDate)),
+          endDate: e.endDate == null ? null : date2Thai(new Date(e.endDate)),
+          status: e.period_status,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 // หัวตาราง2
 const clickDelete = (id: string) => {
   $q.dialog({
@@ -308,7 +369,21 @@ const clickDelete = (id: string) => {
     },
     persistent: true,
   })
-    .onOk(async () => {})
+    .onOk(async () => {
+      showLoader();
+      await http
+        .delete(config.API.RoundInsignia(id))
+        .then((res) => {
+          success($q, "ลบข้อมูลการสอบสำเร็จ");
+          fetchData();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    })
     .onCancel(() => {})
     .onDismiss(() => {});
 };