Update Details and Index component on module Warehouses

WIP
Add: Punto de venta y UX para productos
2025-10-31 00:27:17 -06:00 · 2025-10-15 12:08:31 -06:00 · 2025-10-08 12:45:48 -06:00 · 2025-10-04 09:23:04 -06:00 · 2025-10-02 16:16:12 -06:00 · 2025-09-30 21:27:30 +00:00
144 changed files with 15248 additions and 2453 deletions
--- a/.env.example
+++ b/.env.example
@ -1,12 +1,13 @@
-VITE_API_URL=http://backend.holos.test:8080
-VITE_BASE_URL=http://frontend.holos.test
+VITE_API_URL=http://localhost:8080
+VITE_BASE_URL=http://localhost:3000

 VITE_REVERB_APP_ID=
 VITE_REVERB_APP_KEY=
 VITE_REVERB_APP_SECRET=
-VITE_REVERB_HOST="backend.holos.test"
+VITE_REVERB_HOST="localhost"
 VITE_REVERB_PORT=8080
 VITE_REVERB_SCHEME=http
 VITE_REVERB_ACTIVE=false

 APP_PORT=3000
+
--- a/agent.md
+++ b/agent.md
@ -0,0 +1,200 @@
+# Prompt: Generador de Módulos CRUD siguiendo la Estructura de Users
+
+Eres un agente especializado en crear módulos CRUD completos para aplicaciones Vue 3 + Composition API siguiendo la estructura establecida en el módulo Users como referencia.
+
+## 🏗️ ESTRUCTURA OBLIGATORIA
+
+Cada módulo debe seguir exactamente esta estructura de archivos:
+
+```
+ModuleName/
+├── Index.vue          # Vista principal con listado paginado
+├── Create.vue         # Formulario de creación
+├── Edit.vue           # Formulario de edición
+├── Form.vue           # Componente de formulario compartido
+├── Settings.vue       # Configuraciones (si aplica)
+├── Module.js          # Utilidades centralizadas del módulo
+├── Modals/
+│   └── Show.vue       # Modal para mostrar detalles
+└── [OtrosArchivos].vue # Archivos específicos del módulo
+```
+
+## 📋 ESPECIFICACIONES TÉCNICAS
+
+### 1. **Module.js - Archivo Central** (OBLIGATORIO)
+```javascript
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`admin.{module}.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
+    name: `admin.{module}.${name}`, params, query 
+})
+
+// Obtener traducción del componente
+const transl = (str) => lang(`{module}.${str}`)
+
+// Control de permisos
+const can = (permission) => hasPermission(`{module}.${permission}`)
+
+export { can, viewTo, apiTo, transl }
+```
+
+### 2. **Index.vue - Vista Principal** (OBLIGATORIO)
+Debe incluir:
+- ✅ `useSearcher` para búsqueda paginada
+- ✅ `SearcherHead` con título y botones de acción
+- ✅ `Table` component con templates: `#head`, `#body`, `#empty`
+- ✅ Modales para `Show` y `Destroy`
+- ✅ Control de permisos para cada acción (`can()`)
+- ✅ Acciones estándar: Ver, Editar, Eliminar, Settings (si aplica)
+
+### 3. **Create.vue - Creación** (OBLIGATORIO)
+```javascript
+// Estructura mínima:
+const form = useForm({
+    // campos del formulario
+});
+
+function submit() {
+    form.post(apiTo('store'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+```
+
+### 4. **Edit.vue - Edición** (OBLIGATORIO)
+```javascript
+// Estructura mínima:
+const form = useForm({
+    id: null,
+    // otros campos
+});
+
+function submit() {
+    form.put(apiTo('update', { [resource]: form.id }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        },
+    })
+}
+
+onMounted(() => {
+    api.get(apiTo('show', { [resource]: vroute.params.id }), {
+        onSuccess: (r) => form.fill(r.[resource])
+    });
+})
+```
+
+### 5. **Form.vue - Formulario Compartido** (OBLIGATORIO)
+- ✅ Props: `action` (create/update), `form` (objeto de formulario)
+- ✅ Emit: `submit` evento
+- ✅ Grid responsive: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`
+- ✅ Descripción dinámica: `transl(\`\${action}.description\`)`
+- ✅ Slot para campos adicionales
+- ✅ Botón de submit con estado de carga
+
+### 6. **Modals/Show.vue** (OBLIGATORIO)
+- ✅ `ShowModal` base component
+- ✅ `defineExpose({ open: (data) => {...} })`
+- ✅ Header con información principal
+- ✅ Detalles organizados con iconos
+- ✅ Enlaces de contacto (email, teléfono)
+- ✅ Fechas formateadas con `getDateTime`
+
+## 🎨 PATRONES DE DISEÑO OBLIGATORIOS
+
+### **Imports Estándar**
+```javascript
+// Vue
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+// Services
+import { api, useForm, useSearcher } from '@Services/Api';
+
+// Module
+import { apiTo, transl, viewTo, can } from './Module';
+
+// Components
+import IconButton from '@Holos/Button/Icon.vue'
+import PageHeader from '@Holos/PageHeader.vue';
+```
+
+### **Control de Permisos**
+```html
+<!-- Siempre usar can() del módulo -->
+<RouterLink v-if="can('create')" :to="viewTo({ name: 'create' })">
+<IconButton v-if="can('destroy')" @click="destroyModal.open(model)">
+```
+
+### **Navegación Consistente**
+```html
+<!-- Header con botón de retorno -->
+<PageHeader :title="transl('create.title')">
+    <RouterLink :to="viewTo({ name: 'index' })">
+        <IconButton icon="arrow_back" :title="$t('return')" filled />
+    </RouterLink>
+</PageHeader>
+```
+
+### **Grid Responsive**
+```html
+<!-- Formularios siempre con esta estructura -->
+<form class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+```
+
+## 🔧 COMPONENTES REUTILIZABLES OBLIGATORIOS
+
+### **De @Holos:**
+- `Button/Icon.vue`, `Button/Primary.vue`
+- `Form/Input.vue`, `Form/Selectable.vue` 
+- `Modal/Template/Destroy.vue`, `Modal/Show.vue`
+- `PageHeader.vue`, `Searcher.vue`, `Table.vue`
+- `FormSection.vue`, `SectionBorder.vue`
+
+### **De @Services:**
+- `useForm`, `useSearcher`, `api`
+
+### **De @Plugins:**
+- `hasPermission`, sistema de roles
+
+## 📝 INSTRUCCIONES PARA EL AGENTE
+
+Cuando se te solicite crear un módulo:
+
+1. **PREGUNTA PRIMERO:**
+   - Nombre del módulo
+   - Campos principales del formulario
+   - Relaciones con otros módulos
+   - Permisos específicos necesarios
+   - Si requiere configuraciones especiales
+
+2. **GENERA SIEMPRE:**
+   - Todos los archivos de la estructura obligatoria
+   - Module.js con las 4 funciones principales
+   - Permisos específicos del módulo
+   - Traducciones básicas necesarias
+
+3. **RESPETA SIEMPRE:**
+   - Los patrones de naming
+   - La estructura de componentes
+   - Los imports estándar
+   - El sistema de permisos
+   - La navegación consistente
+
+4. **VALIDA QUE:**
+   - Todos los archivos tengan la estructura correcta
+   - Los permisos estén implementados
+   - Las rutas sean consistentes
+   - Los formularios tengan validación
+   - Los modales funcionen correctamente
+
+¿Entendido? Responde "ESTRUCTURA CONFIRMADA" y luego solicita los detalles del módulo que debo crear.
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -10,6 +10,7 @@ services:
      - frontend-v1:/var/www/gols-frontend-v1/node_modules
    networks:
      - gols-network
+    mem_limit: 512m
 volumes:
  frontend-v1:
    driver: local
--- a/install.sh
+++ b/install.sh
--- a/package-lock.json
+++ b/package-lock.json
@ -9,6 +9,7 @@
      "version": "0.9.12",
      "dependencies": {
        "@popperjs/core": "^2.11.8",
+        "@primeuix/themes": "^1.2.5",
        "@tailwindcss/postcss": "^4.0.9",
        "@tailwindcss/vite": "^4.0.9",
        "@vitejs/plugin-vue": "^5.2.1",
@ -17,8 +18,10 @@
        "axios": "^1.8.1",
        "laravel-echo": "^2.0.2",
        "luxon": "^3.5.0",
+        "material-symbols": "^0.36.2",
        "pdf-lib": "^1.17.1",
        "pinia": "^3.0.1",
+        "primevue": "^4.4.1",
        "pusher-js": "^8.4.0",
        "tailwindcss": "^4.0",
        "toastr": "^2.1.4",
@ -701,6 +704,74 @@
        "url": "https://opencollective.com/popperjs"
      }
    },
+    "node_modules/@primeuix/styled": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
+      "integrity": "sha512-QSO/NpOQg8e9BONWRBx9y8VGMCMYz0J/uKfNJEya/RGEu7ARx0oYW0ugI1N3/KB1AAvyGxzKBzGImbwg0KUiOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primeuix/styles": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.2.5.tgz",
+      "integrity": "sha512-nypFRct/oaaBZqP4jinT0puW8ZIfs4u+l/vqUFmJEPU332fl5ePj6DoOpQgTLzo3OfmvSmz5a5/5b4OJJmmi7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.3"
+      }
+    },
+    "node_modules/@primeuix/themes": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.2.5.tgz",
+      "integrity": "sha512-n3YkwJrHQaEESc/D/A/iD815sxp8cKnmzscA6a8Tm8YvMtYU32eCahwLLe6h5rywghVwxASWuG36XBgISYOIjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.3"
+      }
+    },
+    "node_modules/@primeuix/utils": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.1.tgz",
+      "integrity": "sha512-tQL/ZOPgCdD+NTimlUmhyD0ey8J1XmpZE4hDHM+/fnuBicVVmlKOd5HpS748LcOVRUKbWjmEPdHX4hi5XZoC1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
+    "node_modules/@primevue/core": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.4.1.tgz",
+      "integrity": "sha512-RG56iDKIJT//EtntjQzOiWOHZZJczw/qWWtdL5vFvw8/QDS9DPKn8HLpXK7N5Le6KK1MLXUsxoiGTZK+poUFUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/utils": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@primevue/icons": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.4.1.tgz",
+      "integrity": "sha512-UfDimrIjVdY6EziwieyV4zPKzW6mnKHKhy4Dgyjv2oI6pNeuim+onbJo1ce22PEGXW78vfblG/3/JIzVHFweqQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/utils": "^0.6.1",
+        "@primevue/core": "4.4.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
    "node_modules/@rollup/pluginutils": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@ -2976,6 +3047,12 @@
        "@jridgewell/sourcemap-codec": "^1.5.0"
      }
    },
+    "node_modules/material-symbols": {
+      "version": "0.36.2",
+      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.36.2.tgz",
+      "integrity": "sha512-FbxzGgQSmAb53Kajv+jyqcZ3Ck0ebfTBSMwHkMoyThsbrINiJb5mzheoiFXA/9MGc3cIl9XbhW8JxPM5vEP6iA==",
+      "license": "Apache-2.0"
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@ -3308,6 +3385,22 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/primevue": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.4.1.tgz",
+      "integrity": "sha512-JbHBa5k30pZ7mn/z4vYBOnyt5GrR15eM3X0wa3VanonxnFLYkTEx8OMh33aU6ndWeOfi7Ef57dOL3bTH+3f4hQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@primeuix/styled": "^0.7.4",
+        "@primeuix/styles": "^1.2.5",
+        "@primeuix/utils": "^0.6.1",
+        "@primevue/core": "4.4.1",
+        "@primevue/icons": "4.4.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
    "node_modules/proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
+    "@primeuix/themes": "^1.2.5",
    "@tailwindcss/postcss": "^4.0.9",
    "@tailwindcss/vite": "^4.0.9",
    "@vitejs/plugin-vue": "^5.2.1",
@ -19,8 +20,10 @@
    "axios": "^1.8.1",
    "laravel-echo": "^2.0.2",
    "luxon": "^3.5.0",
+    "material-symbols": "^0.36.2",
    "pdf-lib": "^1.17.1",
    "pinia": "^3.0.1",
+    "primevue": "^4.4.1",
    "pusher-js": "^8.4.0",
    "tailwindcss": "^4.0",
    "toastr": "^2.1.4",
--- a/src/components/Holos/Button/Button.vue
+++ b/src/components/Holos/Button/Button.vue
@ -0,0 +1,138 @@
+<template>
+  <button :type="type" :disabled="disabled || loading" :class="buttonClasses" @click="handleClick">
+    <svg v-if="loading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
+      fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+      </path>
+    </svg>
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  variant?: 'solid' | 'outline' | 'ghost' | 'smooth';
+  color?: 'primary' | 'danger' | 'success' | 'info' | 'warning';
+  size?: 'sm' | 'md' | 'lg';
+  type?: 'button' | 'submit' | 'reset';
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  iconOnly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'solid',
+  color: 'primary',
+  size: 'md',
+  type: 'button',
+  disabled: false,
+  loading: false,
+  fullWidth: false,
+  iconOnly: false,
+});
+
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+function handleClick(event: MouseEvent) {
+  if (props.disabled || props.loading) return;
+  emit('click', event);
+}
+
+const buttonClasses = computed(() => {
+  const baseClasses = [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'font-medium',
+    'rounded-lg',
+    'transition-all',
+    'duration-200',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-offset-2',
+    'disabled:opacity-50',
+    'disabled:cursor-not-allowed',
+  ];
+
+  const sizeClasses = {
+    sm: ['px-3', 'py-1.5', 'text-sm'],
+    md: ['px-4', 'py-2', 'text-sm'],
+    lg: ['px-6', 'py-3', 'text-base'],
+  };
+
+  // Estilos base por tipo
+  const variantClasses = {
+    solid: ['shadow-sm'],
+    outline: ['border', 'bg-white', 'hover:bg-gray-50'],
+    ghost: ['bg-transparent', 'hover:bg-gray-100'],
+    smooth: ['bg-opacity-20', 'font-bold', 'uppercase', 'shadow-none'],
+  };
+
+  // Colores por tipo
+  const colorClasses = {
+    primary: {
+      solid: ['bg-primary-600', 'text-white', 'hover:bg-primary-700', 'focus:ring-primary-500'],
+      outline: ['border-primary-600', 'text-primary-600', 'focus:ring-primary-500'],
+      ghost: ['text-primary-600', 'focus:ring-primary-500'],
+      smooth: ['bg-primary-100', 'text-primary-600', 'hover:bg-primary-200', 'focus:ring-primary-300'],
+    },
+    danger: {
+      solid: ['bg-red-600', 'text-white', 'hover:bg-red-700', 'focus:ring-red-500'],
+      outline: ['border-red-600', 'text-red-600', 'focus:ring-red-500'],
+      ghost: ['text-red-600', 'focus:ring-red-500'],
+      smooth: ['bg-red-100', 'text-red-600', 'hover:bg-red-200', 'focus:ring-red-300'],
+    },
+    success: {
+      solid: ['bg-green-600', 'text-white', 'hover:bg-green-700', 'focus:ring-green-500'],
+      outline: ['border-green-600', 'text-green-600', 'focus:ring-green-500'],
+      ghost: ['text-green-600', 'focus:ring-green-500'],
+      smooth: ['bg-green-100', 'text-green-600', 'hover:bg-green-200', 'focus:ring-green-300'],
+    },
+    info: {
+      solid: ['bg-blue-600', 'text-white', 'hover:bg-blue-700', 'focus:ring-blue-500'],
+      outline: ['border-blue-600', 'text-blue-600', 'focus:ring-blue-500'],
+      ghost: ['text-blue-600', 'focus:ring-blue-500'],
+      smooth: ['bg-blue-100', 'text-blue-600', 'hover:bg-blue-200', 'focus:ring-blue-300'],
+    },
+    warning: {
+      solid: ['bg-yellow-500', 'text-white', 'hover:bg-yellow-600', 'focus:ring-yellow-400'],
+      outline: ['border-yellow-500', 'text-yellow-600', 'focus:ring-yellow-400'],
+      ghost: ['text-yellow-600', 'focus:ring-yellow-400'],
+      smooth: ['bg-yellow-100', 'text-yellow-600', 'hover:bg-yellow-200', 'focus:ring-yellow-200'],
+    },
+  };
+
+
+  // Asegura que siempre haya un array válido para los estilos
+  const safeVariant = props.variant && variantClasses[props.variant] ? props.variant : 'solid';
+  const safeColor = props.color && colorClasses[props.color] ? props.color : 'primary';
+
+  const classes = [
+    ...baseClasses,
+    ...sizeClasses[props.size],
+    ...(variantClasses[safeVariant] || []),
+    ...(colorClasses[safeColor]?.[safeVariant] || []),
+  ];
+
+  if (props.fullWidth) {
+    classes.push('w-full');
+  }
+  if (props.iconOnly) {
+    if (props.size === 'sm') classes.push('w-8', 'h-8', 'p-0');
+    else if (props.size === 'lg') classes.push('w-12', 'h-12', 'p-0');
+    else classes.push('w-10', 'h-10', 'p-0');
+  } else if (props.fullWidth) {
+    classes.push('w-full');
+  }
+
+  return classes;
+});
+</script>
--- a/src/components/Holos/Card/AcademicRecords.vue
+++ b/src/components/Holos/Card/AcademicRecords.vue
@ -0,0 +1,83 @@
+<script setup>
+import { getDate } from '@Controllers/DateController';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Props */
+const props = defineProps({
+  records: {
+    type: Array,
+    default: () => []
+  }
+});
+
+/** Eventos */
+const emit = defineEmits(['destroy', 'edit']);
+
+/** Métodos */
+function openDestroy(record) {
+  emit('destroy', record);
+}
+
+function openEdit(record) {
+  emit('edit', record);
+}
+</script>
+
+<template>
+  <div class="mt-6">
+    <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
+      <GoogleIcon 
+        class="text-black dark:text-primary-dt text-xl"
+        name="book"
+      />
+      Grados Académicos
+    </h3>
+
+    <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
+      <!-- Item grado dinámico -->
+      <article 
+        v-for="record in records" 
+        :key="record.id"
+        class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+      >
+        <div class="flex items-start justify-between">
+          <div>
+            <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ record.title }}</h4>
+            <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ record.institution }}</p>
+            <p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Fecha de obtención: {{ record.date_obtained ? getDate(record.date_obtained) : '-' }}</p>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
+              {{ record.degree_type_ek }}
+            </span>
+            <button 
+              @click="openEdit(record)"
+              class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+              title="Editar grado académico"
+            >
+              <GoogleIcon name="edit" class="w-4 h-4" />
+            </button>
+            <button 
+              @click="openDestroy(record)"
+              class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
+              title="Eliminar grado académico"
+            >
+              <GoogleIcon name="delete" class="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </article>
+
+      <!-- Estado vacío para grados académicos -->
+      <div v-if="!records || records.length === 0" class="col-span-2 py-8 text-center">
+        <div class="text-gray-500 dark:text-primary-dt/70">
+          <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+          <p class="text-lg font-medium">No se encontraron grados académicos</p>
+          <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/src/components/Holos/Card/Card.vue
+++ b/src/components/Holos/Card/Card.vue
@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'outline',
+    validator: (value) => ['default', 'outline', 'ghost'].includes(value)
+  },
+  className: {
+    type: String,
+    default: '',
+  }
+});
+
+const cardClasses = computed(() => {
+  const baseClasses = [
+    'rounded-lg',
+    'shadow-sm',
+    'transition-all',
+    'duration-200',
+  ];
+
+  const variantClasses = {
+    default: ['border', 'bg-white', 'dark:bg-gray-800', 'text-gray-900', 'dark:text-gray-100'],
+    outline: ['border-2', 'border-gray-100', 'dark:border-gray-700', 'bg-transparent'],
+    ghost: ['shadow-none', 'border-none', 'bg-transparent'],
+  };
+
+  return [
+    ...baseClasses,
+    ...variantClasses[props.variant],
+    props.className,
+  ].filter(Boolean);
+});
+</script>
+
+<template>
+  <div :class="cardClasses">
+    <slot />
+  </div>
+</template>
--- a/src/components/Holos/Card/CardContent.vue
+++ b/src/components/Holos/Card/CardContent.vue
@ -0,0 +1,22 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: '',
+  }
+});
+
+const contentClasses = computed(() => [
+  'p-6',
+  'pt-0',
+  props.className,
+].filter(Boolean));
+</script>
+
+<template>
+  <div :class="contentClasses">
+    <slot />
+  </div>
+</template>
--- a/src/components/Holos/Card/CardDescription.vue
+++ b/src/components/Holos/Card/CardDescription.vue
@ -0,0 +1,23 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: '',
+  }
+});
+
+const descriptionClasses = computed(() => [
+  'text-sm',
+  'text-gray-600',
+  'dark:text-gray-400',
+  props.className,
+].filter(Boolean));
+</script>
+
+<template>
+  <p :class="descriptionClasses">
+    <slot />
+  </p>
+</template>
--- a/src/components/Holos/Card/CardFooter.vue
+++ b/src/components/Holos/Card/CardFooter.vue
@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: '',
+  }
+});
+
+const footerClasses = computed(() => [
+  'flex',
+  'items-center',
+  'p-6',
+  'pt-0',
+  props.className,
+].filter(Boolean));
+</script>
+
+<template>
+  <div :class="footerClasses">
+    <slot />
+  </div>
+</template>
--- a/src/components/Holos/Card/CardHeader.vue
+++ b/src/components/Holos/Card/CardHeader.vue
@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: '',
+  }
+});
+
+const headerClasses = computed(() => [
+  'flex',
+  'flex-col',
+  'space-y-1.5',
+  'p-6',
+  props.className,
+].filter(Boolean));
+</script>
+
+<template>
+  <div :class="headerClasses">
+    <slot />
+  </div>
+</template>
--- a/src/components/Holos/Card/CardTitle.vue
+++ b/src/components/Holos/Card/CardTitle.vue
@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  className: {
+    type: String,
+    default: '',
+  }
+});
+
+const titleClasses = computed(() => [
+  'text-2xl',
+  'font-semibold',
+  'leading-none',
+  'tracking-tight',
+  props.className,
+].filter(Boolean));
+</script>
+
+<template>
+  <h3 :class="titleClasses">
+    <slot />
+  </h3>
+</template>
--- a/src/components/Holos/Card/Certifications.vue
+++ b/src/components/Holos/Card/Certifications.vue
@ -0,0 +1,121 @@
+<script setup>
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import { getDate } from '@Controllers/DateController';
+
+/** Props */
+const props = defineProps({
+  certifications: {
+    type: Array,
+    default: () => []
+  }
+});
+
+/** Eventos */
+const emit = defineEmits(['destroy', 'edit']);
+
+/** Métodos */
+function openDestroy(cert) {
+  emit('destroy', cert);
+}
+
+function openEdit(cert) {
+  emit('edit', cert);
+}
+
+/** Métodos */
+function getCertificationStatus(cert) {
+  // Si no tiene fecha de expiración, se considera permanente
+  if (!cert.date_expiration) {
+    return {
+      status: 'permanente',
+      statusText: 'Permanente',
+      isExpired: false
+    };
+  }
+  
+  const now = new Date();
+  const expirationDate = new Date(cert.date_expiration);
+  
+  // Si la fecha actual es mayor a la fecha de expiración, está vencida
+  const isExpired = now > expirationDate;
+  
+  return {
+    status: isExpired ? 'vencida' : 'vigente',
+    statusText: isExpired ? 'Vencida' : 'Vigente',
+    isExpired
+  };
+}
+</script>
+
+<template>
+  <div class="mt-8">
+    <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
+      <GoogleIcon 
+        class="text-black dark:text-primary-dt text-xl"
+        name="license"
+      />
+      Certificaciones
+    </h3>
+
+    <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
+      <!-- Certificación dinámica -->
+      <article 
+        v-for="cert in certifications" 
+        :key="cert.id"
+        :class="[
+          'rounded-lg border p-4 relative',
+          getCertificationStatus(cert).status === 'vigente' 
+            ? 'border-gray-100 bg-green-50/40 dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt'
+            : 'border-gray-100 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt'
+        ]"
+      >
+        <div class="flex items-start justify-between">
+          <div>
+            <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ cert.name }}</h4>
+            <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ cert.institution }}</p>
+            <p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: {{ cert.date_obtained ? getDate(cert.date_obtained) : '-' }}</p>
+            <p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: {{ cert.date_expiration ? getDate(cert.date_expiration) : 'Permanente' }}</p>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <span 
+              :class="[
+                'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold',
+                getCertificationStatus(cert).status === 'vigente' 
+                  ? 'bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt'
+                  : getCertificationStatus(cert).status === 'permanente'
+                  ? 'bg-blue-100 text-blue-700 dark:bg-info-d dark:text-info-dt'
+                  : 'bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt'
+              ]"
+            >
+              {{ getCertificationStatus(cert).statusText }}
+            </span>
+            <button 
+              @click="openEdit(cert)"
+              class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+              title="Editar certificación"
+            >
+              <GoogleIcon name="edit" class="w-4 h-4" />
+            </button>
+            <button 
+              @click="openDestroy(cert)"
+              class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
+              title="Eliminar certificación"
+            >
+              <GoogleIcon name="delete" class="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </article>
+
+      <!-- Estado vacío para certificaciones -->
+      <div v-if="!certifications || certifications.length === 0" class="col-span-2 py-8 text-center">
+        <div class="text-gray-500 dark:text-primary-dt/70">
+          <GoogleIcon name="license" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+          <p class="text-lg font-medium">No se encontraron certificaciones</p>
+          <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/src/components/Holos/Inbox.vue
+++ b/src/components/Holos/Inbox.vue
--- a/src/components/Holos/Inbox/Item.vue
+++ b/src/components/Holos/Inbox/Item.vue
--- a/src/components/Holos/Inbox/ItemTitle.vue
+++ b/src/components/Holos/Inbox/ItemTitle.vue
--- a/src/components/Holos/Inbox/Menu/Item.vue
+++ b/src/components/Holos/Inbox/Menu/Item.vue
--- a/src/components/Holos/Inbox/Menu/Static.vue
+++ b/src/components/Holos/Inbox/Menu/Static.vue
--- a/src/components/Holos/NewTable.vue
+++ b/src/components/Holos/NewTable.vue
@ -0,0 +1,151 @@
+<script setup>
+import GoogleIcon from '../Shared/GoogleIcon.vue';
+import Loader from '../Shared/Loader.vue';
+
+/** Eventos */
+const emit = defineEmits([
+  'send-pagination'
+]);
+
+/** Propiedades */
+const props = defineProps({
+  items: Object,
+  processing: Boolean
+});
+
+</script>
+
+<template>
+  <div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+
+    <!-- Tabla -->
+    <div class="overflow-x-auto">
+      <table v-if="!processing" class="w-full">
+        <thead>
+          <tr class="text-left text-sm text-gray-500 dark:text-primary-dt/70">
+            <slot name="head" />
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-primary/20 text-sm text-gray-700 dark:text-primary-dt">
+          <template v-if="items?.total > 0">
+            <slot
+              name="body"
+              :items="items?.data"
+            />
+          </template>
+          <template v-else>
+            <tr>
+              <slot name="empty" />
+            </tr>
+          </template>
+        </tbody>
+      </table>
+
+      <!-- Estado de carga -->
+      <table v-else class="animate-pulse w-full">
+        <thead>
+          <tr>
+            <th colspan="100%" class="h-8 text-center">
+              <div class="flex items-center justify-center">
+                <Loader />
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="i in 3" :key="i">
+            <td colspan="100%" class="table-cell h-16 text-center">
+              <div class="w-full h-4 bg-secondary/50 rounded-md"></div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Paginación -->
+    <template v-if="items?.links && items.links.length > 3">
+      <div class="mt-6 flex w-full justify-end">
+        <div class="flex w-full justify-end flex-wrap space-x-1 -mb-1">
+          <template v-for="(link, k) in items.links" :key="k">
+            <!-- Botón anterior deshabilitado -->
+            <div v-if="link.url === null && k == 0"
+              class="px-3 py-2 text-sm leading-4 text-gray-400 border rounded-lg bg-gray-50 dark:bg-primary-d dark:border-primary/20"
+            >
+              <GoogleIcon name="arrow_back" class="w-4 h-4" />
+            </div>
+            
+            <!-- Botón anterior activo -->
+            <button v-else-if="k === 0" 
+              class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50" 
+              :class="{ 
+                'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
+                'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
+              }"
+              @click="emit('send-pagination', link.url)"
+            >
+              <GoogleIcon name="arrow_back" class="w-4 h-4" />
+            </button>
+            
+            <!-- Botón siguiente deshabilitado -->
+            <div v-else-if="link.url === null && k == (items.links.length - 1)"
+              class="px-3 py-2 text-sm leading-4 text-gray-400 border rounded-lg bg-gray-50 dark:bg-primary-d dark:border-primary/20"
+            >
+              <GoogleIcon name="arrow_forward" class="w-4 h-4" />
+            </div>
+            
+            <!-- Botón siguiente activo -->
+            <button v-else-if="k === (items.links.length - 1)" 
+              class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50" 
+              :class="{ 
+                'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
+                'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
+              }"
+              @click="emit('send-pagination', link.url)"
+            >
+              <GoogleIcon name="arrow_forward" class="w-4 h-4" />
+            </button>
+            
+            <!-- Números de página -->
+            <button v-else 
+              class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50" 
+              :class="{ 
+                'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
+                'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
+              }"
+              v-html="link.label"
+              @click="emit('send-pagination', link.url)"
+            ></button>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* Estilos adicionales para mejorar la experiencia */
+tbody tr {
+  transition: background-color 0.2s ease;
+}
+
+tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.dark tbody tr:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Animación suave para los botones de paginación */
+button {
+  transition: all 0.2s ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+}
+
+button:active {
+  transform: translateY(0);
+}
+</style>
--- a/src/components/Holos/SectionTitle.vue
+++ b/src/components/Holos/SectionTitle.vue
@ -1,11 +1,11 @@
 <template>
    <div class="md:col-span-1 flex justify-between">
        <div class="px-4 sm:px-0">
