diff --git a/components/Master/CardList.vue b/components/Master/CardList.vue
index 7529570..d31f2f3 100644
--- a/components/Master/CardList.vue
+++ b/components/Master/CardList.vue
@@ -12,7 +12,7 @@ const state = ref(false)
 
 </script>
 <template>
-  <v-card elevation="10" style="overflow: hidden;min-width: 300px;" @click="state = true">
+  <v-card elevation="10" style="overflow: hidden;min-width: 300px;" @click="state = true; emit('detail', props?.item)">
     <template v-slot:prepend>
       <v-avatar size="50">
         <Icon icon="solar:user-circle-broken" height="32" />
@@ -30,5 +30,5 @@ const state = ref(false)
     </template> -->
   </v-card>
 
-  <MasterDialogModal v-if="state" :stateValue="state" @stateValue="val => state = val" />
+  <!-- <MasterDialogModal v-if="state" :stateValue="state" @stateValue="val => state = val" /> -->
 </template>
\ No newline at end of file
diff --git a/components/Master/DialogModal.vue b/components/Master/DialogModal.vue
index 180036f..6b14176 100644
--- a/components/Master/DialogModal.vue
+++ b/components/Master/DialogModal.vue
@@ -2,7 +2,7 @@
 import { ref, watch, defineProps } from 'vue';
 
 const props = defineProps({
-  stateValue: { type: Boolean, required: true }
+  stateValue: { type: Boolean, required: true },
 });
 
 const isActive = ref(props.stateValue);
