diff --git a/src/modules/02_users/components/Permissions/DialogAdd.vue b/src/modules/02_users/components/Permissions/DialogAdd.vue
index 8d2e54de..0ad3e605 100644
--- a/src/modules/02_users/components/Permissions/DialogAdd.vue
+++ b/src/modules/02_users/components/Permissions/DialogAdd.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 /** importComponents*/
 import DialogHeader from "@/components/DialogHeader.vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
+import type { Roles } from "@/modules/02_users/interface/response/Main";
 import type { FilterReqMaster } from "@/modules/02_users/interface/request/Main";
 
 /** importStore*/
@@ -34,42 +37,61 @@ const props = defineProps({
   },
 });
 
-const rows = ref<any[]>([{ name: "ชื่อ", description: "คำอธิบาย" }]);
+const rows = ref<Roles[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "name",
+    name: "roleName",
     align: "left",
     label: "ชื่อ",
     sortable: true,
-    field: "name",
+    field: "roleName",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "description",
+    name: "roleDescription",
     align: "left",
     label: "คำอธิบาย",
     sortable: true,
-    field: "description",
+    field: "roleDescription",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>(["name", "description"]);
+const visibleColumns = ref<string[]>(["roleName", "roleDescription"]);
 
 const keyword = ref<string>("");
-const selected = ref<any[]>([]);
+const selected = ref<Roles[]>([]);
 
 function closeDialog() {
   modal.value = false;
   selected.value = [];
 }
 
+function fetchListRoles() {
+  showLoader();
+  http
+    .get(config.API.managementAuth + `/list`)
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function onSubmit() {
   if (selected.value.length === 0) {
     dialogMessageNotify($q, "กรุณาเลือกสิทธิ์อย่างน้อง 1 สิทธิ์");
   } else {
     dialogConfirm($q, () => {
+      const arrayId = selected.value.map((e: Roles) => e.id);
+      console.log(arrayId);
+
       showLoader();
       closeDialog();
       props.fetchDataTable(
@@ -81,6 +103,13 @@ function onSubmit() {
     });
   }
 }
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchListRoles();
+  }
+);
 </script>
 
 <template>
diff --git a/src/modules/02_users/interface/index/Main.ts b/src/modules/02_users/interface/index/Main.ts
index e1685edd..fcb0b824 100644
--- a/src/modules/02_users/interface/index/Main.ts
+++ b/src/modules/02_users/interface/index/Main.ts
@@ -10,4 +10,46 @@ interface ItemsMenu {
   type: string;
 }
 
-export type { Pagination, ItemsMenu };
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+interface SystemList {
+  attrIsCreate: boolean;
+  attrIsDelete: boolean;
+  attrIsGet: boolean;
+  attrIsList: boolean;
+  attrIsUpdate: boolean;
+  attrOwnership: string;
+  attrPrivilege: string;
+  id: string;
+  order: 1;
+  parentId: string | null;
+  selected: boolean;
+  sysDescription: string;
+  sysName: string;
+  children?: SystemList[];
+}
+
+interface DataSystem {
+  attrIsCreate: boolean;
+  attrIsDelete: boolean;
+  attrIsGet: boolean;
+  attrIsList: boolean;
+  attrIsUpdate: boolean;
+  attrOwnership: string;
+  attrPrivilege: string;
+  authRoleId: string;
+  authSysId: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  parentNode: string;
+}
+
+export type { Pagination, ItemsMenu, DataOption, SystemList, DataSystem };
diff --git a/src/modules/02_users/interface/response/Main.ts b/src/modules/02_users/interface/response/Main.ts
index 3bdec6f4..a40d924f 100644
--- a/src/modules/02_users/interface/response/Main.ts
+++ b/src/modules/02_users/interface/response/Main.ts
@@ -99,4 +99,13 @@ interface Position {
   positionName: string;
 }
 
-export type { Users, Roles, NodeTree, PosMaster, Position };
+interface SysList {
+  id: string;
+  order: number;
+  parentId: string;
+  sysDescription: string;
+  sysName: string;
+  children: SysList[];
+}
+
+export type { Users, Roles, NodeTree, PosMaster, Position, SysList };
diff --git a/src/modules/02_users/views/listsUser.vue b/src/modules/02_users/views/listsUser.vue
index 5034adb4..82cf2711 100644
--- a/src/modules/02_users/views/listsUser.vue
+++ b/src/modules/02_users/views/listsUser.vue
@@ -84,7 +84,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     field: (row) => {
-      const names = row.roles.map((role: Roles) => role.name);
+      const names = row.roles.map((role: Roles) => role.roleName);
       return names.join(", ");
     },
   },
diff --git a/src/modules/02_users/views/permissionDetail.vue b/src/modules/02_users/views/permissionDetail.vue
index 0c1f3fd9..b0b018ce 100644
--- a/src/modules/02_users/views/permissionDetail.vue
+++ b/src/modules/02_users/views/permissionDetail.vue
@@ -5,6 +5,12 @@ import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import type {
+  DataOption,
+  SystemList,
+  DataSystem,
+} from "@/modules/02_users/interface/index/Main";
+import type { SysList } from "@/modules/02_users/interface/response/Main";
 import type { FormRole } from "@/modules/02_users/interface/request/Main";
 
 /** importStore*/
@@ -15,8 +21,7 @@ const $q = useQuasar();
 const { dialogConfirm, messageError, showLoader, hideLoader, success } =
   useCounterMixin();
 
-const attrPrivilege = ref<any[]>([]);
-const attrPrivilegeOp = ref<any[]>([
+const attrPrivilegeOp = ref<DataOption[]>([
   {
     id: "ROOT",
     name: "มีสิทธิเข้าถึงข้อมูลในทุกระดับ",
@@ -43,1053 +48,16 @@ const formData = reactive<FormRole>({
   roleDescription: "",
 });
 
-const columns = ref<any>([]);
+const sysListMain = ref<SysList[]>([]);
+const systemLists = ref<SystemList[]>([]);
 
-const systemLists = ref<any>([
-  {
-    key: "SYS_METADATA_KPI",
-    name: "ข้อมูลการประเมิน",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-    children: [
-      {
-        key: "INDICATOR",
-        name: "ตัวชี้วัด",
-        selected: false,
-        attrOwnership: false,
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-
-        children: [
-          {
-            key: "INDICATOR_PLAN",
-            name: "ตามแผน",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-          {
-            key: "INDICATOR_POSITION",
-            name: "ตามตำแหน่ง",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-          {
-            key: "INDICATOR_SPECIAL",
-            name: "งานที่ได้รับมอบหมาย",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-        ],
-      },
-      {
-        key: "COMPETENCY",
-        name: "สมรรถนะ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "STRATEGY",
-        name: "ยุทธศาสตร์",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-    ],
-  },
-  {
-    key: "SYS_ORG",
-    name: "โครงสร้างอัตรากำลัง",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-  },
-  {
-    key: "SYS_ORG_EMPLOYEE",
-    name: "อัตรากำลังลูกจ้างประจำฯ",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-  },
-  {
-    key: "SYS_REGISTRY",
-    name: "ทะเบียนประวัติ",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-  },
-  {
-    key: "COMMAND",
-    name: "ออกคำสั่ง",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-  },
-  {
-    key: "SYS_EXAM",
-    name: "สรรหา",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-    children: [
-      {
-        key: "SETTING_WEB_EXAM",
-        name: "ตั้งค่าเว็บสรรหา",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "COMPETITIVE_EXAM",
-        name: "สอบแข่งขัน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-        children: [
-          {
-            key: "MANAGE_ROUND",
-            name: "จัดการรอบสอบแข่งขัน",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-          {
-            key: "STAT_APPLY_EXAM",
-            name: "สถิติสมัครสอบแข่งขัน",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-        ],
-      },
-      {
-        key: "QUALIFY_EXAM",
-        name: "คัดเลือก",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-
-        children: [
-          {
-            key: "QUALIFY_MANAGE_ROUND",
-            name: "จัดการรอบคัดเลือก",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-          {
-            key: "QUALIFY_ROUND_DISABLED",
-            name: "จัดการรอบคัดเลือกคนพิการ",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-          {
-            key: "QUALIFY_MANAGE_LIST",
-            name: "จัดการรายชื่อคัดเลือก",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-          {
-            key: "QUALIFY_APPLY_STAT",
-            name: "สถิติสมัครคัดเลือก",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-          {
-            key: "QUALIFY_APPLY_STAT_DISABLED",
-            name: "สถิติสมัครคัดเลือกคนพิการ",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    key: "SYS_PLACEMENT",
-    name: "บรรจุ แต่งตั้ง ย้าย โอน",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-    children: [
-      {
-        key: "PLACEMENT_LIST",
-        name: "รายชื่อผู้สอบผ่าน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "PLACEMENT_TRANSFER",
-        name: "รายการขอโอน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "PLACEMENT_RECEIVE",
-        name: "รายการรับโอน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "PLACEMENT_HELP_GOVERNMENT",
-        name: "รายการช่วยราชการ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "PLACEMENT_REPATRIATE",
-        name: "รายการส่งตัวกลับ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "PLACEMENT_APPOINT",
-        name: "รายการแต่งตั้ง-เลื่อน-ย้าย",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "PLACEMENT_APPOINT_EMPLOYEE",
-        name: "ปรับระดับชั้นงาน-ย้ายลูกจ้าง",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "PLACEMENT_OTHER",
-        name: "รายการอื่นๆ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-    ],
-  },
-  {
-    key: "SYS_PROBATION",
-    name: "การทดลองปฏิบัติหน้าที่ราชการ",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-  },
-  {
-    key: "SYS_RETIREMENT",
-    name: "พ้นจากราชการ",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-
-    children: [
-      {
-        key: "RETIREMENT",
-        name: "ประกาศเกษียณ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "RESIGN",
-        name: "รายการลาออก",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "EXIT_INTERVIEW",
-        name: "Exit interview",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DECEASED",
-        name: "รายการบันทึกการถึงแก่กรรม",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DISMISS",
-        name: "รายการให้ออก",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-    ],
-  },
-  {
-    key: "SYS_INSIGNIA",
-    name: "เครื่องราชฯ",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-
-    children: [
-      {
-        key: "INSIGNIA_ROUND",
-        name: "รอบการเสนอขอ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "INSIGNIA_MANAGE",
-        name: "จัดการคำขอ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "INSIGNIA_RECORD",
-        name: "บันทึกผลการเสนอขอ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "INSIGNIA_ALLOCATE",
-        name: "จัดสรรเครื่องราชฯ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "INSIGNIA_BORROW",
-        name: "ยืม-คืนเครื่องราชฯ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "INSIGNIA_REPORT",
-        name: "รายงาน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-    ],
-  },
-  {
-    key: "SYS_LEAVE",
-    name: "การลา",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-
-    children: [
-      {
-        key: "LEAVE_ROUND",
-        name: "รอบการปฏิบัติงาน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "CHANGE_LEAVE",
-        name: "แก้ไขรอบการปฎิบัติงานผู้ใช้งาน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "WORKTIME_LIST",
-        name: "รายการลงเวลาปฏิบัติงาน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "WORKTIME_SPECIAL",
-        name: "ลงเวลากรณีพิเศษ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "LEAVE_LIST",
-        name: "รายการลา",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "LEAVE_REPORT",
-        name: "รายงานสถิติการลา",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-    ],
-  },
-  {
-    key: "SYS_DISCIPLINE",
-    name: "วินัย",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-    children: [
-      {
-        key: "DISCIPLINE_COMPLAINTS",
-        name: "เรื่องร้องเรียน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DISCIPLINE_INVESTIGATE",
-        name: "สืบสวนข้อเท็จจริง",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DISCIPLINE_DISCIPLINARY",
-        name: "สอบสวนความผิดทางวินัย",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DISCIPLINE_RESULT",
-        name: "สรุปผลการพิจารณาความผิดทางวินัย",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DISCIPLINE_SUSPEND",
-        name: "รายชื่อผู้ถูกพักราชการ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DISCIPLINE_APPEAL",
-        name: "อุทธรณ์/ร้องทุกข์",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DISCIPLINE_COMMAND",
-        name: "ออกคำสั่งลงโทษทางวินัย",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DISCIPLINE_BASIC",
-        name: "ข้อมูลพื้นฐาน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-        children: [
-          {
-            key: "DISCIPLINE_DIRECTOR",
-            name: "กรรมการ",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-          {
-            key: "DISCIPLINE_CHANNEL",
-            name: "ช่องทางการร้องเรียน",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    key: "SYS_EVALUATE",
-    name: "ประเมินบุคคล",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-    children: [
-      {
-        key: "EVALUATE_REQUEST",
-        name: "คำขอประเมิน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "EVALUATE_DIRECTOR_METTING",
-        name: "กรรมการและการประชุม",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-
-        children: [
-          {
-            key: "EVALUATE_DIRECTOR",
-            name: "กรรมการ",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-          {
-            key: "EVALUATE_METTING",
-            name: "การประชุม",
-            selected: false,
-            attrOwnership: "",
-            attrIsCreate: false,
-            attrIsList: false,
-            attrIsGet: false,
-            attrIsUpdate: false,
-            attrIsDelete: false,
-            attrPrivilege: "",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    key: "SYS_SALARY",
-    name: "เงินเดือน/ค่าจ้าง",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-    children: [
-      {
-        key: "SALARY_CHART",
-        name: "ผังบัญชีเงินเดือนข้าราชการ ฯ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "SALARY_EMPLOYEE_CHART",
-        name: "ผังบัญชีค่าจ้างลูกจ้างประจำ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "SALARY_ROUND",
-        name: "รอบการเลื่อนเงินเดือน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "SALARY_SLIP",
-        name: "เลื่อนเงินเดือนข้าราชการ ฯ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "SALARY_EMPLOYEE_SLIP",
-        name: "เลื่อนค่าจ้างลูกจ้างประจำ",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "SALARY_COMMAND",
-        name: "ออกคำสั่งเลื่อนเงินเดือน/ค่าจ้าง",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-    ],
-  },
-  {
-    key: "SYS_KPI",
-    name: "ประเมินผลการปฏิบัติราชการระดับบุคคล",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-    children: [
-      {
-        key: "KPI_Round",
-        name: "รอบการประเมิน",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "KPI_List",
-        name: "รายการการประเมินผล",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-    ],
-  },
-  {
-    key: "SYS_DEVELOPMENT",
-    name: "พัฒนาบุคลากร",
-    selected: false,
-    attrOwnership: "",
-    attrIsCreate: false,
-    attrIsList: false,
-    attrIsGet: false,
-    attrIsUpdate: false,
-    attrIsDelete: false,
-    attrPrivilege: "",
-    children: [
-      {
-        key: "DEVELOPMENT_PROJECT",
-        name: "โครงการ/หลักสูตรการฝึกอบรม",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DEVELOPMENT_HISTORY",
-        name: "ประวัติฝึกอบรม/ดูงาน ขรก.",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DEVELOPMENT_HISTORY_EMPLOYEE",
-        name: "ประวัติฝึกอบรม/ดูงานลูกจ้าง",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-      {
-        key: "DEVELOPMENT_SCHOLARSHIP",
-        name: "ทุนการศึกษา/ฝึกอบรม",
-        selected: false,
-        attrOwnership: "",
-        attrIsCreate: false,
-        attrIsList: false,
-        attrIsGet: false,
-        attrIsUpdate: false,
-        attrIsDelete: false,
-        attrPrivilege: "",
-      },
-    ],
-  },
-]);
-
-function fetchDataRole() {
+function fetchSys() {
   showLoader();
   http
-    .get(config.API.managementAuth + `/${roleId.value}`)
+    .get(config.API.managementSysList)
     .then((res) => {
-      const data = res.data.result;
-      formData.roleName = data.roleName;
-      formData.roleDescription = data.roleDescription;
+      sysListMain.value = res.data.result;
+      fetchDataRole();
     })
     .catch((err) => {
       messageError($q, err);
@@ -1099,14 +67,70 @@ function fetchDataRole() {
     });
 }
 
-const sys = ref<any[]>([]);
-function fetchSys() {
+function fetchDataRole() {
   showLoader();
   http
-    .get(config.API.managementSysList)
+    .get(config.API.managementAuth + `/${roleId.value}`)
     .then((res) => {
-      sys.value = res.data.result;
-      console.log(sys.value);
+      const data = res.data.result;
+      const sysList = data.roleAttributes;
+      formData.roleName = data.roleName;
+      formData.roleDescription = data.roleDescription;
+
+      const root: SystemList[] = [];
+      const chil: SystemList[] = [];
+      sysListMain.value.forEach((item: any) => {
+        if (item.children.length !== 0) {
+          item.children.forEach((q: SystemList) => {
+            const findChil = sysList.find(
+              (e: DataSystem) => e.authSysId === q.id
+            );
+            chil.push({
+              ...q,
+              selected: findChil ? true : false,
+              attrOwnership: findChil ? findChil.attrOwnership : "",
+              attrIsCreate: findChil ? findChil.attrIsCreate : false,
+              attrIsList: findChil ? findChil.attrIsList : false,
+              attrIsGet: findChil ? findChil.attrIsGet : false,
+              attrIsUpdate: findChil ? findChil.attrIsUpdate : false,
+              attrIsDelete: findChil ? findChil.attrIsDelete : false,
+              attrPrivilege: findChil ? findChil.attrPrivilege : "",
+            });
+          });
+          const findMainRoot = sysList.find(
+            (e: DataSystem) => e.parentNode === item.id
+          );
+          root.push({
+            ...item,
+            selected: findMainRoot ? true : false,
+            attrOwnership: "",
+            attrIsCreate: false,
+            attrIsList: false,
+            attrIsGet: false,
+            attrIsUpdate: false,
+            attrIsDelete: false,
+            attrPrivilege: "",
+            children: chil,
+          });
+        } else {
+          const findRoot = sysList.find(
+            (e: DataSystem) => e.authSysId === item.id
+          );
+          root.push({
+            ...item,
+            selected: findRoot ? true : false,
+            attrOwnership: findRoot ? findRoot.attrOwnership : "",
+            attrIsCreate: findRoot ? findRoot.attrIsCreate : false,
+            attrIsList: findRoot ? findRoot.attrIsList : false,
+            attrIsGet: findRoot ? findRoot.attrIsGet : false,
+            attrIsUpdate: findRoot ? findRoot.attrIsUpdate : false,
+            attrIsDelete: findRoot ? findRoot.attrIsDelete : false,
+            attrPrivilege: findRoot ? findRoot.attrPrivilege : "",
+          });
+        }
+      });
+
+      systemLists.value = root;
     })
     .catch((err) => {
       messageError($q, err);
@@ -1119,9 +143,45 @@ function fetchSys() {
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
+    const filterList: any = systemLists.value.filter(
+      (e: any) => e.selected === true
+    );
+    const arrayRoleAttrs = filterList.flatMap((e: any) => {
+      if (e.children.length === 0) {
+        return {
+          parentNode: e.id,
+          attrPrivilege: e.attrPrivilege,
+          attrIsDelete: e.attrIsDelete,
+          attrIsUpdate: e.attrIsUpdate,
+          attrIsGet: e.attrIsGet,
+          attrIsList: e.attrIsList,
+          attrIsCreate: e.attrIsCreate,
+          attrOwnership: e.attrOwnership,
+          authSysId: e.id,
+        };
+      } else {
+        const filterListChil = e.children.filter(
+          (e: any) =>
+            e.selected === true &&
+            e.attrOwnership !== "" &&
+            e.attrPrivilege !== ""
+        );
+        return filterListChil.map((i: any) => ({
+          parentNode: e.id,
+          attrPrivilege: i.attrPrivilege,
+          attrIsDelete: i.attrIsDelete,
+          attrIsUpdate: i.attrIsUpdate,
+          attrIsGet: i.attrIsGet,
+          attrIsList: i.attrIsList,
+          attrIsCreate: i.attrIsCreate,
+          attrOwnership: i.attrOwnership,
+          authSysId: i.id,
+        }));
+      }
+    });
     const body = {
       ...formData,
-      authRoleAttrs: [],
+      authRoleAttrs: arrayRoleAttrs,
     };
     http
       .patch(config.API.managementAuth + `/${roleId.value}`, body)
@@ -1136,11 +196,9 @@ function onSubmit() {
         hideLoader();
       });
   });
-  console.log(systemLists.value);
 }
 
 onMounted(() => {
-  fetchDataRole();
   fetchSys();
 });
 </script>
@@ -1200,7 +258,6 @@ onMounted(() => {
           flat
           bordered
           :rows="systemLists"
-          :columns="columns"
           separator="cell"
           :pagination="{
             page: 1,
@@ -1389,10 +446,11 @@ onMounted(() => {
                       (props.row.attrIsList = false),
                       (props.row.attrIsGet = false),
                       (props.row.attrIsUpdate = false),
-                      (props.row.attrIsDelete = false)
+                      (props.row.attrIsDelete = false),
+                      (props.row.attrPrivilege = '')
                   "
                 />
-                <strong>{{ props.row.name }}</strong>
+                <strong>{{ props.row.sysName }}</strong>
               </q-td>
               <q-td style="text-align: center">
                 <q-radio
@@ -1404,9 +462,10 @@ onMounted(() => {
                       (props.row.attrIsList = true),
                       (props.row.attrIsGet = true),
                       (props.row.attrIsUpdate = true),
-                      (props.row.attrIsDelete = true)
+                      (props.row.attrIsDelete = true),
+                      (props.row.attrPrivilege = 'ROOT')
                   "
-                  v-if="!props.row.children"
+                  v-if="props.row.children.length === 0"
                   :disable="!props.row.selected"
                 />
               </q-td>
@@ -1414,7 +473,7 @@ onMounted(() => {
                 <q-radio
                   v-model="props.row.attrOwnership"
                   val="STAFF"
-                  v-if="!props.row.children"
+                  v-if="props.row.children.length === 0"
                   :disable="!props.row.selected"
                 />
               </q-td>
@@ -1422,14 +481,14 @@ onMounted(() => {
                 <q-radio
                   v-model="props.row.attrOwnership"
                   val="GUEST"
-                  v-if="!props.row.children"
+                  v-if="props.row.children.length === 0"
                   :disable="!props.row.selected"
                 />
               </q-td>
               <q-td style="text-align: center">
                 <q-checkbox
                   v-model="props.row.attrIsCreate"
-                  v-if="!props.row.children"
+                  v-if="props.row.children.length === 0"
                   :disable="
                     !props.row.selected ||
                     (props.row.selected && props.row.attrOwnership === 'OWNER')
@@ -1439,7 +498,7 @@ onMounted(() => {
               <q-td style="text-align: center">
                 <q-checkbox
                   v-model="props.row.attrIsList"
-                  v-if="!props.row.children"
+                  v-if="props.row.children.length === 0"
                   :disable="
                     !props.row.selected ||
                     (props.row.selected && props.row.attrOwnership === 'OWNER')
@@ -1449,7 +508,7 @@ onMounted(() => {
               <q-td style="text-align: center">
                 <q-checkbox
                   v-model="props.row.attrIsGet"
-                  v-if="!props.row.children"
+                  v-if="props.row.children.length === 0"
                   :disable="
                     !props.row.selected ||
                     (props.row.selected && props.row.attrOwnership === 'OWNER')
@@ -1459,7 +518,7 @@ onMounted(() => {
               <q-td style="text-align: center">
                 <q-checkbox
                   v-model="props.row.attrIsUpdate"
-                  v-if="!props.row.children"
+                  v-if="props.row.children.length === 0"
                   :disable="
                     !props.row.selected ||
                     (props.row.selected && props.row.attrOwnership === 'OWNER')
@@ -1469,7 +528,7 @@ onMounted(() => {
               <q-td style="text-align: center">
                 <q-checkbox
                   v-model="props.row.attrIsDelete"
-                  v-if="!props.row.children"
+                  v-if="props.row.children.length === 0"
                   :disable="
                     !props.row.selected ||
                     (props.row.selected && props.row.attrOwnership === 'OWNER')
@@ -1478,7 +537,7 @@ onMounted(() => {
               </q-td>
               <q-td style="min-width: 120px">
                 <q-select
-                  v-if="!props.row.children"
+                  v-if="props.row.children.length === 0"
                   v-model="props.row.attrPrivilege"
                   :options="attrPrivilegeOp"
                   option-value="id"
@@ -1493,6 +552,7 @@ onMounted(() => {
                   "
                   label="สิทธิเข้าถึงข้อมูล"
                   style="min-width: 120px"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกสิทธิเข้าถึงข้อมูล'}`,]"
                 >
                 </q-select>
               </q-td>
@@ -1512,10 +572,11 @@ onMounted(() => {
                       (item.attrIsList = false),
                       (item.attrIsGet = false),
                       (item.attrIsUpdate = false),
-                      (item.attrIsDelete = false)
+                      (item.attrIsDelete = false),
+                      (item.attrPrivilege = '')
                   "
                 />
-                {{ item.name }}
+                {{ item.sysName }}
               </q-td>
               <q-td style="text-align: center">
                 <q-radio
@@ -1527,7 +588,8 @@ onMounted(() => {
                       (item.attrIsList = true),
                       (item.attrIsGet = true),
                       (item.attrIsUpdate = true),
-                      (item.attrIsDelete = true)
+                      (item.attrIsDelete = true),
+                      (item.attrPrivilege = 'ROOT')
                   "
                   :disable="!item.selected"
                 />
@@ -1606,43 +668,12 @@ onMounted(() => {
                     (item.selected && item.attrOwnership === 'OWNER')
                   "
                   label="สิทธิเข้าถึงข้อมูล"
-                  style="min-width: 120px"
+                  style="min-width: 100px"
+                  :rules="[(val:string) => !!val || `${'กรุณาเลือกสิทธิเข้าถึงข้อมูล'}`,]"
                 >
                 </q-select
               ></q-td>
             </q-tr>
-            <!-- <q-tr
-            v-if="item.children"
-            v-for="(item3, index) in item.children"
-            :key="index"
-          >
-            <q-td></q-td>
-            <q-td auto-width colspan="2">
-              <q-checkbox v-model="item3.selected" />
-              {{ item3.name }}
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item3.attrOwnership" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item3.officer" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item3.attrIsCreate" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item3.attrIsList" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item3.attrIsGet" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item3.update" />
-            </q-td>
-            <q-td style="text-align: center">
-              <q-checkbox v-model="item3.attrIsDelete" />
-            </q-td>
-          </q-tr> -->
           </template>
         </q-table>
       </div>