-            <h3 class="text-lg font-medium text-gray-900 dark:text-white">
+            <h3 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">
                <slot name="title" />
            </h3>

-            <p class="mt-1 text-sm text-gray-600 dark:text-white/50">
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">
                <slot name="description" />
            </p>
        </div>
@ -15,3 +15,4 @@
        </div>
    </div>
 </template>
+
--- a/src/components/ui/Icons/MaterialIcon.vue
+++ b/src/components/ui/Icons/MaterialIcon.vue
@ -0,0 +1,49 @@
+<template>
+  <span
+    :class="`material-symbols-${variant}`"
+    :style="{
+      fontVariationSettings: variationSettings,
+      fontSize: size + 'px',
+      color
+    }"
+    aria-hidden="true"
+  >
+    {{ name }}
+  </span>
+</template>
+
+<script>
+export default {
+  name: "MaterialIcon",
+  props: {
+    name: { type: String, required: true }, // Ej: "search", "home", "face"
+    variant: {
+      type: String,
+      default: "outlined", // outlined, rounded, sharp
+      validator: (v) => ["outlined", "rounded", "sharp"].includes(v)
+    },
+    fill: { type: Number, default: 0 }, // 0: borde, 1: relleno
+    weight: { type: Number, default: 400 }, // 100 a 700
+    grade: { type: Number, default: 0 }, // -25, 0, 200
+    opticalSize: { type: Number, default: 48 }, // tamaño óptico
+    size: { type: Number, default: 24 }, // tamaño visual en px
+    color: { type: String, default: "inherit" }
+  },
+  computed: {
+    variationSettings() {
+      return `"FILL" ${this.fill}, "wght" ${this.weight}, "GRAD" ${this.grade}, "opsz" ${this.opticalSize}`;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp {
+  vertical-align: middle;
+  user-select: none;
+  display: inline-block;
+  line-height: 1;
+}
+</style>
--- a/src/components/ui/Input.vue
+++ b/src/components/ui/Input.vue
@ -0,0 +1,114 @@
+<script setup>
+import { computed } from 'vue';
+
+/** Props */
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'text'
+  },
+  class: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  id: {
+    type: String,
+    default: undefined
+  },
+  name: {
+    type: String,
+    default: undefined
+  }
+});
+
+/** Emits */
+const emit = defineEmits(['update:modelValue', 'input', 'change', 'focus', 'blur', 'keydown', 'keyup']);
+
+/** Función para concatenar clases (equivalente a cn() de React) */
+const cn = (...classes) => {
+  return classes.filter(Boolean).join(' ');
+};
+
+/** Clases computadas */
+const inputClasses = computed(() => {
+  return cn(
+    "flex h-10 w-full rounded-md border border-input px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+    props.class
+  );
+});
+
+/** Manejadores de eventos */
+const handleInput = (event) => {
+  emit('update:modelValue', event.target.value);
+  emit('input', event);
+};
+
+const handleChange = (event) => {
+  emit('change', event);
+};
+
+const handleFocus = (event) => {
+  emit('focus', event);
+};
+
+const handleBlur = (event) => {
+  emit('blur', event);
+};
+
+const handleKeydown = (event) => {
+  emit('keydown', event);
+};
+
+const handleKeyup = (event) => {
+  emit('keyup', event);
+};
+</script>
+
+<template>
+  <input
+    :id="id"
+    :name="name"
+    :type="type"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :required="required"
+    :class="inputClasses"
+    @input="handleInput"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @keydown="handleKeydown"
+    @keyup="handleKeyup"
+  />
+</template>
+
+<style scoped>
+/* 
+  Nota: Las clases CSS están definidas en Tailwind CSS.
+  Si necesitas definir estilos personalizados para las clases como 
+  'border-input', 'bg-background', 'ring-ring', etc., 
+  puedes agregarlas aquí o en tu archivo de configuración de Tailwind.
+*/
+</style>
--- a/src/components/ui/Table/Table.vue
+++ b/src/components/ui/Table/Table.vue
@ -0,0 +1,117 @@
+<template>
+  <div class="flex flex-col">
+    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
+      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
+          <div v-if="loading" class="relative">
+            <div class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10">
+              <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+            </div>
+          </div>
+
+          <table class="min-w-full divide-y divide-gray-300">
+            <TableHeader
+              :columns="columns"
+              :sortable="sortable"
+              :sort-direction="sortDirection"
+              @sort="handleSort"
+            />
+            <TableBody
+              :columns="columns"
+              :data="paginatedData"
+              :empty-message="emptyMessage"
+            >
+              <!-- Pasar todos los slots al TableBody -->
+              <template v-for="(_, name) in $slots" #[name]="slotData">
+                <slot :name="name" v-bind="slotData" />
+              </template>
+            </TableBody>
+          </table>
+
+          <TablePagination
+            v-if="pagination && paginationState"
+            :current-page="paginationState.currentPage.value"
+            :total-pages="paginationState.totalPages.value"
+            :total-items="paginationState.totalItems.value"
+            :start-index="paginationState.startIndex.value"
+            :end-index="paginationState.endIndex.value"
+            :has-next-page="paginationState.hasNextPage.value"
+            :has-previous-page="paginationState.hasPreviousPage.value"
+            @next="paginationState.nextPage"
+            @previous="paginationState.previousPage"
+            @go-to-page="paginationState.goToPage"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, watch } from 'vue';
+import { usePagination } from './composables/usePagination';
+import { useSort } from './composables/useSort';
+import TableHeader from './TableHeader.vue';
+import TableBody from './TableBody.vue';
+import TablePagination from './TablePagination.vue';
+
+const props = defineProps({
+  columns: {
+    type: Array,
+    required: true
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  sortable: {
+    type: Boolean,
+    default: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  emptyMessage: {
+    type: String,
+    default: 'No data available'
+  },
+  pagination: {
+    type: Object,
+    default: null
+  }
+});
+
+const { sortedData, toggleSort } = useSort(props.data);
+
+const paginationState = props.pagination
+  ? usePagination(props.pagination)
+  : null;
+
+const paginatedData = computed(() => {
+  if (!paginationState) {
+    return sortedData.value;
+  }
+
+  const start = paginationState.startIndex.value;
+  const end = paginationState.endIndex.value;
+  return sortedData.value.slice(start, end);
+});
+
+const sortDirection = computed(() => {
+  return null;
+});
+
+const handleSort = (key) => {
+  toggleSort(key);
+};
+
+watch(
+  () => props.data,
+  (newData) => {
+    if (paginationState) {
+      paginationState.updateTotalItems(newData.length);
+    }
+  }
+);
+</script>
--- a/src/components/ui/Table/TableBody.vue
+++ b/src/components/ui/Table/TableBody.vue
@ -0,0 +1,56 @@
+<template>
+  <tbody class="bg-white divide-y divide-gray-200">
+    <tr
+      v-for="(row, rowIndex) in data"
+      :key="rowIndex"
+      class="hover:bg-gray-50 transition-colors"
+    >
+      <td
+        v-for="column in columns"
+        :key="column.key"
+        class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"
+      >
+        <slot 
+          :name="`cell-${column.key}`" 
+          :value="row[column.key]" 
+          :row="row" 
+          :column="column"
+        >
+          {{ formatCell(row[column.key], row, column) }}
+        </slot>
+      </td>
+    </tr>
+    <tr v-if="!data || data.length === 0">
+      <td
+        :colspan="columns.length"
+        class="px-6 py-8 text-center text-sm text-gray-500"
+      >
+        {{ emptyMessage }}
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<script setup>
+const props = defineProps({
+  columns: {
+    type: Array,
+    required: true
+  },
+  data: {
+    type: Array,
+    required: true
+  },
+  emptyMessage: {
+    type: String,
+    default: 'No data available'
+  }
+});
+
+const formatCell = (value, row, column) => {
+  if (column.formatter) {
+    return column.formatter(value, row);
+  }
+  return value ?? '-';
+};
+</script>
--- a/src/components/ui/Table/TableHeader.vue
+++ b/src/components/ui/Table/TableHeader.vue
@ -0,0 +1,65 @@
+<template>
+  <thead class="bg-gray-50 border-b border-gray-200">
+    <tr>
+      <th
+        v-for="column in columns"
+        :key="column.key"
+        :style="column.width ? { width: column.width } : undefined"
+        :class="[
+          'px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider',
+          column.sortable && sortable ? 'cursor-pointer select-none hover:bg-gray-100' : ''
+        ]"
+        @click="column.sortable && sortable ? handleSort(column.key) : undefined"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ column.label }}</span>
+          <span v-if="column.sortable && sortable" class="flex flex-col">
+            <svg
+              :class="[
+                'w-3 h-3 transition-colors',
+                sortDirection === 'asc' ? 'text-primary-600' : 'text-gray-400'
+              ]"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M5 10l5-5 5 5H5z" />
+            </svg>
+            <svg
+              :class="[
+                'w-3 h-3 -mt-1 transition-colors',
+                sortDirection === 'desc' ? 'text-primary-600' : 'text-gray-400'
+              ]"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path d="M15 10l-5 5-5-5h10z" />
+            </svg>
+          </span>
+        </div>
+      </th>
+    </tr>
+  </thead>
+</template>
+
+<script setup>
+const props = defineProps({
+  columns: {
+    type: Array,
+    required: true
+  },
+  sortable: {
+    type: Boolean,
+    default: true
+  },
+  sortDirection: {
+    type: String,
+    default: null
+  }
+});
+
+const emit = defineEmits(['sort']);
+
+const handleSort = (key) => {
+  emit('sort', key);
+};
+</script>
--- a/src/components/ui/Table/TablePagination.vue
+++ b/src/components/ui/Table/TablePagination.vue
@ -0,0 +1,148 @@
+<template>
+  <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+    <div class="flex-1 flex justify-between sm:hidden">
+      <button
+        @click="emit('previous')"
+        :disabled="!hasPreviousPage"
+        :class="[
+          'relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md',
+          hasPreviousPage
+            ? 'text-gray-700 bg-white hover:bg-gray-50'
+            : 'text-gray-400 bg-gray-100 cursor-not-allowed'
+        ]"
+      >
+        Previous
+      </button>
+      <button
+        @click="emit('next')"
+        :disabled="!hasNextPage"
+        :class="[
+          'ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md',
+          hasNextPage
+            ? 'text-gray-700 bg-white hover:bg-gray-50'
+            : 'text-gray-400 bg-gray-100 cursor-not-allowed'
+        ]"
+      >
+        Next
+      </button>
+    </div>
+    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+      <div>
+        <p class="text-sm text-gray-700">
+          Mostrando
+          <span class="font-medium">{{ startIndex + 1 }}</span>
+          a
+          <span class="font-medium">{{ endIndex }}</span>
+          de
+          <span class="font-medium">{{ totalItems }}</span>
+          resultados
+        </p>
+      </div>
+      <div>
+        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
+          <button
+            @click="emit('previous')"
+            :disabled="!hasPreviousPage"
+            :class="[
+              'relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 text-sm font-medium',
+              hasPreviousPage
+                ? 'text-gray-500 bg-white hover:bg-gray-50'
+                : 'text-gray-300 bg-gray-100 cursor-not-allowed'
+            ]"
+          >
+            <span class="sr-only">Previous</span>
+            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+          </button>
+
+          <button
+            v-for="page in visiblePages"
+            :key="page"
+            @click="emit('goToPage', page)"
+            :class="[
+              'relative inline-flex items-center px-4 py-2 border text-sm font-medium',
+              page === currentPage
+                ? 'z-10 bg-primary-50 border-primary-500 text-primary-600'
+                : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
+            ]"
+          >
+            {{ page }}
+          </button>
+
+          <button
+            @click="emit('next')"
+            :disabled="!hasNextPage"
+            :class="[
+              'relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 text-sm font-medium',
+              hasNextPage
+                ? 'text-gray-500 bg-white hover:bg-gray-50'
+                : 'text-gray-300 bg-gray-100 cursor-not-allowed'
+            ]"
+          >
+            <span class="sr-only">Next</span>
+            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+            </svg>
+          </button>
+        </nav>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    required: true
+  },
+  totalPages: {
+    type: Number,
+    required: true
+  },
+  totalItems: {
+    type: Number,
+    required: true
+  },
+  startIndex: {
+    type: Number,
+    required: true
+  },
+  endIndex: {
+    type: Number,
+    required: true
+  },
+  hasNextPage: {
+    type: Boolean,
+    required: true
+  },
+  hasPreviousPage: {
+    type: Boolean,
+    required: true
+  }
+});
+
+const emit = defineEmits(['next', 'previous', 'goToPage']);
+
+const visiblePages = computed(() => {
+  const pages = [];
+  const maxVisible = 5;
+  const halfVisible = Math.floor(maxVisible / 2);
+
+  let startPage = Math.max(1, props.currentPage - halfVisible);
+  let endPage = Math.min(props.totalPages, startPage + maxVisible - 1);
+
+  if (endPage - startPage < maxVisible - 1) {
+    startPage = Math.max(1, endPage - maxVisible + 1);
+  }
+
+  for (let i = startPage; i <= endPage; i++) {
+    pages.push(i);
+  }
+
+  return pages;
+});
+</script>
--- a/src/components/ui/Table/composables/usePagination.js
+++ b/src/components/ui/Table/composables/usePagination.js
@ -0,0 +1,60 @@
+import { computed, ref } from 'vue';
+
+export function usePagination(initialConfig) {
+  const currentPage = ref(initialConfig.currentPage);
+  const pageSize = ref(initialConfig.pageSize);
+  const totalItems = ref(initialConfig.totalItems);
+
+  const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
+
+  const startIndex = computed(() => (currentPage.value - 1) * pageSize.value);
+
+  const endIndex = computed(() => Math.min(startIndex.value + pageSize.value, totalItems.value));
+
+  const hasNextPage = computed(() => currentPage.value < totalPages.value);
+
+  const hasPreviousPage = computed(() => currentPage.value > 1);
+
+  const goToPage = (page) => {
+    if (page >= 1 && page <= totalPages.value) {
+      currentPage.value = page;
+    }
+  };
+
+  const nextPage = () => {
+    if (hasNextPage.value) {
+      currentPage.value++;
+    }
+  };
+
+  const previousPage = () => {
+    if (hasPreviousPage.value) {
+      currentPage.value--;
+    }
+  };
+
+  const setPageSize = (size) => {
+    pageSize.value = size;
+    currentPage.value = 1;
+  };
+
+  const updateTotalItems = (total) => {
+    totalItems.value = total;
+  };
+
+  return {
+    currentPage,
+    pageSize,
+    totalItems,
+    totalPages,
+    startIndex,
+    endIndex,
+    hasNextPage,
+    hasPreviousPage,
+    goToPage,
+    nextPage,
+    previousPage,
+    setPageSize,
+    updateTotalItems,
+  };
+}
--- a/src/components/ui/Table/composables/useSort.js
+++ b/src/components/ui/Table/composables/useSort.js
@ -0,0 +1,50 @@
+import { ref, computed } from 'vue';
+
+export function useSort(initialData) {
+  const sortConfig = ref(null);
+
+  const sortedData = computed(() => {
+    if (!sortConfig.value) {
+      return initialData;
+    }
+
+    const { key, direction } = sortConfig.value;
+    const sorted = [...initialData];
+
+    sorted.sort((a, b) => {
+      const aValue = a[key];
+      const bValue = b[key];
+
+      if (aValue === bValue) return 0;
+
+      const comparison = aValue > bValue ? 1 : -1;
+      return direction === 'asc' ? comparison : -comparison;
+    });
+
+    return sorted;
+  });
+
+  const toggleSort = (key) => {
+    if (!sortConfig.value || sortConfig.value.key !== key) {
+      sortConfig.value = { key, direction: 'asc' };
+    } else if (sortConfig.value.direction === 'asc') {
+      sortConfig.value = { key, direction: 'desc' };
+    } else {
+      sortConfig.value = null;
+    }
+  };
+
+  const getSortDirection = (key) => {
+    if (!sortConfig.value || sortConfig.value.key !== key) {
+      return null;
+    }
+    return sortConfig.value.direction;
+  };
+
+  return {
+    sortConfig,
+    sortedData,
+    toggleSort,
+    getSortDirection,
+  };
+}
--- a/src/components/ui/Tags/Badge.vue
+++ b/src/components/ui/Tags/Badge.vue
@ -0,0 +1,109 @@
+<template>
+  <span :class="tagClasses">
+    <template v-if="props.dot">
+      <span :class="dotClasses"></span>
+    </template>
+    <template v-else>
+      <slot name="icon" />
+    </template>
+    <slot />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  color?: 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'gray' | string; // string para hex
+  dot?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'blue',
+  dot: true,
+});
+
+const isHexColor = (color: string) => /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+
+const colorMap = {
+  blue: {
+    bg: 'bg-blue-100',
+    text: 'text-blue-700',
+    dot: 'bg-blue-500',
+  },
+  purple: {
+    bg: 'bg-purple-100',
+    text: 'text-purple-700',
+    dot: 'bg-purple-500',
+  },
+  green: {
+    bg: 'bg-green-100',
+    text: 'text-green-700',
+    dot: 'bg-green-500',
+  },
+  orange: {
+    bg: 'bg-orange-100',
+    text: 'text-orange-700',
+    dot: 'bg-orange-500',
+  },
+  red: {
+    bg: 'bg-red-100',
+    text: 'text-red-700',
+    dot: 'bg-red-500',
+  },
+  gray: {
+    bg: 'bg-gray-700',
+    text: 'text-gray-700',
+    dot: 'bg-gray-700',
+  },
+};
+
+const tagClasses = computed(() => {
+  if (isHexColor(props.color)) {
+    return [
+      'inline-flex',
+      'items-center',
+      'px-3',
+      'py-1',
+      'rounded-md',
+      'text-sm',
+      'font-medium',
+      { backgroundColor: props.color, color: '#fff' },
+    ];
+  }
+  const allowedColors = Object.keys(colorMap);
+  const isPreset = allowedColors.includes(props.color as string);
+  return [
+    'inline-flex',
+    'items-center',
+    'px-3',
+    'py-1',
+    'rounded-md',
+    'text-sm',
+    'font-medium',
+    isPreset ? colorMap[props.color as keyof typeof colorMap].bg : 'bg-gray-100',
+    isPreset ? colorMap[props.color as keyof typeof colorMap].text : 'text-gray-700',
+  ];
+});
+
+const dotClasses = computed(() => {
+  if (isHexColor(props.color)) {
+    return [
+      'w-2',
+      'h-2',
+      'rounded-full',
+      'mr-2',
+      { backgroundColor: props.color },
+    ];
+  }
+  const allowedColors = Object.keys(colorMap);
+  const isPreset = allowedColors.includes(props.color as string);
+  return [
+    'w-2',
+    'h-2',
+    'rounded-full',
+    'mr-2',
+    isPreset ? colorMap[props.color as keyof typeof colorMap].dot : 'bg-gray-500',
+  ];
+});
+</script>
--- a/src/controllers/PrintController.js
+++ b/src/controllers/PrintController.js
--- a/src/css/icons.css
+++ b/src/css/icons.css
@ -75,3 +75,58 @@
    font-weight: 400;
    src: url(./icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
 }
+
+/* Clases para MaterialIcon component */
+.material-symbols-outlined {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: 'liga';
+}
+
+.material-symbols-rounded {
+    font-family: 'Material Symbols Rounded';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: 'liga';
+}
+
+.material-symbols-sharp {
+    font-family: 'Material Symbols Sharp';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: 'liga';
+}
--- a/src/index.js
+++ b/src/index.js
@ -1,3 +1,4 @@
+import Aura from '@primeuix/themes/aura';
 import './css/base.css'

 import axios from 'axios';
@ -13,10 +14,16 @@ import { pagePlugin } from '@Services/Page';
 import { defineApp, reloadApp, view } from '@Services/Page';
 import { apiURL } from '@Services/Api';
 import VueApexCharts from "vue3-apexcharts";
-import VCalendar from 'v-calendar'
+import VCalendar from 'v-calendar';
+import PrimeVue from 'primevue/config';
 import 'v-calendar/style.css';

-import App      from '@Components/App.vue'
+import { definePreset } from '@primeuix/themes';
+import Button from 'primevue/button';
+
+
+
+import App from '@Components/App.vue'
 import Error503 from '@Pages/Errors/503.vue'
 import { hasToken } from './services/Api';

@ -24,9 +31,9 @@ import { hasToken } from './services/Api';
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

 // Elementos globales
