diff --git a/components/Setting/TipePengguna/TableViewPermission copy.vue b/components/Setting/TipePengguna/TableViewPermission copy.vue
new file mode 100644
index 0000000..075b4d9
--- /dev/null
+++ b/components/Setting/TipePengguna/TableViewPermission copy.vue	
@@ -0,0 +1,159 @@
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import { Icon } from '@iconify/vue';
+import dummy from '@/data/dummy/keuangan.type_user.json'
+
+const search = ref();
+const dialog = ref(false)
+const dialogDelete = ref(false)
+const headers = ref([
+    // {
+    //     no:'No',
+    //     title: 'Dessert (100g serving)',
+    //     align: 'start',
+    //     sortable: false,
+    //     key: 'name',
+    // },
+    { title: 'No', key: 'no' },
+    { title: 'typeUser', key: 'typeUser' },
+    { title: 'Actions', key: 'actions', sortable: false },
+])
+const Roles = ref([])
+const editedIndex = ref(-1)
+const editedItem = ref({
+    typeUser:'',
+})
+const defaultItem = ref({
+    typeUser: '',
+})
+const formTitle = computed(() => {
+    return editedIndex.value === -1 ? 'New Roles' : 'Edit Roles'
+})
+function initialize() {
+    Roles.value = dummy
+}
+function editItem(item) {
+    editedIndex.value = Roles.value.indexOf(item)
+    editedItem.value = Object.assign({}, item)
+    dialog.value = true
+}
+function deleteItem(item) {
+    editedIndex.value = Roles.value.indexOf(item)
+    editedItem.value = Object.assign({}, item)
+    dialogDelete.value = true
+}
+function deleteItemConfirm() {
+    Roles.value.splice(editedIndex.value, 1)
+    closeDelete()
+}
+function close() {
+    dialog.value = false
+    nextTick(() => {
+        editedItem.value = Object.assign({}, defaultItem.value)
+        editedIndex.value = -1
+    })
+}
+function closeDelete() {
+    dialogDelete.value = false
+    nextTick(() => {
+        editedItem.value = Object.assign({}, defaultItem.value)
+        editedIndex.value = -1
+    })
+}
+function save() {
+    if (editedIndex.value > -1) {
+        Object.assign(Roles.value[editedIndex.value], editedItem.value)
+    } else {
+        Roles.value.push(editedItem.value)
+    }
+    close()
+}
+watch(dialog, val => {
+    val || close()
+})
+watch(dialogDelete, val => {
+    val || closeDelete()
+})
+initialize()
+</script>
+
+<template>
+    <!-- <pre>{{ dummy }}</pre> -->
+    <v-row>
+        <v-col cols="12">
+            <!-- <UiParentCard title="Crud Table"> -->
+                <v-text-field v-model="search" append-inner-icon="mdi-magnify" label="Search" single-line hide-details
+                    class="mb-5" />
+                <v-data-table class="border rounded-md datatabels" :headers="headers" :items="Roles" :search="search" :sort-by="[{ key: 'typeUser', order: 'asc' }]">
+                    <template v-slot:top>
+                        <v-toolbar class="bg-lightprimary" flat>
+                            <v-toolbar-title>My Crud Table</v-toolbar-title>
+                            <v-divider class="mx-4" inset vertical></v-divider>
+                            <v-spacer></v-spacer>
+                            <!-- dialog create & update -->
+                             <v-btn color="primary"  variant="flat" dark @click="dialog = true">Add New Item</v-btn>
+                            <UiComponents2DialogsScrollable v-model="dialog">
+                                <template v-slot:title>
+                                    {{ formTitle }}
+                                </template>
+                                <template v-slot:text>
+                                    <v-container class="px-0">
+                                            <v-row>
+                                                <v-col cols="12" sm="6" md="4">
+                                                    <v-text-field v-model="editedItem.typeUser"
+                                                        label="typeUser"></v-text-field>
+                                                </v-col>
+                                            </v-row>
+                                        </v-container>
+                                </template>
+                                <template v-slot:actions>
+                                        <v-btn color="error" variant="tonal" @click="close">
+                                            Cancel
+                                        </v-btn>
+                                        <v-btn color="success" variant="tonal" @click="save">
+                                            Save
+                                        </v-btn>
+                                </template>
+                            </UiComponents2DialogsScrollable>
+                            <!-- dialog delete -->
+                            <UiComponents2DialogsActivator v-model="dialogDelete">
+                                <template v-slot:text>Are you sure you want to delete this item?</template>
+                                <template v-slot:actions>
+                                    <v-btn color="error" variant="flat" dark   @click="closeDelete">Cancel</v-btn>
+                                        <v-btn color="primary" variant="flat" dark   @click="deleteItemConfirm">OK</v-btn>
+                                </template>
+                            </UiComponents2DialogsActivator>
+                        </v-toolbar>
+                    </template>
+                    <template v-slot:item.no="{ index }">{{ index + 1 }}</template>
+                    <template v-slot:item.actions="{ item }">
+                        <div class="d-flex gap-3">
+                            <Icon
+                                icon="solar:pen-new-square-broken"
+                                height="20"
+                                class="text-primary cursor-pointer"
+                                size="small"
+                                @click="editItem(item)"
+                            />
+                            <Icon
+                                icon="solar:trash-bin-minimalistic-linear"
+                                height="20"
+                                class="text-error cursor-pointer"
+                                size="small"
+                                @click="deleteItem(item)"
+                            />
+                        </div>
+                    </template>
+                    <template v-slot:no-data>
+                        <v-btn color="primary" @click="initialize">
+                            Reset
+                        </v-btn>
+                    </template>
+                </v-data-table>
+            <!-- </UiParentCard> -->
+        </v-col>
+    </v-row>
+</template>
+  
+  
\ No newline at end of file
diff --git a/components/Setting/TipePengguna/TableViewPermission.vue b/components/Setting/TipePengguna/TableViewPermission.vue
index 075b4d9..4bd4b9b 100644
--- a/components/Setting/TipePengguna/TableViewPermission.vue
+++ b/components/Setting/TipePengguna/TableViewPermission.vue
@@ -1,159 +1,216 @@
-<script setup>
-import { computed, nextTick, ref, watch } from 'vue';
-import UiParentCard from '@/components/shared/UiParentCard.vue';
-import { Icon } from '@iconify/vue';
-import dummy from '@/data/dummy/keuangan.type_user.json'
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { HeartIcon, UsersIcon, TrashIcon } from "vue-tabler-icons";
+import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
+// import { useFrinedsStore } from '@/stores/apps/userprofile/friends';
+import UserCards from "@/components/widgets2/cards/UserCards.vue";
+import data from "@/data/dummy/keuangan.type_user.json";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+import Form from "@/components/Setting/ViewPermission/Form.vue";
+import { Icon } from "@iconify/vue";
+import { useSettingStore } from "~/store/apps/Setting/setting";
+import useRole from "@/composable/index";
 