diff --git a/components/Master/formDetail.vue b/components/Master/formDetail.vue
new file mode 100644
index 0000000..6d423a4
--- /dev/null
+++ b/components/Master/formDetail.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import typeUser from "@/data/dummy/keuangan.type_user.json";
+import role_menu from "@/data/dummy/keuangan.role_menu.json";
+import menu from "@/data/dummy/keuangan.menu.json";
+
+import {useRoleMode} from "@/stores/api/roleMenu"
+import {useMenu} from "@/stores/api/menu"
+import {useTypeUser} from "@/stores/api/typeUser"
+
+const {getMenu} = useMenu()
+const {getTypeUser} = useTypeUser()
+
+const {roleMenuById} = storeToRefs(useRoleMode())
+const {listMenu} = storeToRefs(useMenu())
+const {listTypeUser} = storeToRefs(useTypeUser())
+const data = ref<any>([])
+
+const dataMenu = async() => {
+    await getMenu()
+    await getTypeUser()
+    // console.log('ini semua tipe:',listTypeUser.value);
+    return roleMenuById.value.data.map((role_menu: any) => {
+        const menuItem = listMenu.value.find((menu:any) => menu._id == role_menu.menu_id)
+        const type_user= listTypeUser.value.find((type_user:any) => type_user._id == role_menu.type_user_id)
+        // console.log("ini menunya:",menuItem);
+    return {
+      _id: role_menu._id,
+      menu: menuItem?.display || '-',
+      type_user: type_user?.display || '-',
+      accessAdd: role_menu.access?.[0]?.add || 0,
+      accessUpdate: role_menu.access?.[1]?.update || 0,
+      accessRead: role_menu.access?.[2]?.read || 0,  
+      accessDelete: role_menu.access?.[3]?.delete || 0
+    }
+  });
+//   console.log(data)
+};
+
+const onSubmit = async() => {
+    // console.log("ini disimpan:",data.value?.data.typeUser);
+    // console.log("ini disimpan:",data.value?.form$.data);
+    // await getTypeUser(data.value?.form$.data)
+}
+onMounted(async () => {
+//   console.log(roleMenuById.value.data);
+  data.value = await dataMenu()
+  console.log(data.value);
+})
+
+const columns=ref([
+    {label:'Nama Menu',key:'menu'},
+    {label:'Tambah',key:'accessAdd'},
+    {label:'Ubah',key:'accessUpdate'},
+    {label:'Baca',key:'accessRead'},
+    {label:'Hapus',key:'accessDelete'},
+    {label:'Aksi',key:'actions'},
+])
+</script>
+
+<template>
+  <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
+    <!-- {{roleMenuById.data}} -->
+     <!-- {{dataMenu}} -->
+     <!-- {{data}} -->
+    <MasterTable :columns="columns" :data="data"/>
+  </div>
+</template>
diff --git a/components/Master/formDetail1.vue b/components/Master/formDetail1.vue
new file mode 100644
index 0000000..c45692d
--- /dev/null
+++ b/components/Master/formDetail1.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import typeUser from "@/data/dummy/keuangan.type_user.json";
+import role_menu from "@/data/dummy/keuangan.role_menu.json";
+import menu from "@/data/dummy/keuangan.menu.json";
+
+import { useRoleMode } from "@/stores/api/roleMenu";
+import { useMenu } from "@/stores/api/menu";
+import { useTypeUser } from "@/stores/api/typeUser";
+
+const { getMenu } = useMenu();
+const { getTypeUser } = useTypeUser();
+
+const { roleMenuById } = storeToRefs(useRoleMode());
+const { listMenu } = storeToRefs(useMenu());
+const { listTypeUser } = storeToRefs(useTypeUser());
+const data = ref<any>([]);
+const menuItem = ref<any>([]);
+const type_user = ref<any>([]);
+
+const dataDetail = ref(null)
+
+const dataMenu = async () => {
+  await getMenu();
+  await getTypeUser();
+//   console.log("ini roleMenu:",roleMenuById.value.data);
+  // console.log('ini semua tipe:',listTypeUser.value);
+  return roleMenuById.value.data.map((role_menu: any) => {
+    menuItem.value = listMenu.value.find(
+      (menu: any) => menu._id == role_menu.menu_id
+    );
+    console.log("ini menunya:", menuItem.value);
+    type_user.value = listTypeUser.value.find(
+      (type_user: any) => type_user._id == role_menu.type_user_id
+    );
+    // console.log("ini menunya:",menuItem);
+    return {
+      _id: role_menu._id,
+      menu: menuItem?.value.display || "-",
+      type_user: type_user?.value.display || "-",
+      accessAdd: role_menu.access?.[0]?.add || 0,
+      accessUpdate: role_menu.access?.[1]?.update || 0,
+      accessRead: role_menu.access?.[2]?.read || 0,
+      accessDelete: role_menu.access?.[3]?.delete || 0,
+    };
+  });
+  //   console.log(data)
+};
+
+const checkMenu = () => {
+    // var arr = listMenu.value.filter((i:any) => !roleMenuById.value.data.includes(i._id))
+    // https://stackoverflow.com/questions/33577868/filter-array-not-in-another-array
+    var arr = listMenu.value.filter((i:any) => !roleMenuById.value.data.map((r:any) => r.menu_id).includes(i._id))
+    if(arr.length != 0){
+        data.value.push(...arr.map((i:any) => ({menu:i.display,accessAdd:0,accessUpdate:0,accessRead:0,accessDelete:0})))
+    }
+    // console.log("yang belum ada di role menu",arr)
+}
+
+const onSubmit = async () => {
+  // console.log("ini disimpan:",data.value?.data.typeUser);
+  console.log("ini disimpan:",dataDetail.value?.form$.data);
+  // await getTypeUser(data.value?.form$.data)
+};
+onMounted(async () => {
+  //   console.log(roleMenuById.value.data);
+  data.value = await dataMenu();
+  console.log(checkMenu())
+  console.log(data.value);
+});
+
+// const columns = ref([
+//   { label: "Nama Menu", key: "menu" },
+//   { label: "Tambah", key: "accessAdd" },
+//   { label: "Ubah", key: "accessUpdate" },
+//   { label: "Baca", key: "accessRead" },
+//   { label: "Hapus", key: "accessDelete" },
+//   { label: "Aksi", key: "actions" },
+// ]);
+</script>
+
+<template>
+  <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
+  <!-- {{roleMenuById.data}} -->
+  <!-- {{dataMenu}} -->
+  <!-- {{data}} -->
+  <pre>{{ data }}</pre>
+  <!-- <MasterTable :columns="columns" :data="data"/> -->
+
+
+  <Vueform ref="dataDetail" validate-on="change|step" method="post" :endpoint="onSubmit">
+    <GridElement
+      name="gridTable"
+      :presets="['grid-table']"
+      :cols="5"
+      :rows="2"
+      :grid="[
+        [
+          ['Nama Menu', 1, 1, null, null],
+          ['Tambah', 1, 1, null, null],
+          ['Ubah', 1, 1, null, null],
+          ['Baca', 1, 1, null, null],
+          ['Hapus', 1, 1, null, null],
+        ],
+        [
+          ['', 1, 1, null, null],
+          [
+            {
+              name: 'accessAdd',
+              type: 'checkbox',
+              text: 'Ya',
+              builder: {
+                type: 'checkbox',
+                label: 'Checkbox',
+              },
+            },
+            1,
+            1,
+            null,
+            null,
+          ],
+          [
+            {
+              name: 'accessUpdate',
+              type: 'checkbox',
+              text: 'Ya',
+              builder: {
+                type: 'checkbox',
+                label: 'Checkbox',
+              },
+            },
+            1,
+            1,
+            null,
+            null,
+          ],
+          [
+            {
+              name: 'accessRead',
+              type: 'checkbox',
+              text: 'Ya',
+              builder: {
+                type: 'checkbox',
+                label: 'Checkbox',
+              },
+            },
+            1,
+            1,
+            null,
+            null,
+          ],
+          [
+            {
+              name: 'accessDelete',
+              type: 'checkbox',
+              text: 'Ya',
+              builder: {
+                type: 'checkbox',
+                label: 'Checkbox',
+              },
+            },
+            1,
+            1,
+            null,
+            null,
+          ],
+        ],
+      ]"
+    />
+    <ButtonElement
+      name="primaryButton"
+      button-label="Simpan"
+      :submits="true"
+      align="right"
+    />
+  </Vueform>
+    </div>
+</template>
diff --git a/components/Master/formTypeUser.vue b/components/Master/formTypeUser.vue
index ed77b66..1803f45 100644
--- a/components/Master/formTypeUser.vue
+++ b/components/Master/formTypeUser.vue
@@ -6,7 +6,7 @@ const {getTypeUser} = useTypeUser()
 const onSubmit = async() => {
     // console.log("ini disimpan:",data.value?.data.typeUser);
     // console.log("ini disimpan:",data.value?.form$.data);
-    await getTypeUser(data.value?.form$.data)
+    // await getTypeUser(data.value?.form$.data)
 }
 </script>
 