-window.axios    = axios;
-window.Lang     = lang;
-window.Notify   = new Notify();
+window.axios = axios;
+window.Lang = lang;
+window.Notify = new Notify();
 window.TwScreen = new TailwindScreen();

 async function boot() {
@ -40,26 +47,44 @@ async function boot() {
        window.Ziggy = routes.data;
        defineApp(appData.data);
        window.route = useRoute();
-        window.view  = view;
-        initRoutes   = true;
+        window.view = view;
+        initRoutes = true;
    } catch (error) {
        window.Notify.error(window.Lang('server.api.noAvailable'));
    }

-    if(initRoutes) {
+    if (initRoutes) {
        // Iniciar permisos
-        if(hasToken()) {
+        if (hasToken()) {
            await bootPermissions();
            await bootRoles();
-        
+
            // Iniciar broadcast
-            if(import.meta.env.VITE_REVERB_ACTIVE === 'true') {
+            if (import.meta.env.VITE_REVERB_ACTIVE === 'true') {
                await import('@Services/Broadcast')
            }
        }
-    
+
        reloadApp();
-    
+
+        const MyPreset = definePreset(Aura, {
+            semantic: {
+                primary: {
+                    50: '{neutral.50}',
+                    100: '{neutral.100}',
+                    200: '{neutral.200}',
+                    300: '{neutral.300}',
+                    400: '{neutral.400}',
+                    500: '{neutral.500}',
+                    600: '{neutral.600}',
+                    700: '{neutral.700}',
+                    800: '{neutral.800}',
+                    900: '{neutral.900}',
+                    950: '{neutral.950}'
+                },
+            }
+        });
+
        createApp(App)
            .use(createPinia())
            .use(i18n)
@ -68,6 +93,11 @@ async function boot() {
            .use(ZiggyVue)
            .use(VCalendar, {})
            .use(VueApexCharts)
+            .use(PrimeVue, {
+                theme: {
+                    preset: MyPreset
+                }
+            })
            .mount('#app');
    } else {
        createApp(Error503)
--- a/src/lang/es.js
+++ b/src/lang/es.js
@ -78,6 +78,19 @@ export default {
        activity: {
            title: 'Historial de acciones',
            description: 'Historial de acciones realizadas por los usuarios en orden cronológico.'
+        },
+        products: {
+            name: 'Productos',
+            title: 'Productos',
+            description: 'Gestión del catálogo de productos',
+            create: {
+                title: 'Crear producto',
+                description: 'Permite crear un nuevo producto en el catálogo con sus clasificaciones y atributos personalizados.'
+            },
+            edit: {
+                title: 'Editar producto',
+                description: 'Actualiza la información del producto, sus clasificaciones y atributos.'
+            }
        }
    },
    app: {
@ -86,6 +99,9 @@ export default {
            light: 'Tema claro'
        }
    },
+    approve: 'Aprobar',
+    assigned_budget: 'Presupuesto asignado',
+    available_budget: 'Presupuesto disponible',
    assistances: {
        create: {
            title: 'Generar asistencia',
@ -133,11 +149,19 @@ export default {
        title:'Historial de cambios',
        description: 'Lista de los cambios realizados al sistema.',
    },
+    certification_name: 'Nombre de certificación',
+    certification_type: 'Tipo de certificación',
    clear: 'Limpiar',
    close:"Cerrar",
+    company: 'Empresa',
    confirm:'Confirmar',
    copyright:'Todos los derechos reservados.',
    contact:'Contacto',
+    cost: 'Costo',
+    courses: {
+        title: 'Cursos',
+        description: 'Gestión de cursos de capacitación'
+    },
    create: 'Crear',
    created: 'Registro creado',
    created_at: 'Fecha creación',
@ -148,8 +172,12 @@ export default {
        show: 'Más detalles',
        import: 'Importación'
    },
+    currency: 'Moneda',
    dashboard: 'Dashboard',
    date: 'Fecha',
+    date_expiration: 'Fecha de expiración',
+    date_obtained: 'Fecha de obtención',
+    department: 'Departamento',
    dates: {
        start: 'Fecha Inicial',
        end: 'Fecha Final'
@ -168,18 +196,23 @@ export default {
        confirm: 'Al presionar ELIMINAR el registro se eliminará permanentemente y no podrá recuperarse.',
        title: 'Eliminar',
    },
+    degreeType: 'Tipo de grado',
    deleted:'Registro eliminado',
    description:'Descripción',
+    duration: 'Duración',
    details:'Detalles',
    disable:'Deshabilitar',
    disabled:'Deshabilitado',
    done:'Hecho.',
    edit:'Editar',
    edited:'Registro creado',
+    active:'Activo',
+    inactive:'Inactivo',
    email:{
        title:'Correo',
        verification:'Verificar correo'
    },
+    exam_date: 'Fecha de examen',
    employees: {
        create: {
            title: 'Crear empleado',
@ -193,6 +226,7 @@ export default {
    enabled:'Habilitado',
    endDate:'Fecha Fin',
    event:'Evento',
+    event_name: 'Nombre del evento',
    files: {
        excel: 'Archivo excel',
        select: 'Seleccionar archivo'
@ -202,6 +236,9 @@ export default {
        home: 'Volver a la pagina de inicio.',
        title:'Ayuda',
    },
+    headquarter: 'Sede',
+    hire_date: 'Fecha de contratación',
+    institution: 'Institución',
    history: {
        title:'Historial de acciones',
        description:'Historial de acciones realizadas por los usuarios en orden cronológico.'
@ -211,11 +248,13 @@ export default {
    icon:'Icono',
    import: 'Importar',
    items: 'Elementos',
+    location: 'Ubicación',
    maternal:'Apellido materno',
    message:'Mensaje',
    menu:'Menú',
    name:'Nombre',
    noRecords:'Sin registros',
+    number: 'Número',
    notification:'Notificación',
    notifications: {
        unreadClosed:'Ocultas',
@ -227,11 +266,24 @@ export default {
        seeAll:'Ver todas',
    },
    omitted:'Omitida',
+    participants_count: 'Cantidad de participantes',
    password:'Contraseña',
    passwordConfirmation:'Confirmar contraseña',
    passwordCurrent:'Contraseña actual',
    passwordReset:'Restaurar contraseña',
    paternal:'Apellido paterno',
+    petty_cash: {
+        title: 'Caja Chica',
+        description: 'Gestión de caja chica para gastos menores'
+    },
+    pettyCashes: {
+        create: {
+            description: 'Crea una nueva caja chica para gestión de gastos menores'
+        },
+        edit: {
+            description: 'Modifica los datos de la caja chica seleccionada'
+        }
+    },
    phone:'Teléfono',
    photo: {
        new: 'Seleccionar una nueva foto',
@ -392,8 +444,31 @@ export default {
    updated_at:'Fecha actualización',
    updateFail:'Error al actualizar',
    unreaded:'No leído',
+    url: 'URL',
    user:'Usuario',
    users:{
+        academic: {
+            create: {
+                certification: {
+                    description: 'Permite agregar nuevas certificaciones profesionales al historial académico del usuario.',
+                    title: 'Crear certificación'
+                },
+                record: {
+                    description: 'Permite agregar nuevos grados académicos al historial del usuario.',
+                    title: 'Crear registro académico'
+                }
+            },
+            edit: {
+                certification: {
+                    description: 'Permite modificar los datos de la certificación profesional seleccionada.',
+                    title: 'Editar certificación'
+                },
+                record: {
+                    description: 'Permite modificar los datos del registro académico seleccionado.',
+                    title: 'Editar registro académico'
+                }
+            }
+        },
        activity: {
            title: 'Actividad del usuario',
            description: 'Historial de acciones realizadas por el usuario.',
@ -405,6 +480,7 @@ export default {
            onError:'Ocurrió un error al crear el usuario'
        },
        deleted:'Usuario eliminado',
+        description: 'Gestión de información general de empleados',
        remove: 'Remover usuario',
        edit: {
            title: 'Editar usuario'
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@ -42,36 +42,31 @@ onMounted(() => {
        <template #leftSidebar>
            <Section name="Principal">
                <Link
-                icon="grid_view"
-                name="Dashboard" 
-                to="admin.dashboard.index"
+                    icon="grid_view"
+                    name="Dashboard" 
+                    to="admin.dashboard.index"
                />
                <DropDown 
                    icon="people"
-                    name="Empleados" 
-                    to="admin.employees.index"
+                    name="Usuarios" 
+                    to="admin.users.index"
                    :collapsed="true"
                >
-                        <Link
-                            icon="school"
-                            name="Historial Académico" 
-                            to="admin.academic.index"
-                        />
-                        <Link
-                            icon="security"
-                            name="Seguridad y Salud" 
-                            to="admin.security.index"
-                        />
-                        <Link
-                            icon="payments"
-                            name="Nómina" 
-                            to="admin.payroll.index"
-                        />
-                        <Link
-                            icon="info"
-                            name="Información Adicional" 
-                            to="admin.additional.index"
-                        />
+                    <Link
+                        icon="school"
+                        name="Historial Académico" 
+                        to="admin.users.academic.index"
+                    />
+                    <Link
+                        icon="security"
+                        name="Seguridad y Salud" 
+                        to="admin.users.security"
+                    />
+                    <Link
+                        icon="info"
+                        name="Información Adicional" 
+                        to="admin.users.additional"
+                    />
                </DropDown>
            </Section>
            <Section name="Vacaciones">
@ -81,6 +76,42 @@ onMounted(() => {
                    to="admin.vacations.index"
                />
            </Section>
+
+            <Section name="Almacén">
+                <Link
+                    icon="grid_view"
+                    name="Almacén" 
+                    to="admin.warehouses.index"
+                />
+                <Link
+                    icon="tag"
+                    name="Clasificaciones de almacenes" 
+                    to="admin.warehouse-classifications.index"
+                />
+                <Link
+                    icon="straighten"
+                    name="Unidades de medida" 
+                    to="admin.units-measure.index"
+                />
+            </Section>
+            <Section name="Comercial">
+                <Link
+                    icon="bookmarks"
+                    name="Clasificaciones Comerciales" 
+                    to="admin.comercial-classifications.index"
+                />
+                <Link
+                    icon="inventory"
+                    name="Productos" 
+                    to="admin.products.index"
+                />
+                <Link
+                    icon="sell"
+                    name="Punto de venta" 
+                    to="admin.pos.index"
+                    />
+            </Section>
+                     
            <Section name="Capacitaciones">
                <DropDown
                    icon="grid_view"
@ -93,11 +124,6 @@ onMounted(() => {
                        name="Solicitud de Cursos" 
                        to="admin.courses.request"
                    />
-                    <Link
-                        icon="grid_view"
-                        name="Asignación de Cursos" 
-                        to="admin.courses.assignamment"
-                    />
                    <Link
                        icon="grid_view"
                        name="Calendario de Cursos" 
@ -112,10 +138,15 @@ onMounted(() => {
                    to="admin.events.index"
                    :collapsed="true"
                >
+                    <Link
+                        icon="grid_view"
+                        name="Cajas Chicas" 
+                        to="admin.events.pettyCashes"
+                    />
                    <Link
                        icon="grid_view"
                        name="Asignación de presupuesto" 
-                        to="admin.events.assignamment"
+                        to="admin.events.pettyCashes.assignamment"
                    />
                    <Link
                        icon="grid_view"
@ -133,12 +164,6 @@ onMounted(() => {
                v-if="hasPermission('users.index')"
                :name="$t('admin.title')"
            >
-                <!-- <Link
-                    v-if="hasPermission('users.index')"
-                    icon="people"
-                    name="users.title" 
-                    to="admin.users.index"
-                /> -->
                <Link
                    v-if="hasPermission('roles.index')"
                    icon="license"
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@ -48,6 +48,11 @@ onMounted(() => {
                    name="Vacaciones" 
                    to="vacations.index"
                />
+                <Link
+                    icon="info"
+                    name="Cursos" 
+                    to="courses.index"
+                />
                <Link
                    icon="person"
                    name="Perfil" 
--- a/src/layouts/CoordinatorLayout.vue
+++ b/src/layouts/CoordinatorLayout.vue
@ -48,6 +48,11 @@ onMounted(() => {
                    name="Vacaciones" 
                    to="vacations.coordinator.index"
                />
+                <Link
+                    icon="info"
+                    name="Solicitud de Cursos" 
+                    to="courses.coordinator.index"
+                />
            </Section>
            <Section
                :name="$t('admin.title')"
--- a/src/pages/Academic/Index.vue
+++ b/src/pages/Academic/Index.vue
@ -1,147 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- Página: Header principal -->
-    <div class="flex items-start justify-between">
-      <div>
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Historial Académico</h1>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de grados académicos y certificaciones profesionales</p>
-      </div>
-
-      <div>
-        <Adding text="Agregar Registro" />
-      </div>
-    </div>
-
-    <!-- Card principal: perfil + secciones -->
-    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-      <!-- Perfil -->
-      <header class="flex items-start gap-4">
-        <div class="flex-shrink-0">
-          <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
-            <!-- icono usuario -->
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="school"
-            />
-          </div>
-        </div>
-
-        <div class="flex-1">
-          <h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">María González López</h2>
-          <p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información académica y certificaciones profesionales</p>
-        </div>
-      </header>
-
-      <!-- Secciones: Grados Académicos -->
-      <div class="mt-6">
-        <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="book"
-            />
-          Grados Académicos
-        </h3>
-
-        <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
-          <!-- Item grado -->
-          <article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-            <div class="flex items-start justify-between">
-              <div>
-                <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Licenciatura en Ingeniería en Sistemas</h4>
-                <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Universidad Nacional Autónoma de México</p>
-                <p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2015</p>
-              </div>
-
-              <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
-                Licenciatura
-              </span>
-            </div>
-          </article>
-
-          <article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-            <div class="flex items-start justify-between">
-              <div>
-                <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Maestría en Ciencias de la Computación</h4>
-                <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Instituto Tecnológico de Monterrey</p>
-                <p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2018</p>
-              </div>
-
-              <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
-                Maestría
-              </span>
-            </div>
-          </article>
-        </div>
-      </div>
-
-      <!-- Secciones: Certificaciones -->
-      <div class="mt-8">
-        <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="license"
-            />
-          Certificaciones
-        </h3>
-
-        <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
-          <!-- Cert vigente -->
-          <article class="rounded-lg border border-gray-100 bg-green-50/40 p-4 relative dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt">
-            <div class="flex items-start justify-between">
-              <div>
-                <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">AWS Certified Solutions Architect</h4>
-                <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Amazon Web Services</p>
-                <p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2023-05-15</p>
-                <p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2026-05-15</p>
-              </div>
-
-              <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt">
-                Vigente
-              </span>
-            </div>
-          </article>
-
-          <!-- Cert vencida -->
-          <article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-            <div class="flex items-start justify-between">
-              <div>
-                <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Certified ScrumMaster</h4>
-                <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Scrum Alliance</p>
-                <p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2022-08-20</p>
-                <p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2024-08-20</p>
-              </div>
-
-              <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt">
-                Vencida
-              </span>
-            </div>
-          </article>
-        </div>
-      </div>
-
-      <!-- Acciones al final de la tarjeta -->
-      <div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
-        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-          <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="add"
-            />
-          Agregar Grado
-        </button>
-
-        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="add"
-            />
-          Agregar Certificación
-        </button>
-      </div>
-    </section>
-  </div>
-</template>
--- a/src/pages/Admin/Departments/Create.vue
+++ b/src/pages/Admin/Departments/Create.vue
@ -0,0 +1,51 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import Input           from '@Holos/Form/Input.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
+import PageHeader      from '@Holos/PageHeader.vue';
+import Form            from './Form.vue'
+
+/** Definidores */
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+    name: '',
+    description: '',
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('create.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    <Form
+        action="create"
+        :form="form"
+        @submit="submit"
+    />
+</template>
--- a/src/pages/Admin/Departments/Edit.vue
+++ b/src/pages/Admin/Departments/Edit.vue
@ -0,0 +1,60 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { viewTo, apiTo , transl } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
+import Form            from './Form.vue'
+
+/** Definiciones */
+const vroute = useRoute();
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+    id: null,
+    name: '',
+    description: '',
+});
+
+const departments = ref([]);
+
+/** Métodos */
+function submit() {
+    form.put(apiTo('update', { user: form.id }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        },
+    })
+}
+
+onMounted(() => {
+    api.get(apiTo('show', { user: vroute.params.id }), {
+        onSuccess: (r) => {
+            form.fill(r.user)
+        }
+    });
+})
+</script>
+
+<template>
+    <PageHeader :title="transl('edit.title')">
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    <Form
+        action="update"
+        :form="form"
+        @submit="submit"
+    />
+</template>
--- a/src/pages/Admin/Departments/Form.vue
+++ b/src/pages/Admin/Departments/Form.vue
@ -0,0 +1,57 @@
+<script setup>
+import { transl } from './Module';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Textarea      from '@Holos/Form/Textarea.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
+    </div>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <Input
+                v-model="form.name"
+                id="name"
+                :onError="form.errors.name"
+                autofocus
+                required
+            />
+            <textarea
+                v-model="form.description"
+                id="description"
+                :onError="form.errors.description"
+                rows="4"
+            />
+            <slot />
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
+                <PrimaryButton
+                    v-text="$t(action)"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </div>
+        </form>
+    </div>
+</template>
--- a/src/pages/Admin/Departments/Index.vue
+++ b/src/pages/Admin/Departments/Index.vue
@ -0,0 +1,100 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useSearcher } from '@Services/Api';
+import { hasPermission } from '@Plugins/RolePermission';
+import { getDate } from '@Controllers/DateController';
+import { can, apiTo, viewTo, transl } from './Module'
+
+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/NewTable.vue';
+import ShowView from './Modals/Show.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
+
+/** Propiedades */
+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,
+    onError: () => models.value = []
+});
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('users.title') }}</h1>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('users.description') }}
+            </p>
+        </div>
+
+        <RouterLink :to="viewTo({ name: 'create' })">
+            <Adding text="Nuevo Empleado" />
+        </RouterLink>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+        <Searcher @search="(x) => searcher.search(x)">
+        </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="pt-2 w-full">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
+            <template #head>
+                <th v-text="$t('name')" />
+                <th class="w-32 text-center" v-text="$t('actions')" />
+            </template>
+
+            <template #body="{ items }">
+                <tr v-for="model in items" class="table-row">
+                    <td>{{ model.name }}</td>
+                    <td>
+                        <div class="table-actions">
+                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
+                                outline />
+                            <RouterLink class="h-fit"
+                                :to="viewTo({ name: 'edit', params: { id: model.id } })">
+                                <IconButton icon="edit" :title="$t('crud.edit')" outline />
+                            </RouterLink>
+                            <IconButton icon="delete" :title="$t('crud.destroy')"
+                                @click="destroyModal.open(model)" outline />
+                        </div>
+                    </td>
+                </tr>
+            </template>
+
+            <template #empty>
+                <td colspan="6" class="py-12 text-center">
+                    <div class="text-gray-500 dark:text-primary-dt/70">
+                        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                        <p class="text-lg font-medium">No se encontraron empleados</p>
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+                    </div>
+                </td>
+            </template>
+        </Table>
+
+        <ShowView ref="showModal" />
+
+        <DestroyView ref="destroyModal" subtitle="last_name"
+            :to="(department) => apiTo('destroy', { department })" @update="searcher.search()" />
+    </div>
+</template>
--- a/src/pages/Admin/Departments/Module.js
+++ b/src/pages/Admin/Departments/Module.js
@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`admin.users.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`users.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`users.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
--- a/src/pages/Admin/Events/Index.vue
+++ b/src/pages/Admin/Events/Index.vue
@ -1,20 +1,16 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
+import { api } from '@Services/Api';
+import { apiTo } from './Module';
 import GoogleIcon from '@Shared/GoogleIcon.vue';
 import VueApexCharts from 'vue3-apexcharts';

 // Datos del dashboard
 const dashboardData = ref({
-  annualBudget: 50000,
-  justifiedExpenses: 32500,
-  remainingBalance: 17500,
-  expenseDistribution: [
-    { name: 'Catering', value: 45, color: '#3B82F6' },
-    { name: 'Marketing', value: 25, color: '#EF4444' },
-    { name: 'Viáticos', value: 15, color: '#F97316' },
-    { name: 'Otros', value: 10, color: '#6B7280' },
-    { name: 'Renta de Equipo', value: 5, color: '#10B981' }
-  ]
+  totalBudget: 0,
+  justifiedExpenses: 0,
+  remainingBalance: 0,
+  expenseDistribution: []
 });

 // Configuración del gráfico de pie
@ -85,15 +81,6 @@ const chartSeries = computed(() => {
  return dashboardData.value.expenseDistribution.map(item => item.value);
 });

-// Función para formatear moneda
-const formatCurrency = (amount) => {
-  return new Intl.NumberFormat('es-MX', {
-    style: 'currency',
-    currency: 'USD',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0
-  }).format(amount);
-};

 // Función para calcular porcentaje
 const calculatePercentage = (value, total) => {
@ -102,17 +89,20 @@ const calculatePercentage = (value, total) => {

 // Computed para el porcentaje de gastos
 const expensesPercentage = computed(() => {
-  return calculatePercentage(dashboardData.value.justifiedExpenses, dashboardData.value.annualBudget);
+  return calculatePercentage(dashboardData.value.justifiedExpenses, dashboardData.value.totalBudget);
 });

 // Computed para el porcentaje de saldo restante
 const remainingPercentage = computed(() => {
-  return calculatePercentage(dashboardData.value.remainingBalance, dashboardData.value.annualBudget);
+  return calculatePercentage(dashboardData.value.remainingBalance, dashboardData.value.totalBudget);
 });

 onMounted(() => {
-  // Aquí podrías cargar datos reales desde tu API
-  console.log('Dashboard de eventos cargado');
+  api.get(apiTo('dashboard'), {
+    onSuccess: (r) => {
+      dashboardData.value = r.dashboard;
+    }
+  });
 });
 </script>

@ -133,9 +123,9 @@ onMounted(() => {
      <div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
        <div class="flex items-center justify-between">
          <div>
-            <h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Presupuesto Anual</h3>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Total</h3>
            <p class="mt-2 text-3xl font-bold text-blue-600 dark:text-blue-400">
-              {{ formatCurrency(dashboardData.annualBudget) }}
+              ${{ dashboardData.totalBudget }}
            </p>
          </div>
          <div class="flex-shrink-0">
@ -152,7 +142,7 @@ onMounted(() => {
          <div>
            <h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Gastos Justificados</h3>
            <p class="mt-2 text-3xl font-bold text-green-600 dark:text-green-400">
-              {{ formatCurrency(dashboardData.justifiedExpenses) }}
+              ${{ dashboardData.justifiedExpenses }}
            </p>
            <p class="mt-1 text-xs text-gray-500 dark:text-primary-dt/50">
              {{ expensesPercentage }}% del presupuesto
@ -172,7 +162,7 @@ onMounted(() => {
          <div>
            <h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Saldo Restante</h3>
            <p class="mt-2 text-3xl font-bold text-amber-600 dark:text-amber-400">
-              {{ formatCurrency(dashboardData.remainingBalance) }}
+              ${{ dashboardData.remainingBalance }}
            </p>
            <p class="mt-1 text-xs text-gray-500 dark:text-primary-dt/50">
              {{ remainingPercentage }}% del presupuesto
@ -194,10 +184,10 @@ onMounted(() => {
      <!-- Título de la sección -->
      <div class="mb-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">
-          Distribución de Gastos por Concepto
+          Gastos por Caja Chica
        </h2>
        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">
-          Porcentaje de gastos por categoría
+          Distribución de gastos por caja chica
        </p>
      </div>

@ -218,7 +208,7 @@ onMounted(() => {
        <div class="lg:w-80">
          <div class="space-y-3">
            <h3 class="text-lg font-medium text-gray-800 dark:text-primary-dt mb-4">
-              Detalle por Categoría
+              Detalle por Caja Chica
            </h3>
            
            <div
@ -240,7 +230,7 @@ onMounted(() => {
                  {{ item.value }}%
                </div>
                <div class="text-xs text-gray-500 dark:text-primary-dt/50">
-                  {{ formatCurrency((item.value / 100) * dashboardData.justifiedExpenses) }}
+                  ${{ ((item.value / 100) * dashboardData.justifiedExpenses).toFixed(2) }}
                </div>
              </div>
            </div>
@ -257,7 +247,7 @@ onMounted(() => {
              {{ dashboardData.expenseDistribution.length }}
            </div>
            <div class="text-sm text-gray-500 dark:text-primary-dt/70">
-              Categorías
+              Cajas Chicas
            </div>
          </div>
          <div class="text-center">
--- a/src/pages/Admin/Events/Justification.vue
+++ b/src/pages/Admin/Events/Justification.vue
@ -0,0 +1,258 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import PageHeader from '@Holos/PageHeader.vue';
+import IconButton from '@Holos/Button/Icon.vue';
+import Input from '@Holos/Form/Input.vue';
+import Selectable from '@Holos/Form/Selectable.vue';
+import Textarea from '@Holos/Form/Textarea.vue';
+import PrimaryButton from '@Holos/Button/Primary.vue';
+
+/** Definiciones */
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+  event_name: '',
+  location: '',
+  description: '',
+  participants_count: '',
+  cost: '',
+  observations: '',
+  petty_cash_id: '',
+  files: null,
+});
+
+const pettyCashes = ref([]);
+const availableBudget = ref('');
+
+// Watch para actualizar el presupuesto disponible cuando cambie la caja chica
+watch(() => form.petty_cash_id, (newValue) => {
+  availableBudget.value = newValue?.available_budget ?? 0;
+}, { deep: true });
+
+
+// Función para manejar la subida de archivos
+const handleFileUpload = (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    if (file.type === 'application/pdf') {
+      form.files = file;
+    } else {
+      Notify.error('Por favor, selecciona un archivo PDF válido');
+      event.target.value = '';
+    }
+  }
+};
+
+// Función para eliminar archivo
+const removeFile = () => {
+  form.files = null;
+  const fileInput = document.getElementById('justification-file');
+  if (fileInput) {
+    fileInput.value = '';
+  }
+};
+
+// Función para enviar justificación
+function submit() {
+  form.transform(data => ({
+    ...data,
+    petty_cash_id: data.petty_cash_id?.id
+  })).post(apiTo('store-expense-justification'), {
+    onSuccess: () => {
+      Notify.success('Justificación enviada correctamente');
+      router.push(viewTo({ name: 'reports' }));
+    }
+  });
+}
+
+/** Ciclos */
+onMounted(() => {
+  api.catalog({
+    'pettyCash:all': null
+  }, {
+    onSuccess: (r) => pettyCashes.value = r['pettyCash:all'] ?? []
+  });
+});
+</script>
+
+<template>
+  <PageHeader
+    title="Justificación de Gastos"
+  >
+    <RouterLink :to="viewTo({ name: 'index' })">
+      <IconButton
+        class="text-white"
+        icon="arrow_back"
+        :title="$t('return')"
+        filled
+      />
+    </RouterLink>
+  </PageHeader>
+  
+  <div class="w-full pb-2">
+    <p class="text-justify text-sm">Documenta y justifica los gastos realizados en eventos</p>
+  </div>
+
+  <!-- Card principal -->
+  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+    
+    <!-- Formulario -->
+    <form @submit.prevent="submit" class="space-y-6">
+      
+      <!-- Detalles del Evento -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        
+        <Input
+          v-model="form.event_name"
+          id="event_name"
+          title="Nombre del Evento"
+          :onError="form.errors.event_name"
+          required
+        />
+
+        <Input
+          v-model="form.location"
+          id="location"
+          title="Lugar"
+          :onError="form.errors.location"
+          required
+        />
+
+      </div>
+
+      <Textarea
+        v-model="form.description"
+        id="description"
+        title="Descripción y Detalles"
+        :onError="form.errors.description"
+        required
+      />
+
+      <!-- Detalles Financieros y Participantes -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        
+        <Input
+          v-model.number="form.participants_count"
+          id="participants_count"
+          title="Número de Participantes"
+          type="number"
+          min="1"
+          :onError="form.errors.participants_count"
+        />
+
+        <Input
+          v-model.number="form.cost"
+          id="cost"
+          title="Costo"
+          type="number"
+          min="0"
+          step="0.01"
+          :onError="form.errors.cost"
+        />
+
+      </div>
+
+      <!-- Caja Chica y Presupuesto Disponible -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        
+        <Selectable
+          v-model="form.petty_cash_id"
+          id="petty_cash_id"
+          title="Caja Chica"
+          :onError="form.errors.petty_cash_id"
+          :options="pettyCashes"
+          required
+        />
+
+        <Input
+          v-model="availableBudget"
+          type="number"
+          id="available_budget"
+          title="Presupuesto Disponible"
+          disabled
+        />
+
+      </div>
+
+      <!-- Observaciones -->
+      <Textarea
+        v-model="form.observations"
+        id="observations"
+        title="Observaciones"
+        :onError="form.errors.observations"
+      />
+
+        <!-- Subida de archivo -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+            Subir justificante (PDF) *
+          </label>
+          
+          <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-[#7c3aed] transition-colors dark:border-primary/20 dark:hover:border-[#7c3aed]">
+            <div class="space-y-1 text-center">
+              <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+              <div class="flex text-sm text-gray-600 dark:text-primary-dt/70">
+                <label for="justification-file" class="relative cursor-pointer bg-white rounded-md font-medium text-[#7c3aed] hover:text-[#6d28d9] focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-[#7c3aed]">
+                  <span>Sube un archivo</span>
+                  <input
+                    id="justification-file"
+                    name="justification-file"
+                    type="file"
+                    accept=".pdf"
+                    class="sr-only"
+                    @change="handleFileUpload"
+                  >
+                </label>
+                <p class="pl-1">o arrastra y suelta</p>
+              </div>
+              <p class="text-xs text-gray-500 dark:text-primary-dt/50">
+                PDF hasta 10MB
+              </p>
+            </div>
+          </div>
+
+          <!-- Archivo seleccionado -->
+          <div v-if="form.files" class="mt-3 p-3 bg-green-50 border border-green-200 rounded-lg dark:bg-green-900/20 dark:border-green-800">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <GoogleIcon class="text-green-600 dark:text-green-400 text-xl" name="picture_as_pdf" />
+                <span class="text-sm font-medium text-green-800 dark:text-green-300">
+                  {{ form.files.name }}
+                </span>
+              </div>
+              <button
+                @click="removeFile"
+                type="button"
+                class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+      <!-- Botón de envío -->
+      <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
+        <PrimaryButton
+          type="submit"
+          :processing="form.processing"
+        >
+          <GoogleIcon class="text-white text-xl mr-2" name="send" />
+          Enviar Justificación
+        </PrimaryButton>
+      </div>
+
+    </form>
+
+  </section>
+</template>
--- a/src/pages/Admin/Events/Modals/Show.vue
+++ b/src/pages/Admin/Events/Modals/Show.vue
@ -0,0 +1,109 @@
+<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 */
+const emit = defineEmits([
+    'close', 
+    'reload'
+]);
+
+/** Propiedades */
+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
+        ref="modalRef"
+        @close="close"
+    >
+        <div v-if="model">
+            <Header
+                :title="model.event_name"
+                :subtitle="model.location"
+            >
+                <div class="flex w-full flex-col">
+                    <div class="flex w-full justify-center items-center">
+                        <GoogleIcon 
+                            class="text-6xl text-primary"
+                            name="event"
+                        />
+                    </div>
+                </div>
+            </Header>
+            <div class="flex w-full p-4">
+                <GoogleIcon 
+                    class="text-xl text-success"
+                    name="event"
+                />
+                <div class="pl-3">
+                    <p class="font-bold text-lg leading-none pb-2">
+                        {{ $t('details') }}
+                    </p>
+                    <p>
+                        <b>{{ $t('event_name') }}: </b>
+                        {{ model.event_name }}
+                    </p>
+                    <p>
+                        <b>{{ $t('location') }}: </b>
+                        {{ model.location }}
+                    </p>
+                    <p v-if="model.description">
+                        <b>{{ $t('description') }}: </b>
+                        {{ model.description }}
+                    </p>
+                    <p>
+                        <b>{{ $t('participants_count') }}: </b>
+                        {{ model.participants_count ?? '-' }}
+                    </p>
+                    <p>
+                        <b>{{ $t('cost') }}: </b>
+                        ${{ model.cost ?? '0.00' }}
+                    </p>
+                    <p v-if="model.observations">
+                        <b>{{ $t('observations') }}: </b>
+                        {{ model.observations }}
+                    </p>
+                    <p>
+                        <b>{{ $t('company') }}: </b>
+                        {{ model.company?.name ?? '-' }}
+                    </p>
+                    <p>
+                        <b>{{ $t('petty_cash.title') }}: </b>
+                        {{ model.petty_cash?.name ?? '-' }}
+                    </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/Events/Module.js
+++ b/src/pages/Admin/Events/Module.js
@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`admin.events.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.events.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`events.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`events.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
--- a/src/pages/Admin/Events/PettyCashes/Assignamment.vue
+++ b/src/pages/Admin/Events/PettyCashes/Assignamment.vue
@ -0,0 +1,210 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import PageHeader from '@Holos/PageHeader.vue';
+import IconButton from '@Holos/Button/Icon.vue';
+import Input from '@Holos/Form/Input.vue';
+import Selectable from '@Holos/Form/Selectable.vue';
+import PrimaryButton from '@Holos/Button/Primary.vue';
+
+/** Definiciones */
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+  petty_cash_id: '',
+  budget_items: [
+    {
+      id: 1,
+      concept: '',
+      amount: ''
+    }
+  ]
+});
+
+const pettyCashes = ref([]);
+let nextId = 2;
+
+// Computed para calcular el total
+const totalBudget = computed(() => {
+  return form.budget_items.reduce((total, item) => {
+    return total + (parseFloat(item.amount) || 0);
+  }, 0);
+});
+
+// Función para agregar nueva fila
+const addBudgetItem = () => {
+  form.budget_items.push({
+    id: nextId++,
+    concept: '',
+    amount: 0
+  });
+};
+
+// Función para eliminar fila
+const removeBudgetItem = (id) => {
+  if (form.budget_items.length > 1) {
+    form.budget_items = form.budget_items.filter(item => item.id !== id);
+  }
+};
+
+// Función para guardar presupuesto
+function submit() {
+  // Filtrar elementos vacíos
+  const validItems = form.budget_items.filter(item => 
+    item.concept.trim() !== '' && item.amount > 0
+  );
+
+  if (validItems.length === 0) {
+    Notify.error('Por favor, agrega al menos un elemento al presupuesto');
+    return;
+  }
+
+  form.transform(data => ({
+    ...data,
+    petty_cash_id: form.petty_cash_id?.id,
+    budget_items: validItems
+  })).post(apiTo('store-budget', { pettyCash: form.petty_cash_id }), {
+    onSuccess: () => {
+      Notify.success('Presupuesto guardado correctamente');
+      router.push(viewTo({ name: 'index' }));
+    }
+  });
+}
+
+
+/** Ciclos */
+onMounted(() => {
+  api.catalog({
+    'pettyCash:all': null
+  }, {
+    onSuccess: (r) => pettyCashes.value = r['pettyCash:all'] ?? []
+  });
+});
+</script>
+
+<template>
+  <PageHeader
+    title="Asignación de Presupuesto"
+  >
+    <RouterLink :to="viewTo({ name: 'index' })">
+      <IconButton
+        class="text-white"
+        icon="arrow_back"
+        :title="$t('return')"
+        filled
+      />
+    </RouterLink>
+  </PageHeader>
+  
+  <div class="w-full pb-2">
+    <p class="text-justify text-sm">Gestiona y asigna el presupuesto para una caja chica</p>
+  </div>
+
+  <!-- Card principal -->
+  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+    
+    <!-- Formulario de presupuesto -->
+    <form @submit.prevent="submit" class="space-y-6">
+      
+      <!-- Campos principales -->
+      <div class="grid grid-cols-1 gap-6">
+        <Selectable
+          v-model="form.petty_cash_id"
+          id="petty_cash_id"
+          title="Caja Chica"
+          :onError="form.errors.petty_cash_id"
+          :options="pettyCashes"
+          required
+        />
+      </div>
+      
+      <!-- Filas de presupuesto -->
+      <div class="space-y-4">
+        <h3 class="text-lg font-medium text-gray-900 dark:text-primary-dt">Elementos del Presupuesto</h3>
+        <div
+          v-for="(item, index) in form.budget_items"
+          :key="item.id"
+          class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end"
+        >
+          
+          <!-- Campo Concepto -->
+          <div class="md:col-span-5">
+            <Input
+              v-model="item.concept"
+              :id="`concept_${item.id}`"
+              title="Concepto"
+            />
+          </div>
+
+          <!-- Campo Monto -->
+          <div class="md:col-span-4">
+            <Input
+              v-model.number="item.amount"
+              :id="`amount_${item.id}`"
+              title="Monto"
+              type="number"
+              min="0"
+              step="0.01"
+            />
+          </div>
+
+          <!-- Botón de eliminar -->
+          <div class="md:col-span-3 flex justify-end">
+            <IconButton
+              v-if="form.budget_items.length > 1"
+              @click="removeBudgetItem(item.id)"
+              icon="delete"
+              class="text-red-500 hover:text-red-700"
+              :title="$t('delete')"
+            />
+          </div>
+
+        </div>
+      </div>
+
+      <!-- Resumen del presupuesto -->
+      <div class="mt-8 p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="account_balance_wallet" />
+            <span class="text-lg font-medium text-gray-800 dark:text-primary-dt">Total del Presupuesto:</span>
+          </div>
+          <div class="text-2xl font-bold text-[#2563eb] dark:text-primary-dt">
+            ${{ totalBudget.toFixed(2) }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Botones de acción -->
+      <div class="flex items-center justify-between pt-6 border-t border-gray-100 dark:border-primary/20">
+        
+        <!-- Botón Agregar más -->
+        <IconButton
+          @click="addBudgetItem"
+          icon="add"
+          class="bg-green-600 hover:bg-green-700 text-white"
+          :title="$t('add')"
+        >
+          + Agregar más
+        </IconButton>
+
+        <!-- Botón Guardar Presupuesto -->
+        <PrimaryButton
+          type="submit"
+          :processing="form.processing"
+        >
+          <GoogleIcon class="text-white text-xl mr-2" name="save" />
+          Guardar Presupuesto
+        </PrimaryButton>
+
+      </div>
+
+    </form>
+
+  </section>
+</template>
--- a/src/pages/Admin/Events/PettyCashes/Create.vue
+++ b/src/pages/Admin/Events/PettyCashes/Create.vue
@ -0,0 +1,49 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo, transl } from './Module';
+
+import PageHeader from '@Holos/PageHeader.vue';
+import IconButton from '@Holos/Button/Icon.vue';
+import Form from './Form.vue';
+
+/** Definiciones */
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+  name: '',
+  description: '',
+});
+
+/** Métodos */
+function submit() {
+  form.post(apiTo('store'), {
+    onSuccess: () => {
+      Notify.success(Lang('register.create.onSuccess'))
+      router.push(viewTo({ name: 'index' }));
+    }
+  });
+}
+</script>
+
+<template>
+  <PageHeader
+    :title="transl('create.title')"
+  >
+    <RouterLink :to="viewTo({ name: 'index' })">
+      <IconButton
+        class="text-white"
+        icon="arrow_back"
+        :title="$t('return')"
+        filled
+      />
+    </RouterLink>
+  </PageHeader>
+  <Form
+    action="create"
+    :form="form"
+    @submit="submit"
+  />
+</template>
--- a/src/pages/Admin/Events/PettyCashes/Edit.vue
+++ b/src/pages/Admin/Events/PettyCashes/Edit.vue
@ -0,0 +1,57 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { viewTo, apiTo, transl } from './Module';
+
+import IconButton from '@Holos/Button/Icon.vue'
+import PageHeader from '@Holos/PageHeader.vue';
+import Form from './Form.vue'
+
+/** Definiciones */
+const vroute = useRoute();
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+    id: null,
+    name: '',
+    description: '',
+});
+
+/** Métodos */
+function submit() {
+    form.put(apiTo('update', { petty_cash: form.id }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        },
+    })
+}
+
+onMounted(() => {
+    api.get(apiTo('show', { petty_cash: vroute.params.id }), {
+        onSuccess: (r) => {
+            form.fill(r.petty_cash)
+        }
+    });
+})
+</script>
+
+<template>
+    <PageHeader :title="transl('edit.title')">
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    <Form
+        action="edit"
+        :form="form"
+        @submit="submit"
+    />
+</template>
--- a/src/pages/Admin/Events/PettyCashes/Form.vue
+++ b/src/pages/Admin/Events/PettyCashes/Form.vue
@ -0,0 +1,63 @@
+<script setup>
+import { transl } from './Module';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input from '@Holos/Form/Input.vue';
+import Textarea from '@Holos/Form/Textarea.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object,
+    companies: Array
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
+    </div>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="space-y-6">
+            
+            <!-- Campos del formulario -->
+            <Input
+                v-model="form.name"
+                id="name"
+                title="name"
+                :onError="form.errors.name"
+                required
+            />
+            
+            <Textarea
+                v-model="form.description"
+                id="description"
+                title="description"
+                :onError="form.errors.description"
+            />
+
+            <!-- Botón de Enviar -->
+            <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
+                <PrimaryButton
+                    v-text="$t(action)"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                    type="submit"
+                />
+            </div>
+        </form>
+    </div>
+</template>
--- a/src/pages/Admin/Events/PettyCashes/Index.vue
+++ b/src/pages/Admin/Events/PettyCashes/Index.vue
@ -0,0 +1,104 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useSearcher } from '@Services/Api';
+import { hasPermission } from '@Plugins/RolePermission';
+import { getDate } from '@Controllers/DateController';
+import { can, apiTo, viewTo, transl } from './Module'
+
+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/NewTable.vue';
+import ShowView from './Modals/Show.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
+
+/** Propiedades */
+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,
+    onError: () => models.value = []
+});
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('petty_cash.title') }}</h1>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('petty_cash.description') }}
+            </p>
+        </div>
+
+        <RouterLink :to="viewTo({ name: 'create' })">
+            <Adding text="Nueva Caja Chica" />
+        </RouterLink>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+        <Searcher @search="(x) => searcher.search(x)">
+        </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="pt-2 w-full">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
+            <template #head>
+                <th v-text="$t('name')" />
+                <th v-text="$t('description')" />
+                <th v-text="$t('available_budget')" />
+                <th class="w-32 text-center" v-text="$t('actions')" />
+            </template>
+
+            <template #body="{ items }">
+                <tr v-for="model in items" class="table-row">
+                    <td>{{ model.name }}</td>
+                    <td>{{ model.description ?? '-' }}</td>
+                    <td>${{ model.available_budget ?? 0 }}</td>
+                    <td>
+                        <div class="table-actions">
+                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
+                                outline />
+                            <RouterLink class="h-fit"
+                                :to="viewTo({ name: 'edit', params: { id: model.id } })">
+                                <IconButton icon="edit" :title="$t('crud.edit')" outline />
+                            </RouterLink>
+                            <IconButton icon="delete" :title="$t('crud.destroy')"
+                                @click="destroyModal.open(model)" outline />
+                        </div>
+                    </td>
+                </tr>
+            </template>
+
+            <template #empty>
+                <td colspan="5" class="py-12 text-center">
+                    <div class="text-gray-500 dark:text-primary-dt/70">
+                        <GoogleIcon name="account_balance_wallet" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                        <p class="text-lg font-medium">No se encontraron cajas chicas</p>
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+                    </div>
+                </td>
+            </template>
+        </Table>
+
+        <ShowView ref="showModal" />
+
+        <DestroyView ref="destroyModal" subtitle="name"
+            :to="(petty_cash) => apiTo('destroy', { petty_cash })" @update="searcher.search()" />
+    </div>
+</template>
--- a/src/pages/Admin/Events/PettyCashes/Modals/Show.vue
+++ b/src/pages/Admin/Events/PettyCashes/Modals/Show.vue
@ -0,0 +1,80 @@
+<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 */
+const emit = defineEmits([
+    'close', 
+    'reload'
+]);
+
+/** Propiedades */
+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
+        ref="modalRef"
+        @close="close"
+    >
+        <div v-if="model">
+            <Header
+                :title="model.name"
+                :subtitle="model.description"
+            />
+            <div class="flex w-full p-4">
+                <GoogleIcon 
+                    class="text-xl text-success"
+                    name="account_balance_wallet"
+                />
+                <div class="pl-3">
+                    <p class="font-bold text-lg leading-none pb-2">
+                        {{ $t('details') }}
+                    </p>
+                    <p>
+                        <b>{{ $t('name') }}: </b>
+                        {{ model.name }}
+                    </p>
+                    <p>
+                        <b>{{ $t('description') }}: </b>
+                        {{ model.description }}
+                    </p>
+                    <p>
+                        <b>{{ $t('available_budget') }}: </b>
+                        ${{ model.available_budget ?? 0 }}
+                    </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/Events/PettyCashes/Module.js
+++ b/src/pages/Admin/Events/PettyCashes/Module.js
@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`admin.petty-cashes.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.events.pettyCashes.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`pettyCashes.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`pettyCashes.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
--- a/src/pages/Admin/Events/Reports.vue
+++ b/src/pages/Admin/Events/Reports.vue
@ -0,0 +1,102 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useSearcher } from '@Services/Api';
+import { hasPermission } from '@Plugins/RolePermission';
+import { getDate } from '@Controllers/DateController';
+import { can, apiTo, viewTo, transl } from './Module'
+
+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/NewTable.vue';
+import ShowView from './Modals/Show.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
+
+/** Propiedades */
+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,
+    onError: () => models.value = []
+});
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('reports.title') }}</h1>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('reports.description') }}
+            </p>
+        </div>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+        <Searcher @search="(x) => searcher.search(x)">
+        </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="pt-2 w-full">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
+            <template #head>
+                <th v-text="$t('created_at')" />
+                <th v-text="$t('event_name')" />
+                <th v-text="$t('cost')" />
+                <th v-text="$t('petty_cash.title')" />
+                <th class="w-32 text-center" v-text="$t('actions')" />
+            </template>
+
+            <template #body="{ items }">
+                <tr v-for="model in items" class="table-row">
+                    <td>{{ model.created_at ? getDate(model.created_at) : '-' }}</td>
+                    <td>{{ model.event_name }}</td>
+                    <td>
+                        <div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
+                            ${{ model.cost }}
+                        </div>
+                    </td>
+                    <td>{{ model.petty_cash?.name }}</td>
+                    <td>
+                        <div class="table-actions">
+                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
+                                outline />
+                            <IconButton icon="delete" :title="$t('crud.destroy')"
+                                @click="destroyModal.open(model)" outline />
+                        </div>
+                    </td>
+                </tr>
+            </template>
+
+            <template #empty>
+                <td colspan="4" class="py-12 text-center">
+                    <div class="text-gray-500 dark:text-primary-dt/70">
+                        <GoogleIcon name="receipt_long" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                        <p class="text-lg font-medium">No se encontraron justificaciones</p>
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+                    </div>
+                </td>
+            </template>
+        </Table>
+
+        <ShowView ref="showModal" />
+
+        <DestroyView ref="destroyModal" subtitle="event_name"
+            :to="(expenseJustification) => apiTo('destroy-expense-justification', { expenseJustification })" @update="searcher.search()" />
+    </div>
+</template>
--- a/src/pages/Admin/Users/Academic/CreateCertification.vue
+++ b/src/pages/Admin/Users/Academic/CreateCertification.vue
@ -0,0 +1,58 @@
+<script setup>
+import { useRouter, useRoute } from 'vue-router';
+import { useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import FormCertification from './FormCertification.vue';
+
+/** Definidores */
+const router = useRouter();
+const route = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    name: '',
+    description: '',
+    institution: '',
+    date_obtained: '',
+    date_expiration: '',
+    number: '',
+    user_id: route.params.id || '',
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store-certificate'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('create.certification.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl('create.certification.description')" />
+    </div>
+    
+    <FormCertification
+        :form="form"
+        @submit="submit"
+    />
+</template>
--- a/src/pages/Admin/Users/Academic/CreateRecord.vue
+++ b/src/pages/Admin/Users/Academic/CreateRecord.vue
@ -0,0 +1,82 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
+import FormRecord      from './FormRecord.vue';
+
+/** Definidores */
+const router = useRouter();
+const route = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    title: '',
+    institution: '',
+    date_obtained: '',
+    degree_type_ek: '',
+    user_id: route.params.id || '',
+    // file_path: null,
+});
+
+const degreeTypes = ref([]);
+
+/** Métodos */
+function submit() {
+    form.transform(data => ({
+        ...data,
+        degree_type_ek: form.degree_type_ek?.id
+    })).post(apiTo('store-record'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.catalog({
+            'degreeType:all': null,
+        },
+        {
+           onSuccess: (r) => {
+            degreeTypes.value = r['degreeType:all'] ?? [];
+        } 
+    });
+})
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('create.record.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl('create.record.description')" />
+    </div>
+    <FormRecord
+        :degreeTypes="degreeTypes"
+        :form="form"
+        @submit="submit"
+    >
+        <Selectable
+            v-model="form.degree_type_ek"
+            title="degreeType"
+            :options="degreeTypes"
+        />
+    </FormRecord>
+</template>
--- a/src/pages/Admin/Users/Academic/EditCertification.vue
+++ b/src/pages/Admin/Users/Academic/EditCertification.vue
@ -0,0 +1,75 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import FormCertification from './FormCertification.vue';
+
+/** Definidores */
+const router = useRouter();
+const vroute = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    name: '',
+    description: '',
+    institution: '',
+    date_obtained: '',
+    date_expiration: '',
+    number: '',
+    user_id: vroute.params.id || '',
+});
+
+/** Métodos */
+function submit() {
+    form.put(apiTo('update-certificate', { certificate: vroute.params.certification }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('show-certificate', { certificate: vroute.params.certification }), {
+        onSuccess: (r) => {
+            form.fill(r.certificate)
+            if (r.certificate.date_obtained) {
+                form.date_obtained = new Date(r.certificate.date_obtained).toISOString().split('T')[0]
+            }
+            if (r.certificate.date_expiration) {
+                form.date_expiration = new Date(r.certificate.date_expiration).toISOString().split('T')[0]
+            }
+        }
+    });
+})
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('edit.certification.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl('edit.certification.description')" />
+    </div>
+    <FormCertification
+        action="update"
+        :form="form"
+        @submit="submit"
+    />
+</template>
--- a/src/pages/Admin/Users/Academic/EditRecord.vue
+++ b/src/pages/Admin/Users/Academic/EditRecord.vue
@ -0,0 +1,97 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
+import FormRecord      from './FormRecord.vue';
+
+/** Definidores */
+const router = useRouter();
+const vroute = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    title: '',
+    institution: '',
+    date_obtained: '',
+    degree_type_ek: '',
+    user_id: vroute.params.id || '',
+    // file_path: null,
+});
+
+const degreeTypes = ref([]);
+
+/** Métodos */
+function submit() {
+    form.transform(data => ({
+        ...data,
+        degree_type_ek: form.degree_type_ek?.id
+    })).put(apiTo('update-record', { academicRecord: vroute.params.record }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+
+function fillForm() {
+    api.get(apiTo('show-record', { academicRecord: vroute.params.record }), {
+        onSuccess: (r) => {
+            form.fill(r.academic_record)
+            form.degree_type_ek = degreeTypes.value.find(type => type.name == form.degree_type_ek)
+            if (r.academic_record.date_obtained) {
+                form.date_obtained = new Date(r.academic_record.date_obtained).toISOString().split('T')[0]
+            }
+        }
+    });
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.catalog({
+            'degreeType:all': null,
+        },
+        {
+           onSuccess: (r) => {
+            degreeTypes.value = r['degreeType:all'] ?? [];
+            // De esta manera se puede rellenar el form con el degree_type_ek del catalogo
+            fillForm();
+        } 
+    });
+})
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('edit.record.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl('edit.record.description')" />
+    </div>
+    <FormRecord
+        :degreeTypes="degreeTypes"
+        :form="form"
+        @submit="submit"
+    >
+        <Selectable
+            action="update"
+            v-model="form.degree_type_ek"
+            title="degreeType"
+            :options="degreeTypes"
+        />
+    </FormRecord>
+</template>
--- a/src/pages/Admin/Users/Academic/FormCertification.vue
+++ b/src/pages/Admin/Users/Academic/FormCertification.vue
@ -0,0 +1,76 @@
+<script setup>
+import PrimaryButton   from '@Holos/Button/Primary.vue';
+import Input           from '@Holos/Form/Input.vue';
+import Textarea        from '@Holos/Form/Textarea.vue';
+
+const emit = defineEmits([
+    'submit'
+])
+
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object
+})
+
+const submit = () => {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <Input
+                v-model="form.name"
+                id="name"
+                :onError="form.errors.name"
+                autofocus
+                required
+            />
+            <Input
+                v-model="form.institution"
+                id="institution"
+                :onError="form.errors.institution"
+                required
+            />
+            <Input
+                v-model="form.number"
+                id="number"
+                :onError="form.errors.number"
+                required
+            />
+            <Input
+                v-model="form.date_obtained"
+                id="date_obtained"
+                :onError="form.errors.date_obtained"
+                type="date"
+                required
+            />
+            <Input
+                v-model="form.date_expiration"
+                id="date_expiration"
+                :onError="form.errors.date_expiration"
+                type="date"
+            />
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4">
+                <Textarea
+                    v-model="form.description"
+                    id="description"
+                    :onError="form.errors.description"
+                    rows="4"
+                />
+            </div>
+            
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
+                <PrimaryButton
+                    v-text="$t('create')"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </div>
+        </form>
+    </div>
+</template>
--- a/src/pages/Admin/Users/Academic/FormRecord.vue
+++ b/src/pages/Admin/Users/Academic/FormRecord.vue
@ -0,0 +1,64 @@
+<script setup>
+import PrimaryButton   from '@Holos/Button/Primary.vue';
+import Input           from '@Holos/Form/Input.vue';
+import SingleFile      from '@Holos/Form/SingleFile.vue';
+
+const emit = defineEmits([
+    'submit'
+])
+
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object
+})
+
+const submit = () => {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <Input
+                v-model="form.title"
+                id="title"
+                :onError="form.errors.title"
+                autofocus
+                required
+            />
+            <Input
+                v-model="form.institution"
+                id="institution"
+                :onError="form.errors.institution"
+                required
+            />
+            <Input
+                v-model="form.date_obtained"
+                id="date_obtained"
+                :onError="form.errors.date_obtained"
+                type="date"
+                required
+            />
+            <!-- <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4">
+                <SingleFile
+                    v-model="form.file_path"
+                    title="Archivo"
+                    accept="application/pdf,image/png,image/jpeg"
+                />
+            </div> -->
+            <slot />
+            
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
+                <PrimaryButton
+                    v-text="$t('create')"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </div>
+        </form>
+    </div>
+</template>
--- a/src/pages/Admin/Users/Academic/Index.vue
+++ b/src/pages/Admin/Users/Academic/Index.vue
@ -0,0 +1,151 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useSearcher } from '@Services/Api';
+import { getDate } from '@Controllers/DateController';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+import AcademicRecords from '@Holos/Card/AcademicRecords.vue';
+import Certifications from '@Holos/Card/Certifications.vue';
+import DestroyView from '@Holos/Modal/Template/Destroy.vue';
+
+/** Propiedades */
+const models = ref([]);
+
+/** Definidores */
+const router = useRouter();
+
+/** Referencias */
+const destroyRecordModal = ref(false);
+const destroyCertModal = ref(false);
+
+/** Métodos */
+const searcher = useSearcher({
+    url: apiTo('index'),
+    onSuccess: (r) => models.value = r.models,
+    onError: () => models.value = []
+});
+
+function openDestroyRecord(record) {
+    destroyRecordModal.value.open(record);
+}
+
+function openDestroyCert(cert) {
+    destroyCertModal.value.open(cert);
+}
+
+function openEditRecord(record) {
+    router.push(viewTo({ name: 'editRecord', params: { id: record.user_id, record: record.id } }));
+}
+
+function openEditCert(cert) {
+    router.push(viewTo({ name: 'editCertification', params: { id: cert.user_id, certification: cert.id } }));
+}
+
+/** Ciclos */
+onMounted(() => {
+  searcher.search();
+});
+</script>
+
+<template>
+  <div>
+    <!-- Página: Header principal -->
+    <div class="flex items-start justify-between">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Historial Académico</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de grados académicos y certificaciones profesionales</p>
+      </div>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+      <Searcher @search="(x) => searcher.search(x)">
+      </Searcher>
+    </div>
+
+    <!-- Cards principales: una por usuario -->
+    <section 
+      v-for="user in models.data" 
+      :key="user.id"
+      class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+    >
+      <!-- Perfil -->
+      <header class="flex items-start gap-4">
+        <div class="flex-shrink-0">
+          <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
+            <!-- icono usuario -->
+            <GoogleIcon 
+               class="text-black dark:text-primary-dt text-xl"
+               name="school"
+            />
+          </div>
+        </div>
+
+        <div class="flex-1">
+          <h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">{{ user.full_name }}</h2>
+          <p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información académica y certificaciones profesionales</p>
+        </div>
+      </header>
+
+      <!-- Secciones: Grados Académicos -->
+      <AcademicRecords 
+        :records="user.academic_records || []" 
+        @destroy="openDestroyRecord"
+        @edit="openEditRecord"
+      />
+
+      <!-- Secciones: Certificaciones -->
+      <Certifications 
+        :certifications="user.certificates || []" 
+        @destroy="openDestroyCert"
+        @edit="openEditCert"
+      />
+
+      <!-- Acciones al final de la tarjeta -->
+      <div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
+        <RouterLink :to="viewTo({ name: 'createRecord', params: { id: user.id } })" class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+          <GoogleIcon 
+               class="text-black dark:text-primary-dt text-xl"
+               name="add"
+            />
+          Agregar Grado
+        </RouterLink>
+
+        <RouterLink :to="viewTo({ name: 'createCertification', params: { id: user.id } })" class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <GoogleIcon 
+               class="text-black dark:text-primary-dt text-xl"
+               name="add"
+            />
+          Agregar Certificación
+        </RouterLink>
+      </div>
+    </section>
+
+    <!-- Estado vacío general -->
+    <div v-if="models.length === 0" class="mt-6 py-12 text-center">
+      <div class="text-gray-500 dark:text-primary-dt/70">
+        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+        <p class="text-lg font-medium">No se encontraron usuarios</p>
+        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+      </div>
+    </div>
+
+    <!-- Modales de eliminación -->
+    <DestroyView 
+      ref="destroyRecordModal" 
+      subtitle="title"
+      :to="(academicRecord) => apiTo('destroy-record', { academicRecord })" 
+      @update="searcher.search()" 
+    />
+    
+    <DestroyView 
+      ref="destroyCertModal" 
+      subtitle="name"
+      :to="(certificate) => apiTo('destroy-certificate', { certificate })" 
+      @update="searcher.search()" 
+    />
+  </div>
+</template>
--- a/src/pages/Admin/Users/Academic/Module.js
+++ b/src/pages/Admin/Users/Academic/Module.js
@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`admin.users.academic.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.academic.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`users.academic.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`users.academic.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
--- a/src/pages/Admin/Users/Additional.vue
+++ b/src/pages/Admin/Users/Additional.vue
--- a/src/pages/Admin/Users/Create.vue
+++ b/src/pages/Admin/Users/Create.vue
@ -20,17 +20,21 @@ const form = useForm({
    maternal: '',
    email: '',
    phone: '',
+    hire_date: '',
    password: '',
-    roles: []
+    roles: [],
+    department_id: '',
 });

 const roles = ref([]);
+const departments = ref([]);

 /** Métodos */
 function submit() {
    form.transform(data => ({
        ...data,
-        roles: data.roles.map(role => role.id)
+        roles: data.roles.map(role => role.id),
+        department_id: data.department_id?.id
    })).post(apiTo('store'), {
        onSuccess: () => {
            Notify.success(Lang('register.create.onSuccess'))
@ -46,6 +50,15 @@ onMounted(() => {
            roles.value = r.roles;
        }
    });
+
+    api.catalog({
+            'department:all': null,
+        },
+        {
+           onSuccess: (r) => {
+            departments.value = r['department:all'] ?? [];
+        } 
+    });
 })
 </script>

@ -82,5 +95,10 @@ onMounted(() => {
            :options="roles"
            multiple
        />
+        <Selectable
+            v-model="form.department_id"
+            title="Departamento"
+            :options="departments"
+        />
    </Form>
 </template>
--- a/src/pages/Admin/Users/Edit.vue
+++ b/src/pages/Admin/Users/Edit.vue
@ -1,11 +1,12 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import { api, useForm } from '@Services/Api';
 import { viewTo, apiTo , transl } from './Module';

 import IconButton      from '@Holos/Button/Icon.vue'
 import PageHeader      from '@Holos/PageHeader.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
 import Form            from './Form.vue'

 /** Definiciones */
@ -19,12 +20,19 @@ const form = useForm({
    paternal: '',
    maternal: '',
    email: '',
+    hire_date: '',
    phone: '',
+    department_id: '',
 });

+const departments = ref([]);
+
 /** Métodos */
 function submit() {
-    form.put(apiTo('update', { user: form.id }), {
+    form.transform(data => ({
+        ...data,
+        department_id: data.department_id?.id
+    })).put(apiTo('update', { user: form.id }), {
        onSuccess: () => {
            Notify.success(Lang('register.edit.onSuccess'))
            router.push(viewTo({ name: 'index' }));
@ -34,8 +42,24 @@ function submit() {

 onMounted(() => {
    api.get(apiTo('show', { user: vroute.params.id }), {
-        onSuccess: (r) => form.fill(r.user)
+        onSuccess: (r) => {
+            form.fill(r.user)
+            form.department_id = r.user.department
+            if (r.user.hire_date) {
+                form.hire_date = new Date(r.user.hire_date).toISOString().split('T')[0]
+            }
+        }
    });
+    
+    api.catalog({
+            'department:all': null,
+        },
+        {
+           onSuccess: (r) => {
+            departments.value = r['department:all'] ?? [];
+        } 
+        }
+    );
 })
 </script>

@ -54,5 +78,11 @@ onMounted(() => {
        action="update"
        :form="form"
        @submit="submit"
-    />
+    >
+        <Selectable
+            v-model="form.department_id"
+            title="Departamento"
+            :options="departments"
+        />
+    </Form>
 </template>
--- a/src/pages/Admin/Users/Form.vue
+++ b/src/pages/Admin/Users/Form.vue
@ -61,6 +61,13 @@ function submit() {
                :onError="form.errors.email"
                required
            />
+            <Input
+                v-model="form.hire_date"
+                id="hire_date"
+                :onError="form.errors.hire_date"
+                type="date"
+                required
+            />
            <slot />
            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
                <PrimaryButton
--- a/src/pages/Admin/Users/Index.vue
+++ b/src/pages/Admin/Users/Index.vue
@ -2,19 +2,24 @@
 import { onMounted, ref } from 'vue';
 import { useSearcher } from '@Services/Api';
 import { hasPermission } from '@Plugins/RolePermission';
+import { getDate } from '@Controllers/DateController';
 import { can, apiTo, viewTo, transl } from './Module'

-import IconButton   from '@Holos/Button/Icon.vue'
-import DestroyView  from '@Holos/Modal/Template/Destroy.vue';
+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 ShowView     from './Modals/Show.vue';
+import Table from '@Holos/NewTable.vue';
+import ShowView from './Modals/Show.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';

 /** Propiedades */
 const models = ref([]);

 /** Referencias */
-const showModal    = ref(false);
+const showModal = ref(false);
 const destroyModal = ref(false);

 /** Métodos */
@ -31,146 +36,86 @@ onMounted(() => {
 </script>

 <template>
-    <div>
-        <SearcherHead
-            :title="transl('title')"
-            @search="(x) => searcher.search(x)"
-        >
-            <RouterLink
-                v-if="can('create')"
-                :to="viewTo({ name: 'create' })"
-            >
-                <IconButton
-                    class="text-white"
-                    icon="add"
-                    :title="$t('crud.create')"
-                    filled
-                />
-            </RouterLink>
-            <IconButton
-                icon="refresh"
-                :title="$t('refresh')"
-                @click="searcher.search()"
-            />
-        </SearcherHead>
-        <div class="pt-2 w-full">
-            <Table 
-                :items="models"
-                :processing="searcher.processing"
-                @send-pagination="(page) => searcher.pagination(page)"
-            >
-                <template #head>
-                    <th v-text="$t('user')" />
-                    <th v-text="$t('contact')" />
-                    <th
-                        v-text="$t('actions')"
-                        class="w-32 text-center"
-                    />
-                </template>
-                <template #body="{items}">
-                    <tr
-                        v-for="model in items"
-                        class="table-row"
-                    >
-                        <td class="table-cell">
-                            {{ `${model.name} ${model.paternal}` }}
-                        </td>
-                        <td class="table-cell">
-                            <p>
-                                <a 
-                                    class="hover:underline"
-                                    target="_blank"
-                                    :href="`mailto:${model.email}`"
-                                >
-                                    {{ model.email }}
-                                </a>
-                            </p>
-                            <p v-if="model.phone" class="font-semibold text-xs">
-                                <b>Teléfono: </b>
-                                <span
-                                    class="hover:underline"
-                                    target="_blank"
-                                    :href="`tel:${model.phone}`"
-                                >
-                                    {{ model.phone }}
-                                </span>
-                            </p>
-                        </td>
-                        <td class="table-cell">
-                            <div class="table-actions">
-                                <IconButton
-                                    icon="visibility"
-                                    :title="$t('crud.show')"
-                                    @click="showModal.open(model)"
-                                    outline
-                                />
-                                <RouterLink
-                                    v-if="can('edit')"
-                                    class="h-fit"
-                                    :to="viewTo({ name: 'edit', params: { id: model.id } })"
-                                >
-                                    <IconButton
-                                        icon="edit"
-                                        :title="$t('crud.edit')"
-                                        outline
-                                    />
-                                </RouterLink>
-                                <IconButton
-                                    v-if="can('destroy')"
-                                    icon="delete"
-                                    :title="$t('crud.destroy')"
-                                    @click="destroyModal.open(model)"
-                                    outline
-                                />
-                                <RouterLink
-                                    v-if="can('settings')"
-                                    class="h-fit"
-                                    :to="viewTo({ name: 'settings', params: { id: model.id } })"
-                                >
-                                    <IconButton
-                                        icon="settings"
-                                        :title="$t('setting')"
-                                    />
-                                </RouterLink>
-                                <RouterLink
-                                    v-if="hasPermission('activities.index')"
-                                    class="h-fit"
-                                    :to="$view({ name: 'admin.activities.index', query: { user: model.id } })"
-                                >
-                                    <IconButton
-                                        icon="timeline"
-                                        :title="$t('activity')"
-                                    />
-                                </RouterLink>
-                            </div>
-                        </td>
-                    </tr>
-                </template>
-                <template #empty>
-                    <td class="table-cell">
-                        <div class="flex items-center text-sm">
-                            <p class="font-semibold">
-                                {{ $t('registers.empty') }}
-                            </p>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('users.title') }}</h1>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('users.description') }}
+            </p>
+        </div>
+
+        <RouterLink :to="viewTo({ name: 'create' })">
+            <Adding text="Nuevo Empleado" />
+        </RouterLink>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+        <Searcher @search="(x) => searcher.search(x)">
+        </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="pt-2 w-full">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
+            <template #head>
+                <th v-text="$t('name')" />
+                <th v-text="$t('department')" />
+                <th v-text="$t('headquarter')" />
+                <th v-text="$t('hire_date')" />
+                <th v-text="$t('status')" />
+                <th class="w-32 text-center" v-text="$t('actions')" />
+            </template>
+
+            <template #body="{ items }">
+                <tr v-for="model in items" class="table-row">
+                    <td>{{ model.full_name }}</td>
+                    <td>{{ model.department?.name }}</td>
+                    <td>{{ model.headquarter }}</td>
+                    <td>{{ model.hire_date ? getDate(model.hire_date) : '-' }}</td>
+                    <td class="py-6">
+                        <span
+                            class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">
+                            {{ model.status_ek }}
+                        </span>
+                    </td>
+                    <td>
+                        <div class="table-actions">
+                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
+                                outline />
+                            <RouterLink v-if="can('edit')" class="h-fit"
+                                :to="viewTo({ name: 'edit', params: { id: model.id } })">
+                                <IconButton icon="edit" :title="$t('crud.edit')" outline />
+                            </RouterLink>
+                            <IconButton v-if="can('destroy')" icon="delete" :title="$t('crud.destroy')"
+                                @click="destroyModal.open(model)" outline />
+                            <RouterLink v-if="can('settings')" class="h-fit"
+                                :to="viewTo({ name: 'settings', params: { id: model.id } })">
+                                <IconButton icon="settings" :title="$t('setting')" />
+                            </RouterLink>
+                            <RouterLink v-if="hasPermission('activities.index')" class="h-fit"
+                                :to="$view({ name: 'admin.activities.index', query: { user: model.id } })">
+                                <IconButton icon="timeline" :title="$t('activity')" />
+                            </RouterLink>
                        </div>
                    </td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                </template>
-            </Table>
-        </div>
-        
-        <ShowView 
-            ref="showModal"
-        />
+                </tr>
+            </template>

-        <DestroyView
-            v-if="can('destroy')"
-            ref="destroyModal"
-            subtitle="last_name"
-            :to="(user) => apiTo('destroy', { user })"
-            @update="searcher.search()"
-        />
+            <template #empty>
+                <td colspan="6" class="py-12 text-center">
+                    <div class="text-gray-500 dark:text-primary-dt/70">
+                        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                        <p class="text-lg font-medium">No se encontraron empleados</p>
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+                    </div>
+                </td>
+            </template>
+        </Table>
+
+        <ShowView ref="showModal" />
+
+        <DestroyView v-if="can('destroy')" ref="destroyModal" subtitle="last_name"
+            :to="(user) => apiTo('destroy', { user })" @update="searcher.search()" />
    </div>
-</template>
-    
+</template>
--- a/src/pages/Admin/Users/Payroll.vue
+++ b/src/pages/Admin/Users/Payroll.vue
--- a/src/pages/Admin/Users/Security.vue
+++ b/src/pages/Admin/Users/Security.vue
--- a/src/pages/ComercialClassifications/Create.vue
+++ b/src/pages/ComercialClassifications/Create.vue
@ -0,0 +1,89 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute, RouterLink } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import GoogleIcon      from '@Shared/GoogleIcon.vue';
+import Form            from './Form.vue'
+
+/** Definidores */
+const router = useRouter();
+const route = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    code: '',
+    name: '',
+    description: '',
+    parent_id: null
+});
+
+const parentInfo = ref(null);
+
+/** Métodos */
+function submit() {
+    form.transform(data => ({
+        ...data,
+        parent_id: data.parent_id // Usar el parent_id del formulario
+    })).post(apiTo('store'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+
+/** Ciclos */
+onMounted(() => {
+    // Verificar si se están pasando parámetros para crear subcategoría
+    if (route.query.parent_id) {
+        parentInfo.value = {
+            id: parseInt(route.query.parent_id),
+            name: route.query.parent_name,
+            code: route.query.parent_code
+        };
+        // Pre-llenar el parent_id en el formulario
+        form.parent_id = parseInt(route.query.parent_id);
+    }
+})
+</script>
+
+<template>
+    <PageHeader
+        :title="parentInfo ? `${transl('create.title')} - Subcategoría` : transl('create.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <!-- Mostrar información del padre si se está creando una subcategoría -->
+    <div v-if="parentInfo" class="mb-4 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg border border-blue-200 dark:border-blue-700">
+        <div class="flex items-center">
+            <GoogleIcon class="text-blue-600 text-xl mr-2" name="account_tree" />
+            <div>
+                <p class="text-sm font-medium text-blue-800 dark:text-blue-200">
+                    Creando subcategoría para:
+                </p>
+                <p class="text-lg font-semibold text-blue-900 dark:text-blue-100">
+                    <code class="bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded text-sm mr-2">{{ parentInfo.code }}</code>
+                    {{ parentInfo.name }}
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <Form
+        action="create"
+        :form="form"
+        @submit="submit"
+    />
+</template>
--- a/src/pages/ComercialClassifications/Edit.vue
+++ b/src/pages/ComercialClassifications/Edit.vue
@ -0,0 +1,139 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { viewTo, apiTo, transl } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import GoogleIcon      from '@Shared/GoogleIcon.vue';
+import Form            from './Form.vue'
+
+/** Definiciones */
+const vroute = useRoute();
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+    id: null,
+    code: '',
+    name: '',
+    description: '',
+});
+
+const parentOptions = ref([]);
+
+/** Métodos */
+function submit() {
+    form.transform(data => ({
+        ...data,
+    })).put(apiTo('update', { comercial_classification: form.id }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        },
+    })
+}
+
+/** Función para obtener clasificaciones padre (excluyendo la actual y sus hijos) */
+function loadParentOptions() {
+    api.get(apiTo('index'), {
+        onSuccess: (r) => {
+            // Función para excluir la clasificación actual y sus descendientes
+            const excludeCurrentAndChildren = (items, excludeId) => {
+                return items.filter(item => {
+                    if (item.id === excludeId) return false;
+                    if (hasDescendant(item, excludeId)) return false;
+                    return true;
+                }).map(item => ({
+                    ...item,
+                    children: excludeCurrentAndChildren(item.children || [], excludeId)
+                }));
+            };
+
+            // Función para verificar si un item tiene como descendiente la clasificación actual
+            const hasDescendant = (item, targetId) => {
+                if (!item.children) return false;
+                return item.children.some(child => 
+                    child.id === targetId || hasDescendant(child, targetId)
+                );
+            };
+
+            // Aplanar la estructura jerárquica para el selector
+            const flattenOptions = (items, level = 0) => {
+                let options = [];
+                items.forEach(item => {
+                    options.push({
+                        ...item,
+                        name: '  '.repeat(level) + item.name, // Indentación visual
+                        level
+                    });
+                    if (item.children && item.children.length > 0) {
+                        options = options.concat(flattenOptions(item.children, level + 1));
+                    }
+                });
+                return options;
+            };
+
+            const dataSource = r.data?.comercial_classifications?.data || r.comercial_classifications || [];
+            const filteredData = excludeCurrentAndChildren(dataSource, form.id);
+            parentOptions.value = flattenOptions(filteredData);
+        }
+    });
+}
+
+onMounted(() => {
+    api.get(apiTo('show', { comercial_classification: vroute.params.id }), {
+        onSuccess: (r) => {
+            const classification = r.data || r.comercial_classification || r;
+            form.fill({
+                id: classification.id,
+                code: classification.code,
+                name: classification.name,
+                description: classification.description,
+                is_active: classification.is_active,
+                parent: classification.parent || null
+            });
+            
+            // Cargar opciones padre después de obtener los datos actuales
+            loadParentOptions();
+        }
+    });
+})
+</script>
+
+<template>
+    <PageHeader :title="`${transl('edit.title')}${form.parent ? ' - Subcategoría' : ''}`">
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <!-- Mostrar información del padre si es una subcategoría -->
+    <div v-if="form.parent" class="mb-4 p-4 bg-yellow-50 dark:bg-yellow-900 rounded-lg border border-yellow-200 dark:border-yellow-700">
+        <div class="flex items-center">
+            <GoogleIcon class="text-yellow-600 text-xl mr-2" name="account_tree" />
+            <div>
+                <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+                    Editando subcategoría de:
+                </p>
+                <p class="text-lg font-semibold text-yellow-900 dark:text-yellow-100">
+                    <code class="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded text-sm mr-2">{{ form.parent.code }}</code>
+                    {{ form.parent.name }}
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <Form
+        action="update"
+        :form="form"
+        :parent-options="parentOptions"
+        @submit="submit"
+    />
+</template>
--- a/src/pages/ComercialClassifications/Form.vue
+++ b/src/pages/ComercialClassifications/Form.vue
@ -0,0 +1,68 @@
+<script setup>
+import { transl } from './Module';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Selectable    from '@Holos/Form/Selectable.vue';
+import Checkbox      from '@Holos/Checkbox.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object,
+    parentOptions: {
+        type: Array,
+        default: () => []
+    }
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
+    </div>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <Input
+                v-model="form.code"
+                id="code"
+                :onError="form.errors.code"
+                autofocus
+                required
+            />
+            <Input
+                v-model="form.name"
+                id="name"
+                :onError="form.errors.name"
+                required
+            />
+            <Input
+                v-model="form.description"
+                id="description"
+                :onError="form.errors.description"
+                class="md:col-span-2"
+            />
+            <slot />
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
+                <PrimaryButton
+                    v-text="$t(action)"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </div>
+        </form>
+    </div>
+</template>
--- a/src/pages/ComercialClassifications/Index.vue
+++ b/src/pages/ComercialClassifications/Index.vue
@ -0,0 +1,204 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, RouterLink } from 'vue-router';
+import { useSearcher } from '@Services/Api';
+import { hasPermission } from '@Plugins/RolePermission';
+import { can, apiTo, viewTo, transl } from './Module'
+
+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 ShowView from './Modals/Show.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Button from '@Holos/Button/Button.vue';
+
+/** Propiedades */
+const models = ref([]);
+const router = useRouter();
+
+/** Referencias */
+const showModal = ref(null);
+const destroyModal = ref(null);
+
+/** Métodos */
+const searcher = useSearcher({
+    url: apiTo('index'),
+    onSuccess: (r) => {
+        console.log('Datos recibidos:', r);
+        // La API retorna los datos en r.data.comercial_classifications.data
+        const classificationsData = r.data?.comercial_classifications?.data || r.comercial_classifications || [];
+        models.value = classificationsData;
+    },
+    onError: () => {
+        models.value = [];
+    }
+});
+
+/** Función para renderizar estructura jerárquica */
+const renderHierarchicalRows = (items, level = 0) => {
+    const rows = [];
+    items.forEach(item => {
+        rows.push({ ...item, level });
+        if (item.children && item.children.length > 0) {
+            rows.push(...renderHierarchicalRows(item.children, level + 1));
+        }
+    });
+    return rows;
+};
+
+/** Función para crear subcategoría */
+const createSubcategory = (parentCategory) => {
+    // Redirigir a la vista de creación con el parent_id en query params
+    router.push(viewTo({ 
+        name: 'create', 
+        query: { 
+            parent_id: parentCategory.id,
+            parent_name: parentCategory.name,
+            parent_code: parentCategory.code
+        } 
+    }));
+};
+
+/** Función para eliminar con información contextual */
+const deleteItem = (item) => {
+    // Agregar información contextual al modal
+    const itemWithContext = {
+        ...item,
+        contextInfo: item.parent ? `Subcategoría de: ${item.parent.code} - ${item.parent.name}` : 'Categoría principal'
+    };
+    destroyModal.value.open(itemWithContext);
+};
+
+/** Función para mostrar detalles */
+const showItem = (item) => {
+    showModal.value.open(item);
+};
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <div class="flex items-center justify-between">
+            <div>
+                <h1 className="text-3xl font-bold text-foreground">Clasificaciones Comerciales</h1>
+                <p className="text-muted-foreground">
+                    Gestión de categorías y subcategorías de productos
+                </p>
+            </div>
+            <RouterLink :to="viewTo({ name: 'create' })">
+                <Button color="info">Nueva Clasificación</Button>
+            </RouterLink>
+        </div>
+        <!-- <SearcherHead :title="transl('name')" @search="(x) => searcher.search(x)">
+            <RouterLink :to="viewTo({ name: 'create' })">
+               
+                <IconButton class="text-white" icon="add" :title="$t('crud.create')" filled />
+            </RouterLink>
+            <IconButton icon="refresh" :title="$t('refresh')" @click="searcher.search()" />
+        </SearcherHead> -->
+        <div class="pt-2 w-full">
+            <Table :items="models" :processing="searcher.processing"
+                @send-pagination="(page) => searcher.pagination(page)">
+                <template #head>
+                    <th v-text="$t('code')" />
+                    <th v-text="$t('name')" />
+                    <th v-text="$t('description')" />
+                    <th v-text="$t('status')" class="w-20 text-center" />
+                    <th v-text="$t('actions')" class="w-32 text-center" />
+                </template>
+                <template #body="{ items }">
+                    <tr v-for="model in items" :key="model.id" class="table-row"
+                        :class="{ 'bg-gray-50 dark:bg-gray-800': model.level > 0 }">
+                        <td class="table-cell">
+                            <div :style="{ paddingLeft: `${model.level * 24}px` }" class="flex items-center">
+                                <span v-if="model.level > 0" class="text-gray-400 mr-2">└─</span>
+                                <code class="font-mono text-sm" 
+                                      :class="model.level > 0 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-gray-100'">
+                                    {{ model.code }}
+                                </code>
+                                <span v-if="model.level > 0" class="ml-2 text-xs bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 px-2 py-1 rounded-full">
+                                    Subcategoría
+                                </span>
+                            </div>
+                        </td>
+                        <td class="table-cell">
+                            <span class="font-semibold">{{ model.name }}</span>
+                        </td>
+                        <td class="table-cell">
+                            <span class="text-sm text-gray-600 dark:text-gray-400">
+                                {{ model.description || '-' }}
+                            </span>
+                        </td>
+                        <td class="table-cell text-center">
+                            <span 
+                                class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
+                                :class="model.is_active 
+                                    ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' 
+                                    : 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100'"
+                            >
+                                {{ model.is_active ? $t('active') : $t('inactive') }}
+                            </span>
+                        </td>
+                        <td class="table-cell">
+                            <div class="table-actions">
+                                <IconButton
+                                    icon="add_circle"
+                                    :title="$t('Agregar subcategoría')"
+                                    @click="createSubcategory(model)"
+                                    outline
+                                />
+                                <IconButton
+                                    icon="visibility"
+                                    :title="$t('crud.show')"
+                                    @click="showItem(model)"
+                                    outline
+                                />
+                                <RouterLink
+                                    class="h-fit"
+                                    :to="viewTo({ name: 'edit', params: { id: model.id } })"
+                                >
+                                    <IconButton
+                                        icon="edit"
+                                        :title="$t('crud.edit')"
+                                        outline
+                                    />
+                                </RouterLink>
+                                <IconButton
+                                    icon="delete"
+                                    :title="$t('crud.destroy')"
+                                    @click="deleteItem(model)"
+                                    outline
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+                <template #empty>
+                    <td class="table-cell">
+                        <div class="flex items-center text-sm">
+                            <GoogleIcon name="folder_open" class="mr-2 text-gray-400" />
+                            <p class="font-semibold">
+                                {{ $t('registers.empty') }}
+                            </p>
+                        </div>
+                    </td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
+                </template>
+            </Table>
+        </div>
+
+        <ShowView ref="showModal" @reload="searcher.search()" />
+
+        <DestroyView ref="destroyModal" subtitle="name" :to="(id) => apiTo('destroy', { comercial_classification: id })"
+            @update="searcher.search()" />
+    </div>
+</template>
--- a/src/pages/ComercialClassifications/Modals/Show.vue
+++ b/src/pages/ComercialClassifications/Modals/Show.vue
@ -0,0 +1,362 @@
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { getDateTime } from '@Controllers/DateController';
+import { viewTo, apiTo } from '../Module';
+import ComercialClassificationsService from '../services/ComercialClassificationsService';
+import Notify from '@Plugins/Notify';
+
+import Header     from '@Holos/Modal/Elements/Header.vue';
+import ShowModal  from '@Holos/Modal/Show.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Button     from '@Holos/Button/Button.vue';
+import IconButton from '@Holos/Button/Icon.vue';
+import DestroyView from '@Holos/Modal/Template/Destroy.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'close', 
+    'reload'
+]);
+
+/** Servicios */
+const classificationsService = new ComercialClassificationsService();
+const router = useRouter();
+
+/** Propiedades */
+const model    = ref(null);
+const loading  = ref(false);
+const deletingChildId = ref(null); // Para mostrar loading específico en subcategoría que se está eliminando
+
+/** Referencias */
+const modalRef = ref(null);
+const destroyModal = ref(null);
+
+/** Métodos */
+function close() {
+    model.value = null;
+    emit('close');
+}
+
+/** Función para actualizar el estado de la clasificación */
+async function toggleStatus(item) {
+    if (loading.value) return;
+    
+    const newStatus = !item.is_active;
+    
+    try {
+        loading.value = true;
+        
+        // Usar el servicio para actualizar el estado
+        await classificationsService.updateStatus(item.id, newStatus);
+        
+        // Actualizar el modelo local
+        item.is_active = newStatus;
+        
+        // Notificación de éxito
+        const statusText = newStatus ? 'activada' : 'desactivada';
+        Notify.success(
+            `Clasificación "${item.code}" ${statusText} exitosamente`,
+            'Estado actualizado'
+        );
+        
+        // Emitir evento para recargar la lista principal si es necesario
+        emit('reload');
+        
+    } catch (error) {
+        console.error('Error actualizando estado:', error);
+        
+        // Manejo específico de errores según la estructura de tu API
+        let errorMessage = 'Error al actualizar el estado de la clasificación';
+        let errorTitle = 'Error';
+        
+        if (error?.response?.data) {
+            const errorData = error.response.data;
+            
+            // Caso 1: Error con estructura específica de tu API
+            if (errorData.status === 'error') {
+                if (errorData.errors) {
+                    // Errores de validación - extraer el primer error
+                    const firstField = Object.keys(errorData.errors)[0];
+                    const firstError = errorData.errors[firstField];
+                    errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
+                    errorTitle = 'Error de validación';
+                } else if (errorData.message) {
+                    // Mensaje general del error
+                    errorMessage = errorData.message;
+                    errorTitle = 'Error del servidor';
+                }
+            }
+            // Caso 2: Otros formatos de error
+            else if (errorData.message) {
+                errorMessage = errorData.message;
+            }
+        } else if (error?.message) {
+            // Error genérico de la petición (red, timeout, etc.)
+            errorMessage = `Error de conexión: ${error.message}`;
+            errorTitle = 'Error de red';
+        }
+        
+        // Notificación de error
+        Notify.error(errorMessage, errorTitle);
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** Función para editar subcategoría */
+function editSubcategory(child) {
+    // Navegar a la vista de edición de la subcategoría
+    const editUrl = viewTo({ name: 'edit', params: { id: child.id } });
+    router.push(editUrl);
+    // Cerrar el modal actual
+    close();
+}
+
+/** Función para eliminar subcategoría */
+function deleteSubcategory(child) {
+    // Marcar cuál subcategoría se va a eliminar para mostrar loading
+    deletingChildId.value = child.id;
+    destroyModal.value.open(child);
+}
+
+/** Función para recargar después de eliminar - Mejorada */
+async function onSubcategoryDeleted() {
+    try {
+        // Mostrar que se está procesando
+        const deletedId = deletingChildId.value;
+        
+        // Recargar los datos de la clasificación actual para obtener subcategorías actualizadas
+        const response = await classificationsService.getById(model.value.id);
+        
+        // Actualizar el modelo local con los datos frescos
+        if (response && response.comercial_classification) {
+            model.value = response.comercial_classification;
+            
+            // Notificación de éxito con información específica
+            const deletedCount = model.value.children ? model.value.children.length : 0;
+            Notify.success(
+                `Subcategoría eliminada exitosamente. ${deletedCount} subcategorías restantes.`, 
+                'Eliminación exitosa'
+            );
+        }
+        
+        // Emitir evento para recargar la lista principal
+        emit('reload');
+        
+    } catch (error) {
+        console.error('Error recargando datos después de eliminar:', error);
+        
+        // En caso de error, cerrar modal y recargar lista principal
+        close();
+        emit('reload');
+        
+        // Notificación de error
+        Notify.error(
+            'Error al actualizar la vista. Los datos se han actualizado correctamente.',
+            'Error de actualización'
+        );
+    } finally {
+        // Limpiar el estado de eliminación
+        deletingChildId.value = null;
+    }
+}
+
+/** Función para cancelar eliminación */
+function onDeleteCancelled() {
+    // Limpiar el estado de eliminación si se cancela
+    deletingChildId.value = null;
+}
+
+/** Función para renderizar la jerarquía de hijos */
+const renderChildren = (children, level = 1) => {
+    if (!children || children.length === 0) return null;
+    return children.map(child => ({
+        ...child,
+        level,
+        children: renderChildren(child.children, level + 1)
+    }));
+};
+
+/** Exposiciones */
+defineExpose({
+    open: (data) => {
+        model.value = data;
+        modalRef.value.open();
+    }
+});
+</script>
+
+<template>
+    <ShowModal
+        ref="modalRef"
+        @close="close"
+    >
+        <div v-if="model">
+            <Header
+                :title="model.code"
+                :subtitle="model.name"
+            >
+                <div class="flex w-full flex-col">
+                    <div class="flex w-full justify-center items-center">
+                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
+                            <GoogleIcon 
+                                class="text-white text-3xl"
+                                name="category"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Header>
+            <div class="flex w-full p-4 space-y-6">
+                <!-- Información básica -->
+                <div class="w-full">
+                    <div class="flex items-start">
+                        <GoogleIcon 
+                            class="text-xl text-success mt-1"
+                            name="info"
+                        />
+                        <div class="pl-3 w-full">
+                            <p class="font-bold text-lg leading-none pb-3">
+                                {{ $t('details') }}
+                            </p>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <p>
+                                        <b>{{ $t('code') }}: </b>
+                                        <code class="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+                                            {{ model.code }}
+                                        </code>
+                                    </p>
+                                    <p class="mt-2">
+                                        <b>{{ $t('name') }}: </b>
+                                        {{ model.name }}
+                                    </p>
+                                    <p class="mt-2" v-if="model.description">
+                                        <b>{{ $t('description') }}: </b>
+                                        {{ model.description }}
+                                    </p>
+                                </div>
+                                <div>
+                                    <p>
+                                        <b>{{ $t('status') }}: </b>
+                                        <Button
+                                            :variant="'smooth'"
+                                            :color="model.is_active ? 'success' : 'danger'"
+                                            :size="'sm'"
+                                            :loading="loading"
+                                            @click="toggleStatus(model)"
+                                        >
+                                            {{ model.is_active ? $t('Activo') : $t('Inactivo') }}
+                                        </Button>
+                                    </p>
+                                    <p class="mt-2">
+                                        <b>{{ $t('created_at') }}: </b>
+                                        {{ getDateTime(model.created_at) }}
+                                    </p>
+                                    <p class="mt-2">
+                                        <b>{{ $t('updated_at') }}: </b>
+                                        {{ getDateTime(model.updated_at) }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Clasificaciones hijas -->
+                    <div v-if="model.children && model.children.length > 0" class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+                        <div class="flex items-start">
+                            <GoogleIcon 
+                                class="text-xl text-primary mt-1"
+                                name="account_tree"
+                            />
+                            <div class="pl-3 w-full">
+                                <p class="font-bold text-lg leading-none pb-3">
+                                    {{ $t('Subclasificaciones') }}
+                                </p>
+                                <div class="space-y-2">
+                                    <div 
+                                        v-for="child in model.children" 
+                                        :key="child.id"
+                                        class="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg transition-all duration-300"
+                                        :class="{
+                                            'opacity-50 pointer-events-none': deletingChildId === child.id,
+                                            'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700': deletingChildId === child.id
+                                        }"
+                                    >
+                                        <div class="flex-1">
+                                            <div class="flex items-center">
+                                                <code class="font-mono text-sm bg-white dark:bg-gray-700 px-2 py-1 rounded mr-3">
+                                                    {{ child.code }}
+                                                </code>
+                                                <span class="font-semibold">{{ child.name }}</span>
+                                                <!-- Indicador de eliminación -->
+                                                <span v-if="deletingChildId === child.id" class="ml-2 text-xs bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100 px-2 py-1 rounded-full animate-pulse">
+                                                    Eliminando...
+                                                </span>
+                                            </div>
+                                            <p v-if="child.description" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                                                {{ child.description }}
+                                            </p>
+                                        </div>
+                                        
+                                        <!-- Botones de acción para subcategorías -->
+                                        <div class="flex items-center space-x-2 ml-4">
+                                            <!-- Botón de estado -->
+                                            <Button
+                                                :variant="'smooth'"
+                                                :color="child.is_active ? 'success' : 'danger'"
+                                                :size="'sm'"
+                                                :loading="loading && deletingChildId !== child.id"
+                                                :disabled="deletingChildId === child.id"
+                                                @click="toggleStatus(child)"
+                                            >
+                                                {{ child.is_active ? $t('Activo') : $t('Inactivo') }}
+                                            </Button>
+                                            
+                                            <!-- Botón editar -->
+                                            <IconButton
+                                                icon="edit"
+                                                :title="$t('crud.edit')"
+                                                :disabled="deletingChildId === child.id"
+                                                @click="editSubcategory(child)"
+                                                outline
+                                                size="sm"
+                                            />
+                                            
+                                            <!-- Botón eliminar -->
+                                            <IconButton
+                                                icon="delete"
+                                                :title="$t('crud.destroy')"
+                                                :loading="deletingChildId === child.id"
+                                                :disabled="deletingChildId && deletingChildId !== child.id"
+                                                @click="deleteSubcategory(child)"
+                                                outline
+                                                size="sm"
+                                            />
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Mensaje cuando no hay subcategorías (después de eliminar todas) -->
+                                    <div v-if="!model.children || model.children.length === 0" 
+                                         class="text-center p-4 text-gray-500 dark:text-gray-400">
+                                        <GoogleIcon class="text-2xl mb-2" name="folder_open" />
+                                        <p class="text-sm">No hay subcategorías</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Modal de eliminación para subcategorías -->
+        <DestroyView
+            ref="destroyModal"
+            subtitle="name"
+            :to="(id) => apiTo('destroy', { comercial_classification: id })"
+            @update="onSubcategoryDeleted"
+        />
+    </ShowModal>
+</template>
--- a/src/pages/ComercialClassifications/Module.js
+++ b/src/pages/ComercialClassifications/Module.js
@ -0,0 +1,23 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`comercial-classifications.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
+    name: `admin.comercial-classifications.${name}`, params, query 
+})
+    
+// Obtener traducción del componente
+const transl = (str) => lang(`admin.comercial_classifications.${str}`)
+
+// Control de permisos
+const can = (permission) => hasPermission(`admin.comercial-classifications.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
--- a/src/pages/ComercialClassifications/interfaces/comercial-classifications.interfaces.js
+++ b/src/pages/ComercialClassifications/interfaces/comercial-classifications.interfaces.js
@ -0,0 +1,62 @@
+/**
+ * Interfaces para Comercial Classifications
+ * 
+ * @author Sistema
+ * @version 1.0.0
+ */
+
+/**
+ * @typedef {Object} ComercialClassification
+ * @property {number} id - ID de la clasificación
+ * @property {string} code - Código de la clasificación
+ * @property {string} name - Nombre de la clasificación
+ * @property {string|null} description - Descripción de la clasificación
+ * @property {boolean} is_active - Estado activo/inactivo
+ * @property {number|null} parent_id - ID del padre
+ * @property {string} created_at - Fecha de creación
+ * @property {string} updated_at - Fecha de actualización
+ * @property {string|null} deleted_at - Fecha de eliminación
+ * @property {ComercialClassification|null} parent - Clasificación padre
+ * @property {ComercialClassification[]} children - Clasificaciones hijas
+ */
+
+/**
+ * @typedef {Object} ComercialClassificationResponse
+ * @property {string} status - Estado de la respuesta
+ * @property {Object} data - Datos de la respuesta
+ * @property {string} data.message - Mensaje de la respuesta
+ * @property {ComercialClassification} data.comercial_classification - Clasificación comercial
+ */
+
+/**
+ * @typedef {Object} ComercialClassificationsListResponse
+ * @property {string} status - Estado de la respuesta
+ * @property {Object} data - Datos de la respuesta
+ * @property {ComercialClassification[]} data.comercial_classifications - Lista de clasificaciones
+ */
+
+/**
+ * @typedef {Object} CreateComercialClassificationData
+ * @property {string} code - Código de la clasificación
+ * @property {string} name - Nombre de la clasificación
+ * @property {string|null} description - Descripción de la clasificación
+ * @property {boolean} is_active - Estado activo/inactivo
+ * @property {number|null} parent_id - ID del padre
+ */
+
+/**
+ * @typedef {Object} UpdateComercialClassificationData
+ * @property {string} [code] - Código de la clasificación
+ * @property {string} [name] - Nombre de la clasificación
+ * @property {string|null} [description] - Descripción de la clasificación
+ * @property {boolean} [is_active] - Estado activo/inactivo
+ * @property {number|null} [parent_id] - ID del padre
+ */
+
+export {
+    ComercialClassification,
+    ComercialClassificationResponse,
+    ComercialClassificationsListResponse,
+    CreateComercialClassificationData,
+    UpdateComercialClassificationData
+};
--- a/src/pages/ComercialClassifications/services/ComercialClassificationsService.js
+++ b/src/pages/ComercialClassifications/services/ComercialClassificationsService.js
@ -0,0 +1,180 @@
+/**
+ * Servicio para Comercial Classifications
+ * 
+ * @author Sistema
+ * @version 2.0.0
+ */
+
+import { api, apiURL } from '@Services/Api';
+
+export default class ComercialClassificationsService {
+  
+  /**
+   * Obtener todas las clasificaciones comerciales
+   * @param {Object} params - Parámetros de la consulta
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async getAll(params = {}) {
+    return new Promise((resolve, reject) => {
+      api.get(apiURL('comercial-classifications'), {
+        params,
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Obtener una clasificación comercial por ID
+   * @param {number} id - ID de la clasificación
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async getById(id) {
+    return new Promise((resolve, reject) => {
+      api.get(apiURL(`comercial-classifications/${id}`), {
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Crear una nueva clasificación comercial
+   * @param {Object} data - Datos de la clasificación
+   * @param {string} data.code - Código de la clasificación
+   * @param {string} data.name - Nombre de la clasificación
+   * @param {string} data.description - Descripción de la clasificación
+   * @param {number|null} data.parent_id - ID de la clasificación padre (null para raíz)
+   * @param {boolean} data.is_active - Estado activo/inactivo
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async create(data) {
+    return new Promise((resolve, reject) => {
+      api.post(apiURL('comercial-classifications'), {
+        data,
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Actualizar una clasificación comercial existente
+   * @param {number} id - ID de la clasificación
+   * @param {Object} data - Datos actualizados
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async update(id, data) {
+    return new Promise((resolve, reject) => {
+      api.put(apiURL(`comercial-classifications/${id}`), {
+        data,
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Eliminar una clasificación comercial
+   * @param {number} id - ID de la clasificación
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async delete(id) {
+    return new Promise((resolve, reject) => {
+      api.delete(apiURL(`comercial-classifications/${id}`), {
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Actualizar solo el estado de una clasificación comercial
+   * @param {number} id - ID de la clasificación
+   * @param {boolean} is_active - Nuevo estado
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async updateStatus(id, is_active) {
+    return new Promise((resolve, reject) => {
+      api.put(apiURL(`comercial-classifications/${id}`), {
+        data: { is_active },
+        onSuccess: (response) => {
+          resolve(response);
+        },
+        onError: (error) => {
+          // Mejorar el manejo de errores
+          const enhancedError = {
+            ...error,
+            timestamp: new Date().toISOString(),
+            action: 'updateStatus',
+            id: id,
+            is_active: is_active
+          };
+          reject(enhancedError);
+        }
+      });
+    });
+  }
+
+  /**
+   * Obtener clasificaciones padre disponibles (para selects)
+   * @param {number|null} excludeId - ID a excluir de la lista (para evitar loops)
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async getParentOptions(excludeId = null) {
+    return new Promise((resolve, reject) => {
+      api.get(apiURL('comercial-classifications'), {
+        params: { exclude_children_of: excludeId },
+        onSuccess: (response) => {
+          // Aplanar la estructura jerárquica para el selector
+          const flattenOptions = (items, level = 0) => {
+            let options = [];
+            items.forEach(item => {
+              if (excludeId && (item.id === excludeId || this.hasDescendant(item, excludeId))) {
+                return; // Excluir item actual y sus descendientes
+              }
+              
+              options.push({
+                ...item,
+                name: '  '.repeat(level) + item.name, // Indentación visual
+                level
+              });
+              
+              if (item.children && item.children.length > 0) {
+                options = options.concat(flattenOptions(item.children, level + 1));
+              }
+            });
+            return options;
+          };
+
+          const flatOptions = flattenOptions(response.comercial_classifications?.data || response.data || []);
+          resolve(flatOptions);
+        },
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Función auxiliar para verificar si un item tiene como descendiente un ID específico
+   * @param {Object} item - Item a verificar
+   * @param {number} targetId - ID objetivo
+   * @returns {boolean} True si es descendiente
+   */
+  hasDescendant(item, targetId) {
+    if (!item.children) return false;
+    return item.children.some(child => 
+      child.id === targetId || this.hasDescendant(child, targetId)
+    );
+  }
+
+  /**
+   * Alternar el estado de una clasificación
+   * @param {Object} item - Objeto con la clasificación
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async toggleStatus(item) {
+    const newStatus = !item.is_active;
+    return this.updateStatus(item.id, newStatus);
+  }
+}
--- a/src/pages/Courses/Admin/Assignamment.vue
+++ b/src/pages/Courses/Admin/Assignamment.vue
@ -0,0 +1,214 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Input from '@Holos/Form/Input.vue';
+import PageHeader from '@Holos/PageHeader.vue';
+import IconButton from '@Holos/Button/Icon.vue';
+
+/** Definiciones */
+const router = useRouter();
+const vroute = useRoute();
+
+/** Propiedades */
+const form = useForm({
+  users: [],
+  start_date: '',
+  end_date: '',
+  exam_date: '',
+});
+
+const course = ref(null);
+const users = ref([]);
+
+// Computed para contar usuarios seleccionados
+const selectedUsersCount = computed(() => {
+  return users.value.filter(u => u.selected).length;
+});
+
+// Funciones
+const toggleUser = (user) => {
+  user.selected = !user.selected;
+};
+
+const selectAllUsers = () => {
+  const allSelected = users.value.every(u => u.selected);
+  users.value.forEach(u => u.selected = !allSelected);
+};
+
+// Función para calcular la fecha final del curso
+const calculateEndDate = () => {
+  if (form.start_date && course.value?.duration) {
+    const startDate = new Date(form.start_date);
+    const duration = parseInt(course.value.duration);
+    
+    // Agregar la duración en días a la fecha de inicio
+    const endDate = new Date(startDate);
+    endDate.setDate(startDate.getDate() + duration);
+    
+    // Formatear la fecha como YYYY-MM-DD para el input
+    const formattedDate = endDate.toISOString().split('T')[0];
+    form.end_date = formattedDate;
+  }
+};
+
+// Watcher para calcular automáticamente la fecha final cuando cambie la fecha de inicio
+watch(() => form.start_date, () => {
+  calculateEndDate();
+});
+
+const submit = () => {
+  form.transform(data => ({
+    ...data,
+    users: users.value.filter(u => u.selected).map(u => u.id)
+  })).post(apiTo('assign-course', { course: vroute.params.id }), {
+    onSuccess: () => {
+      Notify.success(Lang('register.assign.onSuccess'))
+      router.push(viewTo({ name: 'index' }));
+    }
+  });
+};
+
+/** Ciclos */
+onMounted(() => {
+  api.get(apiTo('show', { course: vroute.params.id }), {
+    onSuccess: (r) => {
+      course.value = r.course
+      users.value = r.course.users ?? []
+    }
+  });
+});
+</script>
+
+<template>
+  <PageHeader
+    title="Asignación de Cursos a Personal"
+  >
+    <RouterLink :to="viewTo({ name: 'index' })">
+      <IconButton
+        class="text-white"
+        icon="arrow_back"
+        :title="$t('return')"
+        filled
+      />
+    </RouterLink>
+  </PageHeader>
+  
+  <div class="w-full pb-2">
+    <p class="text-justify text-sm">Asigna cursos aprobados al personal seleccionado</p>
+  </div>
+
+  <!-- Card principal -->
+  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+    
+    <!-- Información del Curso -->
+    <div class="mb-6">
+      <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+        Curso Seleccionado
+      </label>
+      
+      <div v-if="course" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg dark:bg-primary-d dark:border-primary/20">
+        <div class="font-medium text-gray-900 dark:text-primary-dt">{{ course.name }}</div>
+        <div class="text-sm text-gray-500 dark:text-primary-dt/70">
+          {{ course.department?.name }} • {{ course.cost }} {{ course.cost_currency }}
+        </div>
+        <div v-if="course.description" class="text-sm text-gray-600 dark:text-primary-dt/80 mt-1">
+          {{ course.description }}
+        </div>
+      </div>
+      
+      <div v-else class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg dark:bg-primary-d dark:border-primary/20">
+        <div class="text-gray-500 dark:text-primary-dt/70">Cargando información del curso...</div>
+      </div>
+    </div>
+
+    <!-- Asignación de Usuarios -->
+    <div class="mb-6">
+      <div class="flex items-center justify-between mb-3">
+        <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
+          Asignar a usuarios
+        </label>
+        <button
+          type="button"
+          @click="selectAllUsers"
+          class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
+        >
+          {{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
+        </button>
+      </div>
+
+      <div class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
+        <div class="space-y-2">
+          <div
+            v-for="user in users"
+            :key="user.id"
+            @click="toggleUser(user)"
+            class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
+          >
+            <div class="flex items-center h-5">
+              <input
+                :checked="user.selected"
+                type="checkbox"
+                class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
+                @click.stop
+                @change="toggleUser(user)"
+              >
+            </div>
+            <div class="ml-3 text-sm">
+              <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
+                {{ user.name }} {{ user.paternal }} {{ user.maternal }}
+              </label>
+              <div class="text-xs text-gray-500 dark:text-primary-dt/70">
+                {{ user.email }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
+        {{ selectedUsersCount }} usuario(s) seleccionado(s)
+      </div>
+    </div>
+
+    <!-- Fechas -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+      <Input
+        v-model="form.start_date"
+        id="start_date"
+        title="dates.start"
+        type="date"
+        required
+      />
+      <Input
+        v-model="form.end_date"
+        id="end_date"
+        title="dates.end"
+        type="date"
+        required
+      />
+      <Input
+        v-model="form.exam_date"
+        id="exam_date"
+        title="exam_date"
+        type="date"
+      />
+    </div>
+
+    <!-- Botones de Acción -->
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-primary/20">
+
+      <button
+        @click="submit"
+        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2"
+      >
+        <GoogleIcon class="text-white text-xl" name="notifications" />
+        Notificar
+      </button>
+    </div>
+
+  </section>
+</template>
--- a/src/pages/Courses/Admin/Calendar.vue
+++ b/src/pages/Courses/Admin/Calendar.vue
--- a/src/pages/Courses/Admin/Index.vue
+++ b/src/pages/Courses/Admin/Index.vue
@ -0,0 +1,124 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useSearcher } from '@Services/Api';
+import { apiTo, viewTo } from './Module'
+
+import IconButton from '@Holos/Button/Icon.vue'
+import DestroyView from '@Holos/Modal/Template/Destroy.vue';
+import Table from '@Holos/NewTable.vue';
+import ShowView from './Modals/Show.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+
+/** Propiedades */
+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,
+    onError: () => models.value = []
+});
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
+            </p>
+        </div>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+        <Searcher @search="(x) => searcher.search(x)">
+        </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="pt-2 w-full">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
+            <template #head>
+                <th v-text="$t('department')" />
+                <th v-text="$t('name')" />
+                <th v-text="$t('cost')" />
+                <th v-text="$t('url')" />
+                <th v-text="$t('status')" />
+                <th class="w-32 text-center" v-text="$t('actions')" />
+            </template>
+
+            <template #body="{ items }">
+                <tr v-for="model in items" class="table-row">
+                    <td>
+                        <span class="inline-block bg-blue-100 text-blue-800 text-sm py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
+                            {{ model.department.name }}
+                        </span>
+                    </td>
+                    <td>{{ model.name }}</td>
+                    <td>{{ model.cost }} {{ model.cost_currency }}</td>
+                    <td>
+                        <a 
+                            v-if="model.url" 
+                            :href="model.url" 
+                            target="_blank"
+                            class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
+                        >
+                            Ver curso
+                        </a>
+                        <span v-else>-</span>
+                    </td>
+                    <td class="py-6">
+                        <span
+                            class="inline-block py-1 rounded-full text-xs font-semibold"
+                            :class="{
+                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
+                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
+                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
+                            }">
+                            {{ model.status_ek }}
+                        </span>
+                    </td>
+                    <td>
+                        <div class="table-actions">
+                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
+                                outline />
+                            <RouterLink class="h-fit"
+                                :to="viewTo({ name: 'assignamment', params: { id: model.id } })">
+                                <IconButton icon="task_alt" :title="$t('crud.approve')" outline />
+                            </RouterLink>
+                            <IconButton icon="delete" :title="$t('crud.destroy')"
+                                @click="destroyModal.open(model)" outline />
+                        </div>
+                    </td>
+                </tr>
+            </template>
+
+            <template #empty>
+                <td colspan="6" class="py-12 text-center">
+                    <div class="text-gray-500 dark:text-primary-dt/70">
+                        <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                        <p class="text-lg font-medium">No se encontraron cursos</p>
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+                    </div>
+                </td>
+            </template>
+        </Table>
+
+        <ShowView ref="showModal" />
+
+        <DestroyView ref="destroyModal" subtitle="certification_type"
+            :to="(course) => apiTo('destroy', { course })" @update="searcher.search()" />
+    </div>
+</template>
--- a/src/pages/Courses/Admin/Modals/Show.vue
+++ b/src/pages/Courses/Admin/Modals/Show.vue
@ -0,0 +1,114 @@
+<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 */
+const emit = defineEmits([
+    'close', 
+    'reload'
+]);
+
+/** Propiedades */
+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
+        ref="modalRef"
+        @close="close"
+    >
+        <div v-if="model">
+            <Header
+                :title="model.name"
+                :subtitle="model.certification_type"
+            >
+            </Header>
+            <div class="flex w-full p-4">
+                <GoogleIcon 
+                    class="text-xl text-success"
+                    name="school"
+                />
+                <div class="pl-3">
+                    <p class="font-bold text-lg leading-none pb-2">
+                        {{ $t('details') }}
+                    </p>
+                    <p>
+                        <b>{{ $t('name') }}: </b>
+                        {{ model.name }}
+                    </p>
+                    <p>
+                        <b>{{ $t('certification_type') }}: </b>
+                        {{ model.certification_type ?? '-' }}
+                    </p>
+                    <p>
+                        <b>{{ $t('cost') }}: </b>
+                        {{ model.cost }} {{ model.cost_currency }}
+                    </p>
+                    <p>
+                        <b>{{ $t('duration') }}: </b>
+                        {{ model.duration ?? '-' }} días
+                    </p>
+                    <p>
+                        <b>{{ $t('description') }}: </b>
+                        {{ model.description ?? '-' }}
+                    </p>
+                    <p v-if="model.url">
+                        <b>{{ $t('url') }}: </b>
+                        <a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
+                            {{ model.url }}
+                        </a>
+                    </p>
+                    <p>
+                        <b>{{ $t('certification_name') }}: </b>
+                        {{ model.certification_name ?? '-' }}
+                    </p>
+                    <p>
+                        <b>{{ $t('status') }}: </b>
+                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
+                            :class="{
+                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
+                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
+                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
+                            }">
+                            {{ model.status_ek }}
+                        </span>
+                    </p>
+                    <p>
+                        <b>{{ $t('department') }}: </b>
+                        {{ model.department?.name ?? '-' }}
+                    </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/Courses/Admin/Module.js
+++ b/src/pages/Courses/Admin/Module.js
@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`courses.admin.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.courses.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`courses.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`courses.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
--- a/src/pages/Courses/Admin/Request.vue
+++ b/src/pages/Courses/Admin/Request.vue
@ -0,0 +1,268 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import PageHeader from '@Holos/PageHeader.vue';
+import IconButton from '@Holos/Button/Icon.vue';
+import Input from '@Holos/Form/Input.vue';
+import Textarea from '@Holos/Form/Textarea.vue';
+import Selectable from '@Holos/Form/Selectable.vue';
+import PrimaryButton from '@Holos/Button/Primary.vue';
+
+/** Definiciones */
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+  name: '',
+  cost: '',
+  cost_currency: '',
+  description: '',
+  certification_name: '',
+  certification_type: '',
+  duration: '',
+  url: '',
+  department_id: '',
+  users: []
+});
+
+// Lista de departamentos y usuarios
+const departments = ref([]);
+const users = ref([]);
+const currencies = ref([]);
+
+// Computed para contar usuarios seleccionados
+const selectedUsersCount = computed(() => {
+  return users.value.filter(u => u.selected).length;
+});
+
+/** Métodos */
+function submit() {
+  form.transform(data => ({
+    ...data,
+    department_id: form.department_id?.id,
+    cost_currency: form.cost_currency?.id,
+    users: users.value.filter(u => u.selected).map(u => u.id)
+  })).post(apiTo('store'), {
+    onSuccess: () => {
+      Notify.success(Lang('register.create.onSuccess'))
+      router.push(viewTo({ name: 'index' }));
+    }
+  });
+}
+
+// Función para cargar usuarios cuando se seleccione un departamento
+const loadUsersByDepartment = () => {
+  api.catalog({
+    'user:byDepartment': form.department_id?.id
+  }, {
+    onSuccess: (r) => users.value = r['user:byDepartment'] ?? []
+  });
+};
+
+// Funciones para manejar selección de usuarios
+const toggleUser = (user) => {
+  user.selected = !user.selected;
+};
+
+const selectAllUsers = () => {
+  const allSelected = users.value.every(u => u.selected);
+  users.value.forEach(u => u.selected = !allSelected);
+};
+
+// Watcher para cargar usuarios automáticamente cuando cambie el departamento
+watch(() => form.department_id, () => {
+  loadUsersByDepartment();
+});
+
+/** Ciclos */
+onMounted(() => {
+  api.catalog({
+    'department:all': null,
+    'currency:all': null
+  }, {
+    onSuccess: (r) => {
+      departments.value = r['department:all'] ?? []
+      currencies.value = r['currency:all'] ?? []
+    }
+  });
+});
+</script>
+
+<template>
+  <PageHeader
+    title="Solicitud de Nuevo Curso"
+  >
+    <RouterLink :to="viewTo({ name: 'index' })">
+      <IconButton
+        class="text-white"
+        icon="arrow_back"
+        :title="$t('return')"
+        filled
+      />
+    </RouterLink>
+  </PageHeader>
+  
+  <div class="w-full pb-2">
+    <p class="text-justify text-sm">Completa la información para solicitar un nuevo curso de capacitación</p>
+  </div>
+
+  <!-- Card principal -->
+  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+    
+    <!-- Formulario -->
+    <form @submit.prevent="submit" class="space-y-6">
+      
+      <!-- Campos del formulario en dos columnas -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        
+        <!-- Columna izquierda -->
+        <div class="space-y-6">
+          <Input
+            v-model="form.name"
+            id="name"
+            title="name"
+            :onError="form.errors.name"
+            required
+          />
+          <Input
+            v-model="form.cost"
+            id="cost"
+            title="cost"
+            :onError="form.errors.cost"
+            type="number"
+            min="0"
+            step="0.01"
+            required
+          />
+          <Selectable
+            v-model="form.cost_currency"
+            id="cost_currency"
+            title="currency"
+            :onError="form.errors.cost_currency"
+            :options="currencies"
+          />
+          <Textarea
+            v-model="form.description"
+            id="description"
+            title="description"
+            :onError="form.errors.description"
+            required
+          />
+          <Input
+            v-model="form.certification_name"
+            id="certification_name"
+            title="certification_name"
+            :onError="form.errors.certification_name"
+          />
+        </div>
+
+         <!-- Columna derecha -->
+         <div class="space-y-6">
+           <Selectable
+             v-model="form.department_id"
+             id="department_id"
+             title="department"
+             :onError="form.errors.department_id"
+             :options="departments"
+             required
+           />
+           <Input
+             v-model="form.certification_type"
+             id="certification_type"
+             title="certification_type"
+             :onError="form.errors.certification_type"
+           />
+           <Input
+             v-model="form.duration"
+             id="duration"
+             title="duration"
+             :onError="form.errors.duration"
+             type="number"
+             min="1"
+             required
+           />
+           <Input
+             v-model="form.url"
+             id="url"
+             title="url"
+             :onError="form.errors.url"
+             type="url"
+           />
+         </div>
+      </div>
+
+       <!-- Sección de Personal a Capacitar -->
+       <div class="mt-8">
+         <div class="flex items-center justify-between mb-3">
+           <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
+             Personal a capacitar
+           </label>
+           <button
+             v-if="users.length > 0"
+             type="button"
+             @click="selectAllUsers"
+             class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
+           >
+             {{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
+           </button>
+         </div>
+
+         <div v-if="users.length > 0" class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
+           <div class="space-y-2">
+             <div
+               v-for="user in users"
+               :key="user.id"
+               @click="toggleUser(user)"
+               class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
+             >
+               <div class="flex items-center h-5">
+                 <input
+                   :checked="user.selected"
+                   type="checkbox"
+                   class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
+                   @click.stop
+                   @change="toggleUser(user)"
+                 >
+               </div>
+               <div class="ml-3 text-sm">
+                 <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
+                   {{ user.name }} {{ user.paternal }} {{ user.maternal }}
+                 </label>
+                 <div class="text-xs text-gray-500 dark:text-primary-dt/70">
+                   {{ user.email }}
+                 </div>
+               </div>
+             </div>
+           </div>
+         </div>
+
+         <div v-else class="border border-gray-300 rounded-lg p-4 dark:bg-primary-d dark:border-primary/20">
+           <div class="text-center text-gray-500 dark:text-primary-dt/70">
+             <GoogleIcon class="w-8 h-8 mx-auto mb-2 text-gray-400" name="people" />
+             <p>Selecciona un departamento para ver el personal disponible</p>
+           </div>
+         </div>
+
+         <div v-if="users.length > 0" class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
+           {{ selectedUsersCount }} usuario(s) seleccionado(s)
+         </div>
+       </div>
+
+      <!-- Botón de Enviar -->
+      <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
+        <PrimaryButton
+          type="submit"
+          :processing="form.processing"
+        >
+          Enviar Solicitud
+        </PrimaryButton>
+      </div>
+
+    </form>
+
+  </section>
+</template>
--- a/src/pages/Courses/Assignamment.vue
+++ b/src/pages/Courses/Assignamment.vue
@ -1,281 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-// Datos de cursos aprobados
-const approvedCourses = ref([
-  {
-    id: 1,
-    name: 'React Avanzado y GraphQL',
-    area: 'Desarrollo',
-    cost: 499.00
-  },
-  {
-    id: 2,
-    name: 'Certified Ethical Hacker (CEH)',
-    area: 'Seguridad',
-    cost: 1199.00
-  },
-  {
-    id: 3,
-    name: 'Cisco CCNA 200-301',
-    area: 'Redes',
-    cost: 300.00
-  }
-]);
-
-// Lista de personal
-const personnel = ref([
-  { id: 1, name: 'Ana García', selected: false },
-  { id: 2, name: 'Carlos Mendoza', selected: false },
-  { id: 3, name: 'Laura Jiménez', selected: false },
-  { id: 4, name: 'Luis Martínez', selected: false },
-  { id: 5, name: 'Carla Torres', selected: false },
-  { id: 6, name: 'Pedro Ramírez', selected: false }
-]);
-
-// Estado del formulario
-const selectedCourse = ref(approvedCourses.value[0]);
-const startDate = ref('');
-const endDate = ref('');
-const examDate = ref('');
-const showDropdown = ref(false);
-
-// Computed para mostrar el curso seleccionado
-const selectedCourseDisplay = computed(() => {
-  if (selectedCourse.value) {
-    return `${selectedCourse.value.name} (${selectedCourse.value.area})`;
-  }
-  return 'Seleccionar curso...';
-});
-
-// Computed para contar personal seleccionado
-const selectedPersonnelCount = computed(() => {
-  return personnel.value.filter(p => p.selected).length;
-});
-
-// Funciones
-const togglePersonnel = (person) => {
-  person.selected = !person.selected;
-};
-
-const selectAllPersonnel = () => {
-  const allSelected = personnel.value.every(p => p.selected);
-  personnel.value.forEach(p => p.selected = !allSelected);
-};
-
-const selectCourse = (course) => {
-  selectedCourse.value = course;
-  showDropdown.value = false;
-};
-
-const saveAssignment = () => {
-  const selectedPersonnelList = personnel.value.filter(p => p.selected);
-  console.log('Guardar asignación:', {
-    course: selectedCourse.value,
-    personnel: selectedPersonnelList,
-    startDate: startDate.value,
-    endDate: endDate.value,
-    examDate: examDate.value
-  });
-  // Aquí implementarías la lógica para guardar
-};
-
-const notifyPersonnel = () => {
-  const selectedPersonnelList = personnel.value.filter(p => p.selected);
-  console.log('Notificar personal:', {
-    course: selectedCourse.value,
-    personnel: selectedPersonnelList
-  });
-  // Aquí implementarías la lógica para notificar
-};
-
-const formatCurrency = (amount) => {
-  return new Intl.NumberFormat('es-MX', {
-    style: 'currency',
-    currency: 'USD'
-  }).format(amount);
-};
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-      <div>
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Asignación de Cursos a Personal</h1>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Asigna cursos aprobados al personal seleccionado</p>
-      </div>
-    </div>
-
-    <!-- Card principal -->
-    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-      
-      <!-- Selección de Curso -->
-      <div class="mb-6">
-        <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-          Seleccionar Curso Aprobado
-        </label>
-        
-        <div class="relative">
-          <button
-            @click="showDropdown = !showDropdown"
-            class="w-full px-4 py-3 text-left bg-white border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-          >
-            <span class="block truncate">{{ selectedCourseDisplay }}</span>
-            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-              </svg>
-            </span>
-          </button>
-
-          <!-- Dropdown -->
-          <div 
-            v-if="showDropdown"
-            class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-primary-d dark:border-primary/20"
-          >
-            <div class="max-h-60 overflow-auto">
-              <div
-                v-for="course in approvedCourses"
-                :key="course.id"
-                @click="selectCourse(course)"
-                class="px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 border-b border-gray-100 dark:border-primary/20 last:border-b-0"
-              >
-                <div class="font-medium text-gray-900 dark:text-primary-dt">{{ course.name }}</div>
-                <div class="text-sm text-gray-500 dark:text-primary-dt/70">
-                  {{ course.area }} • {{ formatCurrency(course.cost) }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Asignación de Personal -->
-      <div class="mb-6">
-        <div class="flex items-center justify-between mb-3">
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
-            Asignar a personal
-          </label>
-          <button
-            @click="selectAllPersonnel"
-            class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
-          >
-            {{ personnel.every(p => p.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
-          </button>
-        </div>
-
-        <div class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
-          <div class="space-y-2">
-            <div
-              v-for="person in personnel"
-              :key="person.id"
-              @click="togglePersonnel(person)"
-              class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
-            >
-              <div class="flex items-center h-5">
-                <input
-                  :checked="person.selected"
-                  type="checkbox"
-                  class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
-                  @click.stop
-                  @change="togglePersonnel(person)"
-                >
-              </div>
-              <div class="ml-3 text-sm">
-                <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
-                  {{ person.name }}
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
-          {{ selectedPersonnelCount }} persona(s) seleccionada(s)
-        </div>
-      </div>
-
-      <!-- Fechas -->
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-        <!-- Fecha de Inicio -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-            Fecha de Inicio
-          </label>
-          <div class="relative">
-            <input
-              v-model="startDate"
-              type="date"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-            >
-            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-              </svg>
-            </div>
-          </div>
-        </div>
-
-        <!-- Fecha de Fin -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-            Fecha de Fin
-          </label>
-          <div class="relative">
-            <input
-              v-model="endDate"
-              type="date"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-            >
-            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-              </svg>
-            </div>
-          </div>
-        </div>
-
-        <!-- Fecha de Examen -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-            Fecha de Examen
-          </label>
-          <div class="relative">
-            <input
-              v-model="examDate"
-              type="date"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-            >
-            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
-              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Botones de Acción -->
-      <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-primary/20">
-        <button
-          @click="saveAssignment"
-          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt dark:hover:bg-primary/10"
-        >
-          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="save" />
-          Guardar
-        </button>
-
-        <button
-          @click="notifyPersonnel"
-          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2"
-        >
-          <GoogleIcon class="text-white text-xl" name="notifications" />
-          Notificar
-        </button>
-      </div>
-
-    </section>
-  </div>
-</template>
--- a/src/pages/Courses/Coordinator/Index.vue
+++ b/src/pages/Courses/Coordinator/Index.vue
@ -0,0 +1,111 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useSearcher } from '@Services/Api';
+import { apiTo, viewTo } from './Module'
+
+import IconButton from '@Holos/Button/Icon.vue'
+import Table from '@Holos/NewTable.vue';
+import ShowView from './Modals/Show.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
+
+/** Propiedades */
+const models = ref([]);
+
+/** Referencias */
+const showModal = ref(false);
+
+/** Métodos */
+const searcher = useSearcher({
+    url: apiTo('index'),
+    onSuccess: (r) => models.value = r.models,
+    onError: () => models.value = []
+});
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
+            </p>
+        </div>
+        <RouterLink :to="viewTo({ name: 'request' })">
+            <Adding text="Nuevo Curso" />
+        </RouterLink>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+        <Searcher @search="(x) => searcher.search(x)">
+        </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="pt-2 w-full">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
+            <template #head>
+                <th v-text="$t('name')" />
+                <th v-text="$t('cost')" />
+                <th v-text="$t('url')" />
+                <th v-text="$t('status')" />
+                <th class="w-32 text-center" v-text="$t('actions')" />
+            </template>
+
+            <template #body="{ items }">
+                <tr v-for="model in items" class="table-row">
+                    <td>{{ model.name }}</td>
+                    <td>{{ model.cost }} {{ model.cost_currency }}</td>
+                    <td>
+                        <a 
+                            v-if="model.url" 
+                            :href="model.url" 
+                            target="_blank"
+                            class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
+                        >
+                            Ver curso
+                        </a>
+                        <span v-else>-</span>
+                    </td>
+                    <td class="py-6">
+                        <span
+                            class="inline-block py-1 rounded-full text-xs font-semibold"
+                            :class="{
+                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
+                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
+                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
+                            }">
+                            {{ model.status_ek }}
+                        </span>
+                    </td>
+                    <td>
+                        <div class="table-actions">
+                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
+                                outline />
+                        </div>
+                    </td>
+                </tr>
+            </template>
+
+            <template #empty>
+                <td colspan="6" class="py-12 text-center">
+                    <div class="text-gray-500 dark:text-primary-dt/70">
+                        <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                        <p class="text-lg font-medium">No se encontraron cursos</p>
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+                    </div>
+                </td>
+            </template>
+        </Table>
+
+        <ShowView ref="showModal" />
+    </div>
+</template>
--- a/src/pages/Courses/Coordinator/Modals/Show.vue
+++ b/src/pages/Courses/Coordinator/Modals/Show.vue
@ -0,0 +1,114 @@
+<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 */
+const emit = defineEmits([
+    'close', 
+    'reload'
+]);
+
+/** Propiedades */
+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
+        ref="modalRef"
+        @close="close"
+    >
+        <div v-if="model">
+            <Header
+                :title="model.name"
+                :subtitle="model.certification_type"
+            >
+            </Header>
+            <div class="flex w-full p-4">
+                <GoogleIcon 
+                    class="text-xl text-success"
+                    name="school"
+                />
+                <div class="pl-3">
+                    <p class="font-bold text-lg leading-none pb-2">
+                        {{ $t('details') }}
+                    </p>
+                    <p>
+                        <b>{{ $t('name') }}: </b>
+                        {{ model.name }}
+                    </p>
+                    <p>
+                        <b>{{ $t('certification_type') }}: </b>
+                        {{ model.certification_type ?? '-' }}
+                    </p>
+                    <p>
+                        <b>{{ $t('cost') }}: </b>
+                        {{ model.cost }} {{ model.cost_currency }}
+                    </p>
+                    <p>
+                        <b>{{ $t('duration') }}: </b>
+                        {{ model.duration ?? '-' }} días
+                    </p>
+                    <p>
+                        <b>{{ $t('description') }}: </b>
+                        {{ model.description ?? '-' }}
+                    </p>
+                    <p v-if="model.url">
+                        <b>{{ $t('url') }}: </b>
+                        <a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
+                            {{ model.url }}
+                        </a>
+                    </p>
+                    <p>
+                        <b>{{ $t('certification_name') }}: </b>
+                        {{ model.certification_name ?? '-' }}
+                    </p>
+                    <p>
+                        <b>{{ $t('status') }}: </b>
+                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
+                            :class="{
+                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
+                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
+                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
+                            }">
+                            {{ model.status_ek }}
+                        </span>
+                    </p>
+                    <p>
+                        <b>{{ $t('department') }}: </b>
+                        {{ model.department?.name ?? '-' }}
+                    </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/Courses/Coordinator/Module.js
+++ b/src/pages/Courses/Coordinator/Module.js
@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`courses.coordinator.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `courses.coordinator.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`courses.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`courses.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
--- a/src/pages/Courses/Coordinator/Request.vue
+++ b/src/pages/Courses/Coordinator/Request.vue
@ -0,0 +1,268 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import PageHeader from '@Holos/PageHeader.vue';
+import IconButton from '@Holos/Button/Icon.vue';
+import Input from '@Holos/Form/Input.vue';
+import Textarea from '@Holos/Form/Textarea.vue';
+import Selectable from '@Holos/Form/Selectable.vue';
+import PrimaryButton from '@Holos/Button/Primary.vue';
+
+/** Definiciones */
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+  name: '',
+  cost: '',
+  cost_currency: '',
+  description: '',
+  certification_name: '',
+  certification_type: '',
+  duration: '',
+  url: '',
+  department_id: '',
+  users: []
+});
+
+// Lista de departamentos y usuarios
+const departments = ref([]);
+const users = ref([]);
+const currencies = ref([]);
+
+// Computed para contar usuarios seleccionados
+const selectedUsersCount = computed(() => {
+  return users.value.filter(u => u.selected).length;
+});
+
+/** Métodos */
+function submit() {
+  form.transform(data => ({
+    ...data,
+    department_id: form.department_id?.id,
+    cost_currency: form.cost_currency?.id,
+    users: users.value.filter(u => u.selected).map(u => u.id)
+  })).post(apiTo('store'), {
+    onSuccess: () => {
+      Notify.success(Lang('register.create.onSuccess'))
+      router.push(viewTo({ name: 'index' }));
+    }
+  });
+}
+
+// Función para cargar usuarios cuando se seleccione un departamento
+const loadUsersByDepartment = () => {
+  api.catalog({
+    'user:byDepartment': form.department_id?.id
+  }, {
+    onSuccess: (r) => users.value = r['user:byDepartment'] ?? []
+  });
+};
+
+// Funciones para manejar selección de usuarios
+const toggleUser = (user) => {
+  user.selected = !user.selected;
+};
+
+const selectAllUsers = () => {
+  const allSelected = users.value.every(u => u.selected);
+  users.value.forEach(u => u.selected = !allSelected);
+};
+
+// Watcher para cargar usuarios automáticamente cuando cambie el departamento
+watch(() => form.department_id, () => {
+  loadUsersByDepartment();
+});
+
+/** Ciclos */
+onMounted(() => {
+  api.catalog({
+    'department:all': null,
+    'currency:all': null
+  }, {
+    onSuccess: (r) => {
+      departments.value = r['department:all'] ?? []
+      currencies.value = r['currency:all'] ?? []
+    }
+  });
+});
+</script>
+
+<template>
+  <PageHeader
+    title="Solicitud de Nuevo Curso"
+  >
+    <RouterLink :to="viewTo({ name: 'index' })">
+      <IconButton
+        class="text-white"
+        icon="arrow_back"
+        :title="$t('return')"
+        filled
+      />
+    </RouterLink>
+  </PageHeader>
+  
+  <div class="w-full pb-2">
+    <p class="text-justify text-sm">Completa la información para solicitar un nuevo curso de capacitación</p>
+  </div>
+
+  <!-- Card principal -->
+  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+    
+    <!-- Formulario -->
+    <form @submit.prevent="submit" class="space-y-6">
+      
+      <!-- Campos del formulario en dos columnas -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        
+        <!-- Columna izquierda -->
+        <div class="space-y-6">
+          <Input
+            v-model="form.name"
+            id="name"
+            title="name"
+            :onError="form.errors.name"
+            required
+          />
+          <Input
+            v-model="form.cost"
+            id="cost"
+            title="cost"
+            :onError="form.errors.cost"
+            type="number"
+            min="0"
+            step="0.01"
+            required
+          />
+          <Selectable
+            v-model="form.cost_currency"
+            id="cost_currency"
+            title="currency"
+            :onError="form.errors.cost_currency"
+            :options="currencies"
+          />
+          <Textarea
+            v-model="form.description"
+            id="description"
+            title="description"
+            :onError="form.errors.description"
+            required
+          />
+          <Input
+            v-model="form.certification_name"
+            id="certification_name"
+            title="certification_name"
+            :onError="form.errors.certification_name"
+          />
+        </div>
+
+         <!-- Columna derecha -->
+         <div class="space-y-6">
+           <Selectable
+             v-model="form.department_id"
+             id="department_id"
+             title="department"
+             :onError="form.errors.department_id"
+             :options="departments"
+             required
+           />
+           <Input
+             v-model="form.certification_type"
+             id="certification_type"
+             title="certification_type"
+             :onError="form.errors.certification_type"
+           />
+           <Input
+             v-model="form.duration"
+             id="duration"
+             title="duration"
+             :onError="form.errors.duration"
+             type="number"
+             min="1"
+             required
+           />
+           <Input
+             v-model="form.url"
+             id="url"
+             title="url"
+             :onError="form.errors.url"
+             type="url"
+           />
+         </div>
+      </div>
+
+       <!-- Sección de Personal a Capacitar -->
+       <div class="mt-8">
+         <div class="flex items-center justify-between mb-3">
+           <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
+             Personal a capacitar
+           </label>
+           <button
+             v-if="users.length > 0"
+             type="button"
+             @click="selectAllUsers"
+             class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
+           >
+             {{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
+           </button>
+         </div>
+
+         <div v-if="users.length > 0" class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
+           <div class="space-y-2">
+             <div
+               v-for="user in users"
+               :key="user.id"
+               @click="toggleUser(user)"
+               class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
+             >
+               <div class="flex items-center h-5">
+                 <input
+                   :checked="user.selected"
+                   type="checkbox"
+                   class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
+                   @click.stop
+                   @change="toggleUser(user)"
+                 >
+               </div>
+               <div class="ml-3 text-sm">
+                 <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
+                   {{ user.name }} {{ user.paternal }} {{ user.maternal }}
+                 </label>
+                 <div class="text-xs text-gray-500 dark:text-primary-dt/70">
+                   {{ user.email }}
+                 </div>
+               </div>
+             </div>
+           </div>
+         </div>
+
+         <div v-else class="border border-gray-300 rounded-lg p-4 dark:bg-primary-d dark:border-primary/20">
+           <div class="text-center text-gray-500 dark:text-primary-dt/70">
+             <GoogleIcon class="w-8 h-8 mx-auto mb-2 text-gray-400" name="people" />
+             <p>Selecciona un departamento para ver el personal disponible</p>
+           </div>
+         </div>
+
+         <div v-if="users.length > 0" class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
+           {{ selectedUsersCount }} usuario(s) seleccionado(s)
+         </div>
+       </div>
+
+      <!-- Botón de Enviar -->
+      <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
+        <PrimaryButton
+          type="submit"
+          :processing="form.processing"
+        >
+          Enviar Solicitud
+        </PrimaryButton>
+      </div>
+
+    </form>
+
+  </section>
+</template>
--- a/src/pages/Courses/Employee/Index.vue
+++ b/src/pages/Courses/Employee/Index.vue
@ -0,0 +1,93 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useSearcher } from '@Services/Api';
+import { apiTo } from './Module'
+
+import IconButton from '@Holos/Button/Icon.vue'
+import Table from '@Holos/NewTable.vue';
+import ShowView from './Modals/Show.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+
+/** Propiedades */
+const models = ref([]);
+
+/** Referencias */
+const showModal = ref(false);
+
+/** Métodos */
+const searcher = useSearcher({
+    url: apiTo('index'),
+    onSuccess: (r) => models.value = r.models,
+    onError: () => models.value = []
+});
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
+            </p>
+        </div>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+        <Searcher @search="(x) => searcher.search(x)">
+        </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="pt-2 w-full">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
+            <template #head>
+                <th v-text="$t('name')" />
+                <th v-text="$t('url')" />
+                <th class="w-32 text-center" v-text="$t('actions')" />
+            </template>
+
+            <template #body="{ items }">
+                <tr v-for="model in items" class="table-row">
+                    <td>{{ model.course.name }}</td>
+                    <td>
+                        <a 
+                            v-if="model.course.url" 
+                            :href="model.course.url" 
+                            target="_blank"
+                            class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
+                        >
+                            Ver curso
+                        </a>
+                        <span v-else>-</span>
+                    </td>
+                    <td>
+                        <div class="table-actions">
+                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model.course)"
+                                outline />
+                        </div>
+                    </td>
+                </tr>
+            </template>
+
+            <template #empty>
+                <td colspan="6" class="py-12 text-center">
+                    <div class="text-gray-500 dark:text-primary-dt/70">
+                        <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                        <p class="text-lg font-medium">No se encontraron cursos</p>
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+                    </div>
+                </td>
+            </template>
+        </Table>
+
+        <ShowView ref="showModal" />
+    </div>
+</template>
--- a/src/pages/Courses/Employee/Modals/Show.vue
+++ b/src/pages/Courses/Employee/Modals/Show.vue
@ -0,0 +1,114 @@
+<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 */
+const emit = defineEmits([
+    'close', 
+    'reload'
+]);
+
+/** Propiedades */
+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
+        ref="modalRef"
+        @close="close"
+    >
+        <div v-if="model">
+            <Header
+                :title="model.name"
+                :subtitle="model.certification_type"
+            >
+            </Header>
+            <div class="flex w-full p-4">
+                <GoogleIcon 
+                    class="text-xl text-success"
+                    name="school"
+                />
+                <div class="pl-3">
+                    <p class="font-bold text-lg leading-none pb-2">
+                        {{ $t('details') }}
+                    </p>
+                    <p>
+                        <b>{{ $t('name') }}: </b>
+                        {{ model.name }}
+                    </p>
+                    <p>
+                        <b>{{ $t('certification_type') }}: </b>
+                        {{ model.certification_type ?? '-' }}
+                    </p>
+                    <p>
+                        <b>{{ $t('cost') }}: </b>
+                        {{ model.cost }} {{ model.cost_currency }}
+                    </p>
+                    <p>
+                        <b>{{ $t('duration') }}: </b>
+                        {{ model.duration ?? '-' }} días
+                    </p>
+                    <p>
+                        <b>{{ $t('description') }}: </b>
+                        {{ model.description ?? '-' }}
+                    </p>
+                    <p v-if="model.url">
+                        <b>{{ $t('url') }}: </b>
+                        <a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
+                            {{ model.url }}
+                        </a>
+                    </p>
+                    <p>
+                        <b>{{ $t('certification_name') }}: </b>
+                        {{ model.certification_name ?? '-' }}
+                    </p>
+                    <p>
+                        <b>{{ $t('status') }}: </b>
+                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
+                            :class="{
+                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
+                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
+                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
+                            }">
+                            {{ model.status_ek }}
+                        </span>
+                    </p>
+                    <p>
+                        <b>{{ $t('department') }}: </b>
+                        {{ model.department?.name ?? '-' }}
+                    </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/Courses/Employee/Module.js
+++ b/src/pages/Courses/Employee/Module.js
@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`courses.employee.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `courses.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`courses.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`courses.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
--- a/src/pages/Courses/Index.vue
+++ b/src/pages/Courses/Index.vue
@ -1,187 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-// Datos de ejemplo de los cursos
-const courses = ref([
-  {
-    id: 1,
-    area: 'Desarrollo',
-    courseName: 'React Avanzado y GraphQL',
-    unitCost: 499.00,
-    url: 'https://example.com/react-avanzado',
-    status: 'pending'
-  },
-  {
-    id: 2,
-    area: 'Seguridad',
-    courseName: 'Certified Ethical Hacker (CEH)',
-    unitCost: 1199.00,
-    url: 'https://example.com/ceh',
-    status: 'pending'
-  },
-  {
-    id: 3,
-    area: 'Redes',
-    courseName: 'Cisco CCNA 200-301',
-    unitCost: 300.00,
-    url: 'https://example.com/ccna',
-    status: 'pending'
-  }
-]);
-
-// Funciones para las acciones
-const viewCourse = (course) => {
-  console.log('Ver curso:', course.courseName);
-  // Aquí puedes implementar la lógica para ver el curso
-};
-
-const approveCourse = (course) => {
-  console.log('Aprobar curso:', course.courseName);
-  course.status = 'approved';
-  // Aquí puedes implementar la lógica para aprobar el curso
-};
-
-const rejectCourse = (course) => {
-  console.log('Rechazar curso:', course.courseName);
-  course.status = 'rejected';
-  // Aquí puedes implementar la lógica para rechazar el curso
-};
-
-const formatCurrency = (amount) => {
-  return new Intl.NumberFormat('es-MX', {
-    style: 'currency',
-    currency: 'USD'
-  }).format(amount);
-};
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-      <div>
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Gestión de Solicitudes de Capacitación</h1>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Administra y aprueba las solicitudes de cursos de capacitación</p>
-      </div>
-    </div>
-
-    <!-- Card principal con tabla -->
-    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-      <!-- Tabla de cursos -->
-      <div class="overflow-x-auto">
-        <table class="w-full">
-          <thead>
-            <tr class="border-b border-gray-100 dark:border-primary/20">
-              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Área</th>
-              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Nombre del Curso</th>
-              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Costo Unitario</th>
-              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Url</th>
-              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Opciones</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr 
-              v-for="course in courses" 
-              :key="course.id"
-              class="border-b border-gray-50 dark:border-primary/10 hover:bg-gray-50 dark:hover:bg-primary/5"
-            >
-              <!-- Área -->
-              <td class="py-4 px-4">
-                <span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
-                  {{ course.area }}
-                </span>
-              </td>
-
-              <!-- Nombre del curso -->
-              <td class="py-4 px-4">
-                <div class="font-medium text-gray-900 dark:text-primary-dt">
-                  {{ course.courseName }}
-                </div>
-              </td>
-
-              <!-- Costo unitario -->
-              <td class="py-4 px-4">
-                <div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
-                  {{ formatCurrency(course.unitCost) }}
-                </div>
-              </td>
-
-              <!-- URL -->
-              <td class="py-4 px-4">
-                <a 
-                  :href="course.url" 
-                  target="_blank"
-                  class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
-                >
-                  Ver curso
-                </a>
-              </td>
-
-              <!-- Opciones -->
-              <td class="py-4 px-4">
-                <div class="flex items-center gap-2">
-                  <!-- Botón Ver -->
-                  <button 
-                    @click="viewCourse(course)"
-                    class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-primary-dt dark:hover:bg-primary/10"
-                    title="Ver detalles"
-                  >
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-                    </svg>
-                  </button>
-
-                  <!-- Botón Aprobar -->
-                  <button 
-                    @click="approveCourse(course)"
-                    class="p-2 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-green-400 dark:hover:bg-green-900/20"
-                    title="Aprobar curso"
-                  >
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                    </svg>
-                  </button>
-
-                  <!-- Botón Rechazar -->
-                  <button 
-                    @click="rejectCourse(course)"
-                    class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-red-400 dark:hover:bg-red-900/20"
-                    title="Rechazar curso"
-                  >
-                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                    </svg>
-                  </button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Footer con estadísticas -->
-      <div class="mt-6 border-t border-gray-100 pt-4 flex items-center justify-between dark:border-primary/20">
-        <div class="text-sm text-gray-500 dark:text-primary-dt/70">
-          Mostrando {{ courses.length }} solicitudes
-        </div>
-        
-        <div class="flex items-center gap-4">
-          <div class="flex items-center gap-2 text-sm">
-            <span class="w-3 h-3 bg-yellow-400 rounded-full"></span>
-            <span class="text-gray-600 dark:text-primary-dt/70">Pendientes: {{ courses.filter(c => c.status === 'pending').length }}</span>
-          </div>
-          <div class="flex items-center gap-2 text-sm">
-            <span class="w-3 h-3 bg-green-400 rounded-full"></span>
-            <span class="text-gray-600 dark:text-primary-dt/70">Aprobadas: {{ courses.filter(c => c.status === 'approved').length }}</span>
-          </div>
-          <div class="flex items-center gap-2 text-sm">
-            <span class="w-3 h-3 bg-red-400 rounded-full"></span>
-            <span class="text-gray-600 dark:text-primary-dt/70">Rechazadas: {{ courses.filter(c => c.status === 'rejected').length }}</span>
-          </div>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
--- a/src/pages/Courses/Request.vue
+++ b/src/pages/Courses/Request.vue
@ -1,232 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-// Estado del formulario
-const formData = ref({
-  courseName: '',
-  cost: '',
-  description: '',
-  certificationName: '',
-  certificationType: '',
-  duration: '',
-  courseUrl: ''
-});
-
-// Lista de personal a capacitar
-const personnelToTrain = ref([
-  { name: 'Ana García', department: 'Desarrollo' },
-  { name: 'Luis Martínez', department: 'Redes' },
-  { name: 'Carla Torres', department: 'Sistemas' },
-  { name: 'Pedro Ramírez', department: 'Seguridad' },
-  { name: 'Sofía Hernandez', department: 'Ventas' }
-]);
-
-// Función para enviar la solicitud
-const submitRequest = () => {
-  console.log('Enviar solicitud:', formData.value);
-  
-  // Validación básica
-  if (!formData.value.courseName || !formData.value.cost || !formData.value.description) {
-    alert('Por favor, completa todos los campos obligatorios');
-    return;
-  }
-  
-  // Aquí implementarías la lógica para enviar la solicitud
-  alert('Solicitud enviada correctamente');
-  
-  // Limpiar formulario
-  formData.value = {
-    courseName: '',
-    cost: '',
-    description: '',
-    certificationName: '',
-    certificationType: '',
-    duration: '',
-    courseUrl: ''
-  };
-};
-
-// Función para validar URL
-const isValidUrl = (url) => {
-  if (!url) return true; // Campo opcional
-  try {
-    new URL(url);
-    return true;
-  } catch {
-    return false;
-  }
-};
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-      <div>
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Solicitud de Nuevo Curso</h1>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Completa la información para solicitar un nuevo curso de capacitación</p>
-      </div>
-    </div>
-
-    <!-- Card principal -->
-    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-      
-      <!-- Formulario -->
-      <form @submit.prevent="submitRequest" class="space-y-6">
-        
-        <!-- Campos del formulario en dos columnas -->
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          
-          <!-- Columna izquierda -->
-          <div class="space-y-6">
-            
-            <!-- Nombre del Curso -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-                Nombre del Curso *
-              </label>
-              <input
-                v-model="formData.courseName"
-                type="text"
-                required
-                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-                placeholder="Ingresa el nombre del curso"
-              >
-            </div>
-
-            <!-- Costo (USD) -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-                Costo (USD) *
-              </label>
-              <input
-                v-model="formData.cost"
-                type="number"
-                required
-                min="0"
-                step="0.01"
-                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-                placeholder="0.00"
-              >
-            </div>
-
-            <!-- Breve descripción del curso -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-                Breve descripción del curso *
-              </label>
-              <textarea
-                v-model="formData.description"
-                required
-                rows="4"
-                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-                placeholder="Describe brevemente el contenido y objetivos del curso"
-              ></textarea>
-            </div>
-
-            <!-- Nombre de la certificación a obtener -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-                Nombre de la certificación a obtener
-              </label>
-              <input
-                v-model="formData.certificationName"
-                type="text"
-                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-                placeholder="Ej: Certificación AWS Solutions Architect"
-              >
-            </div>
-
-          </div>
-
-          <!-- Columna derecha -->
-          <div class="space-y-6">
-            
-            <!-- Tipo de Certificación -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-                Tipo de Certificación
-              </label>
-              <input
-                v-model="formData.certificationType"
-                type="text"
-                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-                placeholder="Ej: Técnica, Profesional, Oficial"
-              >
-            </div>
-
-            <!-- Duración (días) -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-                Duración (días)
-              </label>
-              <input
-                v-model="formData.duration"
-                type="number"
-                min="1"
-                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-                placeholder="Número de días"
-              >
-            </div>
-
-            <!-- URL del curso -->
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-                URL del curso
-              </label>
-              <input
-                v-model="formData.courseUrl"
-                type="url"
-                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-                placeholder="https://ejemplo.com/curso"
-              >
-            </div>
-
-          </div>
-        </div>
-
-        <!-- Sección de Personal a Capacitar -->
-        <div class="mt-8">
-          <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center gap-2 dark:text-primary-dt">
-            <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="people" />
-            Personal a capacitar
-          </h3>
-
-          <div class="bg-gray-50 rounded-lg p-4 dark:bg-primary/5">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-              <div
-                v-for="person in personnelToTrain"
-                :key="person.name"
-                class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200 dark:bg-primary-d dark:border-primary/20"
-              >
-                <div>
-                  <div class="font-medium text-gray-900 dark:text-primary-dt">{{ person.name }}</div>
-                  <div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ person.department }}</div>
-                </div>
-                <div class="flex-shrink-0">
-                  <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
-                    {{ person.department }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Botón de Enviar -->
-        <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
-          <button
-            type="submit"
-            class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2 transition-colors"
-          >
-            <GoogleIcon class="text-white text-xl" name="send" />
-            Enviar Solicitud
-          </button>
-        </div>
-
-      </form>
-
-    </section>
-  </div>
-</template>
--- a/src/pages/Dashboard/Admin.vue
+++ b/src/pages/Dashboard/Admin.vue
@ -1,147 +1,150 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref, onMounted } from 'vue';
+import { api } from '@Services/Api';
+import { apiTo } from './Module';
+
 import GoogleIcon from '@Shared/GoogleIcon.vue';
 import VueApexCharts from 'vue3-apexcharts';

-// Props
-const props = defineProps({
-    adminInfo: {
-        type: Object,
-        default: () => ({})
-    },
-    charts: {
-        type: Object,
-        default: () => ({})
-    }
-});
+// Propiedades
+const adminInfo       = ref({});
+const vacationsCharts = ref({});

-// Datos procesados para los charts
-const chartData = computed(() => {
-    // Datos para el gráfico de línea (Solicitudes por Mes)
-    const monthlyData = props.charts.requests_by_month || [];
-    const lineChartCategories = monthlyData.map(item => item.month_name);
-    const lineChartSeries = [{
-        name: 'Solicitudes',
-        data: monthlyData.map(item => item.total_requests)
-    }];
-
-    // Datos para el gráfico de dona (Solicitudes por Departamento)
-    const departmentData = props.charts.requests_by_department || [];
-    const donutChartLabels = departmentData.map(item => item.department_name);
-    const donutChartSeries = departmentData.map(item => item.total_requests);
-
-    return {
-        lineChartCategories,
-        lineChartSeries,
-        donutChartLabels,
-        donutChartSeries
-    };
-});
-
-// Datos para el gráfico de línea (Solicitudes por Mes) - Solo para admin
+// Opciones para gráfica de solicitudes por mes (línea)
 const lineChartOptions = computed(() => ({
    chart: {
        type: 'line',
        height: 350,
        toolbar: {
-            show: false
+            show: true
        },
-        background: 'transparent'
+        zoom: {
+            enabled: true
+        }
    },
-    colors: ['#3b82f6'],
+    colors: ['#3B82F6'],
    stroke: {
        curve: 'smooth',
        width: 3
    },
-    grid: {
-        borderColor: 'rgba(148, 163, 184, 0.2)',
-        strokeDashArray: 3,
-        xaxis: {
-            lines: {
-                show: true
-            }
-        },
-        yaxis: {
-            lines: {
-                show: true
-            }
-        }
-    },
-    xaxis: {
-        categories: chartData.value.lineChartCategories,
-        labels: {
-            style: {
-                colors: '#64748b',
-                fontSize: '12px'
-            }
-        },
-        axisBorder: {
-            color: 'rgba(148, 163, 184, 0.2)'
-        }
-    },
-    yaxis: {
-        min: 0,
-        labels: {
-            style: {
-                colors: '#64748b',
-                fontSize: '12px'
-            }
-        }
-    },
    markers: {
        size: 6,
-        colors: ['#3b82f6'],
-        strokeColors: '#fff',
-        strokeWidth: 2,
        hover: {
            size: 8
        }
    },
+    xaxis: {
+        categories: vacationsCharts.value.requests_by_month?.map(item => item.month_name) || [],
+        title: {
+            text: 'Mes'
+        }
+    },
+    yaxis: {
+        title: {
+            text: 'Número de Solicitudes'
+        },
+        min: 0
+    },
    tooltip: {
-        theme: 'dark'
+        y: {
+            formatter: function (val) {
+                return val + " solicitudes"
+            }
+        }
+    },
+    grid: {
+        borderColor: '#f1f1f1'
    }
 }));

-const lineChartSeries = computed(() => chartData.value.lineChartSeries);
+// Series para gráfica de solicitudes por mes
+const lineChartSeries = computed(() => [{
+    name: 'Solicitudes',
+    data: vacationsCharts.value.requests_by_month?.map(item => item.total_requests) || []
+}]);

-// Datos para el gráfico de dona (Solicitudes por Departamento) - Solo para admin
+// Opciones para gráfica de solicitudes por departamento (donut)
 const donutChartOptions = computed(() => ({
    chart: {
        type: 'donut',
        height: 350
    },
-    colors: ['#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#3b82f6', '#f97316'],
-    labels: chartData.value.donutChartLabels,
+    colors: ['#3B82F6', '#8B5CF6', '#06B6D4', '#10B981', '#F59E0B', '#EF4444', '#EC4899', '#84CC16'],
+    labels: vacationsCharts.value.requests_by_department?.map(item => item.department_name) || [],
    legend: {
-        position: 'right',
-        fontSize: '14px',
-        labels: {
-            colors: '#64748b'
-        }
+        position: 'bottom',
+        horizontalAlign: 'center'
    },
    plotOptions: {
        pie: {
            donut: {
-                size: '60%'
+                size: '70%',
+                labels: {
+                    show: true,
+                    name: {
+                        show: true,
+                        fontSize: '14px',
+                        fontWeight: 600
+                    },
+                    value: {
+                        show: true,
+                        fontSize: '16px',
+                        fontWeight: 700,
+                        formatter: function (val) {
+                            return val + " solicitudes"
+                        }
+                    },
+                    total: {
+                        show: true,
+                        showAlways: false,
+                        label: 'Total',
+                        fontSize: '16px',
+                        fontWeight: 700,
+                        color: '#373d3f',
+                        formatter: function (w) {
+                            return w.globals.seriesTotals.reduce((a, b) => {
+                                return a + b
+                            }, 0) + " solicitudes"
+                        }
+                    }
+                }
            }
        }
    },
-    dataLabels: {
-        enabled: true,
-        formatter: function(val, opts) {
-            return opts.w.config.series[opts.seriesIndex]
-        },
-        style: {
-            fontSize: '14px',
-            colors: ['#fff']
+    tooltip: {
+        y: {
+            formatter: function (val) {
+                return val + " solicitudes"
+            }
        }
    },
-    tooltip: {
-        theme: 'dark'
-    }
+    responsive: [{
+        breakpoint: 480,
+        options: {
+            chart: {
+                width: 200
+            },
+            legend: {
+                position: 'bottom'
+            }
+        }
+    }]
 }));

-const donutChartSeries = computed(() => chartData.value.donutChartSeries);
+// Series para gráfica de solicitudes por departamento
+const donutChartSeries = computed(() => 
+    vacationsCharts.value.requests_by_department?.map(item => item.total_requests) || []
+);
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('admin'), {
+        onSuccess: (r) => {
+            adminInfo.value = r.admin_info;
+            vacationsCharts.value = r.admin_info.charts;
+        }
+    });
+});
 </script>

 <template>
@ -216,7 +219,7 @@ const donutChartSeries = computed(() => chartData.value.donutChartSeries);
        </section>

        <!-- Gráficos -->
-        <section v-if="charts.requests_by_month && charts.requests_by_department" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <section v-if="vacationsCharts.requests_by_month && vacationsCharts.requests_by_department" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <!-- Gráfico de Solicitudes por Mes -->
            <article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
                <div class="mb-6 flex items-center gap-3">
--- a/src/pages/Dashboard/Coordinator.vue
+++ b/src/pages/Dashboard/Coordinator.vue
@ -1,30 +1,28 @@
 <script setup>
-import { computed } from 'vue';
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { apiTo } from './Module';

 import GoogleIcon from '@Shared/GoogleIcon.vue';

-// Props
-const props = defineProps({
-    vacations: {
-        type: Object,
-        default: () => ({})
-    },
-    vacationsRequests: {
-        type: Array,
-        default: () => []
-    },
-    coordinatorInfo: {
-        type: Object,
-        default: () => ({})
-    },
-    lastVacationRequests: {
-        type: Array,
-        default: () => []
-    },
-    employeeStatusDepartment: {
-        type: Array,
-        default: () => []
-    }
+// Propiedades
+const vacations = ref({});
+const vacationsRequests = ref([]);
+const coordinatorInfo = ref({});
+const lastVacationRequests = ref([]);
+const employeeStatusDepartment = ref([]);
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('coordinator'), {
+        onSuccess: (r) => {
+            vacations.value = r.vacations;
+            vacationsRequests.value = r.vacation_requests;
+            coordinatorInfo.value = r.coordinator_info;
+            lastVacationRequests.value = r.coordinator_info?.last_vacation_requests;
+            employeeStatusDepartment.value = r.coordinator_info?.employee_status_department;
+        }
+    });
 });
 </script>

--- a/src/pages/Dashboard/Employee.vue
+++ b/src/pages/Dashboard/Employee.vue
@ -1,20 +1,24 @@

 <script setup>
-import { computed } from 'vue';
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { apiTo } from './Module';

 import PrimaryButton from '@Holos/Button/Primary.vue';
 import GoogleIcon from '@Shared/GoogleIcon.vue';

-// Props
-const props = defineProps({
-    vacations: {
-        type: Object,
-        default: () => ({})
-    },
-    vacationsRequests: {
-        type: Array,
-        default: () => []
-    }
+// Propiedades
+const vacations = ref({});
+const vacationsRequests = ref([]);
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('employee'), {
+        onSuccess: (r) => {
+            vacations.value = r.vacations;
+            vacationsRequests.value = r.vacation_requests;
+        }
+    });
 });
 </script>

--- a/src/pages/Events/Assignamment.vue
+++ b/src/pages/Events/Assignamment.vue
@ -1,183 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-// Estado del presupuesto
-const budgetItems = ref([
-  {
-    id: 1,
-    concept: 'Ej. Catering para evento X',
-    amount: 1500.00
-  },
-]);
-
-let nextId = 5;
-
-// Computed para calcular el total
-const totalBudget = computed(() => {
-  return budgetItems.value.reduce((total, item) => {
-    return total + (parseFloat(item.amount) || 0);
-  }, 0);
-});
-
-// Función para agregar nueva fila
-const addBudgetItem = () => {
-  budgetItems.value.push({
-    id: nextId++,
-    concept: '',
-    amount: 0
-  });
-};
-
-// Función para eliminar fila
-const removeBudgetItem = (id) => {
-  if (budgetItems.value.length > 1) {
-    budgetItems.value = budgetItems.value.filter(item => item.id !== id);
-  }
-};
-
-// Función para guardar presupuesto
-const saveBudget = () => {
-  // Filtrar elementos vacíos
-  const validItems = budgetItems.value.filter(item => 
-    item.concept.trim() !== '' && item.amount > 0
-  );
-
-  if (validItems.length === 0) {
-    alert('Por favor, agrega al menos un elemento al presupuesto');
-    return;
-  }
-
-  console.log('Guardar presupuesto:', {
-    items: validItems,
-    total: totalBudget.value
-  });
-
-  // Aquí implementarías la lógica para guardar
-  alert(`Presupuesto guardado correctamente. Total: $${totalBudget.value.toFixed(2)}`);
-};
-
-// Función para formatear moneda
-const formatCurrency = (amount) => {
-  return new Intl.NumberFormat('es-MX', {
-    style: 'currency',
-    currency: 'USD'
-  }).format(amount);
-};
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-      <div>
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Asignación de Presupuesto Anual</h1>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestiona y asigna el presupuesto anual para eventos y actividades</p>
-      </div>
-    </div>
-
-    <!-- Card principal -->
-    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-      
-      <!-- Formulario de presupuesto -->
-      <div class="space-y-6">
-        
-        <!-- Filas de presupuesto -->
-        <div class="space-y-4">
-          <div
-            v-for="(item, index) in budgetItems"
-            :key="item.id"
-            class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end"
-          >
-            
-            <!-- Campo Concepto -->
-            <div class="md:col-span-5">
-              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-                Concepto
-              </label>
-              <input
-                v-model="item.concept"
-                type="text"
-                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-                :placeholder="index === 0 ? 'Ej. Catering para evento X' : 'Ingresa el concepto'"
-              >
-            </div>
-
-            <!-- Campo Monto -->
-            <div class="md:col-span-4">
-              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-                Monto (USD)
-              </label>
-              <input
-                v-model.number="item.amount"
-                type="number"
-                min="0"
-                step="0.01"
-                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-                placeholder="0.00"
-              >
-            </div>
-
-            <!-- Botón de eliminar -->
-            <div class="md:col-span-3 flex justify-end">
-              <button
-                v-if="budgetItems.length > 1"
-                @click="removeBudgetItem(item.id)"
-                type="button"
-                class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/20"
-                title="Eliminar fila"
-              >
-                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
-                </svg>
-              </button>
-            </div>
-
-          </div>
-        </div>
-
-        <!-- Resumen del presupuesto -->
-        <div class="mt-8 p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
-          <div class="flex items-center justify-between">
-            <div class="flex items-center gap-2">
-              <GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="account_balance_wallet" />
-              <span class="text-lg font-medium text-gray-800 dark:text-primary-dt">Total del Presupuesto:</span>
-            </div>
-            <div class="text-2xl font-bold text-[#2563eb] dark:text-primary-dt">
-              {{ formatCurrency(totalBudget) }}
-            </div>
-          </div>
-        </div>
-
-        <!-- Botones de acción -->
-        <div class="flex items-center justify-between pt-6 border-t border-gray-100 dark:border-primary/20">
-          
-          <!-- Botón Agregar más -->
-          <button
-            @click="addBudgetItem"
-            type="button"
-            class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
-          >
-            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16M20 12H4"></path>
-            </svg>
-            + Agregar más
-          </button>
-
-          <!-- Botón Guardar Presupuesto -->
-          <button
-            @click="saveBudget"
-            type="button"
-            class="inline-flex items-center gap-2 px-6 py-2 rounded-lg bg-[#2563eb] hover:bg-[#1e40af] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-2 transition-colors"
-          >
-            <GoogleIcon class="text-white text-xl" name="save" />
-            Guardar Presupuesto
-          </button>
-
-        </div>
-
-      </div>
-
-    </section>
-  </div>
-</template>
--- a/src/pages/Events/Justification.vue
+++ b/src/pages/Events/Justification.vue
@ -1,360 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-// Estado del formulario
-const formData = ref({
-  eventName: '',
-  place: '',
-  description: '',
-  company: 'Empresa A',
-  participants: '',
-  provider: '',
-  assignedAmount: 5000,
-  cost: '',
-  spent: '',
-  observations: '',
-  justificationFile: null
-});
-
-// Opciones de empresas
-const companies = ref([
-  'Empresa A',
-  'Empresa B',
-  'Empresa C',
-  'Empresa D'
-]);
-
-// Computed para calcular la diferencia
-const difference = computed(() => {
-  const assigned = parseFloat(formData.value.assignedAmount) || 0;
-  const spent = parseFloat(formData.value.spent) || 0;
-  return assigned - spent;
-});
-
-// Función para manejar la subida de archivos
-const handleFileUpload = (event) => {
-  const file = event.target.files[0];
-  if (file) {
-    if (file.type === 'application/pdf') {
-      formData.value.justificationFile = file;
-    } else {
-      alert('Por favor, selecciona un archivo PDF válido');
-      event.target.value = '';
-    }
-  }
-};
-
-// Función para eliminar archivo
-const removeFile = () => {
-  formData.value.justificationFile = null;
-  const fileInput = document.getElementById('justification-file');
-  if (fileInput) {
-    fileInput.value = '';
-  }
-};
-
-// Función para enviar justificación
-const submitJustification = () => {
-  // Validación básica
-  if (!formData.value.eventName || !formData.value.place || !formData.value.description) {
-    alert('Por favor, completa todos los campos obligatorios');
-    return;
-  }
-
-  if (!formData.value.justificationFile) {
-    alert('Por favor, sube un archivo de justificación');
-    return;
-  }
-
-  console.log('Enviar justificación:', formData.value);
-  
-  // Aquí implementarías la lógica para enviar
-  alert('Justificación enviada correctamente');
-  
-  // Limpiar formulario
-  formData.value = {
-    eventName: '',
-    place: '',
-    description: '',
-    company: 'Empresa A',
-    participants: '',
-    provider: '',
-    assignedAmount: 5000,
-    cost: '',
-    spent: '',
-    observations: '',
-    justificationFile: null
-  };
-};
-
-// Función para formatear moneda
-const formatCurrency = (amount) => {
-  return new Intl.NumberFormat('es-MX', {
-    style: 'currency',
-    currency: 'USD'
-  }).format(amount);
-};
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-      <div>
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Justificación de Gastos</h1>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Documenta y justifica los gastos realizados en eventos</p>
-      </div>
-    </div>
-
-    <!-- Card principal -->
-    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-      
-      <!-- Formulario -->
-      <form @submit.prevent="submitJustification" class="space-y-6">
-        
-        <!-- Detalles del Evento -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          
-          <!-- Nombre del Evento -->
-          <div class="md:col-span-1">
-            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-              Nombre del Evento *
-            </label>
-            <input
-              v-model="formData.eventName"
-              type="text"
-              required
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-              placeholder="Ingresa el nombre del evento"
-            >
-          </div>
-
-          <!-- Lugar -->
-          <div class="md:col-span-1">
-            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-              Lugar *
-            </label>
-            <input
-              v-model="formData.place"
-              type="text"
-              required
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-              placeholder="Ingresa el lugar del evento"
-            >
-          </div>
-
-        </div>
-
-        <!-- Descripción -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-            Descripción y Detalles *
-          </label>
-          <textarea
-            v-model="formData.description"
-            required
-            rows="4"
-            class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-            placeholder="Describe los detalles del evento y los gastos realizados"
-          ></textarea>
-        </div>
-
-        <!-- Detalles Financieros y Participantes -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          
-          <!-- Empresa -->
-          <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-              Empresa
-            </label>
-            <select
-              v-model="formData.company"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-            >
-              <option v-for="company in companies" :key="company" :value="company">
-                {{ company }}
-              </option>
-            </select>
-          </div>
-
-          <!-- Número de Participantes -->
-          <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-              Número de Participantes
-            </label>
-            <input
-              v-model.number="formData.participants"
-              type="number"
-              min="1"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-              placeholder="0"
-            >
-          </div>
-
-          <!-- Proveedor -->
-          <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-              Proveedor
-            </label>
-            <input
-              v-model="formData.provider"
-              type="text"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-              placeholder="Nombre del proveedor"
-            >
-          </div>
-
-          <!-- Monto Asignado -->
-          <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-              Monto Asignado (USD)
-            </label>
-            <input
-              v-model.number="formData.assignedAmount"
-              type="number"
-              min="0"
-              step="0.01"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-              placeholder="0.00"
-            >
-          </div>
-
-          <!-- Costo -->
-          <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-              Costo (USD)
-            </label>
-            <input
-              v-model.number="formData.cost"
-              type="number"
-              min="0"
-              step="0.01"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-              placeholder="0.00"
-            >
-          </div>
-
-          <!-- Gastado -->
-          <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-              Gastado (USD)
-            </label>
-            <input
-              v-model.number="formData.spent"
-              type="number"
-              min="0"
-              step="0.01"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-              placeholder="0.00"
-            >
-          </div>
-
-        </div>
-
-        <!-- Resumen financiero -->
-        <div v-if="formData.assignedAmount > 0 || formData.spent > 0" class="p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="text-center">
-              <div class="text-sm text-gray-500 dark:text-primary-dt/70">Monto Asignado</div>
-              <div class="text-lg font-bold text-blue-600 dark:text-blue-400">
-                {{ formatCurrency(formData.assignedAmount) }}
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-sm text-gray-500 dark:text-primary-dt/70">Gastado</div>
-              <div class="text-lg font-bold text-red-600 dark:text-red-400">
-                {{ formatCurrency(formData.spent) }}
-              </div>
-            </div>
-            <div class="text-center">
-              <div class="text-sm text-gray-500 dark:text-primary-dt/70">Diferencia</div>
-              <div class="text-lg font-bold" :class="difference >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
-                {{ formatCurrency(difference) }}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Observaciones -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-            Observaciones
-          </label>
-          <textarea
-            v-model="formData.observations"
-            rows="3"
-            class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-            placeholder="Agrega observaciones adicionales si es necesario"
-          ></textarea>
-        </div>
-
-        <!-- Subida de archivo -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-            Subir justificante (PDF) *
-          </label>
-          
-          <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-[#7c3aed] transition-colors dark:border-primary/20 dark:hover:border-[#7c3aed]">
-            <div class="space-y-1 text-center">
-              <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
-                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-              </svg>
-              <div class="flex text-sm text-gray-600 dark:text-primary-dt/70">
-                <label for="justification-file" class="relative cursor-pointer bg-white rounded-md font-medium text-[#7c3aed] hover:text-[#6d28d9] focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-[#7c3aed]">
-                  <span>Sube un archivo</span>
-                  <input
-                    id="justification-file"
-                    name="justification-file"
-                    type="file"
-                    accept=".pdf"
-                    class="sr-only"
-                    @change="handleFileUpload"
-                  >
-                </label>
-                <p class="pl-1">o arrastra y suelta</p>
-              </div>
-              <p class="text-xs text-gray-500 dark:text-primary-dt/50">
-                PDF hasta 10MB
-              </p>
-            </div>
-          </div>
-
-          <!-- Archivo seleccionado -->
-          <div v-if="formData.justificationFile" class="mt-3 p-3 bg-green-50 border border-green-200 rounded-lg dark:bg-green-900/20 dark:border-green-800">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-2">
-                <GoogleIcon class="text-green-600 dark:text-green-400 text-xl" name="picture_as_pdf" />
-                <span class="text-sm font-medium text-green-800 dark:text-green-300">
-                  {{ formData.justificationFile.name }}
-                </span>
-              </div>
-              <button
-                @click="removeFile"
-                type="button"
-                class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
-              >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Botón de envío -->
-        <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
-          <button
-            type="submit"
-            class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2 transition-colors"
-          >
-            <GoogleIcon class="text-white text-xl" name="send" />
-            Enviar Justificación
-          </button>
-        </div>
-
-      </form>
-
-    </section>
-  </div>
-</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
edgar.mendez	7031389edc	Update Details and Index component on module Warehouses	2025-10-31 00:27:17 -06:00
edgar.mendez	617c4a3a65	WIP	2025-10-15 12:08:31 -06:00
edgar.mendez	c222b66cef	Add: Punto de venta y UX para productos	2025-10-08 12:45:48 -06:00
edgar.mendez	83f0abff13	ADD: Administrador de productos(WIP)	2025-10-04 09:23:04 -06:00
edgar.mendez	2bd5d00827	Add: Administración de clasificaciones comerciales	2025-10-02 16:16:12 -06:00
Edgar Méndez Mendoza	fa1bb4b20b	Merge pull request 'feature-warehouse-model' (#8 ) from feature-warehouse-model into develop Reviewed-on: #8	2025-09-30 21:27:30 +00:00
jose.lopez	7c7dcc229c	courses (#7 ) Reviewed-on: #7	2025-09-30 21:27:17 +00:00
edgar.mendez	6b7f80d53a	Add: Feature warehouse	2025-09-30 10:28:36 -06:00
jose.lopez	1fef53f558	historial-academico (#6 ) Reviewed-on: #6	2025-09-27 15:45:13 +00:00
edgar.mendez	efcad3fe1d	Add: Módulo catalogo de clasificaciones de almacenes	2025-09-25 15:44:54 -06:00
jose.lopez	68cde3dcea	vacations (#5 ) Reviewed-on: #5	2025-09-24 21:37:30 +00:00
edgar.mendez	c95d40787d	WIP	2025-09-23 16:18:45 -06:00