first commit

FIX: Redireccion al cerrar session
ADD: Breadcrum y modals
2025-09-18 13:52:21 -06:00 · 2025-07-16 11:28:32 -06:00 · 2025-07-14 10:12:37 -06:00 · 2025-05-24 18:11:55 -06:00 · 2025-05-23 13:52:32 -06:00 · 2025-03-13 18:29:42 -06:00
96 changed files with 2657 additions and 2357 deletions
--- a/.gitignore
+++ b/.gitignore
@ -12,7 +12,7 @@ dist
 dist-ssr
 *.local
 .env
-colors.json
+colors.css
 notes.md

 # Editor directories and files
--- a/auth.html
+++ b/auth.html
@ -1,14 +0,0 @@
-<!doctype html>
-<html id="main-page" lang="es">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Login</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/auth.js"></script>
-  </body>
-</html>
- 
--- a/colors.css.example
+++ b/colors.css.example
@ -0,0 +1,34 @@
+@theme {
+    --color-page: #fff;
+    --color-page-t: #000;
+    --color-page-d: #292524;
+    --color-page-dt: #fff;
+    --color-primary: #374151;
+    --color-primary-t: #fff;
+    --color-primary-d: #1c1917;
+    --color-primary-dt: #fff;
+    --color-secondary: #3b82f6;
+    --color-secondary-t: #fff;
+    --color-secondary-d: #312e81;
+    --color-secondary-dt: #fff;
+    --color-primary-info: #06b6d4;
+    --color-primary-info-t: #fff;
+    --color-primary-info-d: #06b6d4;
+    --color-primary-info-dt: #fff;
+    --color-secondary-info: #06b6d4;
+    --color-secondary-info-t: #fff;
+    --color-secondary-info-d: #06b6d4;
+    --color-secondary-info-dt: #fff;
+    --color-success: #22c55e;
+    --color-success-t: #fff;
+    --color-success-d: #22c55e;
+    --color-success-dt: #fff;
+    --color-danger: #ef4444;
+    --color-danger-t: #fff;
+    --color-danger-d: #ef4444;
+    --color-danger-dt: #fecaca;
+    --color-warning: #eab308;
+    --color-warning-t: #fff;
+    --color-warning-d: #eab308;
+    --color-warning-dt: #fff;
+}
--- a/colors.json.example
+++ b/colors.json.example
@ -1,34 +0,0 @@
-{
-    "page":"#fff",
-    "page-t":"#000",
-    "page-d":"#292524",
-    "page-dt":"#fff",
-    "primary":"#374151",
-    "primary-t":"#fff",
-    "primary-d":"#1c1917",
-    "primary-dt":"#fff",
-    "secondary":"#3b82f6",
-    "secondary-t":"#fff",
-    "secondary-d":"#312e81",
-    "secondary-dt":"#fff",
-    "primary-info":"#06b6d4",
-    "primary-info-t":"#fff",
-    "primary-info-d":"#06b6d4",
-    "primary-info-dt":"#fff",
-    "secondary-info":"#06b6d4",
-    "secondary-info-t":"#fff",
-    "secondary-info-d":"#06b6d4",
-    "secondary-info-dt":"#fff",
-    "success":"#22c55e",
-    "success-t":"#fff",
-    "success-d":"#22c55e",
-    "success-dt":"#fff",
-    "danger":"#ef4444",
-    "danger-t":"#fff",
-    "danger-d":"#ef4444",
-    "danger-dt":"#fecaca",
-    "warning":"#eab308",
-    "warning-t":"#fff",
-    "warning-d":"#eab308",
-    "warning-dt":"#fff"
-}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -0,0 +1,18 @@
+services:
+  gols-frontend-v1:
+    build:
+      context: .
+      dockerfile: dockerfile
+    ports:
+      - "${APP_PORT}:5173"
+    volumes:
+      - .:/var/www/gols-frontend-v1
+      - frontend-v1:/var/www/gols-frontend-v1/node_modules
+    networks:
+      - gols-network
+volumes:
+  frontend-v1:
+    driver: local
+networks:
+  gols-network:
+    driver: bridge
--- a/17
+++ b/17
@ -0,0 +1,17 @@
+FROM node:22-alpine AS build
+
+WORKDIR /var/www/gols-frontend-v1
+
+COPY install.sh /usr/local/bin/install.sh
+RUN chmod +x /usr/local/bin/install.sh
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 3000
+
+ENTRYPOINT ["sh","/usr/local/bin/install.sh"]
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
--- a/install.sh
+++ b/install.sh
@ -1,9 +1,13 @@
 #! /bin/bash

-npm install
-cp .env.example .env
-cp colors.json.example colors.json
+if [ ! -f .env ]; then
+  cp .env.example .env
+fi

-npm run build
+if [ ! -f colors.json ]; then
+  cp colors.json.example colors.json
+fi
+
+exec "$@"

 echo "Done!"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,7 +2,7 @@
  "name": "notsoweb.frontend",
  "copyright": "Notsoweb Software Inc.",
  "private": true,
-  "version": "0.9.5",
+  "version": "0.9.12",
  "type": "module",
  "scripts": {
    "dev": "vite",
@ -10,22 +10,23 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@tailwindcss/postcss": "^4.0.9",
+    "@tailwindcss/vite": "^4.0.9",
    "@vitejs/plugin-vue": "^5.2.1",
-    "axios": "^1.7.8",
-    "laravel-echo": "^1.17.1",
+    "axios": "^1.8.1",
+    "laravel-echo": "^2.0.2",
    "luxon": "^3.5.0",
-    "pinia": "^2.2.8",
-    "postcss": "^8.4.49",
-    "pusher-js": "^8.4.0-rc2",
-    "tailwindcss": "^3.4.15",
+    "pinia": "^3.0.1",
+    "pusher-js": "^8.4.0",
+    "tailwindcss": "^4.0",
    "toastr": "^2.1.4",
-    "uuid": "^11.0.3",
-    "vite": "^6.0.1",
+    "uuid": "^11.1.0",
+    "vite": "^6.2.0",
    "vue": "^3.5.13",
-    "vue-i18n": "^10.0.5",
-    "vue-multiselect": "^3.1.0",
+    "vue-i18n": "^11.1.1",
+    "vue-multiselect": "^3.2.0",
    "vue-router": "^4.5.0",
-    "ziggy-js": "^2.4.1"
+    "ziggy-js": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,6 +1,5 @@
 export default {
  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
  },
 }
--- a/src/auth.js
+++ b/src/auth.js
@ -1,50 +0,0 @@
-import './css/base.css'
-
-import axios from 'axios';
-import { createPinia } from 'pinia'
-import { createApp } from 'vue'
-import { useRoute, ZiggyVue } from 'ziggy-js';
-import { i18n, lang } from '@/lang/i18n.js';
-import router from '@Router/Auth'
-import Notify from '@Plugins/Notify'
-import TailwindScreen from '@Plugins/TailwindScreen'
-import { defineApp, pagePlugin, reloadApp } from '@Services/Page';
-
-import Auth from '@Holos/Layout/Auth.vue'
-
-// Configurar axios
-axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-// Crear instancias globales
-window.Lang     = lang;
-window.Notify   = new Notify();
-window.TwScreen = new TailwindScreen();
-
-async function boot() {
-    try {
-        const routes = await axios.get(import.meta.env.VITE_API_URL + '/api/resources/routes');
-        const app = await axios.get(import.meta.env.VITE_API_URL + '/api/resources/app');
-        
-        // Iniciar rutas
-        window.Ziggy = routes.data;
-        window.route = useRoute();
-
-        defineApp(app.data);
-    } catch (error) {
-        console.error(error);
-        alert('Failed to load routes');
-    }
-
-    reloadApp();
-
-    createApp(Auth)
-        .use(createPinia())
-        .use(i18n)
-        .use(pagePlugin)
-        .use(router)
-        .use(ZiggyVue)
-        .mount('#app');
-}
-
-// Iniciar aplicación
-boot();
--- a/src/components/App.vue
+++ b/src/components/App.vue
@ -0,0 +1,23 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import useLoader from '@Stores/Loader';
+import { hasToken } from '@Services/Api';
+
+/** Definidores */
+const router = useRouter();
+const loader = useLoader();
+
+/** Ciclos */
+onMounted(() => {
+    if(!hasToken()) {
+        return router.push({ name: 'auth.index' })
+    }
+
+    loader.boot()
+})
+</script>
+
+<template>
+    <router-view />
+</template>
--- a/src/components/Holos/ActionSection.vue
+++ b/src/components/Holos/ActionSection.vue
@ -14,7 +14,7 @@ import SectionTitle from './SectionTitle.vue';
        </SectionTitle>

        <div class="mt-5 md:mt-0 md:col-span-2">
-            <div class="px-4 py-5 sm:p-6 shadow dark:shadow-sm dark:shadow-white/50 sm:rounded-lg">
+            <div class="px-4 py-5 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-sm">
                <slot name="content" />
            </div>
        </div>