-const search = ref();
-const dialog = ref(false)
-const dialogDelete = ref(false)
-const headers = ref([
-    // {
-    //     no:'No',
-    //     title: 'Dessert (100g serving)',
-    //     align: 'start',
-    //     sortable: false,
-    //     key: 'name',
-    // },
-    { title: 'No', key: 'no' },
-    { title: 'typeUser', key: 'typeUser' },
-    { title: 'Actions', key: 'actions', sortable: false },
-])
-const Roles = ref([])
-const editedIndex = ref(-1)
-const editedItem = ref({
-    typeUser:'',
-})
-const defaultItem = ref({
-    typeUser: '',
-})
-const formTitle = computed(() => {
-    return editedIndex.value === -1 ? 'New Roles' : 'Edit Roles'
-})
-function initialize() {
-    Roles.value = dummy
+const {
+  datas: { dialog, dialogDelete,getData},
+  method: {
+    formTitle,
+    typeForm,
+    deleteItem,
+    deleteConfirm,
+    toastAlert,
+    openDeleteDialog,
+    openFormDialog,
+    findRole,
+    paginated
+  },
+} = useRole();
+
+const store = useSettingStore();
+
+const editedIndex = ref(-1);
+
+const permissionCategories = [
+  {
+    value: "0",
+    label: "General",
+  },
+  {
+    value: "1",
+    label: "ProductServce",
+  },
+  {
+    value: "2",
+    label: "Product",
+  },
+];
+
+const searchValue = ref("");
+
+
+const filteredCards = computed(() => {
+  return getData.value.filter((card: any) => {
+    return card.display
+      .toLowerCase()
+      .includes(searchValue.value.toLowerCase());
+  });
+});
+
+const editItem = async(item: any) =>{
+  console.log("item:",item._id)
+  // editedIndex.value = getData.value.indexOf(item);
+  // editedIndex.value = item._id;
+  // store.getTypeUser(item);
+   await store.getRoleMenuById(item._id)
+  openFormDialog(true);
 }
-function editItem(item) {
-    editedIndex.value = Roles.value.indexOf(item)
-    editedItem.value = Object.assign({}, item)
-    dialog.value = true
+
+function onDelete(item: any) {
+  editedIndex.value = getData.value.indexOf(item);
+  openDeleteDialog(true);
 }
-function deleteItem(item) {
-    editedIndex.value = Roles.value.indexOf(item)
-    editedItem.value = Object.assign({}, item)
-    dialogDelete.value = true
+
+function saveData(data: object) {
+  //proses simpan data edit
+  if (editedIndex.value > -1) {
+    Object.assign(getData.value[editedIndex.value], data.data);
+    toastAlert("Berhasil ubah data!", "success");
+    //proses simpan data create
+  } else {
+    getData.value.push(data.data);
+    toastAlert("Berhasil simpan data!", "success");
+  }
+  openFormDialog(false);
 }
-function deleteItemConfirm() {
-    Roles.value.splice(editedIndex.value, 1)
-    closeDelete()
-}
-function close() {
-    dialog.value = false
-    nextTick(() => {
-        editedItem.value = Object.assign({}, defaultItem.value)
-        editedIndex.value = -1
-    })
-}
-function closeDelete() {
-    dialogDelete.value = false
-    nextTick(() => {
-        editedItem.value = Object.assign({}, defaultItem.value)
-        editedIndex.value = -1
-    })
-}
-function save() {
-    if (editedIndex.value > -1) {
-        Object.assign(Roles.value[editedIndex.value], editedItem.value)
-    } else {
-        Roles.value.push(editedItem.value)
-    }
-    close()
-}
-watch(dialog, val => {
-    val || close()
-})
-watch(dialogDelete, val => {
-    val || closeDelete()
-})
-initialize()
+
+onBeforeMount(async() => {
+  await store.getTypeUser();
+  paginated(store.listTypeUser)
+  console.log("getData.value:",filteredCards)
+});
+
 </script>
 
 <template>
-    <!-- <pre>{{ dummy }}</pre> -->
-    <v-row>
-        <v-col cols="12">
-            <!-- <UiParentCard title="Crud Table"> -->
-                <v-text-field v-model="search" append-inner-icon="mdi-magnify" label="Search" single-line hide-details
-                    class="mb-5" />
-                <v-data-table class="border rounded-md datatabels" :headers="headers" :items="Roles" :search="search" :sort-by="[{ key: 'typeUser', order: 'asc' }]">
-                    <template v-slot:top>
-                        <v-toolbar class="bg-lightprimary" flat>
-                            <v-toolbar-title>My Crud Table</v-toolbar-title>
-                            <v-divider class="mx-4" inset vertical></v-divider>
-                            <v-spacer></v-spacer>
-                            <!-- dialog create & update -->
-                             <v-btn color="primary"  variant="flat" dark @click="dialog = true">Add New Item</v-btn>
-                            <UiComponents2DialogsScrollable v-model="dialog">
-                                <template v-slot:title>
-                                    {{ formTitle }}
-                                </template>
-                                <template v-slot:text>
-                                    <v-container class="px-0">
-                                            <v-row>
-                                                <v-col cols="12" sm="6" md="4">
-                                                    <v-text-field v-model="editedItem.typeUser"
-                                                        label="typeUser"></v-text-field>
-                                                </v-col>
-                                            </v-row>
-                                        </v-container>
-                                </template>
-                                <template v-slot:actions>
-                                        <v-btn color="error" variant="tonal" @click="close">
-                                            Cancel
-                                        </v-btn>
-                                        <v-btn color="success" variant="tonal" @click="save">
-                                            Save
-                                        </v-btn>
-                                </template>
-                            </UiComponents2DialogsScrollable>
-                            <!-- dialog delete -->
-                            <UiComponents2DialogsActivator v-model="dialogDelete">
-                                <template v-slot:text>Are you sure you want to delete this item?</template>
-                                <template v-slot:actions>
-                                    <v-btn color="error" variant="flat" dark   @click="closeDelete">Cancel</v-btn>
-                                        <v-btn color="primary" variant="flat" dark   @click="deleteItemConfirm">OK</v-btn>
-                                </template>
-                            </UiComponents2DialogsActivator>
-                        </v-toolbar>
-                    </template>
-                    <template v-slot:item.no="{ index }">{{ index + 1 }}</template>
-                    <template v-slot:item.actions="{ item }">
-                        <div class="d-flex gap-3">
-                            <Icon
-                                icon="solar:pen-new-square-broken"
-                                height="20"
-                                class="text-primary cursor-pointer"
-                                size="small"
-                                @click="editItem(item)"
-                            />
-                            <Icon
-                                icon="solar:trash-bin-minimalistic-linear"
-                                height="20"
-                                class="text-error cursor-pointer"
-                                size="small"
-                                @click="deleteItem(item)"
-                            />
-                        </div>
-                    </template>
-                    <template v-slot:no-data>
-                        <v-btn color="primary" @click="initialize">
-                            Reset
-                        </v-btn>
-                    </template>
-                </v-data-table>
-            <!-- </UiParentCard> -->
-        </v-col>
-    </v-row>
+  <!-- <pre>{{ filteredCards }}</pre> -->
+  <v-row class="justify-content-end mt-5">
+    <v-col cols="12">
+      <div class="d-sm-flex justify-end mb-2">
+        <v-btn
+          color="primary"
+          variant="flat"
+          dark
+          @click="
+            dialog = true;
+            editedIndex = -1;
+          "
+          >+ Type User</v-btn
+        >
+      </div>
+      <div class="d-sm-flex align-center mb-5">
+        <h3 class="text-h3">
+          Type User
+          <v-chip
+            size="small"
+            class="ml-2 elevation-0"
+            variant="elevated"
+            color="secondary"
+            >{{ getData.length }}</v-chip
+          >
+        </h3>
+        <v-sheet width="250" class="ml-0 ml-sm-auto mt-3 mt-sm-0">
+          <v-text-field
+            color="primary"
+            hide-details
+            variant="outlined"
+            placeholder="Search Friends"
+            density="compact"
+            prepend-inner-icon="mdi-magnify"
+            v-model="searchValue"
+          >
+          </v-text-field>
+        </v-sheet>
+      </div>
+
+      <!-- card list -->
+      <UserCards :data="filteredCards" @paginated="paginated(data)">
+        <template v-slot:avatar="data">
+          <Icon icon="solar:user-circle-broken" height="32" width="80" />
+        </template>
+        <template v-slot:title="data">
+          <!-- {{ data.prop.title }} -->
+          {{ data.prop.display }}
+        </template>
+        <!-- <template v-slot:left-side-content="data">
+          <li
+            class="text-subtitle-1 text-textSecondary mr-2"
+            style="list-style-type: none"
+            v-for="(item, i) in data.prop.roleMenu"
+            :key="i"
+          >
+            {{ findRole(permissionCategories, item.permission)?.label }}
+          </li>
+        </template>
+        <template v-slot:right-side-content="data">
+          <v-chip size="small" color="secondary">{{
+            data.prop.roleMenu.length
+          }}</v-chip>
+        </template> -->
+        <template v-slot:actions="data">
+          <v-btn
+            color="secondary"
+            variant="tonal"
+            block
+            @click="editItem(data.prop)"
+            >Edit Type User</v-btn
+          >
+          <v-btn
+            color="error"
+            variant="tonal"
+            class="mt-3"
+            block
+            @click="onDelete(data.prop)"
+            >Remove</v-btn
+          >
+        </template>
+      </UserCards>
+
+      <!-- dialog create & update -->
+      <UiComponents2DialogsScrollable v-model="dialog">
+        <template v-slot:title>
+          <div class="d-flex justify-space-between">
+            {{ formTitle(editedIndex) }}
+            <v-btn @click="dialog = false">X</v-btn>
+          </div>
+        </template>
+        <template v-slot:text>
+          <Form :typeForm="typeForm(editedIndex)" @stateValue="saveData" />
+        </template>
+      </UiComponents2DialogsScrollable>
+
+      <!-- dialog delete -->
+      <UiComponents2DialogsActivator v-model="dialogDelete">
+        <template v-slot:text
+          >Are you sure you want to delete this item?</template
+        >
+        <template v-slot:actions>
+          <v-btn
+            color="error"
+            variant="flat"
+            dark
+            @click="openDeleteDialog(false)"
+            >Cancel</v-btn
+          >
+          <v-btn
+            color="primary"
+            variant="flat"
+            dark
+            @click="deleteConfirm(getData, editedIndex)"
+            >OK</v-btn
+          >
+        </template>
+      </UiComponents2DialogsActivator>
+    </v-col>
+  </v-row>
 </template>
-  
-  
\ No newline at end of file
diff --git a/components/Setting/ViewPermission/CrudCardList.vue b/components/Setting/ViewPermission/CrudCardList.vue
index c97d235..035f0d2 100644
--- a/components/Setting/ViewPermission/CrudCardList.vue
+++ b/components/Setting/ViewPermission/CrudCardList.vue
@@ -10,14 +10,30 @@ import "vue3-toastify/dist/index.css";
 import Form from "@/components/Setting/ViewPermission/Form.vue";
 import { Icon } from "@iconify/vue";
 import { useSettingStore } from "~/store/apps/Setting/setting";
-import { toastAlert } from "@/composable/index";
+import useRole from "@/composable/index";
+
+const {
+  datas: { dialog, dialogDelete,getData},
+  method: {
+    formTitle,
+    typeForm,
+    deleteItem,
+    deleteConfirm,
+    toastAlert,
+    openDeleteDialog,
+    openFormDialog,
+    findRole,
+    paginated
+  },
+} = useRole();
+
 const store = useSettingStore();
 
-const dialog = ref(false);
-const dialogDelete = ref(false);
+// const getData = ref([]);
+let page = ref(0);
+const limit = ref(5);
+
 const editedIndex = ref(-1);
-const editedItem = ref({});
-const defaultItem = ref({});
 
 const permissionCategories = [
   {
@@ -34,16 +50,6 @@ const permissionCategories = [
   },
 ];
 
-const formTitle = computed(() => {
-  return editedIndex.value === -1 ? "New Item" : "Edit Item";
-});
-const typeForm = computed(() => {
-  return editedIndex.value === -1 ? "create" : "edit";
-});
-
-const getData: any = computed(() => {
-  return data;
-});
 const searchValue = ref("");
 
 const filteredCards = computed(() => {
@@ -53,44 +59,50 @@ const filteredCards = computed(() => {
       .includes(searchValue.value.toLowerCase());
   });
 });
-const findData = (item: string) => {
-  return permissionCategories.find((data) => data.value === item);
-};
 
 function editItem(item: any) {
-  editedIndex.value = filteredCards.value.indexOf(item);
+  editedIndex.value = getData.value.indexOf(item);
   store.getTypeUser(item);
-  dialog.value = true;
-  console.log("ini dialog:", dialog.value);
+  openFormDialog(true);
 }
 
-function deleteItem(item: any) {
-  editedIndex.value = filteredCards.value.indexOf(item);
-  dialogDelete.value = true;
+function onDelete(item: any) {
+  editedIndex.value = getData.value.indexOf(item);
+  openDeleteDialog(true);
 }
 
-function deleteItemConfirm() {
-  filteredCards.value.splice(editedIndex.value, 1);
-  closeDelete();
-
-  toastAlert("Berhasil hapus data!", "success");
-}
-
-function closeDelete() {
-  dialogDelete.value = false;
-}
 function saveData(data: object) {
   //proses simpan data edit
   if (editedIndex.value > -1) {
-    Object.assign(filteredCards.value[editedIndex.value], data.data);
+    Object.assign(getData.value[editedIndex.value], data.data);
     toastAlert("Berhasil ubah data!", "success");
     //proses simpan data create
   } else {
-    filteredCards.value.push(data.data);
+    getData.value.push(data.data);
     toastAlert("Berhasil simpan data!", "success");
   }
-  dialog.value = false;
+  openFormDialog(false);
 }
+
+// function paginated(i:any) {
+//     let skip = page.value * limit.value;
+//     const roles = data.filter((i,index:number)=>index >= skip && index < skip + limit.value);
+//     // const roles = await $fetch(`/api/roles/get?skip=${skip}`);
+//     console.log("roles:",roles)
+//     if (roles && roles.length > 0) {
+//       getData.value.push(...roles);
+//       console.log("getData.value:",getData.value)
+//       page.value++;
+//     }
+//     console.log("paginated", page.value);
+//   }
+
+
+onBeforeMount(() => {
+  paginated(data)
+  // paginated()
+  // getData.value = data;
+});
 </script>
 
 <template>
@@ -135,7 +147,7 @@ function saveData(data: object) {
       </div>
 
       <!-- card list -->
-      <UserCards :data="filteredCards">
+      <UserCards :data="filteredCards" @paginated="paginated(data)">
         <template v-slot:avatar="data">
           <Icon icon="solar:user-circle-broken" height="32" width="80" />
         </template>
@@ -150,7 +162,7 @@ function saveData(data: object) {
             v-for="(item, i) in data.prop.roleMenu"
             :key="i"
           >
-            {{ findData(item.permission)?.label }}
+            {{ findRole(permissionCategories, item.permission)?.label }}
           </li>
         </template>
         <template v-slot:right-side-content="data">
@@ -171,7 +183,7 @@ function saveData(data: object) {
             variant="tonal"
             class="mt-3"
             block
-            @click="deleteItem(data.prop)"
+            @click="onDelete(data.prop)"
             >Remove</v-btn
           >
         </template>
@@ -181,12 +193,12 @@ function saveData(data: object) {
       <UiComponents2DialogsScrollable v-model="dialog">
         <template v-slot:title>
           <div class="d-flex justify-space-between">
-            {{ formTitle }}
+            {{ formTitle(editedIndex) }}
             <v-btn @click="dialog = false">X</v-btn>
           </div>
         </template>
         <template v-slot:text>
-          <Form :typeForm="typeForm" @stateValue="saveData" />
+          <Form :typeForm="typeForm(editedIndex)" @stateValue="saveData" />
         </template>
       </UiComponents2DialogsScrollable>
 
@@ -196,10 +208,18 @@ function saveData(data: object) {
           >Are you sure you want to delete this item?</template
         >
         <template v-slot:actions>
-          <v-btn color="error" variant="flat" dark @click="closeDelete"
+          <v-btn
+            color="error"
+            variant="flat"
+            dark
+            @click="openDeleteDialog(false)"
             >Cancel</v-btn
           >
-          <v-btn color="primary" variant="flat" dark @click="deleteItemConfirm"
+          <v-btn
+            color="primary"
+            variant="flat"
+            dark
+            @click="deleteConfirm(getData, editedIndex)"
             >OK</v-btn
           >
         </template>
diff --git a/components/Setting/ViewPermission/CrudCardListLama.vue b/components/Setting/ViewPermission/CrudCardListLama.vue
new file mode 100644
index 0000000..a87e36b
--- /dev/null
+++ b/components/Setting/ViewPermission/CrudCardListLama.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { HeartIcon, UsersIcon, TrashIcon } from "vue-tabler-icons";
+import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
+// import { useFrinedsStore } from '@/stores/apps/userprofile/friends';
+import UserCards from "@/components/widgets2/cards/UserCards.vue";
+import data from "@/data/dummy/keuangan.type_user.json";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+import Form from "@/components/Setting/ViewPermission/Form.vue";
+import { Icon } from "@iconify/vue";
+import { useSettingStore } from "~/store/apps/Setting/setting";
+import { toastAlert, deleteItem,formTitle,typeForm } from "@/composable/index";
+const store = useSettingStore();
+
+const dialog = ref(false);
+const dialogDelete = ref(false);
+const editedIndex = ref(-1);
+const editedItem = ref({});
+const defaultItem = ref({});
+
+const permissionCategories = [
+  {
+    value: "0",
+    label: "General",
+  },
+  {
+    value: "1",
+    label: "ProductServce",
+  },
+  {
+    value: "2",
+    label: "Product",
+  },
+];
+
+// const formTitle = computed(() => {
+//   return editedIndex.value === -1 ? "New Item" : "Edit Item";
+// });
+// const typeForm = computed(() => {
+//   return editedIndex.value === -1 ? "create" : "edit";
+// });
+
+const getData: any = computed(() => {
+  return data;
+});
+const searchValue = ref("");
+
+const filteredCards = computed(() => {
+  return getData.value.filter((card: any) => {
+    return card.typeUser
+      .toLowerCase()
+      .includes(searchValue.value.toLowerCase());
+  });
+});
+const findData = (item: string) => {
+  return permissionCategories.find((data) => data.value === item);
+};
+
+function editItem(item: any) {
+  editedIndex.value = filteredCards.value.indexOf(item);
+  store.getTypeUser(item);
+  dialog.value = true;
+//   console.log("ini dialog:", dialog.value);
+}
+
+function onDelete(item: any) {
+  editedIndex.value = filteredCards.value.indexOf(item);
+  dialogDelete.value = true;
+}
+
+function deleteItemConfirm() {
+  //   filteredCards.value.splice(editedIndex.value, 1);
+  deleteItem(filteredCards.value, editedIndex.value);
+  closeDelete();
+  toastAlert("Berhasil hapus data!", "success");
+}
+
+function closeDelete() {
+  dialogDelete.value = false;
+}
+function saveData(data: object) {
+  //proses simpan data edit
+  if (editedIndex.value > -1) {
+    Object.assign(filteredCards.value[editedIndex.value], data.data);
+    toastAlert("Berhasil ubah data!", "success");
+    //proses simpan data create
+  } else {
+    filteredCards.value.push(data.data);
+    toastAlert("Berhasil simpan data!", "success");
+  }
+  dialog.value = false;
+}
+</script>
+
+<template>
+  <!-- <pre>{{ filteredCards }}</pre> -->
+  <v-row class="justify-content-end mt-5">
+    <v-col cols="12">
+      <div class="d-sm-flex justify-end mb-2">
+        <v-btn
+          color="primary"
+          variant="flat"
+          dark
+          @click="
+            dialog = true;
+            editedIndex = -1;
+          "
+          >+ Type User</v-btn
+        >
+      </div>
+      <div class="d-sm-flex align-center mb-5">
+        <h3 class="text-h3">
+          Type User
+          <v-chip
+            size="small"
+            class="ml-2 elevation-0"
+            variant="elevated"
+            color="secondary"
+            >{{ getData.length }}</v-chip
+          >
+        </h3>
+        <v-sheet width="250" class="ml-0 ml-sm-auto mt-3 mt-sm-0">
+          <v-text-field
+            color="primary"
+            hide-details
+            variant="outlined"
+            placeholder="Search Friends"
+            density="compact"
+            prepend-inner-icon="mdi-magnify"
+            v-model="searchValue"
+          >
+          </v-text-field>
+        </v-sheet>
+      </div>
+
+      <!-- card list -->
+      <UserCards :data="filteredCards">
+        <template v-slot:avatar="data">
+          <Icon icon="solar:user-circle-broken" height="32" width="80" />
+        </template>
+        <template v-slot:title="data">
+          <!-- {{ data.prop.title }} -->
+          {{ data.prop.typeUser }}
+        </template>
+        <template v-slot:left-side-content="data">
+          <li
+            class="text-subtitle-1 text-textSecondary mr-2"
+            style="list-style-type: none"
+            v-for="(item, i) in data.prop.roleMenu"
+            :key="i"
+          >
+            {{ findData(item.permission)?.label }}
+          </li>
+        </template>
+        <template v-slot:right-side-content="data">
+          <v-chip size="small" color="secondary">{{
+            data.prop.roleMenu.length
+          }}</v-chip>
+        </template>
+        <template v-slot:actions="data">
+          <v-btn
+            color="secondary"
+            variant="tonal"
+            block
+            @click="editItem(data.prop)"
+            >Edit Type User</v-btn
+          >
+          <v-btn
+            color="error"
+            variant="tonal"
+            class="mt-3"
+            block
+            @click="onDelete(data.prop)"
+            >Remove</v-btn
+          >
+        </template>
+      </UserCards>
+
+      <!-- dialog create & update -->
+      <UiComponents2DialogsScrollable v-model="dialog">
+        <template v-slot:title>
+          <div class="d-flex justify-space-between">
+            {{ formTitle(editedIndex) }}
+            <v-btn @click="dialog = false">X</v-btn>
+          </div>
+        </template>
+        <template v-slot:text>
+          <Form :typeForm="typeForm(editedIndex)" @stateValue="saveData" />
+        </template>
+      </UiComponents2DialogsScrollable>
+
+      <!-- dialog delete -->
+      <UiComponents2DialogsActivator v-model="dialogDelete">
+        <template v-slot:text
+          >Are you sure you want to delete this item?</template
+        >
+        <template v-slot:actions>
+          <v-btn color="error" variant="flat" dark @click="closeDelete"
+            >Cancel</v-btn
+          >
+          <v-btn color="primary" variant="flat" dark @click="deleteItemConfirm"
+            >OK</v-btn
+          >
+        </template>
+      </UiComponents2DialogsActivator>
+    </v-col>
+  </v-row>
+</template>
diff --git a/components/Setting/ViewPermission/Form.vue b/components/Setting/ViewPermission/Form.vue
index 11014b0..a1d21fe 100644
--- a/components/Setting/ViewPermission/Form.vue
+++ b/components/Setting/ViewPermission/Form.vue
@@ -67,7 +67,7 @@ onBeforeMount(() => {
         <ListElement name="roleMenu" :default="form.roleMenu" class="mx-4" add-text="+ permission">
             <template #default="{ index }">
                 <ObjectElement :name="index" class="px-3 py-3 border border-gray-200 rounded-xl">
-                    <permission name="permission" :items="permissionCategories"/>
+                    <permission name="permission" :items="permissionCategories" :label="`Permission Category`"/>
                         <div class="vf-element-layout vf-col-12">
                             <!-- <menuRoles name="gridTable" :items="form.roleMenu[index] != null  ? form.roleMenu[index]: []"/> -->
                             <menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.roleMenu[index]: []"/>
diff --git a/components/apps/Setting/TipePengguna/FormRole copy.vue b/components/apps/Setting/TipePengguna/FormRole copy.vue
new file mode 100644
index 0000000..7d125ea
--- /dev/null
+++ b/components/apps/Setting/TipePengguna/FormRole copy.vue	
@@ -0,0 +1,129 @@
+<script setup>
+import { ref, reactive } from "vue";
+import permission from "@/components/Setting/ViewPermission/element/selectElement.vue";
+import menuRoles from "@/components/apps/Setting/TipePengguna/element/table.vue";
+import pages from "@/components/apps/Setting/TipePengguna/element/checkboxElement.vue";
+import { useSettingStore } from "~/store/apps/Setting/setting";
+
+import rolePages from "~/data/dummy/rolePage.ts";
+import sidebarItem from "@/components/layout/full/vertical-sidebar/sidebarItem.ts";
+// const store = useSettingStore();
+const props = defineProps({
+  typeForm: {
+    type: String,
+  },
+});
+
+const onSubmit = () => {
+  console.log(data.value.form$.data);
+  // emit('stateValue', {data:data.value.form$.data, state:false})
+};
+
+
+const data = ref(null);
+const menu = ref(null);
+const form = ref({});
+
+const allMenu = () => {
+    menu.value = sidebarItem.flatMap((item) => {
+     return item.children
+      .flatMap((subitem) => {
+        const data = {
+          header: item.header,
+          title: subitem.title,
+          path: subitem.to,
+          permission: [],
+        }
+        if(subitem.children){
+        const dataSubChildren = subitem.children.map((submenu) => ({
+          header: item.header,
+            title: submenu.title,
+            path: submenu.to,
+            permission: [],
+        }))
+        return [data, ...dataSubChildren];
+      }
+        return [data];
+      })
+      
+  });
+  // filter((menu) => !data.value?.pages.some((m) => m.path === menu.path))
+  // menu.value.push(...data.value.pages);
+  // console.log("menu:", menu.value);
+}
+
+onBeforeMount(async () => {
+  if (props.typeForm === "edit"){
+    data.value = rolePages.find((item) => item.id_user === 1);
+    Object.assign(form.value, data.value);
+
+  // console.log("data.value:", data.value);
+  // console.log("all menu:", sidebarItem);
+
+  allMenu()
+}else{
+  allMenu()
+}
+});
+</script>
+
+<template>
+  <!-- <pre>{{ rolePages  }}</pre> -->
+  <pre>{{ data }}</pre>
+   <!-- <pre>{{ form }}</pre> -->
+  <Vueform
+    ref="data"
+    v-model="form"
+    validate-on="change|step"
+    method="post"
+    :endpoint="onSubmit"
+  >
+    <template #empty>
+      <FormSteps>
+        <FormStep
+          name="page0"
+          label="Type User"
+          :elements="['username', 'role']"
+        />
+        <FormStep
+          name="page1"
+          label="Permission Categories"
+          :elements="['text', 'tab', 'gridTable', 'roleMenu', 'permission','pages']"
+        />
+      </FormSteps>
+      <FormElements>
+        <TextElement
+          :default="form.username"
+          name="username"
+          label="user name"
+          :columns="{
+            container: 6,
+          }"
+        />
+        <TextElement
+          :default="form.role"
+          name="role"
+          label="Role Type"
+          :columns="{
+            container: 6,
+          }"
+        />
+
+
+         <!-- <div class="vf-element-layout vf-col-12  border border-gray-200 rounded-xl">
+          <ListElement name="pages" :default="form.pages" class="mx-4" >
+            <template #default="{ index }">
+                <ObjectElement :name="index" class="px-3"> -->
+                  <!-- <menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: ''}] " :typeForm = "'edit'" :menus="menu"/> -->
+                  <!-- <pages name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: ''}] " :typeForm = "'edit'" :menus="menu"/> -->
+          <!-- </ObjectElement>
+          </template>
+        </ListElement>
+          </div> -->
+          <menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.pages : [{title: '',permission:[]}] " :typeForm = "'edit'" :menus="menu"/>
+      </FormElements>
+
+      <FormStepsControls />
+    </template>
+  </Vueform>
+</template>
diff --git a/components/apps/Setting/TipePengguna/FormRole.vue b/components/apps/Setting/TipePengguna/FormRole.vue
new file mode 100644
index 0000000..e72f41b
--- /dev/null
+++ b/components/apps/Setting/TipePengguna/FormRole.vue
@@ -0,0 +1,256 @@
+<script setup>
+import { ref, reactive } from "vue";
+import permission from "@/components/Setting/ViewPermission/element/selectElement.vue";
+import menuRoles from "@/components/apps/Setting/TipePengguna/element/table.vue";
+import pages from "@/components/apps/Setting/TipePengguna/element/checkboxElement.vue";
+import { useSettingStore } from "~/store/apps/Setting/setting";
+
+import rolePages from "~/data/dummy/rolePage1.ts";
+import sidebarItem from "@/components/layout/full/vertical-sidebar/sidebarItem.ts";
+
+const store = useSettingStore();
+const props = defineProps({
+  typeForm: {
+    type: String,
+  },
+});
+
+const onSubmit = () => {
+  // console.log(data.value.form$.data);
+  console.log("ini form:",form.value);
+  // emit('stateValue', {data:data.value.form$.data, state:false})
+};
+
+
+const data = ref(null);
+const menu = ref(null);
+const form = ref({});
+const allMenu = () => {
+    menu.value = sidebarItem.flatMap((item) => {
+     return item.children
+      .flatMap((subitem) => {
+        const data = {
+          header: item.header,
+          title: subitem.title,
+          path: subitem.to,
+          permission: [],
+        }
+        if(subitem.children){
+        const dataSubChildren = subitem.children.map((submenu) => ({
+          header: item.header,
+            title: submenu.title,
+            path: submenu.to,
+            permission: [],
+        }))
+        return [data, ...dataSubChildren];
+      }
+        return [data];
+      })
+      
+  });
+}
+
+/*const onSelectSearch = (option,index) => {
+  // console.log("ini option:",option)
+  // console.log("ini option:",index)
+  const data = menu.value.find((i) => i.title == option)
+  // console.log("baru",data.header)
+  form.value.pages[index].path = data.path
+  form.value.pages[index].title = option
+  if(data)
+  form.value.pages[index].header = data.header
+else 
+  form.value.pages[index].header = ""
+
+  // console.log("el:",el$.$parent)
+  // el$.$parent.$parent.children$.path.update(data.path)
+  // if(data.path === undefined){
+  // }
+}*/
+const addPages = () => {
+  form.value.pages.push({
+    title: "",
+    path: "",
+    permissions: [{
+      create: 0,
+      view: 0, 
+      update: 0,
+      delete: 0,
+    }]
+  })
+}
+
+const canclePages = (index) => {
+  // console.log("ini index:",index)
+  form.value.pages.splice(index,1)
+}
+onBeforeMount(async () => {
+  if (props.typeForm === "edit"){
+    console.log("yg edit:",store.typeUser)
+    data.value = rolePages.find((item) => item.role === store.typeUser.display);
+    // data.value = rolePages.find((item) => item.id_user === 1);
+    Object.assign(form.value, data.value);
+    console.log("form.value:", form.value);
+  allMenu()
+}else{
+  // add()
+  form.value ={
+    username: "",
+    role: "",
+    pages: [{
+      title: "",
+      path: "",
+      permissions: [{
+        create: 0,
+        view: 0, 
+        update: 0,
+        delete: 0,
+      }]
+    }],
+  }
+  allMenu()
+}
+});
+</script>
+
+<template>
+  <!-- <pre>{{ rolePages  }}</pre> -->
+  <!-- <pre>{{ data }}</pre> -->
+  <!-- <pre>{{ menu }}</pre> -->
+   <!-- <pre>{{ form }}</pre> -->
+  <Vueform
+    ref="data"
+    validate-on="change|step"
+    method="post"
+    :endpoint="onSubmit"
+  >
+   
+        <TextElement
+          :default="form.username"
+          @input="(e) => (form.username = e.target.value)"
+          name="username"
+          label="user name"
+          :columns="{
+            container: 6,
+          }"
+        />
+        <TextElement
+          :default="form.role"
+          @input="(e) => (form.role = e.target.value)"
+          name="role"
+          label="Role Type"
+          :columns="{
+            container: 6,
+          }"
+        />
+
+         <div class="vf-element-layout vf-col-12  border border-gray-200 rounded-xl">
+          <v-table style="min-width: 100%;height: 300px;" class="nowrap">
+      <thead>
+        <tr>
+          <th class="text-h6 ps-6" style="width:20%">Module</th>
+          <th class="text-h6">Path</th>
+          <th class="text-h6">Create</th>
+          <th class="text-h6">View</th>
+          <th class="text-h6">Update</th>
+          <th class="text-h6">Delete</th>
+          <th class="text-h6">Action</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- <div class="vf-element-layout vf-col-12"> -->
+          <tr v-for="(item, index) in form?.pages" :key="index" :default="form.pages">
+            <!-- {{ console.log("ini item:",form.pages[index].title) }} -->
+            <td>
+              <!-- @change="(oldValue, newValue, el$)=>onSelectSearch(oldValue, newValue, el$,index)" -->
+              <SelectElement
+              :default="form.pages[index].title"
+              @select="(val)=>onSelectSearch(val,index)"
+                :items="menu"
+                :search="true"
+                :native="false"
+                input-type="search"
+                autocomplete="of"
+                value-prop="title"
+                label-prop="title"
+                :create="true"
+                :add-option-on="['enter', 'tab', 'space']"
+                :columns="{
+                  container: 6,
+                }"
+              />
+            </td>
+            <td>
+              <!-- v-model="form.pages[index].path" -->
+              <TextElement
+              :default="form.pages[index].path"
+            :columns="{
+              container: 6,
+            }"
+          />
+            </td>
+            <td>
+              <!-- <p>{{ form.pages[index].permissions[0].update }}</p> -->
+              <CheckboxElement
+              :default="form.pages[index].permissions[0].create"
+              @change="(val) => form.pages[index].permissions[0].create = val"
+                :columns="{
+                  container: 6,
+                }"
+                trueValue=1
+                falseValue=0
+              />
+            </td>            
+            <td>
+              <CheckboxElement
+              :default="form.pages[index].permissions[0].view"
+              @change="(val) => form.pages[index].permissions[0].view = val"
+                :columns="{
+                  container: 6,
+                }"
+                trueValue=1
+                falseValue=0
+              />
+            </td>            
+            <td>
+              <CheckboxElement
+              :default="form.pages[index].permissions[0].update"
+              @change="(val) => form.pages[index].permissions[0].update = val"
+                :columns="{
+                  container: 6,
+                }"
+                trueValue=1
+                falseValue=0
+              />
+            </td>            
+            <td>
+              <CheckboxElement
+              :default="form.pages[index].permissions[0].delete"
+              @change="(val) => form.pages[index].permissions[0].delete = val"
+                :columns="{
+                  container: 6,
+                }"
+                trueValue=1
+                falseValue=0
+              />
+            </td>  
+            <td>
+              <div class="d-flex flex-row ga-1">
+                <v-btn v-if="index == form.pages.length - 1 && props.typeForm != 'edit'" @click="addPages" variant="tonal" color="primary" class="px-auto"><v-icon icon="mdi-plus" /> Page</v-btn>
+                <v-btn @click="canclePages(index)" variant="tonal" color="error" class="px-auto"><v-icon icon="mdi-delete" /> Page</v-btn>
+              </div>
+            </td>          
+          </tr>
+        <!-- </div> -->
+      </tbody>
+    </v-table>
+  </div>
+  <ButtonElement
+        name="primaryButton"
+        button-label="Button"
+        :submits="true"
+        align="right"
+      />
+   
+  </Vueform>
+</template>
diff --git a/components/apps/Setting/TipePengguna/FormRole2.vue b/components/apps/Setting/TipePengguna/FormRole2.vue
new file mode 100644
index 0000000..19cff1e
--- /dev/null
+++ b/components/apps/Setting/TipePengguna/FormRole2.vue
@@ -0,0 +1,192 @@
+<script setup>
+import { ref, reactive } from "vue";
+import permission from "@/components/Setting/ViewPermission/element/selectElement.vue";
+import menuRoles from "@/components/apps/Setting/TipePengguna/element/table.vue";
+import pages from "@/components/apps/Setting/TipePengguna/element/checkboxElement.vue";
+import { useSettingStore } from "~/store/apps/Setting/setting";
+
+import rolePages from "~/data/dummy/rolePage1.ts";
+import sidebarItem from "@/components/layout/full/vertical-sidebar/sidebarItem.ts";
+
+const store = useSettingStore();
+const props = defineProps({
+  typeForm: {
+    type: String,
+  },
+});
+
+const onSubmit = () => {
+  // console.log(data.value.form$.data);
+  console.log("ini form:", form.value);
+  // emit('stateValue', {data:data.value.form$.data, state:false})
+};
+
+const data = ref(null);
+const menu = ref(null);
+const form = ref({});
+const allMenu = () => {
+  menu.value = sidebarItem.flatMap((item) => {
+    return item.children.flatMap((subitem) => {
+      const data = {
+        header: item.header,
+        title: subitem.title,
+        path: subitem.to,
+        permission: [],
+      };
+      if (subitem.children) {
+        const dataSubChildren = subitem.children.map((submenu) => ({
+          header: item.header,
+          title: submenu.title,
+          path: submenu.to,
+          permission: [],
+        }));
+        return [data, ...dataSubChildren];
+      }
+      return [data];
+    });
+  });
+};
+
+const onSelectSearch = (option, index) => {
+  // console.log("ini option:",option)
+  // console.log("ini option:",index)
+  const data = menu.value.find((i) => i.title == option);
+  // console.log("baru",data.header)
+  form.value.pages[index].path = data.path;
+  form.value.pages[index].title = option;
+  if (data) form.value.pages[index].header = data.header;
+  else form.value.pages[index].header = "";
+
+  // console.log("el:",el$.$parent)
+  // el$.$parent.$parent.children$.path.update(data.path)
+  // if(data.path === undefined){
+  // }
+};
+const addPages = () => {
+  form.value.pages.push({
+    title: "",
+    path: "",
+    permissions: [
+      {
+        create: 0,
+        view: 0,
+        update: 0,
+        delete: 0,
+      },
+    ],
+  });
+};
+
+const canclePages = (index) => {
+  // console.log("ini index:",index)
+  form.value.pages.splice(index, 1);
+};
+onBeforeMount(async () => {
+  if (props.typeForm === "edit") {
+    console.log("yg edit:", store.typeUser);
+    data.value = rolePages.find((item) => item.role === store.typeUser.display);
+    // data.value = rolePages.find((item) => item.id_user === 1);
+    Object.assign(form.value, data.value);
+    console.log("form.value:", form.value);
+    allMenu();
+  } else {
+    // add()
+    // form.value ={
+    //   username: "coba",
+    //   role: "",
+    //   pages: [{
+    //     title: "",
+    //     path: "",
+    //     permissions: [{
+    //       create: 0,
+    //       view: 0,
+    //       update: 0,
+    //       delete: 0,
+    //     }]
+    //   }],
+    // }
+    allMenu();
+  }
+});
+</script>
+
+<template>
+  <!-- <pre>{{ rolePages  }}</pre> -->
+  <!-- <pre>{{ data }}</pre> -->
+  <!-- <pre>{{ menu }}</pre> -->
+  <pre>{{ form }}</pre>
+  <Vueform
+    ref="data"
+    v-model="form"
+    validate-on="change|step"
+    method="post"
+    :endpoint="onSubmit"
+  >
+    <TextElement
+      name="username"
+      label="user name"
+      :columns="{
+        container: 6,
+      }"
+    />
+    <TextElement
+      name="role"
+      label="Role Type"
+      :columns="{
+        container: 6,
+      }"
+    />
+
+    <div class="vf-element-layout vf-col-12 border border-gray-200 rounded-xl">
+      <v-table>
+        <thead>
+          <tr>
+            <th class="text-h6 ps-6" style="width: 50%">Module</th>
+            <th class="text-h6">Path</th>
+            <th class="text-h6">Create</th>
+            <th class="text-h6">View</th>
+            <th class="text-h6">Update</th>
+            <th class="text-h6">Delete</th>
+            <th class="text-h6">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          
+          <ListElement name="pages" :default="form.pages" class="mx-4">
+            <template #default="{ index }">
+              <ObjectElement :name="index" class="px-3">
+                <div class="vf-element-layout vf-col-12">
+                <tr>
+                  <!-- {{ console.log("ini item:",form.pages[index].title) }} -->
+                  <td>
+                    <TextElement
+                      name="title"
+                      :columns="{
+                        container: 6,
+                      }"
+                    />
+                  </td>
+                  <td>
+                    <TextElement
+                      name="path"
+                      :columns="{
+                        container: 6,
+                      }"
+                      />
+                  </td>
+                </tr>
+              </div>
+              </ObjectElement>
+            </template>
+          </ListElement>
+        </tbody>
+      </v-table>
+    </div>
+    <ButtonElement
+      name="primaryButton"
+      button-label="Button"
+      :submits="true"
+      align="right"
+    />
+  </Vueform>
+</template>
diff --git a/components/apps/Setting/TipePengguna/ViewPermission.vue b/components/apps/Setting/TipePengguna/ViewPermission.vue
new file mode 100644
index 0000000..fca0d0c
--- /dev/null
+++ b/components/apps/Setting/TipePengguna/ViewPermission.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from "vue";
+import { HeartIcon, UsersIcon, TrashIcon } from "vue-tabler-icons";
+import BaseBreadcrumb from "@/components/shared/BaseBreadcrumb.vue";
+// import { useFrinedsStore } from '@/stores/apps/userprofile/friends';
+import SettingCards from "@/components/widgets2/cards/SettingCards.vue";
+// import data from "@/data/dummy/keuangan.type_user.json";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
+import Form from "@/components/Setting/ViewPermission/Form.vue";
+import { Icon } from "@iconify/vue";
+import { useSettingStore } from "~/store/apps/Setting/setting";
+import useRole from "@/composable/index";
+
+const {
+  datas: { dialog, dialogDelete,getData},
+  method: {
+    formTitle,
+    typeForm,
+    deleteItem,
+    toastAlert,
+    openDeleteDialog,
+    openFormDialog,
+    findRole,
+    paginated
+  },
+} = useRole();
+
+const store = useSettingStore();
+
+const editedIndex = ref(-1);
+
+const searchValue = ref("");
+
+
+const filteredCards = computed(() => {
+  console.log("getData.value:",getData.value)
+  return getData.value.filter((card: any) => {
+    return card.display.toLowerCase().includes(searchValue.value.toLowerCase());
+  });
+});
+
+const editItem = async(item: any) =>{
+  console.log("item:",item._id)
+  // editedIndex.value = getData.value.indexOf(item);
+  // editedIndex.value = item._id;
+  store.getTypeUser(item);
+//    await store.getRoleMenuById(item._id)
+  openFormDialog(true);
+}
+
+function onDelete(item: any) {
+  editedIndex.value = getData.value.indexOf(item);
+  openDeleteDialog(true);
+  console.log("data:",editedIndex)
+}
+
+function deleteConfirm(data: any, index: number) {
+   deleteItem(data, index);
+  openDeleteDialog(false);
+  toastAlert("Berhasil hapus data!", "success");
+}
+
+onBeforeMount(async() => {
+  await store.getAllTypeUser();
+  paginated(store.listTypeUser)
+  // console.log("getData.value:",filteredCards)
+});
+
+</script>
+
+<template>
+  <!-- <pre>{{ filteredCards }}</pre> -->
+  <v-row class="justify-content-end mt-5">
+    <v-col cols="12">
+      <div class="d-sm-flex justify-end mb-2">
+        <v-btn
+          color="primary"
+          variant="flat"
+          dark
+          to="/apps/Setting/TipePengguna/create"
+          ><v-icon icon="mdi-plus" /> Type User</v-btn
+        >
+      </div>
+      <div class="d-sm-flex align-center mb-5">
+        <h3 class="text-h3">
+          Type User
+          <v-chip
+            size="small"
+            class="ml-2 elevation-0"
+            variant="elevated"
+            color="secondary"
+            >{{ getData.length }}</v-chip
+          >
+        </h3>
+        <v-sheet width="250" class="ml-0 ml-sm-auto mt-3 mt-sm-0">
+          <v-text-field
+            color="primary"
+            hide-details
+            variant="outlined"
+            placeholder="Search Friends"
+            density="compact"
+            prepend-inner-icon="mdi-magnify"
+            v-model="searchValue"
+          >
+          </v-text-field>
+        </v-sheet>
+      </div>
+
+      <!-- card list -->
+      <SettingCards :data="filteredCards" @paginated="paginated(store.listTypeUser)">
+        <template v-slot:avatar="data">
+          <Icon icon="solar:user-circle-broken" height="140" width="80" />
+          <!-- <img src="@/assets/images/profile/user-3.jpg" height="140" alt="image" /> -->
+        </template>
+        <template v-slot:title="data">
+          <!-- {{ data.prop.title }} -->
+          {{ data.prop.display }}
+        </template>
+        <template v-slot:content="data">
+
+        </template>
+        <template v-slot:actions="data">
+            <v-btn flat color="primary" size="large" @click="editItem(data.prop)" to="/apps/Setting/TipePengguna/update"><v-icon icon="mdi-pencil" />Type User</v-btn>
+            <v-btn flat variant="tonal"  size="large"  color="error" @click="onDelete(data.prop)"><v-icon icon="mdi-delete" />Type User</v-btn>
+        </template>
+      </SettingCards>
+
+      <!-- dialog delete -->
+      <UiComponents2DialogsActivator v-model="dialogDelete">
+        <template v-slot:text
+          >Are you sure you want to delete this item?</template
+        >
+        <template v-slot:actions>
+          <v-btn
+            color="error"
+            variant="flat"
+            dark
+            @click="openDeleteDialog(false)"
+            >Cancel</v-btn
+          >
+          <v-btn
+            color="primary"
+            variant="flat"
+            dark
+            @click="deleteConfirm(getData, editedIndex)"
+            >OK</v-btn
+          >
+        </template>
+      </UiComponents2DialogsActivator>
+    </v-col>
+  </v-row>
+</template>
diff --git a/components/apps/Setting/TipePengguna/element/checkboxElement.vue b/components/apps/Setting/TipePengguna/element/checkboxElement.vue
new file mode 100644
index 0000000..d7f9649
--- /dev/null
+++ b/components/apps/Setting/TipePengguna/element/checkboxElement.vue
@@ -0,0 +1,94 @@
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    default: [],
+  },
+  menus: {
+    type: Array,
+    default: [],
+  },
+});
+
+
+const onSelectSearch = (option, el$) => {
+  const data = props.menus.find((i) => i.title == option)
+  console.log("baru",data.path)
+  el$.$parent.$parent.children$.path.update(data.path)
+  // if(data.path === undefined){
+  // }
+}
+</script>
+<template>
+    <!-- {{props.menus}} -->
+ <ListElement
+      name="pages"
+      :default="props.items"
+    >
+      <template #default="{ index }">
+        <ObjectElement
+          :name="index"
+          class = "px-3 py-3 border border-gray-200 rounded-xl"
+        >
+          <!-- <TextElement
+            name="title"
+            :columns="{
+              container: 6,
+            }"
+            label="Module"
+          /> -->
+          <SelectElement
+          @select="onSelectSearch"
+                name="title"
+                :items="props.menus"
+                :search="true"
+                :native="false"
+                label="Module"
+                input-type="search"
+                autocomplete="of"
+                value-prop="title"
+                label-prop="title"
+                :create="true"
+                :add-option-on="[
+              'enter',
+              'tab',
+              'space',
+            ]"
+                :columns="{
+                  container: 6,
+                }"
+              />
+          <TextElement
+            name="path"
+            label="Path"
+            :columns="{
+              container: 6,
+            }"
+          />
+          <CheckboxgroupElement
+            name="permissions"
+            view="tabs"
+            :items="[
+              {
+                value: 'create',
+                label: 'create',
+              },
+              {
+                value: 'view',
+                label: 'view',
+              },
+              {
+                value: 'update',
+                label: 'update',
+              },
+              {
+                value: 'delete',
+                label: 'delete',
+              },
+            ]"
+            label="Permissions"
+          />
+        </ObjectElement>
+      </template>
+    </ListElement>
+</template>
\ No newline at end of file
diff --git a/components/apps/Setting/TipePengguna/element/selectElement.vue b/components/apps/Setting/TipePengguna/element/selectElement.vue
new file mode 100644
index 0000000..fd9b0c0
--- /dev/null
+++ b/components/apps/Setting/TipePengguna/element/selectElement.vue
@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({
+  items:{
+    type:Array
+  },
+  label:{
+    string:String
+  }
+})
+</script>
+<template>
+    <SelectElement
+                :items="props.items"
+                :search="true"
+                :native="false"
+                :label="props.label"
+                input-type="search"
+                autocomplete="off"
+                :columns="{
+                  container: 5,
+                }"
+              />
+</template>
\ No newline at end of file
diff --git a/components/apps/Setting/TipePengguna/element/table.vue b/components/apps/Setting/TipePengguna/element/table.vue
new file mode 100644
index 0000000..0400c65
--- /dev/null
+++ b/components/apps/Setting/TipePengguna/element/table.vue
@@ -0,0 +1,102 @@
+<script setup>
+const props = defineProps({
+  items: {
+    type: Array,
+    default: [],
+  },
+  menus: {
+    type: Array,
+    default: [],
+  },
+
+});
+
+const form = ref({});
+// onBeforeMount(() => {
+//   console.log(props.items);
+// })
+</script>
+<template>
+  <!-- {{ props.items }} -->
+  <div class="vf-element-layout vf-col-12 border border-gray-200 rounded-xl">
+    <v-table style="min-width: 100%">
+      <thead>
+        <tr>
+          <th class="text-h6 ps-6">Module</th>
+          <th class="text-h6">Permission</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- <div class="vf-element-layout vf-col-12"> -->
+          <tr v-for="(item, index) in props.items" :key="index">
+            <td>
+              <SelectElement
+                @select="onSelectSearch"
+                :name="item.title"
+                :model-value="form.title"
+                :items="props.menus"
+                :search="true"
+                :native="false"
+                label="Module"
+                input-type="search"
+                autocomplete="of"
+                value-prop="title"
+                label-prop="title"
+                :create="true"
+                :add-option-on="['enter', 'tab', 'space']"
+                :columns="{
+                  container: 6,
+                }"
+              />
+            </td>
+
+            <!-- <td>
+              <CheckboxElement
+                name="create"
+                text="create"
+                :columns="{
+                  container: 6,
+                }"
+                trueValue="1"
+                falseValue="0"
+              />
+            </td>
+            <td>
+              <CheckboxElement
+                name="update"
+                text="update"
+                :columns="{
+                  container: 6,
+                }"
+                trueValue="1"
+                falseValue="0"
+              />
+            </td>
+            <td>
+              <CheckboxElement
+                name="delete"
+                text="delete"
+                :columns="{
+                  container: 6,
+                }"
+                trueValue="1"
+                falseValue="0"
+              />
+            </td>
+            <td>
+              <CheckboxElement
+                name="view"
+                text="view"
+                :columns="{
+                  container: 6,
+                }"
+                trueValue="1"
+                falseValue="0"
+              />
+            </td> -->
+          </tr>
+        <!-- </div> -->
+      </tbody>
+    </v-table>
+  </div>
+</template>
diff --git a/components/apps/Setting/TipePengguna/element/table2.vue b/components/apps/Setting/TipePengguna/element/table2.vue
new file mode 100644
index 0000000..af66a81
--- /dev/null
+++ b/components/apps/Setting/TipePengguna/element/table2.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+import {BasicDatatables} from '@/_mockApis/components/datatable/dataTable';
+const page = ref({ title: 'Data Tables Grouping' });
+// const breadcrumbs = ref([
+//     {
+//         text: 'Dashboard',
+//         disabled: false,
+//         href: '#'
+//     },
+//     {
+//         text: 'Data Tables Grouping',
+//         disabled: true,
+//         href: '#'
+//     }
+// ]);
+
+/*Header Data*/
+const sortBy : any = ref([
+    { key: 'name', order: 'asc' }
+])
+const groupBy : any = ref([
+    { key: 'status', order: 'asc' }
+])
+
+
+</script>
+<template>
+    <!-- <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb> -->
+    <!-- <v-row>
+        <v-col cols="12"> -->
+            <!-- <UiParentCard title="Grouping"> -->
+                <div class="vf-element-layout vf-col-12  border border-gray-200 rounded-xl">
+          <ListElement name="pages" :default="props.items" class="mx-4" >
+            <template #default="{ index }">
+                <ObjectElement :name="index" class="px-3">
+  <div class="vf-element-layout vf-col-12">
+                <v-data-table items-per-page="5"  :items="BasicDatatables" item-value="name"
+                    :group-by="groupBy" :sort-by="sortBy"
+                    class="border rounded-md datatabels">
+                    <template v-slot:headers>
+                        <!-- <thead class="v-data-table-header"> -->
+                            <tr v-if="index === 0">
+                                <th>Module</th>
+                                <th>Permission</th>
+                                <th>post</th>
+                            </tr>
+                        <!-- </thead> -->
+                    </template>
+                    <template v-slot:item="{ item }">
+                        <tr>
+                            <td></td>
+      <td> {{ item.name }} </td>
+      <td> {{ item.post }} </td></tr>
+    </template>
+                </v-data-table>
+            <!-- </UiParentCard> -->
+        <!-- </v-col>
+    </v-row> -->
+</template>
+
diff --git a/components/layout/full/vertical-sidebar/sidebarItem.ts b/components/layout/full/vertical-sidebar/sidebarItem.ts
index 1b1236b..643e669 100755
--- a/components/layout/full/vertical-sidebar/sidebarItem.ts
+++ b/components/layout/full/vertical-sidebar/sidebarItem.ts
@@ -726,7 +726,7 @@ const sidebarItem: menu[] = [
           {
               title: 'Tipe Pengguna',
               icon: 'check-circle-bold',
-              to: '/setting/tipepengguna/'
+              to: '/apps/setting/tipepengguna/view'
           },
           {
               title: 'view permisson',
diff --git a/components/widgets2/cards/SettingCards.vue b/components/widgets2/cards/SettingCards.vue
new file mode 100644
index 0000000..19eafee
--- /dev/null
+++ b/components/widgets2/cards/SettingCards.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+// import { userCards } from '@/_mockApis/components/widget/card';
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+const userCards: any = computed(() => {
+  return props.data;
+});
+
+const emit = defineEmits(["paginated"]);
+</script>
+<template>
+  <v-row>
+    <v-col
+      cols="12"
+      md="3"
+      sm="6"
+      v-for="(card, index) in userCards"
+      :key="card.title"
+    >
+      <v-lazy
+        :min-height="300"
+        :options="{ threshold: 1 }"
+        transition="fade-transition"
+      >
+        <v-card elevation="10" class="mt-6">
+          <v-card-item class="text-center">
+            <!-- <h5 class="text-h5 mb-6"><slot name="title" :prop="card"></slot></h5> -->
+            <!-- <v-badge content="1" color="error" offset-x="18" offset-y="18"> -->
+              <v-avatar size="140">
+                <slot name="avatar" :prop="card"></slot>
+              </v-avatar>
+            <!-- </v-badge> -->
+
+            <h5 class="text-h5 pt-3 mt-3 mb-0">
+              <slot name="title" :prop="card"></slot>
+            </h5>
+            <p class="text-body-1 mt-3 textSecondary">
+              <slot name="content" :prop="card"></slot>
+            </p>
+            <div class="d-flex justify-center gap-3 mt-4">
+              <slot name="actions" :prop="card"></slot>
+              <!-- <v-btn flat color="primary" size="large">accept</v-btn>
+            <v-btn flat variant="tonal"  size="large"  color="error">remove</v-btn> -->
+            </div>
+          </v-card-item>
+        </v-card>
+        <div
+          v-if="index === userCards.length - 1"
+          v-intersect="emit('paginated', true)"
+          style="height: 1px"
+        ></div>
+      </v-lazy>
+    </v-col>
+  </v-row>
+</template>
diff --git a/components/widgets2/cards/UserCards.vue b/components/widgets2/cards/UserCards.vue
index b0a951a..8d749e0 100644
--- a/components/widgets2/cards/UserCards.vue
+++ b/components/widgets2/cards/UserCards.vue
@@ -10,11 +10,17 @@ const userCards: any = computed(() => {
     return props.data
 });
 
+const emit = defineEmits(['paginated']);
 
 </script>
 <template>
     <v-row>
-        <v-col cols="12" md="3" sm="6" v-for="card in userCards" :key="card.title">
+        <v-col cols="12" md="3" sm="6" v-for="(card,index) in userCards" :key="card.title">
+            <v-lazy
+            :min-height="300"
+            :options="{ threshold: 1 }"
+            transition="fade-transition"
+          >
             <v-card elevation="10"  rounded="md">
                 <v-card-item>
                     <v-avatar size="80" > 
@@ -36,6 +42,12 @@ const userCards: any = computed(() => {
                     </div>    
                 </v-card-item>
             </v-card>
+            <div
+              v-if="index === userCards.length - 1"
+              v-intersect="emit('paginated',true)"
+              style="height: 1px"
+            ></div>
+            </v-lazy>
         </v-col>
     </v-row>
 </template>
diff --git a/composable/index.ts b/composable/index.ts
index bc76d2c..bc6adae 100644
--- a/composable/index.ts
+++ b/composable/index.ts
@@ -1,18 +1,89 @@
-import { toast } from "vue3-toastify";
-// export function deleteItem (data:any, index:number) {
-//     try {
-//         data.splice(index,1)
-//     } catch (error) {
-        
-//     }
-// }
-// export function delete(){
+import { toast } from 'vue3-toastify';
+interface useRoleInterface {
+    datas: {
+        dialog: Ref<boolean>
+        dialogDelete: Ref<boolean>
+        getData: Ref<any>
+    },
+    method: {
+        formTitle: (index: number) => string
+        typeForm: (index: number) => string
+        deleteItem: (data: any, index: number) => any
+        deleteConfirm: (data: any, index: number) => any
+        toastAlert: (msg: string, type: any) => void
+        openDeleteDialog: (value: boolean) => any
+        openFormDialog: (value: boolean) => any
+        findRole: (list: any, item: string) => any
+        paginated: (data: any) => void
+    }
+}
 
-// }
-export function toastAlert(msg:string,type:any){
-    toast(msg, {
-    type: type,
-    dangerouslyHTMLString: true,
-    autoClose: 2000,
-  })
-}
\ No newline at end of file
+const useRole = (): useRoleInterface => {
+    const dialog: Ref<boolean> = ref(false);
+    const dialogDelete: Ref<boolean> = ref(false);
+    const getData: Ref<any> = ref([]);
+    const page: Ref<number> = ref(0);
+    const limit: Ref<number> = ref(5);
+    const formTitle = (index: number): string => {
+        return index === -1 ? "New Item" : "Edit Item";
+    }
+
+    const typeForm = (index: number): string => {
+        return index === -1 ? "create" : "edit";
+    }
+    const deleteItem = (data: any, index: number): any => {
+        return data.splice(index, 1)
+    }
+    const deleteConfirm = (data: any, index: number): void => {
+        deleteItem(data, index);
+        openDeleteDialog(false);
+        toastAlert("Berhasil hapus data!", "success");
+    }
+    const toastAlert = (msg: string, type: any): void => {
+        toast(msg, {
+            type: type,
+            dangerouslyHTMLString: true,
+            autoClose: 2000,
+        })
+    }
+    const openDeleteDialog = (value: boolean): any => {
+        dialogDelete.value = value;
+    }
+    const openFormDialog = (value: boolean): any => {
+        dialog.value = value;
+    }
+    const findRole = (list: any, item: string): any => {
+        return list.find((data: any) => data.value === item);
+    }
+    const paginated = (data:any) => {
+    let skip = page.value * limit.value;
+    const roles = data.filter((i,index:number)=>index >= skip && index < skip + limit.value);
+    // const roles = await $fetch(`/api/roles/get?skip=${skip}`);
+    if (roles && roles.length > 0) {
+      getData.value.push(...roles);
+      page.value++;
+    }
+  }
+
+    return {
+        datas: {
+            dialog,
+            dialogDelete,
+            getData
+        },
+        method: {
+            formTitle,
+            typeForm,
+            deleteItem,
+            deleteConfirm,
+            toastAlert,
+            openDeleteDialog,
+            openFormDialog,
+            findRole,
+            paginated
+        }
+    }
+
+}
+
+export default useRole
\ No newline at end of file
diff --git a/composable/indexLama.ts b/composable/indexLama.ts
new file mode 100644
index 0000000..06eddb6
--- /dev/null
+++ b/composable/indexLama.ts
@@ -0,0 +1,26 @@
+import { toast } from "vue3-toastify";
+// export function deleteItem (data:any, index:number) {
+//     try {
+//         data.splice(index,1)
+//     } catch (error) {
+        
+//     }
+// }
+
+export function formTitle(index:number){
+    return index === -1 ? "New Item" : "Edit Item"; 
+}
+export function typeForm(index:number){
+    return index === -1 ? "create" : "edit"; 
+}
+
+export function deleteItem(data:any, index:number) {
+    return data.splice(index,1)
+}
+export function toastAlert(msg:string,type:any){
+    toast(msg, {
+    type: type,
+    dangerouslyHTMLString: true,
+    autoClose: 2000,
+  })
+}
\ No newline at end of file
diff --git a/data/dummy/keuangan.type_user.json b/data/dummy/keuangan.type_user.json
index 542ef13..01c445f 100644
--- a/data/dummy/keuangan.type_user.json
+++ b/data/dummy/keuangan.type_user.json
@@ -137,5 +137,655 @@
         ]
       }
     ]
+  },
+  {
+    "id": "4",
+    "typeUser": "Staf4",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "5",
+    "typeUser": "Staf5",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "6",
+    "typeUser": "Staf6",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "7",
+    "typeUser": "Staf7",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "8",
+    "typeUser": "Staf8",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "9",
+    "typeUser": "Staf9",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "10",
+    "typeUser": "Staf10",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "11",
+    "typeUser": "Staf11",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "12",
+    "typeUser": "Staf12",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "13",
+    "typeUser": "Staf13",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "14",
+    "typeUser": "Staf14",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "15",
+    "typeUser": "Staf15",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "16",
+    "typeUser": "Staf16",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "17",
+    "typeUser": "Staf17",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "18",
+    "typeUser": "Staf18",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "19",
+    "typeUser": "Staf19",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "20",
+    "typeUser": "Staf20",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "21",
+    "typeUser": "Staf21",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "22",
+    "typeUser": "Staf22",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "23",
+    "typeUser": "Staf23",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "24",
+    "typeUser": "Staf24",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "25",
+    "typeUser": "Staf25",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "26",
+    "typeUser": "Staf26",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "27",
+    "typeUser": "Staf27",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "28",
+    "typeUser": "Staf28",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "id": "29",
+    "typeUser": "Staf29",
+    "roleMenu": [
+      {
+        "permission": "0",
+        "menu": [
+          {
+            "Module": "module1",
+            "create": "true",
+            "update": "false",
+            "delete": "false",
+            "show": "false"
+          },
+          {
+            "Module": "module2",
+            "create": "true",
+            "update": "true",
+            "delete": "false",
+            "show": "false"
+          }
+        ]
+      }
+    ]
   }
 ]
