diff --git a/src/modules/01_metadata/store.ts b/src/modules/01_metadata/store.ts
index eb9b09b71..1530d9c57 100644
--- a/src/modules/01_metadata/store.ts
+++ b/src/modules/01_metadata/store.ts
@@ -831,7 +831,7 @@ export const useManageDataStore = defineStore("manage", () => {
           JSON.stringify(dataInsigniaType.value.data) ==
           JSON.stringify(draftInsigniaType.value.data)
         ) {
-          draftInsigniaType.value && await fetchInsigniaType(false, selector);
+          draftInsigniaType.value && (await fetchInsigniaType(false, selector));
           return draftInsigniaType.value;
         } else {
           await fetchInsigniaType(false, selector);
@@ -1818,6 +1818,7 @@ export const useManageDataStore = defineStore("manage", () => {
       .get(apiInsignia)
       .then((res) => {
         const data = res.data.result;
+        console.log(data);
         let rows: InsigniaResponse[] = [];
         let version: string = "";
         let id: string = "";
diff --git a/src/modules/01_metadataNew/components/calendar/Calendar.vue b/src/modules/01_metadataNew/components/calendar/Calendar.vue
new file mode 100644
index 000000000..48dc9335d
--- /dev/null
+++ b/src/modules/01_metadataNew/components/calendar/Calendar.vue
@@ -0,0 +1,856 @@
+<!-- tab ปฏิทิน หน้าปฏิทินวันหยุด -->
+<template>
+  <div class="q-mt-md">
+    <div class="row q-gutter-sm q-pb-sm main-content">
+      <div class="demo-app-main">
+        <!-- แสดงปฏิทิน -->
+        <FullCalendar
+          ref="fullCalendar"
+          class="demo-app-calendar"
+          :options="calendarOptions"
+        >
+          <template v-slot:eventContent="arg">
+            <b>{{ arg.timeText }}</b>
+            <i>{{ arg.event.title }}</i>
+            <q-tooltip style="font-size: 15px">{{ arg.event.title }}</q-tooltip>
+          </template>
+        </FullCalendar>
+      </div>
+    </div>
+    <div class="row q-col-gutter-md">
+      <div class="items-center row">
+        <q-icon color="blue" name="mdi-circle" class="q-mr-sm" />
+        วันทำงาน 5 วัน
+      </div>
+      <div class="items-center row">
+        <q-icon color="orange" name="mdi-circle" class="q-mr-sm" />
+        วันทำงาน 6 วัน
+      </div>
+    </div>
+  </div>
+
+  <!-- modal เพิ่มวันหยุด -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="min-width: 550px">
+      <q-form ref="formDate" @submit.prevent.stop="onSubmit">
+        <q-card-section class="row items-center q-pa-sm">
+          <div class="text-bold" v-if="showEdit">แก้ไขวันหยุด</div>
+          <div class="text-bold" v-else>เพิ่มวันหยุด</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            v-close-popup
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-p-md row q-gutter-y-md">
+          <div class="row col-12">
+            <div class="col-12" v-if="!showEdit">
+              {{ dateThaiRange(dateRange) }}
+            </div>
+            <datepicker
+              v-else
+              :readonly="!edit"
+              v-model="dateRange"
+              :locale="'th'"
+              autoApply
+              range
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  :class="getClass(edit)"
+                  hide-bottom-space
+                  :outlined="edit"
+                  dense
+                  label="วันที่"
+                  lazy-rules
+                  :borderless="!edit"
+                  :model-value="dateThaiRange(dateRange)"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+
+          <q-input
+            :class="getClass(edit)"
+            hide-bottom-space
+            :outlined="edit"
+            label="คำอธิบาย"
+            dense
+            lazy-rules
+            :readonly="!edit"
+            :borderless="!edit"
+            v-model="name"
+            autogrow
+            :rules="[(val) => (val && val.length > 0) || '']"
+          />
+          <q-option-group
+            v-if="showEdit == false"
+            v-model="category"
+            :options="categoryOptions"
+            color="primary"
+            inline
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="text-primary">
+          <q-btn
+            v-if="showEdit && edit"
+            flat
+            color="red"
+            @click="cancelClick()"
+            label="ยกเลิกแก้ไข"
+          >
+            <!-- icon="mdi-undo"
+            <q-tooltip>ยกเลิก</q-tooltip> -->
+          </q-btn>
+          <q-btn
+            v-if="showEdit && edit"
+            unelevated
+            color="red"
+            @click="deleteClick()"
+            label="ลบวันหยุด"
+          >
+            <!-- icon="mdi-delete"
+            <q-tooltip>ลบ</q-tooltip> -->
+          </q-btn>
+          <q-btn
+            v-if="edit"
+            unelevated
+            color="public"
+            label="บันทึก"
+            type="submit"
+          >
+            <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+          <q-btn
+            v-if="!edit"
+            outline
+            color="primary"
+            @click="editClick"
+            label="แก้ไขข้อมูล"
+          >
+            <!-- icon="mdi-pencil-outline"
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- modal ลบวันหยุด -->
+  <q-dialog v-model="modalDelete" persistent>
+    <q-card style="min-width: 550px">
+      <q-card-section class="row items-center q-pb-xs">
+        <div class="text-bold">ต้องการลบข้อมูลนี้หรือไม่?</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="row items-center">
+        <div class="q-pr-md">
+          <q-avatar
+            icon="mdi-trash-can-outline"
+            font-size="25px"
+            size="lg"
+            color="red-1"
+            text-color="red"
+          />
+        </div>
+        <div class="col text-dark">
+          <span>ข้อมูลที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ยกเลิก" flat color="grey-8" @click="cancelClick" />
+        <q-btn label="ตกลง" color="primary" @click="deleteData" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import allLocales from "@fullcalendar/core/locales-all";
+import listPlugin from "@fullcalendar/list";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  RequestItemsObject,
+  DataDateRowObject,
+  DataDateAddObject,
+} from "@/modules/01_metadataNew/interface/index/Calendar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const props = defineProps({
+  dateYear: {
+    //filter ปี วันหยุด
+    type: Number,
+    default: () => new Date().getFullYear(),
+  },
+  dateMonth: {
+    //filter เดือน วันหยุด
+    type: Number,
+    default: () => new Date().getMonth(),
+  },
+  refreshData: {
+    //หน้า main มีการอัพเดทค่าให้ refresh data
+    type: Boolean,
+    required: true,
+  },
+  fetchDataSummaryCalendar: {
+    //ฟังก์ชันอัพเดทสรุปวันหยุด
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const { success, dateToISO, date2Thai, messageError, showLoader, hideLoader } =
+  mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+const modalAdd = ref<boolean>(false); //modal เพิ่มวันหยุด
+const modalDelete = ref<boolean>(false); //modal ลบวันหยุด
+const edit = ref<boolean>(false); //modal เลือกวันหยุดกับวันลบวันหยุด
+const showEdit = ref<boolean>(false); //กด event แก้ไขหรือเพิ่ม
+const name = ref<string>(""); //ชื่อวันหยุด
+const type = ref<string>(""); //ประเภทวันหยุด
+const isSpecial = ref<boolean>(true); //เช็ควันหยุด
+const id = ref<string>(""); //id ที่แก้ไขวันหยุด
+const fullCalendar = ref<any>(); //ref calendar
+const dateRange = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
+const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
+
+const category = ref<string>("all");
+const categoryOptions = ref<any>([
+  {
+    label: "ทั้งหมด",
+    value: "all",
+  },
+  {
+    label: "ทำงาน 5 วัน",
+    value: "normal",
+  },
+  {
+    label: "ทำงาน 6 วัน",
+    value: "6days",
+  },
+]);
+const dataHistory = ref<RequestItemsObject[]>([]);
+const dataNormalRaw = ref<RequestItemsObject[]>([]);
+const dataSixDaysRaw = ref<RequestItemsObject[]>([]);
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  hideLoader();
+  const calen = fullCalendar.value.getApi();
+  const date = new Date(props.dateYear, props.dateMonth);
+  calen.gotoDate(date);
+  await fetchData();
+});
+
+/**
+ * ค่า props(วันเดือนปีที่เลือก) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
+ */
+watch(props, async (count, prevCount) => {
+  const calen = fullCalendar.value.getApi();
+  const date = new Date(props.dateYear, props.dateMonth);
+  calen.gotoDate(date);
+  await fetchData();
+});
+
+/**
+ * เลือกค่าปฏิทินในช่องว่าง
+ * @param selectInfo ค่าที่เลือกในฏิทิน
+ */
+const handleDateSelect = async (selectInfo: any) => {
+  edit.value = true;
+  category.value = "all";
+  selectInfo.start;
+  const checkNormalDate = dataNormalRaw.value.filter(
+    (r: RequestItemsObject) =>
+      dateToISO(new Date(r.holidayDate)) == dateToISO(selectInfo.start)
+  );
+  const checkSixDaysDate = dataSixDaysRaw.value.filter(
+    (r: RequestItemsObject) =>
+      dateToISO(new Date(r.holidayDate)) == dateToISO(selectInfo.start)
+  );
+  if (checkNormalDate.length == 0 || checkSixDaysDate.length == 0) {
+    name.value = "";
+    isSpecial.value = true;
+    dateRange.value = [
+      selectInfo.startStr,
+      new Date(
+        new Date(selectInfo.endStr).setDate(
+          new Date(selectInfo.endStr).getDate() - 1
+        )
+      ),
+    ];
+    showEdit.value = false;
+    modalAdd.value = true;
+  }
+};
+
+/**
+ * เลือกค่า event ในปฏิทิน
+ * @param selectInfo ค่าที่เลือกในฏิทิน
+ */
+const handleEventClick = async (selectInfo: any) => {
+  modalAdd.value = true;
+  edit.value = false;
+  showEdit.value = true;
+  name.value = selectInfo.event.title;
+  type.value = selectInfo.event.id;
+  isSpecial.value = true;
+  id.value = selectInfo.event.groupId;
+  dataHistory.value = selectInfo.event.extendedProps.dataRangeRow;
+  dateRange.value = [
+    selectInfo.event.startStr,
+    selectInfo.event.endStr == ""
+      ? selectInfo.event.startStr
+      : dateToISO(
+          new Date(
+            new Date(selectInfo.event.endStr).setDate(
+              new Date(selectInfo.event.endStr).getDate() - 1
+            )
+          )
+        ),
+  ];
+};
+
+/**
+ * กดปุ่มแก้ไขให้แสดง modal แก้ไข
+ */
+const editClick = async () => {
+  showEdit.value = true;
+  edit.value = true;
+};
+
+/**
+ * กดปุ่มลบให้แสดง modal ลบ
+ */
+const deleteClick = async () => {
+  modalDelete.value = true;
+};
+
+/**
+ * ปุ่มยกเลิกให้ย้อนกลับไป modal เลือกแก้ไขหรือลบ
+ */
+const cancelClick = async () => {
+  modalDelete.value = false;
+  modalAdd.value = true;
+  edit.value = false;
+};
+
+/**
+ * option calendar
+ */
+const calendarOptions = ref<any>({
+  plugins: [
+    dayGridPlugin,
+    timeGridPlugin,
+    interactionPlugin, // needed for dateClick
+    listPlugin,
+  ],
+  headerToolbar: null,
+  selectable: true,
+  select: handleDateSelect,
+  eventClick: handleEventClick,
+  locale: "th",
+  locales: allLocales,
+  height: "100%",
+  eventColor: "#e4f3ff",
+  eventTextColor: "#50a5fc",
+  eventBorderColor: "#50a5fc",
+  events: <any>[],
+  firstDay: 0,
+});
+
+/**
+ * ปุ่มบันทึกข้อมูลวันหยุด
+ */
+const onSubmit = async () => {
+  if (showEdit.value === true) {
+    await editData();
+  } else {
+    await addDate();
+  }
+};
+
+/**
+ * fetch วันหยุดในปฏิทิน
+ */
+const fetchData = async () => {
+  calendarOptions.value.events = [];
+  showLoader();
+  await http
+    .get(
+      config.API.listHolidayHistoryYearMonth(
+        props.dateYear,
+        props.dateMonth + 1
+      )
+    )
+    .then((res) => {
+      const dataNormal = res.data.result.normal;
+      const dataSixDays = res.data.result.sixDays;
+      const dateStart = ref<Date | null>();
+      const firstEvent = ref<boolean>(true);
+      const dateRow = ref<DataDateRowObject[]>([]);
+      dataNormalRaw.value = res.data.result.normal;
+      dataSixDaysRaw.value = res.data.result.sixDays;
+      dataNormal.map((e: RequestItemsObject, index: number) => {
+        dateRow.value.push({
+          holidayDate: new Date(e.holidayDate),
+          name: e.name,
+          isSpecial: true,
+          id: e.id,
+        });
+        if (
+          index == dataNormal.length - 1 ||
+          dataNormal[index + 1].name != e.name ||
+          (dataNormal[index + 1].name == e.name &&
+            dateToISO(new Date(dataNormal[index + 1].holidayDate)) !=
+              dateToISO(
+                new Date(
+                  new Date(e.holidayDate).setDate(
+                    new Date(e.holidayDate).getDate() + 1
+                  )
+                )
+              ))
+        ) {
+          firstEvent.value = true;
+          calendarOptions.value.events.push({
+            id: "normal",
+            groupId: e.id,
+            title:
+              dateToISO(new Date(e.holidayDate)) ==
+              dateToISO(new Date(e.originalDate))
+                ? e.name
+                : `ชดเชย ${e.name}`,
+            start: dateStart.value ? dateStart.value : new Date(e.holidayDate),
+            end: new Date(
+              new Date(e.holidayDate).setDate(
+                new Date(e.holidayDate).getDate() + 1
+              )
+            ),
+            isSpecial: true,
+            allDay: true,
+            dataRangeRow: dateRow.value,
+            backgroundColor: "#CCE5FF",
+            textColor: "#0080FF",
+          });
+          dateStart.value = null;
+          dateRow.value = [];
+        } else if (firstEvent.value == true) {
+          firstEvent.value = false;
+          dateStart.value = new Date(e.holidayDate);
+        }
+      });
+      dataSixDays.map((e: RequestItemsObject, index: number) => {
+        dateRow.value.push({
+          holidayDate: new Date(e.holidayDate),
+          name: e.name,
+          isSpecial: true,
+          id: e.id,
+        });
+        if (
+          index == dataSixDays.length - 1 ||
+          dataSixDays[index + 1].name != e.name ||
+          (dataSixDays[index + 1].name == e.name &&
+            dateToISO(new Date(dataSixDays[index + 1].holidayDate)) !=
+              dateToISO(
+                new Date(
+                  new Date(e.holidayDate).setDate(
+                    new Date(e.holidayDate).getDate() + 1
+                  )
+                )
+              ))
+        ) {
+          firstEvent.value = true;
+          calendarOptions.value.events.push({
+            id: "sixdays",
+            groupId: e.id,
+            title:
+              dateToISO(new Date(e.holidayDate)) ==
+              dateToISO(new Date(e.originalDate))
+                ? e.name
+                : `ชดเชย ${e.name}`,
+            start: dateStart.value ? dateStart.value : new Date(e.holidayDate),
+            end: new Date(
+              new Date(e.holidayDate).setDate(
+                new Date(e.holidayDate).getDate() + 1
+              )
+            ),
+            isSpecial: true,
+            allDay: true,
+            dataRangeRow: dateRow.value,
+            backgroundColor: "#FFE5CC",
+            textColor: "#FF8000",
+          });
+          dateStart.value = null;
+          dateRow.value = [];
+        } else if (firstEvent.value == true) {
+          firstEvent.value = false;
+          dateStart.value = new Date(e.holidayDate);
+        }
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await props.fetchDataSummaryCalendar();
+    });
+};
+
+/**
+ * บันทึกแก้ไขวันหยุด
+ */
+const editData = async () => {
+  await formDate.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const dataEdit = ref<DataDateAddObject[]>([]);
+      let i = 0;
+      const dateStart = ref<Date>(dateRange.value[0]);
+      do {
+        i = i + 1;
+        dataEdit.value.push({
+          year: new Date(dateStart.value).getFullYear(),
+          holidayDate: dateToISO(new Date(dateStart.value)),
+          name: name.value,
+          isSpecial: true,
+        });
+        dateStart.value = new Date(
+          new Date(dateStart.value).setDate(
+            new Date(dateStart.value).getDate() + 1
+          )
+        );
+      } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
+
+      const _dataHistory = ref<RequestItemsObject[]>([]);
+      dataHistory.value.map((e: RequestItemsObject, index: number) => {
+        _dataHistory.value.push({
+          ...e,
+          holidayDate: dateToISO(new Date(e.holidayDate)),
+        });
+      });
+
+      showLoader();
+      await http
+        .post(config.API.listHolidayHistoryEdit(type.value), {
+          history: _dataHistory.value,
+          updated: dataEdit.value,
+        })
+        .then((res) => {
+          modalAdd.value = false;
+          success($q, "แก้ไขข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    }
+  });
+};
+
+/**
+ * บันทึกเพิ่มวันหยุด
+ */
+const addDate = async () => {
+  await formDate.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const dataAdd = ref<DataDateAddObject[]>([]);
+      let i = 0;
+      const dateStart = ref<Date>(dateRange.value[0]);
+      do {
+        i = i + 1;
+        dataAdd.value.push({
+          year: new Date(dateStart.value).getFullYear(),
+          holidayDate: dateToISO(new Date(dateStart.value)),
+          name: name.value,
+          isSpecial: true,
+        });
+        dateStart.value = new Date(
+          new Date(dateStart.value).setDate(
+            new Date(dateStart.value).getDate() + 1
+          )
+        );
+      } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
+      showLoader();
+      await http
+        .post(config.API.listHolidayHistoryAdd(category.value), dataAdd.value)
+        .then((res) => {
+          modalAdd.value = false;
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    }
+  });
+};
+
+/**
+ * ลบข้อมูลวันหยุด
+ */
+const deleteData = async () => {
+  modalDelete.value = false;
+  const dataDelete = ref<DataDateAddObject[]>([]);
+  let i = 0;
+  const dateStart = ref<Date>(dateRange.value[0]);
+  do {
+    i = i + 1;
+    dataDelete.value.push({
+      year: new Date(dateStart.value).getFullYear(),
+      holidayDate: dateToISO(new Date(dateStart.value)),
+      name: name.value,
+      isSpecial: true,
+    });
+    dateStart.value = new Date(
+      new Date(dateStart.value).setDate(new Date(dateStart.value).getDate() + 1)
+    );
+  } while (new Date(dateStart.value) <= new Date(dateRange.value[1]));
+  showLoader();
+  await http
+    .post(config.API.listHolidayHistoryDelete(type.value), dataDelete.value)
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      modalAdd.value = false;
+      await fetchData();
+    });
+};
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+const dateThaiRange = (val: [Date, Date]) => {
+  if (val === null) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+};
+
+const getClass = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<style scope lang="scss">
+.main-content {
+  height: 70vh;
+}
+
+.color-main {
+  color: #18a259;
+}
+
+.padding-content {
+  padding: 10px;
+}
+
+.demo-app-main {
+  flex-grow: 1;
+  /* padding: 3em; */
+}
+
+.fc {
+  /* the calendar root */
+  max-width: 1100px;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.fc-day-today {
+  background-color: rgb(255, 255, 255) !important;
+}
+
+// .fc-day-sun {
+//   background-color: rgba(207, 205, 205, 0.177) !important;
+//   width: 80px;
+// }
+
+// .fc-day-sat {
+//   background-color: rgba(207, 205, 205, 0.177) !important;
+//   width: 80px;
+// }
+
+.fc-day-today .fc-daygrid-day-number {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* border: 2px solid #17a259; */
+  border-radius: 50%;
+  height: 25px;
+  width: 25px;
+  font-weight: bold;
+  color: white !important;
+  background: #17a259;
+}
+
+.fc-day-today .fc-daygrid-day-frame {
+  padding: 5%;
+}
+
+.fc .fc-button-group > .fc-button {
+  color: black;
+  background-color: #fafafa;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button:active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc .fc-button-group > .fc-button.fc-button-active {
+  color: white;
+  background-color: #22a15e;
+  border: none;
+}
+
+.fc-header-toolbar {
+  background-color: white;
+  padding: 0px 10px 0px 10px;
+  border-radius: 10px 10px 0px 0px;
+}
+
+.fc .fc-scrollgrid-liquid > thead {
+  background-color: #f8f8f8;
+}
+
+.dp-custom-cell {
+  border-radius: 50%;
+}
+
+.dp__today {
+  border: 1px solid var(--q-primary);
+}
+
+.dp__range_end,
+.dp__range_start,
+.dp__active_date {
+  background: var(--q-primary);
+  color: var(--dp-primary-text-color);
+}
+
+.datepicker .q-field__label {
+  padding-left: 5px;
+}
+
+.datepicker .q-field__messages {
+  padding-left: 20px;
+}
+
+.datepicker .q-field__native {
+  padding-left: 5px;
+  color: var(--q-primary) !important;
+}
+
+.datepicker .q-field__prepend {
+  padding-left: 6px;
+}
+
+.datepicker .q-field__append {
+  padding-right: 6px;
+}
+
+.datepicker .q-field__after {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.fc .fc-popover {
+  z-index: 6000;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  cursor: pointer;
+}
+
+.subName {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: 500;
+}
+
+.subInput {
+  display: flex;
+  align-items: center;
+}
+
+.fc-event {
+  overflow: hidden;
+  border-color: transparent !important;
+  font-weight: 500;
+}
+
+.fc-event-main {
+  text-align: center;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  padding-left: 0px;
+}
+</style>
diff --git a/src/modules/01_metadataNew/components/calendar/CalendarList.vue b/src/modules/01_metadataNew/components/calendar/CalendarList.vue
new file mode 100644
index 000000000..5281695b6
--- /dev/null
+++ b/src/modules/01_metadataNew/components/calendar/CalendarList.vue
@@ -0,0 +1,581 @@
+<!-- tab รายการ หน้าปฏิทินวันหยุด -->
+<template>
+  <q-card class="q-mt-md" flat bordered>
+    <!-- list รายการันหยุด -->
+    <q-tabs
+      dense
+      v-model="currentTab"
+      indicator-color="primary"
+      active-color="primary bg-teal-1"
+      class="text-body2 text-grey-7"
+    >
+      <q-tab
+        v-for="tab in tabs"
+        :key="tab.value"
+        v-on:click="changeTab(tab.value)"
+        :label="tab.label"
+        :name="tab.value"
+        class="q-py-xs col-6 row"
+      />
+    </q-tabs>
+    <q-table
+      ref="table"
+      flat
+      bordered
+      class="custom-header-table"
+      virtual-scroll
+      :rows="calendarData"
+      :columns="columns"
+      dense
+      :rows-per-page-options="[0]"
+      hide-header
+    >
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div v-if="col.name == 'week'" class="">
+              {{ dayThaiRange(props.row.dateRange) }}
+            </div>
+            <div v-else-if="col.name == 'holidayDate'" class="">
+              {{ dateThaiRange(props.row.dateRange) }}
+            </div>
+            <div v-else class="my-table-details">
+              {{ col.value }}
+            </div>
+          </q-td>
+          <q-td auto-width>
+            <q-btn
+              flat
+              round
+              color="grey"
+              @click.stop
+              size="10px"
+              icon="more_vert"
+            >
+              <q-menu>
+                <q-list>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="editCalendar(props.row)"
+                  >
+                    <q-item-section>
+                      <q-item-label>แก้ไขวันหยุด</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    clickable
+                    v-close-popup
+                    @click="deleteClick(props.row)"
+                  >
+                    <q-item-section>
+                      <q-item-label>ลบวันหยุด</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </q-card>
+
+  <!-- modal เพิ่มวันหยุด -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="min-width: 550px">
+      <q-form ref="formDate" @submit.prevent.stop="editData">
+        <q-card-section class="row items-center q-pb-xs">
+          <div class="text-bold">แก้ไขวันหยุด</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            v-close-popup
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-2 subName">
+              <label>เลือกวันที่</label>
+            </div>
+            <div class="col-10">
+              <datepicker
+                v-model="dateAdd"
+                :locale="'th'"
+                autoApply
+                range
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="dateThaiRange(dateAdd)"
+                  >
+                    <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 class="row col-12 q-col-gutter-sm">
+            <div class="col-2 subName">
+              <label>คำอธิบาย</label>
+            </div>
+            <div class="col-10">
+              <q-input
+                dense
+                borderless
+                class="full-width datepicker q-pb-none"
+                v-model="name"
+                type="textarea"
+                :rules="[(val) => (val && val.length > 0) || '']"
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="text-primary">
+          <q-btn unelevated label="บันทึก" color="public" type="submit">
+            <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- modal ลบวันหยุด -->
+  <q-dialog v-model="modalDelete" persistent>
+    <q-card style="min-width: 550px">
+      <q-card-section class="row items-center q-pb-xs">
+        <div class="text-bold">ต้องการลบข้อมูลนี้หรือไม่?</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="row items-center">
+        <div class="q-pr-md">
+          <q-avatar
+            icon="mdi-trash-can-outline"
+            font-size="25px"
+            size="lg"
+            color="red-1"
+            text-color="red"
+          />
+        </div>
+        <div class="col text-dark">
+          <span>ข้อมูลที่กำลังถูกลบนี้จะมีผลใช้งานทันที</span>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="ตกลง" color="primary" @click="deleteConfirm" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  RequestItemsObject,
+  DataDateRowObject,
+  DataDateAddObject,
+  DataDateListsObject,
+  TabsObject,
+} from "@/modules/01_metadataNew/interface/index/Calendar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const props = defineProps({
+  dateYear: {
+    //filter ปี วันหยุด
+    type: Number,
+    required: true,
+  },
+  refreshData: {
+    //หน้า main มีการอัพเดทค่าให้ refresh data
+    type: Boolean,
+    required: true,
+  },
+  fetchDataSummaryCalendar: {
+    //ฟังก์ชันอัพเดทสรุปวันหยุด
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  success,
+  dateToISO,
+  dateMonth2Thai,
+  weekThai,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
+const $q = useQuasar(); //ใช้ noti quasar
+const calendarData = ref<DataDateListsObject[]>([]); //data วันหยุด
+const modalAdd = ref<boolean>(false); //modal เพิ่มวันหยุด
+const modalDelete = ref<boolean>(false); //modal ลบวันหยุด
+const name = ref<string>(""); //ชื่อวันหยุด
+const isSpecial = ref<boolean>(true); //เช็ควันหยุด
+const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
+const rowData = ref<DataDateListsObject>(); //data ที่ถูกเลือกใน row นั้น
+const formDate = ref<any>(); //ref เพิ่ม แก้ไข วันหยุดสำหรับ validate
+
+const currentTab = ref<string>("normal"); //เลือก tab ประเภทวันหยุด
+const tabs = ref<TabsObject[]>([
+  { label: "ทำงานจันทร์-ศุกร์ (5 วัน)", value: "normal" },
+  { label: "ทำงานจันทร์-เสาร์ (6 วัน)", value: "6day" },
+]); //tab ประเภทวันหยุดทั้งหมด
+
+//columns รายการวันหยุด
+const columns = ref<any>([
+  {
+    name: "week",
+    align: "left",
+    label: "-",
+    sortable: true,
+    field: "week",
+    style: "font-size: 15px",
+  },
+  {
+    name: "holidayDate",
+    align: "left",
+    label: "-",
+    sortable: true,
+    field: "holidayDate",
+    style: "font-size: 15px",
+  },
+  {
+    name: "detail",
+    align: "left",
+    label: "-",
+    sortable: true,
+    field: "detail",
+    style: "font-size: 15px",
+  },
+]);
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  await fetchData();
+});
+
+/**
+ * ค่า props(วันปีที่เลือก และเพิ่มหรือแก้ไข) ตอนอัพเดท ค่าฏิทินให้อัพเดทใหม่
+ */
+watch(props, async (count, prevCount) => {
+  await fetchData();
+});
+
+/**
+ * กดปุ่มแก้ไขวันหยุด
+ * @param val data วันหยุดทั้ง row
+ */
+const editCalendar = async (val: DataDateListsObject) => {
+  rowData.value = val;
+  dateAdd.value = [val.dateRange[0], val.dateRange[1]];
+  name.value = val.detail;
+  isSpecial.value = true;
+  modalAdd.value = true;
+};
+
+/**
+ * กดปุ่มลบวันหยุด
+ * @param val data วันหยุดทั้ง row
+ */
+const deleteClick = async (val: DataDateListsObject) => {
+  rowData.value = val;
+  modalDelete.value = true;
+};
+
+/**
+ * fetch วันหยุดในรายการ
+ */
+const fetchData = async () => {
+  calendarData.value = [];
+  showLoader();
+  await http
+    .get(config.API.listHolidayHistoryYear(props.dateYear))
+    .then((res) => {
+      let data = res.data.result.normal;
+      if (currentTab.value == "6day") {
+        data = res.data.result.sixDays;
+      }
+      const dateStart = ref<Date | null>();
+      const firstEvent = ref<boolean>(true);
+      const dateRow = ref<DataDateRowObject[]>([]);
+      data.map((e: RequestItemsObject, index: number) => {
+        dateRow.value.push({
+          holidayDate: new Date(e.holidayDate),
+          name: e.name,
+          isSpecial: true,
+          id: e.id,
+        });
+        if (
+          index == data.length - 1 ||
+          data[index + 1].name != e.name ||
+          (data[index + 1].name == e.name &&
+            dateToISO(new Date(data[index + 1].holidayDate)) !=
+              dateToISO(
+                new Date(
+                  new Date(e.holidayDate).setDate(
+                    new Date(e.holidayDate).getDate() + 1
+                  )
+                )
+              ))
+        ) {
+          firstEvent.value = true;
+          calendarData.value.push({
+            id: e.id,
+            dateRange: [
+              dateStart.value ? dateStart.value : new Date(e.holidayDate),
+              new Date(e.holidayDate),
+            ],
+            dataRangeRow: dateRow.value,
+            detail:
+              dateToISO(new Date(e.holidayDate)) ==
+              dateToISO(new Date(e.originalDate))
+                ? e.name
+                : `ชดเชย ${e.name}`,
+            isSpecial: true,
+          });
+          dateStart.value = null;
+          dateRow.value = [];
+        } else if (firstEvent.value == true) {
+          firstEvent.value = false;
+          dateStart.value = new Date(e.holidayDate);
+        }
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await props.fetchDataSummaryCalendar();
+    });
+};
+
+/**
+ * ลบข้อมูลวันหยุด
+ */
+const deleteConfirm = async () => {
+  modalDelete.value = false;
+  const dataDelete = ref<DataDateAddObject[]>([]);
+  if (rowData.value != null) {
+    await rowData.value.dataRangeRow.map((e: DataDateRowObject) => {
+      dataDelete.value.push({
+        year: new Date(e.holidayDate).getFullYear(),
+        holidayDate: dateToISO(e.holidayDate),
+        name: e.name,
+        isSpecial: true,
+      });
+    });
+  } else {
+    return;
+  }
+  showLoader();
+  await http
+    .post(
+      config.API.listHolidayHistoryDelete(currentTab.value),
+      dataDelete.value
+    )
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * บันทึกแก้ไขวันหยุด
+ */
+const editData = async () => {
+  await formDate.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const dataEdit = ref<DataDateAddObject[]>([]);
+      let i = 0;
+      const dateStart = ref<Date>(dateAdd.value[0]);
+      do {
+        i = i + 1;
+        dataEdit.value.push({
+          year: new Date(dateStart.value).getFullYear(),
+          holidayDate: dateToISO(new Date(dateStart.value)),
+          name: name.value,
+          isSpecial: true,
+        });
+        dateStart.value = new Date(
+          new Date(dateStart.value).setDate(
+            new Date(dateStart.value).getDate() + 1
+          )
+        );
+      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
+      const _dataHistory = ref<DataDateAddObject[]>([]);
+      if (rowData.value != null) {
+        rowData.value.dataRangeRow.map(
+          (e: DataDateRowObject, index: number) => {
+            _dataHistory.value.push({
+              year: new Date(e.holidayDate).getFullYear(),
+              holidayDate: dateToISO(e.holidayDate),
+              name: e.name,
+              isSpecial: true,
+            });
+          }
+        );
+      }
+      showLoader();
+      await http
+        .post(config.API.listHolidayHistoryEdit(currentTab.value), {
+          history: _dataHistory.value,
+          updated: dataEdit.value,
+        })
+        .then((res) => {
+          modalAdd.value = false;
+          success($q, "แก้ไขข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await fetchData();
+        });
+    } else {
+    }
+  });
+};
+
+/**
+ * เปลี่ยน tab ดูวันหยุดตามประเภท
+ * @param tab tab ประเภทวันหยุดที่เลือก
+ */
+const changeTab = async (tab: string) => {
+  currentTab.value = tab;
+  await fetchData();
+};
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+const dateThaiRange = (val: [Date, Date]) => {
+  if (val === null) {
+    return "";
+  } else if (dateMonth2Thai(val[0], true) === dateMonth2Thai(val[1], true)) {
+    return `${dateMonth2Thai(val[0], true)}`;
+  } else {
+    return `${dateMonth2Thai(val[0], true)} - ${dateMonth2Thai(val[1], true)}`;
+  }
+};
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง(เช่นวันจันทร์ -วันศุกร์)
+ * @param val ช่วงวันที่
+ */
+const dayThaiRange = (val: [Date, Date]) => {
+  if (val === null) {
+  } else if (dateToISO(val[0]) == dateToISO(val[1])) {
+    return `${weekThai(new Date(val[0]).getDay())}`;
+  } else {
+    return `${weekThai(new Date(val[0]).getDay())} - ${weekThai(
+      new Date(val[1]).getDay()
+    )}`;
+  }
+};
+</script>
+
+<style lang="scss">
+.custom-header-table {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+
+.my-table-details {
+  white-space: -moz-pre-wrap !important;
+  /* Mozilla, since 1999 */
+  white-space: -webkit-pre-wrap;
+  /* Chrome & Safari */
+  white-space: -pre-wrap;
+  /* Opera 4-6 */
+  white-space: -o-pre-wrap;
+  /* Opera 7 */
+  white-space: pre-wrap;
+  /* CSS3 */
+  word-wrap: break-word;
+  /* Internet Explorer 5.5+ */
+  word-break: break-all;
+  white-space: normal;
+}
+
+.table_ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: wrap;
+  max-width: 250px;
+}
+</style>
diff --git a/src/modules/01_metadataNew/components/calendar/calendarMain.vue b/src/modules/01_metadataNew/components/calendar/calendarMain.vue
new file mode 100644
index 000000000..efb8f6521
--- /dev/null
+++ b/src/modules/01_metadataNew/components/calendar/calendarMain.vue
@@ -0,0 +1,589 @@
+<!-- page:จัดการข้อมูลหลัก tab วันหยุด -->
+<template>
+  <div>
+    <div class="row col-12 q-col-gutter-sm">
+      <div class="row items-center">
+        <!-- filter เลือกเดือนปี -->
+        <datepicker
+          v-model="dateMonth"
+          :locale="'th'"
+          autoApply
+          month-picker
+          :enableTimePicker="false"
+          v-if="currentTab === 'calendar'"
+          @update:modelValue="updateMonth"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              :model-value="monthYearThai(dateMonth)"
+              dense
+              outlined
+              style="width: 130px"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+
+        <!-- filter เลือกปี -->
+        <datepicker
+          v-model="dateYear"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          v-if="currentTab === 'list'"
+          @update:modelValue="updateYear"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              :model-value="dateYear + 543"
+              dense
+              outlined
+              style="width: 100px"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+        <div class="q-ml-sm">
+          <!-- icon เพิ่มวันหยุด -->
+          <q-btn round dense flat size="13px" class="q-px-sm">
+            <q-icon
+              name="mdi-plus"
+              size="25px"
+              color="grey-7"
+              @click="addCalendar()"
+            />
+            <q-tooltip>เพิ่มวันหยุด</q-tooltip>
+          </q-btn>
+          <!-- icon คัดลอกวันหยุด -->
+          <q-btn round dense flat size="13px" class="q-px-sm">
+            <q-icon
+              name="mdi-content-copy"
+              size="22px"
+              color="grey-7"
+              @click="copyCalendar()"
+            />
+            <q-tooltip>คัดลอกวันหยุด</q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-space />
+      <div class="justify-center row q-gutter-md items-center">
+        <!-- tab รูปแบบแสดงวันหยุด ปฏิทินกับรายการ -->
+        <q-tabs
+          v-model="currentTab"
+          indicator-color="transparent"
+          align="left"
+          active-color="activetab"
+          class="text-nativetab"
+          inline-label
+          dense
+        >
+          <q-btn
+            name="calendar"
+            round
+            flat
+            icon="mdi-calendar-month"
+            @click="currentTab = 'calendar'"
+            :color="currentTab == 'calendar' ? 'primary' : ''"
+            class="q-mr-sm"
+          >
+            <q-tooltip>ปฏิทิน</q-tooltip>
+          </q-btn>
+          <q-separator vertical inset />
+          <q-btn
+            name="list"
+            round
+            flat
+            icon="mdi-format-list-bulleted"
+            @click="currentTab = 'list'"
+            :color="currentTab == 'list' ? 'primary' : ''"
+            class="q-ml-sm"
+          >
+            <q-tooltip>รายการ</q-tooltip>
+          </q-btn>
+        </q-tabs>
+      </div>
+    </div>
+    <div>
+      <!-- component ปฏิทินวันหยุด -->
+      <subCalendarComponent
+        v-if="currentTab === 'calendar'"
+        :dateYear="dateMonth.year"
+        :dateMonth="dateMonth.month"
+        :refreshData="refreshData"
+        :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
+      />
+      <!-- component รายการวันหยุด -->
+      <subCalendarListComponent
+        v-if="currentTab === 'list'"
+        :dateYear="dateYear"
+        :refreshData="refreshData"
+        :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
+      />
+    </div>
+  </div>
+  <!-- modal เพิ่มวันหยุด -->
+  <q-dialog v-model="modalAdd" persistent>
+    <q-card style="min-width: 550px">
+      <q-form ref="formDate" @submit.prevent.stop="onSubmit">
+        <q-card-section class="row items-center q-py-sm">
+          <div class="text-bold">เพิ่มวันหยุด</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            v-close-popup
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-p-md row q-gutter-y-sm">
+          <datepicker
+            v-model="dateAdd"
+            :locale="'th'"
+            autoApply
+            range
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                :model-value="dateThaiRange(dateAdd)"
+                outlined
+                label="เลือกวันที่"
+                dense
+                class="full-width datepicker"
+              >
+                <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
+            dense
+            label="คำอธิบาย"
+            outlined
+            class="full-width datepicker q-pb-none"
+            v-model="name"
+            type="textarea"
+            :rules="[(val) => (val && val.length > 0) || '']"
+          />
+          <q-option-group
+            dense
+            v-model="category"
+            :options="categoryOptions"
+            color="primary"
+            inline
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="text-primary">
+          <q-btn unelevated label="บันทึก" color="public" type="submit">
+            <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- modal คัดลอกวันหยุด -->
+  <q-dialog v-model="modalCopy" persistent>
+    <q-card style="min-width: 500px">
+      <q-form @submit.prevent.stop="onSubmitCopy">
+        <q-card-section class="row items-center q-py-sm">
+          <div class="text-bold">คัดลอกวันหยุดปีก่อนหน้า</div>
+          <q-space />
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            v-close-popup
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-p-sm">
+          <div class="row col-12 q-col-gutter-sm">
+            <datepicker
+              v-model="dateYearStart"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :model-value="dateYearStart + 543"
+                  dense
+                  outlined
+                  class="q-pb-sm"
+                  label="ปีที่คัดลอกวันหยุด"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+            <datepicker
+              v-model="dateYearEnd"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+              :min-date="minDate"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  :model-value="dateYearEnd + 543"
+                  dense
+                  outlined
+                  label="ปีที่ลงวันหยุดคัดลอก"
+                  class="q-pb-sm"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="text-primary">
+          <q-btn unelevated label="บันทึก" color="public" type="submit">
+            <!-- icon="mdi-content-save-outline"
+            <q-tooltip>บันทึก</q-tooltip> -->
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+import type {
+  DataDateMonthObject,
+  DataDateAddObject,
+} from "@/modules/01_metadataNew/interface/index/Calendar";
+
+import subCalendarComponent from "@/modules/01_metadataNew/components/calendar/Calendar.vue";
+import subCalendarListComponent from "@/modules/01_metadataNew/components/calendar/CalendarList.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const props = defineProps({
+  dateYear: Number, //ปีที่ส่งไป parent สรุปวันหยุด
+  fetchDataSummaryCalendar: {
+    //ฟังก์ชันอัพเดทสรุปวันหยุด
+    type: Function,
+    default: () => console.log("not function"),
+  },
+});
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  success,
+  dateToISO,
+  monthYear2Thai,
+  date2Thai,
+  messageError,
+  dialogMessage,
+  showLoader,
+  hideLoader,
+} = mixin;
+
+const currentTab = ref<string>("calendar"); //ระบุ tab ใช้งานอยู่ calendar=รายการ list=รายการ
+const modalAdd = ref<boolean>(false); //แสดง modal add calendar
+const modalCopy = ref<boolean>(false); //แสดง modal copy calendar
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: new Date().getFullYear(),
+}); //ค่าเดือนที่เลือก tab ปฏิทิน
+const dateYear = ref<number>(new Date().getFullYear()); //ค่าปีที่เลือก tab รายการ
+const dateYearStart = ref<number>(new Date().getFullYear()); //ค่าปีที่ copy วันหยุด
+const dateYearEnd = ref<number>(new Date().getFullYear()); //ค่าปีที่จะลงวันหยุด copy
+const dateAdd = ref<[Date, Date]>([new Date(), new Date()]); //วันที่ ที่เพิ่มเป็นวันหยุด
+const formDate = ref<any>(); //ref เช็ค validate เพิ่มวันหยุด
+const name = ref<string>(""); //ชื่อวันหยุด
+const isSpecial = ref<boolean>(true); //เช็ควันหยุดพิเศษ
+
+const category = ref<string>("all");
+const categoryOptions = ref<any>([
+  {
+    label: "ทั้งหมด",
+    value: "all",
+  },
+  {
+    label: "ทำงาน 5 วัน",
+    value: "normal",
+  },
+  {
+    label: "ทำงาน 6 วัน",
+    value: "6days",
+  },
+]);
+const minDate = ref<Date>();
+const refreshData = ref<boolean>(false); //ส่งค่าให้ component refresh data วันหยุด
+const emit = defineEmits(["update:dateYear"]);
+
+/**
+ * มีการเลือก datepicker ให้แปลงค่าเป็น text ที่แสดง
+ */
+watch(dateYearStart, () => {
+  dateYearEnd.value = dateYearStart.value + 1;
+  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
+});
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  dateYearEnd.value = dateYearStart.value + 1;
+  minDate.value = new Date(`${dateYearStart.value + 1}-01-01`);
+});
+
+/**
+ * ค่าเดือนปีที่ถูกเลือกใน component ปฏิทินจะให้อัพเดทค่าสรุปวันหยุดรวม
+ * @param e เลือกเดือนปี tab ปฏิทิน
+ */
+const updateMonth = async (e: DataDateMonthObject) => {
+  if (e != null) {
+    dateYear.value = e.year;
+    emit("update:dateYear", e.year);
+    await props.fetchDataSummaryCalendar();
+  }
+};
+
+/**
+ * ค่าปีที่ถูกเลือกใน component รายการจะให้อัพเดทค่าสรุปวันหยุดรวม
+ * @param e เลือกปี tab รายการ
+ */
+const updateYear = async (e: number) => {
+  dateMonth.value = { month: 0, year: e };
+  emit("update:dateYear", dateYear.value);
+  await props.fetchDataSummaryCalendar();
+};
+
+/**
+ * ฟังก์ชันปุ่มเพิ่มวันหยุดแบบเลือกวันได้
+ */
+const addCalendar = () => {
+  dateAdd.value = [new Date(), new Date()];
+  name.value = "";
+  category.value = "all";
+  isSpecial.value = true;
+  modalAdd.value = true;
+};
+
+/**
+ * ฟังก์ชัน copy วันหยุดจากปีนิงไปอีกปี
+ */
+const copyCalendar = () => {
+  modalCopy.value = true;
+  dateYearStart.value = new Date().getFullYear();
+  dateYearEnd.value = new Date().getFullYear() + 1;
+};
+
+/**
+ * ฟังก์ชันปุ่มบันทึกเพิ่มวันหยุด
+ */
+const onSubmit = async () => {
+  await formDate.value.validate().then(async (result: boolean) => {
+    if (result) {
+      const dataAdd = ref<DataDateAddObject[]>([]);
+      let i = 0;
+      const dateStart = ref<Date>(dateAdd.value[0]);
+      do {
+        i = i + 1;
+        dataAdd.value.push({
+          year: new Date(dateStart.value).getFullYear(),
+          holidayDate: dateToISO(new Date(dateStart.value)),
+          name: name.value,
+          isSpecial: true,
+        });
+        dateStart.value = new Date(
+          new Date(dateStart.value).setDate(
+            new Date(dateStart.value).getDate() + 1
+          )
+        );
+      } while (new Date(dateStart.value) <= new Date(dateAdd.value[1]));
+      showLoader();
+      await http
+        .post(config.API.listHolidayHistoryAdd(category.value), dataAdd.value)
+        .then(() => {
+          modalAdd.value = false;
+          success($q, "เพิ่มวันหยุดสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          refreshData.value = !refreshData.value;
+          hideLoader();
+        });
+    }
+  });
+  await props.fetchDataSummaryCalendar();
+};
+
+/**
+ * ฟังก์ชันคัดลอกวันหยุด
+ */
+const onSubmitCopy = async () => {
+  if (dateYearStart.value >= dateYearEnd.value) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถคัดลอกวันหยุดได้",
+      "ปีที่เริ่มต้นคัดลอกต้องมากกว่าปีที่จะลงวันคัดลอก",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  }
+  showLoader();
+  await http
+    .post(config.API.listHolidayCopy, {
+      fromYear: dateYearStart.value,
+      toYear: dateYearEnd.value,
+    })
+    .then(() => {
+      modalCopy.value = false;
+      success($q, "คัดลอกวันหยุดสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      refreshData.value = !refreshData.value;
+      await props.fetchDataSummaryCalendar();
+    });
+};
+
+/**
+ * แปลง ปีและเดือนเป็นภาษาไทย
+ * @param val datepicker แบบเลือกปีและเดือน
+ */
+const monthYearThai = (val: DataDateMonthObject) => {
+  if (val == null) return "";
+  else return monthYear2Thai(val.month, val.year);
+};
+
+/**
+ * แปลงช่วงวันที่ถ้า2ค่าเป็นวันเดียวกันจะโชววันเดียวแต่ถ้าไม่เท่ากันจะแสดงเป็นช่วง
+ * @param val ช่วงวันที่
+ */
+const dateThaiRange = (val: [Date, Date] | []) => {
+  if (val.length === 0) {
+  } else if (date2Thai(val[0]) === date2Thai(val[1])) {
+    return `${date2Thai(val[0])}`;
+  } else {
+    return `${date2Thai(val[0])} - ${date2Thai(val[1])} `;
+  }
+};
+</script>
+
+<style>
+.my-menu-link {
+  color: black;
+  background: #d0d0d0;
+}
+
+.my-list-link {
+  color: black;
+  border-radius: 5px;
+  background: #f4f4f4;
+}
+
+.my-list {
+  padding: 10px 10px;
+}
+
+.my-card {
+  width: 100%;
+  max-width: 160px;
+}
+
+.sub-card {
+  height: 100%;
+  max-height: 265px;
+}
+
+.cardNum {
+  border-radius: 5px;
+}
+
+.fc-direction-ltr .fc-daygrid-event.fc-event-end,
+.fc-direction-rtl .fc-daygrid-event.fc-event-start {
+  padding-left: 5px;
+}
+</style>
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
new file mode 100644
index 000000000..5dd585c69
--- /dev/null
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaDetail.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import InsigniaDetail from "@/modules/01_metadataNew/components/insignia/InsigniaList.vue";
+
+const router = useRouter();
+
+const nameType = ref<string>("");
+
+function fetchName(name: string) {
+  nameType.value = name;
+}
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="router.go(-1)"
+    />
+    รายละเอียดข้อมูลเครื่องราชอิสริยาภรณ์ {{ nameType }}
+  </div>
+
+  <q-card flat bordered>
+    <InsigniaDetail @update:fetchName="fetchName" />
+  </q-card>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaList.vue b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
new file mode 100644
index 000000000..744899b7a
--- /dev/null
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaList.vue
@@ -0,0 +1,989 @@
+<!-- tab ชื่อเครื่องราช หน้าจัดการข้อมูลหลัก/ข้อมูลเครื่องราชอิสริยาภรณ์ -->
+<script setup lang="ts">
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import { onMounted, ref } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+/** impoerType*/
+import type { QTableProps } from "quasar";
+import type {
+  RequestItemsHistoryObject,
+  RequestItemsPublishHistoryObject,
+} from "@/modules/01_metadataNew/interface/request/insignia/Insignia";
+import type { ResponseHistoryObject } from "@/modules/01_metadataNew/interface/response/insignia/Insignia";
+import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
+
+/** impoerComponents*/
+import HistoryTable from "@/components/TableHistory.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+const route = useRoute();
+const paramsID = ref<string>(route.params.id.toString());
+const nameType = ref<string>("");
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { success, dateText, messageError, showLoader, hideLoader } = mixin;
+
+const emit = defineEmits(["update:fetchName"]);
+
+const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
+const tittleHistory = ref<string>("ประวัติแก้ไขชื่อเครื่องราชฯ"); //
+const myForm = ref<any>(null); //ref สำหรับเช็คข้อมูลว่ามีช่องว่างไหม
+const filter = ref<string>(""); //search data table
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const edit = ref<boolean>(false); //ตรวจสอบการกดปุ่มแก้ไขข้อมูล
+const idVersion = ref<string>(""); //id data ใน mongodb
+const version = ref<string>("published"); //รายการข้อมูลล่าสุดได้เผยแพร่หรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+const updateData = ref<boolean>(false); //ตรวจสอบการแก้ไขข้อมูลว่าได้แก้ไขหรือไม่
+const checkValidate = ref<boolean>(false);
+const insigniaTypeOption = ref<DataOption[]>([]); //ราชการลำดับเครื่องราชฯ
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px; width:0px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "shortName",
+    align: "left",
+    label: "ชื่อย่อ",
+    sortable: true,
+    field: "shortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้นเครื่องราชฯ",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdatedAt",
+    align: "center",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumns = ref<String[]>([
+  "level",
+  "name",
+  "shortName",
+  "insigniaType",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+  "note",
+]);
+
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "level",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "level",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อเครื่องราชฯ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "shortName",
+    align: "left",
+    label: "ชื่อย่อ",
+    sortable: true,
+    field: "shortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "insigniaType",
+    align: "left",
+    label: "ลำดับชั้นเครื่องราชฯ",
+    sortable: true,
+    field: "insigniaType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdatedAt",
+    align: "center",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const visibleColumnsHistory = ref<String[]>([
+  "level",
+  "name",
+  "shortName",
+  "insigniaType",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+  "note",
+]);
+
+/**
+ * เมื่อเข้าหน้านี้จะเรียกฟังชันนี้ก่อน(get list data)
+ */
+onMounted(async () => {
+  await fetchData();
+  await fetchHistory();
+});
+
+/**
+ * ฟังก์ชัน get data ล่าสุด
+ */
+const fetchData = async () => {
+  // await props.fetchDataComponent();
+  // const result = await getInsignia(false, load);
+  // version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  // idVersion.value = result.idversion; //เลข id ใน mongodb
+
+  // updateData.value = false;
+  // rows.value = result.data;
+  // rows.value.sort(
+  //   (
+  //     firstItem: RequestItemsHistoryObject,
+  //     secondItem: RequestItemsHistoryObject
+  //   ) => firstItem.level - secondItem.level
+  // );
+  // const data = rows.value;
+  // let option: DataOption[] = [];
+  // data.map((r: RequestItemsHistoryObject) => {
+  //   option.push({ id: r.id.toString(), name: r.name.toString() });
+  // });
+  // insigniaTypeOption.value = option;
+  // fetchinsigniaType();
+  // updateData.value = true;
+
+  // const data = rows.value.filter((e) => e.insigniaType.id === paramsID.value);
+  // rows.value = data;
+  //   rows.value.splice(0);
+  showLoader();
+  await http
+    .get(config.API.listInsigniaHistory)
+    .then((res) => {
+      let data = res.data.result;
+      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+      idVersion.value = data.id; //เลข id ใน mongodb
+      const list: any[] = [];
+      data.items.map((e: RequestItemsHistoryObject) => {
+        list.push({
+          id: e.id,
+          name: e.name,
+          shortName: e.shortName,
+          level: e.level,
+          createdAt: e.createdAt,
+          lastUpdatedAt: e.lastUpdatedAt,
+          lastUpdateFullName: e.lastUpdateFullName,
+          isActive: e.isActive,
+          createdFullName: e.createdFullName,
+          createdUserId: e.createdUserId,
+          lastUpdateUserId: e.lastUpdateUserId,
+          insigniaType: e.insigniaType,
+          note: e.note,
+        });
+      });
+      list.sort(
+        (
+          firstItem: RequestItemsHistoryObject,
+          secondItem: RequestItemsHistoryObject
+        ) => firstItem.level - secondItem.level
+      );
+
+      rows.value = list.filter((e) => e.insigniaType.id === paramsID.value);
+      const name =
+        list.find((e) => e.insigniaType.id === paramsID.value)?.insigniaType
+          .name ?? "";
+
+      emit("update:fetchName", name);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      updateData.value = true;
+      await fetchinsigniaType();
+    });
+};
+
+/**
+ * รายการลำดับเครื่องราชฯ
+ */
+const fetchinsigniaType = async () => {
+  showLoader();
+  await http
+    .get(config.API.insigniaType)
+    .then((res) => {
+      const data = res.data.result;
+      let option: DataOption[] = [];
+      data.map((r: RequestItemsHistoryObject) => {
+        option.push({ id: r.id.toString(), name: r.name.toString() });
+      });
+      insigniaTypeOption.value = option;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      updateData.value = false;
+      hideLoader();
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลทั้งหมด
+ */
+const fetchHistory = async () => {
+  showLoader();
+  await http
+    .get(config.API.listInsigniaPublishedHistory)
+    .then((res) => {
+      const data = res.data.result;
+      rawHistory.value = [];
+      if (data.length > 0) {
+        data.map((e: RequestItemsPublishHistoryObject) => {
+          e.items.map((i: RequestItemsHistoryObject) => {
+            rawHistory.value.push({
+              createdAt: i.createdAt,
+              createdFullName: i.createdFullName,
+              createdUserId: i.createdUserId,
+              id: i.id,
+              isActive: i.isActive,
+              lastUpdateFullName: i.lastUpdateFullName,
+              lastUpdateUserId: i.lastUpdateUserId,
+              lastUpdatedAt: i.lastUpdatedAt,
+              level: i.level,
+              name: i.name,
+              shortName: i.shortName,
+              insigniaType: i.insigniaType,
+              note: i.note,
+            });
+          });
+        });
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+/**
+ * ฟังก์ชัน clear data แบบร่าง
+ * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
+ */
+const clearPublishedData = async () => {
+  showLoader();
+  await http
+    .delete(config.API.listInsigniaHistory)
+    .then((res) => {
+      success($q, "ลบข้อมูลร่างสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchHistory();
+      await fetchData();
+    });
+};
+
+/**
+ * ฟังก์ชันเผยแพร่แบบร่าง
+ * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
+ */
+const publishedData = async () => {
+  showLoader();
+  await http
+    .get(config.API.listInsigniaPublished)
+    .then((res) => {
+      success($q, "เผยแพร่ข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ฟังก์ชันเพิ่มข้อมูล
+ */
+const clickAdd = async () => {
+  const filterRowNull = rows.value.filter(
+    (f: RequestItemsHistoryObject) =>
+      f.id === "00000000-0000-0000-0000-000000000000" &&
+      (f.name == "" || f.shortName == "") //เช็คข้อมูลใน array ว่าเป็นข้อมูลที่เพิ่มมาใหม่และยังไม่มีการกรอกข้อมูล
+  );
+  if (filterRowNull.length == 0) {
+    //ถ้าไม่เจอค่าจะให้เพิ่มข้อมูลใหม่ได้
+    rows.value.push({
+      createdAt: new Date(),
+      createdFullName: "",
+      createdUserId: "",
+      id: "00000000-0000-0000-0000-000000000000",
+      isActive: true,
+      lastUpdateFullName:
+        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.name,
+      lastUpdateUserId: "",
+      lastUpdatedAt: new Date(),
+      name: "",
+      shortName: "",
+      level: rows.value[rows.value.length - 1].level + 1,
+      note: "",
+    });
+    updateData.value = true;
+  }
+};
+
+/**
+ * ฟังก์ชันบันทึกแบบร่าง
+ * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
+ * publish เมื่อบันทึกแบบร่างแล้วจะเผยแพร่เลยไหม true=บันทึกและเผยแพร่ false=บันทึกอย่างเดียว
+ */
+const save = async (publish: boolean) => {
+  await validateData();
+  if (checkValidate.value == false) return;
+  rows.value.map((e: ResponseHistoryObject) => ({
+    //จัด data ก่อนส่งไป backend
+    id: e.id,
+    createdAt: e.createdAt,
+    lastUpdatedAt: e.lastUpdatedAt,
+    name: e.name,
+    shortName: e.shortName,
+    level: e.level,
+    isActive: e.isActive,
+    createdFullName: e.createdFullName,
+    createdUserId: e.createdUserId,
+    lastUpdateFullName: e.lastUpdateFullName,
+    lastUpdateUserId: e.lastUpdateUserId,
+    insigniaType: e.insigniaType,
+  }));
+  showLoader();
+  await http
+    .post(config.API.listInsigniaHistoryId(idVersion.value), {
+      id: idVersion.value,
+      version: "draft",
+      items: rows.value,
+    })
+    .then(async () => {
+      if (publish === false) {
+        success($q, "บันทึกข้อมูลร่างสำเร็จ");
+        await fetchData(); //ไม่เผยแพร่และ get data ล่าสุดมาใหม่
+      } else {
+        await publishedData(); //เผยแพร่ข้อมูลต
+      }
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await fetchData();
+    });
+};
+
+/**
+ * เช็คชื่อซ้ำกับข้อมูลที่มีอยู่แล้ว
+ * @param val input ชื่อ
+ */
+const checkDupDataName = (val: string) => {
+  const filterNameNull = rows.value.filter(
+    (f: RequestItemsHistoryObject) => f.name == val
+  ); //เช็คข้อมูลว่ากรอกชื่อซ้ำไหม
+  if (filterNameNull.length > 1) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * เช็คชื่อย่อซ้ำกับข้อมูลที่มีอยู่แล้ว
+ * @param val input ชื่อย่อ
+ */
+const checkDupDataShortName = (val: string) => {
+  const filterShortNameNull = rows.value.filter(
+    (f: RequestItemsHistoryObject) => f.shortName == val
+  ); //เช็คข้อมูลว่ากรอกชื่อซ้ำไหม
+  if (filterShortNameNull.length > 1) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * ฟังก์ชันปุ่มแก้ไข ให้ get data มาใหม่
+ */
+const clickEdit = async () => {
+  await fetchData();
+};
+
+/**
+ * ฟังก์ชันปุ่มบันทึกแบบร่าง
+ */
+const clickSave = async () => {
+  await save(false);
+  await fetchData();
+};
+
+/**
+ * ฟังก์ชันปุ่มลบแบบร่าง
+ */
+const clickDelete = async () => {
+  await clearPublishedData();
+  await fetchData();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  edit.value = false;
+  await fetchData();
+};
+
+/**
+ * ฟังก์ชันปุ่มเผยแพร่ข้อมูล
+ * เช็คข้อมูลก่อนว่าใน array กรอกข้อมูลครบไหมถ้าครบก็ให้เผยแพร่ได้
+ * ถ้าค่าใน array ไม่มีข้อมูลใน row ก้จะให้บันทึกได้
+ */
+const clickPublish = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        save(true);
+      }
+    });
+  } else {
+    await save(true);
+  }
+};
+
+/**
+ * ฟังก์ชันปุ่มลบ row data
+ * @param val data ใน row ที่จะลบ
+ */
+const clickDeleteRow = (val: RequestItemsHistoryObject) => {
+  rows.value = rows.value.filter((x: RequestItemsHistoryObject) => x !== val);
+  updateData.value = true;
+};
+
+/**
+ * ฟังก์ชันเช็ค input ว่ามีการแก้ไขหรือยัง
+ */
+const clickEditRow = () => {
+  myForm.value.validate(false);
+  updateData.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsHistoryObject) => {
+  modalHistory.value = true;
+  rowsHistory.value = rawHistory.value.filter(
+    (f: RequestItemsHistoryObject) => f.id == row.id
+  );
+};
+
+/**
+ * ฟังก์ชันแปลง date เป็นภาษาไทย
+ * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
+ */
+const textDate = (value: Date) => {
+  return dateText(value);
+};
+
+/**
+ * validate component
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+/**
+ * ย้ายลำดับ data
+ * @param row ค่าใน row
+ * @param type ย้ายตำแหน่งแบบไหน up=ขึ้น down=ลง
+ */
+const directionItem = (row: RequestItemsHistoryObject, type: string) => {
+  clickEditRow();
+  if (type === "up") {
+    rows.value[
+      rows.value.findIndex((object: RequestItemsHistoryObject) => {
+        return object === row;
+      })
+    ].level -= 1;
+    rows.value[
+      rows.value.findIndex((object: RequestItemsHistoryObject) => {
+        return object === row;
+      }) - 1
+    ].level += 1;
+  } else {
+    rows.value[
+      rows.value.findIndex((object: RequestItemsHistoryObject) => {
+        return object === row;
+      })
+    ].level += 1;
+    rows.value[
+      rows.value.findIndex((object: RequestItemsHistoryObject) => {
+        return object === row;
+      }) + 1
+    ].level -= 1;
+  }
+  rows.value.sort(
+    (
+      firstItem: RequestItemsHistoryObject,
+      secondItem: RequestItemsHistoryObject
+    ) => firstItem.level - secondItem.level
+  );
+};
+</script>
+
+<template>
+  <div>
+    <q-form ref="myForm">
+      <data-table
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        v-model:editvisible="edit"
+        :add="clickAdd"
+        :edit="clickEdit"
+        :save="clickSave"
+        :deleted="clickDelete"
+        :cancel="clickCancel"
+        :publish="clickPublish"
+        :validate="validateData"
+        :publicData="version === 'published'"
+        :updateData="updateData"
+        :history="true"
+      >
+        <template #columns="props">
+          <q-tr :props="props" v-if="edit == false">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'isActive'" class="">
+                <q-icon
+                  v-if="col.value == false"
+                  name="mdi-close"
+                  color="red"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
+              </div>
+              <div v-else-if="col.name == 'createdAt'" class="">
+                {{ textDate(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'lastUpdatedAt'" class="">
+                {{ textDate(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'insigniaType'" class="">
+                {{ col.value == null ? "" : col.value.name }}
+              </div>
+              <div v-else class="">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+          <q-tr :props="props" v-if="edit == true">
+            <q-td
+              key="level"
+              :props="props"
+              v-if="props.row.level !== undefined"
+            >
+              <div class="">
+                {{ props.row.level }}
+              </div>
+            </q-td>
+            <q-td key="name" :props="props" v-if="props.row.name !== undefined">
+              <q-input
+                class=""
+                outlined
+                @update:model-value="clickEditRow"
+                v-model="props.row.name"
+                dense
+                lazy-rules
+                autofocus
+                hide-bottom-space
+                :rules="[
+                  (val) => (val && val.length > 0) || 'กรุณากรอกข้อมูลให้ครบ',
+                  (val) =>
+                    checkDupDataName(val) || 'ชื่อซ้ำกันกับข้อมูลที่มีอยู่แล้ว',
+                ]"
+              ></q-input>
+            </q-td>
+            <q-td
+              key="shortName"
+              :props="props"
+              v-if="props.row.shortName !== undefined"
+            >
+              <q-input
+                class=""
+                outlined
+                @update:model-value="clickEditRow"
+                v-model="props.row.shortName"
+                dense
+                lazy-rules
+                hide-bottom-space
+                :rules="[
+                  (val) => (val && val.length > 0) || 'กรุณากรอกข้อมูลให้ครบ',
+                  (val) =>
+                    checkDupDataShortName(val) ||
+                    'ชื่อซ้ำกันกับข้อมูลที่มีอยู่แล้ว',
+                ]"
+              ></q-input>
+            </q-td>
+            <q-td
+              key="insigniaType"
+              :props="props"
+              v-if="props.row.shortName !== undefined"
+            >
+              <q-select
+                :options="insigniaTypeOption"
+                outlined
+                @update:model-value="clickEditRow"
+                v-model="props.row.insigniaType"
+                dense
+                lazy-rules
+                hide-bottom-space
+                option-label="name"
+                option-value="id"
+                :rules="[(val) => val || 'กรุณาเลือกลำดับชั้นเครื่องราชฯ']"
+              />
+            </q-td>
+            <q-td
+              key="createdAt"
+              :props="props"
+              v-if="props.row.createdAt !== undefined"
+            >
+              <div class="">
+                {{ textDate(props.row.createdAt) }}
+              </div>
+            </q-td>
+            <q-td key="lastUpdatedAt" :props="props">
+              <div class="">
+                {{ textDate(props.row.lastUpdatedAt) }}
+              </div>
+            </q-td>
+            <q-td
+              key="lastUpdateFullName"
+              :props="props"
+              v-if="props.row.lastUpdateFullName !== undefined"
+              class=""
+            >
+              {{ props.row.lastUpdateFullName }}
+            </q-td>
+            <q-td
+              key="isActive"
+              :props="props"
+              v-if="props.row.isActive !== undefined"
+            >
+              <q-toggle
+                v-model="props.row.isActive"
+                dense
+                size="34px"
+                color="positive"
+                @update:model-value="clickEditRow"
+              />
+            </q-td>
+            <q-td key="note" :props="props" v-if="props.row.note !== undefined">
+              <q-input
+                class=""
+                outlined
+                @update:model-value="clickEditRow"
+                v-model="props.row.note"
+                dense
+                lazy-rules
+                autofocus
+                hide-bottom-space
+              ></q-input>
+            </q-td>
+
+            <q-td auto-width>
+              <div class="row">
+                <q-btn
+                  :disable="props.row.level <= 1"
+                  flat
+                  dense
+                  size="12px"
+                  icon="mdi-menu-up"
+                  style="
+                    padding-top: 0em;
+                    padding-right: 0.5em;
+                    padding-bottom: 0em;
+                    padding-left: 0.5em;
+                    min-height: 0em;
+                  "
+                  @click="directionItem(props.row, 'up')"
+                />
+                <q-btn
+                  :disable="props.row.level >= rows.length"
+                  flat
+                  dense
+                  size="12px"
+                  icon="mdi-menu-down"
+                  style="
+                    padding-top: 0em;
+                    padding-right: 0.5em;
+                    padding-bottom: 0em;
+                    padding-left: 0.5em;
+                    min-height: 0em;
+                  "
+                  @click="directionItem(props.row, 'down')"
+                />
+              </div>
+              <q-btn
+                v-if="props.row.id !== '00000000-0000-0000-0000-000000000000'"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click="clickHistory(props.row)"
+              />
+              <q-btn
+                v-if="props.row.id === '00000000-0000-0000-0000-000000000000'"
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-trash-can-outline"
+                @click="clickDeleteRow(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </data-table>
+    </q-form>
+  </div>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'isActive'" class="">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else-if="col.name == 'lastUpdatedAt'" class="">
+            {{ textDate(col.value) }}
+          </div>
+          <div v-else-if="col.name == 'insigniaType'" class="">
+            {{ col.value == null ? "" : col.value.name }}
+          </div>
+          <div v-else class="">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
+<style>
+/* สีของnoti */
+.my-notif-class {
+  background: rgba(33, 186, 69, 0.5) !important;
+  color: #008f17 !important;
+}
+</style>
diff --git a/src/modules/01_metadataNew/components/insignia/InsigniaType.vue b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
new file mode 100644
index 000000000..d00c6394d
--- /dev/null
+++ b/src/modules/01_metadataNew/components/insignia/InsigniaType.vue
@@ -0,0 +1,661 @@
+<!-- tab ลำดับชั้นเครื่องราชฯ หน้าจัดการข้อมูลหลัก/ข้อมูลเครื่องราชอิสริยาภรณ์ -->
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import keycloak from "@/plugins/keycloak";
+
+/** importType*/
+
+import type { QTableProps } from "quasar";
+import type {
+  RequestItemsHistoryObject,
+  RequestItemsPublishHistoryObject,
+} from "@/modules/01_metadataNew/interface/request/insignia/InsigniaType";
+import type { ResponseHistoryObject } from "@/modules/01_metadataNew/interface/response/insignia/InsigniaType";
+
+/** importComponents*/
+import HistoryTable from "@/components/TableHistory.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { success, dateText, messageError, showLoader, hideLoader } = mixin;
+
+const rows = ref<RequestItemsHistoryObject[]>([]); //list data table
+const rowsHistory = ref<RequestItemsHistoryObject[]>([]); //select data history
+const rawHistory = ref<RequestItemsHistoryObject[]>([]); //raw data history
+const tittleHistory = ref<string>("ประวัติแก้ไขลำดับชั้นเครื่องราชฯ"); //
+const myForm = ref<any>(null); //ref สำหรับเช็คข้อมูลว่ามีช่องว่างไหม
+const filter = ref<string>(""); //search data table
+const filterHistory = ref<string>(""); //search data table history
+const modalHistory = ref<boolean>(false); //modal ประวัติการแก้ไขข้อมูล
+const edit = ref<boolean>(false); //ตรวจสอบการกดปุ่มแก้ไขข้อมูล
+const idVersion = ref<string>(""); //id data ใน mongodb
+const version = ref<string>("published"); //รายการข้อมูลล่าสุดได้เผยแพร่หรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+const updateData = ref<boolean>(false); //ตรวจสอบการแก้ไขข้อมูลว่าได้แก้ไขหรือไม่
+const checkValidate = ref<boolean>(false);
+
+/** ข้อมูล Table*/
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ลำดับชั้นเครื่องราชฯ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "center",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "center",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumns = ref<String[]>([
+  "name",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+const columnsHistory = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ลำดับชั้นเครื่องราชฯ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "center",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const visibleColumnsHistory = ref<String[]>([
+  "name",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+/**
+ * เมื่อเข้าหน้านี้จะเรียกฟังชันนี้ก่อน(get list data)
+ */
+onMounted(async () => {
+  await fetchData();
+  await fetchHistory();
+});
+
+/**
+ * ฟังก์ชัน get data ล่าสุด
+ */
+const fetchData = async () => {
+  // await props.fetchDataComponent();
+  // const result = await getInsigniaType(false, load);
+  // version.value = result.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+  // idVersion.value = result.idversion; //เลข id ใน mongodb
+
+  // rows.value = result.data;
+  // updateData.value = false;
+  //   rows.value.splice(0);
+  //   showLoader();
+  await http
+    .get(config.API.listInsigniaTypeHistory)
+    .then((res) => {
+      let data = res.data.result;
+      version.value = data.version; //ตัวแปรที่บอกว่าข้อมูลเผยแพร่ไปหรือยัง published=เผยแพร่แล้ว draft=ยังไม่เผยแพร่
+      idVersion.value = data.id; //เลข id ใน mongodb
+      rows.value = [];
+      data.items.map((e: RequestItemsHistoryObject) => {
+        rows.value.push({
+          id: e.id,
+          name: e.name,
+          createdAt: e.createdAt,
+          lastUpdatedAt: e.lastUpdatedAt,
+          lastUpdateFullName: e.lastUpdateFullName,
+          isActive: e.isActive,
+          createdFullName: e.createdFullName,
+          createdUserId: e.createdUserId,
+          lastUpdateUserId: e.lastUpdateUserId,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      updateData.value = false;
+      hideLoader();
+    });
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลทั้งหมด
+ */
+const fetchHistory = async () => {
+  showLoader();
+  await http
+    .get(config.API.listInsigniaTypePublishedHistory)
+    .then((res) => {
+      const data = res.data.result;
+      rawHistory.value = [];
+      if (data.length > 0) {
+        data.map((e: RequestItemsPublishHistoryObject) => {
+          e.items.map((i: RequestItemsHistoryObject) => {
+            rawHistory.value.push({
+              createdAt: i.createdAt,
+              createdFullName: i.createdFullName,
+              createdUserId: i.createdUserId,
+              id: i.id,
+              isActive: i.isActive,
+              lastUpdateFullName: i.lastUpdateFullName,
+              lastUpdateUserId: i.lastUpdateUserId,
+              lastUpdatedAt: i.lastUpdatedAt,
+              name: i.name,
+            });
+          });
+        });
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+/**
+ * ฟังก์ชัน clear data แบบร่าง
+ * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
+ */
+const clearPublishedData = async () => {
+  showLoader();
+  await http
+    .delete(config.API.listInsigniaTypeHistory)
+    .then((res) => {
+      success($q, "ลบข้อมูลร่างสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchHistory();
+      await fetchData();
+    });
+};
+
+/**
+ * ฟังก์ชันเผยแพร่แบบร่าง
+ * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
+ */
+const publishedData = async () => {
+  showLoader();
+  await http
+    .get(config.API.listInsigniaTypePublished)
+    .then((res) => {
+      success($q, "เผยแพร่ข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
+};
+
+/**
+ * ฟังก์ชันเพิ่มข้อมูล
+ */
+const clickAdd = async () => {
+  const filterRowNull = rows.value.filter(
+    (f: RequestItemsHistoryObject) =>
+      f.id === "00000000-0000-0000-0000-000000000000" && f.name == "" //เช็คข้อมูลใน array ว่าเป็นข้อมูลที่เพิ่มมาใหม่และยังไม่มีการกรอกข้อมูล
+  );
+  if (filterRowNull.length == 0) {
+    //ถ้าไม่เจอค่าจะให้เพิ่มข้อมูลใหม่ได้
+    rows.value.push({
+      createdAt: new Date(),
+      createdFullName: "",
+      createdUserId: "",
+      id: "00000000-0000-0000-0000-000000000000",
+      isActive: true,
+      lastUpdateFullName:
+        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.name,
+      lastUpdateUserId: "",
+      lastUpdatedAt: new Date(),
+      name: "",
+    });
+    updateData.value = true;
+  }
+};
+
+/**
+ * ฟังก์ชันบันทึกแบบร่าง
+ * เมื่อเรียก api เสร็จแล้วจะ get data มาใหม่
+ * publish เมื่อบันทึกแบบร่างแล้วจะเผยแพร่เลยไหม true=บันทึกและเผยแพร่ false=บันทึกอย่างเดียว
+ */
+const save = async (publish: boolean) => {
+  await validateData();
+  if (checkValidate.value == false) return;
+  rows.value.map((e: ResponseHistoryObject) => ({
+    //จัด data ก่อนส่งไป backend
+    id: e.id,
+    createdAt: e.createdAt,
+    lastUpdatedAt: e.lastUpdatedAt,
+    name: e.name,
+    isActive: e.isActive,
+    createdFullName: e.createdFullName,
+    createdUserId: e.createdUserId,
+    lastUpdateFullName: e.lastUpdateFullName,
+    lastUpdateUserId: e.lastUpdateUserId,
+  }));
+  showLoader();
+  await http
+    .post(config.API.listInsigniaTypeHistoryId(idVersion.value), {
+      id: idVersion.value,
+      version: "draft",
+      items: rows.value,
+    })
+    .then(async (res) => {
+      if (publish === false) {
+        success($q, "บันทึกข้อมูลร่างสำเร็จ");
+        await fetchData(); //ไม่เผยแพร่และ get data ล่าสุดมาใหม่
+      } else {
+        await publishedData(); //เผยแพร่ข้อมูลต
+      }
+      edit.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await fetchData();
+    });
+};
+
+/**
+ * เช็คชื่อซ้ำกับข้อมูลที่มีอยู่แล้ว
+ * @param val input ชื่อ
+ */
+const checkDupDataName = (val: string) => {
+  const filterNameNull = rows.value.filter(
+    (f: RequestItemsHistoryObject) => f.name == val
+  ); //เช็คข้อมูลว่ากรอกชื่อซ้ำไหม
+  if (filterNameNull.length > 1) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * ฟังก์ชันปุ่มแก้ไข ให้ get data มาใหม่
+ */
+const clickEdit = async () => {
+  await fetchData();
+};
+
+/**
+ * ฟังก์ชันปุ่มบันทึกแบบร่าง
+ */
+const clickSave = async () => {
+  await save(false);
+  await fetchData();
+};
+
+/**
+ * ฟังก์ชันปุ่มลบแบบร่าง
+ */
+const clickDelete = async () => {
+  await clearPublishedData();
+  await fetchData();
+};
+
+/**
+ * ฟังก์ชันปุ่มยกเลิกการแก้ไขข้อมูล
+ */
+const clickCancel = async () => {
+  edit.value = false;
+  await fetchData();
+};
+
+/**
+ * ฟังก์ชันปุ่มเผยแพร่ข้อมูล
+ * เช็คข้อมูลก่อนว่าใน array กรอกข้อมูลครบไหมถ้าครบก็ให้เผยแพร่ได้
+ * ถ้าค่าใน array ไม่มีข้อมูลใน row ก้จะให้บันทึกได้
+ */
+const clickPublish = async () => {
+  if (myForm.value !== null) {
+    myForm.value.validate().then(async (result: boolean) => {
+      if (result) {
+        await save(true);
+      }
+    });
+  } else {
+    await save(true);
+  }
+};
+
+/**
+ * ฟังก์ชันปุ่มลบ row data
+ * @param val data ใน row ที่จะลบ
+ */
+const clickDeleteRow = (val: RequestItemsHistoryObject) => {
+  rows.value = rows.value.filter((x: RequestItemsHistoryObject) => x !== val);
+  updateData.value = true;
+};
+
+/**
+ * ฟังก์ชันเช็ค input ว่ามีการแก้ไขหรือยัง
+ */
+const clickEditRow = () => {
+  myForm.value.validate(false);
+  updateData.value = true;
+};
+
+/**
+ * ฟังชั้นดูข้อมูลประวัติแก้ไขข้อมูลที่เลือก
+ * @param row ข้อมูล row ที่ดูประวัติการแก้ไข
+ */
+const clickHistory = async (row: RequestItemsHistoryObject) => {
+  modalHistory.value = true;
+  rowsHistory.value = rawHistory.value.filter(
+    (f: RequestItemsHistoryObject) => f.id == row.id
+  );
+};
+
+/**
+ * ฟังก์ชันแปลง date เป็นภาษาไทย
+ * @param value วันที่ type datetime ที่จะแปลงเป็นไทย
+ */
+const textDate = (value: Date) => {
+  return dateText(value);
+};
+
+/**
+ * validate component
+ */
+const validateData = async () => {
+  checkValidate.value = true;
+  await myForm.value.validate().then((result: boolean) => {
+    if (result == false) {
+      checkValidate.value = false;
+    }
+  });
+};
+
+function onclickDetail(data: any) {
+  const id = data.id;
+  router.push(`/master-data/insignia/detail/${id}`);
+}
+</script>
+
+<template>
+  <div>
+    <q-form ref="myForm">
+      <data-table
+        :rows="rows"
+        :columns="columns"
+        :filter="filter"
+        :visible-columns="visibleColumns"
+        v-model:inputfilter="filter"
+        v-model:inputvisible="visibleColumns"
+        v-model:editvisible="edit"
+        :add="clickAdd"
+        :edit="clickEdit"
+        :save="clickSave"
+        :deleted="clickDelete"
+        :cancel="clickCancel"
+        :publish="clickPublish"
+        :validate="validateData"
+        :publicData="version === 'published'"
+        :updateData="updateData"
+        :history="true"
+      >
+        <template #columns="props">
+          <q-tr
+            :props="props"
+            v-if="edit == false"
+            @click.stop="onclickDetail(props.row)"
+          >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div v-if="col.name == 'isActive'" class="">
+                <q-icon
+                  v-if="col.value == false"
+                  name="mdi-close"
+                  color="red"
+                  class="text-h5"
+                />
+                <q-icon
+                  v-else
+                  name="mdi-check"
+                  color="positive"
+                  class="text-h5"
+                />
+              </div>
+              <div v-else-if="col.name == 'createdAt'" class="">
+                {{ textDate(col.value) }}
+              </div>
+              <div v-else-if="col.name == 'lastUpdatedAt'" class="">
+                {{ textDate(col.value) }}
+              </div>
+              <div v-else class="">
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click.stop="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+          <q-tr :props="props" v-if="edit == true">
+            <q-td key="name" :props="props" v-if="props.row.name !== undefined">
+              <q-input
+                class=""
+                outlined
+                @update:model-value="clickEditRow"
+                v-model="props.row.name"
+                dense
+                lazy-rules
+                autofocus
+                hide-bottom-space
+                :rules="[
+                  (val) => (val && val.length > 0) || 'กรุณากรอกข้อมูลให้ครบ',
+                  (val) =>
+                    checkDupDataName(val) || 'ชื่อซ้ำกันกับข้อมูลที่มีอยู่แล้ว',
+                ]"
+              ></q-input>
+            </q-td>
+            <q-td
+              key="createdAt"
+              :props="props"
+              v-if="props.row.createdAt !== undefined"
+            >
+              <div class="">
+                {{ textDate(props.row.createdAt) }}
+              </div>
+            </q-td>
+            <q-td key="lastUpdatedAt" :props="props">
+              <div class="">
+                {{ textDate(props.row.lastUpdatedAt) }}
+              </div>
+            </q-td>
+            <q-td
+              key="lastUpdateFullName"
+              :props="props"
+              v-if="props.row.lastUpdateFullName !== undefined"
+              class=""
+            >
+              {{ props.row.lastUpdateFullName }}
+            </q-td>
+            <q-td
+              key="isActive"
+              :props="props"
+              v-if="props.row.isActive !== undefined"
+            >
+              <q-toggle
+                v-model="props.row.isActive"
+                dense
+                size="34px"
+                color="positive"
+                @update:model-value="clickEditRow"
+              />
+            </q-td>
+
+            <q-td auto-width>
+              <q-btn
+                v-if="props.row.id === '00000000-0000-0000-0000-000000000000'"
+                color="red"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-trash-can-outline"
+                @click.stop="clickDeleteRow(props.row)"
+              />
+              <q-btn
+                v-if="props.row.id !== '00000000-0000-0000-0000-000000000000'"
+                color="info"
+                flat
+                dense
+                round
+                size="14px"
+                icon="mdi-history"
+                @click.stop="clickHistory(props.row)"
+              />
+            </q-td>
+          </q-tr>
+        </template>
+      </data-table>
+    </q-form>
+  </div>
+  <HistoryTable
+    :rows="rowsHistory"
+    :columns="columnsHistory"
+    :filter="filterHistory"
+    :visible-columns="visibleColumnsHistory"
+    v-model:modal="modalHistory"
+    v-model:inputfilter="filterHistory"
+    v-model:inputvisible="visibleColumnsHistory"
+    v-model:tittle="tittleHistory"
+  >
+    <template #columns="props">
+      <q-tr :props="props">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div v-if="col.name == 'isActive'" class="">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else-if="col.name == 'lastUpdatedAt'" class="">
+            {{ textDate(col.value) }}
+          </div>
+          <div v-else class="">
+            {{ col.value }}
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </HistoryTable>
+</template>
+
+<style>
+/* สีของnoti */
+.my-notif-class {
+  background: rgba(33, 186, 69, 0.5) !important;
+  color: #008f17 !important;
+}
+</style>
diff --git a/src/modules/01_metadataNew/interface/index/Calendar.ts b/src/modules/01_metadataNew/interface/index/Calendar.ts
new file mode 100644
index 000000000..1435a903b
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/index/Calendar.ts
@@ -0,0 +1,68 @@
+interface DataSumCalendarObject {
+  id: number;
+  monthFull: String;
+  count: number;
+  color: String;
+}
+interface DataDateMonthObject {
+  month: number;
+  year: number;
+}
+interface DataDateAddObject {
+  year: number;
+  holidayDate: Date | string;
+  name: string;
+  isSpecial: boolean;
+}
+
+//ข้อมูล
+interface RequestItemsObject {
+  createdAt?: Date;
+  createdFullName: string;
+  createdUserId: string;
+  holidayDate: Date | string;
+  id: string;
+  isSpecial: boolean;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt?: Date;
+  name: string;
+  originalDate: Date;
+}
+
+interface DataDateRowObject {
+  holidayDate: Date;
+  name: string;
+  isSpecial: boolean;
+  id: string;
+}
+
+interface DataDateAddObject {
+  year: number;
+  holidayDate: Date | string;
+  name: string;
+  isSpecial: boolean;
+}
+
+interface DataDateListsObject {
+  id: string;
+  dateRange: [Date, Date];
+  dataRangeRow: DataDateRowObject[];
+  detail: string;
+  isSpecial: boolean;
+}
+
+interface TabsObject {
+  label: string;
+  value: string;
+}
+
+export type {
+  DataSumCalendarObject,
+  DataDateMonthObject,
+  DataDateAddObject,
+  RequestItemsObject,
+  DataDateRowObject,
+  DataDateListsObject,
+  TabsObject,
+};
diff --git a/src/modules/01_metadataNew/interface/request/insignia/Badge.ts b/src/modules/01_metadataNew/interface/request/insignia/Badge.ts
new file mode 100644
index 000000000..2c7ee1f82
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/request/insignia/Badge.ts
@@ -0,0 +1,39 @@
+//ข้อมูลประวัติแก้ไข
+interface RequestItemsPublishHistoryObject {
+  id: string;
+  items: RequestItemsHistoryObject[];
+  publishedDate: string;
+}
+
+//ข้อมูล
+interface RequestItemsHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: string;
+  shortName: String;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type {
+  RequestItemsHistoryObject,
+  RequestItemsPublishHistoryObject,
+  Columns,
+};
diff --git a/src/modules/01_metadataNew/interface/request/insignia/Insignia.ts b/src/modules/01_metadataNew/interface/request/insignia/Insignia.ts
new file mode 100644
index 000000000..f334e28b0
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/request/insignia/Insignia.ts
@@ -0,0 +1,42 @@
+//ข้อมูลประวัติแก้ไข
+interface RequestItemsPublishHistoryObject {
+  id: string;
+  items: RequestItemsHistoryObject[];
+  publishedDate: string;
+}
+
+//ข้อมูล
+interface RequestItemsHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  level: number;
+  name: string;
+  shortName: String;
+  insigniaType?: any;
+  note: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type {
+  RequestItemsHistoryObject,
+  RequestItemsPublishHistoryObject,
+  Columns,
+};
diff --git a/src/modules/01_metadataNew/interface/request/insignia/InsigniaType.ts b/src/modules/01_metadataNew/interface/request/insignia/InsigniaType.ts
new file mode 100644
index 000000000..6cb8bc59a
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/request/insignia/InsigniaType.ts
@@ -0,0 +1,38 @@
+//ข้อมูลประวัติแก้ไข
+interface RequestItemsPublishHistoryObject {
+  id: string;
+  items: RequestItemsHistoryObject[];
+  publishedDate: string;
+}
+
+//ข้อมูล
+interface RequestItemsHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: string;
+}
+
+//columns
+interface Columns {
+  [index: number]: {
+    name: String;
+    align: String;
+    label: String;
+    sortable: Boolean;
+    field: String;
+    headerStyle: String;
+    style: String;
+  };
+}
+
+export type {
+  RequestItemsHistoryObject,
+  RequestItemsPublishHistoryObject,
+  Columns,
+};
diff --git a/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts b/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts
new file mode 100644
index 000000000..6fb21a2ca
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/insignia/Insignia.ts
@@ -0,0 +1,18 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  level: number;
+  name: String;
+  shortName: String;
+  insigniaType?: any;
+  note: string;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/insignia/InsigniaType.ts b/src/modules/01_metadataNew/interface/response/insignia/InsigniaType.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/insignia/InsigniaType.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/Agency.ts b/src/modules/01_metadataNew/interface/response/organization/Agency.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/Agency.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/Fax.ts b/src/modules/01_metadataNew/interface/response/organization/Fax.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/Fax.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/GovernmentAgency.ts b/src/modules/01_metadataNew/interface/response/organization/GovernmentAgency.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/GovernmentAgency.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/Level.ts b/src/modules/01_metadataNew/interface/response/organization/Level.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/Level.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/Organization.ts b/src/modules/01_metadataNew/interface/response/organization/Organization.ts
new file mode 100644
index 000000000..ed77a8aba
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/Organization.ts
@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+  note: string;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/ShortName.ts b/src/modules/01_metadataNew/interface/response/organization/ShortName.ts
new file mode 100644
index 000000000..89e6f98bd
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/ShortName.ts
@@ -0,0 +1,17 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  agencyCode: String;
+  governmentCode: String;
+  name: String;
+  note: string;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/Status.ts b/src/modules/01_metadataNew/interface/response/organization/Status.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/Status.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/TelExternal.ts b/src/modules/01_metadataNew/interface/response/organization/TelExternal.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/TelExternal.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/TelInternal.ts b/src/modules/01_metadataNew/interface/response/organization/TelInternal.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/TelInternal.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/organization/Type.ts b/src/modules/01_metadataNew/interface/response/organization/Type.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/organization/Type.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/person/Blood.ts b/src/modules/01_metadataNew/interface/response/person/Blood.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/person/Blood.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/person/District.ts b/src/modules/01_metadataNew/interface/response/person/District.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/person/District.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/person/Education.ts b/src/modules/01_metadataNew/interface/response/person/Education.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/person/Education.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/person/Gender.ts b/src/modules/01_metadataNew/interface/response/person/Gender.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/person/Gender.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/person/Prefix.ts b/src/modules/01_metadataNew/interface/response/person/Prefix.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/person/Prefix.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/person/Province.ts b/src/modules/01_metadataNew/interface/response/person/Province.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/person/Province.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/person/Relationship.ts b/src/modules/01_metadataNew/interface/response/person/Relationship.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/person/Relationship.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/person/Religion.ts b/src/modules/01_metadataNew/interface/response/person/Religion.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/person/Religion.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/person/SubDistrict.ts b/src/modules/01_metadataNew/interface/response/person/SubDistrict.ts
new file mode 100644
index 000000000..ca293df03
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/person/SubDistrict.ts
@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+  zipCode: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/position/Executive.ts b/src/modules/01_metadataNew/interface/response/position/Executive.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/position/Executive.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/position/ExecutiveSide.ts b/src/modules/01_metadataNew/interface/response/position/ExecutiveSide.ts
new file mode 100644
index 000000000..ed77a8aba
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/position/ExecutiveSide.ts
@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+  note: string;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/position/Level.ts b/src/modules/01_metadataNew/interface/response/position/Level.ts
new file mode 100644
index 000000000..caae21021
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/position/Level.ts
@@ -0,0 +1,16 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  level: number;
+  name: String;
+  shortName: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/position/Line.ts b/src/modules/01_metadataNew/interface/response/position/Line.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/position/Line.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/position/Path.ts b/src/modules/01_metadataNew/interface/response/position/Path.ts
new file mode 100644
index 000000000..ed77a8aba
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/position/Path.ts
@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+  note: string;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/position/PathSide.ts b/src/modules/01_metadataNew/interface/response/position/PathSide.ts
new file mode 100644
index 000000000..ed77a8aba
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/position/PathSide.ts
@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+  note: string;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/position/Status.ts b/src/modules/01_metadataNew/interface/response/position/Status.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/position/Status.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/position/Type.ts b/src/modules/01_metadataNew/interface/response/position/Type.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/position/Type.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/positionEmployee/Group.ts b/src/modules/01_metadataNew/interface/response/positionEmployee/Group.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/positionEmployee/Group.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/positionEmployee/Level.ts b/src/modules/01_metadataNew/interface/response/positionEmployee/Level.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/positionEmployee/Level.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/positionEmployee/Line.ts b/src/modules/01_metadataNew/interface/response/positionEmployee/Line.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/positionEmployee/Line.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/positionEmployee/Position.ts b/src/modules/01_metadataNew/interface/response/positionEmployee/Position.ts
new file mode 100644
index 000000000..ed77a8aba
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/positionEmployee/Position.ts
@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+  note: string;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/positionEmployee/PositionSide.ts b/src/modules/01_metadataNew/interface/response/positionEmployee/PositionSide.ts
new file mode 100644
index 000000000..ed77a8aba
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/positionEmployee/PositionSide.ts
@@ -0,0 +1,15 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+  note: string;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/interface/response/positionEmployee/Status.ts b/src/modules/01_metadataNew/interface/response/positionEmployee/Status.ts
new file mode 100644
index 000000000..a6fa6a978
--- /dev/null
+++ b/src/modules/01_metadataNew/interface/response/positionEmployee/Status.ts
@@ -0,0 +1,14 @@
+//ข้อมูล
+interface ResponseHistoryObject {
+  createdAt?: Date;
+  createdFullName: String;
+  createdUserId: String;
+  id: String;
+  isActive: Boolean;
+  lastUpdateFullName: String;
+  lastUpdateUserId: String;
+  lastUpdatedAt?: Date;
+  name: String;
+}
+
+export type { ResponseHistoryObject };
diff --git a/src/modules/01_metadataNew/router.ts b/src/modules/01_metadataNew/router.ts
index 06b030d8d..91cbaebff 100644
--- a/src/modules/01_metadataNew/router.ts
+++ b/src/modules/01_metadataNew/router.ts
@@ -1,6 +1,9 @@
 const calendarWorkPage = () =>
   import("@/modules/01_metadataNew/views/calendar.vue");
-const masterInsignia = () => import("@/modules/01_metadataNew/views/insignia.vue");
+const masterInsignia = () =>
+  import("@/modules/01_metadataNew/views/insignia.vue");
+const dateilInsignia = () =>
+  import("@/modules/01_metadataNew/components/insignia/InsigniaDetail.vue");
 
 export default [
   {
@@ -23,4 +26,14 @@ export default [
       Role: "metadata",
     },
   },
+  {
+    path: "/master-data/insignia/detail/:id",
+    name: "masterInsigniadetail",
+    component: dateilInsignia,
+    meta: {
+      Auth: true,
+      Key: [7],
+      Role: "metadata",
+    },
+  },
 ];
diff --git a/src/modules/01_metadataNew/stores/calendarStore.ts b/src/modules/01_metadataNew/stores/calendarStore.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/modules/01_metadataNew/views/calendar.vue b/src/modules/01_metadataNew/views/calendar.vue
index d6ff149b9..743ac8025 100644
--- a/src/modules/01_metadataNew/views/calendar.vue
+++ b/src/modules/01_metadataNew/views/calendar.vue
@@ -1,7 +1,108 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataSumCalendarObject } from "@/modules/01_metadataNew/interface/index/Calendar";
+
+import calendarComponent from "@/modules/01_metadataNew/components/calendar/calendarMain.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const $q = useQuasar();
+
+const { showLoader, hideLoader, messageError, genColor15 } = mixin;
+
+const listsSumCalendar = ref<DataSumCalendarObject[]>([]);
+const year = ref<number>(new Date().getFullYear());
+
+/** function เรียกข้อมูลสรุปวันหยุด */
+async function fetchDataSummaryCalendar() {
+  showLoader();
+  await http
+    .get(config.API.summaryHolidayHistoryYear(year.value))
+    .then((res) => {
+      let data = res.data.result;
+      listsSumCalendar.value = [];
+      data.map((e: DataSumCalendarObject) => {
+        listsSumCalendar.value.push({
+          id: e.id,
+          monthFull: e.monthFull,
+          count: e.count,
+          color: genColor15(e.id),
+        });
+      });
+    })
+    .catch(async (e) => {
+      // await defaultListsSumCalendar;
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(async () => {
+  await fetchDataSummaryCalendar();
+});
+</script>
 <template>
-  ข้อมูลปฏิทินวันหยุด
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลปฏิทินวันหยุด
+  </div>
+  <div class="row col-12 q-col-gutter-sm">
+    <div class="col-3">
+      <q-card bordered style="height: 100%">
+        <div class="text-grey-9 items-center q-pa-md">
+          <div class="row no-wrap items-center">
+            <div class="text-dark text-weight-medium q-pb-sm q-px-xs">
+              สรุปวันหยุดในแต่ละเดือนประจำปี
+              <span class="text-weight-bold text-primary q-pl-sm">
+                {{ year + 543 }}</span
+              >
+            </div>
+            <q-space />
+          </div>
+          <div class="col-12 row">
+            <div
+              class="col-xs-4 col-md-6 row q-pa-xs"
+              v-for="(list, index) in listsSumCalendar"
+              :key="index"
+            >
+              <q-card bordered class="col-12">
+                <div
+                  class="col-12 text-subtitle2 row q-px-sm items-center q-px-sm"
+                >
+                  <span :class="'text-weight-medium text-' + `${list.color}`">{{
+                    list.monthFull
+                  }}</span>
+                  <q-space />
+                  <q-badge
+                    color="white"
+                    :class="
+                      'text-weight-bold text-subtitle1 text-' + `${list.color}`
+                    "
+                    :label="list.count"
+                    rounded
+                  />
+                </div>
+              </q-card>
+            </div>
+          </div>
+        </div>
+      </q-card>
+    </div>
+    <div class="col-9">
+      <q-card bordered class="q-pa-md">
+        <calendarComponent
+          v-model:dateYear="year"
+          :fetchDataSummaryCalendar="fetchDataSummaryCalendar"
+        />
+      </q-card>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
-
 <style scoped></style>
diff --git a/src/modules/01_metadataNew/views/insignia.vue b/src/modules/01_metadataNew/views/insignia.vue
index 5d894837a..fa9e3ef1e 100644
--- a/src/modules/01_metadataNew/views/insignia.vue
+++ b/src/modules/01_metadataNew/views/insignia.vue
@@ -1,7 +1,12 @@
+<script setup lang="ts">
+import InsigniaType from "@/modules/01_metadataNew/components/insignia/InsigniaType.vue";
+</script>
 <template>
-  ข้อมูลเครื่องราชอิสริยาภรณ์
+  <div class="toptitle text-dark col-12 row items-center">
+    ข้อมูลเครื่องราชอิสริยาภรณ์
+  </div>
+
+  <q-card flat bordered> <InsigniaType /> </q-card>
 </template>
 
-<script setup lang="ts"></script>
-
-<style scoped></style>
\ No newline at end of file
+<style scoped></style>