--- a/src/components/Holos/Breadcrumb/Container.vue
+++ b/src/components/Holos/Breadcrumb/Container.vue
@ -0,0 +1,5 @@
+<template>
+    <nav class="flex items-center py-1 gap-0.5">
+        <slot />
+    </nav>
+</template>
--- a/src/components/Holos/Breadcrumb/Item.vue
+++ b/src/components/Holos/Breadcrumb/Item.vue
@ -0,0 +1,55 @@
+<script setup>
+import GoogleIcon from '@Shared/GoogleIcon.vue'
+import { useRouter } from 'vue-router';
+
+/** Definidores */
+const router = useRouter();
+
+/** Propiedades */
+const props = defineProps({
+    name: String,
+    icon: String,
+    route: Object,
+    active: Boolean,
+})
+
+/** Métodos */
+const handleClick = () => {
+    if (props.active) {
+        return;
+    }
+
+    router.push(props.route);
+}
+</script>
+
+<template>
+    <button
+        v-if="!active"
+        :to="route"
+        class="inline-flex items-center gap-1.5 text-sm duration-300 ease-in p-1 cursor-pointer"
+        @click="handleClick"
+    >
+            <GoogleIcon
+                :name="icon"
+                class="text-sm"
+            />
+            <span class="text-sm font-semibold hover:underline" v-text="name" />
+    </button>
+    <span v-if="!active" class="inline-block text-sm select-none pointer-events-none opacity-50">
+        <GoogleIcon
+            name="arrow_forward_ios"
+            class="text-xs font-semibold"
+        />
+    </span>
+    <div
+        v-if="active"
+        class="inline-flex items-center gap-1.5 text-sm duration-300 ease-in p-1"
+    >
+        <GoogleIcon
+            :name="icon"
+            class="text-sm"
+        />
+        <span class="font-semibold text-sm underline" v-text="name" />
+    </div>
+</template>
--- a/src/components/Holos/Breadcrumb/Separator.vue
+++ b/src/components/Holos/Breadcrumb/Separator.vue
@ -0,0 +1,13 @@
+<script setup>
+import GoogleIcon from '@Shared/GoogleIcon.vue'
+
+</script>
+
+<template>
+    <span class="inline-block mx-1 text-sm select-none pointer-events-none opacity-50">
+        <GoogleIcon
+            name="arrow_forward_ios"
+            class="text-xs font-semibold"
+        />
+    </span>
+</template>
--- a/src/components/Holos/Button/Icon.vue
+++ b/src/components/Holos/Button/Icon.vue
@ -19,7 +19,7 @@ const props = defineProps({

 <template>
    <button
-        class="flex justify-center items-center h-7 w-7 rounded-md btn-icon"
+        class="flex justify-center items-center h-7 w-7 rounded-sm btn-icon"
        :title="title"
        :type="type"
    >
--- a/src/components/Holos/Card/Indicator.vue
+++ b/src/components/Holos/Card/Indicator.vue
@ -14,7 +14,7 @@ defineProps({

 <template>
    <RouterLink
-        class="relative flex-1 flex flex-col gap-2 p-4 rounded -md bg-gray-200 dark:bg-transparent dark:border"
+        class="relative flex-1 flex flex-col gap-2 p-4 rounded-sm -md bg-gray-200 dark:bg-transparent dark:border"
        :to="to"
    >
        <label class="text-base font-semibold tracking-wider">
--- a/src/components/Holos/Checkbox.vue
+++ b/src/components/Holos/Checkbox.vue
@ -31,6 +31,6 @@ const proxyChecked = computed({
        v-model="proxyChecked"
        type="checkbox"
        :value="value"
-        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
+        class="rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:ring-indigo-500"
    >
 </template>
--- a/src/components/Holos/ConfirmsPassword.vue
+++ b/src/components/Holos/ConfirmsPassword.vue
@ -1,9 +1,9 @@
 <script setup>
 import { ref, nextTick } from 'vue';
-import { api, useForm } from '@Services/Api';
+import { useForm } from '@Services/Api';

 import Input           from './Form/Input.vue';
-import DialogModal     from './DialogModal.vue';
+import DialogModal     from './Modal/Elements/Base.vue';
 import PrimaryButton   from './Button/Primary.vue';
 import SecondaryButton from './Button/Secondary.vue';

--- a/src/components/Holos/DialogModal.vue
+++ b/src/components/Holos/DialogModal.vue
@ -1,46 +0,0 @@
-<script setup>
-import Modal from './Modal.vue';
-
-const emit = defineEmits(['close']);
-
-defineProps({
-    show: {
-        type: Boolean,
-        default: false,
-    },
-    maxWidth: {
-        type: String,
-        default: '2xl',
-    },
-    closeable: {
-        type: Boolean,
-        default: true,
-    },
-});
-
-const close = () => {
-    emit('close');
-};
-</script>
-
-<template>
-    <Modal
-        :show="show"
-        :max-width="maxWidth"
-        :closeable="closeable"
-        @close="close"
-    >
-        <div class="p-4">
-            <div class="text-lg font-medium">
-                <slot name="title" />
-            </div>
-
-            <div class="mt-4 text-sm">
-                <slot name="content" />
-            </div>
-        </div>
-        <div class="flex flex-row justify-center p-4 text-end">
-            <slot name="footer" />
-        </div>
-    </Modal>
-</template>
--- a/src/components/Holos/Dropdown.vue
+++ b/src/components/Holos/Dropdown.vue
@ -95,7 +95,7 @@ const alignmentClasses = computed(() => {
                style="display: none;"
                @click="open = false"
            >
-                <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
+                <div class="rounded-sm ring-1 ring-black/5" :class="contentClasses">
                    <slot name="content" />
                </div>
            </div>
--- a/src/components/Holos/DropdownLink.vue
+++ b/src/components/Holos/DropdownLink.vue
@ -6,7 +6,7 @@ defineProps({
    to: String
 });

-const style = 'block px-4 py-2 text-sm leading-5 hover:bg-secondary/80 dark:hover:bg-secondary-d/80 focus:outline-none focus:bg-gray-100 transition';
+const style = 'block px-4 py-2 text-sm leading-5 hover:bg-secondary/80 dark:hover:bg-secondary-d/80 focus:outline-hidden focus:bg-gray-100 cursor-pointer transition';
 </script>

 <template>
--- a/src/components/Holos/Form/Checkbox.vue
+++ b/src/components/Holos/Form/Checkbox.vue
@ -28,7 +28,7 @@ const vModel = computed({
 <template>
    <div class="relative w-full h-8">
        <input
-            class="appearance-none rounded-lg bg-primary cursor-pointer h-full w-full checked:bg-secondary dark:checked:bg-secondary-d transition-all duration-200 peer"
+            class="appearance-none rounded-sm bg-primary cursor-pointer h-full w-full checked:bg-secondary dark:checked:bg-secondary-d transition-all duration-200 peer"
            type="checkbox"
            :id="uuid"
            v-model="vModel"
--- a/src/components/Holos/Form/InputWithIcon.vue
+++ b/src/components/Holos/Form/InputWithIcon.vue
@ -65,7 +65,7 @@ onMounted(() => {

 <template>
    <div class="mb-4">
-        <div class="flex items-center border-2 py-2 px-3 rounded-2xl">
+        <div class="flex items-center border-2 py-2 px-3 rounded-sm">
            <GoogleIcon
                :name="icon"
            />
@ -73,7 +73,7 @@ onMounted(() => {
                ref="input"
                v-model="value"
                v-bind="$attrs"
-                class="pl-2 w-full outline-none border-none bg-transparent"
+                class="pl-2 w-full outline-hidden border-none bg-transparent"
                :class="{ 'cursor-not-allowed': disabled }"
                :disabled="disabled"
                :id="autoId"
--- a/src/components/Holos/Form/Todo/ItemWithForm.vue
+++ b/src/components/Holos/Form/Todo/ItemWithForm.vue
@ -111,7 +111,7 @@ onMounted(() => {
 </script>

 <template>
-    <div class="rounded border border-primary dark:border-primary-d p-2">
+    <div class="rounded-sm border border-primary dark:border-primary-d p-2">
        <p>{{ title }}</p>
        <div class="w-full grid gap-2 grid-cols-2 dark:bg-primary-d/50 rounded-md">
            <Selectable
@ -138,7 +138,7 @@ onMounted(() => {
            </div>
            <div class="col-span-2 space-y-2 ">
                <template v-for="item, index in values">
-                    <div class="relative rounded border border-primary/50">
+                    <div class="relative rounded-sm border border-primary/50">
                        <div class="grid gap-2 grid-cols-2 w-full items-center p-2 dark:bg-primary-d/50">
                            <Input
                                v-model="item.item.name"
--- a/src/components/Holos/FormSection.vue
+++ b/src/components/Holos/FormSection.vue
@ -21,7 +21,7 @@ const hasActions = computed(() => !! useSlots().actions);
        <div class="mt-5 md:mt-0 md:col-span-2">
            <form @submit.prevent="$emit('submitted')">
                <div
-                    class="p-4 sm:p-6 shadow dark:shadow-sm dark:shadow-white/50"
+                    class="p-4 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50"
                    :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
                >
                    <div class="grid grid-cols-6 gap-6">
@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
                    </div>
                </div>

-                <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 text-end sm:px-6 shadow dark:shadow-sm dark:shadow-white/50 sm:rounded-bl-md sm:rounded-br-md">
+                <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 text-end sm:px-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-bl-md sm:rounded-br-md">
                    <slot name="actions" />
                </div>
            </form>
--- a/src/components/Holos/Inbox.vue
+++ b/src/components/Holos/Inbox.vue
@ -68,7 +68,7 @@ const search = url => props.searcherCtl.searchWithInboxPagination(url);
                        </button>
                        <div
                            @click.away="filterMessages = false"
-                            class="bg-gray-200 shadow-2xl absolute left-0 top-6 w-32 py-2 text-gray-900 rounded z-10"
+                            class="bg-gray-200 shadow-2xl absolute left-0 top-6 w-32 py-2 text-gray-900 rounded-sm z-10"
                            :class="{'hidden':!filterMessages}"
                        >
                            <button
--- a/src/components/Holos/Inbox/Item.vue
+++ b/src/components/Holos/Inbox/Item.vue
@ -29,7 +29,7 @@ const selected = computed(() => {

 <template>
    <li
-        class="flex items-center rounded-lg border-y px-2 min-h-[35px] transition duration-300"
+        class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300"
        :class="{'bg-secondary text-secondary-t':selected, 'bg-primary/50 text-primary-t hover:bg-secondary/50 hover:text-secondary-t':!selected}"
    >
        <div class="pr-2">
--- a/src/components/Holos/Inbox/ItemTitle.vue
+++ b/src/components/Holos/Inbox/ItemTitle.vue
@ -1,6 +1,6 @@
 <template>
    <li
-        class="flex items-center rounded-lg border-y px-2 min-h-[35px] transition duration-300"
+        class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300"
    >
        <div class="pl-5 w-full flex items-center justify-between cursor-pointer">
            <div class="flex items-center font-semibold">
--- a/src/components/Holos/Inbox/Menu/Item.vue
+++ b/src/components/Holos/Inbox/Menu/Item.vue
@ -19,10 +19,10 @@ const props = defineProps({
 /** Propiedades computadas */
 const classes = computed(() => {
    let status = route().current(props.to, props.toParam)
-        ? 'bg-secondary bg-opacity-30'
-        : 'border-transparent hover:bg-secondary hover:bg-opacity-30';
+        ? 'bg-secondary/30'
+        : 'border-transparent hover:bg-secondary/30';

-    return ` text-primary flex items-center justify-between py-1.5 px-4 rounded cursor-pointer ${status} transition`
+    return ` text-primary flex items-center justify-between py-1.5 px-4 rounded-sm cursor-pointer ${status} transition`
 });
 </script>

@ -43,7 +43,7 @@ const classes = computed(() => {
                    {{ title }}
                </span>
            </span>
-            <span v-if="counter > 0" class="bg-primary text-gray-100 font-bold px-2 py-0.5 text-xs rounded-lg">
+            <span v-if="counter > 0" class="bg-primary text-gray-100 font-bold px-2 py-0.5 text-xs rounded-sm">
                {{ counter }}
            </span>
        </RouterLink>
--- a/src/components/Holos/Layout/App.vue
+++ b/src/components/Holos/Layout/App.vue
@ -49,7 +49,7 @@ onMounted(() => {
                />
            </div>
            <main class="flex h-full justify-center md:p-2">
-                <div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-sm md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 md:rounded-lg overflow-y-auto overflow-x-auto transition-colors duration-300">
+                <div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-xs md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 pb-4 md:rounded-sm overflow-y-auto overflow-x-auto transition-colors duration-300">
                    <slot />
                </div>
            </main>
--- a/src/components/Holos/Layout/Auth.vue
+++ b/src/components/Holos/Layout/Auth.vue
@ -47,7 +47,7 @@ onMounted(() => {
          />
        </div>

-        <main class="bg-white/10 w-full backdrop-blur-sm text-white px-4 py-4 rounded-md max-w-80">
+        <main class="bg-white/10 w-full backdrop-blur-xs text-white px-4 py-4 rounded-sm max-w-80">
          <RouterView />
        </main>

--- a/src/components/Holos/Layout/TermsLayout.vue
+++ b/src/components/Holos/Layout/TermsLayout.vue
@ -47,11 +47,11 @@ onMounted(() => {
            />
        </div>

-        <main class="bg-white/10 w-full mx-auto sm:max-w-2xl backdrop-blur-sm text-white px-4 py-8 rounded-md">
+        <main class="bg-white/10 w-full mx-auto sm:max-w-2xl backdrop-blur-xs text-white px-4 py-8 rounded-md">
          <slot />
        </main>

-        <footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-sm text-white transition-colors duration-global">
+        <footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-xs text-white transition-colors duration-global">
          <div>
              <span>
                  &copy;{{ APP_COPYRIGHT }}
--- a/src/components/Holos/Logo.vue
+++ b/src/components/Holos/Logo.vue
@ -1,12 +1,18 @@
 <script setup>
+import { hasToken } from '@Services/Api';
 import { useRouter } from 'vue-router';

 /** Definidores */
 const router = useRouter();

 /** Métodos */
-const home = () => router.push(view({ name: 'index' }));
-
+const home = () => {
+    if(hasToken()) {
+        router.push({ name: 'dashboard.index' });
+    } else {
+        location.replace('/');
+    }
+}
 </script>
 <template>
    <div
--- a/src/components/Holos/Modal.vue
+++ b/src/components/Holos/Modal.vue
@ -1,102 +0,0 @@
-<script setup>
-import { computed, onMounted, onUnmounted, watch } from 'vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    closeable: {
-        default: true,
-        type: Boolean
-    },
-    maxWidth: {
-        default: '2xl',
-        type: String
-    },
-    show: {
-        default: false,
-        type: Boolean
-    },
-});
-
-/** Métodos */
-const close = () => {
-    if (props.closeable) {
-        emit('close');
-    }
-};
-
-const closeOnEscape = (e) => {
-    if (e.key === 'Escape' && props.show) {
-        close();
-    }
-};
-
-const maxWidthClass = computed(() => {
-    return {
-        'sm': 'sm:max-w-sm',
-        'md': 'sm:max-w-md',
-        'lg': 'sm:max-w-lg',
-        'xl': 'sm:max-w-xl',
-        '2xl': 'sm:max-w-2xl',
-    }[props.maxWidth];
-});
-
-/** Observadores */
-watch(() => props.show, () => {
-    if (props.show) {
-        document.body.style.overflow = 'hidden';
-    } else {
-        document.body.style.overflow = null;
-    }
-});
-
-/** Ciclos */
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
-
-onUnmounted(() => {
-    document.removeEventListener('keydown', closeOnEscape);
-    document.body.style.overflow = null;
-});
-</script>
-
-<template>
-    <teleport to="body">
-        <transition leave-active-class="duration-300">
-            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
-                <transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0"
-                    enter-to-class="opacity-100"
-                    leave-active-class="ease-in duration-300"
-                    leave-from-class="opacity-100"
-                    leave-to-class="opacity-0"
-                >
-                    <div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
-                        <div class="absolute inset-0 bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt opacity-75" />
-                    </div>
-                </transition>
-
-                <transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-active-class="ease-in duration-300"
-                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                    <div 
-                        v-show="show" 
-                        class="mb-6 bg-page text-page-t dark:bg-page-d dark:text-page-dt rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" 
-                        :class="maxWidthClass"
-                    >
-                        <slot v-if="show" />
-                    </div>
-                </transition>
-            </div>
-        </transition>
-    </teleport>
-</template>
--- a/src/components/Holos/Modal/Destroy.vue
+++ b/src/components/Holos/Modal/Destroy.vue
@ -1,7 +1,9 @@
 <script setup>
+import { ref } from 'vue';
+
+import ModalBase       from './Elements/Base.vue';
 import DangerButton    from '../Button/Danger.vue';
 import SecondaryButton from '../Button/Secondary.vue';
-import DialogModal     from '../DialogModal.vue';

 /** Eventos */
 defineEmits([
@ -11,16 +13,27 @@ defineEmits([

 /** Propiedades */
 const props = defineProps({
-    show: Boolean,
    title: {
        default: Lang('delete.title'),
        type: String
    }
 });
+
+/** Referencias */
+const modalRef = ref(null);
+
+/** Exposiciones */
+defineExpose({
+    open:  () => modalRef.value.open(),
+    close: () => modalRef.value.close()
+});
 </script>

 <template>
-    <DialogModal :show="show">
+    <ModalBase
+        ref="modalRef"
+        @close="$emit('close')"
+    >
        <template #title>
            <p
                class="font-bold text-xl"
@ -28,15 +41,17 @@ const props = defineProps({
            />
        </template>
        <template #content>
-            <div class="w-full right-0 mt-2">
-                <div class="rounded overflow-hidden shadow-lg">
+            <div class="w-full right-0">
+                <div class="overflow-hidden space-y-2 shadow-lg">
                    <slot />
+                    <div class="px-4 pb-2">
+                        <p 
+                        class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
+                        v-text="$t('delete.confirm')"
+                        />
+                    </div>
                </div>
            </div>
-            <p 
-                class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
-                v-text="$t('delete.confirm')"
-            />
        </template>
        <template #footer>
            <div class="space-x-2">
@ -47,9 +62,9 @@ const props = defineProps({
                />
                <SecondaryButton
                    v-text="$t('cancel')"
-                    @click="$emit('close')"
+                    @click="modalRef.close()"
                />
            </div>
        </template>
-    </DialogModal>
+    </ModalBase>
 </template>
--- a/src/components/Holos/Modal/Edit.vue
+++ b/src/components/Holos/Modal/Edit.vue
@ -1,51 +0,0 @@
-<script setup>
-import PrimaryButton   from '../Button/Primary.vue';
-import SecondaryButton from '../Button/Secondary.vue';
-import DialogModal     from '../DialogModal.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close',
-    'update' 
-]);
-
-/** Propiedades */
-const props = defineProps({
-    show: Boolean,
-    title: {
-        default: Lang('edit'),
-        type: String
-    }
-});
-</script>
-
-<template>
-    <DialogModal :show="show">
-        <template #title>
-            <p
-                class="font-bold text-xl"
-                v-text="title"
-            />
-        </template>
-        <template #content>
-            <div class="w-full right-0 mt-2">
-                <div class="rounded overflow-hidden">
-                    <slot />
-                </div>
-            </div>
-        </template>
-        <template #footer>
-            <div class="space-x-2">
-                <slot name="buttons" />
-                <PrimaryButton 
-                    v-text="$t('update')"
-                    @click="$emit('update')"
-                />
-                <SecondaryButton
-                    v-text="$t('close')"
-                    @click="$emit('close')" 
-                />
-            </div>
-        </template>
-    </DialogModal>
-</template>
--- a/src/components/Holos/Modal/Elements/Base.vue
+++ b/src/components/Holos/Modal/Elements/Base.vue
@ -0,0 +1,93 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+/** Eventos */
+const emit = defineEmits(['close']);
+
+/** Propiedades */
+const props = defineProps({
+    maxWidth: {
+        default: '2xl',
+        type: String
+    }
+});
+
+const show = ref(false);
+
+/** Métodos */
+const maxWidthClass = computed(() => {
+    return {
+        'sm': 'sm:max-w-sm',
+        'md': 'sm:max-w-md',
+        'lg': 'sm:max-w-lg',
+        'xl': 'sm:max-w-xl',
+        '2xl': 'sm:max-w-2xl',
+        '3xl': 'sm:max-w-3xl',
+        '4xl': 'sm:max-w-4xl',
+        '5xl': 'sm:max-w-5xl',
+        '6xl': 'sm:max-w-6xl',
+        '7xl': 'sm:max-w-7xl',
+    }[props.maxWidth];
+});
+
+/** Observadores */
+watch(() => show, () => {
+    if (show.value) {
+        document.body.style.overflow = 'hidden';
+    } else {
+        document.body.style.overflow = null;
+    }
+});
+
+/** Exposiciones */
+defineExpose({
+    open:  () => show.value = true,
+    close: () => {
+        show.value = false;
+        emit('close');
+    }
+});
+</script>
+
+<template>
+    <teleport to="body">
+        <transition
+            enter-active-class="ease-out duration-300"
+            enter-from-class="opacity-0"
+            enter-to-class="opacity-100"
+            leave-active-class="ease-in duration-300"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+        >
+            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 bg-primary/50 z-50 transition-all"></div>
+        </transition>
+        <transition
+            enter-active-class="ease-out duration-300"
+            enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+            leave-active-class="ease-in duration-300"
+            leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+            leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50 transition-all" scroll-region>
+                <div 
+                    v-show="show" 
+                    class="mb-6 bg-page text-page-t dark:bg-page-d dark:text-page-dt rounded-sm overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" 
+                    :class="maxWidthClass"
+                >
+                    <div class="flex flex-col">
+                        <div class="text-lg px-4 font-medium">
+                            <slot name="title" />
+                        </div>
+                        <div class="text-sm">
+                            <slot name="content" />
+                        </div>
+                    </div>
+                    <div class="flex flex-row justify-center p-2 text-end">
+                        <slot name="footer" />
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </teleport>
+</template>
--- a/src/components/Holos/Modal/Elements/Header.vue
+++ b/src/components/Holos/Modal/Elements/Header.vue
@ -7,13 +7,13 @@ defineProps({
 </script>

 <template>
-    <div class="text-center p-6 bg-primary dark:bg-primary-d border-b">
+    <div class="text-center p-6 bg-primary dark:bg-primary-d">
        <slot />
-        <p class="pt-2 text-lg font-bold text-gray-50">
+        <p class="pt-2 text-lg font-bold text-primary-t dark:text-primary-t-d">
            {{ title }}
        </p>
        <p v-if="subtitle"
-            class="text-sm text-gray-50"
+            class="text-sm text-primary-t dark:text-primary-t-d"
        >
            {{ subtitle }}
        </p>
--- a/src/components/Holos/Modal/Show.vue
+++ b/src/components/Holos/Modal/Show.vue
@ -1,24 +1,32 @@
 <script setup>
+import { ref } from 'vue';
+
+import ModalBase       from './Elements/Base.vue';
 import SecondaryButton from '../Button/Secondary.vue';
-import PrimaryButton   from '../Button/Primary.vue';
-import DialogModal     from '../DialogModal.vue';

 /** Eventos */
-const emit = defineEmits([
-    'close',
-    'edit'
-]);
+const emit = defineEmits(['close']);

 /** Propiedades */
 const props = defineProps({
-    editable: Boolean,
-    show: Boolean,
    title: String
 });
+
+/** Referencias */
+const modalRef = ref(null);
+
+/** Exposiciones */
+defineExpose({
+    open: ()  => modalRef.value.open(),
+    close: () => modalRef.value.close()
+});
 </script>

 <template>
-    <DialogModal :show="show">
+    <ModalBase
+        ref="modalRef"
+        @close="emit('close')"
+    >
        <template #title>
            <p
                class="font-bold text-xl"
@ -26,8 +34,8 @@ const props = defineProps({
            />
        </template>
        <template #content>
-            <div class="w-full right-0 mt-2">
-                <div class="rounded overflow-hidden shadow-lg">
+            <div class="w-full right-0">
+                <div class="overflow-hidden shadow-lg">
                    <slot />
                </div>
            </div>
@ -35,15 +43,11 @@ const props = defineProps({
        <template #footer>
            <div class="space-x-2">
                <slot name="buttons" />
-                <PrimaryButton v-if="editable"
-                    v-text="$t('update')"
-                    @click="$emit('edit')"
-                />
                <SecondaryButton
                    v-text="$t('close')"
-                    @click="$emit('close')" 
+                    @click="modalRef.close()" 
                />
            </div>
        </template>
-    </DialogModal>
+    </ModalBase>
 </template>
--- a/src/components/Holos/Modal/Template/Destroy.vue
+++ b/src/components/Holos/Modal/Template/Destroy.vue
@ -1,4 +1,5 @@
 <script setup>
+import { ref } from 'vue';
 import { api } from '@Services/Api.js';

 import DestroyModal from '../Destroy.vue';
@ -6,40 +7,63 @@ import Header       from '../Elements/Header.vue';

 /** Eventos */
 const emit = defineEmits([
+    'open',
    'close',
    'update'
 ]);

 /** Propiedades */
 const props = defineProps({
-    model: Object,
-    show: Boolean,
    to: Function,
+    title: {
+        type: String,
+        default: 'name'
+    },
+    subtitle: {
+        type: String,
+        default: 'description'
+    }
 });

+const model    = ref({});
+const modalRef = ref(null);
+
 /** Métodos */
-const destroy = (id) => api.delete(props.to(id), {
-    onSuccess: () => {
-        Notify.success(Lang('deleted'));
-        emit('close');
-        emit('update');
-    },
-    onError: () => {
-        Notify.info(Lang('notFound'));
-        emit('close');
+const destroy = () => {
+    api.delete(props.to(model.value.id), {
+        onSuccess: () => {
+            Notify.success(Lang('deleted'));
+            emit('update');
+        },
+        onError: () => {
+            Notify.info(Lang('notFound'));
+        },
+        onFinish: () => {
+            modalRef.value.close();
+        }
+    });
+}
+
+/** Exposiciones */
+defineExpose({
+    open:  (modelData) => {
+        model.value = modelData;
+        modalRef.value.open();
+
+        emit('open')
    }
 });
 </script>

 <template>
    <DestroyModal
-        :show="show"
+        ref="modalRef"
        @close="$emit('close')"
-        @destroy="destroy(model.id)"
+        @destroy="destroy"
    >
        <Header
-            :subtitle="model.full_last_name"
-            :title="model.name"
+            :title="model[title]"
+            :subtitle="model[subtitle]"
        />
    </DestroyModal>
 </template>
--- a/src/components/Holos/PageHeader.vue
+++ b/src/components/Holos/PageHeader.vue
@ -1,32 +1,46 @@
 <script setup>
-import { RouterLink } from 'vue-router';
+import { RouterLink, useRoute } from 'vue-router';
+import { breadcrumbItem, breadcrumbMeta } from '@Controllers/BreadcrumbController.js';

 import IconButton from '@Holos/Button/Icon.vue'
+import BreadcrumbContainer from '@Holos/Breadcrumb/Container.vue'
+import BreadcrumbItem from '@Holos/Breadcrumb/Item.vue'

-defineProps({
+/** Definidores */
+const vroute = useRoute();
+
+const props = defineProps({
    title: String
 });

+const breadcrumbs = breadcrumbMeta(vroute);
+
 </script>

 <template>
-    <div v-if="title" class="flex w-full justify-center">
-        <h2
-            class="font-bold text-xl uppercase"
-            v-text="title"
-        />
-    </div>
-    <div class="flex w-full justify-end py-[0.31rem] mb-2 border-y-2 border-page-t dark:border-page-dt">
-        <div id="buttons" class="flex items-center space-x-1 text-sm">
-            <slot />
-            <RouterLink :to="$view({ name: 'index' })">
-                <IconButton
-                    :title="$t('home')"
-                    class="text-white"
-                    icon="home"
-                    filled
+    <div>
+        <BreadcrumbContainer>
+            <template v-for="(item, index) in breadcrumbs" :key="item.name">
+                <BreadcrumbItem
+                    :name="item.name"
+                    :icon="item.icon"
+                    :route="item.route"
+                    :active="index === breadcrumbs.length - 1"
                />
-            </RouterLink>
+            </template>
+        </BreadcrumbContainer>
+        <div class="flex w-full justify-end py-[0.31rem] mb-2 border-y-2 border-page-t dark:border-page-dt">
+            <div id="buttons" class="flex items-center space-x-1 text-sm">
+                <slot />
+                <RouterLink :to="$view({ name: 'index' })">
+                    <IconButton
+                        :title="$t('home')"
+                        class="text-white"
+                        icon="refresh"
+                        filled
+                    />
+                </RouterLink>
+            </div>
        </div>
    </div>
 </template>
--- a/src/components/Holos/Paginable.vue
+++ b/src/components/Holos/Paginable.vue
@ -16,7 +16,7 @@ const props = defineProps({

 <template>
    <section class="pb-2">
-        <div class="w-full overflow-hidden rounded-md shadow-lg">
+        <div class="w-full overflow-hidden rounded-sm shadow-lg">
            <div v-if="!processing" class="w-full overflow-x-auto">
                <template v-if="items?.total > 0">
                    <slot
--- a/src/components/Holos/Searcher.vue
+++ b/src/components/Holos/Searcher.vue
@ -1,8 +1,15 @@
 <script setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { breadcrumbMeta } from '@Controllers/BreadcrumbController.js';

 import IconButton from '@Holos/Button/Icon.vue'
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+import BreadcrumbContainer from '@Holos/Breadcrumb/Container.vue'
+import BreadcrumbItem from '@Holos/Breadcrumb/Item.vue'
+
+/** Definidores */
+const vroute = useRoute();

 /** Eventos */
 const emit = defineEmits([
@ -18,6 +25,7 @@ const props = defineProps({
    }
 })

+const breadcrumbs = breadcrumbMeta(vroute);
 const query = ref('');

 /** Métodos */
@ -30,14 +38,20 @@ const clear = () => {

    search();
 }
+
 </script>
+
 <template>
-    <div v-if="title" class="flex w-full justify-center">
-        <h2
-            class="font-bold text-xl uppercase"
-            v-text="title"
-        />
-    </div>
+    <BreadcrumbContainer>
+        <template v-for="(item, index) in breadcrumbs" :key="item.name">
+            <BreadcrumbItem
+                :name="item.name"
+                :icon="item.icon"
+                :route="item.route"
+                :active="index === breadcrumbs.length - 1"
+            />
+        </template>
+    </BreadcrumbContainer>
    <div class="flex w-full justify-between items-center border-y-2 border-page-t dark:border-page-dt">
        <div>
            <div class="relative py-1 z-0">
@ -57,7 +71,7 @@ const clear = () => {
                </div>
                <input
                    id="search"
-                    class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-lg outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1"
+                    class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-sm outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1"
                    autocomplete="off"
                    :placeholder="placeholder"
                    required
--- a/src/components/Holos/Skeleton/Header.vue
+++ b/src/components/Holos/Skeleton/Header.vue
@ -31,8 +31,8 @@ const loader              = useLoader()
    <header
      class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50"
      :class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}"
-      >
-        <div class="my-2 flex px-6 items-center justify-between h-[2.75rem] rounded-lg bg-primary dark:bg-primary-d text-white z-20 ">
+    >
+      <div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-primary dark:bg-primary-d text-white z-20 ">
        <GoogleIcon
          class="text-2xl mt-1 z-50"
          name="list"
@ -45,16 +45,18 @@ const loader              = useLoader()
            <li v-if="loader.isProcessing" class="flex items-center">
              <Loader /> 
            </li>
-            <li v-if="hasPermission('users.online')">
-              <RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
-                <GoogleIcon
-                  class="text-xl mt-1"
-                  name="connect_without_contact"
-                  :title="$t('notifications.title')"
-                />
-                <span class="text-xs">{{ users.length - 1 }}</span>
-              </RouterLink>
-            </li>
+            <template v-if="notifier.isEnabled">
+              <li v-if="hasPermission('users.online')">
+                <RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
+                  <GoogleIcon
+                    class="text-xl mt-1"
+                    name="connect_without_contact"
+                    :title="$t('notifications.title')"
+                  />
+                  <span class="text-xs">{{ users.length - 1 }}</span>
+                </RouterLink>
+              </li>
+            </template>
            <li class="flex items-center">
              <GoogleIcon
                class="text-xl mt-1"
@ -86,11 +88,11 @@ const loader              = useLoader()
                  <template #trigger>
                    <div class="flex space-x-4">
                      <button
-                        class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-none transition"
+                        class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-hidden cursor-pointer transition"
                        :title="$t('users.menu')"
                      >
                        <img 
-                          class="h-8 w-8 rounded-full object-cover"
+                          class="h-8 w-8 rounded-sm object-cover"
                          :alt="$page.user.name"
                          :src="$page.user.profile_photo_url"
                        >
--- a/src/components/Holos/Skeleton/Sidebar/Left.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Left.vue
@ -29,7 +29,7 @@ const year = (new Date).getFullYear();
      :class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
    >
      <div class="flex flex-col h-full p-2 md:w-64">
-        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg  overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
+        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
          <div>
            <div class="flex w-full px-2 mt-2">
              <Logo
@ -45,7 +45,7 @@ const year = (new Date).getFullYear();
                &copy {{year}} {{ APP_COPYRIGHT }}
              </p>
            <p class="text-center text-xs text-yellow-500 cursor-pointer">
-              <RouterLink :to="{name:'changelogs'}"> APP {{ APP_VERSION }} </RouterLink> API {{ $page.app.version }}
+              <RouterLink :to="{name:'changelogs.app'}"> APP {{ APP_VERSION }} </RouterLink> <RouterLink :to="{name:'changelogs.core'}"> API {{ $page.app.version }} </RouterLink>
            </p>
          </div>
        </div>
--- a/src/components/Holos/Skeleton/Sidebar/Link.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Link.vue
@ -21,7 +21,7 @@ const classes = computed(() => {
        ? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d'
        : 'border-transparent';

-    return `flex items-center h-11 focus:outline-none hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
+    return `flex items-center h-11 focus:outline-hidden hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
 });

 const closeSidebar = () => {
--- a/src/components/Holos/Skeleton/Sidebar/Notification.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Notification.vue
@ -4,30 +4,24 @@ import { RouterLink } from 'vue-router';
 import useNotificationSidebar from '@Stores/NotificationSidebar'
 import useNotifier from '@Stores/Notifier'

-import ModalController    from '@Controllers/ModalController.js';
-
 import GoogleIcon    from '@Shared/GoogleIcon.vue';
-import Item          from './Notification/Item.vue';
 import PrimaryButton from '@Holos/Button/Primary.vue';
-import ShowView      from '@Holos/Skeleton/Sidebar/Notification/Show.vue';
+import ShowModal     from './Notification/Show.vue';
+import Item          from './Notification/Item.vue';
+
+/** Eventos */
+const emit = defineEmits(['open']);

 /** Definidores */
 const notifier            = useNotifier();
 const notificationSidebar = useNotificationSidebar()

-/** Controladores */
-const Modal    = new ModalController();
-
-/** Eventos */
-const emit = defineEmits(['open']);
-
 /** Propiedades */
 const props = defineProps({
  sidebar: Boolean
 });

-const showModal    = ref(Modal.showModal);
-const modelModal   = ref(Modal.modelModal);
+const showModal = ref(false);

 </script>

@ -42,7 +36,7 @@ const modelModal   = ref(Modal.modelModal);
      :class="{'w-64': notificationSidebar.isClosed}"
    >
      <div class="flex flex-col h-full p-2 md:w-64">
-        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg  overflow-y-auto overflow-x-hidden bg-primary/70 text-primary-t dark:bg-primary-d/70 dark:text-primary-dt">
+        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm  overflow-y-auto overflow-x-hidden bg-primary/70 text-primary-t dark:bg-primary-d/70 dark:text-primary-dt">
          <div class="flex justify-between px-2 items-center">
            <div class="py-1">
              <h4 class="text-md font-semibold">
@ -68,7 +62,7 @@ const modelModal   = ref(Modal.modelModal);
              <Item v-for="notification in notifier.notifications"
                :key="notification.id"
                :notification="notification"
-                @openModal="Modal.switchShowModal(notification)"
+                @openModal="showModal.open(notification)"
              />
            </ul>
          </div>
@ -83,10 +77,8 @@ const modelModal   = ref(Modal.modelModal);
      </div>
    </section>

-    <ShowView
-      :show="showModal" 
-      :model="modelModal" 
-      @close="Modal.switchShowModal"
+    <ShowModal
+      ref="showModal"
      @reload="notifier.getUpdates()"
    />
  </div>
--- a/src/components/Holos/Skeleton/Sidebar/Notification/Item.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Notification/Item.vue
@ -18,7 +18,7 @@ defineProps({
 </script>

 <template>
-    <li class="flex flex-col w-full items-center p-2 bg-primary dark:bg-primary-d text-white rounded-lg shadow-md">
+    <li class="flex flex-col w-full items-center p-2 bg-primary dark:bg-primary-d text-white rounded-sm shadow-md">
        <div class="flex w-full justify-between text-gray-400">
            <div>
                <h6 class="text-[10px]">{{ getDateTime(notification.created_at) }}</h6>
@ -43,7 +43,7 @@ defineProps({
                    </div>
                </template>
                <template v-else>
-                    <div class="w-10 h-10 bg-secondary dark:bg-secondary-d rounded-xl flex items-center justify-center">
+                    <div class="w-10 h-10 bg-secondary dark:bg-secondary-d rounded-sm flex items-center justify-center">
                        <img v-if="notification.user"
                           class="rounded-full object-cover"
                           :alt="notification.user.name"
--- a/src/components/Holos/Skeleton/Sidebar/Notification/Show.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Notification/Show.vue
@ -1,5 +1,5 @@
 <script setup>
-import { computed, nextTick, onUpdated } from 'vue';
+import { ref } from 'vue';
 import { getDateTime } from '@Controllers/DateController';
 import useNotifier from '@Stores/Notifier';

@ -17,28 +17,34 @@ const emit = defineEmits([
 ]);

 /** Propiedades */
-const props = defineProps({
-    show: Boolean,
-    model: Object
-});
+const modalRef = ref(null);
+const model    = ref({});

-onUpdated(() => {
-    if(!props.model.read_at && props.show) {
-        notifier.readNotification(props.model.id);
+/** Métodos */
+function readNotification() {
+    if(!model.value.read_at) {
+        notifier.readNotification(model.value.id);
    }
+}

-    if(!props.model.read_at && !props.show) {
-        emit('reload');
+/** Exposiciones */
+defineExpose({
+    open: (data) => {
+        model.value = data;
+        modalRef.value.open();
+        readNotification();
    }
 });
 </script>
+
 <template>
    <ShowModal
-        :show="show"
-        @close="$emit('close')"
+        ref="modalRef"
+        :title="$t('notification')"
+        @close="$emit('reload')"
    >
        <Header
-            :title="model.data.title"
+            :title="model.data?.title"
        >
        </Header>
        <div class="py-2 border-b">
@ -53,11 +59,11 @@ onUpdated(() => {
                    </p>
                    <div class="flex flex-col">
                        <b>{{ $t('description') }}: </b>
-                        {{ model.data.description }}
+                        {{ model.data?.description }}
                    </div>
-                    <div v-if="model.data.message" class="flex flex-col">
+                    <div v-if="model.data?.message" class="flex flex-col">
                        <b>{{ $t('message') }}: </b>
-                        {{ model.data.message }}
+                        {{ model.data?.message }}
                    </div>
                    <p>
                        <b>{{ $t('created_at') }}: </b>
--- a/src/components/Holos/Skeleton/Sidebar/Right.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Right.vue
@ -23,7 +23,7 @@ const props = defineProps({
      :class="{'w-64': rightSidebar.isClosed, 'w-screen': rightSidebar.isOpened}"
    >
      <div class="flex flex-col h-full p-2 md:w-64">
-        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg  overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
+        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm  overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
          <div>
            <ul class="flex h-full flex-col md:pb-4 space-y-1">
              <slot />
--- a/src/components/Holos/Table.vue
+++ b/src/components/Holos/Table.vue
@ -16,10 +16,10 @@ const props = defineProps({

 <template>
    <section class="pb-2">
-        <div class="w-full overflow-hidden rounded-md shadow-lg">
+        <div class="w-full overflow-hidden rounded-sm shadow-lg dark:shadow-xs dark:shadow-white">
            <div class="w-full overflow-x-auto">
                <table v-if="!processing" class="w-full">
-                    <thead>
+                    <thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
                        <tr>
                            <slot name="head" />
                        </tr>
@ -50,7 +50,7 @@ const props = defineProps({
                    </thead>
                    <tbody>
                        <tr>
-                            <td colspan="100%" class="table-item h-7 text-center">
+                            <td colspan="100%" class="table-cell h-7 text-center">
                                <div class="w-full h-4 bg-secondary/50 rounded-md"></div>
                            </td>
                        </tr>
--- a/src/components/Holos/TableSimple.vue
+++ b/src/components/Holos/TableSimple.vue
@ -15,7 +15,7 @@ const props = defineProps({
        <div class="w-full overflow-hidden rounded-md shadow-lg">
            <div class="w-full overflow-x-auto">
                <table class="w-full">
-                    <thead>
+                    <thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
                        <tr>
                            <slot name="head" />
                        </tr>
--- a/src/components/Holos/Timeline/Item.vue
+++ b/src/components/Holos/Timeline/Item.vue
@ -2,13 +2,14 @@
 import { computed } from 'vue';
 import { getDate, getTime } from '@Controllers/DateController';

-import PrimaryButton from '@Holos/Button/Primary.vue';
-import GoogleIcon    from '@Shared/GoogleIcon.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
 /** Eventos */
 const emit = defineEmits([
    'show',
 ]);

+/** Propiedades */
 const props = defineProps({
    event: Object,
 });
@ -27,6 +28,8 @@ const colors = {
    restored: 'primary',
 };

+/** Propiedades computadas */
+
 const eventType = computed(() => {
    return props.event.event.split('.')[1];
 });
@ -46,7 +49,7 @@ const borderColor = computed(() => {
        <div class="relative flex w-full">
            <div class="absolute -left-3.5 top-7 h-0.5 w-8" :class="bgColor"></div>
            <div 
-                class="absolute -mt-3 -left-3.5 top-7 w-6 h-6 flex items-center justify-center rounded-full" 
+                class="absolute -mt-3 -left-3.5 top-7 w-6 h-6 flex items-center justify-center rounded-sm" 
                :class="bgColor"
                @click="emit('show', event.data)"
            >
@ -54,8 +57,8 @@ const borderColor = computed(() => {
                    :name="icons[eventType]"
                />
            </div>
-            <div class="w-full rounded-lg shadow-xl dark:shadow-page-dt dark:shadow-sm my-2 mx-4">
-                <div class="flex justify-between p-2 rounded-t-lg" :class="bgColor">
+            <div class="w-full rounded-sm shadow-xl dark:shadow-page-dt dark:shadow-xs my-2 mx-4">
+                <div class="flex justify-between p-2 rounded-t-sm" :class="bgColor">
                    <span
                        class="font-medium text-sm cursor-pointer"
                        @click="emit('show', event.data)"
@ -67,13 +70,13 @@ const borderColor = computed(() => {
                    </span>
                </div>
                <div class="p-2">
-                    <div class="flex flex-col justify-center items-center md:flex-row md:justify-start space-x-4">
+                    <div class="flex flex-col justify-center items-center md:flex-row md:justify-start md:space-x-4">
                        <div v-if="event.user" class="w-32">
                            <div class="flex flex-col w-full justify-center items-center space-y-2">
-                                <img :src="event.user?.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
+                                <img :src="event.user?.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-sm">
                            </div>
                        </div>
-                        <div class="flex flex-col space-y-2">
+                        <div class="flex w-full flex-col justify-start space-y-2">
                            <div>
                                <h4 class="font-semibold">{{ $t('description') }}:</h4>
                                <p>{{ event.description }}.</p>
--- a/src/controllers/BreadcrumbController.js
+++ b/src/controllers/BreadcrumbController.js
@ -0,0 +1,19 @@
+/** Breadcrumb */
+const breadcrumbItem = (name, icon, route = {name:'index'}) => ({ name, icon, route })
+
+const breadcrumbMeta = (route) => {
+    let breadcrumbs = [];
+
+    route.matched.forEach(match => {
+        if(match.name && match.meta?.title) {
+            breadcrumbs.push(breadcrumbItem(match.meta.title, match.meta.icon, {name: match.name}));
+        }
+    });
+
+    return breadcrumbs;
+}
+
+export {
+    breadcrumbItem,
+    breadcrumbMeta,
+}
--- a/src/controllers/ModalController.js
+++ b/src/controllers/ModalController.js
@ -1,92 +0,0 @@
-import { ref } from 'vue';
-
-/**
- * Controlador simple de las bandejas
- */
-class ModalController
-{
-    // Modals
-    confirmModal   = ref(false);
-    destroyModal   = ref(false);
-    editModal      = ref(false);
-    noteModal      = ref(false);
-    manyNotesModal = ref(false);
-    showModal      = ref(false);
-    importModal    = ref(false);
-
-    // Models
-    modelModal     = ref({});
-    
-    constructor() {}
-
-    /**
-     * Controla el cambio entre show y edit
-     */
-    switchShowEditModal = () => {
-        this.showModal.value = !this.showModal.value
-        this.editModal.value = !this.editModal.value
-    };
-
-    /**
-     * Controla el switch de eliminar
-     */
-    switchShowModal = (model) => {
-        this._setModel(model);
-        this.showModal.value = !this.showModal.value
-    };
-
-    /**
-     * Controla el switch de importar
-     */
-    switchImportModal = () => {
-        this.importModal.value = !this.importModal.value
-    };
-
-    /**
-     * Controla el switch de eliminar
-    */
-   switchEditModal = (model) => {
-        this._setModel(model);
-        this.editModal.value = !this.editModal.value
-    };
-
-    /**
-     * Controla el switch de eliminar
-     */
-    switchDestroyModal = (model) => {
-        this._setModel(model);
-        this.destroyModal.value = !this.destroyModal.value
-    };
-
-    /**
-     * Controla el switch de nota
-     */
-    switchNoteModal = () => {
-        this.noteModal.value = !this.noteModal.value
-    };
-
-    /**
-     * Controla el switch de notas aplicadas a muchos
-     */
-    switchManyNotesModal = () => {
-        this.manyNotesModal.value = !this.manyNotesModal.value
-    };
-
-    /**
-     * Controla el switch de nota
-     */
-    switchConfirmModal = () => {
-        this.confirmModal.value = !this.confirmModal.value
-    };
-
-    /**
-     * Guarda el modelo
-     */
-    _setModel = (model) => {
-        if(model) {
-            this.modelModal.value = model;
-        }
-    }
-}
-
-export default ModalController;
--- a/src/css/app.css
+++ b/src/css/app.css
@ -1,6 +1,15 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "../../colors.css";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-google-icon-outlined: "Material Symbols Outlined"; 
+  --font-google-icon-outlined-fill: "Material Symbols Outlined Fill";
+  --font-google-icon-rounded: "Material Symbols Rounded";
+  --font-google-icon-rounded-fill: "Material Symbols rounded-sm Fill";
+  --font-google-icon-sharp: "Material Symbols Sharp";
+  --font-google-icon-sharp-fill: "Material Symbols Sharp Fill";
+}

 .app-bg-light {
  @apply bg-primary
@ -11,7 +20,7 @@
 }

 .btn {
-  @apply inline-flex justify-center items-center w-fit px-1.5 py-1.5 rounded-md font-medium border border-transparent text-xs text-white uppercase tracking-widest hover:opacity-90 focus:outline-none active:saturate-150 disabled:opacity-25 transition;
+  @apply inline-flex justify-center items-center w-fit px-1.5 py-1.5 rounded-sm font-medium border border-transparent text-xs text-white uppercase tracking-widest hover:opacity-90 focus:outline-hidden active:saturate-150 disabled:opacity-25 cursor-pointer transition;
 }

 .btn-primary {
@ -35,53 +44,37 @@
 }

 .btn-icon {
-  @apply flex w-fit min-h-6 px-1.5 py-1.5 rounded-md font-medium bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt;
+  @apply flex w-fit min-h-6 px-1.5 py-1.5 rounded-sm font-medium bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt cursor-pointer;
 }

 .input-primary {
-    @apply w-full p-2 border rounded-md outline-0 bg-transparent
+  @apply w-full p-[6.5px] border-b border-page-t/50 dark:border-page-dt/50 bg-primary/5 rounded-sm outline-0 
 }

 .nav-item {
-    @apply p-1
+  @apply p-1
 }

-.table-item {
-  @apply px-2 border text-sm;
+.table-row {
+  @apply hover:bg-secondary/10 dark:hover:bg-secondary-d/10 transition-colors duration-100
+}
+
+.table-cell {
+  @apply px-2 py-0.5 text-sm border border-primary/30 dark:border-primary-dt/30;
 }

 .table-actions {
-  @apply flex justify-center items-center space-x-2;
+  @apply flex  justify-center items-center space-x-1;
 }

 nav a.router-link-active {
  @apply bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d
 }

-table {
-  @apply w-full;
-}
-
-table>thead {
-  @apply bg-primary text-white;
-}
-
-table>thead>tr {
-  @apply text-base font-semibold tracking-wide text-left text-white bg-primary dark:bg-primary-d uppercase border-b divide-indigo-50 divide-x;
-}
-
-table>thead>tr>th {
-  @apply px-2 border border-white text-sm;
-}
-
 .with-transition {
  @apply transition-all duration-300
 }

-.with-color-transition {
-    @apply transition-colors duration-500
-}
-
 /**
 * Switch
 */
--- a/src/css/base.css
+++ b/src/css/base.css
@ -1,5 +1,5 @@
+@import './app.css';
@import './icons.css';
@import './notifications.css';
@import "vue-multiselect/dist/vue-multiselect.css";
@import './multiselect.css';
-@import './app.css';
--- a/src/css/icons.css
+++ b/src/css/icons.css
@ -38,13 +38,13 @@
 }

 /**
-* Rounded fill
+* rounded-sm fill
 *
 * https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0
 * https://fonts.gstatic.com/s/materialsymbolsrounded/v168/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
 */
@font-face {
-    font-family: 'Material Symbols Rounded Fill';
+    font-family: 'Material Symbols rounded-sm Fill';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
@ -75,18 +75,3 @@
    font-weight: 400;
    src: url(./icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
 }
-
-.material-symbols{
-    font-weight: normal;
-    font-style: normal;
-    font-size: 20spx;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
-}
--- a/src/css/multiselect.css
+++ b/src/css/multiselect.css
@ -4,7 +4,7 @@

 .multiselect__input,
 .multiselect__single  {
-    @apply bg-white dark:bg-primary dark:text-white
+    @apply bg-white dark:bg-transparent dark:text-white
 }

 .multiselect__input::placeholder {
@ -12,7 +12,7 @@
 }

 .multiselect__tag {
-  @apply dark:bg-green-800;
+  @apply bg-success dark:bg-success-d;
 }

 .multiselect__tag-icon::after {
@ -25,7 +25,7 @@
 }

 .multiselect__tags {
-  @apply dark:bg-primary min-h-8 border-0 border-b border-b-slate-400 pt-1 with-color-transition;
+  @apply bg-primary/5  dark:bg-primary-d/5 min-h-8 border-0 border-b border-page-t/50 dark:border-page-dt/50 pt-1;
 }

 .multiselect__option--highlight {
@ -45,7 +45,7 @@
  }

 .multiselect__content-wrapper {
-    @apply bg-gray-100 dark:bg-primary;
+    @apply bg-page dark:bg-page-d;
  }

  
--- a/src/index.js
+++ b/src/index.js
@ -10,10 +10,12 @@ import Notify from '@Plugins/Notify'
 import { bootPermissions, bootRoles } from '@Plugins/RolePermission';
 import TailwindScreen from '@Plugins/TailwindScreen'
 import { pagePlugin } from '@Services/Page';
-import { reloadApp, view } from '@Services/Page';
+import { defineApp, reloadApp, view } from '@Services/Page';
+import { apiURL } from '@Services/Api';

-import App      from '@Layouts/AppLayout.vue'
+import App      from '@Components/App.vue'
 import Error503 from '@Pages/Errors/503.vue'
+import { hasToken } from './services/Api';

 // Configurar axios
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
@ -29,9 +31,11 @@ async function boot() {

    // Iniciar rutas
    try {
-        const routes = await axios.get(import.meta.env.VITE_API_URL + '/api/resources/routes');
+        const routes = await axios.get(apiURL('resources/routes'));
+        const appData = await axios.get(apiURL('resources/app'));

        window.Ziggy = routes.data;
+        defineApp(appData.data);
        window.route = useRoute();
        window.view  = view;
        initRoutes   = true;
@ -41,12 +45,14 @@ async function boot() {

    if(initRoutes) {
        // Iniciar permisos
-        await bootPermissions();
-        await bootRoles();
+        if(hasToken()) {
+            await bootPermissions();
+            await bootRoles();
        
-        // Iniciar broadcast
-        if(import.meta.env.VITE_REVERB_ACTIVE === 'true') {
-            await import('@Services/Broadcast')
+            // Iniciar broadcast
+            if(import.meta.env.VITE_REVERB_ACTIVE === 'true') {
+                await import('@Services/Broadcast')
+            }
        }
    
        reloadApp();
--- a/src/lang/es.js
+++ b/src/lang/es.js
@ -298,7 +298,7 @@ export default {
    roles:{
        create: {
            title: 'Crear rol',
-            description: 'Estos roles serán usados para dar permisos en el sistema.',
+            description: 'Este nombre sera necesario para identificar el rol en el sistema. Procura que sea algo simple.',
            onSuccess: 'Rol creado exitosamente',
            onError: 'Error al crear el role',
        },
@ -309,9 +309,10 @@ export default {
            onError: 'Error al actualizar el role',
        },
        update: {
-            description: 'Actualiza los permisos del rol.',
+            description: 'Si crees necesario, puedes actualizar el nombre del rol. No afecta a los permisos.',
        },
        title: 'Roles',
+        description: 'Gestión de roles del sistema. Puedes crear los roles con los permisos que necesites.',
        permissions: {
            title: 'Permisos',
            description: 'Permisos del rol.',
--- a/src/lang/i18n.js
+++ b/src/lang/i18n.js
@ -13,13 +13,14 @@ const messages = {
 }

 const i18n = createI18n({
+  legacy: false,
  locale,
  fallbackLocale: locale,
  messages
 });

-function lang(text) {
-  return i18n.global.t(text);
+function lang(text, params = {}) {
+  return i18n.global.t(text, params);
 }

 export {
--- a/src/pages/Admin/Activities/Index.vue
+++ b/src/pages/Admin/Activities/Index.vue
@ -3,9 +3,7 @@ import { onMounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { hasPermission } from '@Plugins/RolePermission';
 import { useSearcher } from '@Services/Api';
-import { apiTo } from './Module';
-
-import ModalController    from '@Controllers/ModalController.js';
+import { apiTo, transl } from './Module';

 import IconButton    from '@Holos/Button/Icon.vue'
 import PrimaryButton from '@Holos/Button/Primary.vue';
@ -19,13 +17,7 @@ import ShowView      from './Modals/Event.vue';
 const vroute = useRoute();
 const router = useRouter();

-/** Controladores */
-const Modal    = new ModalController();
-
 /** Propiedades */
-const showModal    = ref(Modal.showModal);
-const modelModal   = ref(Modal.modelModal);
-
 const models = ref([]);

 const filters = reactive({
@ -35,6 +27,9 @@ const filters = reactive({
    user: ''
 });

+/** Referencias */
+const showModal = ref(null);
+
 /** Métodos */
 const searcher = useSearcher({
    url: apiTo('index'),
@ -71,7 +66,7 @@ onMounted(() => {

 <template>
    <div>
-        <Header :title="$t('admin.activity.title')">
+        <Header :title="transl('title')">
            <RouterLink v-if="filters.user && hasPermission('users.index')" :to="$view({ name: 'admin.users.index' })">
                <IconButton 
                    class="text-white"
@ -81,7 +76,7 @@ onMounted(() => {
                />
            </RouterLink>
        </Header>
-        <p class="mt-2">{{ $t('admin.activity.description') }}</p>
+        <p class="mt-2 text-sm">{{ transl('description') }}</p>

        <div id="filters" class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4">
            <Input
@ -133,7 +128,7 @@ onMounted(() => {
                        <template v-for="event in items">
                            <Item
                                :event="event"
-                                @show="Modal.switchShowModal(event)"
+                                @show="showModal.open(event)"
                            />
                        </template>
                    </ol>
@ -141,11 +136,9 @@ onMounted(() => {
            </Paginable>
        </div>

-        <ShowView 
-            :show="showModal"
-            :model="modelModal"
-            @close="Modal.switchShowModal"
-        />
+            <ShowView 
+                ref="showModal"
+            />
    </div>
 </template>
    
--- a/src/pages/Admin/Activities/Modals/Event.vue
+++ b/src/pages/Admin/Activities/Modals/Event.vue
@ -1,4 +1,5 @@
 <script setup>
+import { ref } from 'vue';
 import { getDateTime } from '@Controllers/DateController';

 import Header     from '@Holos/Modal/Elements/Header.vue';
@ -11,22 +12,36 @@ defineEmits([
 ]);

 /** Propiedades */
-defineProps({
-    show: Boolean,
-    model: Object
+const model = ref(null);
+
+/** Referencias */
+const modalRef = ref(null);
+
+/** Métodos */
+function close() {
+    model.value = null;
+
+    emit('close');
+}
+
+/** Exposiciones */
+defineExpose({
+    open: (data) => {
+        model.value = data;
+        modalRef.value.open();
+    }
 });
 </script>
 <template>
    <ShowModal
-        :show="show"
-        @close="$emit('close')"
+        ref="modalRef"
+        @close="close"
    >
-        <Header
-            :title="model.name"
-            :subtitle="model.last_name"
-        />
-        <div class="py-2 border-b">
-            <div class="flex w-full px-4 py-2">
+        <div v-if="model">
+            <Header
+                :title="model.event"
+            />
+            <div class="flex w-full p-4">
                <GoogleIcon
                    class="text-xl text-success"
                    name="contact_mail"
--- a/src/pages/Admin/Activities/Modals/Show.vue
+++ b/src/pages/Admin/Activities/Modals/Show.vue
@ -1,71 +0,0 @@
-<script setup>
-import { getDateTime } from '@Controllers/DateController';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-/** Eventos */
-defineEmits([
-    'close', 
-]);
-
-/** Propiedades */
-defineProps({
-    show: Boolean,
-    model: Object
-});
-</script>
-<template>
-    <ShowModal
-        :show="show"
-        @close="$emit('close')"
-    >
-        <Header
-            :title="model.name"
-            :subtitle="model.last_name"
-        >
-            <div class="flex w-full flex-col">
-                <div class="flex w-full justify-center items-center">
-                    <img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
-                </div>
-            </div>
-        </Header>
-        <div class="py-2 border-b">
-            <div class="flex w-full px-4 py-2">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="contact_mail"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <p>
-                        <b>{{ $t('name') }}: </b>
-                        {{ model.full_name }}
-                    </p>
-                    <p>
-                        <b>{{ $t('phone') }}: </b>
-                        <a :href="`tel:${model.phone}`" target="_blank" class="hover:text-danger">
-                            {{ model.phone ?? '-' }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('email.title') }}: </b>
-                        <a :href="`mailto:${model.email}`" target="_blank" class="hover:text-danger">
-                            {{ model.email }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p>
-                        <b>{{ $t('updated_at') }}: </b>
-                        {{ getDateTime(model.updated_at) }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
--- a/src/pages/Admin/Activities/Module.js
+++ b/src/pages/Admin/Activities/Module.js
@ -8,7 +8,7 @@ const apiTo = (name, params = {}) => route(`admin.activities.${name}`, params)
 const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.activities.${name}`, params, query })

 // Obtener traducción del componente
-const transl = (str) => lang(`activities.${str}`)
+const transl = (str) => lang(`admin.activity.${str}`)

 // Determina si un usuario puede hacer algo no en base a los permisos
 const can = (permission) => hasPermission(`activities.${permission}`)
--- a/src/pages/Admin/Roles/Form.vue
+++ b/src/pages/Admin/Roles/Form.vue
@ -25,7 +25,7 @@ function submit() {
 </script>

 <template>
-    <div class="w-full py-4">
+    <div class="w-full pb-2">
        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
    </div>
    <div class="w-full">
--- a/src/pages/Admin/Roles/Index.vue
+++ b/src/pages/Admin/Roles/Index.vue
@ -1,23 +1,17 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { can, apiTo, viewTo } from './Module'
+import { can, apiTo, viewTo, transl } from './Module'
 import { useSearcher } from '@Services/Api';

-import ModalController    from '@Controllers/ModalController.js';
-
 import IconButton      from '@Holos/Button/Icon.vue'
 import DestroyView     from '@Holos/Modal/Template/Destroy.vue';
 import SearcherHead    from '@Holos/Searcher.vue';
 import Table           from '@Holos/Table.vue';
 import Permissions     from './Modals/Permissions.vue';

-/** Controladores */
-const Modal    = new ModalController();
-
 /** Propiedades */
-const destroyModal = ref(Modal.destroyModal);
-const editModal    = ref(Modal.editModal);
-const modelModal   = ref(Modal.modelModal);
+const destroyModal = ref(null);
+const editModal    = ref(null);

 const models = ref([]);

@ -36,7 +30,7 @@ onMounted(() => {
 <template>
    <div>
        <SearcherHead
-            :title="$t('roles.title')"
+            :title="transl('title')"
            @search="(x) => searcher.search(x)"
        >
            <RouterLink
@ -56,7 +50,10 @@ onMounted(() => {
                @click="searcher.search()"
            />
        </SearcherHead>
-        <div class="pt-2 w-full">
+        <div class="pt-2 space-y-2 w-full">
+            <p class="text-sm">
+                {{ transl('description') }}
+            </p>
            <Table 
                :items="models"
                @send-pagination="(page) => searcher.pagination(page)"
@ -70,17 +67,17 @@ onMounted(() => {
                    />
                </template>
                <template #body="{items}">
-                    <tr v-for="model in items">
-                        <td class="table-item border">
+                    <tr v-for="model in items" class="table-row">
+                        <td class="table-cell border">
                            {{ model.description }}
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <div class="table-actions">
                                <IconButton
                                    v-if="can('edit') && ![1,2].includes(model.id)"
                                    icon="license"
-                                    :title="$t('roles.permissions.title')"
-                                    @click="Modal.switchEditModal(model)"
+                                    :title="transl('permissions.title')"
+                                    @click="editModal.open(model)"
                                    outline
                                />
                                <RouterLink
@ -98,7 +95,7 @@ onMounted(() => {
                                    v-if="can('destroy') && ![1,2].includes(model.id)"
                                    icon="delete"
                                    :title="$t('crud.destroy')"
-                                    @click="Modal.switchDestroyModal(model)"
+                                    @click="destroyModal.open(model)"
                                    outline
                                />
                            </div>
@ -110,16 +107,14 @@ onMounted(() => {
        
        <Permissions
            v-if="can('index')"
-            :show="editModal" 
-            :model="modelModal" 
-            @close="Modal.switchEditModal"
+            ref="editModal"
        />
        <DestroyView
            v-if="can('destroy')"
-            :model="modelModal"
-            :show="destroyModal"
+            ref="destroyModal"
+            title="description"
+            subtitle=""
            :to="(role) => apiTo('destroy', { role })"
-            @close="Modal.switchDestroyModal"
            @update="searcher.search()"
        />
    </div>
--- a/src/pages/Admin/Roles/Modals/Permissions.vue
+++ b/src/pages/Admin/Roles/Modals/Permissions.vue
@ -4,8 +4,9 @@ import { api } from '@Services/Api';
 import { apiTo } from '../Module';

 import Header     from '@Holos/Modal/Elements/Header.vue';
-import EditModal  from '@Holos/Modal/Edit.vue';
+import EditModal  from '@Holos/Modal/Show.vue';
 import Checkbox   from '@Holos/Form/Checkbox.vue';
+import PrimaryButton from '@Holos/Button/Primary.vue';

 /** Eventos */
 const emit = defineEmits([
@ -13,56 +14,67 @@ const emit = defineEmits([
 ]);

 /** Propiedades */
-const props = defineProps({
-    show: Boolean,
-    model: Object
-});
-
 const permissionTypes = ref([]);
-const permissions = ref([]);
+const permissions     = ref([]);
+const model           = ref(null);
+
+/** Referencias */
+const modalRef = ref(null);

 /** Métodos */
+function close() {
+    modalRef.value.close();
+    emit('close');
+}
+
 function update() {
-    api.put(apiTo('permissions', { role: props.model.id }), {
+    api.put(apiTo('permissions', { role: model.value.id }), {
        data: {
            permissions: permissions.value
        },
        onSuccess: () => {
            Notify.success(Lang('register.edit.onSuccess'))
            
-            emit('close');
+            close();
        }
    });
 }

-/** Ciclos */
-onUpdated(() => {
+function getPermissions() {
    api.get(route('permission-types.all-with-permissions'), {
        onSuccess: (r) => permissionTypes.value = r.models
    });

-    api.get(apiTo('permissions', { role: props.model.id }), {
+    api.get(apiTo('permissions', { role: model.value.id }), {
        onSuccess: (r) => {
            if(r.permissions) {
                permissions.value = r.permissions.map(p => p.id);
            }
        }
    });
+}
+
+/** Exposiciones */
+defineExpose({
+    open: (data) => {
+        model.value = data;
+        getPermissions();
+        modalRef.value.open();
+    }
 });
 </script>
 <template>
    <EditModal
-        :show="show"
-        @update="update"
-        @close="$emit('close')"
+        ref="modalRef"
+        @close="close"
    >
-        <Header
-            :title="model.description"
-        />
-        <div class="p-4 border-b">
-            <div class="grid gap-4 grid-cols-2">
-                <div v-for="permissionType in permissionTypes">
-                    <div>
+        <div v-if="model"> 
+            <Header
+                :title="model.description"
+            />
+            <div class="p-4">
+                <div class="grid gap-4 grid-cols-2">
+                    <div v-for="permissionType in permissionTypes">
                        <p class="font-bold">{{ permissionType.name}}</p>
                        <ul class="space-y-0.5 list-none">
                            <li v-for="permission in permissionType.permissions">
@ -77,5 +89,12 @@ onUpdated(() => {
                </div>
            </div>
        </div>
+        <template #buttons>
+            <PrimaryButton
+                @click="update"
+            >
+                {{ $t('update') }}
+            </PrimaryButton>
+        </template>
    </EditModal>
 </template>
--- a/src/pages/Admin/Users/Create.vue
+++ b/src/pages/Admin/Users/Create.vue
@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { api, useForm } from '@Services/Api';
 import { apiTo, transl, viewTo } from './Module';

@ -50,7 +50,9 @@ onMounted(() => {
 </script>

 <template>
-    <PageHeader :title="transl('create.title')">
+    <PageHeader
+        :title="transl('create.title')"
+    >
        <RouterLink :to="viewTo({ name: 'index' })">
            <IconButton
                class="text-white"
--- a/src/pages/Admin/Users/Form.vue
+++ b/src/pages/Admin/Users/Form.vue
@ -25,7 +25,7 @@ function submit() {
 </script>

 <template>
-    <div class="w-full py-4">
+    <div class="w-full pb-2">
        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
    </div>
    <div class="w-full">
@ -41,28 +41,24 @@ function submit() {
                v-model="form.paternal"
                id="paternal"
                :onError="form.errors.paternal"
-                autofocus
                required
            />
            <Input
                v-model="form.maternal"
                id="maternal"
                :onError="form.errors.maternal"
-                autofocus
            />
            <Input
                v-model="form.phone"
                id="phone"
                :onError="form.errors.phone"
                type="number"
-                autofocus
            />
            <Input
                v-model="form.email"
                id="email.title"
                type="email"
                :onError="form.errors.email"
-                autofocus
                required
            />
            <slot />
--- a/src/pages/Admin/Users/Index.vue
+++ b/src/pages/Admin/Users/Index.vue
@ -1,10 +1,8 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { can, apiTo, viewTo } from './Module'
 import { useSearcher } from '@Services/Api';
 import { hasPermission } from '@Plugins/RolePermission';
-
-import ModalController    from '@Controllers/ModalController.js';
+import { can, apiTo, viewTo, transl } from './Module'

 import IconButton   from '@Holos/Button/Icon.vue'
 import DestroyView  from '@Holos/Modal/Template/Destroy.vue';
@ -12,16 +10,14 @@ import SearcherHead from '@Holos/Searcher.vue';
 import Table        from '@Holos/Table.vue';
 import ShowView     from './Modals/Show.vue';

-/** Controladores */
-const Modal    = new ModalController();
-
 /** Propiedades */
-const destroyModal = ref(Modal.destroyModal);
-const showModal    = ref(Modal.showModal);
-const modelModal   = ref(Modal.modelModal);
-
 const models = ref([]);

+/** Referencias */
+const showModal    = ref(false);
+const destroyModal = ref(false);
+
+/** Métodos */
 const searcher = useSearcher({
    url: apiTo('index'),
    onSuccess: (r) => models.value = r.models,
@ -37,7 +33,7 @@ onMounted(() => {
 <template>
    <div>
        <SearcherHead
-            :title="$t('users.title')"
+            :title="transl('title')"
            @search="(x) => searcher.search(x)"
        >
            <RouterLink
@ -72,11 +68,14 @@ onMounted(() => {
                    />
                </template>
                <template #body="{items}">
-                    <tr v-for="model in items">
-                        <td class="table-item border">
+                    <tr
+                        v-for="model in items"
+                        class="table-row"
+                    >
+                        <td class="table-cell">
                            {{ `${model.name} ${model.paternal}` }}
                        </td>
-                        <td class="table-item border">
+                        <td class="table-cell">
                            <p>
                                <a 
                                    class="hover:underline"
@ -88,21 +87,21 @@ onMounted(() => {
                            </p>
                            <p v-if="model.phone" class="font-semibold text-xs">
                                <b>Teléfono: </b>
-                                <a 
+                                <span
                                    class="hover:underline"
                                    target="_blank"
                                    :href="`tel:${model.phone}`"
                                >
                                    {{ model.phone }}
-                                </a>
+                                </span>
                            </p>
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <div class="table-actions">
                                <IconButton
                                    icon="visibility"
                                    :title="$t('crud.show')"
-                                    @click="Modal.switchShowModal(model)"
+                                    @click="showModal.open(model)"
                                    outline
                                />
                                <RouterLink
@ -120,7 +119,7 @@ onMounted(() => {
                                    v-if="can('destroy')"
                                    icon="delete"
                                    :title="$t('crud.destroy')"
-                                    @click="Modal.switchDestroyModal(model)"
+                                    @click="destroyModal.open(model)"
                                    outline
                                />
                                <RouterLink
@ -148,31 +147,28 @@ onMounted(() => {
                    </tr>
                </template>
                <template #empty>
-                    <td class="table-item border">
+                    <td class="table-cell">
                        <div class="flex items-center text-sm">
                            <p class="font-semibold">
                                {{ $t('registers.empty') }}
                            </p>
                        </div>
                    </td>
-                    <td class="table-item border">-</td>
-                    <td class="table-item border">-</td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
                </template>
            </Table>
        </div>
        
        <ShowView 
-            v-if="can('index')"
-            :show="showModal" 
-            :model="modelModal" 
-            @close="Modal.switchShowModal"
+            ref="showModal"
        />
+
        <DestroyView
            v-if="can('destroy')"
-            :model="modelModal"
-            :show="destroyModal"
+            ref="destroyModal"
+            subtitle="last_name"
            :to="(user) => apiTo('destroy', { user })"
-            @close="Modal.switchDestroyModal"
            @update="searcher.search()"
        />
    </div>
--- a/src/pages/Admin/Users/Modals/Show.vue
+++ b/src/pages/Admin/Users/Modals/Show.vue
@ -1,37 +1,56 @@
 <script setup>
+import { ref } from 'vue';
 import { getDateTime } from '@Controllers/DateController';

 import Header     from '@Holos/Modal/Elements/Header.vue';
 import ShowModal  from '@Holos/Modal/Show.vue';
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+
 /** Eventos */
-defineEmits([
+const emit = defineEmits([
    'close', 
+    'reload'
 ]);

 /** Propiedades */
-defineProps({
-    show: Boolean,
-    model: Object
+const model    = ref(null);
+
+/** Referencias */
+const modalRef = ref(null);
+
+/** Métodos */
+function close() {
+    model.value = null;
+
+    emit('close');
+}
+
+/** Exposiciones */
+defineExpose({
+    open: (data) => {
+        model.value = data;
+        modalRef.value.open();
+    }
 });
 </script>
+
 <template>
    <ShowModal
-        :show="show"
-        @close="$emit('close')"
+        ref="modalRef"
+        @close="close"
    >
-        <Header
-            :title="model.name"
-            :subtitle="model.last_name"
-        >
-            <div class="flex w-full flex-col">
-                <div class="flex w-full justify-center items-center">
-                    <img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
+        <div v-if="model">
+            <Header
+                :title="model.name"
+                :subtitle="model.last_name"
+            >
+                <div class="flex w-full flex-col">
+                    <div class="flex w-full justify-center items-center">
+                        <img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
+                    </div>
                </div>
-            </div>
-        </Header>
-        <div class="py-2 border-b">
-            <div class="flex w-full px-4 py-2">
+            </Header>
+            <div class="flex w-full p-4">
                <GoogleIcon 
                    class="text-xl text-success"
                    name="contact_mail"
--- a/src/pages/Admin/Users/Online.vue
+++ b/src/pages/Admin/Users/Online.vue
@ -1,30 +1,24 @@
 <script setup>
 import { ref } from 'vue';
-import { can, apiTo, viewTo } from './Module'
+import { can, apiTo, viewTo, transl } from './Module'
 import { users } from '@Plugins/AuthUsers'

-import ModalController    from '@Controllers/ModalController.js';
-
 import IconButton      from '@Holos/Button/Icon.vue'
 import DestroyView     from '@Holos/Modal/Template/Destroy.vue';
 import Header          from '@Holos/PageHeader.vue';
 import Table           from '@Holos/TableSimple.vue';
 import ShowView        from './Modals/Show.vue';

-/** Controladores */
-const Modal    = new ModalController();
-
 /** Propiedades */
-const destroyModal = ref(Modal.destroyModal);
-const showModal    = ref(Modal.showModal);
-const modelModal   = ref(Modal.modelModal);
+const destroyModal = ref(null);
+const showModal    = ref(null);

 </script>  

 <template>
    <div>
        <Header
-            :title="$t('users.online.title')"
+            :title="transl('online.title')"
        >
            <RouterLink
                v-if="can('create')"
@ -38,7 +32,7 @@ const modelModal   = ref(Modal.modelModal);
                />
            </RouterLink>
        </Header>
-        <p class="mt-2">{{ $t('users.online.description') }} {{ users.length - 1 }} {{ $t('users.online.count') }}</p>
+        <p class="mt-2">{{ transl('online.description') }} {{ users.length - 1 }} {{ transl('online.count') }}</p>
        <div class="w-full -mt-2">
            <Table 
                :items="users"
@ -55,13 +49,13 @@ const modelModal   = ref(Modal.modelModal);
                <template #body="{items}">
                    <template v-for="model in items">
                        <tr v-if="model.id != 1">
-                            <td class="table-item border">
+                            <td class="table-cell border">
                                <img :src="model.profile_photo_url" alt="Profile photo" class="w-10 h-10 rounded-full">
                            </td>
-                            <td class="table-item border">
+                            <td class="table-cell border">
                                {{ `${model.full_name}` }}
                            </td>
-                            <td class="table-item border">
+                            <td class="table-cell border">
                                <p>
                                    <a 
                                        class="hover:underline"
@ -82,12 +76,12 @@ const modelModal   = ref(Modal.modelModal);
                                    </a>
                                </p>
                            </td>
-                            <td class="table-item">
+                            <td class="table-cell">
                                <div class="table-actions">
                                    <IconButton
                                        icon="visibility"
                                        :title="$t('crud.show')"
-                                        @click="Modal.switchShowModal(model)"
+                                        @click="showModal.open(model)"
                                        outline
                                    />
                                    <RouterLink
@ -105,7 +99,7 @@ const modelModal   = ref(Modal.modelModal);
                                        v-if="can('destroy')"
                                        icon="delete"
                                        :title="$t('crud.destroy')"
-                                        @click="Modal.switchDestroyModal(model)"
+                                        @click="destroyModal.open(model)"
                                        outline
                                    />
                                    <RouterLink
@ -127,17 +121,14 @@ const modelModal   = ref(Modal.modelModal);
        </div>
        
        <ShowView 
-            v-if="can('index')"
-            :show="showModal" 
-            :model="modelModal" 
-            @close="Modal.switchShowModal"
+            ref="showModal"
        />
+
        <DestroyView
            v-if="can('destroy')"
-            :model="modelModal"
-            :show="destroyModal"
+            ref="destroyModal"
+            subtitle="last_name"
            :to="(user) => apiTo('destroy', { user })"
-            @close="Modal.switchDestroyModal"
            @update="searcher.search()"
        />
    </div>
--- a/src/pages/Admin/Users/Settings.vue
+++ b/src/pages/Admin/Users/Settings.vue
@ -35,13 +35,13 @@ onMounted(() => {
          />
      </RouterLink>
    </PageHeader>
-    <div class="flex w-full pt-2">
-        <div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-lg">
+    <div class="flex w-full">
+        <div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-sm">
            <p class="pt-2 text-lg font-bold text-gray-50">
                {{ user?.name }}
            </p>
            <p class="text-sm text-gray-100">
-                {{ user?.full_last_name }}
+                {{ user?.last_name }}
            </p>
        </div>
    </div>
--- a/src/pages/Auth/ForgotPassword.vue
+++ b/src/pages/Auth/ForgotPassword.vue
@ -1,6 +1,8 @@
 <script setup>
-import { useForm } from '@Services/Api';
 import { useRouter } from 'vue-router';
+import { useForm } from '@Services/Api';
+import { viewTo } from './Module';
+
 import Input         from '@Holos/Form/InputWithIcon.vue'
 import PrimaryButton from '@Holos/Button/Primary.vue'

@ -21,11 +23,11 @@ const submit = () => {
    form.post(route('auth.forgot-password'), {
        onSuccess: () => {
            Notify.success(Lang('auth.forgotPassword.success'));
-            router.push({ name: 'index' });
+            router.push(viewTo({ name: 'index' }));
        },
        onError: () => {
            Notify.error(Lang('auth.forgotPassword.error'));
-            router.push({ name: 'index' });
+            router.push(viewTo({ name: 'index' }));
        }
    });
 };
--- a/src/pages/Auth/Login.vue
+++ b/src/pages/Auth/Login.vue
@ -1,11 +1,16 @@
 <script setup>
 import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 import { defineApiToken, defineCsrfToken, hasToken, useForm } from '@Services/Api.js'
 import { defineUser } from '@Services/Page';
+import { viewTo } from './Module.js';

 import PrimaryButton  from '@Holos/Button/Primary.vue'
 import Input          from '@Holos/Form/InputWithIcon.vue'

+/** Definidores */
+const router = useRouter();
+
 /** Propiedades */
 defineProps({
    canResetPassword: Boolean,
@ -33,7 +38,7 @@ const login = () => {
 /** Ciclos */
 onMounted(() => {
  if (hasToken()) {
-    location.replace('/')
+    router.push({ name: 'dashboard.index' });
  }
 })
 </script>
@ -62,7 +67,7 @@ onMounted(() => {
    <div class="flex justify-end mt-4">
      <RouterLink
          class="text-sm ml-2 hover:text-blue-200 cursor-pointer hover:-translate-y-1 duration-500 transition-all"
-          :to="$view({ name: 'forgot-password' })"
+          :to="viewTo({ name: 'forgot-password' })"
      >
          {{ $t('auth.forgotPassword.ask') }}
      </RouterLink>
--- a/src/pages/Auth/Module.js
+++ b/src/pages/Auth/Module.js
@ -0,0 +1,17 @@
+
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`auth.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `auth.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`auth.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}
--- a/src/pages/Auth/Register.vue
+++ b/src/pages/Auth/Register.vue
@ -96,11 +96,11 @@ const submit = () => {

                        <div class="ms-2 text-primary-t dark:text-primary-dt">
                            I agree to the
-                            <a target="_blank" :href="route('terms.show')" class="underline text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                            <a target="_blank" :href="route('terms.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                {{ $t('terms.service') }}
                            </a>
                            and
-                            <a target="_blank" :href="route('policy.show')" class="underline text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                            <a target="_blank" :href="route('policy.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                {{ $t('policy.privacy') }}
                            </a>
                        </div>
@ -110,7 +110,7 @@ const submit = () => {
            </div>

            <div class="flex items-center justify-end mt-4">
-                <Link :href="route('login')" class="underline text-sm bg-page-text hover:bg-page-background text-page-background hover:text-page-text rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                <Link :href="route('login')" class="underline text-sm bg-page-text hover:bg-page-background text-page-background hover:text-page-text rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    {{ $t('auth.register.already') }}
                </Link>

--- a/src/pages/Auth/ResetPassword.vue
+++ b/src/pages/Auth/ResetPassword.vue
@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useForm } from '@Services/Api.js'
-
+import { viewTo } from './Module';
 import PrimaryButton from '@Holos/Button/Primary.vue';
 import Input         from '@Holos/Form/InputWithIcon.vue'

@ -24,21 +24,17 @@ const submit = () => {
    form.post(route('auth.reset-password'), {
        onSuccess: () => {
            Notify.success(Lang('auth.reset.success'));
-            router.push({ name: 'index' })
+            router.push(viewTo({ name: 'index' }));
        },
        onError: () => {
-            router.push({ name: 'index' });
+            router.push(viewTo({ name: 'index' }));
        }
    });
 };

 onMounted(() => {
-    console.log('mount')
-
    form.token = vroute.query.token;
    email.value = vroute.query.email;
-
-    // router.replace({ query: {} });
 })
 </script>

--- a/src/pages/Changelogs/App.vue
+++ b/src/pages/Changelogs/App.vue
@ -56,6 +56,68 @@ const changelogs = [
            'UPDATE: Redirección a dashboard al iniciar sesión.'
        ],
        date: '2025-01-03'
+    },
+    {
+        version: '0.9.6',
+        details: [
+            'FIX: Historial de acciones, modo responsivo.',
+            'ADD: Recuperación de contraseña.'
+        ],
+        date: '2025-01-06'
+    },
+    {
+        version: '0.9.7',
+        details: [
+            'ADD: Visualización de historial de cambios del backend.',
+        ],
+        date: '2025-01-17'
+    },
+    {
+        version: '0.9.8',
+        details: [
+            'UPDATE: Actualización de dependencias.',
+            'UPDATE: TailwindCSS 3 => 4.',
+            'UPDATE: Actualización de Diseño, mejoras visuales.',
+        ],
+        date: '2025-03-04'
+    },
+    {
+        version: '0.9.9',
+        details: [
+            'FIX: Obtención de recursos de backend mediante `api.resource`.',
+            'FIX: Títulos de modal de eliminación ahora son editables.',
+            'UPDATE: Simplificación de las rutas de autenticación.',
+            'UPDATE: Traducciones modulares faltantes.',
+            'UPDATE: Ahora las plantillas se definen en el grupo de rutas, y se heredan en las rutas hijas.',
+            'ADD: Función creación de URL a backend fuera de VUEJS.',
+        ],
+        date: '2025-03-13'
+    },
+    {
+        version: '0.9.10',
+        details: [
+            'ADD: Se actualizo el método api.resource por api.catalog para obtener catálogos del backend.',
+            'UPDATE: Actualización de dependencias.'
+        ],
+        date: '2025-05-23'
+    },
+    {
+        version: '0.9.11',
+        details: [
+            'FIX: El useApi clonaba comportamientos en instancias de la misma página.',
+            'UPDATE: Actualización de dependencias.'
+        ],
+        date: '2025-05-23'
+    },
+    {
+        version: '0.9.12',
+        details: [
+            'FIX: Token de sesión ahora se almacena en localStorage para mantener la sesión activa en el frontend por el tiempo de vida del token.',
+            'UPDATE: Actualización de dependencias.',
+            'UPDATE: Funcionamiento de los modals.',
+            'ADD: Breadcrumbs.'
+        ],
+        date: '2025-07-14'
    }
 ]
 </script>
@ -80,13 +142,13 @@ const changelogs = [
            <template #body="{items}">
                <template v-for="item in items">
                    <tr>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <span v-text="item.version" />
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <span v-text="item.date" />
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <ul class="list-disc list-inside">
                                <li v-for="detail in item.details.reverse()" v-text="detail" />
                            </ul>
--- a/src/pages/Changelogs/Core.vue
+++ b/src/pages/Changelogs/Core.vue
@ -0,0 +1,54 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { api } from '@Services/Api';
+
+import Table from '@Holos/TableSimple.vue';
+
+const changelogs = ref([]);
+
+onMounted(() => {
+    api.get(route('changelogs'), {
+        onSuccess: (response) => {
+            changelogs.value = response;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <h1>{{ $t('changelogs.title') }}</h1>
+        <Table :items="changelogs">
+            <template #head>
+                <th 
+                    v-text="$t('version')"
+                    class="w-10" 
+                />
+                <th 
+                    v-text="$t('date')"
+                    class="w-24" 
+                />
+                <th 
+                    v-text="$t('details')"
+                />
+            </template>
+            <template #body="{items}">
+                <template v-for="item in items">
+                    <tr>
+                        <td class="table-cell">
+                            <span v-text="item.version" />
+                        </td>
+                        <td class="table-cell">
+                            <span v-text="item.date" />
+                        </td>
+                        <td class="table-cell">
+                            <ul class="list-disc list-inside">
+                                <li v-for="detail in item.changes" v-text="detail" />
+                            </ul>
+                        </td>
+                    </tr>
+                </template>
+            </template>
+        </Table>
+    </div>
+</template>
--- a/src/pages/Examples/Index.vue
+++ b/src/pages/Examples/Index.vue
@ -0,0 +1,5 @@
+<template>
+    <div class="p-2">
+        <h4>Rutas de ejemplo</h4>
+    </div>
+</template>
--- a/src/pages/Profile/Notifications/Index.vue
+++ b/src/pages/Profile/Notifications/Index.vue
@ -2,25 +2,21 @@
 import { onMounted, ref } from 'vue';
 import { useSearcher } from '@Services/Api';

-import ModalController    from '@Controllers/ModalController.js';
 import { getDateTime }    from '@Controllers/DateController.js';

-import SearcherHead    from '@Holos/Searcher.vue';
-import Table           from '@Holos/Table.vue';
-import IconButton      from '@Holos/Button/Icon.vue';
-import ShowView        from '@Holos/Skeleton/Sidebar/Notification/Show.vue';
-import GoogleIcon      from '@Shared/GoogleIcon.vue';
-
-/** Controladores */
-const Modal = new ModalController();
+import SearcherHead from '@Holos/Searcher.vue';
+import Table        from '@Holos/Table.vue';
+import IconButton   from '@Holos/Button/Icon.vue';
+import DestroyModal from '@Holos/Modal/Template/Destroy.vue';
+import ShowModal    from '@Holos/Skeleton/Sidebar/Notification/Show.vue';

 /** Propiedades */
-// const destroyModal = ref(Modal.destroyModal);
-const showModal    = ref(Modal.showModal);
-const modelModal   = ref(Modal.modelModal);
+const destroyModal = ref(null);
+const showModal    = ref(false);

 const models = ref([]);

+// Servicios
 const searcher = useSearcher({
    url: route('system.notifications.all'),
    onSuccess: (r) => models.value = r.models,
@ -68,72 +64,65 @@ onMounted(() => {
                    />
                </template>
                <template #body="{items}">
-                    <tr v-for="model in items">
-                        <td class="table-item border">
+                    <tr v-for="model in items" class="table-row">
+                        <td class="table-cell border">
                            {{ model.data.title }}
                        </td>
-                        <td class="table-item border">
+                        <td class="table-cell border">
                            {{ model.data.description }}
                        </td>
-                        <td class="table-item border">
+                        <td class="table-cell border">
                            {{ getDateTime(model.created_at) }}
                        </td>
-                        <td class="table-item border">
+                        <td class="table-cell border">
                            <div class="flex items-center justify-center">
                                <div class="w-2 h-2 rounded-full" :class="model.read_at ? 'bg-success' : 'bg-danger'"></div>
                                <span class="ml-2">{{ model.read_at ? $t('readed') : (model.is_closed ? $t('omitted') : $t('unreaded')) }}</span>
                            </div>
                        </td>
-                        <td class="table-item">
+                        <td class="table-cell">
                            <div class="table-actions">
                                <IconButton
                                    icon="visibility"
                                    :title="$t('crud.show')"
-                                    @click="Modal.switchShowModal(model)"
+                                    @click="showModal.open(model)"
                                    outline
                                />
-                                <!-- <GoogleIcon
-                                    v-if="can('destroy')"
-                                    class="btn-icon"
-                                    name="delete"
+                                <IconButton
+                                    icon="delete"
                                    :title="$t('crud.destroy')"
-                                    @click="Modal.switchDestroyModal(model)"
+                                    @click="destroyModal.open(model)"
                                    outline
-                                /> -->
+                                />
                            </div>
                        </td>
                    </tr>
                </template>
                <template #empty>
-                    <td class="table-item border">
+                    <td class="table-cell border">
                        <div class="flex items-center text-sm">
                            <p class="font-semibold">
                                {{ $t('registers.empty') }}
                            </p>
                        </div>
                    </td>
-                    <td class="table-item border">-</td>
-                    <td class="table-item border">-</td>
-                    <td class="table-item border">-</td>
-                    <td class="table-item border">-</td>
+                    <td class="table-cell border">-</td>
+                    <td class="table-cell border">-</td>
+                    <td class="table-cell border">-</td>
+                    <td class="table-cell border">-</td>
                </template>
            </Table>
        </div>
        
-        <ShowView 
-            :show="showModal" 
-            :model="modelModal" 
-            @close="Modal.switchShowModal"
+        <ShowModal 
+            ref="showModal"
            @reload="searcher.search()"
        />
-        <!-- <DestroyView
-            v-if="can('destroy')"
-            :model="modelModal"
-            :show="destroyModal"
-            :to="(user) => apiTo('destroy', { user })"
-            @close="Modal.switchDestroyModal"
-            @update="getNotifications"
-        /> -->
+        <DestroyModal
+            ref="destroyModal"
+            :to="(id) => route('system.notifications.destroy', { id })"
+            @update="searcher.search()"
+        />
    </div>
 </template>
    
--- a/src/pages/Profile/Partials/DeleteUserForm.vue
+++ b/src/pages/Profile/Partials/DeleteUserForm.vue
@ -5,11 +5,11 @@ import { logout } from '@Services/Page';

 import ActionSection   from '@Holos/ActionSection.vue';
 import DangerButton    from '@Holos/Button/Danger.vue';
-import DialogModal     from '@Holos/DialogModal.vue';
+import DialogModal     from '@Holos/Modal/Elements/Base.vue';
 import SecondaryButton from '@Holos/Button/Secondary.vue';
 import Input           from '@Holos/Form/Input.vue';

-const confirmingUserDeletion = ref(false);
+const modalRef = ref(null);
 const passwordInput = ref(null);

 const form = useForm({
@ -17,7 +17,7 @@ const form = useForm({
 });

 const confirmUserDeletion = () => {
-    confirmingUserDeletion.value = true;
+    modalRef.value.open();

    setTimeout(() => passwordInput.value.focus(), 250);
 };
@ -26,7 +26,7 @@ const deleteUser = () => {
    form.delete(route('user.destroy'), {
        preserveScroll: true,
        onSuccess: () => {
-            closeModal();
+            modalRef.value.close();
            logout();
        },
        onError: () => passwordInput.value.focus(),
@ -34,9 +34,7 @@ const deleteUser = () => {
    });
 };

-const closeModal = () => {
-    confirmingUserDeletion.value = false;
-
+const onCloseModal = () => {
    form.reset();
 };
 </script>
@ -63,27 +61,33 @@ const closeModal = () => {
            </div>

            <!-- Delete Account Confirmation Modal -->
-            <DialogModal :show="confirmingUserDeletion" @close="closeModal">
+            <DialogModal
+                ref="modalRef"
+                @close="onCloseModal"
+            >
                <template #title>
                    {{ $t('account.delete.title') }}
                </template>

                <template #content>
-                    {{ $t('account.delete.confirm') }}
+                    <div class="px-4 pb-2">
+                        <p>{{ $t('account.delete.confirm') }}</p>
+    
+                        <div class="mt-4">
+                            <Input
+                                ref="passwordInput"
+                                v-model="form.password"
+                                id="password"
+                                type="password"
+                                :onError="form.errors.password"
+                            />
+                        </div>

-                    <div class="mt-4">
-                        <Input
-                            ref="passwordInput"
-                            v-model="form.password"
-                            id="password"
-                            type="password"
-                            :onError="form.errors.password"
-                        />
                    </div>
                </template>

                <template #footer>
-                    <SecondaryButton @click="closeModal">
+                    <SecondaryButton @click="modalRef.close()">
                        {{ $t('cancel') }}
                    </SecondaryButton>

--- a/src/pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ b/src/pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useForm } from '@Services/Api';

 import ActionSection   from '@Holos/ActionSection.vue';
-import DialogModal     from '@Holos/DialogModal.vue';
+import DialogModal     from '@Holos/Modal/Elements/Base.vue';
 import PrimaryButton   from '@Holos/Button/Primary.vue';
 import SecondaryButton from '@Holos/Button/Secondary.vue';
 import Input           from '@Holos/Form/Input.vue';
--- a/src/router/Auth.js
+++ b/src/router/Auth.js
@ -1,24 +0,0 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-
-const router = createRouter({
-    history: createWebHashHistory(import.meta.env.BASE_URL),
-    routes: [
-        {
-            path: '/',
-            name: 'index',
-            component: () => import('@Pages/Auth/Login.vue')
-        },
-        {
-            path: '/forgot-password',
-            name: 'forgot-password',
-            component: () => import('@Pages/Auth/ForgotPassword.vue')
-        },
-        {
-            path: '/reset-password',
-            name: 'reset-password',
-            component: () => import('@Pages/Auth/ResetPassword.vue')
-        }
-    ]
-})
-
-export default router
--- a/src/router/Examples.js
+++ b/src/router/Examples.js
@ -0,0 +1,14 @@
+/**
+ * Archivo de rutas de ejemplos.
+ * 
+ * En producción se debe eliminar o comentar. Las vistas de ejemplo opcionalmente pueden ser eliminadas o
+ * dejadas como referencia.
+ */
+
+export default [
+    {
+        path: '/examples',
+        name: 'examples.index',
+        component: () => import('@Pages/Examples/Index.vue')
+    }
+]
--- a/src/router/Index.js
+++ b/src/router/Index.js
@ -1,6 +1,8 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { hasPermission } from '@Plugins/RolePermission';

+import examples from './Examples';
+
 function can(next, can) {
    if (!hasPermission(can)) {
        next({ name: '404' });
@ -14,43 +16,78 @@ const router = createRouter({
    routes: [
        {
            path: '/',
-            name: 'index',
-            redirect: '/dashboard'
-        },
-        {
-            path: '/dashboard',
-            name: 'dashboard.index',
-            component: () => import('@Pages/Dashboard/Index.vue')
-        }, {
-            path: '/profile',
+            component: () => import('@Layouts/AppLayout.vue'),
+            name: 'root',
+            meta: {
+                title: 'Inicio',
+                icon: 'home',
+            },
+            redirect: '/dashboard',
            children: [
                {
                    path: '',
-                    name: 'profile.show',
-                    component: () => import('@Pages/Profile/Show.vue')
+                    name: 'index',
+                    redirect: '/dashboard',
+                    meta: {
+                        title: 'Inicio',
+                        icon: 'home',
+                    },
                },
                {
-                    path: 'notifications',
+                    path: 'dashboard',
+                    name: 'dashboard.index',
+                    component: () => import('@Pages/Dashboard/Index.vue'),
+                },
+                {
+                    path: 'profile',
                    children: [
                        {
                            path: '',
-                            name: 'profile.notifications.index',
-                            component: () => import('@Pages/Profile/Notifications/Index.vue')
-                        }
+                            name: 'profile.show',
+                            component: () => import('@Pages/Profile/Show.vue'),
+                            meta: {
+                                title: 'Perfil',
+                                icon: 'person',
+                            },
+                        },
+                        {
+                            path: 'notifications',
+                            children: [
+                                {
+                                    path: '',
+                                    name: 'profile.notifications.index',
+                                    component: () => import('@Pages/Profile/Notifications/Index.vue')
+                                }
+                            ]
+                        },
                    ]
                },
-            ]
-        }, {
+            ],
+        },
+        {
            path: '/admin',
+            name: 'admin',
+            component: () => import('@Layouts/AppLayout.vue'),
+            meta: {
+                title: 'Inicio',
+                icon: 'home',
+            },
+            redirect: '/',
            children: [
                {
                    path: 'users',
+                    name: 'admin.users',
+                    meta: {
+                        title: 'Usuarios',
+                        icon: 'people',
+                    },
+                    redirect: '/admin/users',
                    children: [
                        {
                            path: '',
                            name: 'admin.users.index',
                            beforeEnter: (to, from, next) => can(next, 'users.index'),
-                            component: () => import('@Pages/Admin/Users/Index.vue')
+                            component: () => import('@Pages/Admin/Users/Index.vue'),
                        },
                        {
                            path: 'online',
@ -62,41 +99,73 @@ const router = createRouter({
                            path: 'create',
                            name: 'admin.users.create',
                            beforeEnter: (to, from, next) => can(next, 'users.create'),
+                            meta: {
+                                title: 'Crear',
+                                icon: 'add',
+                            },
                            component: () => import('@Pages/Admin/Users/Create.vue')
                        }, {
                            path: ':id/edit',
                            name: 'admin.users.edit',
                            beforeEnter: (to, from, next) => can(next, 'users.edit'),
+                            meta: {
+                                title: 'Editar',
+                                icon: 'edit',
+                            },
                            component: () => import('@Pages/Admin/Users/Edit.vue')
                        }, {
                            path: ':id/settings',
                            name: 'admin.users.settings',
                            beforeEnter: (to, from, next) => can(next, 'users.settings'),
-                            component: () => import('@Pages/Admin/Users/Settings.vue')
+                            component: () => import('@Pages/Admin/Users/Settings.vue'),
+                            meta: {
+                                title: 'Configuración',
+                                icon: 'settings',
+                            },
                        }
                    ]
                },
                {
                    path: 'roles',
+                    name: 'admin.roles',
+                    meta: {
+                        title: 'Roles',
+                        icon: 'license',
+                    },
+                    redirect: '/admin/roles',
                    children: [
                        {
                            path: '',
                            name: 'admin.roles.index',
-                            component: () => import('@Pages/Admin/Roles/Index.vue')
+                            component: () => import('@Pages/Admin/Roles/Index.vue'),
                        },
                        {
                            path: 'create',
                            name: 'admin.roles.create',
-                            component: () => import('@Pages/Admin/Roles/Create.vue')
+                            component: () => import('@Pages/Admin/Roles/Create.vue'),
+                            meta: {
+                                title: 'Crear',
+                                icon: 'add',
+                            },
                        }, {
                            path: ':id/edit',
                            name: 'admin.roles.edit',
-                            component: () => import('@Pages/Admin/Roles/Edit.vue')
+                            component: () => import('@Pages/Admin/Roles/Edit.vue'),
+                            meta: {
+                                title: 'Editar',
+                                icon: 'edit',
+                            },
                        }
                    ]
                },
                {
                    path: 'activities',
+                    name: 'admin.activities',
+                    meta: {
+                        title: 'Historial de acciones',
+                        icon: 'event',
+                    },
+                    redirect: '/admin/activities',
                    children: [
                        {
                            path: '',
@ -110,14 +179,47 @@ const router = createRouter({
        },
        {
            path: '/changelogs',
-            name: 'changelogs',
-            component: () => import('@Pages/Changelogs.vue')
+            component: () => import('@Layouts/AppLayout.vue'),
+            children: [
+                {
+                    path: '',
+                    name: 'changelogs.app',
+                    component: () => import('@Pages/Changelogs/App.vue')
+                },
+                {
+                    path: 'core',
+                    name: 'changelogs.core',
+                    component: () => import('@Pages/Changelogs/Core.vue')
+                }
+            ]
+        },
+        {
+            path: '/auth',
+            component: () => import('@Holos/Layout/Auth.vue'),
+            children: [
+                {
+                    path: '',
+                    name: 'auth.index',
+                    component: () => import('@Pages/Auth/Login.vue')
+                },
+                {
+                    path: 'forgot-password',
+                    name: 'auth.forgot-password',
+                    component: () => import('@Pages/Auth/ForgotPassword.vue')
+                },
+                {
+                    path: 'reset-password',
+                    name: 'auth.reset-password',
+                    component: () => import('@Pages/Auth/ResetPassword.vue')
+                }
+            ]
        },
        {
            path: '/:pathMatch(.*)*',
            name: '404',
            component: () => import('@Pages/Errors/404.vue')
-        }
+        },
+        ...examples,
    ]
 })

--- a/src/services/Api.js
+++ b/src/services/Api.js
@ -9,7 +9,7 @@ import axios from 'axios';
 import { reactive, ref } from 'vue';

 axios.defaults.withXSRFToken = true;
-// axios.defaults.withCredentials = true;
+axios.defaults.withCredentials = true;

 /**
 * Códigos de falla
@ -74,7 +74,7 @@ const closeSession = () => {

    Notify.info(Lang('session.closed'))

-    location.replace('auth.html')
+    location.replace('/')
 }

 /**
@ -86,6 +86,13 @@ function composeKey(parent, key) {
  return parent ? parent + '[' + key + ']' : key
 }

+/**
+ * URL API
+ */
+const apiURL = (path) => {
+    return import.meta.env.VITE_API_URL + '/api/' + path
+}
+
 /**
 * Instancia de la API de uso directo
 */
@ -135,8 +142,6 @@ const api = {
                if(options.hasOwnProperty('onFail')) {
                    options.onFail(data.data);
                }
-
-                console.log(data.data);
            }

            if(options.hasOwnProperty('onFinish')) {
@ -213,8 +218,8 @@ const api = {
            options
        })
    },
-    resource(resources, options) {
-        this.post('resources/get', {
+    catalog(resources, options) {
+        this.post(apiURL('catalogs/get'), {
            ...options,
            data: resources
        })
@ -247,7 +252,7 @@ const api = {
 /**
 * Instancia de la API
 */
-const useApi = () => reactive(api);
+const useApi = () => reactive({...api});

 /**
 * Instancia de la API para formularios
@ -569,6 +574,7 @@ const useSearcher = (options = {
 export {
    api,
    token,
+    apiURL,
    closeSession,
    defineCsrfToken,
    defineApiToken,
--- a/src/services/Page.js
+++ b/src/services/Page.js
@ -110,6 +110,8 @@ const logout = () => {
      onSuccess: (r) => {
        if(r.is_revoked === true) {
          closeSession()
+
+          location.replace('/')
        }
      }
    });
--- a/src/stores/Notifier.js
+++ b/src/stores/Notifier.js
@ -4,9 +4,6 @@ import { page } from '@Services/Page'
 import { hasPermission, reloadPermissions, getAllRolesIds } from '@Plugins/RolePermission'
 import { boot as bootAuthUsers, addUser, removeUser } from '@Plugins/AuthUsers'

-/** Propiedades */
-const hasNotifications = import.meta.env.VITE_REVERB_ACTIVE === 'true';
-
 // Almacenar estado de la barra lateral derecha
 const useNotifier = defineStore('notifier', {
    state: () => ({
@ -14,12 +11,13 @@ const useNotifier = defineStore('notifier', {
        unreadClosedCounter: 0,
        notifications: [],
        isStarted: false,
+        isEnabled: import.meta.env.VITE_REVERB_ACTIVE === 'true',
        user_id: 0,
    }),
    actions: {
        // Iniciar instancia
        boot() {
-            if(!this.isStarted && hasNotifications) {
+            if(!this.isStarted && this.isEnabled) {
                this.user_id = page.user.id;

                this.subscribeGLobalNotifications();
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,26 +0,0 @@
-import defaultTheme from 'tailwindcss/defaultTheme';
-import colors from './colors.json'
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'class',
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}"
-  ],
-  theme: {
-    extend: {
-      colors: colors,
-      fontFamily: {
-        sans: ['Figtree', ...defaultTheme.fontFamily.sans],
-        'google-icon-outlined':['Material Symbols Outlined'],
-        'google-icon-outlined-fill':['Material Symbols Outlined Fill'],
-        'google-icon-rounded':['Material Symbols Rounded'],
-        'google-icon-rounded-fill':['Material Symbols Rounded Fill'],
-        'google-icon-sharp':['Material Symbols Sharp'],
-        'google-icon-sharp-fill':['Material Symbols Sharp Fill'],
-      },
-    },
-  },
-  plugins: [],
-}
--- a/vite.config.js
+++ b/vite.config.js
@ -1,18 +1,14 @@
 import { fileURLToPath, URL } from 'node:url'

 import { defineConfig } from 'vite'
+import tailwindcss from "@tailwindcss/vite";
 import vue from '@vitejs/plugin-vue'

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
-  build: {
-    rollupOptions: {
-      input: {
-        main: './index.html', // Ruta al archivo index.html
-        auth: './auth.html',  // Ruta al archivo auth.html
-      },
-    },
+  plugins: [vue(), tailwindcss()],
+  server: {
+    allowedHosts: true,
  },
  resolve: {
    alias: {
Author	SHA1	Message	Date
Juan Felipe Zapata Moreno	dc26cc27da	first commit	2025-09-18 13:52:21 -06:00
Moisés Cortés C.	77f186106b	FIX: Redireccion al cerrar session	2025-07-16 11:28:32 -06:00
Moisés Cortés C.	c453697d4e	ADD: Breadcrum y modals - FIX: Token de sesión movido a localStorage - UPDATE: Dependencias - UPDATE: Funcionamiento de los modals - ADD: Breadcrumbs	2025-07-14 10:12:37 -06:00
Moisés Cortés C.	c3965ef4cf	FIX: Fondo de los modals superpuesto	2025-05-24 18:11:55 -06:00
Moisés Cortés C.	c8bab712d3	ADD: Actualizar metodo api.resource por api.catalog	2025-05-23 13:52:32 -06:00
Moisés de Jesús Cortés Castellanos	6b7bccc500	UPDATE: Simplificación de funsionamiento - ADD: Función creación de URL a backend fuera de VUEJS. - UPDATE: Ahora las plantillas se definen en el grupo de rutas, y se heredan en las rutas hijas. - UPDATE: Traducciones modulares faltantes. - UPDATE: Simplificación de las rutas de autenticación. - FIX: Títulos de modal de eliminación ahora son editables. - FIX: Obtención de recursos de backend mediante `api.resource`.	2025-03-13 18:29:42 -06:00
Moisés de Jesús Cortés Castellanos	28c5ba153b	UPDATE: Actualización de dependencias mayor (#6 ) - TailwindCSS 3 => 4 - Diseño cuadrado - Otras dependencias.	2025-03-04 23:20:48 -06:00
Moisés de Jesús Cortés Castellanos	8d752979a7	FIX: Habilitar credenciales en axios	2025-01-21 13:43:05 -06:00
Moisés de Jesús Cortés Castellanos	2ef554a2a8	ADD: Visualización del historial de cambios del backend	2025-01-16 21:42:49 -06:00
Moisés de Jesús Cortés Castellanos	df7b09a10e	FIX: Historial de acciones, modo responsivo	2025-01-06 11:09:44 -06:00