diff --git a/src/layouts/Sidebar.svelte b/src/layouts/Sidebar.svelte
index c43b03a..6aca2e4 100644
--- a/src/layouts/Sidebar.svelte
+++ b/src/layouts/Sidebar.svelte
@@ -58,6 +58,11 @@
                 <span class="align-middle">Personas</span>
             </SideLink>
 
+            <SideLink to="/roles">
+                <i class="align-middle bi bi-people fs-4" />
+                <span class="align-middle">Roles</span>
+            </SideLink>
+
         </ul>
 
     </div>
diff --git a/src/pages/roles/Admin.svelte b/src/pages/roles/Admin.svelte
new file mode 100644
index 0000000..7d9c147
--- /dev/null
+++ b/src/pages/roles/Admin.svelte
@@ -0,0 +1,109 @@
+<script>
+    import Paginate from "$/components/Paginate.svelte";
+    import { getRoles } from "$/services/roles";
+    import PageTitle from "$/components/PageTitle.svelte";
+    import ModalRol from "./ModalRol.svelte";
+
+    const limit = 15;
+    let page = 1;
+    let offset = 0;
+    let count = 0;
+    let ordering = 'id_rol'
+    let roles = []
+    let rol = null
+    let loading = false;
+
+    $: onPage(page)
+
+    async function onPage(p) {
+        try {
+            loading = true
+            offset = (p - 1) * limit;
+            const data = await getRoles({ offset, limit, ordering })
+            roles = data.results;
+            count = data.count;
+        } catch (error) {
+            alert(error)
+        } finally {
+            loading = false;
+        }
+    }
+
+    function onEdita(item) {
+        rol = item;
+    }
+
+    function onNuevo() {
+        rol = {}
+    }
+
+    function onOrderBy(field) {
+        ordering = ordering === field ? '-' + field : field;
+        onPage(page)
+    }
+</script>
+
+<PageTitle {loading}>Roles</PageTitle>
+
+<div class="card">
+    <div class="card-header">
+        <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
+            <i class="bi bi-plus-lg"></i> Nuevo
+       </button>
+    </div>
+    <div class="card-body">
+        <div class="table-responsive">
+            <table class="table table-sm table-bordered">
+                <thead>
+                    <tr class="table-light">
+                        <th style="width:5%">Nro</th>
+                        <th>
+                            <a href={"#"} on:click|preventDefault={() => onOrderBy('id_rol')}>ID</a>
+                            {#if ordering === 'id_rol'}<i class="bi bi-caret-up-fill"></i>{/if}
+                            {#if ordering === '-id_rol'}<i class="bi bi-caret-down-fill"></i>{/if}
+                        </th>
+                        <th>
+                            <a href={"#"} on:click|preventDefault={() => onOrderBy('nombre_rol')}>Nombre</a>
+                            {#if ordering === 'nombre_rol'}<i class="bi bi-caret-up-fill"></i>{/if}
+                            {#if ordering === '-nombre_rol'}<i class="bi bi-caret-down-fill"></i>{/if}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each roles as app, index}
+                    <tr>
+                        <td class="table-light">{offset + index + 1}</td>
+                        <td>{app.id_rol}</td>
+                        <td><a href={"#"} on:click|preventDefault={() => onEdita(app)}>{app.nombre_rol}</a></td>
+                    </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="card-footer d-flex">
+        <a href={"#"} class="btn btn-outline-secondary me-3" on:click|preventDefault={() => onPage(page)}>
+            <i class="bi bi-arrow-repeat"></i>
+        </a>
+        <Paginate
+            {offset}
+            {limit}
+            {count}
+            on:page={ev => page = ev.detail}
+        />
+    </div>
+</div>
+
+{#if rol}
+    <ModalRol
+        {rol}
+        on:close={() => rol = null}
+        on:refresh={() => onPage(page)}
+    />
+{/if}
+
+<style>
+    .table-responsive {
+        max-height: calc(100vh - 300px);
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/roles/ModalRol.svelte b/src/pages/roles/ModalRol.svelte
new file mode 100644
index 0000000..c45832b
--- /dev/null
+++ b/src/pages/roles/ModalRol.svelte
@@ -0,0 +1,275 @@
+<script>
+    import Modal from "../../components/Modal.svelte";
+    import { getRol, createRol, updateRol, deleteRol } from "$/services/roles";
+    import { getAplicaciones } from "$/services/aplicaciones";
+    import {  getRolesyaplicaciones , createRolyaplicacion , updateRolyaplicacion , deleteRolyaplicacion } from "$/services/rolesyaplicaciones";
+    import { createEventDispatcher } from "svelte";
+    import { getRolesaplicaciones } from "../../services/rolesyaplicaciones";
+    
+    const dispatch = createEventDispatcher();
+   
+
+    export let rol = {}
+    let form = {}
+    let loading = false;
+    let form2 = []
+    let form3 = []
+    let rolaplicaciones = []
+    let form_inicio = []
+   
+
+    $: begin(rol.id_rol)
+    $: begin2(rol.id_rol)
+
+    
+
+    async function begin(id) {
+        try {
+            if (!id) return;
+            form = await getRol(id) || {}
+        } catch (error) {
+            alert(error.detail || error)
+        }
+    }
+
+    async function begin2(id) {
+        try {
+            form2 = await getAplicaciones() || []
+            if (!id) {
+                rolaplicaciones = []
+            }
+            else{
+               rolaplicaciones = await getRolesyaplicaciones(id)
+              
+            }
+            form3 = combinarArreglos(form2,rolaplicaciones)
+
+            
+            
+            for(const obj1 of form3){
+                const nuevoItem = {
+                id_rol_app: obj1.id_rol_app,    
+                id_aplicacion: obj1.id_aplicacion,
+                nombre_app: obj1.nombre_app,
+                vigente: obj1.vigente,
+                id_rol:obj1.id_rol,
+                solo_visualizar:obj1.solo_visualizar,
+                acceso:obj1.acceso
+                };
+                form_inicio.push(nuevoItem)
+
+            }
+            
+            
+        } catch (error) {
+            alert(error.detail || error)
+        }
+    }
+
+    async function onSave() {
+        try {
+            loading = true;
+            
+            if (rol.id_rol) {
+                
+               
+                form = await updateRol(form)
+                
+                form3 = CrearEditarEliminar(rol.id_rol,form_inicio,form3)
+               
+                
+                
+                for(const obj1 of form3){
+                    
+                    if (obj1.opcion == "Crear"){
+                        await createRolyaplicacion(obj1)
+                    }
+                    else if (obj1.opcion == "Editar"){
+                        await updateRolyaplicacion(obj1)
+                    }
+                    else if (obj1.opcion == "Eliminar"){
+                        await deleteRolyaplicacion(obj1.id_rol_app)
+                    }
+                    
+                }
+                
+            } else {
+                form = await createRol(form)
+                form3 = Arreglo_crear(form3,form.id_rol)
+                for(const obj1 of form3){
+                    await createRolyaplicacion(obj1)
+                }
+            }
+            alert('Se ha guardado la aplicación')
+            dispatch('refresh')
+            dispatch('close')
+        } catch (error) {
+            if (error.detail) {
+                alert(error.detail)
+            } else {
+                alert(JSON.stringify(error))
+            }
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function onDelete() {
+        try {
+            if (!confirm('Eliminará el registro?')) return;
+            loading = true;
+            for(const obj1 of form_inicio){             
+                if (obj1.id_rol_app != false){
+                    if(obj1.acceso = true)
+                        await deleteRolyaplicacion(obj1.id_rol_app)
+                    }                    
+            }
+            await deleteRol(form.id_rol)
+            alert('Se ha eliminado la aplicación')
+            dispatch('refresh')
+            dispatch('close')
+        } catch (error) {
+            alert(error.detail || error)
+        } finally {
+            loading = false;
+        }
+    }
+    function combinarArreglos(arreglo1, arreglo2) {
+    const resultado = [];
+
+    for (const obj1 of arreglo1) {
+      const objResultado = { ...obj1 };
+      
+      const obj2 = arreglo2.find(item => item.id_aplicacion === obj1.id_aplicacion);
+
+      if (obj2) {
+        objResultado.id_rol = obj2.id_rol !== undefined ? obj2.id_rol : null;
+        objResultado.solo_visualizar = obj2.solo_visualizar !== undefined ? obj2.solo_visualizar : null;
+        objResultado.id_rol_app = obj2.id_rol_app !== undefined ? obj2.id_rol_app : null;
+        objResultado.acceso = true;
+      } else {
+        objResultado.id_rol = null;
+        objResultado.solo_visualizar = null;
+        objResultado.acceso = false;
+        objResultado.id_rol_app = false;
+      }
+
+      resultado.push(objResultado);
+    }
+
+    return resultado;
+  }
+
+  function Arreglo_crear(input_data,id) {
+    const result = [];
+    for (const item of input_data) {
+        if (item.acceso) {
+            result.push({
+                "id_aplicacion": item.id_aplicacion,
+                "id_rol": id,
+                "solo_visualizar": item.solo_visualizar
+            });
+        }
+    }
+
+    return result;
+}
+
+function CrearEditarEliminar(id, arregloInicial, arregloFinal) {
+  const resultado = [];
+
+  for (let i = 0; i < arregloInicial.length; i++) {
+    const inicio = arregloInicial[i];
+    const fin = arregloFinal[i];
+
+    const nuevoItem = {
+      id_aplicacion: inicio.id_aplicacion,
+      id_rol: id,
+      solo_visualizar: fin.solo_visualizar,
+    };
+
+    if (inicio.acceso !== fin.acceso) {
+      nuevoItem.opcion = inicio.acceso ? "Eliminar" : "Crear";
+      if(inicio.acceso == true){
+        nuevoItem.id_rol_app = inicio.id_rol_app
+      }
+    } else if (inicio.solo_visualizar !== fin.solo_visualizar) {
+      nuevoItem.opcion = "Editar";
+      nuevoItem.id_rol_app = inicio.id_rol_app
+    } else {
+      nuevoItem.opcion = null;
+    }
+
+    resultado.push(nuevoItem);
+  }
+
+  return resultado;
+}
+
+
+</script>
+
+<form action="" on:submit|preventDefault={onSave}>
+    <Modal title={'rol #' + (rol.id_rol || 'Nuevo')}
+        size="lg"
+        on:close={() => dispatch('close')}>
+        <div class="form">
+            <div class="row mb-3">
+                <div class="col-md-3">Rol ID</div>
+                <div class="col-md">
+                    {#if rol.id_rol}
+                        <input type="number" value={form.id_rol}  disabled class="form-control">
+                    {:else}
+                        <input type="number" bind:value={form.id_rol} required class="form-control">
+                    {/if}
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col-md-3">Nombre Rol</div>
+                <div class="col-md">
+                    <input type="text" bind:value={form.nombre_rol} required class="form-control">
+                </div>
+            </div>
+            <h4 class="h4 mb-3">Permiso a aplicaciones </h4>
+            <pre>
+                
+               
+              </pre>
+           
+            
+            <div class="card">
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table table-sm table-bordered">
+                            <thead>
+                                <tr>
+                                  
+                                    <th>Aplicaciones</th>
+                                    <th>Acceso</th>
+                                    <th>Solo visualizar</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {#each form3 as aplicacion}
+                                <tr>
+                                   
+                                    <td>{aplicacion.nombre_app}</td>
+                                    <td><input type="checkbox" bind:checked={aplicacion.acceso}  ></td>
+                                    
+                                    <td><input type="checkbox" bind:checked={aplicacion.solo_visualizar} disabled = {!aplicacion.acceso} ></td>
+                                    
+                                </tr>
+                                {/each}
+                                
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <svelte:fragment slot="buttons">
+            <button class="btn btn-primary"type="submit" disabled={loading}>Guardar</button>
+            <button class="btn btn-danger" on:click|preventDefault={onDelete} disabled={loading}>Eliminar</button>
+        </svelte:fragment>
+    </Modal>
+</form>
diff --git a/src/pages/rolesaplicaciones/Admin.svelte b/src/pages/rolesaplicaciones/Admin.svelte
new file mode 100644
index 0000000..84bbce2
--- /dev/null
+++ b/src/pages/rolesaplicaciones/Admin.svelte
@@ -0,0 +1,121 @@
+<script>
+    import Paginate from "$/components/Paginate.svelte";
+    import { getRolesaplicaciones , getRolesyaplicaciones } from "$/services/rolesyaplicaciones";
+    import PageTitle from "$/components/PageTitle.svelte";
+    import ModalRol from "./ModalRolaplicacion.svelte";
+
+    const limit = 15;
+    let page = 1;
+    let offset = 0;
+    let count = 0;
+    let ordering = 'id_rol'
+    let roles = []
+    let rol = null
+    let loading = false;
+    let data2 = []
+
+    $: onPage(page)
+
+    async function onPage(p) {
+        try {
+            loading = true
+            offset = (p - 1) * limit;
+            const data = await getRolesaplicaciones({ offset, limit, ordering })
+            data2= await getRolesyaplicaciones(1)
+            roles = data.results;
+            count = data.count;
+        } catch (error) {
+            alert(error)
+        } finally {
+            loading = false;
+        }
+    }
+
+    function onEdita(item) {
+        rol = item;
+    }
+
+    function onNuevo() {
+        rol = {}
+    }
+
+    function onOrderBy(field) {
+        ordering = ordering === field ? '-' + field : field;
+        onPage(page)
+    }
+</script>
+
+<PageTitle {loading}>rolesyaplicaciones</PageTitle>
+<div>
+    {data2}
+    {#each data2 as rol}
+    {rol.id_rol}
+    {rol.id_aplicacion}
+    {/each}
+</div>
+
+<div class="card">
+    <div class="card-header">
+        <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
+            <i class="bi bi-plus-lg"></i> Nuevo
+       </button>
+    </div>
+    <div class="card-body">
+        <div class="table-responsive">
+            <table class="table table-sm table-bordered">
+                <thead>
+                    <tr class="table-light">
+                        <th style="width:5%">Nro</th>
+                        <th>
+                            <a href={"#"} on:click|preventDefault={() => onOrderBy('id_aplicacion')}>ID rol</a>
+                            {#if ordering === 'id_aplicacion'}<i class="bi bi-caret-up-fill"></i>{/if}
+                            {#if ordering === '-id_aplicacion'}<i class="bi bi-caret-down-fill"></i>{/if}
+                        </th>
+                        <th>
+                            <a href={"#"} on:click|preventDefault={() => onOrderBy('id_rol')}>Id app</a>
+                            {#if ordering === 'id_rol'}<i class="bi bi-caret-up-fill"></i>{/if}
+                            {#if ordering === '-id_rol'}<i class="bi bi-caret-down-fill"></i>{/if}
+                        </th>
+                        <th style="width:5%">Solo Visualizar</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {#each roles as app, index}
+                    <tr>
+                        <td class="table-light">{offset + index + 1}</td>
+                        <td>{app.id_rol}</td>
+                        <td><a href={"#"} on:click|preventDefault={() => onEdita(app)}>{app.id_aplicacion}</a></td>
+                        <td>{app.solo_visualizar}</td>
+                    </tr>
+                    {/each}
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="card-footer d-flex">
+        <a href={"#"} class="btn btn-outline-secondary me-3" on:click|preventDefault={() => onPage(page)}>
+            <i class="bi bi-arrow-repeat"></i>
+        </a>
+        <Paginate
+            {offset}
+            {limit}
+            {count}
+            on:page={ev => page = ev.detail}
+        />
+    </div>
+</div>
+
+{#if rol}
+    <ModalRol
+        {rol}
+        on:close={() => rol = null}
+        on:refresh={() => onPage(page)}
+    />
+{/if}
+
+
+<style>
+    .table-responsive {
+        max-height: calc(100vh - 300px);
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/rolesaplicaciones/ModalRolaplicacion.svelte b/src/pages/rolesaplicaciones/ModalRolaplicacion.svelte
new file mode 100644
index 0000000..5589475
--- /dev/null
+++ b/src/pages/rolesaplicaciones/ModalRolaplicacion.svelte
@@ -0,0 +1,95 @@
+<script>
+    import Modal from "../../components/Modal.svelte";
+    import { getRolyaplicacion, createRolyaplicacion, updateRolyaplicacion, deleteRolyaplicacion } from "$/services/rolesyaplicaciones";
+    import { createEventDispatcher } from "svelte";
+    const dispatch = createEventDispatcher();
+
+    export let rol = {}
+    let form = {}
+    let loading = false;
+
+    $: begin(rol.id_aplicacion)
+
+    async function begin(id) {
+        try {
+            if (!id) return;
+            form = await getRolyaplicacion(id) || {}
+        } catch (error) {
+            alert(error.detail || error)
+        }
+    }
+
+    async function onSave() {
+        try {
+            loading = true;
+            if (rol.id_aplicacion) {
+                form = await updateRolyaplicacion(form)
+            } else {
+                form = await createRolyaplicacion(form)
+            }
+            alert('Se ha guardado la aplicación')
+            dispatch('refresh')
+            dispatch('close')
+        } catch (error) {
+            if (error.detail) {
+                alert(error.detail)
+            } else {
+                alert(JSON.stringify(error))
+            }
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function onDelete() {
+        try {
+            if (!confirm('Eliminará el registro?')) return;
+            loading = true;
+            await deleteRolyaplicacion(form.id_aplicacion)
+            alert('Se ha eliminado la aplicación')
+            dispatch('refresh')
+            dispatch('close')
+        } catch (error) {
+            alert(error.detail || error)
+        } finally {
+            loading = false;
+        }
+    }
+
+   
+</script>
+
+<form action="" on:submit|preventDefault={onSave}>
+    <Modal title={'Aplicacion #' + (rol.id_aplicacion || 'Nuevo')}
+        size="lg"
+        on:close={() => dispatch('close')}>
+        <div class="form">
+            <div class="row mb-3">
+                <div class="col-md-3">ID app</div>
+                <div class="col-md">
+                    {#if rol.id_aplicacion}
+                        <input type="number" value={form.id_aplicacion}  disabled class="form-control">
+                    {:else}
+                        <input type="number" bind:value={form.id_aplicacion} required class="form-control">
+                    {/if}
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col-md-3">ID rol</div>
+                <div class="col-md">
+                    <input type="text" bind:value={form.id_rol} required class="form-control">
+                </div>
+            </div>
+            <div class="mb-3">
+                <div class="form-check form-switch">
+                    <input class="form-check-input" type="checkbox" bind:checked={form.solo_visualizar} role="switch" id="vigente">
+                    <label class="form-check-label" for="vigente">solo_visualizar</label>
+                </div>
+            </div>
+        </div>
+        <svelte:fragment slot="buttons">
+            <button class="btn btn-primary"type="submit" disabled={loading}>Guardar</button>
+            <button class="btn btn-danger" on:click|preventDefault={onDelete} disabled={loading}>Eliminar</button>
+        </svelte:fragment>
+    </Modal>
+</form>
\ No newline at end of file
diff --git a/src/routes/user.routes.js b/src/routes/user.routes.js
index d1f4d21..d10f84d 100644
--- a/src/routes/user.routes.js
+++ b/src/routes/user.routes.js
@@ -11,6 +11,8 @@ import PagePersonaCreate from '$/pages/personas/Persona.svelte'
 import PagePersonaModifica from '$/pages/personas/Persona.svelte'
 import PageMapaParaderos from '$/pages/mapas/Paraderos.svelte'
 import PageMapaRutas from '$/pages/mapas/Rutas.svelte'
+import PageRoles from '$/pages/roles/Admin.svelte'
+import PageRolesyAplicaciones from '$/pages/rolesaplicaciones/Admin.svelte'
 
 export const routes = [
     { path: '/', component: PageHome },
@@ -19,6 +21,8 @@ export const routes = [
     { path: '/usuarios', component: PageUsuarios },
     { path: '/usuarios/nuevo', component: PageUsuarioCreate },
     { path: '/usuarios/:login', component: PageUsuarioModifica },
+    { path: '/roles', component: PageRoles },
+    { path: '/rolesaplicaciones', component: PageRolesyAplicaciones },
     { path: '/comunas', component: PageComunas },
     { path: '/personas', component: PagePersonas },
     { path: '/personas/nuevo', component: PagePersonaCreate },
@@ -26,4 +30,5 @@ export const routes = [
     { path: '/mapas/paraderos', component: PageMapaParaderos },
     { path: '/mapas/rutas', component: PageMapaRutas },
     { path: '*', component: PageError },
+    
 ]
\ No newline at end of file
diff --git a/src/services/roles.js b/src/services/roles.js
new file mode 100644
index 0000000..e7bafe3
--- /dev/null
+++ b/src/services/roles.js
@@ -0,0 +1,47 @@
+import { base, getToken } from './_config'
+
+export async function getRoles(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/roles/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.json()
+}
+
+export async function getRol(id) {
+    const res = await fetch(`${base}/roles/${id}/`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.json()
+}
+
+export async function createRol(data) {
+    const res = await fetch(`${base}/roles/`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.json()
+}
+
+export async function updateRol({ id_rol: id, ...data }) {
+    const res = await fetch(`${base}/roles/${id}/`, {
+        method: 'PATCH',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.json()
+}
+
+export async function deleteRol(id) {
+    const res = await fetch(`${base}/roles/${id}/`, {
+        method: 'DELETE',
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.text()
+}
\ No newline at end of file
diff --git a/src/services/rolesyaplicaciones.js b/src/services/rolesyaplicaciones.js
new file mode 100644
index 0000000..6b2a789
--- /dev/null
+++ b/src/services/rolesyaplicaciones.js
@@ -0,0 +1,58 @@
+import { base, getToken } from './_config'
+
+export async function getRolesyaplicaciones(idRol) {
+    const params = idRol ? { id_rol: idRol } : null;  // Preparar los parámetros de la consulta    
+    const query = params ? '?' + new URLSearchParams(params).toString() : '';    
+    const res = await fetch(`${base}/rolyaplicacion/${query}`, {
+        headers: {"Authorization": `Bearer ${getToken()}`,"Content-Type": "application/json"}
+    });   
+    if (!res.ok) throw await res.json();   
+    return res.json();
+}
+
+export async function getRolesaplicaciones(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/rolyaplicacion/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.json()
+}
+
+
+export async function getRolyaplicacion(id) {
+    const res = await fetch(`${base}/rolyaplicacion/${id}/`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.json()
+}
+
+export async function createRolyaplicacion(data) {
+    const res = await fetch(`${base}/rolyaplicacion/`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.json()
+}
+
+export async function updateRolyaplicacion({ id_rol_app: id, ...data }) {
+    const res = await fetch(`${base}/rolyaplicacion/${id}/`, {
+        method: 'PATCH',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.json()
+}
+
+export async function deleteRolyaplicacion(id) {
+    const res = await fetch(`${base}/rolyaplicacion/${id}/`, {
+        method: 'DELETE',
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.json()
+    return res.text()
+}
\ No newline at end of file