diff --git a/data/dummy/rolePage.ts b/data/dummy/rolePage.ts
new file mode 100644
index 0000000..28e21ea
--- /dev/null
+++ b/data/dummy/rolePage.ts
@@ -0,0 +1,136 @@
+import type { RolePage } from "~/types/setting/setting";
+
+const rolePages: RolePage[] = [
+  {
+    id_user: 1,
+    username: "Super Admin",
+    email: "admin@company.com",
+    password: "123456",
+    full_name: "System Administrator",
+    role: "Super admin",
+    role_description: "Administrative access with most permissions",
+    pages: [
+      {
+        title: "Dashboard1",
+        path: "/dashboards/dashboard1",
+        permissions: ["create", "view", "update", "delete"],
+      },
+      {
+        title: "Dashboard2",
+        path: "/dashboards/dashboard2",
+        permissions: ["create", "view", "update", "delete"],
+      },
+      {
+        title: "Homepage",
+        path: "/front-page/homepage",
+        permissions: ["create", "view", "update", "delete"],
+      },
+      {
+        title: "About Us",
+        path: "/front-page/about-us",
+        permissions: ["create", "view", "update", "delete"],
+      },
+      {
+        title: "Error",
+        path: "/auth/404",
+        permissions: ["view"],
+      },
+      {
+        title: "Side Login",
+        path: "/auth/login",
+        permissions: ["view"],
+      },
+    ],
+  },
+
+  {
+    id_user: 2,
+    username: "admin",
+    email: "manager1@company.com",
+    password: "234567",
+    full_name: "John Manager",
+    role: "admin",
+    role_description: "admin level access for operational tasks",
+    pages: [
+      {
+        title: "Dashboard1",
+        path: "/dashboards/dashboard1",
+        permissions: ["view"],
+      },
+      {
+        title: "Dashboard2",
+        path: "/dashboards/dashboard1",
+        permissions: ["view"],
+      },
+      {
+        title: "Homepage",
+        path: "/front-page/homepage",
+        permissions: ["view"],
+      },
+      {
+        title: "About Us",
+        path: "/front-page/about-us",
+        permissions: ["view"],
+      },
+    ],
+  },
+  {
+    id_user: 3,
+    username: "staf",
+    email: "manager1@company.com",
+    password: "234567",
+    full_name: "John Manager",
+    role: "staf",
+    role_description: "staf level access for operational tasks",
+    pages: [
+      {
+        title: "Dashboard1",
+        path: "/dashboards/dashboard1",
+        permissions: ["view"],
+      },
+      {
+        title: "Dashboard2",
+        path: "/dashboards/dashboard1",
+        permissions: ["view"],
+      },
+      {
+        title: "Homepage",
+        path: "/front-page/homepage",
+        permissions: ["view"],
+      },
+      {
+        title: "About Us",
+        path: "/front-page/about-us",
+        permissions: ["view"],
+      },
+    ],
+  },
+  {
+    id_user: 4,
+    username: "PJA / Koordinator",
+    email: "manager1@company.com",
+    password: "234567",
+    full_name: "John Manager",
+    role: "PJA / Koordinator",
+    role_description: "PJA / Koordinator level access for operational tasks",
+    pages: [
+      {
+        title: "Dashboard1",
+        path: "/dashboards/dashboard1",
+        permissions: ["view"],
+      },
+      {
+        title: "Dashboard2",
+        path: "/dashboards/dashboard1",
+        permissions: ["view"],
+      },
+      {
+        title: "Homepage",
+        path: "/front-page/homepage",
+        permissions: ["view"],
+      },
+    ],
+  },
+];
+
+export default rolePages;
diff --git a/data/dummy/rolePage1.ts b/data/dummy/rolePage1.ts
new file mode 100644
index 0000000..7063610
--- /dev/null
+++ b/data/dummy/rolePage1.ts
@@ -0,0 +1,256 @@
+const rolePages = [
+  {
+    id_user: 1,
+    username: "Super Admin",
+    email: "admin@company.com",
+    password: "123456",
+    full_name: "System Administrator",
+    role: "Super Admin",
+    role_description: "Administrative access with most permissions",
+    pages: [
+      {
+        header: "dashboards",
+        title: "Dashboard1",
+        path: "/dashboards/dashboard1",
+        permissions: [
+                {
+                    create: 1,
+                    update: 1,
+                    view: 1,
+                    delete: 1
+                }
+            ],
+      },
+      {
+        header: "dashboards",
+        title: "Dashboard2",
+        path: "/dashboards/dashboard2",
+        permissions: [
+                {
+                    create: 1,
+                    update: 1,
+                    view: 1,
+                    delete: 1
+                }
+            ],
+      },
+      {
+        header: "front-page",
+        title: "Homepage",
+        path: "/front-page/homepage",
+        permissions: [
+                {
+                    create: 1,
+                    update: 1,
+                    view: 1,
+                    delete: 1
+                }
+            ],
+      },
+      {
+        title: "About Us",
+        path: "/front-page/about-us",
+        permissions: [
+                {
+                    create: 1,
+                    update: 1,
+                    view: 1,
+                    delete: 1
+                }
+            ],
+      },
+      {
+        title: "Error",
+        path: "/auth/404",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete:0
+                }
+            ],
+      },
+      {
+        title: "Side Login",
+        path: "/auth/login",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+    ],
+  },
+
+  {
+    id_user: 2,
+    username: "admin",
+    email: "manager1@company.com",
+    password: "234567",
+    full_name: "John Manager",
+    role: "Admin",
+    role_description: "admin level access for operational tasks",
+    pages: [
+      {
+        title: "Dashboard1",
+        path: "/dashboards/dashboard1",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+      {
+        title: "Dashboard2",
+        path: "/dashboards/dashboard1",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+      {
+        title: "Homepage",
+        path: "/front-page/homepage",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+      {
+        title: "About Us",
+        path: "/front-page/about-us",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+    ],
+  },
+  {
+    id_user: 3,
+    username: "staf",
+    email: "manager1@company.com",
+    password: "234567",
+    full_name: "John Manager",
+    role: "Staf",
+    role_description: "staf level access for operational tasks",
+    pages: [
+      {
+        title: "Dashboard1",
+        path: "/dashboards/dashboard1",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+      {
+        title: "Dashboard2",
+        path: "/dashboards/dashboard1",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+      {
+        title: "Homepage",
+        path: "/front-page/homepage",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+      {
+        title: "About Us",
+        path: "/front-page/about-us",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+    ],
+  },
+  {
+    id_user: 4,
+    username: "PJA / Koordinator",
+    email: "manager1@company.com",
+    password: "234567",
+    full_name: "John Manager",
+    role: "PJA / Koordinator",
+    role_description: "PJA / Koordinator level access for operational tasks",
+    pages: [
+      {
+        title: "Dashboard1",
+        path: "/dashboards/dashboard1",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+      {
+        title: "Dashboard2",
+        path: "/dashboards/dashboard1",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+      {
+        title: "Homepage",
+        path: "/front-page/homepage",
+        permissions: [
+                {
+                    create: 0,
+                    update: 0,
+                    view: 1,
+                    delete: 0
+                }
+            ],
+      },
+    ],
+  },
+];
+
+export default rolePages;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 556e2eb..128c074 100755
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -115,7 +115,8 @@ export default defineNuxtConfig({
     public: {
       authUrl: process.env.AUTH_ORIGIN || "http://meninjar.dev.rssa.id:3000",
       keycloakIssuer:
-        process.env.KEYCLOAK_ISSUER || "https://auth.rssa.top/realms/sandbox"
+        process.env.KEYCLOAK_ISSUER || "https://auth.rssa.top/realms/sandbox",
+        APIBASE:process.env.BASEAPIURL
     }
   },
   // auth: {
diff --git a/pages/apps/Setting/TipePengguna/create.vue b/pages/apps/Setting/TipePengguna/create.vue
new file mode 100644
index 0000000..034070f
--- /dev/null
+++ b/pages/apps/Setting/TipePengguna/create.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+//Table
+import Form from '@/components/apps/Setting/TipePengguna/FormRole.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Role' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Create Role',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+
+<template>
+    <!-- ---------------------------------------------------- -->
+    <!-- Table Basic -->
+    <!-- ---------------------------------------------------- -->
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiChildCard :title="'Create Role'">
+                <!-- <Table/> -->
+                 <Form :typeForm="'create'"/>
+                  <!-- <p>halooo</p> -->
+            </UiChildCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/pages/apps/Setting/TipePengguna/update.vue b/pages/apps/Setting/TipePengguna/update.vue
new file mode 100644
index 0000000..dcf23de
--- /dev/null
+++ b/pages/apps/Setting/TipePengguna/update.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+// common components
+import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
+import UiChildCard from '@/components/shared/UiChildCard.vue';
+
+//Table
+import Form from '@/components/apps/Setting/TipePengguna/FormRole.vue';
+
+// template breadcrumb
+const page = ref({ title: 'Role' });
+const breadcrumbs = ref([
+    {
+        text: 'Dashboard',
+        disabled: false,
+        href: '#'
+    },
+    {
+        text: 'Update Role',
+        disabled: true,
+        href: '#'
+    }
+]);
+</script>
+
+<template>
+    <!-- ---------------------------------------------------- -->
+    <!-- Table Basic -->
+    <!-- ---------------------------------------------------- -->
+    <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
+    <v-row>
+        <v-col cols="12">
+            <UiChildCard :title="'Update Role'">
+                <!-- <Table/> -->
+                 <Form  :typeForm="'edit'"/>
+            </UiChildCard>
+        </v-col>
+    </v-row>
+</template>
diff --git a/pages/Setting/TipePengguna/index.vue b/pages/apps/Setting/TipePengguna/view.vue
similarity index 81%
rename from pages/Setting/TipePengguna/index.vue
rename to pages/apps/Setting/TipePengguna/view.vue
index 4925f0c..085ff66 100644
--- a/pages/Setting/TipePengguna/index.vue
+++ b/pages/apps/Setting/TipePengguna/view.vue
@@ -5,7 +5,7 @@ import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
 import UiParentCard from '@/components/shared/UiParentCard.vue';
 
 //Table
-import Table from '@/components/Setting/TipePengguna/TableViewPermission.vue';
+import Table from '@/components/apps/Setting/TipePengguna/ViewPermission.vue';
 
 // template breadcrumb
 const page = ref({ title: 'Basic Table' });
@@ -30,9 +30,9 @@ const breadcrumbs = ref([
     <BaseBreadcrumb :title="page.title" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
     <v-row>
         <v-col cols="12">
-            <UiParentCard title="View Permission">
-                <Table/>
-            </UiParentCard>
+            <!-- <UiParentCard title="View Permission"> -->
+                <Table />
+            <!-- </UiParentCard> -->
         </v-col>
     </v-row>
 </template>
diff --git a/store/apps/Setting/setting.ts b/store/apps/Setting/setting.ts
index 4ddc131..ac3f5cd 100644
--- a/store/apps/Setting/setting.ts
+++ b/store/apps/Setting/setting.ts
@@ -1,12 +1,111 @@
-import { defineStore } from "pinia"
-export const useSettingStore = defineStore('setting',{
-    state:(): any => ({
-        typeUser:[],
-    }),
-    actions:{
-        async getTypeUser(body:Record<string,any>){
-            // console.log("ini di pinia:",body)
-            this.typeUser = body
+import { defineStore } from "pinia";
+const runtime = useRuntimeConfig().public;
+export const useSettingStore = defineStore("setting", {
+  state: (): any => ({
+    typeUser: [],
+    listTypeUser: [],
+    listMenu: [],
+    roleMenuById: [],
+    message: "",
+  }),
+  actions: {
+    async getTypeUser(body: Record<string, any>) {
+      // console.log("ini di pinia:",body)
+      this.typeUser = body;
+    },
+    async getMenu() {
+      try {
+        const response = await $fetch(`${runtime.APIBASE}/menu/getlist`, {
+          method: "GET",
+          headers: { "Content-Type": "application/json" },
+        });
+        console.log("dipinia ini responnya:", response);
+        this.listMenu = response as [];
+      } catch (error) {
+        if (error instanceof Error) {
+          this.message = error.message;
+          // console.log(error.message)
         }
-    }
-})
\ No newline at end of file
+      }
+    },
+    async getRoleMenuById(body: Record<string, any>) {
+      try {
+        console.log(body);
+        const response = await $fetch(
+          `${runtime.APIBASE}/menu/role/type/${body}`,
+          {
+            headers: {
+              "Content-Type": "application/json",
+            },
+            method: "GET",
+          }
+        );
+        this.roleMenuById = response as [];
+      } catch (error) {
+        if (error instanceof Error) {
+          this.message = error.message;
+          // console.log(error.message)
+        }
+      }
+    },
+    async getAllTypeUser() {
+      try {
+        const response = await $fetch(`${runtime.APIBASE}/menu/type`, {
+          method: "GET",
+          headers: { "Content-Type": "application/json" },
+        });
+        this.listTypeUser = response as [];
+      } catch (error) {
+        if (error instanceof Error) {
+          this.message = error.message;
+          // console.log(error.message)
+        }
+      }
+    },
+    async postRoleUserMenu(body: Record<string, any>) {
+      try {
+        const roleUserMenu = body.menus.map((item) => ({
+          type_user_id: item.type_user_id,
+          menu_id: item.menu_id,
+          access: [
+            {
+              add: parseInt(item.access[0].value),
+              update: parseInt(item.access[1].value),
+              read: parseInt(item.access[2].value),
+              delete: parseInt(item.access[3].value),
+            },
+          ],
+        }));
+        console.log("body post:", body.menus);
+        const response = await $fetch(
+          `${runtime.APIBASE}/menu/update/rolemenu?id=${body.menus[0].type_user_id}`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(roleUserMenu),
+          }
+        );
+      } catch (error) {
+        if (error instanceof Error) {
+          this.message = error.message;
+          // console.log(error.message)
+        }
+      }
+    },
+    // async addTypeUser(data: any) {
+    //   console.log(data)
+    //   try {
+    //     const response = await $fetch('https://',{
+    //     method: 'POST',
+    //     headers: {'Content-Type': 'application/json'},
+    //     body: JSON.stringify(data)
+    //   })
+    //   } catch (error) {
+    //     if(error instanceof Error){
+    //       this.message = error.message
+    //       // console.log(error.message)
+    //     }
+    //   }
+    // }
+  },
+});
diff --git a/types/setting/setting.d.ts b/types/setting/setting.d.ts
new file mode 100644
index 0000000..62d440e
--- /dev/null
+++ b/types/setting/setting.d.ts
@@ -0,0 +1,14 @@
+export interface RolePage {
+  id_user: number;
+  username: string;
+  email: string;
+  password: string;
+  full_name: string;
+  role: string;
+  role_description: string;
+  pages: {
+    title: string;
+    path: string;
+    permissions: string[];
+  }[];
+}
\ No newline at end of file
diff --git a/utils/convertCurrency.ts b/utils/convertCurrency.ts
new file mode 100644
index 0000000..cd9b1fa
--- /dev/null
+++ b/utils/convertCurrency.ts
@@ -0,0 +1,12 @@
+
+export function format(data:number){
+  return new Intl.NumberFormat('id-ID',{
+    style:'currency',
+    currency:'IDR',
+    currencyDisplay: "code",
+  }).formatToParts(data)
+  .filter(x => x.type !== "currency")
+  .filter(x => x.type !== "literal" || x.value.trim().length !== 0)
+  .map(x => x.value)
+  .join("")
+}
\ No newline at end of file