diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index f2f8f34bb..d8aad98b3 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -195,6 +195,7 @@ export default {
 
   orgAssistance: (id: string) => `${orgProfile}/assistance/${id}`,
 
+  orgIssues: `${organization}/issues`,
   // active รักษาการในตำแหน่งตามหน่วยงาน
   activeActPosition: (id: string) => `${orgPosAct}/${id}`,
 };
diff --git a/src/components/Dialogs/DialogDebug.vue b/src/components/Dialogs/DialogDebug.vue
new file mode 100644
index 000000000..917151c0e
--- /dev/null
+++ b/src/components/Dialogs/DialogDebug.vue
@@ -0,0 +1,410 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from "vue";
+import { useQuasar } from "quasar";
+import axios from "axios";
+import { storeToRefs } from "pinia";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { usePositionKeycloakStore } from "@/stores/positionKeycloak";
+import { useMenuDataStore } from "@/stores/menuList";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = usePositionKeycloakStore();
+const { dataPositionKeycloak } = storeToRefs(store);
+const { findOrgName } = store;
+
+const { menuList } = storeToRefs(useMenuDataStore());
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+const modal = defineModel<boolean>("modal", {
+  default: false,
+});
+
+const title = computed(() => "แจ้งปัญหาการใช้งานระบบ");
+const orgName = computed(() => findOrgName(dataPositionKeycloak.value) || "");
+const optionData = computed(() => {
+  return menuList.value.map((menu) => ({
+    label: menu.sysName,
+    value: menu.sysName,
+    disable: menu?.children?.length === 0 ? false : true,
+    children: menu?.children?.map((subMenu) => ({
+      label: subMenu.sysName,
+      value: `${menu.sysName}/${subMenu.sysName}`,
+    })),
+  }));
+});
+
+const menuSelect = ref();
+const optionsMenu = ref(optionData.value);
+const formData = reactive({
+  title: "",
+  description: "",
+  system: "mgt",
+  fileAttachments: [] as File[],
+  menu: "",
+  email: "",
+  phone: "",
+});
+
+/** ฟังก์ชันบันทึกข้อมูล */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    try {
+      showLoader();
+      const payload = {
+        title: formData.title,
+        description: formData.description,
+        system: formData.system,
+        menu: formData.menu,
+        org: orgName.value,
+        email: formData.email,
+        phone: formData.phone,
+      };
+
+      const res = await http.post(config.API.orgIssues, payload);
+
+      const issueCode = res.data.result.codeIssue;
+      await uploadProfile(issueCode);
+      success($q, "บันทึกข้อมูลเรียบร้อย");
+
+      onClose();
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/**
+ * ฟังก์ชันเพิ่มไฟล์
+ * @param files ไฟล์ที่ต้องการเพิ่ม
+ */
+async function onAddfile(files: any) {
+  files.forEach((file: any) => {
+    formData.fileAttachments.push(file);
+  });
+}
+
+/**
+ * ฟังก์ชันลบไฟล์
+ * @param files ไฟล์ที่ต้องการลบ
+ */
+async function onRemoveFile(files: any) {
+  files.forEach((file: any) => {
+    const index = formData.fileAttachments.findIndex(
+      (x: any) => x.__key == file.__key
+    );
+    if (index > -1) {
+      formData.fileAttachments.splice(index, 1);
+    }
+  });
+}
+
+/**
+ * ฟังก์ชันสร้าง url อัปโหลดไฟล์
+ * @param code รหัส issue
+ */
+async function uploadProfile(code: string) {
+  if (formData.fileAttachments.length === 0) {
+    return;
+  }
+  try {
+    const fileName = formData.fileAttachments.map((file) => ({
+      fileName: file.name,
+    }));
+    const res = await http.post(
+      config.API.file("issueAttachments", formData.system, code),
+      {
+        replace: false,
+        fileList: fileName,
+      }
+    );
+
+    for (const file of formData.fileAttachments) {
+      const fileInfo = res.data[file.name];
+      if (fileInfo && fileInfo.uploadUrl) {
+        await uploadFileDoc(fileInfo.uploadUrl, file);
+      }
+    }
+  } catch (e) {
+    messageError($q, e);
+  }
+}
+
+/**
+ * ฟังก์ชันอัปโหลดไฟล์เอกสาร
+ * @param uploadUrl ลิงก์อัปโหลดไฟล์
+ * @param file ไฟล์ที่ต้องการอัปโหลด
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  try {
+    await axios.put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    });
+  } catch (e) {
+    messageError($q, e);
+  }
+}
+
+/**
+ * ฟังก์ชันกรองข้อมูลใน select
+ * @param val ค่าที่กรอง
+ * @param update ฟังก์ชันอัปเดตค่าหลังกรอง
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    if (!val) {
+      optionsMenu.value = optionData.value;
+      return;
+    }
+    optionsMenu.value = optionData.value
+      .map((parent: any) => {
+        const matchParent = parent.label.indexOf(val) > -1;
+
+        const filteredChildren = (parent.children || []).filter(
+          (child: any) => child.label.indexOf(val) > -1
+        );
+        if (matchParent) {
+          return { ...parent };
+        } else if (filteredChildren.length > 0) {
+          return { ...parent, children: filteredChildren };
+        }
+
+        return null;
+      })
+      .filter((item: any) => item !== null);
+  });
+}
+
+/** ฟังก์ชันปิด dialog และรีเซ็ตข้อมูล */
+function onClose() {
+  modal.value = false;
+  formData.menu = "";
+  formData.title = "";
+  formData.description = "";
+  formData.fileAttachments = [];
+  formData.email = "";
+  formData.phone = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="title" :close="onClose" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row col q-col-gutter-md">
+            <div class="col-12">
+              <q-select
+                ref="menuSelect"
+                dense
+                outlined
+                label="ระบบ"
+                v-model="formData.menu"
+                :options="optionsMenu"
+                class="inputgreen"
+                :rules="[ (val: string) => !!val || 'กรุณาเลือกระบบ' ]"
+                hide-bottom-space
+                emit-value
+                map-options
+                use-input
+                @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 
+              )"
+              >
+                <template v-slot:option="scope">
+                  <q-item v-bind="scope.itemProps">
+                    <q-item-section>
+                      <q-item-label>{{ scope.opt.label }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-list v-if="scope.opt.children">
+                    <q-item
+                      v-for="child in scope.opt.children"
+                      :key="child.value"
+                      clickable
+                      @click.stop="
+                        formData.menu = child.value;
+                        menuSelect.hidePopup();
+                      "
+                    >
+                      <q-item-section class="q-ml-md">
+                        {{ child.label }}
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </template>
+              </q-select>
+            </div>
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                label="หัวข้อปัญหา"
+                v-model="formData.title"
+                class="inputgreen"
+                :rules="[ (val: string) => !!val || 'กรุณากรอกหัวข้อปัญหา' ]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                dense
+                outlined
+                type="textarea"
+                label="รายละเอียดปัญหา"
+                v-model="formData.description"
+                class="inputgreen"
+                :rules="[ (val: string) => !!val || 'กรุณากรอกรายละเอียดปัญหา' ]"
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-12">
+              <q-uploader
+                color="gray"
+                type="file"
+                flat
+                ref="uploader"
+                class="full-width"
+                text-color="dark"
+                accept=".jpg,.png,.pdf,.csv,.doc"
+                bordered
+                label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 5MB]"
+                multiple
+                max-file-size="5000000"
+                @added="onAddfile"
+                @removed="onRemoveFile"
+              >
+                <template v-slot:header="scope">
+                  <div
+                    class="row no-wrap items-center q-pa-sm q-gutter-xs text-white"
+                  >
+                    <q-btn
+                      v-if="scope.queuedFiles.length > 0"
+                      icon="clear_all"
+                      @click="scope.removeQueuedFiles"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-tooltip>ลบทั้งหมด</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="scope.uploadedFiles.length > 0"
+                      icon="done_all"
+                      @click="scope.removeUploadedFiles"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+                    </q-btn>
+                    <q-spinner
+                      v-if="scope.isUploading"
+                      class="q-uploader__spinner"
+                    />
+                    <div class="col">
+                      <div class="q-uploader__title">
+                        {{ "[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 5MB]" }}
+                      </div>
+                      <div class="q-uploader__subtitle">
+                        {{ scope.uploadSizeLabel }}
+                        /
+                        {{ scope.uploadProgressLabel }}
+                      </div>
+                    </div>
+                    <q-btn
+                      v-if="scope.canAddFiles"
+                      type="a"
+                      icon="add_box"
+                      @click="scope.pickFiles"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-uploader-add-trigger />
+                      <q-tooltip>เลือกไฟล์</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="scope.isUploading"
+                      icon="clear"
+                      @click="scope.abort"
+                      round
+                      dense
+                      flat
+                    >
+                      <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+                    </q-btn>
+                  </div>
+                </template>
+              </q-uploader>
+            </div>
+
+            <div class="col-12">
+              <div class="row col-12 q-col-gutter-sm">
+                <div class="col-xs-12 col-md-6 col-lg-6">
+                  <q-input
+                    dense
+                    outlined
+                    label="อีเมลติดต่อกลับ"
+                    v-model="formData.email"
+                    class="inputgreen"
+                    hide-bottom-space
+                    :rules="[
+                      () =>
+                        !!formData.email ||
+                        !!formData.phone ||
+                        'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
+                    ]"
+                  />
+                </div>
+                <div class="col-xs-12 col-md-6 col-lg-6">
+                  <q-input
+                    dense
+                    outlined
+                    label="เบอร์โทรติดต่อกลับ"
+                    v-model="formData.phone"
+                    class="inputgreen"
+                    hide-bottom-space
+                    :rules="[
+                      () =>
+                        !!formData.email ||
+                        !!formData.phone ||
+                        'กรุณากรอกอีเมลหรือเบอร์โทรติดต่อกลับ',
+                    ]"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            type="submit"
+            for="#submitForm"
+            class="q-px-md items-center"
+            color="public"
+            label="บันทึก"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
index f1bf0ea9e..c78b7e914 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/05_ActingPos.vue
@@ -40,6 +40,9 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
+const citizenId = defineModel<string>("citizenId", {
+  required: true,
+});
 
 const baseColumns = ref<QTableColumn[]>([
   {
@@ -614,7 +617,7 @@ onMounted(() => {
                 disable
                 v-model="formData.status"
                 label="ใช้งาน"
-                keep-color="primary"
+                keep-color
               />
             </div>
           </div>
@@ -642,6 +645,7 @@ onMounted(() => {
     v-model:modal="modalCommand"
     v-model:command="command"
     v-model:command-id="commandId"
+    :citizen-id="citizenId"
   />
 </template>
 
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue
index 9d4b16405..47eba38f8 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/06_HelpGovernment.vue
@@ -46,6 +46,9 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
+const citizenId = defineModel<string>("citizenId", {
+  required: true,
+});
 
 const baseColumns = ref<QTableColumn[]>([
   {
@@ -977,6 +980,7 @@ onMounted(() => {
     v-model:modal="modalCommand"
     v-model:command="command"
     v-model:command-id="commandId"
+    :citizen-id="citizenId"
   />
 </template>
 
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
index 25f62fdd2..33d3c77ee 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/07_Position.vue
@@ -39,6 +39,9 @@ const profileId = ref<string>(
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
+const citizenId = defineModel<string>("citizenId", {
+  required: true,
+});
 
 const store = useGovernmentPosDataStore();
 const {
@@ -1621,6 +1624,7 @@ onMounted(async () => {
     v-model:modal="modalCommand"
     v-model:command="command"
     v-model:commandId="commandId"
+    :citizen-id="citizenId"
   />
 </template>
 
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
index 02b9aaac8..da7af1456 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue
@@ -65,13 +65,22 @@ const storeRegistry = useRegistryNewDataStore();
       <PerformSpecialWork :is-leave="storeRegistry.isLeave" />
     </q-tab-panel>
     <q-tab-panel v-if="empType != '-employee'" name="5">
-      <ActingPos :is-leave="storeRegistry.isLeave" />
+      <ActingPos
+        :is-leave="storeRegistry.isLeave"
+        :citizen-id="storeRegistry.citizenId"
+      />
     </q-tab-panel>
     <q-tab-panel v-if="empType != '-employee'" name="6">
-      <HelpGovernmentDetail :is-leave="storeRegistry.isLeave" />
+      <HelpGovernmentDetail
+        :is-leave="storeRegistry.isLeave"
+        :citizen-id="storeRegistry.citizenId"
+      />
     </q-tab-panel>
     <q-tab-panel name="7">
-      <Postion :is-leave="storeRegistry.isLeave" />
+      <Postion
+        :is-leave="storeRegistry.isLeave"
+        :citizen-id="storeRegistry.citizenId"
+      />
     </q-tab-panel>
   </q-tab-panels>
 </template>
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
index fb02b6d92..3a7105c70 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
@@ -39,6 +39,9 @@ const profileId = ref<string>(
 const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
+const citizenId = defineModel<string>("citizenId", {
+  required: true,
+});
 
 const store = useSalaryDataStore();
 const {
@@ -1624,6 +1627,7 @@ onMounted(async () => {
     v-model:modal="modalCommand"
     v-model:command="command"
     v-model:commandId="commandId"
+    :citizen-id="citizenId"
   />
 </template>
 
diff --git a/src/modules/04_registryPerson/components/detail/Salary/Main.vue b/src/modules/04_registryPerson/components/detail/Salary/Main.vue
index a78286a65..f0646d650 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/Main.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/Main.vue
@@ -45,7 +45,10 @@ const tab = ref<string>("1");
 
   <q-tab-panels v-model="tab" animated>
     <q-tab-panel name="1">
-      <PositionSalary :is-leave="storeRegistry.isLeave" />
+      <PositionSalary
+        :is-leave="storeRegistry.isLeave"
+        :citizen-id="storeRegistry.citizenId"
+      />
     </q-tab-panel>
     <q-tab-panel name="2">
       <NotReceiveSalary :is-leave="storeRegistry.isLeave" />
diff --git a/src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue b/src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue
index 8751cfbf6..17fde57a0 100644
--- a/src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue
+++ b/src/modules/04_registryPerson/components/requestEdit/Page01_Detail.vue
@@ -553,12 +553,17 @@ onMounted(async () => {
           </q-form>
 
           <div class="col-12">
+            {{ typeEmp }}
+            <!-- v-if="typeEmp != 'employee'" -->
             <Workflow
-              v-if="typeEmp != 'employee'"
               v-model:is-check-data="isCheckData"
               ref="workflowRef"
               :id="requestId"
-              sys-name="REGISTRY_PROFILE"
+              :sys-name="
+                typeEmp !== 'employee'
+                  ? 'REGISTRY_PROFILE'
+                  : 'REGISTRY_PROFILE_EMP'
+              "
             />
           </div>
         </div>
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 1f6c782f3..3e2038712 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -53,6 +53,7 @@ const props = defineProps({
 const modalCommand = ref<boolean>(false);
 const command = ref<string>("");
 const commandId = ref<string>("");
+const commandCitizenId = ref<string>("");
 
 let roleAdmin = ref<boolean>(false);
 const edit = ref<boolean>(true);
@@ -912,9 +913,10 @@ function onSearchAdd() {
 }
 
 function onRefCommand(data: any) {
-  modalCommand.value = true;
   command.value = data.refCommandNo;
   commandId.value = data.commandId;
+  commandCitizenId.value = data.citizenId;
+  modalCommand.value = true;
   // commandId.value = 'bdf9da91-ba45-497a-a2b7-cc49e2446d97'; //จำลอง
 }
 
@@ -1787,6 +1789,7 @@ onMounted(async () => {
     v-model:modal="modalCommand"
     v-model:command="command"
     v-model:commandId="commandId"
+    v-model:citizen-id="commandCitizenId"
   />
 </template>
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index 67d3b260e..8f3501946 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -130,7 +130,7 @@ async function fectFormfull() {
   evaluate_expenct_level.value = await probationStore.assignOutput.map(
     (e: any) => ({
       id: e.id,
-      labal: e.output_desc,
+      label: e.output_desc,
     })
   );
   evaluate_ouptut.value = await probationStore.assignOutput.map((e: any) => ({
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
index b2408b3b5..13141b464 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
@@ -122,7 +122,7 @@ const variablesToWatch = [
   competency_level,
   learn_level,
   apply_level,
-  success_level,
+  // success_level,
 ];
 const ArrayCountbotton = [orientation, self_learning, training_seminar];
 
@@ -158,7 +158,7 @@ async function fecthFormdata(id: string) {
       evaluate_expenct_level.value = res.data.result.assign_output.map(
         (e: any) => ({
           id: e.id,
-          labal: e.output_desc,
+          label: e.output_desc,
         })
       );
       evaluate_ouptut.value = res.data.result.assign_output.map((e: any) => ({
@@ -186,7 +186,7 @@ function savaForm() {
     competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
-    success_level.value === 0 ||
+    // success_level.value === 0 ||
     achievement_strength_desc.value === "" ||
     lengthconduct.value !== 4 ||
     lengthmoral_level.value !== 3 ||
@@ -260,7 +260,7 @@ function putformData() {
     competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
-    success_level: success_level.value,
+    // success_level: success_level.value,
     achievement_other: achievement_other.value,
     achievement_strength_desc: achievement_strength_desc.value,
     achievement_improve_desc: achievement_improve_desc.value,
@@ -809,7 +809,7 @@ onMounted(async () => {
               </q-list>
             </q-card>
 
-            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+            <!-- <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
               <q-list dense>
                 <q-item
                   dense
@@ -843,7 +843,7 @@ onMounted(async () => {
                   </q-item-section>
                 </q-item>
               </q-list>
-            </q-card>
+            </q-card> -->
 
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
               <q-list dense>
@@ -851,7 +851,7 @@ onMounted(async () => {
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                      1.8 อื่น ๆ
+                      1.7 อื่น ๆ
                       <q-checkbox
                         class="q-ml-sm"
                         dense
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
index 64fc29cf1..3a43c3a37 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
@@ -130,7 +130,7 @@ const variablesToWatch = [
   competency_level,
   learn_level,
   apply_level,
-  success_level,
+  // success_level,
 ];
 const ArrayCountbotton = [orientation, self_learning, training_seminar];
 
@@ -157,7 +157,7 @@ function savaForm() {
     competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
-    success_level.value === 0 ||
+    // success_level.value === 0 ||
     achievement_strength_desc.value === "" ||
     lengthconduct.value !== 4 ||
     lengthmoral_level.value !== 3 ||
@@ -242,7 +242,7 @@ async function fecthFormdata(id: string) {
       evaluate_expenct_level.value = res.data.result.assign_output.map(
         (e: any) => ({
           id: e.id,
-          labal: e.output_desc,
+          label: e.output_desc,
         })
       );
       evaluate_ouptut.value = res.data.result.assign_output.map((e: any) => ({
@@ -267,7 +267,7 @@ function putformData() {
     competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
-    success_level: success_level.value,
+    // success_level: success_level.value,
     achievement_other: achievement_other.value,
     achievement_strength_desc: achievement_strength_desc.value,
     achievement_improve_desc: achievement_improve_desc.value,
@@ -814,7 +814,7 @@ onMounted(async () => {
               </q-list>
             </q-card>
 
-            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+            <!-- <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
               <q-list dense>
                 <q-item
                   dense
@@ -848,7 +848,7 @@ onMounted(async () => {
                   </q-item-section>
                 </q-item>
               </q-list>
-            </q-card>
+            </q-card> -->
 
             <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
               <q-list dense>
@@ -856,7 +856,7 @@ onMounted(async () => {
                   <q-item-section>
                     <q-item-label>
                       <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                      1.8 อื่น ๆ
+                      1.7 อื่น ๆ
                       <q-checkbox
                         class="q-ml-sm"
                         dense
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
index b6ef33ace..fe0fe41c8 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
@@ -170,7 +170,7 @@ async function fectFormfull() {
   evaluate_expenct_level.value = await probationStore.assignOutput.map(
     (e: any) => ({
       id: e.id,
-      labal: e.output_desc,
+      label: e.output_desc,
     })
   );
   evaluate_ouptut.value = await probationStore.assignOutput.map((e: any) => ({
diff --git a/src/modules/13_salary/components/DialogInfoMain.vue b/src/modules/13_salary/components/DialogInfoMain.vue
index 79868ccbc..71fe5997f 100644
--- a/src/modules/13_salary/components/DialogInfoMain.vue
+++ b/src/modules/13_salary/components/DialogInfoMain.vue
@@ -36,6 +36,7 @@ const props = defineProps({
 const avatar = ref<string>("");
 const fullName = ref<string>("");
 const position = ref<string>("");
+const citizenId = ref<string>("");
 const isLoading = ref<boolean>(true);
 
 /** function เรียกข้อมูลส่วนตัว*/
@@ -48,6 +49,7 @@ function fetchInformation() {
 
       fullName.value = `${data.prefix}${data.firstName} ${data.lastName}`;
       position.value = data.position;
+      citizenId.value = data.citizenId;
 
       if (data.avatarName) {
         await fetchProfile(data.id as string, data.avatarName);
@@ -220,6 +222,7 @@ watch(
                     v-if="type === 'posSalary'"
                     v-model:profileId="profileId"
                     :employeeClass="employeeClass"
+                    :citizenId="citizenId"
                   />
                   <InfoDiscipline
                     v-if="type === 'discipline'"
diff --git a/src/modules/13_salary/components/InfoSalary.vue b/src/modules/13_salary/components/InfoSalary.vue
index 1037fd357..e192338de 100644
--- a/src/modules/13_salary/components/InfoSalary.vue
+++ b/src/modules/13_salary/components/InfoSalary.vue
@@ -26,6 +26,7 @@ const {
 /** props*/
 const profileId = defineModel<string>("profileId", { required: true });
 const employeeClass = defineModel<string>("employeeClass", { required: true });
+const citizenId = defineModel<string>("citizenId", { required: true });
 
 const modalCommand = ref<boolean>(false);
 const command = ref<string>("");
@@ -470,6 +471,7 @@ onMounted(() => {
     v-model:modal="modalCommand"
     v-model:command="command"
     v-model:commandId="commandId"
+    :citizen-id="citizenId"
   />
 </template>
 
diff --git a/src/modules/18_command/components/DialogPreviewCommand.vue b/src/modules/18_command/components/DialogPreviewCommand.vue
index 3f3fa9f4b..836abb6bd 100644
--- a/src/modules/18_command/components/DialogPreviewCommand.vue
+++ b/src/modules/18_command/components/DialogPreviewCommand.vue
@@ -19,6 +19,7 @@ const { showLoader, hideLoader, messageError } = useCounterMixin();
 const modal = defineModel<boolean>("modal", { required: true });
 const command = defineModel<string>("command", { required: true });
 const commandId = defineModel<string>("commandId", { required: true });
+const citizenId = defineModel<string>("citizenId", { required: true });
 const promises = ref<any>([]);
 
 const tab = ref<string>("main"); //tab
@@ -37,6 +38,7 @@ function closeDialog() {
   modal.value = false;
   command.value = "";
   commandId.value = "";
+  citizenId.value = "";
 }
 
 /**
@@ -88,13 +90,25 @@ async function downloadCover(type: string) {
  */
 async function fetchDataCommand(type: string) {
   let newType = type === "cover" ? "คำสั่ง" : "แนบท้าย";
+  const pathAPI =
+    type === "cover"
+      ? config.API.fileByFile(
+          "ระบบออกคำสั่ง",
+          newType,
+          commandId.value,
+          newType
+        )
+      : config.API.subFileByFileName(
+          "ระบบออกคำสั่ง",
+          newType,
+          commandId.value,
+          citizenId.value,
+          newType
+        );
   await http
-    .get(
-      config.API.fileByFile("ระบบออกคำสั่ง", newType, commandId.value, newType)
-    )
+    .get(pathAPI)
     .then(async (res) => {
       const data = res.data;
-      console.log(res);
 
       if (type === "cover") {
         dataCover.value = data;
diff --git a/src/modules/18_command/components/Step/0_Main.vue b/src/modules/18_command/components/Step/0_Main.vue
index 36974e185..30d177d76 100644
--- a/src/modules/18_command/components/Step/0_Main.vue
+++ b/src/modules/18_command/components/Step/0_Main.vue
@@ -43,7 +43,7 @@ async function fetchData() {
           ? "Live"
           : data.isSignature === false
           ? "Digital"
-          : "";
+          : "Live";
       isStatus.value = data.status;
       isDraft.value = data.isDraft;
       isSign.value = data.isSign;
@@ -174,11 +174,12 @@ onMounted(async () => {
 
             <q-item tag="label" v-ripple>
               <q-item-section avatar>
+                <!-- :disable="isSignature !== null || store.readonly" -->
                 <q-radio
                   v-model="signaturetype"
                   val="Digital"
                   color="primary"
-                  :disable="isSignature !== null || store.readonly"
+                  disable
                 />
               </q-item-section>
               <q-item-section>
diff --git a/src/modules/18_command/components/Step/View0_Live.vue b/src/modules/18_command/components/Step/View0_Live.vue
index fd5e051f3..57a7d3ef6 100644
--- a/src/modules/18_command/components/Step/View0_Live.vue
+++ b/src/modules/18_command/components/Step/View0_Live.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import { useQuasar } from "quasar";
 import axios from "axios";
 
@@ -42,12 +42,23 @@ const isAuthority = defineModel<boolean>("isAuthority", { required: true }); //
 const isCheckAuthority = ref<boolean>(false); //เช็ครอผู้มีอำนาจลงนามอนุมัติ
 const isAttachment = defineModel<boolean>("isAttachment", { required: true }); //เช็คบัญชีแนบท้าย
 const fileUploadOrder = ref<any>(null); //ไฟล์คำสั่ง
-const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
+// const fileUploadTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 const fileOrder = ref<any>(null); //ไฟล์คำสั่ง
-const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
+// const fileTailer = ref<any>(null); //ไฟล์เอกสารแนบท้าย
 
 const isLoad = ref<boolean>(true); //แสดงโหลด
 const modalPerView = ref<boolean>(false);
+// สมมติว่ามีรายชื่อ
+const attachmentList = ref<any[]>([]);
+const attachmentFiles = ref<Record<number, any>>({});
+
+const isFileTailer = computed(() => {
+  // จำนวนไฟล์ที่อัปโหลดครบทุกคน
+  return (
+    attachmentList.value.length > 0 &&
+    attachmentList.value.every((person) => !!attachmentFiles.value[person.id])
+  );
+});
 
 /**
  * ฟังก์ชันยืนยันการส่งให้ผู้มีอำนาจลงนามอนุมัติ
@@ -88,7 +99,9 @@ async function updateCheckboxAuthority(val: boolean) {
     .put(config.API.command + `/pending-check/${commandId.value}`, {
       sign: val,
     })
-    .then(() => {})
+    .then(() => {
+      isAttachment.value && fetchLists();
+    })
     .catch((err) => {
       messageError($q, err);
     })
@@ -104,7 +117,7 @@ async function updateCheckboxAuthority(val: boolean) {
 function onUploadFile(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
-  let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
+  // let file = group === "order" ? fileUploadOrder.value : fileUploadTailer.value;
   const fileName = { fileName: type };
   http
     .post(config.API.file("ระบบออกคำสั่ง", type, commandId.value), {
@@ -118,7 +131,11 @@ function onUploadFile(group: string) {
           res.data[key]?.fileName !== ""
       );
       foundKey &&
-        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, group));
+        (await uploadFileDoc(
+          res.data[foundKey]?.uploadUrl,
+          fileUploadOrder.value,
+          group
+        ));
     })
     .catch((err) => {
       messageError($q, err);
@@ -134,7 +151,12 @@ function onUploadFile(group: string) {
  * @param file ไฟล์ที่ต้องการอัปโหลด
  * @param group ประเภพไฟล์ "คำสั่ง","แนบท้าย"
  */
-async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
+async function uploadFileDoc(
+  uploadUrl: string,
+  file: any,
+  group: string,
+  id?: string
+) {
   const formData = new FormData();
   formData.append("file", file);
   showLoader();
@@ -154,7 +176,11 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
       if (group === "order") {
         fileUploadOrder.value = null;
       } else {
-        fileUploadTailer.value = null;
+        attachmentList.value.forEach((e) => {
+          if (e.id === id) {
+            e.file = null;
+          }
+        });
       }
       hideLoader();
     });
@@ -167,15 +193,40 @@ async function uploadFileDoc(uploadUrl: string, file: any, group: string) {
 async function fetchDoc(group: string) {
   showLoader();
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+  if (group === "order") {
+    await fetchDocOrder(type);
+  } else {
+    attachmentList.value.forEach(async (e) => {
+      await fetchDocTailer(type, e.id);
+    });
+  }
+}
+
+async function fetchDocOrder(type: string) {
   await http
     .get(config.API.file("ระบบออกคำสั่ง", type, commandId.value))
     .then((res) => {
       const data = res.data[0];
-      if (group === "order") {
-        fileOrder.value = data;
-      } else {
-        fileTailer.value = data;
-      }
+      fileOrder.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchDocTailer(type: string, id: string) {
+  await http
+    .get(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, id))
+    .then((res) => {
+      const data = res.data[0];
+      attachmentList.value.forEach((e) => {
+        if (e.id === id) {
+          attachmentFiles.value[e.id] = data;
+        }
+      });
     })
     .catch((e) => {
       messageError($q, e);
@@ -190,18 +241,33 @@ const dataFile = ref<DataFileDownload>();
  * ดาวน์โหลดลิงก์ไฟล์
  * @param fileName file name
  */
-function downloadFile(file: any, group: string, isView: boolean = false) {
+function downloadFile(
+  file: any,
+  group: string,
+  isView: boolean = false,
+  id: string
+) {
   let type = group === "order" ? "คำสั่ง" : "แนบท้าย";
+
+  const pathApi =
+    group === "order"
+      ? config.API.fileByFile(
+          "ระบบออกคำสั่ง",
+          type,
+          commandId.value,
+          file.fileName
+        )
+      : config.API.subFileByFileName(
+          "ระบบออกคำสั่ง",
+          type,
+          commandId.value,
+          id,
+          file.fileName
+        );
+
   showLoader();
   http
-    .get(
-      config.API.fileByFile(
-        "ระบบออกคำสั่ง",
-        type,
-        commandId.value,
-        file.fileName
-      )
-    )
+    .get(pathApi)
     .then((res) => {
       const data = res.data;
       dataFile.value = data;
@@ -257,6 +323,49 @@ function onConfirmOrder() {
   }
 }
 
+/** ดึงข้อมูล บุคคล */
+async function fetchLists() {
+  await http
+    .get(config.API.commandAction(commandId.value, "tab2"))
+    .then(async (res) => {
+      const data = await res.data.result;
+      attachmentList.value = data.commandRecives.map((item: any) => ({
+        id: item.citizenId,
+        name: item.prefix + item.firstName + " " + item.lastName,
+        file: null,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+function onUploadFileTailer(id: string, file: any) {
+  const type = "แนบท้าย";
+  const fileName = { fileName: type };
+
+  http
+    .post(config.API.subFile("ระบบออกคำสั่ง", type, commandId.value, id), {
+      replace: true,
+      fileList: fileName,
+    })
+    .then(async (res) => {
+      const foundKey: string | undefined = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      foundKey &&
+        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, file, type, id));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   isCheckDraft.value = isDraft.value;
   isCheckAuthority.value = isAuthority.value;
@@ -264,6 +373,7 @@ onMounted(async () => {
     isLoad.value = false;
     let promises = [fetchDoc("order")];
     if (isAttachment.value) {
+      await fetchLists();
       promises.push(fetchDoc("tailer"));
     }
     await Promise.all(promises).finally(() => {
@@ -318,141 +428,172 @@ onMounted(async () => {
             />
           </div>
 
-          <div
-            class="row col-12 q-col-gutter-sm"
-            style="padding-left: 50px"
-            v-if="isAuthority"
-          >
+          <div class="row col-12" style="padding-left: 50px" v-if="isAuthority">
             <div class="col-12 text-header">
               อัปโหลดเอกสารสแกนกลับเข้าสู่ระบบ
             </div>
-            <div class="col-6">
-              <q-card
-                bordered
-                class="row col-12"
-                style="border: 1px solid #d6dee1"
-              >
-                <div
-                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+            <div class="col-6 q-col-gutter-sm">
+              <div class="col-6">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
                 >
-                  คำสั่ง
-                  <q-space />
-                  <q-btn
-                    v-if="fileOrder"
-                    rounded
-                    flat
-                    dense
-                    color="primary"
-                    icon="mdi-eye"
-                    @click.prevent="downloadFile(fileOrder, 'order', true)"
+                  <div
+                    class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                   >
-                    <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="fileOrder"
-                    rounded
-                    flat
-                    dense
-                    color="red"
-                    icon="mdi-download"
-                    @click.prevent="downloadFile(fileOrder, 'order')"
-                  >
-                    <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
-                  </q-btn>
-                </div>
-                <div class="col-12"><q-separator /></div>
-                <div class="col-12 q-pa-md" v-if="step === 2">
-                  <q-file
-                    outlined
-                    dense
-                    v-model="fileUploadOrder"
-                    label="เลือกไฟล์คำสั่ง"
-                    hide-bottom-space
-                    accept=".pdf"
-                    :readonly="store.readonly"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
+                    คำสั่ง
+                    <q-space />
+                    <q-btn
+                      v-if="fileOrder"
+                      rounded
+                      flat
+                      dense
+                      color="primary"
+                      icon="mdi-eye"
+                      @click.prevent="
+                        downloadFile(fileOrder, 'order', true, '')
+                      "
+                    >
+                      <q-tooltip>ดูไฟล์คำสั่ง</q-tooltip>
+                    </q-btn>
+                    <q-btn
+                      v-if="fileOrder"
+                      rounded
+                      flat
+                      dense
+                      color="red"
+                      icon="mdi-download"
+                      @click.prevent="
+                        downloadFile(fileOrder, 'order', false, '')
+                      "
+                    >
+                      <q-tooltip>ดาวน์โหลดไฟล์คำสั่ง</q-tooltip>
+                    </q-btn>
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="col-12 q-pa-md" v-if="step === 2">
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileUploadOrder"
+                      label="เลือกไฟล์คำสั่ง"
+                      hide-bottom-space
+                      accept=".pdf"
+                      :readonly="store.readonly"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
 
-                    <template v-slot:after>
-                      <q-btn
-                        @click.prevent="onUploadFile('order')"
-                        flat
-                        round
-                        icon="mdi-upload"
-                        :color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
-                        :disable="fileUploadOrder == null"
-                      />
-                    </template>
-                  </q-file>
-                </div>
-              </q-card>
-            </div>
+                      <template v-slot:after>
+                        <q-btn
+                          @click.prevent="onUploadFile('order')"
+                          flat
+                          round
+                          icon="mdi-upload"
+                          :color="fileUploadOrder == null ? 'grey-5' : 'blue-5'"
+                          :disable="fileUploadOrder == null"
+                        />
+                      </template>
+                    </q-file>
+                  </div>
+                </q-card>
+              </div>
 
-            <div class="col-6" v-if="isAttachment">
-              <q-card
-                bordered
-                class="row col-12"
-                style="border: 1px solid #d6dee1"
-              >
-                <div
-                  class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+              <div class="col-6" v-if="isAttachment">
+                <q-card
+                  bordered
+                  class="row col-12"
+                  style="border: 1px solid #d6dee1"
                 >
-                  เอกสารแนบท้าย
-                  <q-space />
-                  <q-btn
-                    v-if="fileTailer"
-                    rounded
-                    flat
-                    dense
-                    color="primary"
-                    icon="mdi-eye"
-                    @click.prevent="downloadFile(fileTailer, 'tailer', true)"
+                  <div
+                    class="row items-center col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                   >
-                    <q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
-                  </q-btn>
-                  <q-btn
-                    v-if="fileTailer"
-                    rounded
-                    flat
-                    dense
-                    color="red"
-                    icon="mdi-download"
-                    @click.prevent="downloadFile(fileTailer, 'tailer')"
-                  >
-                    <q-tooltip>ดาวน์โหลดไฟล์แนบท้าย</q-tooltip>
-                  </q-btn>
-                </div>
-                <div class="col-12"><q-separator /></div>
-                <div class="col-12 q-pa-md" v-if="step === 2">
-                  <q-file
-                    outlined
-                    dense
-                    v-model="fileUploadTailer"
-                    label="เลือกไฟล์เอกสารแนบท้าย"
-                    hide-bottom-space
-                    accept=".pdf"
-                    :readonly="store.readonly"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-
-                    <template v-slot:after>
-                      <q-btn
-                        @click.prevent="onUploadFile('tailer')"
-                        flat
-                        round
-                        icon="mdi-upload"
-                        :color="fileUploadTailer == null ? 'grey-5' : 'blue-5'"
-                        :disable="fileUploadTailer == null"
-                      />
-                      <q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
-                    </template>
-                  </q-file>
-                </div>
-              </q-card>
+                    เอกสารแนบท้าย
+                  </div>
+                  <div class="col-12"><q-separator /></div>
+                  <div class="row col-12 q-pa-md q-col-gutter-sm">
+                    <div
+                      v-for="(person, idx) in attachmentList"
+                      :key="person.id"
+                      class="col-12"
+                    >
+                      <q-card flat bordered class="q-pa-sm">
+                        <div class="row items-center">
+                          <div class="text-weight-medium">
+                            {{ person.name }}
+                          </div>
+                          <q-space />
+                          <q-btn
+                            v-if="attachmentFiles[person.id]"
+                            @click.prevent="
+                              downloadFile(
+                                attachmentFiles[person.id],
+                                'tailer',
+                                true,
+                                person.id
+                              )
+                            "
+                            flat
+                            dense
+                            color="primary"
+                            icon="mdi-eye"
+                            class="q-mr-xs"
+                          >
+                            <q-tooltip>ดูไฟล์เอกสารแนบท้าย</q-tooltip>
+                          </q-btn>
+                          <q-btn
+                            v-if="attachmentFiles[person.id]"
+                            @click.prevent="
+                              downloadFile(
+                                attachmentFiles[person.id],
+                                'tailer',
+                                false,
+                                person.id
+                              )
+                            "
+                            flat
+                            dense
+                            color="red"
+                            icon="mdi-download"
+                          >
+                            <q-tooltip>ดาวน์โหลดไฟล์เอกสารแนบท้าย</q-tooltip>
+                          </q-btn>
+                        </div>
+                        <q-file
+                          v-if="step === 2"
+                          outlined
+                          dense
+                          v-model="person.file"
+                          label="เลือกไฟล์เอกสารแนบท้าย"
+                          hide-bottom-space
+                          accept=".pdf"
+                          :readonly="store.readonly"
+                          class="full-width"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon name="attach_file" />
+                          </template>
+                          <template v-slot:after>
+                            <q-btn
+                              @click.prevent="
+                                onUploadFileTailer(person.id, person.file)
+                              "
+                              flat
+                              round
+                              icon="mdi-upload"
+                              :color="person.file == null ? 'grey-5' : 'blue-5'"
+                              :disable="person.file == null"
+                            />
+                            <q-tooltip>อัปโหลดไฟล์เอกสารแนบท้าย</q-tooltip>
+                          </template>
+                        </q-file>
+                      </q-card>
+                    </div>
+                  </div>
+                </q-card>
+              </div>
             </div>
           </div>
 
@@ -462,7 +603,7 @@ onMounted(async () => {
               step === 2 &&
               isAuthority &&
               fileOrder &&
-              (!isAttachment || fileTailer)
+              (!isAttachment || isFileTailer)
             "
           >
             <q-btn
@@ -472,14 +613,14 @@ onMounted(async () => {
               :color="
                 !isAuthority ||
                 fileOrder === null ||
-                (fileTailer === null && isAttachment)
+                (!isFileTailer && isAttachment)
                   ? 'grey-5'
                   : 'public'
               "
               :disable="
                 !isAuthority ||
                 fileOrder === null ||
-                (fileTailer === null && isAttachment)
+                (!isFileTailer && isAttachment)
               "
             />
           </div>
diff --git a/src/modules/22_issues/components/DialogViewIssue.vue b/src/modules/22_issues/components/DialogViewIssue.vue
new file mode 100644
index 000000000..1847da42a
--- /dev/null
+++ b/src/modules/22_issues/components/DialogViewIssue.vue
@@ -0,0 +1,463 @@
+<script setup lang="ts">
+import { computed, reactive, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useIssueStore } from "@/modules/22_issues/store";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  IssueData,
+  IssueAttachment,
+  IssueAttachmentWithDownloadUrl,
+} from "@/modules/22_issues/interface/Main";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const store = useIssueStore();
+const { statusOptions } = storeToRefs(store);
+const { convertStatus, convertSystem } = store;
+
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", {
+  default: false,
+});
+const type = defineModel<string>("type", {
+  default: "edit",
+});
+const data = defineModel<IssueData | null>("data", {
+  default: null,
+});
+
+const props = defineProps<{
+  fetchData: () => Promise<void>;
+}>();
+
+const isEdit = computed(() => type.value === "edit");
+const title = computed(() => (isEdit.value ? "แก้ไขสถานะ" : "รายละเอียดปัญหา"));
+const optionsStatus = computed(() =>
+  statusOptions.value.filter((item) => item.value !== "")
+);
+const splitterModel = computed({
+  get: () => (isEdit.value ? 70 : 100),
+  set: (val: number) => {},
+});
+
+const form = reactive({
+  status: "",
+  remark: "",
+});
+const fileList = ref<IssueAttachment[]>([]);
+const images = ref<IssueAttachmentWithDownloadUrl[]>([]);
+
+const imageModal = ref(false);
+const selectedImg = ref("");
+
+// ฟังก์ชันสำหรับเปิดดูรูป
+const openPreview = (url: string) => {
+  selectedImg.value = url;
+  imageModal.value = true;
+};
+
+/** ฟังก์ชันบันทึกข้อมูล */
+function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    try {
+      await http.put(config.API.orgIssues + "/" + data?.value?.id, {
+        status: form.status,
+        remark: form.remark,
+      });
+      await props.fetchData();
+      success($q, "บันทึกข้อมูลเรียบร้อย");
+      onClose();
+    } catch (error) {
+      messageError($q, error);
+    } finally {
+      hideLoader();
+    }
+  });
+}
+
+/** ฟังก์ชันปิด dialog และรีเซ็ตข้อมูล */
+function onClose() {
+  modal.value = false;
+  form.status = "";
+  form.remark = "";
+  fileList.value = [];
+  images.value = [];
+}
+
+async function fetchDocument(codeIssue: string, system: string) {
+  try {
+    const res = await http.get(
+      config.API.file("issueAttachments", system, codeIssue)
+    );
+    const allFiles = res.data;
+
+    // 1. แยกไฟล์ที่ไม่ใช่รูปเก็บเข้า list
+    fileList.value = allFiles.filter(
+      (f: IssueAttachment) => !/\.(jpg|jpeg|png|gif|webp)$/i.test(f.fileName)
+    );
+
+    // 2. แยกเฉพาะรูปภาพแล้วโหลดข้อมูล
+    const images = allFiles.filter((f: IssueAttachment) =>
+      /\.(jpg|jpeg|png|gif|webp)$/i.test(f.fileName)
+    );
+    for (const img of images) {
+      await getImg(img.path, img.fileName);
+    }
+  } catch (error) {
+    messageError($q, error);
+  }
+}
+
+/**
+ * ฟังก์ชันเรียกข้อมูลรายการรูป
+ * @param dataList ข้อมูล
+ */
+async function getImg(path: string, fileName: string) {
+  await http
+    .get(config.API.fileByPath(`${path}/${fileName}`))
+    .then((res) => {
+      const data = res.data;
+      const newData: IssueAttachmentWithDownloadUrl = {
+        ...data,
+      };
+
+      images.value.push(newData);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+}
+
+/**
+ * ดาวน์โหลดลิงก์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "issueAttachments",
+        data?.value?.system || "",
+        data?.value?.codeIssue || "",
+        fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+const downloadImage = async (url: string, fileName: string = "image.png") => {
+  try {
+    const response = await fetch(url);
+    const blob = await response.blob(); // แปลงข้อมูลเป็น Blob
+    const blobUrl = window.URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = fileName; // กำหนดชื่อไฟล์ที่ต้องการให้บันทึก
+    document.body.appendChild(link);
+    link.click();
+
+    // ล้างหน่วยความจำ
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(blobUrl);
+  } catch (error) {
+    messageError($q, error);
+  }
+};
+
+watch(
+  () => modal.value,
+  (val: boolean) => {
+    if (val && data.value) {
+      form.status = data.value.status || "";
+      form.remark = data.value.remark || "";
+      fetchDocument(data.value.codeIssue, data.value.system);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card class="overflow-hidden" style="min-width: 900px; max-width: 90vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="title" :close="onClose" />
+        <q-separator />
+
+        <q-splitter
+          v-model="splitterModel"
+          :limits="isEdit ? [70, 70] : [100, 100]"
+          style="height: 800px"
+          :separator-class="!isEdit ? 'hidden' : ''"
+        >
+          <template v-slot:before>
+            <div class="q-pa-lg">
+              <div class="q-gutter-y-md text-body2">
+                <div class="row">
+                  <div class="col-3 text-grey-7">รหัส:</div>
+                  <div class="col-9 text-weight-bold">
+                    {{ data?.codeIssue || "-" }}
+                  </div>
+                </div>
+                <div class="row q-col-gutter-sm">
+                  <div class="col-3 text-grey-7">หัวข้อ:</div>
+                  <div class="col-9">{{ data?.title || "-" }}</div>
+                </div>
+                <div class="row q-col-gutter-sm">
+                  <div class="col-3 text-grey-7">รายละเอียด:</div>
+                  <div class="col-9">{{ data?.description || "-" }}</div>
+                </div>
+                <div class="row q-col-gutter-sm">
+                  <div class="col-3 text-grey-7">ระบบ/เมนู:</div>
+                  <div class="col-9">
+                    {{ convertSystem(data?.system || "") }} / {{ data?.menu }}
+                  </div>
+                </div>
+                <div class="row q-col-gutter-sm">
+                  <div class="col-3 text-grey-7">ผู้แจ้ง:</div>
+                  <div class="col-9">{{ data?.createdFullName || "-" }}</div>
+                </div>
+                <div class="row q-col-gutter-sm">
+                  <div class="col-3 text-grey-7">วันที่แจ้ง:</div>
+                  <div class="col-9">
+                    {{
+                      data?.createdAt
+                        ? date2Thai(data?.createdAt, false, true)
+                        : ""
+                    }}
+                  </div>
+                </div>
+                <div class="row q-col-gutter-sm">
+                  <div class="col-3 text-grey-7">สถานะ:</div>
+                  <div class="col-9">
+                    {{ convertStatus(data?.status || "") }}
+                  </div>
+                </div>
+                <div
+                  v-if="data?.remark"
+                  class="row q-mt-sm bg-grey-2 q-pa-sm rounded-borders"
+                >
+                  <div class="col-12 text-grey-7 text-caption">หมายเหตุ:</div>
+                  <div class="col-12">{{ data?.remark }}</div>
+                </div>
+              </div>
+
+              <div v-if="images.length > 0" class="q-mt-xl">
+                <div class="text-subtitle2 q-mb-sm">
+                  <q-icon name="image" /> รูปภาพประกอบ
+                </div>
+                <div class="row q-col-gutter-sm">
+                  <div
+                    v-for="(img, index) in images"
+                    :key="index"
+                    class="col-4"
+                  >
+                    <q-img
+                      :src="img.downloadUrl"
+                      :ratio="1"
+                      fit="cover"
+                      class="rounded-borders shadow-1 cursor-pointer image-hover"
+                      @click="openPreview(img.downloadUrl)"
+                    >
+                      <div class="absolute-full flex flex-center view-overlay">
+                        <q-icon name="visibility" size="sm" />
+                      </div>
+                      <div class="absolute-top-right btn-overlay q-pa-xs">
+                        <q-btn
+                          flat
+                          round
+                          dense
+                          icon="download"
+                          color="white"
+                          size="sm"
+                          class="bg-black-op"
+                          @click.stop="
+                            downloadImage(img.downloadUrl, img.fileName)
+                          "
+                        />
+                      </div>
+                    </q-img>
+                  </div>
+                </div>
+              </div>
+
+              <div v-if="fileList.length > 0" class="q-mt-lg">
+                <div class="text-subtitle2 q-mb-sm">
+                  <q-icon name="attachment" /> ไฟล์เอกสารแนบ
+                </div>
+                <q-list bordered separator class="rounded-borders">
+                  <q-item v-for="file in fileList" :key="file.fileName" dense>
+                    <q-item-section avatar
+                      ><q-icon name="description" color="blue"
+                    /></q-item-section>
+                    <q-item-section class="text-caption ellipsis">{{
+                      file.fileName
+                    }}</q-item-section>
+                    <q-item-section side>
+                      <q-btn
+                        flat
+                        round
+                        dense
+                        icon="download"
+                        color="blue"
+                        size="sm"
+                        @click="downloadFile(file.fileName)"
+                      />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+            </div>
+          </template>
+
+          <template v-slot:after v-if="isEdit">
+            <div class="q-pa-lg bg-grey-1 full-height">
+              <div class="col-12 q-pa-none q-col-gutter-sm">
+                <div class="col-12">
+                  <q-select
+                    dense
+                    outlined
+                    v-model="form.status"
+                    :options="optionsStatus"
+                    option-value="value"
+                    option-label="label"
+                    map-options
+                    label="สถานะ"
+                    emit-value
+                    :rules="[ (val: string) => !!val || 'กรุณาเลือกสถานะ' ]"
+                    hide-bottom-space
+                    class="inputgreen"
+                    :readonly="isEdit ? false : true"
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template>
+                  </q-select>
+                </div>
+                <div class="col-12">
+                  <q-input
+                    :readonly="isEdit ? false : true"
+                    dense
+                    outlined
+                    label="หมายเหตุ"
+                    v-model="form.remark"
+                    class="inputgreen"
+                    hide-bottom-space
+                    type="textarea"
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
+        </q-splitter>
+
+        <q-separator v-if="isEdit" />
+        <q-card-actions align="right" class="q-pa-md" v-if="isEdit">
+          <q-btn
+            type="submit"
+            class="q-px-md items-center"
+            color="public"
+            label="บันทึก"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- <q-dialog v-model="imageModal">
+    <q-btn
+      icon="close"
+      flat
+      round
+      dense
+      v-close-popup
+      class="absolute-top-right z-top text-white"
+    />
+
+    <q-img :src="selectedImg" />
+  </q-dialog> -->
+  <q-dialog v-model="imageModal">
+    <q-btn
+      icon="close"
+      flat
+      round
+      dense
+      v-close-popup
+      class="absolute-top-right z-top text-white"
+    />
+    <q-card
+      style="
+        width: auto;
+        max-width: none;
+        background: transparent;
+        box-shadow: none;
+      "
+    >
+      <img
+        :src="selectedImg"
+        style="
+          display: block;
+          max-width: 90vw;
+          max-height: 90vh;
+          object-fit: contain;
+        "
+      />
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.bg-black-op {
+  background: rgba(0, 0, 0, 0.4);
+}
+.view-overlay {
+  background: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.btn-overlay {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.image-hover:hover .view-overlay,
+.image-hover:hover .btn-overlay {
+  opacity: 1;
+}
+/* ซ่อน Splitter Line เมื่อไม่ได้แก้ไข */
+.hidden {
+  display: none !important;
+}
+</style>
diff --git a/src/modules/22_issues/interface/Main.ts b/src/modules/22_issues/interface/Main.ts
new file mode 100644
index 000000000..cdb6c7cd1
--- /dev/null
+++ b/src/modules/22_issues/interface/Main.ts
@@ -0,0 +1,42 @@
+import type { D } from "@fullcalendar/core/internal-common";
+
+interface Options {
+  label: string;
+  value: string;
+}
+
+interface IssueData {
+  codeIssue: string;
+  createdAt: Date;
+  createdFullName: string;
+  createdUserId: string;
+  description: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: Date;
+  menu: string;
+  org: string;
+  remark: string;
+  status: "IN_PROGRESS" | "RESOLVED" | "CLOSED" | "NEW";
+  system: "mgt" | "user" | "checkin";
+  title: string;
+}
+
+interface IssueAttachment {
+  fileName: string;
+  path: string;
+  pathname: string;
+  title: string;
+}
+
+interface IssueAttachmentWithDownloadUrl extends IssueAttachment {
+  downloadUrl: string;
+}
+
+export type {
+  Options,
+  IssueData,
+  IssueAttachment,
+  IssueAttachmentWithDownloadUrl,
+};
diff --git a/src/modules/22_issues/router.ts b/src/modules/22_issues/router.ts
new file mode 100644
index 000000000..df3ef253d
--- /dev/null
+++ b/src/modules/22_issues/router.ts
@@ -0,0 +1,14 @@
+const Main = () => import("@/modules/22_issues/views/Main.vue");
+
+export default [
+  {
+    path: "/issues",
+    name: "issuesMain",
+    component: Main,
+    meta: {
+      Auth: true,
+      Key: "REPORT_ORG",
+      Role: "STAFF",
+    },
+  },
+];
diff --git a/src/modules/22_issues/store.ts b/src/modules/22_issues/store.ts
new file mode 100644
index 000000000..f7d19d0a6
--- /dev/null
+++ b/src/modules/22_issues/store.ts
@@ -0,0 +1,52 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+import type { Options } from "@/modules/22_issues/interface/Main";
+
+export const useIssueStore = defineStore("issue", () => {
+  const systemOptions = ref<Options[]>([
+    { label: "ทั้งหมด", value: "" },
+    { label: "ระบบบริหารจัดการ", value: "MGT" },
+    { label: "ระบบผู้ใช้งาน", value: "USER" },
+    { label: "ระบบลงเวลา", value: "CHECKIN" },
+  ]);
+
+  const statusOptions = ref<Options[]>([
+    { label: "ทั้งหมด", value: "" },
+    { label: "ใหม่", value: "NEW" },
+    { label: "กำลังดำเนินการ", value: "IN_PROGRESS" },
+    { label: "แก้ไขแล้ว", value: "RESOLVED" },
+    { label: "ปิดแล้ว", value: "CLOSED" },
+  ]);
+
+  function convertStatus(status: string) {
+    let val = status.toUpperCase();
+    switch (val) {
+      case "NEW":
+        return "ใหม่";
+      case "IN_PROGRESS":
+        return "กำลังดำเนินการ";
+      case "RESOLVED":
+        return "แก้ไขแล้ว";
+      case "CLOSED":
+        return "ปิดแล้ว";
+      default:
+        return "-";
+    }
+  }
+
+  function convertSystem(system: string) {
+    let val = system.toUpperCase();
+    switch (val) {
+      case "MGT":
+        return "ระบบบริหารจัดการ";
+      case "USER":
+        return "ระบบผู้ใช้งาน";
+      case "CHECKIN":
+        return "ระบบลงเวลา";
+      default:
+        return "-";
+    }
+  }
+
+  return { systemOptions, statusOptions, convertStatus, convertSystem };
+});
diff --git a/src/modules/22_issues/views/Main.vue b/src/modules/22_issues/views/Main.vue
new file mode 100644
index 000000000..31b0209bb
--- /dev/null
+++ b/src/modules/22_issues/views/Main.vue
@@ -0,0 +1,333 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { storeToRefs } from "pinia";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
+import { useCounterMixin } from "@/stores/mixin";
+import { useIssueStore } from "@/modules/22_issues/store";
+
+import type { QTableProps } from "quasar";
+import type { IssueData } from "@/modules/22_issues/interface/Main";
+
+import DialogViewIssue from "@/modules/22_issues/components/DialogViewIssue.vue";
+
+const $q = useQuasar();
+const store = useIssueStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
+
+const { convertStatus, convertSystem } = store;
+const { systemOptions, statusOptions } = storeToRefs(store);
+
+const visibleColumns = ref<string[]>([
+  "title",
+  "description",
+  "system",
+  "menu",
+  "createdAt",
+  "createdFullName",
+  "status",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "title",
+    align: "left",
+    label: "หัวข้อปัญหา",
+    sortable: false,
+    field: "title",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "description",
+    align: "left",
+    label: "รายละเอียด",
+    sortable: false,
+    field: "description",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "system",
+    align: "left",
+    label: "ระบบ",
+    sortable: false,
+    field: "system",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val: string) => convertSystem(val),
+  },
+  {
+    name: "menu",
+    align: "left",
+    label: "เมนู",
+    sortable: false,
+    field: "menu",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: false,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val: string) => date2Thai(new Date(val), false, true),
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ชื่อผู้สร้าง",
+    sortable: false,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะ",
+    sortable: false,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (val: string) => convertStatus(val),
+  },
+]);
+const filterKeyword = ref<string>(""); // ค้นหา
+const systemFilter = ref<string>(""); // กรองระบบ
+const statusFilter = ref<string>("NEW"); // กรองสถานะ
+const rows = ref<IssueData[]>([]); // ข้อมูลตาราง
+const rowsData = ref<IssueData[]>([]); // ข้อมูลตารางทั้งหมด
+
+const modal = ref<boolean>(false); // modal แสดงรายละเอียด
+const typeModal = ref<string>("view"); // ประเภท modal
+const dataIssue = ref<IssueData | null>(null); // ข้อมูลรายงานปัญหา
+
+/** fetch รายการรายงานปัญหา */
+async function fetchListIssues() {
+  try {
+    showLoader();
+    const res = await http.get(config.API.orgIssues + "/lists");
+    rowsData.value = res.data.result;
+    onSearch();
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
+}
+
+/** ค้นหารายการรายงานปัญหา*/
+function onSearch() {
+  let filtered = onSearchDataTable(
+    filterKeyword.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+  if (systemFilter.value) {
+    filtered = filtered.filter(
+      (item) =>
+        item.system &&
+        item.system.toUpperCase() === systemFilter.value.toUpperCase()
+    );
+  }
+  if (statusFilter.value) {
+    filtered = filtered.filter(
+      (item) =>
+        item.status &&
+        item.status.toUpperCase() === statusFilter.value.toUpperCase()
+    );
+  }
+  rows.value = filtered;
+}
+
+/**
+ * แสดงรายละเอียดรายงานปัญหา
+ * @param row ข้อมูลรายงานปัญหา
+ * @param type ประเภทของ modal
+ */
+function onViewDetail(row: IssueData, type: string) {
+  typeModal.value = type;
+  dataIssue.value = row;
+  modal.value = true;
+}
+
+/** โหลดข้อมูลเมื่อเข้าหน้า */
+onMounted(async () => {
+  await fetchListIssues();
+});
+</script>
+<template>
+  <div class="row items-center">
+    <div class="toptitle text-dark row items-center q-py-xs">
+      รายการรายงานปัญหา
+    </div>
+  </div>
+
+  <q-card flat bordered class="q-pa-md">
+    <div class="row col-12 q-col-gutter-sm">
+      <div class="col-12">
+        <div class="row q-col-gutter-xs items-end">
+          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
+            <div class="row q-col-gutter-sm">
+              <div class="col-xs-12 col-sm-8 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  v-model="systemFilter"
+                  :options="systemOptions"
+                  option-value="value"
+                  option-label="label"
+                  map-options
+                  label="ระบบ"
+                  emit-value
+                  @update:modelValue="onSearch"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+              <div class="col-xs-12 col-sm-8 col-md-6">
+                <q-select
+                  dense
+                  outlined
+                  v-model="statusFilter"
+                  :options="statusOptions"
+                  option-value="value"
+                  option-label="label"
+                  map-options
+                  label="สถานะ"
+                  emit-value
+                  @update:modelValue="onSearch"
+                >
+                  <template v-slot:no-option>
+                    <q-item>
+                      <q-item-section class="text-grey">
+                        ไม่มีข้อมูล
+                      </q-item-section>
+                    </q-item>
+                  </template>
+                </q-select>
+              </div>
+            </div>
+          </div>
+          <div class="col-xs-0 col-sm-1 col-md-3 col-lg-5"></div>
+          <div class="col-xs-12 col-sm-5 col-md-3 col-lg-4">
+            <div class="row q-col-gutter-xs">
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-7">
+                <q-input
+                  standout
+                  dense
+                  v-model="filterKeyword"
+                  outlined
+                  placeholder="ค้นหา"
+                  @keydown.enter.prevent="onSearch"
+                >
+                  <template v-slot:append>
+                    <q-icon name="search" />
+                  </template>
+                </q-input>
+              </div>
+              <div class="col-xs-12 col-sm-6 col-md-6 col-lg-5">
+                <q-select
+                  dense
+                  multiple
+                  outlined
+                  emit-value
+                  map-options
+                  options-dense
+                  option-value="name"
+                  style="min-width: 140px"
+                  v-model="visibleColumns"
+                  :options="columns"
+                  :display-value="$q.lang.table.columns"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-12">
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          row-key="id"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th auto-width></q-th>
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props">
+              <q-td auto-width>
+                <q-btn
+                  v-if="checkPermission($route)?.attrIsGet"
+                  round
+                  color="info"
+                  flat
+                  dense
+                  icon="mdi-eye"
+                  @click.prevent.stop="onViewDetail(props.row, 'view')"
+                >
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsUpdate &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  round
+                  color="edit"
+                  flat
+                  dense
+                  icon="edit"
+                  @click.prevent.stop="onViewDetail(props.row, 'edit')"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                </q-btn>
+              </q-td>
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div
+                  :class="col.name === 'description' ? 'table_ellipsis' : ''"
+                >
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </div>
+    </div>
+  </q-card>
+
+  <DialogViewIssue
+    v-model:modal="modal"
+    :type="typeModal"
+    :data="dataIssue"
+    :fetch-data="fetchListIssues"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 3fc48e205..f570ed6ce 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -28,6 +28,7 @@ import ModuleCommand from "@/modules/18_command/router";
 import ModulePositionCondition from "@/modules/19_condition/router";
 import ModulePositionTemp from "@/modules/20_positionTemp/router";
 import ModuleReport from "@/modules/21_report/router";
+import ModuleIssues from "@/modules/22_issues/router";
 
 // TODO: ใช้หรือไม่?
 import { authenticated, logout } from "@/plugins/auth";
@@ -79,6 +80,7 @@ const router = createRouter({
         ...ModulePositionCondition,
         ...ModulePositionTemp,
         ...ModuleReport,
+        ...ModuleIssues,
       ],
     },
     /**
diff --git a/src/stores/positionKeycloak.ts b/src/stores/positionKeycloak.ts
new file mode 100644
index 000000000..a285c459c
--- /dev/null
+++ b/src/stores/positionKeycloak.ts
@@ -0,0 +1,60 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+export const usePositionKeycloakStore = defineStore("positionKeycloak", () => {
+  const dataPositionKeycloak = ref<any>(null);
+
+  function setPositionKeycloak(data: any) {
+    dataPositionKeycloak.value = data;
+  }
+
+  function findOrgName(obj: any) {
+    if (obj) {
+      let name =
+        obj.child4 != null &&
+        obj.child4 !== "" &&
+        obj.child3 != null &&
+        obj.child3 !== ""
+          ? obj.child4 + (obj.child3 ? "/" : "")
+          : obj.child4 != null && obj.child4 !== ""
+          ? obj.child4
+          : "";
+
+      name +=
+        obj.child3 != null &&
+        obj.child3 !== "" &&
+        obj.child2 != null &&
+        obj.child2 !== ""
+          ? obj.child3 + (obj.child2 ? "/" : "")
+          : obj.child3 != null && obj.child3 !== ""
+          ? obj.child3
+          : "";
+
+      name +=
+        obj.child2 != null &&
+        obj.child2 !== "" &&
+        obj.child1 != null &&
+        obj.child1 !== ""
+          ? obj.child2 + (obj.child1 ? "/" : "")
+          : obj.child2 != null && obj.child2 !== ""
+          ? obj.child2
+          : "";
+
+      name +=
+        obj.child1 != null &&
+        obj.child1 !== "" &&
+        obj.root != null &&
+        obj.root !== ""
+          ? obj.child1 + (obj.root ? "/" : "")
+          : obj.child1 != null && obj.child1 !== ""
+          ? obj.child1
+          : "";
+      name += obj.root != null && obj.root !== "" ? obj.root : "";
+      return name == "" ? "-" : name;
+    } else {
+      return "";
+    }
+  }
+
+  return { dataPositionKeycloak, setPositionKeycloak, findOrgName };
+});
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 8180cbd86..452e437a4 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -6,6 +6,7 @@ import { storeToRefs } from "pinia";
 import { scroll, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useMenuDataStore } from "@/stores/menuList";
+import { usePositionKeycloakStore } from "@/stores/positionKeycloak";
 import {
   tokenParsed,
   logout,
@@ -26,6 +27,7 @@ import type {
 import { tabList, tabListPlacement } from "../interface/request/main/main";
 
 import LoginLinkage from "@/components/LoginLinkage.vue";
+import DialogDebug from "@/components/Dialogs/DialogDebug.vue";
 
 // landing page config url
 const configParam = {
@@ -63,6 +65,7 @@ const modalLoginLinkage = ref<boolean>(false); //เข้าสู่ระบ
 
 // landing page redirect
 const landingPageUrl = ref<string>(configParam.landingPageUrl);
+const modalDebug = ref<boolean>(false);
 
 async function fetchmsgNoread() {
   await http
@@ -524,6 +527,7 @@ async function fetchKeycloakPosition() {
     .get(config.API.keycloakPosition())
     .then(async (res) => {
       const data = await res.data.result;
+      usePositionKeycloakStore().setPositionKeycloak(data);
       if (data.avatarName) {
         await getImg(data.profileId, data.avatarName);
       } else {
@@ -783,6 +787,21 @@ function onViewDetailNoti(url: string) {
                       </q-item-section>
                     </q-item>
 
+                    <q-item clickable @click="modalDebug = true">
+                      <q-item-section avatar>
+                        <q-avatar
+                          color="yellow-8"
+                          text-color="white"
+                          icon="mdi-bug"
+                          size="24px"
+                          font-size="14px"
+                        />
+                      </q-item-section>
+                      <q-item-section class="q-py-sm">
+                        แจ้งปัญหาการใช้งานระบบ
+                      </q-item-section>
+                    </q-item>
+
                     <q-item clickable @click="modalLoginLinkage = true">
                       <q-item-section avatar>
                         <q-avatar
@@ -1216,6 +1235,7 @@ function onViewDetailNoti(url: string) {
     </q-page-container>
     <full-loader :visibility="loader" />
     <LoginLinkage v-model:modal="modalLoginLinkage" />
+    <DialogDebug v-model:modal="modalDebug" />
   </q-layout>
 </template>