diff --git a/src/modules/11_discipline/components/4_Order/MainPage.vue b/src/modules/11_discipline/components/4_Order/MainPage.vue
index 59ac80fd3..15dfede0a 100644
--- a/src/modules/11_discipline/components/4_Order/MainPage.vue
+++ b/src/modules/11_discipline/components/4_Order/MainPage.vue
@@ -3,23 +3,15 @@ import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import type { DataList, DataListRes } from "../../interface/response/order";
 
-// importStroe
 import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
-// importComponents
 import tableOrder from "@/modules/11_discipline/components/4_Order/TableOrder.vue";
 
 const router = useRouter();
 const OrderStore = useOrderStore();
 const { fetchOrder } = OrderStore; // function จาก stores
-
-// filter ข้อมูลใน table
 const filterTable = ref<string>("");
 
-onMounted(async () => {
-  await fetchListOrder();
-});
-
-// เรียกรายการคำสั่ง จาก API
+/** เรียกรายการคำสั่ง จาก API */
 async function fetchListOrder() {
   const listData: DataListRes[] = [
     {
@@ -50,10 +42,15 @@ async function fetchListOrder() {
   await fetchOrder(listData); // ส่งข้อมูลไปยัง stores
 }
 
-// redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย
+/** redirect ไปยังการเพิ่มออกคำสั่งลงโทษทางวินัย */
 function redirectToPageadd() {
   router.push(`/discipline-order/add`);
 }
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(async () => {
+  await fetchListOrder();
+});
 </script>
 
 <template>
@@ -71,10 +68,12 @@ function redirectToPageadd() {
           color="primary"
           icon="mdi-plus"
           @click="redirectToPageadd()"
-          ><q-tooltip>เพิ่มรายการออกคำสั่งลงโทษทางวินัย </q-tooltip></q-btn
         >
+          <q-tooltip>เพิ่มรายการออกคำสั่งลงโทษทางวินัย </q-tooltip>
+        </q-btn>
       </div>
       <q-space />
+
       <q-input
         class="col-xs-12 col-sm-3 col-md-2"
         for="inputFilterTable"
@@ -87,6 +86,7 @@ function redirectToPageadd() {
           <q-icon name="search" />
         </template>
       </q-input>
+
       <q-select
         for="selectVisibleColumns"
         class="col-xs-12 col-sm-3 col-md-2"
@@ -103,6 +103,7 @@ function redirectToPageadd() {
         options-cover
       />
     </div>
+    
     <div class="col-12">
       <tableOrder :filterTable="filterTable" />
     </div>
diff --git a/src/modules/11_discipline/components/4_Order/OrderPage.vue b/src/modules/11_discipline/components/4_Order/OrderPage.vue
index 8b691c503..06860e637 100644
--- a/src/modules/11_discipline/components/4_Order/OrderPage.vue
+++ b/src/modules/11_discipline/components/4_Order/OrderPage.vue
@@ -2,20 +2,21 @@
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 
-// import step
+/** import step */
 import step01 from "@/modules/11_discipline/components/4_Order/Step01.vue";
 import step02 from "@/modules/11_discipline/components/4_Order/Step02.vue";
 import step03 from "@/modules/11_discipline/components/4_Order/Step03.vue";
 
 const router = useRouter();
-
 const step = ref<number>(1);
-// nextStep
+
+/** nextStep */
 const nextStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value++;
 };
-// previousStep
+
+/** previousStep */
 const previousStep = async () => {
   localStorage.setItem("currentStep", step.value.toString());
   step.value--;
diff --git a/src/modules/11_discipline/components/4_Order/Step01.vue b/src/modules/11_discipline/components/4_Order/Step01.vue
index 105c4b9c8..b02bcc619 100644
--- a/src/modules/11_discipline/components/4_Order/Step01.vue
+++ b/src/modules/11_discipline/components/4_Order/Step01.vue
@@ -14,6 +14,8 @@ const mixin = useCounterMixin();
 const { date2Thai, dialogConfirm } = mixin;
 const $q = useQuasar();
 
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   next: {
     type: Function,
@@ -24,8 +26,8 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
-const next = () => props.next();
-// Options ต่างๆ
+
+/** Options ต่างๆ */
 const orderTypeOptions = ref<DataOption[]>([
   { id: "0", name: "ประเภทคำสั่ง 1" },
   { id: "1", name: "ประเภทคำสั่ง 2" },
@@ -41,7 +43,8 @@ const listInvestigationOptions = ref<DataOption[]>([
   { id: "1", name: "รายการสอบสวนความผิดทางวินัย 2" },
   { id: "2", name: "รายการสอบสวนความผิดทางวินัย 3" },
 ]);
-// ตัวแปรทั้งหมด
+
+/** ข้อมูล v-model ของฟอร์ม */
 const formData = reactive<FormData>({
   orderType: "",
   orderBy: "",
@@ -55,7 +58,7 @@ const formData = reactive<FormData>({
   mistakeDetail: "",
 });
 
-// validateForm
+/** ตัวแปร ref สำหรับแสดง validate */
 const orderTypeRef = ref<Object | null>(null);
 const orderByRef = ref<Object | null>(null);
 const listInvestigationRef = ref<Object | null>(null);
@@ -66,6 +69,8 @@ const dateRef = ref<Object | null>(null);
 const authorityPositionRef = ref<Object | null>(null);
 const subjectRef = ref<Object | null>(null);
 const mistakeDetailRef = ref<Object | null>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const myObjectRef: MyObjectRef = {
   orderType: orderTypeRef,
   orderBy: orderByRef,
@@ -78,6 +83,13 @@ const myObjectRef: MyObjectRef = {
   subject: subjectRef,
   mistakeDetail: mistakeDetailRef,
 };
+
+/**ฟังชั่น ไป step ต่อไป */
+function next() {
+  props.next();
+}
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function validateForm() {
   const hasError = [];
   for (const key in myObjectRef) {
@@ -96,6 +108,7 @@ function validateForm() {
   }
 }
 
+/** ฟังชั่น บันทึก */
 function onSubmit() {
   console.log(formData);
   dialogConfirm(
@@ -131,6 +144,7 @@ function onSubmit() {
             use-input
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           คำสั่งโดย
           <q-select
@@ -149,6 +163,7 @@ function onSubmit() {
             use-input
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           เลือกรายการสอบสวนความผิดทางวินัย
           <q-select
@@ -169,6 +184,7 @@ function onSubmit() {
             use-input
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           ผู้มีอำนาจลงนาม
           <q-input
@@ -182,6 +198,7 @@ function onSubmit() {
             lazy-rules
           />
         </div>
+
         <div class="row col-xs-7 col-sm-3">
           <div class="col-6">
             คำสั่งที่
@@ -197,6 +214,7 @@ function onSubmit() {
             >
             </q-input>
           </div>
+
           <label class="col-1 flex justify-center items-center text-bold"
             >/</label
           >
@@ -229,6 +247,7 @@ function onSubmit() {
             </datepicker>
           </div>
         </div>
+
         <div class="col-xs-5 col-sm-3">
           วันที่มีผลคำสั่ง
           <datepicker
@@ -270,6 +289,7 @@ function onSubmit() {
             </template>
           </datepicker>
         </div>
+
         <div class="col-xs-12 col-sm-6">
           ตำแหน่งผู้มีอำนาจลงนาม
           <q-input
@@ -283,6 +303,7 @@ function onSubmit() {
             lazy-rules
           />
         </div>
+
         <div class="col-xs-12 col-sm-6">
           คำสั่งเรื่อง
           <q-input
@@ -296,6 +317,7 @@ function onSubmit() {
             lazy-rules
           />
         </div>
+
         <div class="col-xs-12 col-sm-12">
           รายละเอียดการกระทำความผิด
           <q-input
diff --git a/src/modules/11_discipline/components/4_Order/Step02.vue b/src/modules/11_discipline/components/4_Order/Step02.vue
index a34136ed6..1eb6a7884 100644
--- a/src/modules/11_discipline/components/4_Order/Step02.vue
+++ b/src/modules/11_discipline/components/4_Order/Step02.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   next: {
     type: Function,
@@ -10,21 +12,25 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
-const next = () => props.next();
-const previous = () => props.previous();
+
 
 const name = ref<string>("");
 const lastname = ref<string>("");
 const age = ref<string>("");
 
+/** ตัวแปร ref สำหรับแสดง validate */
 const nameRef = ref<any>(null);
 const ageRef = ref<any>(null);
 const lastnameRef = ref<any>(null);
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const myObject: MyObject = {
   name: nameRef,
   lastname: lastnameRef,
   age: ageRef,
 };
+
+/** กำหนด type */
 interface MyObject {
   name: any;
   lastname: any;
@@ -32,6 +38,17 @@ interface MyObject {
   [key: string]: any;
 }
 
+/**ฟังชั่น ไป step ต่อไป */
+function next() {
+  props.next();
+}
+
+/**ฟังชั่น ไป step ก่อนหน้า */
+function previous() {
+  props.previous();
+}
+
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onSubmit() {
   const hasError = [];
   for (const key in myObject) {
@@ -63,6 +80,7 @@ function onSubmit() {
       lazy-rules
       :rules="[(val) => !!val || `${'Name and surname'}`]"
     />
+
     <q-input
       ref="lastnameRef"
       filled
@@ -71,6 +89,7 @@ function onSubmit() {
       lazy-rules
       :rules="[(val) => !!val || `${'lastname'}`]"
     />
+
     <q-input
       ref="ageRef"
       filled
@@ -94,6 +113,7 @@ function onSubmit() {
       @click="previous()"
       class="q-px-md"
     />
+    
     <q-btn
       dense
       unelevated
diff --git a/src/modules/11_discipline/components/4_Order/Step03.vue b/src/modules/11_discipline/components/4_Order/Step03.vue
index f3daddd87..aafc0680e 100644
--- a/src/modules/11_discipline/components/4_Order/Step03.vue
+++ b/src/modules/11_discipline/components/4_Order/Step03.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   next: {
     type: Function,
@@ -9,8 +11,11 @@ const props = defineProps({
     default: () => console.log("not function"),
   },
 });
-const next = () => props.next();
-const previous = () => props.previous();
+
+/**ฟังชั่น ไป step ก่อนหน้า */
+function previous() {
+  props.previous();
+}
 </script>
 
 <template>
diff --git a/src/modules/11_discipline/components/4_Order/TableOrder.vue b/src/modules/11_discipline/components/4_Order/TableOrder.vue
index 02ec83d2d..af1b6247a 100644
--- a/src/modules/11_discipline/components/4_Order/TableOrder.vue
+++ b/src/modules/11_discipline/components/4_Order/TableOrder.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-// importType
+/** importType */
 import type { QTableProps } from "quasar";
-// importStroe
+/** importStroe */
 import { useOrderStore } from "@/modules/11_discipline/store/OrderStore";
 
 const OrderStore = useOrderStore();
 
+/** รับ props มาจากหน้าหลัก */
 const props = defineProps({
   filterTable: {
     type: String,
@@ -14,6 +15,7 @@ const props = defineProps({
   },
 });
 
+/** ข้อมูลที่เเสดงใน คอลัม */
 const columns = ref<QTableProps["columns"]>([
   {
     name: "subject",
@@ -70,6 +72,8 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
+
+/** หัวตาราง */
 const visibleColumns = ref<string[]>([
   "subject",
   "ordernumber",
@@ -79,12 +83,13 @@ const visibleColumns = ref<string[]>([
   "statusorder",
 ]);
 
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
 onMounted(() => {
   OrderStore.columns = columns.value;
   OrderStore.visibleColumns = visibleColumns.value;
 });
 
-//pagination
+/** pagination */
 const pagination = ref({
   descending: true,
   page: 1,
diff --git a/src/modules/11_discipline/components/5_Report/DetailPage.vue b/src/modules/11_discipline/components/5_Report/DetailPage.vue
index 994a14b47..19fa79b52 100644
--- a/src/modules/11_discipline/components/5_Report/DetailPage.vue
+++ b/src/modules/11_discipline/components/5_Report/DetailPage.vue
@@ -9,14 +9,17 @@ import { useReportDataStore } from "@/modules/11_discipline/store/ReportStore";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+
 const date = ref<Date>();
 const dateEnd = ref<Date>();
 const route = useRoute();
 const typeReport = route.params.type.toString();
+
 const store = useReportDataStore();
 const mixin = useCounterMixin();
 const { messageError, showLoader, hideLoader, date2Thai } = mixin;
 const { filterFnOptionsType } = store;
+
 const $q = useQuasar();
 const ocSelect = ref<string>("");
 const government = ref<string>("");
@@ -25,18 +28,15 @@ const pdfSrc = ref<any>();
 const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const titleReport = ref<string>("");
-
-onMounted(async () => {
-  let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
-  report && (titleReport.value = report.name);
-});
-
 const splitterModel = ref(14);
-const backHistory = () => {
+
+/** กลับหน้าหลัก */
+function backHistory(){
   window.history.back();
 };
 
-const showDocument = (url: any) => {
+/** แสดงรายงาน */
+function showDocument(url: any){
   const pdfData = usePDF(url);
 
   setTimeout(() => {
@@ -44,16 +44,26 @@ const showDocument = (url: any) => {
     numOfPages.value = pdfData.pages.value;
   }, 1000);
 };
-const nextPage = () => {
+
+/** ไปหน้าต่อไปของรายงาน */
+function nextPage(){
   if (page.value < numOfPages.value) {
     page.value++;
   }
 };
-const backPage = () => {
+
+/** กลับหน้าก่อนหน้าของรายงาน */
+function backPage(){
   if (page.value !== 1) {
     page.value--;
   }
 };
+
+/** โหลดข้อมูลเมื่อเข้าหน้านี้ */
+onMounted(async () => {
+  let report = store.optionReport.find((e: DataOption) => e.id == typeReport);
+  report && (titleReport.value = report.name);
+});
 </script>
 <template>
   <div class="toptitle">
@@ -103,6 +113,7 @@ const backPage = () => {
                 </q-input>
               </template>
             </datepicker>
+
           </div>
           <div class="q-pl-xs">
             <datepicker
@@ -134,6 +145,7 @@ const backPage = () => {
                 </q-input>
               </template>
             </datepicker>
+
           </div>
           <q-space />
           <div class="q-py-xs">
@@ -143,6 +155,7 @@ const backPage = () => {
             </q-btn>
           </div>
         </q-toolbar>
+
         <q-toolbar
           v-if="typeReport > '1'"
           class="q-pa-sm bg-grey-2"
@@ -172,6 +185,7 @@ const backPage = () => {
                 </q-item>
               </template>
             </q-select>
+
           </div>
           <div class="q-pl-xs">
             <q-select
@@ -197,6 +211,7 @@ const backPage = () => {
                 </q-item>
               </template>
             </q-select>
+
           </div>
           <div v-if="typeReport > '2'" class="q-pl-xs">
             <q-select
@@ -222,6 +237,7 @@ const backPage = () => {
                 </q-item>
               </template>
             </q-select>
+
           </div>
         </q-toolbar>
         <q-splitter
@@ -249,6 +265,7 @@ const backPage = () => {
                     @click="backPage"
                     :disable="page == 1"
                   />
+
                 </div>
                 <div class="col-12 col-md-auto">
                   <div class="q-pa-md flex">
@@ -265,6 +282,7 @@ const backPage = () => {
                     @click="nextPage"
                     :disable="page === numOfPages"
                   />
+
                 </div>
               </div>
             </div>
@@ -289,6 +307,7 @@ const backPage = () => {
                     :disable="page == 1"
                   />
                 </div>
+
                 <div class="col-12 col-md-auto">
                   <div class="q-pa-md flex">
                     หน้าที่ {{ page }} จาก {{ numOfPages }}
diff --git a/src/modules/11_discipline/components/5_Report/MainPage.vue b/src/modules/11_discipline/components/5_Report/MainPage.vue
index 6fbf0a194..2a6c3bd91 100644
--- a/src/modules/11_discipline/components/5_Report/MainPage.vue
+++ b/src/modules/11_discipline/components/5_Report/MainPage.vue
@@ -4,9 +4,14 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 // const store = useInsigniaDataStore();
 
-const nextPage = (type: string, title: string) => {
+/**
+ * เข้าสู้หน้าของรายการ เเต่ละ ประเภท
+ * @param type ประเภท
+ * @param title ชื่อประเภท
+ */
+function nextPage(type: string, title: string) {
   router.push(`/discipline/report/${type}`);
-};
+}
 </script>
 
 <template>
@@ -18,12 +23,7 @@ const nextPage = (type: string, title: string) => {
       <div class="q-pa-md">
         <q-item
           clickable
-          @click="
-            nextPage(
-              '1',
-              'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี'
-            )
-          "
+          @click=" nextPage('1', 'รายงานเรื่องร้องเรียนแยกรายวัน รายเดือน รายปี') "
           dense
           class="hover-green"
         >
@@ -37,9 +37,7 @@ const nextPage = (type: string, title: string) => {
 
         <q-item
           clickable
-          @click="
-            nextPage('2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน')
-          "
+          @click=" nextPage( '2', 'รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน' ) "
           dense
           class="hover-green"
         >
@@ -47,13 +45,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร แยกตามหน่วยงาน
+            รายงานเรื่องร้องเรียนข้าราชการสามัญฯ ในสังกัดกรุงเทพมหานคร
+            แยกตามหน่วยงาน
           </q-item-section>
         </q-item>
 
         <q-item
           clickable
-          @click="nextPage('3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด')"
+          @click=" nextPage( '3', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด' ) "
           dense
           class="hover-green"
         >
@@ -61,12 +60,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย แยกตามลักษณะความผิด
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัย
+            แยกตามลักษณะความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')"
+          @click=" nextPage( '4', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
           dense
           class="hover-green"
         >
@@ -74,12 +75,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
+            รายงานรายชื่อข้าราชการสามัญฯ
+            ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('5', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด')"
+          @click=" nextPage( '5', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด' ) "
           dense
           class="hover-green"
         >
@@ -90,9 +93,10 @@ const nextPage = (type: string, title: string) => {
             รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดแยกตามระดับความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด')"
+          @click=" nextPage( '6', 'รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด' ) "
           dense
           class="hover-green"
         >
@@ -100,12 +104,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานรายชื่อข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
+            รายงานรายชื่อข้าราชการสามัญฯ
+            ที่กระทำความผิดทางวินัยแยกตามลักษณะความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด')"
+          @click=" nextPage( '7', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด' ) "
           dense
           class="hover-green"
         >
@@ -113,12 +119,14 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกลักษณะความผิด
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง
+            แยกลักษณะความผิด
           </q-item-section>
         </q-item>
+
         <q-item
           clickable
-          @click="nextPage('8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง')"
+          @click=" nextPage( '8', 'รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง' ) "
           dense
           class="hover-green"
         >
@@ -126,10 +134,10 @@ const nextPage = (type: string, title: string) => {
             <q-icon color="primary" name="mdi-file" size="xs" />
           </q-item-section>
           <q-item-section class="text-dark">
-            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง แยกตามตำแหน่ง
+            รายงานจำนวนข้าราชการสามัญฯ ที่กระทำความผิดทางวินัยแต่ยุติเรื่อง
+            แยกตามตำแหน่ง
           </q-item-section>
         </q-item>
-       
       </div>
     </q-card>
   </div>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue
index deb9e7fff..cebcc943b 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Channel/AddPage.vue
@@ -5,6 +5,9 @@ import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
 
+/**
+ * รวมตัวแปร
+ */
 const mixin = useCounterMixin();
 const {
   date2Thai,
@@ -22,23 +25,36 @@ const myForm = ref<QForm | null>(null); //form data input
 const edit = ref<boolean>(false);
 const channel = ref<string>("");
 
+/**
+ * เรียกข้อมูลจากรายการ
+ */
 onMounted(async () => {});
-// เรียกข้อมูลของรอบการเสนอขอ
 const fetchData = async () => {};
 
+/**
+ * ลบข้อมูล
+ * @param id ไอดีของข้อมูลที่ต้องการลบ
+ */
 const deleteData = async (id: string) => {};
 
-// แก้ไขข้อมูล
-
-// คลิกบันทึก
-const checkSave = () => {};
-// บันทึกข้อมูล
+/* บันทึกข้อมูล**/
 const SaveData = async () => {};
-// เพิ่มข้อมูลรอบการเสนอขอพระราชทานเครื่องราชฯ
+const checkSave = () => {};
+
+/**
+ * เพิ่มข้อมูล
+ */
 const addData = async () => {};
-// แก้ไขข้อมูล
+
+/**
+ * แก้ไขข้อมูล
+ * @param id ช่องทาง
+ */
 const editData = async (id: string) => {};
 
+/**
+ * ย้อนกลับหน้ารายการ
+ */
 const clickBack = () => {
   router.push(`/discipline/channel`);
 };
@@ -81,12 +97,7 @@ const clickBack = () => {
           <q-separator />
           <div class="row col-12 q-pa-sm">
             <q-space />
-            <q-btn
-              label="บันทึก"
-              color="public"
-              @click="checkSave"
-            >
-            </q-btn>
+            <q-btn label="บันทึก" color="public" @click="checkSave"> </q-btn>
           </div>
         </q-card>
       </div>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
index 84b7eecdd..0b522a275 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Channel/MainPage.vue
@@ -5,15 +5,17 @@ import router from "@/router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useDisciplineChannelDataStore } from "@/modules/11_discipline/store/ChannelStore";
-
 import config from "@/app.config";
 import http from "@/plugins/http";
 
+const dataStore = useDisciplineChannelDataStore();
 const mixin = useCounterMixin();
 const { dialogRemove } = mixin;
 const $q = useQuasar(); //ใช้ noti quasar
 
-// ค้นหาในตาราง
+/**
+ * ค้นหาในตาราง
+ */
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 const resetFilter = () => {
@@ -22,7 +24,10 @@ const resetFilter = () => {
     filterRef.value.focus();
   }
 };
-const dataStore = useDisciplineChannelDataStore();
+
+/**
+ *pagination ของตาราง
+ */
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
@@ -30,10 +35,17 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
+/**
+ * clickไปหน้าเพิ่มchanel
+ */
 const clickAdd = () => {
   router.push(`/discipline/channel/add`);
 };
 
+/**
+ * ลบข้อมู,
+ * @param id ไอดีของข้อมูล
+ */
 const clickDelete = (id: string) => {
   dialogRemove(
     $q,
@@ -46,6 +58,9 @@ const clickDelete = (id: string) => {
   );
 };
 
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
 onMounted(() => {
   // get ข้อมูลแล้วโยนใส่ store
   dataStore.fetchData([
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
index 1b213644c..abdd17932 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/AddPage.vue
@@ -1,34 +1,34 @@
 <script setup lang="ts">
-import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue"
+import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 
 const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  success,
-} = mixin;
-
+const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
 const router = useRouter();
 
-// บันทึกข้อมูล
+/** บันทึกข้อมูลเเละ route กลับหน้าหลัก */
 const onSubmit = async () => {
   // post
-  router.push(`/discipline/director`)
+  router.push(`/discipline/director`);
 };
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle col-12 row items-center">
-      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
-        @click="$router.push(`/discipline/director`)" />
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="$router.push(`/discipline/director`)"
+      />
       เพิ่มรายชื่อกรรมการ
     </div>
 
     <Form :on-submit="onSubmit" />
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue
index a28ba42a2..f940eba04 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/EditPage.vue
@@ -1,22 +1,22 @@
 <script setup lang="ts">
 import { onMounted, reactive } from "vue";
-import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue"
+import Form from "@/modules/11_discipline/components/6_BasicInformation/Director/Form.vue";
 import type { FormData } from "@/modules/11_discipline/interface/request/director";
 import { useCounterMixin } from "@/stores/mixin";
-const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  success,
-} = mixin;
 
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader, dialogConfirm, success } = mixin;
+
+/**เมื่อเริ่มโหลดหน้า
+ * เรียกใช้งาน fetchData เพื่อดึงข้อมูล
+ */
 onMounted(() => {
-  fetchData()
+  fetchData();
 });
 
-// get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+/**
+ * get ข้อมูลเก่ากรณีแก้ไขข้อมูล
+ */
 const data = reactive<FormData>({
   prefix: "",
   firstname: "",
@@ -25,32 +25,45 @@ const data = reactive<FormData>({
   phone: "",
   responsibilities: "",
   email: "",
-})
+});
+
+/**
+ * ดึงค่าจาก api
+ */
 const fetchData = async () => {
-  // ดึงค่าจาก api
-  data.prefix = "นาง"
-  data.firstname = "เกสินี"
-  data.lastname = "เจียรสุมัย"
-  data.position = "ครู"
-  data.phone = "0800808080"
-  data.responsibilities = "ประธาน"
-  data.email = "e@email.com"
+  data.prefix = "นาง";
+  data.firstname = "เกสินี";
+  data.lastname = "เจียรสุมัย";
+  data.position = "ครู";
+  data.phone = "0800808080";
+  data.responsibilities = "ประธาน";
+  data.email = "e@email.com";
 };
 
-// แก้ไขข้อมูล
+/**
+ * บันทึกข้อมูลที่เเก้ไข
+ * @param id ระบุ บุคคล
+ */
 const onSubmit = async (id: string) => {
-   // put
+  // put
 };
 </script>
 <template>
   <div class="col-xs-12 col-sm-12 col-md-11">
     <div class="toptitle col-12 row items-center">
-      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
-        @click="$router.push(`/discipline/director`)" />
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="$router.push(`/discipline/director`)"
+      />
       แก้ไขรายชื่อกรรมการ
     </div>
 
     <Form @onSubmit="onSubmit" :data="data" />
-
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
index f670ac922..1a327ccf4 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/Form.vue
@@ -5,7 +5,9 @@ import type {
   FormRef,
 } from "@/modules/11_discipline/interface/request/director";
 
-// รับ props มาจาก page หลัก
+/**
+ * รับ props มาจาก page หลัก
+ */
 const props = defineProps({
   data: {
     type: Object,
@@ -17,11 +19,16 @@ const props = defineProps({
   },
 });
 
-// ข้อมูลรหัสบัตรประชาชน
+/**
+ * ข้อมูลรหัสบัตรประชาชน
+ */
+//
 const idCard = ref<string>("");
 const idCardRef = ref<any>(null);
 
-// ข้อมูลทั้งก้อน form
+/**
+ * ข้อมูลทั้งก้อน form
+ */
 const formData = reactive<FormData>({
   prefix: "",
   firstname: "",
@@ -29,8 +36,14 @@ const formData = reactive<FormData>({
   position: "",
   phone: "",
   email: "",
+  responsibilities: "",
 });
 
+/**
+ * เช็คข้อมูลจาก props
+ * เมื่อมีข้อมูล
+ * เก็บข้อมูลลง formData
+ */
 watch(props.data, async () => {
   // console.log("data==>", props.data)
   formData.prefix = props.data.prefix;
@@ -41,14 +54,18 @@ watch(props.data, async () => {
   formData.email = props.data.email;
 });
 
-// เพิ่มบุคลากร
+/**
+ * เพิ่มบุคลากร
+ */
 function addEmployee() {
   if (idCardRef.value.validate()) {
     console.log("idCard===>", idCard.value);
   }
 }
 
-// ตรวจสอบข้อมูลก่อนส่งไปยัง api
+/**
+ * ตรวจสอบข้อมูลก่อนส่งไปยัง api
+ */
 const prefixRef = ref<object | null>(null);
 const firstnameRef = ref<object | null>(null);
 const lastnameRef = ref<object | null>(null);
@@ -64,6 +81,7 @@ const formRef: FormRef = {
   email: emailRef,
 };
 
+/** ฟังชั่นตรวจสอบความถูกต้องก่อน บันทึก */
 function onValidate() {
   const hasError = [];
   for (const key in formRef) {
@@ -81,13 +99,19 @@ function onValidate() {
 }
 </script>
 <template>
-<form @submit.prevent.stop="onValidate">
+  <form @submit.prevent.stop="onValidate">
     <q-card bordered>
       <div class="col-12 row q-pa-md">
         <div class="row q-col-gutter-md">
           <div class="row col-12" v-if="data === null">
-            <q-card bordered class="row col-12" style="border:1px solid #d6dee1;">
-              <div class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
+            <q-card
+              bordered
+              class="row col-12"
+              style="border: 1px solid #d6dee1"
+            >
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+              >
                 ค้นหาบุคคลากรที่อยู่ในระบบ
               </div>
               <div class="col-12"><q-separator /></div>
@@ -192,18 +216,18 @@ function onValidate() {
           </div>
         </div>
       </div>
-    <q-separator />
-    <div class="row col-12 q-pa-sm">
-      <q-space />
-      <q-btn
-        for="ButtonOnSubmit"
-        id="formSubmit"
-        color="secondary"
-        label="บันทึก"
-        type="submit"
-        ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
-      >
-    </div>
-  </q-card>
-</form>
+      <q-separator />
+      <div class="row col-12 q-pa-sm">
+        <q-space />
+        <q-btn
+          for="ButtonOnSubmit"
+          id="formSubmit"
+          color="secondary"
+          label="บันทึก"
+          type="submit"
+          ><q-tooltip>บับทึกข้อมูล</q-tooltip></q-btn
+        >
+      </div>
+    </q-card>
+  </form>
 </template>
diff --git a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
index 80cf5442e..e63634fd0 100644
--- a/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
+++ b/src/modules/11_discipline/components/6_BasicInformation/Director/MainPage.vue
@@ -4,22 +4,19 @@ import type { QTableProps } from "quasar";
 import router from "@/router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
-import { useDisciplineDirectorDataStore } from '@/modules/11_discipline/store/DirectorStore'
-
+import { useDisciplineDirectorDataStore } from "@/modules/11_discipline/store/DirectorStore";
 import config from "@/app.config";
 import http from "@/plugins/http";
 
 const $q = useQuasar();
-const dataStore = useDisciplineDirectorDataStore()
+const dataStore = useDisciplineDirectorDataStore();
 const mixin = useCounterMixin();
-const {
-  messageError,
-  showLoader,
-  hideLoader,
-  dialogConfirm,
-  dialogRemove,
-} = mixin;
+const { messageError, showLoader, hideLoader, dialogConfirm, dialogRemove } =
+  mixin;
 
+/**เมื่อเริ่มโหลดหน้า
+ * ส่งข้อมูลจำลองไปยัง store
+ */
 onMounted(() => {
   // get ข้อมูลแล้วโยนใส่ store
   dataStore.fetchData([
@@ -35,10 +32,12 @@ onMounted(() => {
       email: "g@gmail.com",
       phone: "0614565145",
     },
-  ])
+  ]);
 });
 
-// ค้นหาในตาราง
+/**
+ * ค้นหาในตาราง
+ */
 const filterKeyword = ref<string>("");
 const filterRef = ref<HTMLInputElement | null>(null);
 function resetFilter() {
@@ -46,9 +45,11 @@ function resetFilter() {
   if (filterRef.value) {
     filterRef.value.focus();
   }
-};
+}
 
-// กำหนด pagination
+/**
+ *pagination ของตาราง
+ */
 const pagination = ref({
   // sortBy: "desc",
   descending: false,
@@ -56,84 +57,138 @@ const pagination = ref({
   rowsPerPage: 25,
 });
 
+/**
+ * ลบข้อมูล
+ * @param id ของกรรมการแต่ละบุคคล
+ */
 function clickDelete(id: string) {
-  dialogRemove(
-    $q,
-    async () => {
-      // ยืนยันการลบข้อมูล
-      //   showLoader();
-      //   await http
-      //     .delete(config.API.periodExamId(id))
-      //     .then((res) => {
-      //       success($q, "ลบข้อมูลสำเร็จ");
-      //     })
-      //     .catch((e) => {
-      //       messageError($q, e);
-      //     })
-      //     .finally(async () => {
-      //       hideLoader();
-      //     });
-    }
-  );
-};
+  dialogRemove($q, async () => {
+    // ยืนยันการลบข้อมูล
+    //   showLoader();
+    //   await http
+    //     .delete(config.API.periodExamId(id))
+    //     .then((res) => {
+    //       success($q, "ลบข้อมูลสำเร็จ");
+    //     })
+    //     .catch((e) => {
+    //       messageError($q, e);
+    //     })
+    //     .finally(async () => {
+    //       hideLoader();
+    //     });
+  });
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     รายการชื่อกรรมการ
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-      <div class="row col-12 q-col-gutter-sm  q-mb-sm">
-        <div>
-          <q-btn @click="$router.push(`/discipline/director/add`)" size="12px" flat round color="add" icon="mdi-plus">
-            <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
-          </q-btn>
-        </div>
-        <q-space />
-
-        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
-          debounce="300" placeholder="ค้นหา">
-          <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
-          </template>
-        </q-input>
-
-        <q-select v-model="dataStore.visibleColumns" multiple outlined dense options-dense
-          :display-value="$q.lang.table.columns" emit-value map-options :options="dataStore.columns" option-value="name"
-          options-cover style="min-width: 150px" class="col-xs-12 col-sm-3 col-md-2" />
+    <div class="row col-12 q-col-gutter-sm q-mb-sm">
+      <div>
+        <q-btn
+          @click="$router.push(`/discipline/director/add`)"
+          size="12px"
+          flat
+          round
+          color="add"
+          icon="mdi-plus"
+        >
+          <q-tooltip>เพิ่มรายชื่อกรรมการ</q-tooltip>
+        </q-btn>
       </div>
+      <q-space />
 
-      <div class="col-12">
-        <d-table :columns="dataStore.columns" :rows="dataStore.rows" :filter="filterKeyword" row-key="tb-list" flat
-          bordered :paging="true" dense v-model:pagination="pagination" :visible-columns="dataStore.visibleColumns">
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props"
-                @click="$router.push(`/discipline/director/${props.row.no}`)">
-                <div v-if="col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
-                </div>
-                <div v-else>
-                  {{ col.value }}
-                </div>
-              </q-td>
-              <q-td auto-width>
-                <q-btn dense size="12px" flat round color="red" @click="clickDelete(props.row.id)" icon="mdi-delete">
-                  <q-tooltip>ลบข้อมูล</q-tooltip>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
+      <q-input
+        class="col-xs-12 col-sm-3 col-md-2"
+        standout
+        dense
+        v-model="filterKeyword"
+        ref="filterRef"
+        outlined
+        debounce="300"
+        placeholder="ค้นหา"
+      >
+        <template v-slot:append>
+          <q-icon v-if="filterKeyword == ''" name="search" />
+          <q-icon
+            v-if="filterKeyword !== ''"
+            name="clear"
+            class="cursor-pointer"
+            @click="resetFilter"
+          />
+        </template>
+      </q-input>
 
-      </div>
+      <q-select
+        v-model="dataStore.visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="dataStore.columns"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+        class="col-xs-12 col-sm-3 col-md-2"
+      />
+    </div>
+
+    <div class="col-12">
+      <d-table
+        :columns="dataStore.columns"
+        :rows="dataStore.rows"
+        :filter="filterKeyword"
+        row-key="tb-list"
+        flat
+        bordered
+        :paging="true"
+        dense
+        v-model:pagination="pagination"
+        :visible-columns="dataStore.visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              @click="$router.push(`/discipline/director/${props.row.no}`)"
+            >
+              <div v-if="col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ col.value }}
+              </div>
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                dense
+                size="12px"
+                flat
+                round
+                color="red"
+                @click="clickDelete(props.row.id)"
+                icon="mdi-delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
   </q-card>
-</template>
\ No newline at end of file
+</template>