diff --git a/data/dummy/keuangan.role_menu.json b/data/dummy/keuangan.role_menu.json
index be99ea3..10544f6 100644
--- a/data/dummy/keuangan.role_menu.json
+++ b/data/dummy/keuangan.role_menu.json
@@ -2,20 +2,24 @@
   "_id": {
     "$oid": "683da37c1b8c132fda4b32f7"
   },
-  "type_user_id": "683d57b2bccc67d467a9e10f",
-  "menu_id": "683d582ebccc67d467a9e114",
+  "type_user_id": {
+    "$oid": "683d57b2bccc67d467a9e10f"
+  },
+  "menu_id": {
+    "$oid": "683d582ebccc67d467a9e114"
+  },
   "access": [
     {
-      "add": 0
+      "add": 1
     },
     {
-      "update": 0
+      "update": 1
     },
     {
-      "read": 0
+      "read": 1
     },
     {
-      "delete": 0
+      "delete": 1
     }
   ]
 },
@@ -123,4 +127,25 @@
       "delete": 0
     }
   ]
+},
+{
+  "_id": {
+    "$oid": "683f35251b8c132fda4b3338"
+  },
+  "type_user_id": "683d5805bccc67d467a9e110",
+  "menu_id": "683d582ebccc67d467a9e114",
+  "access": [
+    {
+      "add": 1
+    },
+    {
+      "update": 1
+    },
+    {
+      "read": 1
+    },
+    {
+      "delete": 1
+    }
+  ]
 }]
