courses (#7)

Reviewed-on: #7

src/lang/es.js

@@ -86,6 +86,9 @@ export default {
             light: 'Tema claro'
         }
     },
+    approve: 'Aprobar',
+    assigned_budget: 'Presupuesto asignado',
+    available_budget: 'Presupuesto disponible',
     assistances: {
         create: {
             title: 'Generar asistencia',
@@ -133,11 +136,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,6 +159,7 @@ export default {
         show: 'Más detalles',
         import: 'Importación'
     },
+    currency: 'Moneda',
     dashboard: 'Dashboard',
     date: 'Fecha',
     date_expiration: 'Fecha de expiración',
@@ -174,6 +186,7 @@ export default {
     degreeType: 'Tipo de grado',
     deleted:'Registro eliminado',
     description:'Descripción',
+    duration: 'Duración',
     details:'Detalles',
     disable:'Deshabilitar',
     disabled:'Deshabilitado',
@@ -184,6 +197,7 @@ export default {
         title:'Correo',
         verification:'Verificar correo'
     },
+    exam_date: 'Fecha de examen',
     employees: {
         create: {
             title: 'Crear empleado',
@@ -197,6 +211,7 @@ export default {
     enabled:'Habilitado',
     endDate:'Fecha Fin',
     event:'Evento',
+    event_name: 'Nombre del evento',
     files: {
         excel: 'Archivo excel',
         select: 'Seleccionar archivo'
@@ -218,6 +233,7 @@ export default {
     icon:'Icono',
     import: 'Importar',
     items: 'Elementos',
+    location: 'Ubicación',
     maternal:'Apellido materno',
     message:'Mensaje',
     menu:'Menú',
@@ -235,11 +251,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',
@@ -400,6 +429,7 @@ export default {
     updated_at:'Fecha actualización',
     updateFail:'Error al actualizar',
     unreaded:'No leído',
+    url: 'URL',
     user:'Usuario',
     users:{
         academic: {

src/layouts/AdminLayout.vue

@@ -88,11 +88,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" 
@@ -107,10 +102,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"

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" 

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')"

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>

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>

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>

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>

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
+}

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,
+  totalBudget: 0,
-  justifiedExpenses: 32500,
+  justifiedExpenses: 0,
-  remainingBalance: 17500,
+  remainingBalance: 0,
-  expenseDistribution: [
+  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' }
-  ]
 });
 
 // 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
+  api.get(apiTo('dashboard'), {
-  console.log('Dashboard de eventos cargado');
+    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">

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>

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>

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
+}

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>

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>

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>

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>

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>

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>

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
+}

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>

src/pages/Admin/Users/Academic/Index.vue

@@ -51,7 +51,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="p-6 max-w-auto mx-auto">
+  <div>
     <!-- Página: Header principal -->
     <div class="flex items-start justify-between">
       <div>

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>

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>

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>

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
+}

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>

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>

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>

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>

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
+}

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>

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>

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>

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
+}

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>

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>

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>

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>

src/pages/Events/Reports.vue

@@ -1,204 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-// Datos de ejemplo de gastos
-const expenses = ref([
-  {
-    id: 1,
-    date: '2024-08-15',
-    concept: 'Catering para evento X',
-    reason: 'Servicio de comida para 50 asistentes.',
-    amount: 1500.00,
-    justificationFile: 'catering_evento_x.pdf'
-  },
-  {
-    id: 2,
-    date: '2024-08-14',
-    concept: 'Renta de equipo de audio',
-    reason: 'Micrófonos y bocinas para el auditorio.',
-    amount: 800.00,
-    justificationFile: 'renta_audio.pdf'
-  },
-  {
-    id: 3,
-    date: '2024-08-10',
-    concept: 'Viáticos para conferencista',
-    reason: 'Vuelo y hospedaje para Dr. Smith.',
-    amount: 1250.00,
-    justificationFile: 'viaticos_dr_smith.pdf'
-  }
-]);
-
-// Computed para calcular el total
-const totalExpenses = computed(() => {
-  return expenses.value.reduce((total, expense) => {
-    return total + expense.amount;
-  }, 0);
-});
-
-// Función para ver PDF
-const viewPDF = (fileName) => {
-  console.log('Ver PDF:', fileName);
-  // Aquí implementarías la lógica para abrir el PDF
-  // Por ejemplo: window.open(`/pdfs/${fileName}`, '_blank');
-  alert(`Abriendo archivo: ${fileName}`);
-};
-
-// Función para formatear moneda
-const formatCurrency = (amount) => {
-  return new Intl.NumberFormat('es-MX', {
-    style: 'currency',
-    currency: 'USD'
-  }).format(amount);
-};
-
-// Función para formatear fecha
-const formatDate = (dateString) => {
-  const date = new Date(dateString);
-  return date.toLocaleDateString('es-MX', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit'
-  });
-};
-
-// Función para exportar reporte
-const exportReport = () => {
-  console.log('Exportar reporte:', expenses.value);
-  // Aquí implementarías la lógica para exportar el reporte
-  alert('Reporte exportado correctamente');
-};
-
-// Función para filtrar por fecha
-const filterByDate = () => {
-  // Aquí podrías implementar filtros por fecha
-  console.log('Filtrar por fecha');
-};
-</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">Reporte de Gastos de Eventos</h1>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Consulta y gestiona los gastos realizados en eventos</p>
-      </div>
-
-      <div class="flex gap-3">
-        <button 
-          @click="filterByDate"
-          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="filter_list" />
-          Filtrar
-        </button>
-
-        <button 
-          @click="exportReport"
-          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#2563eb] hover:bg-[#1e40af] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-2"
-        >
-          <GoogleIcon class="text-white text-xl" name="download" />
-          Exportar
-        </button>
-      </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">
-      
-      <!-- Tabla de gastos -->
-      <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">FECHA</th>
-              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">CONCEPTO</th>
-              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">RAZÓN</th>
-              <th class="text-right py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">MONTO</th>
-              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">JUSTIFICANTE</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr 
-              v-for="expense in expenses" 
-              :key="expense.id"
-              class="border-b border-gray-50 dark:border-primary/10 hover:bg-gray-50 dark:hover:bg-primary/5"
-            >
-              <!-- Fecha -->
-              <td class="py-4 px-4">
-                <div class="text-sm text-gray-900 dark:text-primary-dt">
-                  {{ formatDate(expense.date) }}
-                </div>
-              </td>
-
-              <!-- Concepto -->
-              <td class="py-4 px-4">
-                <div class="font-medium text-gray-900 dark:text-primary-dt">
-                  {{ expense.concept }}
-                </div>
-              </td>
-
-              <!-- Razón -->
-              <td class="py-4 px-4">
-                <div class="text-sm text-gray-600 dark:text-primary-dt/70">
-                  {{ expense.reason }}
-                </div>
-              </td>
-
-              <!-- Monto -->
-              <td class="py-4 px-4 text-right">
-                <div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
-                  {{ formatCurrency(expense.amount) }}
-                </div>
-              </td>
-
-              <!-- Justificante -->
-              <td class="py-4 px-4">
-                <button
-                  @click="viewPDF(expense.justificationFile)"
-                  class="text-blue-600 hover:text-blue-800 underline text-sm font-medium dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
-                >
-                  Ver PDF
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Resumen de gastos -->
-      <div class="mt-6 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 de Gastos:</span>
-          </div>
-          <div class="text-2xl font-bold text-[#2563eb] dark:text-primary-dt">
-            {{ formatCurrency(totalExpenses) }}
-          </div>
-        </div>
-      </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 {{ expenses.length }} gastos registrados
-        </div>
-        
-        <div class="flex items-center gap-4">
-          <div class="flex items-center gap-2 text-sm">
-            <span class="w-3 h-3 bg-blue-400 rounded-full"></span>
-            <span class="text-gray-600 dark:text-primary-dt/70">Total: {{ expenses.length }} registros</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">Justificados: {{ expenses.length }}</span>
-          </div>
-        </div>
-      </div>
-
-    </section>
-  </div>
-</template>

src/pages/Vacations/Admin/Create.vue

@@ -1,181 +0,0 @@
-<script setup>
-import { onMounted, ref, computed } 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 Form from './Form.vue';
-
-/** Definidores */
-const router = useRouter();
-
-const form = useForm({
-    periods: [
-        {
-            start_date: '',
-            end_date: '',
-            number_of_days: 0,
-        }
-    ],
-    comments: ''
-});
-
-const availableDays = ref(0);
-const formRef = ref(null);
-
-// Calcular días restantes
-const remainingDays = computed(() => {
-    if (!formRef.value) return availableDays.value;
-    return availableDays.value - formRef.value.totalSelectedDays;
-});
-
-// Calcular total de días seleccionados
-const totalSelectedDays = computed(() => {
-    if (!formRef.value) return 0;
-    return formRef.value.totalSelectedDays;
-});
-
-// Obtener períodos con datos
-const periodsWithData = computed(() => {
-    return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
-});
-
-/** Métodos */
-function submit() {
-    form.post(apiTo('store'), {
-        onSuccess: (res) => {
-            Notify.success(Lang('created'));
-            router.push(viewTo({ name: 'index' }));
-        }
-    });
-}
-
-/** Ciclos */
-onMounted(() => {
-    api.get(route('resources.available-days'), {
-        onSuccess: (res) => {
-            availableDays.value = res.available_days;
-        }
-    });
-});
-</script>
-
-<template>
-    <div>
-        <!-- Header -->
-        <div class="mb-8">
-            <div class="flex items-center gap-4 mb-4">
-            <RouterLink :to="viewTo({ name: 'index' })">
-                    <button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
-                        <GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
-                    </button>
-            </RouterLink>
-                <div>
-                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
-                    <p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
-                </div>
-            </div>
-        </div>
-
-        <!-- Layout de dos columnas -->
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- Formulario - Columna izquierda (2/3) -->
-            <div class="lg:col-span-2">
-                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
-                    <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
-
-                    <Form 
-                        ref="formRef"
-                        :form="form"
-                        @submit="submit"
-                    />
-                </div>
-            </div>
-
-            <!-- Resumen - Columna derecha (1/3) -->
-            <div class="lg:col-span-1">
-                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
-                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
-
-                    <!-- Días disponibles -->
-                    <div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
-                        <div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
-                        <div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
-                    </div>
-
-                    <!-- Detalles de períodos -->
-                    <div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
-                        <div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
-                            <h4 class="font-medium text-slate-900 dark:text-slate-100">
-                                Período {{ index + 1 }}:
-                            </h4>
-                            <div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
-                                <div>Inicio: {{ period.start_date }}</div>
-                                <div>Fin: {{ period.end_date }}</div>
-                                <div class="flex items-center gap-2">
-                                    <span>Días en período {{ index + 1 }}:</span>
-                                    <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
-                                        {{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Resumen de días -->
-                    <div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
-                        <div class="flex items-center justify-between">
-                            <span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
-                            <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
-                                {{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
-                            </span>
-                        </div>
-                        <div class="flex items-center justify-between">
-                            <span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
-                            <span class="px-2 py-1 rounded-full text-xs font-medium"
-                                  :class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
-                                {{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
-                            </span>
-                        </div>
-                    </div>
-
-                    <!-- Advertencia si se excede el límite -->
-                    <div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
-                        <div class="flex items-center gap-2">
-                            <GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
-                            <span class="text-sm text-red-600 dark:text-red-400 font-medium">
-                                Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
-                            </span>
-                        </div>
-                    </div>
-
-                    <!-- Recordatorios -->
-                    <div class="space-y-3">
-                        <h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
-                        <div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Las solicitudes deben hacerse con 15 días de anticipación</span>
-                            </div>
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Tu coordinador revisará y aprobará la solicitud</span>
-                            </div>
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Recibirás una notificación con la decisión</span>
-                            </div>
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Los días se descontarán una vez aprobados</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

src/pages/Vacations/Admin/Form.vue

@@ -1,236 +0,0 @@
-<script setup>
-import { ref, watch, computed } from 'vue';
-import VueDatePicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import Textarea         from '@Holos/Form/Textarea.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Propiedades */
-const props = defineProps({
-    form: Object
-})
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-
-function addPeriod() {
-    props.form.periods.push({
-        start_date: '',
-        end_date: '',
-        number_of_days: 0,
-    });
-}
-
-function removePeriod(index) {
-    if (props.form.periods.length > 1) {
-        props.form.periods.splice(index, 1);
-    }
-}
-
-function calculateDays(startDate, endDate) {
-    if (!startDate || !endDate) return 0;
-    
-    const start = new Date(startDate);
-    const end = new Date(endDate);
-    
-    // Validar que la fecha de inicio no sea posterior a la de fin
-    if (start > end) return 0;
-    
-    // Calcular la diferencia en días (incluyendo ambos días)
-    const timeDiff = end.getTime() - start.getTime();
-    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
-    
-    return daysDiff;
-}
-
-function updatePeriodDays(index) {
-    const period = props.form.periods[index];
-    if (period.start_date && period.end_date) {
-        period.number_of_days = calculateDays(period.start_date, period.end_date);
-    } else {
-        period.number_of_days = 0;
-    }
-}
-
-function getMinDate() {
-    const today = new Date();
-    let daysToAdd = 15;
-    let currentDate = new Date(today);
-    
-    while (daysToAdd > 0) {
-        currentDate.setDate(currentDate.getDate() + 1);
-        // Si no es domingo (0), contar el día
-        if (currentDate.getDay() !== 0) {
-            daysToAdd--;
-        }
-    }
-    
-    return currentDate.toISOString().split('T')[0];
-}
-
-// Función para desactivar domingos
-function isDisabled(date) {
-    return date.getDay() === 0; // 0 = domingo
-}
-
-// Función para formatear fecha a Y-m-d
-function formatDate(date) {
-    if (!date) return '';
-    
-    // Si la fecha ya es un string en formato correcto, devolverla
-    if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
-        return date;
-    }
-    
-    let d;
-    if (date instanceof Date) {
-        d = date;
-    } else {
-        d = new Date(date);
-    }
-    
-    // Verificar que la fecha es válida
-    if (isNaN(d.getTime())) {
-        console.warn('Fecha inválida recibida:', date);
-        return '';
-    }
-    
-    const year = d.getFullYear();
-    const month = String(d.getMonth() + 1).padStart(2, '0');
-    const day = String(d.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-}
-
-// Watcher para detectar cambios en las fechas
-watch(() => props.form.periods, (newPeriods) => {
-    newPeriods.forEach((period, index) => {
-        if (period.start_date && period.end_date) {
-            updatePeriodDays(index);
-        }
-    });
-}, { deep: true });
-
-// Calcular total de días seleccionados
-const totalSelectedDays = computed(() => {
-    return props.form.periods.reduce((total, period) => {
-        return total + (period.number_of_days || 0);
-    }, 0);
-});
-
-// Exponer el total para el componente padre
-defineExpose({
-    totalSelectedDays
-});
-</script>
-
-<template>
-    <form @submit.prevent="submit" class="space-y-6">
-        <!-- Períodos de vacaciones -->
-        <div class="space-y-4">
-            <div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
-                <div class="flex items-center justify-between">
-                    <h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
-                        Período {{ index + 1 }}
-                    </h4>
-                    <button
-                        v-if="form.periods.length > 1"
-                        type="button"
-                        @click="removePeriod(index)"
-                        class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
-                    >
-                        <GoogleIcon name="delete" class="w-4 h-4" />
-                        Eliminar
-                    </button>
-                </div>
-                
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <div class="relative">
-                            <VueDatePicker
-                                v-model="period.start_date"
-                                class="w-full"
-                                placeholder="Fecha de inicio"
-                                format="dd/MM/yyyy"
-                                locale="es"
-                                :min-date="getMinDate()"
-                                :disabled-dates="isDisabled"
-                                :enable-time-picker="false"
-                                :auto-apply="true"
-                                :close-on-auto-apply="true"
-                                @update:model-value="(date) => { 
-                                    console.log('Fecha seleccionada (inicio):', date);
-                                    period.start_date = formatDate(date); 
-                                    console.log('Fecha formateada (inicio):', period.start_date);
-                                    updatePeriodDays(index); 
-                                }"
-                            />
-                        </div>
-                    </div>
-                    <div>
-                        <div class="relative">
-                            <VueDatePicker
-                                v-model="period.end_date"
-                                class="w-full"
-                                placeholder="Fecha de fin"
-                                format="dd/MM/yyyy"
-                                locale="es"
-                                :min-date="getMinDate()"
-                                :disabled-dates="isDisabled"
-                                :enable-time-picker="false"
-                                :auto-apply="true"
-                                :close-on-auto-apply="true"
-                                @update:model-value="(date) => { 
-                                    console.log('Fecha seleccionada (fin):', date);
-                                    period.end_date = formatDate(date); 
-                                    console.log('Fecha formateada (fin):', period.end_date);
-                                    updatePeriodDays(index); 
-                                }"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Botón añadir período -->
-            <button
-                type="button"
-                @click="addPeriod"
-                class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
-            >
-                <GoogleIcon name="add" />
-                Añadir período
-            </button>
-        </div>
-
-        <!-- Comentarios -->
-        <div>
-            <Textarea
-                v-model="form.comments"
-                id="comments"
-                rows="4"
-                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
-                placeholder="Agrega cualquier información adicional sobre tu solicitud..."
-                :onError="form.errors.comments"
-            />
-        </div>
-
-        <!-- Botón de envío -->
-        <div class="col-span-1 md:col-span-2 flex justify-center">
-            <PrimaryButton
-                v-text="$t('request')"
-                :class="{ 'opacity-25': form.processing }"
-                :disabled="form.processing"
-            />
-        </div>
-    </form>
-</template>

src/router/Index.js

@@ -58,6 +58,15 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    path: 'courses',
+                    name: 'courses.index',
+                    meta: {
+                        title: 'Cursos',
+                        icon: 'info',
+                    },
+                    component: () => import('@Pages/Courses/Employee/Index.vue'),
+                },
                 {
                     path: 'profile',
                     name: 'profile.show',
@@ -107,19 +116,33 @@ const router = createRouter({
                 },
                 {
                     path: 'vacations',
-                    name: 'vacations.coordinator',
+                    name: 'vacations.coordinator.index',
                     meta: {
                         title: 'Vacaciones',
                         icon: 'calendar_month',
                     },
+                    component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
+                },
+                {
+                    path: 'courses',
+                    name: 'courses.coordinator',
+                    meta: {
+                        title: 'Capacitaciones',
+                        icon: 'info',
+                    },
                     children: [
                         {
                             path: '',
-                            name: 'vacations.coordinator.index',
+                            name: 'courses.coordinator.index',
-                            component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
+                            component: () => import('@Pages/Courses/Coordinator/Index.vue'),
-                        }
-                    ]
                         },
+                        {
+                            path: 'request',
+                            name: 'courses.coordinator.request',
+                            component: () => import('@Pages/Courses/Coordinator/Request.vue'),
+                        }
+                    ],
+                }
             ]
         },
         {
@@ -169,22 +192,22 @@ const router = createRouter({
                         {
                             path: '',
                             name: 'admin.courses.index',
-                            component: () => import('@Pages/Courses/Index.vue'),
+                            component: () => import('@Pages/Courses/Admin/Index.vue'),
-                        },
-                        {
-                            path: 'assignamment',
-                            name: 'admin.courses.assignamment',
-                            component: () => import('@Pages/Courses/Assignamment.vue'),
                         },
                         {
                             path: 'request',
                             name: 'admin.courses.request',
-                            component: () => import('@Pages/Courses/Request.vue'),
+                            component: () => import('@Pages/Courses/Admin/Request.vue'),
+                        },
+                        {
+                            path: ':id/assignamment',
+                            name: 'admin.courses.assignamment',
+                            component: () => import('@Pages/Courses/Admin/Assignamment.vue'),
                         },
                         {
                             path: 'calendar',
                             name: 'admin.courses.calendar',
-                            component: () => import('@Pages/Courses/Calendar.vue'),
+                            component: () => import('@Pages/Courses/Admin/Calendar.vue'),
                         },
                     ]
                 },
@@ -200,22 +223,56 @@ const router = createRouter({
                         {
                             path: '',
                             name: 'admin.events.index',
-                            component: () => import('@Pages/Events/Index.vue'),
+                            component: () => import('@Pages/Admin/Events/Index.vue'),
+                        },
+                        {
+                            path: 'pettyCashes',
+                            name: 'admin.events.pettyCashes',
+                            redirect: '/admin/events/pettyCashes',
+                            children: [
+                                {
+                                    path: '',
+                                    name: 'admin.events.pettyCashes.index',
+                                    component: () => import('@Pages/Admin/Events/PettyCashes/Index.vue'),
+                                },
+                                {
+                                    path: 'create',
+                                    name: 'admin.events.pettyCashes.create',
+                                    component: () => import('@Pages/Admin/Events/PettyCashes/Create.vue'),
                                 },
                                 {
                                     path: 'assignamment',
-                            name: 'admin.events.assignamment',
+                                    name: 'admin.events.pettyCashes.assignamment',
-                            component: () => import('@Pages/Events/Assignamment.vue'),
+                                    component: () => import('@Pages/Admin/Events/PettyCashes/Assignamment.vue'),
                                 },
+                                {
+                                    path: ':id/edit',
+                                    name: 'admin.events.pettyCashes.edit',
+                                    component: () => import('@Pages/Admin/Events/PettyCashes/Edit.vue'),
+                                },
+                            ]
+                        },
+                        // {
+                        //     path: 'expense',
+                        //     name: 'admin.events.expense',
+                        //     redirect: '/admin/events/expense',
+                        //     children: [
+                        //         {
+                        //             path: '',
+                        //             name: 'admin.events.expense.index',
+                        //             component: () => import('@Pages/Admin/Events/ExpenseJustifications/Index.vue'),
+                        //         },
+                        //     ]
+                        // },
                         {
                             path: 'justification',
                             name: 'admin.events.justification',
-                            component: () => import('@Pages/Events/Justification.vue'),
+                            component: () => import('@Pages/Admin/Events/Justification.vue'),
                         },
                         {
                             path: 'reports',
                             name: 'admin.events.reports',
-                            component: () => import('@Pages/Events/Reports.vue'),
+                            component: () => import('@Pages/Admin/Events/Reports.vue'),
                         },
                     ]
                 },