From 9c6ebfb4851e81a8d28319669eaf56905c9ee9e7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 21 Aug 2023 16:31:28 +0700
Subject: [PATCH] =?UTF-8?q?api=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/07_insignia/api.insignia.ts           |   8 +-
 .../07_insignia/components/2_Manage/Tab1.vue  | 446 ++++++++++++++++--
 .../07_insignia/components/2_Manage/Tab2.vue  |  69 ++-
 .../07_insignia/components/2_Manage/Tab3.vue  |  52 +-
 .../07_insignia/components/2_Manage/Tab4.vue  |  27 ++
 .../components/2_Manage/listManage.vue        |  90 +++-
 6 files changed, 633 insertions(+), 59 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index 41ccd6778..db50f6aac 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -16,6 +16,12 @@ export default {
 
   // manage
   insigniaManage: (type: string) => `${insignia}/manage/${type}`,
-  insigniaList: (insigniaPeriodId: any, ocId: string, role: string, status: any) => `${insignia}/request/${insigniaPeriodId}/${ocId}/${role}/${status}`
+  insigniaCreate: () => `${insignia}/request`,
+  insigniaList: (insigniaPeriodId: any, ocId: string, role: string, status: any) => `${insignia}/request/${insigniaPeriodId}/${ocId}/${role}/${status}`,
+  insigniaReject: (profileId: string) => `${insignia}/status/reject/${profileId}`,
+  insigniaDelete: (profileId: string) => `${insignia}/status/delete/${profileId}`,
+  insigniaEdit: (profileId: string) => `${insignia}/request/${profileId}`,
+  insigniaAgency: () => `${insignia}/request/agency`,
+  insigniaDashboard: (insigniaPeriodId: string) => `${insignia}/request/dashboard/${insigniaPeriodId}`,
 
 };
diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 39f7588c5..f96c72b1b 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
 import type { QTableProps } from "quasar";
@@ -8,13 +8,21 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const mixin = useCounterMixin();
-const { dialogRemove, dialogConfirm } = mixin;
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = mixin;
 const $q = useQuasar();
 const DataStore = useInsigniaDataStore();
 
 const modalNote = ref<boolean>(false);
-const organization = ref<number>(1);
-const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
+const modalAdd = ref<boolean>(false);
+const organization = ref<string>("");
+const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -186,6 +194,46 @@ const rows = ref<any[]>([
   },
 ]);
 
+const columns2 = ref<QTableProps["columns"]>([
+  {
+    name: "index",
+    required: true,
+    label: "ลำดับ",
+    field: "index",
+    align: "left",
+  },
+  {
+    name: "fullname",
+    required: true,
+    label: "ชื่อ-สกุล",
+    field: "fullname",
+    align: "left",
+  },
+  {
+    name: "position",
+    required: true,
+    label: "ตำแหน่งในสายงาน",
+    field: "position",
+    align: "left",
+  },
+  {
+    name: "level",
+    required: true,
+    label: "ระดับ",
+    field: "level",
+    align: "left",
+  },
+  {
+    name: "organizationOrganization",
+    required: true,
+    label: "สังกัด",
+    field: "organizationOrganization",
+    align: "left",
+  },
+]);
+// ข้อมูลตาราง (จำลอง)
+const rows2 = ref<any[]>([]);
+
 const Note = ref<string>("");
 const titleModal = ref<string>("");
 const actionModal = ref<string>("");
@@ -198,52 +246,216 @@ const props = defineProps({
   roundId: {
     type: String,
   },
+  fecthInsigniaAll: {
+    type: Function,
+  },
+  fecthInsigniaByOc: {
+    type: Function,
+  },
 });