\ No newline at end of file
diff --git a/pages/Setting/typeUser/index.vue b/pages/Setting/typeUser/index.vue
index b57d390..aa9ac77 100644
--- a/pages/Setting/typeUser/index.vue
+++ b/pages/Setting/typeUser/index.vue
@@ -1,31 +1,44 @@
 <script setup lang="ts">
 // import encounter from "@/data/dummy/encounter.json";
-import typeUser from "@/data/dummy/keuangan.type_user.json";
+// import typeUser from "@/data/dummy/keuangan.type_user.json";
 import role_menu from "@/data/dummy/keuangan.role_menu.json";
 import menu from "@/data/dummy/keuangan.menu.json";
 import { ref } from "vue";
+import {useTypeUser} from "@/stores/api/typeUser"
+import {useRoleMode} from "@/stores/api/roleMenu"
+
+const {getTypeUser} = useTypeUser()
+const {getRoleMenuById} = useRoleMode()
+
+const {listTypeUser} =storeToRefs(useTypeUser())
+const {typeUser} =storeToRefs(useRoleMode())
 
-// console.log(typeUser);
-// console.log(role_menu);
-// console.log(menu);
 const state = ref(false)
-const detailType = (item) => {
-  console.log(item); //simpan pinia
-  navigateTo(`/Setting/typeUser/HakAkses`);
+const type = ref('')
+const detailType = async(item:any) => {
+  // console.log(item._id); //simpan pinia
+  await getRoleMenuById(item._id)
+  type.value='detail'
+  state.value= true
+  // navigateTo(`/Setting/typeUser/HakAkses`);
 };
 // const dialog = ref(false);
 // const detail = ref(false);
+onMounted(async() => {
+  await getTypeUser()
+  // console.log(listTypeUser);
+})
 </script>
 <!-- ini list -->
 <template>
   <div class="d-flex pt-6 align-center justify-end">
-        <v-btn class="mr-16" color="primary" variant="tonal" @click="state= !state"><v-icon>mdi-plus</v-icon> Tipe User</v-btn>
+        <v-btn class="mr-16" color="primary" variant="tonal" @click="state= !state; type='create'"><v-icon>mdi-plus</v-icon> Tipe User</v-btn>
   </div>
   <v-row no-gutters>
     <v-col cols="12" md="4">
       <div class="d-flex justify-space-between">
-        <template v-if="typeUser && typeUser.length > 0">
-          <v-col v-for="(item, index) in typeUser" :key="index">
+        <template v-if="listTypeUser && listTypeUser.length > 0">
+          <v-col v-for="(item, index) in listTypeUser" :key="index">
             <MasterCardList :item="item" @detail="detailType" />
           </v-col>
         </template>
@@ -40,7 +53,9 @@ const detailType = (item) => {
   <MasterDialogModal v-if="state" :stateValue="state" @stateValue="val => state = val" >
     <template v-slot:text>
       <!-- <p>coba ini</p> -->
-       <MasterFormTypeUser />
+       {{ type }}
+       <MasterFormTypeUser v-if="type=='create'"/>
+       <MasterFormDetail1 v-if="type=='detail'"/>
     </template>
   </MasterDialogModal>
 </template>
diff --git a/server/api/menu/listMenu.get.ts b/server/api/menu/listMenu.get.ts
new file mode 100644
index 0000000..9edbc87
--- /dev/null
+++ b/server/api/menu/listMenu.get.ts
@@ -0,0 +1,4 @@
+export default defineEventHandler(async(event)=> {
+    const a = await $fetch("http://10.10.150.131:8080/api/menu/getlist")
+    return a
+})
\ No newline at end of file
diff --git a/server/api/roleMenu/roleMenu.post.ts b/server/api/roleMenu/roleMenu.post.ts
new file mode 100644
index 0000000..bbd01b5
--- /dev/null
+++ b/server/api/roleMenu/roleMenu.post.ts
@@ -0,0 +1,11 @@
+export default defineEventHandler(async(event)=> {
+    const body = await readBody(event)
+    console.log(body)
+    const a = await $fetch(`http://10.10.150.131:8080/api/menu/role/type/${body}`,{
+        headers: {
+        "Content-Type": "application/json",
+      },
+      method: "GET",
+    })
+    return a
+})
\ No newline at end of file
diff --git a/server/api/typeUser/listTypeUser.get.ts b/server/api/typeUser/listTypeUser.get.ts
new file mode 100644
index 0000000..554238a
--- /dev/null
+++ b/server/api/typeUser/listTypeUser.get.ts
@@ -0,0 +1,4 @@
+export default defineEventHandler(async(event)=> {
+    const a = await $fetch("http://10.10.150.131:8080/api/menu/type")
+    return a
+})
\ No newline at end of file
diff --git a/stores/api/menu.ts b/stores/api/menu.ts
new file mode 100644
index 0000000..3b457d5
--- /dev/null
+++ b/stores/api/menu.ts
@@ -0,0 +1,21 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+export const useMenu = defineStore("menu", () => {
+  const listMenu = ref<any>([]);
+  const getMenu = async () => {
+    // await $fetch("http://10.10.150.131:8080/api/menu/getlist", {
+    await $fetch("/api/menu/listMenu", {
+        // mode: "no-cors",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        method:"GET",
+    })
+    .then((res) => {
+        listMenu.value = res
+        console.log(listMenu.value);
+    });
+    // return listMenu;
+};
+  return { getMenu,listMenu };
+});
diff --git a/stores/api/roleMenu.ts b/stores/api/roleMenu.ts
new file mode 100644
index 0000000..5e71271
--- /dev/null
+++ b/stores/api/roleMenu.ts
@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+export const useRoleMode = defineStore("roleMode", () => {
+  const typeUser = ref<any>([]);
+  const roleMenuById = ref<any>([]);
+  const getRoleMenuById = async (body: Record<string, any>) => {
+    typeUser.value = body;  
+    // console.log(typeUser.value);
+    // await $fetch("http://10.10.150.131:8080/api/menu/getlist", {
+    await $fetch(`/api/roleMenu/roleMenu`, {
+      // mode: "no-cors",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+      body: JSON.stringify(body),
+    }).then((res) => {
+      roleMenuById.value = res;
+    //   console.log(roleMenuById.value);
+    });
+    // return roleMenuById;
+  };
+  return { getRoleMenuById, roleMenuById, typeUser };
+});
diff --git a/stores/api/typeUser.ts b/stores/api/typeUser.ts
index f535983..6e0c473 100644
--- a/stores/api/typeUser.ts
+++ b/stores/api/typeUser.ts
@@ -1,22 +1,23 @@
 import { defineStore } from "pinia";
 import axios from "axios";
 export const useTypeUser = defineStore("typeUser", () => {
-  const data = ref<any>([]);
-  const getTypeUser = async (body: Record<string, any>) => {
-    const a = await $fetch("http://10.10.150.131:8080/api/menu/getlist", {
-        mode: "no-cors",
-        headers: {
-            "Content-Type": "application/json",
-            "Access-Control-Allow-Origin": "*"
-        },
+  const listTypeUser = ref<any>([]);
+  const getTypeUser = async () => {
+    // await $fetch("http://10.10.150.131:8080/api/menu/type", {
+    await $fetch("/api/typeUser/listTypeUser", {
+        //  mode: 'no-cors',
+        //     headers: {
+        //         'Access-Control-Allow-Origin': '*',
+        //         Accept: 'application/json',
+        //         'Content-Type': 'application/json',
+        //     },
         method:"GET",
     })
-    // .then((res) => {
-    //     data.value = res
-    //     console.log(data.value);
-    // });
-    // return data;
-        console.log(a);
+    .then((res) => {
+        listTypeUser.value = res
+        // console.log(listTypeUser.value);
+    });
+    // return listTypeUser;
 };
-  return { getTypeUser,data };
+  return { getTypeUser,listTypeUser };
 });