diff --git a/src/api/appeal/api.appeal.ts b/src/api/appeal/api.appeal.ts
new file mode 100644
index 0000000..8da5fff
--- /dev/null
+++ b/src/api/appeal/api.appeal.ts
@@ -0,0 +1,12 @@
+import env from "../index"
+
+const appeal = `${env.API_URI}/discipline/complaint_appeal`
+const profile = `${env.API_URI}/profile/keycloak`
+
+export default {
+	profileBykeycloak:()=>`${profile}`,
+	appealMainList:(status: string, type: string, year: number, page: number, pageSize: number, keyword: string)=>`${appeal}/user?status=${status}&type=${type}&year=${year}&page=${page}&pageSize=${pageSize}&keyword=${keyword}`,
+	appealAdd:()=>`${appeal}`,
+
+	appealByID:(id:string)=>`${appeal}/${id}`
+}
diff --git a/src/app.config.ts b/src/app.config.ts
index 03429af..e607537 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -1,10 +1,11 @@
 /**ใช้รวมไฟล์ย่อยๆ ของ api แต่ละไฟล์ */
 
 /** API Metadata */
-import testtest from "./api/test/api.test";
-import retirementResign from "./api/leave/api.leave";
-import placementTransfer from "./api/transfer/api.transfer";
-import message from "./api/api.message";
+import testtest from "./api/test/api.test"
+import retirementResign from "./api/leave/api.leave"
+import placementTransfer from "./api/transfer/api.transfer"
+import appeal from "./api/appeal/api.appeal"
+import message from "./api/api.message"
 import evaluate from "./api/evaluate/api.evaluate";
 
 const API = {
@@ -13,6 +14,7 @@ const API = {
   ...placementTransfer,
   ...message,
   ...evaluate,
+  ...appeal
 };
 
 export default {
diff --git a/src/modules/06_evaluate/components/Tab1.vue b/src/modules/06_evaluate/components/Tab1.vue
index 4267dd7..ab59551 100644
--- a/src/modules/06_evaluate/components/Tab1.vue
+++ b/src/modules/06_evaluate/components/Tab1.vue
@@ -128,8 +128,15 @@ onMounted(() => {
           </div>
         </div>
         <div class="col-3 text-right">
-          <q-btn v-if="store.step === 1" :href="externalLink" target="_blank" outline color="blue" no-caps >
-            ไปยัง ก.พ. เพื่อตรวจสอบข้อมูล
+          <q-btn
+            v-if="store.step === 1"
+            :href="externalLink"
+            target="_blank"
+            outline
+            color="blue"
+            no-caps
+          >
+            ตรวจสอบคุณสมบัติกับ ก.พ.
           </q-btn>
         </div>
       </div>
diff --git a/src/modules/07_appealComplain/interface/index/main.ts b/src/modules/07_appealComplain/interface/index/main.ts
new file mode 100644
index 0000000..cf8152e
--- /dev/null
+++ b/src/modules/07_appealComplain/interface/index/main.ts
@@ -0,0 +1,8 @@
+interface DataOption {
+    id:string
+    name:string
+}
+
+export type {
+    DataOption
+}
\ No newline at end of file
diff --git a/src/modules/07_appealComplain/interface/request/appeal.ts b/src/modules/07_appealComplain/interface/request/appeal.ts
new file mode 100644
index 0000000..5c30bc9
--- /dev/null
+++ b/src/modules/07_appealComplain/interface/request/appeal.ts
@@ -0,0 +1,14 @@
+interface MyObjectAppealRef {
+    type: object | null;
+    title: object | null;
+    description: object | null;
+    caseType: object | null;
+    caseNumber: object | null;
+
+    [key: string]: any;
+}
+
+
+export type {
+    MyObjectAppealRef
+}
\ No newline at end of file
diff --git a/src/modules/07_appealComplain/interface/response/mainType.ts b/src/modules/07_appealComplain/interface/response/mainType.ts
new file mode 100644
index 0000000..eb6dcd7
--- /dev/null
+++ b/src/modules/07_appealComplain/interface/response/mainType.ts
@@ -0,0 +1,68 @@
+interface FormType {
+  status: string
+  type: string
+  year: number
+}
+
+interface RowList {
+  id: string
+  title: string
+  description: string
+  status: string
+  type: string
+  year: number
+  caseType: string
+  caseNumber: string
+  fullname: string
+  citizenId: string
+  profileId: string
+  lastUpdatedAt: string | null
+}
+
+interface MainList {
+  id: string
+  title: string
+  description: string
+  status: string
+  type: string
+  year: number
+  caseType: string
+  caseNumber: string
+  fullname: string
+  citizenId: string
+  profileId: string
+  lastUpdatedAt: Date
+}
+
+interface EditDataList {
+  id: string
+  title: string
+  description: string
+  status: string
+  type: string
+  year: number
+  caseType: string
+  caseNumber: string
+  fullname: string
+  citizenId: string
+  profileId: string
+  lastUpdatedAt: string
+  historyStatus: object | null
+  disciplineComplaint_Appeal_Docs: object | null
+}
+
+interface HistoryStatusType {
+  status: string
+  createdAt: string
+}
+interface FileObType {
+  id: string
+  pathName: string
+  fileName: string
+}
+
+export type {
+  FormType, RowList, MainList, EditDataList,
+  HistoryStatusType,
+  FileObType
+}
\ No newline at end of file
diff --git a/src/modules/07_appealComplain/router.ts b/src/modules/07_appealComplain/router.ts
index 41d9493..3a9305c 100644
--- a/src/modules/07_appealComplain/router.ts
+++ b/src/modules/07_appealComplain/router.ts
@@ -4,6 +4,7 @@
 
 const mainPage = () => import("@/modules/07_appealComplain/views/Main.vue");
 const addPage = () => import("@/modules/07_appealComplain/views/Add.vue");
+const editPage = () => import("@/modules/07_appealComplain/views/Edit.vue");
 
 export default [
   {
@@ -27,7 +28,7 @@ export default [
   {
     path: "/appeal-complain/:id",
     name: "appealComplainView",
-    component: addPage,
+    component: editPage,
     meta: {
       Auth: true,
       Key: [7],
diff --git a/src/modules/07_appealComplain/store.ts b/src/modules/07_appealComplain/store.ts
index 17af986..ca90ea4 100644
--- a/src/modules/07_appealComplain/store.ts
+++ b/src/modules/07_appealComplain/store.ts
@@ -1,5 +1,94 @@
 import { defineStore } from "pinia";
+import { ref } from 'vue'
 
+import { useCounterMixin } from "@/stores/mixin";
+import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
+import type { QTableProps } from "quasar";
+import type { RowList, MainList } from '@/modules/07_appealComplain/interface/response/mainType'
 export const useAppealComplainStore = defineStore("appealComplainStore", () => {
-  return {};
+
+
+  const mixin = useCounterMixin()
+  const { date2Thai } = mixin
+
+  const rows = ref<RowList[]>([]);
+  const visibleColumns = ref<string[]>([]);
+  const columns = ref<QTableProps["columns"]>([]);
+
+  const typeOptions = ref<DataOption[]>([
+    { id: "APPEAL", name: "อุทธรณ์" },
+    { id: "COMPLAIN", name: "ร้องทุกข์" },
+  ]);
+
+  const statusOptions = ref<DataOption[]>([
+    { id: "ALL", name: "ทั้งหมด" },
+    { id: "NEW", name: "ใหม่" },
+    { id: "RECEIVE_DOC", name: "ได้รับเอกสารแล้ว" },
+    { id: "RECEIVE_APPEAL", name: "รับอุทธรณ์/ร้องทุกข์" },
+    { id: "NO_RECEIVE_APPEAL", name: "ไม่รับอุทธรณ์/ร้องทุกข์" },
+    { id: "DIAGNOSTIC", name: "ตั้งองค์คณะวินิจฉัย" },
+    { id: "SUMMARY", name: "สรุปผลการพิจารณา" },
+    { id: "DONE", name: "ปิดคำร้อง" },
+  ]);
+
+  function fetchAppealComplain(data: MainList[]) {
+    let dataList: RowList[] = data.map((e: MainList) => ({
+      id: e.id,
+      profileId: e.profileId,
+      type: typeConvert(e.type),
+      title: e.title,
+      description: e.description,
+      year: e.year,
+      fullname: e.fullname,
+      citizenId: e.citizenId,
+      caseType: e.caseType,
+      caseNumber: e.caseNumber,
+      lastUpdatedAt: date2Thai(e.lastUpdatedAt),
+      status: statusTothai(e.status),
+    }));
+    rows.value = dataList;
+  }
+
+
+  const typeConvert = (val: string) => {
+    switch (val) {
+      case "APPEAL":
+        return "อุทธรณ์";
+      case "COMPLAIN":
+        return "ร้องทุกข์";
+      default:
+        return "-";
+    }
+  };
+
+  const statusTothai = (val: string) => {
+    switch (val) {
+      case "NEW":
+        return "ใหม่";
+      case "RECEIVE_DOC":
+        return "ได้รับเอกสารแล้ว";
+      case "RECEIVE_APPEAL":
+        return "รับอุทธรณ์/ร้องทุกข์";
+      case "NO_RECEIVE_APPEAL":
+        return "ไม่รับอุทธรณ์/ร้องทุกข์";
+      case "DIAGNOSTIC":
+        return "ตั้งองค์คณะวินิจฉัย";
+      case "SUMMARY":
+        return "สรุปผลการพิจารณา";
+      case "DONE":
+        return "ปิดคำร้อง";
+      default:
+        return "-";
+    }
+  };
+
+  return {
+    visibleColumns,
+    columns,
+    fetchAppealComplain,
+    rows,
+    typeOptions,
+    statusOptions
+
+  };
 });
diff --git a/src/modules/07_appealComplain/views/Add.vue b/src/modules/07_appealComplain/views/Add.vue
index 30370b8..3ce3b26 100644
--- a/src/modules/07_appealComplain/views/Add.vue
+++ b/src/modules/07_appealComplain/views/Add.vue
@@ -1,205 +1,91 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
-import { useQuasar } from "quasar"
-import { useRouter, useRoute } from "vue-router"
-import { useCounterMixin } from "@/stores/mixin"
-import http from "@/plugins/http"
-import config from "@/app.config"
-import type { QForm } from "quasar"
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QForm } from "quasar";
 
-const router = useRouter()
-const $q = useQuasar()
-const mixin = useCounterMixin()
-const myform = ref<QForm | null>(null)
-const { fails, success, messageError, showLoader, hideLoader } = mixin
+import Form from "@/modules/07_appealComplain/views/Form.vue";
 
-/**
- * ตัวแปรที่ใช้งาน
- */
-const route = useRoute()
-const files = ref<any>()
-const tranferOrg = ref("")
-const noteReason = ref("")
-const id = ref<string>("")
-const nameFile = ref<string>("")
-const routeName = router.currentRoute.value.name
+const router = useRouter();
+const $q = useQuasar();
+const mixin = useCounterMixin();
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
+const { fails, success, messageError, showLoader, hideLoader } = mixin;
+
+const formProfile = reactive<any>({
+  profileId: "",
+  fullname: "",
+  citizenId: "",
+});
+function getProFile() {
+  showLoader();
+  http
+    .get(config.API.profileBykeycloak())
+    .then((res) => {
+      const data = res.data.result;
+      formProfile.profileId = data.id;
+      formProfile.fullname = `${data.prefix}${data.firstName} ${data.lastName}`;
+      formProfile.citizenId = data.citizenId;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+function onSubmit(data: any) {
+  const formData = new FormData();
+  formData.append("profileId", data.profileId);
+  formData.append("citizenId", data.citizenId);
+  formData.append("fullname", data.fullname);
+  formData.append("title", data.title);
+  formData.append("description", data.description);
+  formData.append("type", data.type);
+  formData.append("year", data.year);
+  formData.append("caseType", data.caseType);
+  formData.append("caseNumber", data.caseNumber);
+  formData.append("file", data.files);
+  showLoader();
+  http
+    .post(config.API.appealAdd(), formData)
+    .then((res) => {
+      /** รอรับ id จาก response */
+      // router.push(`/appeal-complain/${res.data.result}`);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
 onMounted(() => {
-	if (route.params.id !== undefined) {
-		id.value = route.params.id.toString()
-		fecthDataTransfer(id.value)
-	}
-})
-
-const saveData = async () => {
-	if (myform.value != null) {
-		await myform.value.validate().then(async (saveDataTest: Boolean) => {
-			if (saveDataTest) {
-				saveTransfer()
-			}
-		})
-	}
-}
-
-//บันทึกข้อมูลการโอน
-const saveTransfer = () => {
-	$q.dialog({
-		title: "ยืนยันการยื่นข้อมูลการโอน",
-		message: "ต้องการยื่นข้อมูลการโอนนี้ใช่หรือไม่?",
-		cancel: {
-			flat: true,
-			color: "negative",
-		},
-		persistent: true,
-	})
-		.onOk(async () => {
-			if (files.value == undefined) {
-				fails($q, "กรุณากรอกอัพโหลดเอกสารเพิ่มเติม")
-			} else {
-				createTransfer()
-			}
-		})
-		.onCancel(() => {})
-		.onDismiss(() => {})
-}
-
-/**
- * ฟังก์ชั่นสร้างขอโอน
- */
-const createTransfer = async () => {
-	const formData = new FormData()
-
-	const blob = files.value.slice(0, files.value[0].size)
-	const newFile = new File(blob, nameFile.value, {
-		type: files.value[0].type,
-	})
-	formData.append("Organization", tranferOrg.value)
-	formData.append("Reason", noteReason.value)
-	formData.append("file", newFile)
-	await http
-		.post(config.API.listtransfer(), formData)
-		.then((res: any) => {
-			success($q, "บันทึกข้อมูลสำเร็จ")
-			router.push(`/transfer`)
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-}
-
-/**
- * ฟังก์ชั่นเรียกข้อมูลจาก Api
- * @param id ไอดีของข้อมูล
- */
-const fecthDataTransfer = async (id: string) => {
-	showLoader()
-	await http
-		.get(config.API.transferByid(id))
-		.then((res: any) => {
-			let data = res.data.result
-			tranferOrg.value = data.organization
-			noteReason.value = data.reason
-			files.value = data.docs
-		})
-		.catch((e: any) => {
-			messageError($q, e)
-		})
-		.finally(() => {
-			hideLoader()
-		})
-}
-
-/**
- * ฟังก์ชั่นดาว์โหลดอัพโหลดไฟล์
- */
-const fileDocDataUpload = ref<File[]>([])
-const filesNull = () => {
-	files.value = null
-}
-//อัพโหลดไฟล์
-const fileUploadDoc = async (file: any) => {
-	fileDocDataUpload.value.push(file)
-	nameFile.value = file[0].name
-	files.value = file
-}
+  getProFile();
+});
 </script>
 
 <template>
-	<div class="col-12 row justify-center">
-		<div class="col-xs-12 col-sm-12 col-md-11">
-			<div class="toptitle text-white col-12 row items-center">
-				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
-				<div v-if="routeName == 'addTransfer'">เพิ่มเรื่องขอโอน</div>
-				<div v-else>รายละเอียดเรื่องขอโอน</div>
-			</div>
-			<q-form ref="myform" class="col-12">
-				<q-card bordered>
-					<div class="col-12 row q-col-gutter-md q-pa-md">
-						<div class="col-xs-12 col-sm-12">
-							<div class="col-12 row q-pa-sm q-col-gutter-sm">
-								<q-input
-									class="col-12"
-									dense
-									outlined
-									v-model="tranferOrg"
-									label="หน่วยงานที่ขอโอนไป"
-									:readonly="routeName != 'addTransfer'"
-									:rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
-								/>
-								<q-input
-									class="col-12"
-									dense
-									outlined
-									v-model="noteReason"
-									label="เหตุผล"
-									type="textarea"
-									:readonly="routeName != 'addTransfer'"
-									:rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
-								/>
-								<div class="col-12 row" v-if="routeName == 'addTransfer'">
-									<q-uploader
-										bordered
-										flat
-										class="col-12"
-										accept=".jpg,.png,.pdf,.csv,.doc"
-										url="http://localhost:4444/upload"
-										label="เอกสารเพิ่มเติม"
-										type="file"
-										@added="fileUploadDoc"
-										@removed="filesNull"
-									/>
-								</div>
-								<div class="col-12 row" v-if="routeName != 'addTransfer'">
-									<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
-										<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
-									</div>
-									<q-card bordered flat class="full-width">
-										<q-list separator>
-											<q-item v-for="file in files" :key="file.key" class="q-my-xs">
-												<q-item-section>
-													<q-item-label class="full-width ellipsis">
-														{{ file.fileName }}
-													</q-item-label>
-
-													<q-item-label caption> </q-item-label>
-												</q-item-section>
-											</q-item>
-										</q-list>
-									</q-card>
-								</div>
-							</div>
-						</div>
-					</div>
-					<q-separator v-if="routeName == 'addTransfer'" />
-					<div class="row col-12 q-pa-md" v-if="routeName == 'addTransfer'">
-						<q-space />
-						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอโอน" @click="saveData" />
-					</div>
-				</q-card>
-			</q-form>
-		</div>
-	</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        เพิ่มอุทธรณ์/ร้องทุกข์
+      </div>
+      <Form :on-submit="onSubmit" :form-profile="formProfile" />
+    </div>
+  </div>
 </template>
diff --git a/src/modules/07_appealComplain/views/Edit.vue b/src/modules/07_appealComplain/views/Edit.vue
new file mode 100644
index 0000000..edbc59b
--- /dev/null
+++ b/src/modules/07_appealComplain/views/Edit.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { QForm } from "quasar";
+import type {
+  EditDataList,
+  HistoryStatusType,
+  FileObType,
+} from "@/modules/07_appealComplain/interface/response/mainType";
+import Form from "@/modules/07_appealComplain/views/Form.vue";
+
+const router = useRouter();
+const route = useRoute();
+
+const id = ref<string>(route.params.id as string);
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const myform = ref<QForm | null>(null);
+const { fails, success, messageError, showLoader, hideLoader } = mixin;
+
+const historyStatusOb = reactive<HistoryStatusType>({
+  status: "",
+  createdAt: "",
+});
+
+const fileOb = reactive<FileObType>({
+  id: "",
+  pathName: "",
+  fileName: "",
+});
+
+const data = reactive<EditDataList>({
+  id: "",
+  title: "",
+  description: "",
+  status: "",
+  type: "",
+  year: new Date().getFullYear(),
+  caseType: "",
+  caseNumber: "",
+  fullname: "",
+  citizenId: "",
+  profileId: "",
+  lastUpdatedAt: "",
+  historyStatus: [historyStatusOb],
+  disciplineComplaint_Appeal_Docs: [fileOb],
+});
+function getData() {
+  showLoader();
+  http
+    .get(config.API.appealByID(id.value))
+    .then((res) => {
+      console.log(res);
+      const dataList = res.data.result;
+      data.id = dataList.id;
+      data.title = dataList.title;
+      data.description = dataList.description;
+      data.status = dataList.status;
+      data.type = dataList.type;
+      data.year = dataList.year;
+      data.caseType = dataList.caseType;
+      data.caseNumber = dataList.caseNumber;
+      data.fullname = dataList.fullname;
+      data.citizenId = dataList.citizenId;
+      data.profileId = dataList.profileId;
+      data.lastUpdatedAt = dataList.lastUpdatedAt;
+      data.disciplineComplaint_Appeal_Docs =
+        dataList.disciplineComplaint_Appeal_Docs;
+      data.historyStatus = dataList.historyStatus;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">
+        <q-btn
+          icon="mdi-arrow-left"
+          unelevated
+          round
+          dense
+          flat
+          color="primary"
+          class="q-mr-sm"
+          @click="router.go(-1)"
+        />
+        แก้ไขอุทธรณ์/ร้องทุกข์
+      </div>
+      <Form :data="data" />
+    </div>
+  </div>
+</template>
diff --git a/src/modules/07_appealComplain/views/Form.vue b/src/modules/07_appealComplain/views/Form.vue
new file mode 100644
index 0000000..f9e63d6
--- /dev/null
+++ b/src/modules/07_appealComplain/views/Form.vue
@@ -0,0 +1,400 @@
+<script setup lang="ts">
+import { ref, reactive, defineProps, watch } from "vue";
+import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import type { MyObjectAppealRef } from "@/modules/07_appealComplain/interface/request/appeal";
+import type {
+  EditDataList,
+  HistoryStatusType,
+  FileObType,
+} from "@/modules/07_appealComplain/interface/response/mainType";
+const $q = useQuasar();
+
+const isReadOnly = ref<boolean>(false);
+const printForm = ref<string>("");
+const mixin = useCounterMixin();
+const { dialogConfirm, modalWarning } = mixin;
+const dataStore = useAppealComplainStore();
+
+const historyStatusOb = reactive<HistoryStatusType>({
+  status: "",
+  createdAt: "",
+});
+
+const fileOb = reactive<FileObType>({
+  id: "",
+  pathName: "",
+  fileName: "",
+});
+
+const formData = reactive<any>({
+  title: "",
+  type: "",
+  description: "",
+  year: new Date().getFullYear().toString(),
+  caseType: "",
+  caseNumber: "",
+  fullname: "",
+  profileId: "",
+  citizenId: "",
+  disciplineComplaint_Appeal_Docs: [fileOb],
+  historyStatus: [historyStatusOb],
+});
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  formProfile: {
+    type: Object,
+    default: null,
+  },
+  onSubmit: {
+    type: Function,
+    default: () => "",
+  },
+  getData: {
+    type: Function,
+    default: () => "",
+  },
+});
+
+/** ตัวแปร validate */
+const typeRef = ref<Object | null>(null);
+const titleRef = ref<Object | null>(null);
+const descriptionRef = ref<Object | null>(null);
+const caseTypeRef = ref<Object | null>(null);
+const caseNumberRef = ref<Object | null>(null);
+
+const objectAppeal: MyObjectAppealRef = {
+  type: typeRef,
+  title: titleRef,
+  description: descriptionRef,
+  caseType: caseTypeRef,
+  caseNumber: caseNumberRef,
+};
+
+/*** ฟังก์ชั่นสำหรับ validate ฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectAppeal) {
+    if (Object.prototype.hasOwnProperty.call(objectAppeal, key)) {
+      const property = objectAppeal[key];
+      if (property.value && typeof property.value.validate === "function") {
+        const isValid = property.value.validate();
+        hasError.push(isValid);
+      }
+    }
+  }
+  if (hasError.every((result) => result === true)) {
+    if (formData.files.length === 0) {
+      modalWarning($q, "ข้อความแจ้งเตือน", "กรุณาอัปโหลดไฟล์");
+    } else {
+      onSubmit(formData);
+    }
+  } else {
+    console.log("ไม่ผ่าน ");
+    console.log(hasError);
+  }
+}
+
+watch(props.formProfile, () => {
+  if (props.formProfile !== null) {
+    formData.fullname = props.formProfile.fullname;
+    formData.profileId = props.formProfile.profileId;
+    formData.citizenId = props.formProfile.citizenId;
+  }
+});
+
+watch(props.data, () => {
+  isReadOnly.value = true;
+
+  formData.id = props.data.id;
+  formData.title = props.data.title;
+  formData.description = props.data.description;
+  formData.status = props.data.status;
+  formData.type = props.data.type;
+  formData.year = props.data.year;
+  formData.caseType = props.data.caseType;
+  formData.caseNumber = props.data.caseNumber;
+  formData.fullname = props.data.fullname;
+  formData.citizenId = props.data.citizenId;
+  formData.profileId = props.data.profileId;
+  formData.lastUpdatedAt = props.data.lastUpdatedAt;
+  formData.disciplineComplaint_Appeal_Docs =
+    props.data.disciplineComplaint_Appeal_Docs;
+  formData.historyStatus = props.data.historyStatus;
+  // dataStore.getRow([
+  //   {
+  //     profileId: props.data.profileId,
+  //     fullname: props.data.fullname,
+  //     citizenId: props.data.citizenId,
+  //   },
+  // ]);
+});
+function filePrint() {
+  console.log("print");
+}
+
+function inputEdit(val: boolean) {
+  return {
+    "full-width cursor-pointer ": val,
+    "full-width cursor-pointer inputgreen": !val,
+  };
+}
+
+function downLoadFile(path: string) {
+  window.open(path, "_blank");
+}
+function onSubmit(data: any) {
+  dialogConfirm(
+    $q,
+    async () => {
+      props.onSubmit(data);
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+  );
+}
+</script>
+<template>
+  <div class="row">
+    <div class="col-sm-12 col-md-12">
+      <form @submit.prevent="validateForm">
+        <q-card bordered>
+          <div class="q-pa-md">
+            <div class="q-gutter-y-sm">
+              <div class="row">
+                <q-btn
+                  v-if="formData.historyStatus[0].status === 'NEW'"
+                  v-model="printForm"
+                  color="blue"
+                  label="พิมพ์แบบฟอร์มคำร้อง"
+                  @click="filePrint"
+                />
+              </div>
+              <div
+                class="q-gutter-sm"
+                v-if="formData.historyStatus[0].status === 'NEW'"
+              >
+                <q-banner
+                  inline-actions
+                  bordered
+                  class="bg-red-1 text-red border-red q-pa-md"
+                >
+                  <q-icon name="mdi-information-outline" size="20px" />
+                  คำอุทธรณ์/ร้องทุกข์นี้จะยังไม่สมบูรณ์
+                  จนกว่าผู้อุทธรณ์/ร้องทุกข์ จะ “Print แบบฟอร์มคำร้อง” จากระบบ
+                  พร้อม เอกสารหลักฐานทั้งหมดเป็น Hard Copy <br />
+                  แล้วส่งไปรษณีย์ให้ กพค. หรือ
+                  นำเอกสารทั้งหมดไปส่งด้วยตนเองที่ชั้น 14 อาคารศรีจุลทรัพย์
+                </q-banner>
+              </div>
+              <div class="row q-gutter-x-sm">
+                <div class="col-3">
+                  <q-select
+                    :class="inputEdit(isReadOnly)"
+                    :readonly="isReadOnly"
+                    ref="typeRef"
+                    v-model="formData.type"
+                    label="ประเภท"
+                    dense
+                    outlined
+                    emit-value
+                    map-options
+                    option-label="name"
+                    option-value="id"
+                    :options="dataStore.typeOptions"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกประเภท'}`]"
+                    lazy-rules
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-3">
+                  <div class="col-3">
+                    <q-input
+                      :class="inputEdit(isReadOnly)"
+                      :readonly="isReadOnly"
+                      ref="titleRef"
+                      :rules="[
+                        (val) => !!val || 'กรุณากรอกเรื่องอุทธรณ์/ร้องทุกข์',
+                      ]"
+                      v-model="formData.title"
+                      dense
+                      outlined
+                      label="เรื่องอุทธรณ์/ร้องทุกข์"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-12">
+                  <q-input
+                    :class="inputEdit(isReadOnly)"
+                    :readonly="isReadOnly"
+                    ref="descriptionRef"
+                    :rules="[
+                      (val) => !!val || 'กรุณากรอกรายละเอียดเรื่องร้องทุกข์',
+                    ]"
+                    v-model="formData.description"
+                    dense
+                    outlined
+                    label="รายละเอียดเรื่องร้องทุกข์"
+                    type="textarea"
+                    rows="5"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row q-gutter-x-sm">
+                <div class="col-3">
+                  <datepicker
+                    menu-class-name="modalfix"
+                    v-model="formData.year"
+                    class="col-2"
+                    :locale="'th'"
+                    autoApply
+                    year-picker
+                    :enableTimePicker="false"
+                    :readonly="isReadOnly"
+                  >
+                    <template #year="{ year }">{{ year + 543 }}</template>
+                    <template #year-overlay-value="{ value }">{{
+                      parseInt(value + 543)
+                    }}</template>
+                    <template #trigger>
+                      <q-input
+                        :class="inputEdit(isReadOnly)"
+                        :readonly="isReadOnly"
+                        dense
+                        lazy-rules
+                        outlined
+                        :model-value="Number(formData.year) + 543"
+                        :label="`${'ปีงบประมาณ'}`"
+                      >
+                        <template v-slot:prepend>
+                          <q-icon
+                            name="event"
+                            class="cursor-pointer"
+                            style="color: var(--q-primary)"
+                          >
+                          </q-icon>
+                        </template>
+                      </q-input>
+                    </template>
+                  </datepicker>
+                </div>
+
+                <div class="col-3">
+                  <q-input
+                    :class="inputEdit(isReadOnly)"
+                    :readonly="isReadOnly"
+                    ref="caseTypeRef"
+                    v-model="formData.caseType"
+                    dense
+                    outlined
+                    :rules="[(val) => !!val || 'กรุณากรอกประเภทคดี']"
+                    lazy-rules
+                    label="ประเภทคดี"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-3">
+                  <q-input
+                    :class="inputEdit(isReadOnly)"
+                    :readonly="isReadOnly"
+                    ref="caseNumberRef"
+                    v-model="formData.caseNumber"
+                    dense
+                    outlined
+                    :rules="[(val) => !!val || 'กรุณากรอกเลขที่คดี']"
+                    lazy-rules
+                    label="เลขที่คดี"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+              <div class="row" v-if="!isReadOnly">
+                <!-- multiple
+                    use-chips -->
+                <div class="col-12">
+                  <q-file
+                    ref="fileRef"
+                    v-model="formData.files"
+                    label="อัปโหลดเอกสารหลักฐาน"
+                    flat
+                    dense
+                    outlined
+                    hide-bottom-space
+                    bg-color="white"
+                  />
+                </div>
+              </div>
+              <q-card bordered class="col-12 row" v-if="isReadOnly">
+                <div
+                  class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
+                >
+                  <div class="q-pl-sm text-weight-bold text-dark">
+                    เอกสารเพิ่มเติม
+                  </div>
+                </div>
+                <q-card
+                  flat
+                  class="full-width"
+                  v-if="formData.disciplineComplaint_Appeal_Docs.length !== 0"
+                >
+                  <q-list separator>
+                    <q-item
+                      v-for="file in formData.disciplineComplaint_Appeal_Docs"
+                      :key="file.id"
+                      class="q-my-xs"
+                    >
+                      <q-item-section>
+                        <q-item-label class="full-width ellipsis">
+                          {{ file.fileName }}
+                        </q-item-label>
+                      </q-item-section>
+                      <q-item-section side>
+                        <q-btn
+                          unelevated
+                          round
+                          dense
+                          flat
+                          icon="mdi-download"
+                          outline
+                          color="primary"
+                          @click="downLoadFile(file.pathName)"
+                        >
+                          <q-tooltip>ดาวห์โหลดเอกสาร</q-tooltip>
+                        </q-btn>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+                <div class="col-12 q-pa-sm" v-else>
+                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+                </div>
+              </q-card>
+            </div>
+          </div>
+          <div v-if="!isReadOnly">
+            <q-separator />
+            <div class="row col-12 q-pa-sm">
+              <q-space />
+              <q-btn
+                id="onSubmit"
+                type="submit"
+                label="บันทึก"
+                color="secondary"
+                ><q-tooltip>บันทึก</q-tooltip></q-btn
+              >
+            </div>
+          </div>
+        </q-card>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/07_appealComplain/views/Main.vue b/src/modules/07_appealComplain/views/Main.vue
index 59f3605..4133f8b 100644
--- a/src/modules/07_appealComplain/views/Main.vue
+++ b/src/modules/07_appealComplain/views/Main.vue
@@ -1,42 +1,69 @@
+useA
 <script setup lang="ts">
 import type { QTableProps } from "quasar";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useTransferDataStore } from "@/modules/02_transfer/store";
+import { useAppealComplainStore } from "@/modules/07_appealComplain/store";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import Table from "@/components/Table.vue";
 
+import type { FormType } from "@/modules/07_appealComplain/interface/response/mainType";
+import type { DataOption } from "@/modules/07_appealComplain/interface/index/main";
+
+const currentPage = ref<number>(1);
+const maxPage = ref<number>(1);
+const page = ref<number>(1);
+const rowsPerPage = ref<number>(10);
+
+const filterKeyword = ref<string>("");
+const dataStore = useAppealComplainStore();
 const transferData = useTransferDataStore();
 const { statusText } = transferData;
 const router = useRouter();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { date2Thai, messageError, showLoader, hideLoader } = mixin;
-
+const type = ref<DataOption[]>([
+  { id: "ALL", name: "ทั้งหมด" },
+  ...dataStore.typeOptions,
+]);
 /**
  * ตั้งค่า pagination
  */
-const initialPagination = ref({
-  rowsPerPage: 0,
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+  descending: true,
+  page: page.value,
+  rowsPerPage: rowsPerPage.value,
 });
 
 /**
  * เพิ่มหัวข้อตาราง
  */
 const filter = ref<string>("");
-const rows = ref<any>([]);
-const visibleColumns = ref<String[]>([
+
+const formData = reactive<FormType>({
+  type: "ALL",
+  status: "ALL",
+  year: new Date().getFullYear(),
+});
+
+const visibleColumns = ref<string[]>([
   "no",
-  "date",
-  "position",
-  "noPos",
-  "level",
-  "salary",
-  "transfer",
-  "statustext",
+  "title",
+  "type",
+  "year",
+  "caseType",
+  "caseNumber",
+  "fullname",
+  "citizenId",
+  "lastUpdatedAt",
+  "status",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -49,102 +76,116 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px; width:5px;",
   },
   {
-    name: "date",
+    name: "title",
     align: "left",
-    label: "วันที่",
+    label: "เรื่องที่อุทธรณ์/ร้องทุกข์",
     sortable: true,
-    field: "date",
+    field: "title",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:15%;",
   },
   {
-    name: "position",
+    name: "type",
     align: "left",
-    label: "ตำแหน่ง",
+    label: "ประเภท",
     sortable: true,
-    field: "position",
+    field: "type",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:15%;",
   },
   {
-    name: "noPos",
+    name: "year",
     align: "left",
-    label: "ตำแหน่งเลขที่",
+    label: "ปีงบประมาณ",
     sortable: true,
-    field: "noPos",
+    field: "year",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "caseType",
     align: "left",
-    label: "อันดับ/ระดับ",
+    label: "ประเภทคดี",
     sortable: true,
-    field: "level",
+    field: "caseType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "salary",
+    name: "caseNumber",
     align: "left",
-    label: "เงินเดือน",
+    label: "คดีเลขที่",
     sortable: true,
-    field: "salary",
+    field: "caseNumber",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "transfer",
+    name: "fullname",
     align: "left",
-    label: "หน่วยงานที่ขอโอนไป",
+    label: "ชื่อ-นามสกุลผู้อุทธรณ์/ร้องทุกข์",
     sortable: true,
-    field: "transfer",
+    field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "statustext",
+    name: "citizenId",
     align: "left",
-    label: "สถานะ",
+    label: "รหัสบัตรประชาชน",
     sortable: true,
-    field: "statustext",
+    field: "citizenId",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width:10%;",
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "status",
+    align: "left",
+    label: "สถานะของคำร้อง",
+    sortable: false,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(async () => {
-  await fecthListTransfer();
-});
-
 //นำข้อมูลมาแสดง
-const fecthListTransfer = async () => {
-  //   showLoader();
-  //   await http
-  //     .get(config.API.listUserTransfer())
-  //     .then((res: any) => {
-  //       let data = res.data.result;
-  //       rows.value = data.map((e: any) => ({
-  //         id: e.id,
-  //         date: date2Thai(e.createdAt),
-  //         status: e.status,
-  //         statustext: statusText(e.status),
-  //         position: e.organizationPositionOld,
-  //         noPos: e.posNo,
-  //         level: e.positionLevel,
-  //         salary: e.salary,
-  //         transfer: e.organization,
-  //       }));
-  //     })
-  //     .catch((e: any) => {
-  //       messageError($q, e);
-  //     })
-  //     .finally(() => {
-  //       hideLoader();
-  //     });
+const getData = async () => {
+  showLoader();
+  await http
+    .get(
+      config.API.appealMainList(
+        formData.status,
+        formData.type,
+        formData.year,
+        currentPage.value,
+        rowsPerPage.value,
+        filterKeyword.value
+      )
+    )
+    .then((res: any) => {
+      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      let data = res.data.result.data;
+      dataStore.fetchAppealComplain(data);
+      console.log(data);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 /**
@@ -160,6 +201,49 @@ const clickAdd = async () => {
 const clickBack = () => {
   router.push(`/`);
 };
+
+function dataUpdate() {
+  getData();
+}
+
+function filterFn() {
+  getData();
+}
+
+watch(
+  () => currentPage.value,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    getData();
+  }
+);
+
+watch(
+  () => pagination.value.rowsPerPage,
+  () => {
+    rowsPerPage.value = pagination.value.rowsPerPage;
+    currentPage.value = 1;
+    getData();
+  }
+);
+
+function editPage(id:string){
+  router.push(`/appeal-complain/${id}`);
+}
+function redirectToPageadd() {
+  // dataStore.rowsAdd = []
+  router.push(`/appeal-complain/add`);
+}
+
+/**
+ * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+ */
+onMounted(async () => {
+  dataStore.visibleColumns = visibleColumns.value;
+  dataStore.columns = columns.value;
+
+  await getData();
+});
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -179,55 +263,217 @@ const clickBack = () => {
       </div>
       <div class="col-12">
         <q-card bordered class="q-pa-md">
-          <Table
-            style="max-height: 80vh"
-            :rows="rows"
-            :columns="columns"
-            :filter="filter"
-            :visible-columns="visibleColumns"
-            v-model:inputfilter="filter"
-            v-model:inputvisible="visibleColumns"
-            :pagination="initialPagination"
-            :inputShow="false"
-            :add="clickAdd"
-            :titleText="''"
-          >
-            <template #columns="props">
-              <q-tr
-                :props="props"
-                class="cursor-pointer"
-                @click="router.push(`/transfer/` + props.row.id)"
+          <div class="row q-mb-sm">
+            <div>
+              <q-btn
+                id="addComplaints"
+                for="addComplaints"
+                size="12px"
+                flat
+                round
+                color="primary"
+                icon="mdi-plus"
+                @click="redirectToPageadd()"
+                ><q-tooltip>เพิ่มการอุทธรณ์/ร้องทุกข์</q-tooltip></q-btn
               >
-                <q-td key="no" :props="props">
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td key="date" :props="props">
-                  {{ props.row.date }}
-                </q-td>
-                <q-td key="position" :props="props">
-                  {{ props.row.position }}
-                </q-td>
-                <q-td key="noPos" :props="props">
-                  {{ props.row.noPos }}
-                </q-td>
-                <q-td key="level" :props="props">
-                  {{ props.row.level }}
-                </q-td>
-                <q-td key="salary" :props="props">
-                  {{ props.row.salary }}
-                </q-td>
-                <q-td key="transfer" :props="props">
-                  {{ props.row.transfer }}
-                </q-td>
-                <q-td key="statustext" :props="props">
-                  {{ props.row.statustext }}
+            </div>
+          </div>
+          <div class="row col-12 q-col-gutter-sm q-mb-sm">
+            <div class="col-2">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.year"
+                class="col-2"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:model-value="dataUpdate"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    lazy-rules
+                    outlined
+                    :model-value="Number(formData.year) + 543"
+                    :label="`${'ปีงบประมาณ'}`"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-2">
+              <q-select
+                v-model="formData.type"
+                label="ประเภท"
+                dense
+                outlined
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="type"
+                @update:model-value="dataUpdate"
+              />
+            </div>
+            <div class="col-2">
+              <q-select
+                v-model="formData.status"
+                label="สถานะ"
+                dense
+                outlined
+                emit-value
+                map-options
+                option-label="name"
+                option-value="id"
+                :options="dataStore.statusOptions"
+                @update:model-value="dataUpdate"
+              />
+            </div>
+            <q-space />
+
+            <q-input
+              class="col-xs-12 col-sm-3 col-md-2"
+              id="filterTable"
+              for="filterTable"
+              dense
+              outlined
+              v-model="filterKeyword"
+              label="ค้นหา"
+              debounce="300"
+              @keydown.enter.prevent="filterFn"
+            >
+              <template v-slot:append>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+
+            <q-select
+              id="visibleColumns"
+              for="visibleColumns"
+              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
+              class="col-xs-12 col-sm-3 col-md-2"
+            />
+          </div>
+          <q-table
+            flat
+            bordered
+            dense
+            class="custom-table2"
+            style="max-height: 80vh"
+            :rows="dataStore.rows"
+            :columns="dataStore.columns"
+            :visible-columns="dataStore.visibleColumns"
+            v-model:pagination="pagination"
+            :rows-per-page-options="[10, 25, 50, 100]"
+          >
+            <template v-slot:pagination="scope">
+              <q-pagination
+                v-model="currentPage"
+                active-color="primary"
+                color="dark"
+                :max="Number(maxPage)"
+                size="sm"
+                boundary-links
+                direction-links
+              ></q-pagination>
+            </template>
+            <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              style="color: #000000; font-weight: 500"
+            >
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </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="editPage(props.row.id)">
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div>
+                    {{ col.value }}
+                  </div>
                 </q-td>
               </q-tr>
             </template>
-          </Table>
+          </q-table>
         </q-card>
       </div>
     </div>
   </div>
 </template>
-<style></style>
+<style lang="scss">
+.icon-color {
+  color: #4154b3;
+}
+
+.custom-table2 {
+  max-height: 64vh;
+
+  .q-table tr:nth-child(odd) td {
+    background: white;
+  }
+
+  .q-table tr:nth-child(even) td {
+    background: #f8f8f8;
+  }
+
+  .q-table thead tr {
+    background: #ecebeb;
+  }
+
+  .q-table thead tr th {
+    position: sticky;
+  }
+
+  .q-table td:nth-of-type(2) {
+    z-index: 3 !important;
+  }
+
+  .q-table th:nth-of-type(2),
+  .q-table td:nth-of-type(2) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  /* this will be the loading indicator */
+  .q-table thead tr:last-child th {
+    /* height of all previous header rows */
+    top: 48px;
+  }
+
+  .q-table thead tr:first-child th {
+    top: 0;
+  }
+}
+</style>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 32d167a..b3e06e2 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -600,7 +600,7 @@ export const useCounterMixin = defineStore("mixin", () => {
         title: title,
         message: message,
         icon: "warning",
-        color: "warning",
+        color: "orange",
         onlycancel: true,
       },
     });