diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index d3dd56997..65a175fd1 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -3,4 +3,16 @@
  */
 import env from "../index";
 
-export default {};
+const retirement = `${env.API_URI}/retirement`
+
+
+export default {
+    profile: (type: string, year: number) => `${retirement}/profile/${type}/${year}`,
+    profileRetire: (retireId: string) => `${retirement}/profile/${retireId}`,
+    getprofileRetire: (retireId: string) => `${retirement}/${retireId}`,
+    createnote: () => `${retirement}/reason/`,
+    reasonId: (retireId:string) => `${retirement}/reason/${retireId}`,
+    
+
+
+};
diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index 524d25955..2fe61b0ba 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const {} = mixin;
+const { messageError, success } = mixin;
 
 const modal = ref<boolean>(false);
 
@@ -98,6 +100,21 @@ const rows = ref<any>([
   },
 ]);
 const filter = ref<string>("");
+watch(modal, () => {
+  if (modal.value === true) {
+    fecthProfile();
+  }
+});
+const fecthProfile = async () => {
+  await http
+    .get(config.API.getprofileRetire("1234"))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
 const clickAdd = () => {
   $q.dialog({
     title: "ยืนยันการเพิ่มข้อมูล",
@@ -110,6 +127,17 @@ const clickAdd = () => {
   })
     .onOk(async () => {
       console.log("เพิ่มข้อมูล");
+      await http
+        .put(config.API.profileRetire("123"))
+        .then(() => {
+          success($q, "เพิ่มข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          fecthProfile();
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 36e4e6956..b58028815 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -1,21 +1,39 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
 import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const route = useRoute();
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const {} = mixin;
+const { showLoader, hideLoader, messageError, success } = mixin;
 const no = route.params.id;
 const modalNote = ref<boolean>(false);
 const note = ref<string>("");
 
 onMounted(() => {
   console.log(no);
+  fecthlist();
+  console.log(visibleNote.value);
 });
+const fecthlist = async () => {
+  showLoader();
+  await http
+    .get(config.API.profile("emplayee", 2023))
+    .then((res: any) => {
+      console.log(res);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const columns = ref<any["columns"]>([
   {
     name: "index",
@@ -179,7 +197,8 @@ const visibleColumns = ref<any>([
 ]);
 const filter = ref<string>("");
 
-const clickDelete = () => {
+const clickDelete = (prop: any) => {
+  console.log(prop);
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@@ -190,7 +209,17 @@ const clickDelete = () => {
     persistent: true,
   })
     .onOk(async () => {
-      console.log("ลบข้อมูล");
+      await http
+        .delete(config.API.profileRetire("123"))
+        .then(() => {
+          success($q, "ลบข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          fecthlist();
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -198,7 +227,26 @@ const clickDelete = () => {
 const backHistory = () => {
   window.history.back();
 };
+watch(modalNote, () => {
+  if (modalNote.value === true) {
+    fetchReason();
+  }
+});
+const fetchReason = async () => {
+  await http
+    .get(config.API.reasonId("123"))
+    .then((res: any) => {
+      console.log(res);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const saveNote = () => {
+  console.log(note.value);
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูลข้อมูล",
     message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
@@ -210,10 +258,26 @@ const saveNote = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล");
+      await http
+        .post(config.API.createnote(), note.value)
+        .then(() => {
+          success($q, "บันทึกข้อมูล");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          fecthlist();
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+const visibleNote = computed(() => {
+  if (note.value === "" || note.value === undefined) {
+    return true;
+  }
+});
 </script>
 
 <template>
@@ -346,6 +410,7 @@ const saveNote = () => {
               <q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
               <q-td>
                 <q-btn
+                  :props="props"
                   flat
                   round
                   class="text-teal-5"
@@ -364,8 +429,9 @@ const saveNote = () => {
                   class="text-red-14"
                   icon="mdi-delete"
                   size="md"
-                  @click="clickDelete"
-                />
+                  @click="clickDelete(props.row)"
+                  ><q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+                >
               </q-td>
             </q-tr>
           </template>
@@ -405,7 +471,12 @@ const saveNote = () => {
       </q-card-section>
 
       <q-card-actions align="right">
-        <q-btn  label="บักทึก" color="secondary" @click="saveNote" />
+        <q-btn
+          label="บักทึก"
+          color="secondary"
+          @click="saveNote"
+          :disable="visibleNote"
+        />
       </q-card-actions>
     </q-card>
   </q-dialog>