add some routes

src/api/baseApi.js

@@ -23,7 +23,7 @@ export default class BaseAPI {
     if (this.dummy_data != null) {
       return await this.dummyResponse(this.dummy_data.data[0]);
     }
-    const response = await RestClient.get(`${this.url}/${id}`);
+    const response = await RestClient.get(`${this.url}/${id}/detail`);
     return response.data;
   }
 

src/router/role.js

-import UserIndex from "./../views/user/UserIndex.vue";
+import RoleIndex from "./../views/role/RoleIndex.vue";
+import RoleCreate from "./../views/role/RoleCreate.vue";
+import RoleEdit from "./../views/role/RoleEdit.vue";
 export const roleRoutes = [
   {
     path: "/role",
     name: "role-index",
-    component: UserIndex,
+    component: RoleIndex,
   },
   {
     path: "/role/create",
     name: "role-create",
-    component: UserIndex,
+    component: RoleCreate,
   },
   {
     path: "/role/:id/edit",
     name: "role-edit",
-    component: UserIndex,
+    component: RoleEdit,
   },
 ];

src/router/user.js

@@ -2,6 +2,8 @@ import UserProfile from "./../views/user/UserProfile.vue";
 import UserIndex from "./../views/user/UserIndex.vue";
 import UserCreate from "@/views/user/UserCreate.vue";
 import UserEdit from "@/views/user/UserEdit.vue";
+
+
 export const userRoutes = [
   {
     path: "/user",

src/views/role/RoleCreate.vue

+<template>
+    <form-page title="Tambah Role" :schemas="schemas" :api="RoleApi"></form-page>
+  </template>
+  <script setup>
+  import * as Yup from "yup";
+  import FormPage from "@/components/Page/FormPage.vue";
+  import { RoleApi } from "@/api/role.js";
+  const schemas = [
+    {
+      label: "Kode Role",
+      name: "code",
+      validation: Yup.string().required().label("Kode Role"),
+      cols: 12,
+    },
+    {
+      label: "Nama Role",
+      name: "name",
+      validation: Yup.string().required().label("Nama Role"),
+      cols: 6,
+    },
+  ];
+  </script>
+  
\ No newline at end of file

src/views/role/RoleEdit.vue

+<template>
+    <form-page :isEdit="true" title="Tambah Role" :schemas="schemas" :api="RoleApi"></form-page>
+  </template>
+  <script setup>
+  import * as Yup from "yup";
+  import FormPage from "@/components/Page/FormPage.vue";
+  import { RoleApi } from "@/api/role.js";
+  const schemas = [
+    {
+      label: "Kode Role",
+      name: "code",
+      validation: Yup.string().required().label("Kode Role"),
+      cols: 12,
+    },
+    {
+      label: "Nama Role",
+      name: "name",
+      validation: Yup.string().required().label("Nama Role"),
+      cols: 6,
+    },
+  ];
+  </script>
+  
\ No newline at end of file

src/views/role/RoleIndex.vue

+<template>
+  <base-page>
+    <ServerDatatable title="Role" :api="RoleApi" :headers="headers" path="role">
+    </ServerDatatable>
+  </base-page>
+</template>
+<script setup lang="ts">
+import BasePage from "./../../components/Page/BasePage.vue";
+import { RoleApi } from "@/api/role.js";
+import ServerDatatable from "@/components/Common/ServerDatatable.vue";
+import { ref, onMounted, inject } from "vue";
+import * as bootstrap from "bootstrap";
+
+const headers = ref([
+  {
+    text: "Kode",
+    value: "code",
+  },
+  {
+    text: "Role",
+    value: "name",
+  },
+]);
+</script>