+const typeinsignia = ref<number | string>("all");
+const typeinsigniaOptions = reactive<any>([{ id: "all", name: "ทั้งหมด" }]);
 onMounted(async () => {
-  console.log(props);
-
   organizationOptions.value = DataStore.optionsTypeOc;
-  console.log(organizationOptions.value);
-  await fecthInsignia();
+  organization.value = organizationOptions.value[0].id;
+  // if (props.fecthInsigniaAll) {
+  //   await props.fecthInsigniaAll(props.roundId, props.tab);
+  // }
+  if (organization.value !== "" || organization.value !== undefined) {
+    if (props.fecthInsigniaByOc) {
+      props.fecthInsigniaByOc(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
+    
+    }
+  }
 });
-
-const fecthInsignia = async () => {
-  for (const item of DataStore.optionsTypeOc) {
-    console.log(item.index);
-
-    // await http
-    //   .get(
-    //     config.API.insigniaList(props.roundId, item["id"], "officer", props.tab)
-    //   )
-    //   .then((res) => {
-    //     console.log(res);
-    //   })
-    //   .catch((err) => {
-    //     console.log(err);
-    //   });
+const changtypeOc = () => {
+  if (props.fecthInsigniaByOc) {
+    props.fecthInsigniaByOc(
+      props.roundId,
+      organization.value,
+      "officer",
+      props.tab
+    );
   }
 };
+const clickmodalAdd = () => {
+  showLoader();
+  fecthlistRetire();
+};
+// fecth profile
+const fecthlistRetire = async () => {
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      const id = res.data.result[0].id;
+      if (id !== "") {
+        fecthlistperson(id);
+      }
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    });
+};
+const fecthlistperson = async (id: string) => {
+  let data = [{}];
+  data = [
+    {
+      criteriaType: "is_retire",
+      criteriaValue: "false",
+    },
+    {
+      criteriaType: "is_probation",
+      criteriaValue: "false",
+    },
+  ];
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, "officer"), {
+      criterias: data,
+    })
+    .then((res) => {
+      console.log(res);
 
-const clickAction = (props: any, action: string) => {
-  Note.value = "";
-  person.value = props;
-  titleModal.value = props.name;
-  actionModal.value = action;
-  modalNote.value = true;
+      rows2.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        fullname: e.fullname == null ? "-" : e.fullname,
+        position: e.position == null ? "-" : e.position,
+        level: e.positionEmployeeLevel == null ? "-" : e.positionEmployeeLevel,
+        organizationOrganization: e.oc == null ? "-" : e.oc,
+      }));
+      modalAdd.value = true;
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const clickAdd = async (id: string) => {
+  dialogConfirm(
+    $q,
+    async () => {
+      addlistperson(id);
+    },
+    "ยืนยันการเพิ่มรายชื่อขอพระราชทานเครื่องราชฯ",
+    "ต้องการยืนยันการเพิ่มรายชื่อขอพระราชทานเครื่องราชฯ นี้หรือไม่ ?"
+  );
+};
+const addlistperson = async (id: string) => {
+  showLoader();
+  let data = {
+    profileId: id,
+    insigniaId: organization.value,
+    insigniaPeriodId: props.roundId,
+  };
+  // console.log(data);
+  await http
+    .post(config.API.insigniaCreate(), data)
+    .then(() => {
+      success($q, "เพิ่มรายชื่อสำเร็จ");
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    })
+    .finally(() => {
+      modalAdd.value = false;
+      if (props.fecthInsigniaByOc) {
+        props.fecthInsigniaByOc(
+          props.roundId,
+          organization.value,
+          "officer",
+          props.tab
+        );
+      }
+      hideLoader();
+    });
+};
+
+// const clickAction = (props: any, action: string) => {
+//   Note.value = "";
+//   person.value = props;
+//   titleModal.value = props.name;
+//   actionModal.value = action;
+//   modalNote.value = true;
+// };
+const clickEdit = () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      await listEdit();
+    },
+    "ยืนยันการแก้ไขเครื่องราชฯ ที่ยื่นขอ",
+    "ต้องการยืนยันการแก้ไขเครื่องราชฯ ที่ยื่นขอนี้หรือไม่ ?"
+  );
+};
+const listEdit = async () => {
+  let data = { insigniaId: organization.value };
+  console.log(data);
+  await http
+    .get(config.API.insigniaEdit(), data)
+    .then(() => {
+      success($q, "แก้ไขเครื่องราชฯ ที่ยื่นขอสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+};
+const clickReject = () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      await listreject();
+    },
+    "ยืนยันการย้ายข้อมูล",
+    "ต้องการยืนยันการย้ายข้อมูลนี้หรือไม่ ?"
+  );
+};
+const listreject = async () => {
+  await http
+    .get(config.API.insigniaReject())
+    .then(() => {
+      success($q, "ย้ายข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 };
 const clickDelete = () => {
-  dialogRemove($q);
-  console.log(person.value, Note.value);
+  dialogRemove(
+    $q,
+    async () => {
+      await listdelete();
+    },
+    "ยืนยันการลบออกข้ออมูล",
+    "ต้องการยืนยันการลบข้อมูลนี้หรือไม่ ?"
+  );
 };
-const clickSavenote = () => {
-  dialogConfirm($q);
-  console.log(person.value);
+const listdelete = async () => {
+  await http
+    .get(config.API.insigniaDelete())
+    .then(() => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
 };
 
 const filterKeyword = ref<string>("");
+const filterKeyword2 = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
   filterKeyword.value = "";
+  filterKeyword2.value = "";
   filterRef.value.focus();
 };
 const pagination = ref({
@@ -252,11 +464,22 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+const pagination2 = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 const paging = ref<boolean>(true);
+const paging2 = ref<boolean>(true);
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const paginationLabel2 = (start: string, end: string, total: string) => {
+  if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 </script>
 <template>
   <div class="col-12 row q-pa-md">
@@ -278,12 +501,38 @@ const paginationLabel = (start: string, end: string, total: string) => {
           :outlined="true"
           :hide-dropdown-icon="false"
           style="min-width: 150px"
+          @update:model-value="changtypeOc"
+        />
+        <q-select
+          v-model="typeinsignia"
+          label="ปรเภทเครื่องราชฯ"
+          dense
+          emit-value
+          map-options
+          :options="typeinsigniaOptions"
+          option-value="id"
+          option-label="name"
+          lazy-rules
+          hide-bottom-space
+          :readonly="false"
+          :borderless="false"
+          :outlined="true"
+          :hide-dropdown-icon="false"
+          style="min-width: 150px"
+          @update:model-value="changtypeOc"
         />
         <div>
           <q-btn size="md" icon="mdi-download" flat round color="primary">
             <q-tooltip>ดาวน์โหลด</q-tooltip>
           </q-btn>
-          <q-btn size="12px" flat round color="add" icon="mdi-plus">
+          <q-btn
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+            @click="clickmodalAdd"
+          >
             <q-tooltip>เพิ่ม</q-tooltip>
           </q-btn>
         </div>
@@ -395,11 +644,28 @@ const paginationLabel = (start: string, end: string, total: string) => {
                   dense
                 >
                   <q-menu transition-show="jump-down" transition-hide="jump-up">
-                    <q-list dense style="min-width: 120px">
+                    <q-list dense style="min-width: 250px">
                       <q-item
                         clickable
                         v-close-popup
-                        @click="clickAction(props.row, 'note')"
+                        @click="clickEdit(props.row)"
+                      >
+                        <q-item-section
+                          style="min-width: 0px"
+                          avatar
+                          class="q-py-sm"
+                        >
+                          <q-tooltip>แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-tooltip>
+                          <q-icon color="primary" size="xs" name="mdi-pencil" />
+                        </q-item-section>
+                        <q-item-section
+                          >แก้ไขเครื่องราชฯ ที่ยื่นขอ</q-item-section
+                        >
+                      </q-item>
+                      <q-item
+                        clickable
+                        v-close-popup
+                        @click="clickReject(props.row)"
                       >
                         <q-item-section
                           style="min-width: 0px"
@@ -418,7 +684,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                       <q-item
                         clickable
                         v-close-popup
-                        @click="clickAction(props.row, 'delete')"
+                        @click="clickDelete(props.row)"
                       >
                         <q-item-section
                           style="min-width: 0px"
@@ -453,11 +719,109 @@ const paginationLabel = (start: string, end: string, total: string) => {
     </div>
   </div>
 
+  <!-- add -->
+  <q-dialog v-model="modalAdd">
+    <q-card style="width: 850px; max-width: 80vw" class="q-pb-md">
+      <q-toolbar class="q-py-md">
+        <q-toolbar-title class="text-h6">เพิ่มรายชื่อ </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="modalAdd = false"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+      <div class="q-pa-md">
+        <q-toolbar style="padding: 0">
+          <q-input
+            borderless
+            outlined
+            dense
+            debounce="300"
+            placeholder="ค้นหา"
+            style="width: 850px; max-width: auto"
+            v-model="filterKeyword2"
+          >
+            <template v-slot:append>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </q-toolbar>
+        <q-table
+          flat
+          bordered
+          dense
+          :rows="rows2"
+          :columns="columns2"
+          :filter="filterKeyword2"
+          row-key="name"
+          class="custom-header-table"
+          :pagination-label="paginationLabel2"
+          v-model:pagination="pagination2"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>{{ props.rowIndex + 1 }}</q-td>
+              <!-- <q-td key="order" :props="props">
+                {{ props.row.order }}
+              </q-td> -->
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="position" :props="props">
+                {{ props.row.position }}
+              </q-td>
+              <q-td key="level" :props="props">{{ props.row.level }}</q-td>
+              <q-td key="organizationOrganization" :props="props">
+                {{ props.row.organizationOrganization }}
+              </q-td>
+              <q-td>
+                <q-btn
+                  outline
+                  :props="props"
+                  label="เพิ่ม"
+                  class="text-teal-5"
+                  @click="clickAdd(props.row.id)"
+                />
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination2.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </q-card>
+  </q-dialog>
+
+  <!-- note -->
   <q-dialog v-model="modalNote" persistent>
     <q-card style="min-width: 350px">
       <q-toolbar>
         <q-toolbar-title class="text-subtitle2 text-bold">
-          <div v-if="actionModal == 'note'">หมายเหตุ {{ titleModal }}</div>
+          <div v-if="actionModal == 'note'">
+            เป็นเหตุผลที่ไม่ยื่นขอ {{ titleModal }}
+          </div>
           <div v-if="actionModal == 'delete'">ลบออก {{ titleModal }}</div>
         </q-toolbar-title>
         <q-btn
@@ -475,10 +839,10 @@ const paginationLabel = (start: string, end: string, total: string) => {
           dense
           outlined
           type="textarea"
-          label="กรอกหมายเหตุ"
+          label="เหตุผลที่ไม่ยื่นขอ"
           v-model="Note"
           @keyup.enter="modalNote = false"
-          :rules="[(val) => !!val || 'กรอกหมายเหตุ']"
+          :rules="[(val) => !!val || 'เหตุผลที่ไม่ยื่นขอ']"
         />
       </q-card-section>
       <q-card-actions align="right" class="bg-white text-teal">
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index 720d26b59..15e972d72 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -1,9 +1,29 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import type { QTableProps } from "quasar";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
-const organization = ref<number>(1);
-const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
+const DataStore = useInsigniaDataStore();
+
+const props = defineProps({
+  tab: {
+    type: String,
+  },
+  roundId: {
+    type: String,
+  },
+  fecthInsigniaAll: {
+    type: Function,
+  },
+  fecthInsigniaByOc: {
+    type: Function,
+  },
+});
+
+const organization = ref<string>("1");
+const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -173,6 +193,50 @@ const rows = ref<any[]>([
     dateSend: "31 ม.ค. 2566",
   },
 ]);
+onMounted(async () => {
+  organizationOptions.value = DataStore.optionsTypeOc;
+  organization.value = organizationOptions.value[0].id;
+  // if (props.fecthInsigniaAll) {
+  //   await props.fecthInsigniaAll(props.roundId, props.tab);
+  // }
+  if (organization.value !== "" || organization.value !== undefined) {
+    if (props.fecthInsigniaByOc) {
+      props.fecthInsigniaByOc(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
+    }
+  }
+});
+const changtypeOc = () => {
+  if (props.fecthInsigniaByOc) {
+    props.fecthInsigniaByOc(
+      props.roundId,
+      organization.value,
+      "officer",
+      props.tab
+    );
+  }
+};
+// const fecthInsigniaAll = async () => {
+//   let data: any = [];
+//   for (const item of DataStore.optionsTypeOc) {
+//     await http
+//       .get(
+//         config.API.insigniaList(props.roundId, item["id"], "officer", props.tab)
+//       )
+//       .then((res) => {
+//         // console.log(res);
+//         data.push(res.data.result);
+//       })
+//       .catch((err) => {
+//         console.log(err);
+//       });
+//   }
+//   console.log(data);
+// };
 
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -212,6 +276,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           :outlined="true"
           :hide-dropdown-icon="false"
           style="min-width: 150px"
+          @update:model-value="changtypeOc"
         />
         <!-- <div>
           <q-btn size="md" icon="mdi-download" flat round color="primary">
diff --git a/src/modules/07_insignia/components/2_Manage/Tab3.vue b/src/modules/07_insignia/components/2_Manage/Tab3.vue
index 06e7fcf32..7a934f16f 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -1,8 +1,28 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import type { QTableProps } from "quasar";
+import { useInsigniaDataStore } from "@/modules/07_insignia/store";
 
-const organization = ref<string>(1);
-const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
+const DataStore = useInsigniaDataStore();
+
+const props = defineProps({
+  tab: {
+    type: String,
+  },
+  roundId: {
+    type: String,
+  },
+  fecthInsigniaAll: {
+    type: Function,
+  },
+  fecthInsigniaByOc: {
+    type: Function,
+  },
+});
+
+const organization = ref<string>("1");
+const organizationOptions = ref<any>([{ id: "1", name: "ทั้งหมด" }]);
 const visibleColumns = ref<string[]>([
   "no",
   "citizenId",
@@ -172,6 +192,33 @@ const rows = ref<any[]>([
     dateSend: "31 ม.ค. 2566",
   },
 ]);
+onMounted(async () => {
+  organizationOptions.value = DataStore.optionsTypeOc;
+  organization.value = organizationOptions.value[0].id;
+  // if (props.fecthInsigniaAll) {
+  //   await props.fecthInsigniaAll(props.roundId, props.tab);
+  // }
+  if (organization.value !== "" || organization.value !== undefined) {
+    if (props.fecthInsigniaByOc) {
+      props.fecthInsigniaByOc(
+        props.roundId,
+        organization.value,
+        "officer",
+        props.tab
+      );
+    }
+  }
+});
+const changtypeOc = () => {
+  if (props.fecthInsigniaByOc) {
+    props.fecthInsigniaByOc(
+      props.roundId,
+      organization.value,
+      "officer",
+      props.tab
+    );
+  }
+};
 
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -211,6 +258,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
           :outlined="true"
           :hide-dropdown-icon="false"
           style="min-width: 150px"
+          @update:model-value="changtypeOc"
         />
         <!-- <div>
           <q-btn size="md" icon="mdi-download" flat round color="primary">
diff --git a/src/modules/07_insignia/components/2_Manage/Tab4.vue b/src/modules/07_insignia/components/2_Manage/Tab4.vue
index 079f68c1f..42d619368 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab4.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab4.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
 
 const organization = ref<string>(1);
 const organizationOptions = ref<any>([{ id: 1, name: "ทั้งหมด" }]);
@@ -176,6 +184,25 @@ const rows = ref<any[]>([
   },
 ]);
 
+onMounted(async () => {
+  await fecthAgency();
+});
+
+const fecthAgency = async () => {
+  showLoader();
+  await http
+    .get(config.API.insigniaAgency())
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      messageError($q, eer);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
diff --git a/src/modules/07_insignia/components/2_Manage/listManage.vue b/src/modules/07_insignia/components/2_Manage/listManage.vue
index d0cb2e24c..5af40dfc5 100644
--- a/src/modules/07_insignia/components/2_Manage/listManage.vue
+++ b/src/modules/07_insignia/components/2_Manage/listManage.vue
@@ -37,7 +37,6 @@ const stat = ref<any>({
 });
 onMounted(async () => {
   console.log(DataStore.optionsTypeOc);
-
   await fecthlistRound();
   await fecthType();
 });
@@ -54,32 +53,81 @@ const fecthlistRound = async () => {
       // const lastIndex = optionRound.value.length;
       const lastValue = optionRound.value[0];
       round.value = lastValue.id.toString();
+      fecthStat(round.value);
     })
     .catch((err) => {
       console.log(err);
-      // messageError($q, err);
+      messageError($q, err);
     });
 };
 const fecthType = async () => {
   await http
     .get(config.API.typeOc())
     .then((res) => {
-      console.log(res);
       optiontypeOc.value = res.data.result.map((e: any) => ({
         id: e.organizationId,
         name: e.organizationName,
       }));
-      console.log(typeof optiontypeOc.value);
       DataStore.optionsTypeOc = optiontypeOc.value;
     })
     .catch((err) => {
       console.log(err);
-      // messageError($q, err);
+      messageError($q, err);
     })
     .finally(() => {
       loading.value = true;
     });
 };
+const fecthStat = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.insigniaDashboard(id))
+    .then((res) => {
+      stat.value = res.data.result;
+      // console.log(res);
+      console.log(stat.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const changround = () => {
+  fecthStat(round.value);
+};
+const fecthInsigniaAll = async (periodId: string, tab: string) => {
+  // let data: any = [];
+  // for (const item of DataStore.optionsTypeOc) {
+  //   await http
+  //     .get(config.API.insigniaList(periodId, item["id"], "officer", tab))
+  //     .then((res) => {
+  //       // console.log(res);
+  //       data.push(res.data.result);
+  //     })
+  //     .catch((err) => {
+  //       console.log(err);
+  //     });
+  // }
+  // console.log(data);
+};
+const fecthInsigniaByOc = async (
+  roundId: string,
+  ocId: string,
+  role: string,
+  status: string
+) => {
+  console.log(status);
+  await http
+    .get(config.API.insigniaList(roundId, ocId, role, status))
+    .then((res) => {
+      console.log(res);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
 </script>
 
 <template>
@@ -97,28 +145,29 @@ const fecthType = async () => {
         map-options
         option-value="id"
         option-label="name"
+        @update:model-value="changround"
       />
     </div>
     <div class="col-12 row bg-white">
       <div class="fit q-px-md q-py-sm">
         <div class="row col-12 q-col-gutter-md fit">
           <cardTop
-            :amount="stat.total"
+            :amount="stat.orgAllCount"
             label="หน่วยงานทั้งหมด"
             color="#016987"
           />
           <cardTop
-            :amount="stat.sendName"
+            :amount="stat.orgSendCount"
             label="หน่วยงานที่ส่งรายชื่อเเล้ว"
             color="#02A998"
           />
           <cardTop
-            :amount="stat.nonSend"
+            :amount="stat.orgNoSendCount"
             label="หน่วยงานที่ยังไม่ได้ส่งรายชื่อ"
             color="#2EA0FF"
           />
           <cardTop
-            :amount="stat.personSend"
+            :amount="stat.allUserUser"
             label="จำนวนคนที่ยื่นขอ"
             color="#4154B3"
           />
@@ -147,16 +196,31 @@ const fecthType = async () => {
     <q-separator />
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="pending">
-        <tab1 :tab="tab" :roundId="round" />
+        <tab1
+          :tab="tab"
+          :roundId="round"
+          :fecthInsigniaAll="fecthInsigniaAll"
+          :fecthInsigniaByOc="fecthInsigniaByOc"
+        />
       </q-tab-panel>
       <q-tab-panel name="reject">
-        <tab2 :tab="tab" />
+        <tab2
+          :tab="tab"
+          :roundId="round"
+          :fecthInsigniaAll="fecthInsigniaAll"
+          :fecthInsigniaByOc="fecthInsigniaByOc"
+        />
       </q-tab-panel>
       <q-tab-panel name="delete">
-        <tab3 :tab="tab" />
+        <tab3
+          :tab="tab"
+          :roundId="round"
+          :fecthInsigniaAll="fecthInsigniaAll"
+          :fecthInsigniaByOc="fecthInsigniaByOc"
+        />
       </q-tab-panel>
       <q-tab-panel name="organization">
-        <tab4 :tab="tab" />
+        <tab4 :tab="tab" :roundId="round" />
       </q-tab-panel>
     </q-tab-panels>
   </q-card>