src/lang/es.js

@@ -133,11 +133,18 @@ 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",
     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',
@@ -174,6 +181,7 @@ export default {
     degreeType: 'Tipo de grado',
     deleted:'Registro eliminado',
     description:'Descripción',
+    duration: 'Duración',
     details:'Detalles',
     disable:'Deshabilitar',
     disabled:'Deshabilitado',
@@ -184,6 +192,7 @@ export default {
         title:'Correo',
         verification:'Verificar correo'
     },
+    exam_date: 'Fecha de examen',
     employees: {
         create: {
             title: 'Crear empleado',
@@ -400,6 +409,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" 

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/Assignamment.vue

@@ -1,281 +1,218 @@
 <script setup>
-import { ref, computed } from 'vue';
+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';
 
-// Datos de cursos aprobados
+/** Definiciones */
-const approvedCourses = ref([
+const router = useRouter();
-  {
+const vroute = useRoute();
-    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
+/** Propiedades */
-const personnel = ref([
+const form = useForm({
-  { id: 1, name: 'Ana García', selected: false },
+  users: [],
-  { id: 2, name: 'Carlos Mendoza', selected: false },
+  start_date: '',
-  { id: 3, name: 'Laura Jiménez', selected: false },
+  end_date: '',
-  { id: 4, name: 'Luis Martínez', selected: false },
+  exam_date: '',
-  { 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 course = ref(null);
-const selectedPersonnelCount = computed(() => {
+const users = ref([]);
-  return personnel.value.filter(p => p.selected).length;
+
+// Computed para contar usuarios seleccionados
+const selectedUsersCount = computed(() => {
+  return users.value.filter(u => u.selected).length;
 });
 
 // Funciones
-const togglePersonnel = (person) => {
+const toggleUser = (user) => {
-  person.selected = !person.selected;
+  user.selected = !user.selected;
 };
 
-const selectAllPersonnel = () => {
+const selectAllUsers = () => {
-  const allSelected = personnel.value.every(p => p.selected);
+  const allSelected = users.value.every(u => u.selected);
-  personnel.value.forEach(p => p.selected = !allSelected);
+  users.value.forEach(u => u.selected = !allSelected);
 };
 
-const selectCourse = (course) => {
+// Función para calcular la fecha final del curso
-  selectedCourse.value = course;
+const calculateEndDate = () => {
-  showDropdown.value = false;
+  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;
+  }
 };
 
-const saveAssignment = () => {
+// Watcher para calcular automáticamente la fecha final cuando cambie la fecha de inicio
-  const selectedPersonnelList = personnel.value.filter(p => p.selected);
+watch(() => form.start_date, () => {
-  console.log('Guardar asignación:', {
+  calculateEndDate();
-    course: selectedCourse.value,
+});
-    personnel: selectedPersonnelList,
+
-    startDate: startDate.value,
+const submit = () => {
-    endDate: endDate.value,
+  form.transform(data => ({
-    examDate: examDate.value
+    ...data,
+    users: form.users = users.value.map(u => u.id)
+  })).post(apiTo('assign-course', { course: vroute.params.id }), {
+    onSuccess: () => {
+      Notify.success(Lang('register.assign.onSuccess'))
+      router.push(viewTo({ name: 'index' }));
+    }
   });
-  // Aquí implementarías la lógica para guardar
 };
 
-const notifyPersonnel = () => {
+/** Ciclos */
-  const selectedPersonnelList = personnel.value.filter(p => p.selected);
+onMounted(() => {
-  console.log('Notificar personal:', {
+  api.get(apiTo('show', { course: vroute.params.id }), {
-    course: selectedCourse.value,
+    onSuccess: (r) => {
-    personnel: selectedPersonnelList
+      course.value = r.course
+
+      api.catalog({
+        'user:byDepartment': r.course.department?.id || null
+      }, {
+        onSuccess: (r) => users.value = r['user:byDepartment'] ?? []
+      });
+    }
   });
-  // 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">
+  <PageHeader
-    <!-- Header -->
+    title="Asignación de Cursos a Personal"
-    <div class="flex items-start justify-between gap-4">
+  >
-      <div>
+    <RouterLink :to="viewTo({ name: 'index' })">
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Asignación de Cursos a Personal</h1>
+      <IconButton
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Asigna cursos aprobados al personal seleccionado</p>
+        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>
 
-    <!-- Card principal -->
+    <!-- Asignación de Usuarios -->
-    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+    <div class="mb-6">
-      
+      <div class="flex items-center justify-between mb-3">
-      <!-- Selección de Curso -->
+        <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
-      <div class="mb-6">
+          Asignar a usuarios
-        <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-          Seleccionar Curso Aprobado
         </label>
+        <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="relative">
+      <div class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
-          <button
+        <div class="space-y-2">
-            @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"
+            v-for="user in users"
-            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"
+            :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="max-h-60 overflow-auto">
+            <div class="flex items-center h-5">
-              <div
+              <input
-                v-for="course in approvedCourses"
+                :checked="user.selected"
-                :key="course.id"
+                type="checkbox"
-                @click="selectCourse(course)"
+                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"
-                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"
+                @click.stop
+                @change="toggleUser(user)"
               >
-                <div class="font-medium text-gray-900 dark:text-primary-dt">{{ course.name }}</div>
+            </div>
-                <div class="text-sm text-gray-500 dark:text-primary-dt/70">
+            <div class="ml-3 text-sm">
-                  {{ course.area }} • {{ formatCurrency(course.cost) }}
+              <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
-                </div>
+                {{ 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>
 
-      <!-- Asignación de Personal -->
+      <div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
-      <div class="mb-6">
+        {{ selectedUsersCount }} usuario(s) seleccionado(s)
-        <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>
+    </div>
 
-      <!-- Fechas -->
+    <!-- Fechas -->
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-        <!-- Fecha de Inicio -->
+      <Input
-        <div>
+        v-model="form.start_date"
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+        id="start_date"
-            Fecha de Inicio
+        title="dates.start"
-          </label>
+        type="date"
-          <div class="relative">
+        required
-            <input
+      />
-              v-model="startDate"
+      <Input
-              type="date"
+        v-model="form.end_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"
+        id="end_date"
-            >
+        title="dates.end"
-            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+        type="date"
-              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        required
-                <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>
+      <Input
-            </div>
+        v-model="form.exam_date"
-          </div>
+        id="exam_date"
-        </div>
+        title="exam_date"
+        type="date"
+      />
+    </div>
 
-        <!-- Fecha de Fin -->
+    <!-- Botones de Acción -->
-        <div>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-primary/20">
-          <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 -->
+      <button
-        <div>
+        @click="submit"
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+        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"
-            Fecha de Examen
+      >
-          </label>
+        <GoogleIcon class="text-white text-xl" name="notifications" />
-          <div class="relative">
+        Notificar
-            <input
+      </button>
-              v-model="examDate"
+    </div>
-              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 -->
+  </section>
-      <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/Index.vue

@@ -1,187 +1,124 @@
 <script setup>
-import { ref } from 'vue';
+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';
 
-// Datos de ejemplo de los cursos
+/** Propiedades */
-const courses = ref([
+const models = 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
+/** Referencias */
-const viewCourse = (course) => {
+const showModal = ref(false);
-  console.log('Ver curso:', course.courseName);
+const destroyModal = ref(false);
-  // Aquí puedes implementar la lógica para ver el curso
-};
 
-const approveCourse = (course) => {
+/** Métodos */
-  console.log('Aprobar curso:', course.courseName);
+const searcher = useSearcher({
-  course.status = 'approved';
+    url: apiTo('index'),
-  // Aquí puedes implementar la lógica para aprobar el curso
+    onSuccess: (r) => models.value = r.models,
-};
+    onError: () => models.value = []
+});
 
-const rejectCourse = (course) => {
+/** Ciclos */
-  console.log('Rechazar curso:', course.courseName);
+onMounted(() => {
-  course.status = 'rejected';
+    searcher.search();
-  // 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>
+        <div>
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Gestión de Solicitudes de Capacitación</h1>
+            <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">Administra y aprueba las solicitudes de cursos de capacitación</p>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
-      </div>
+            </p>
+        </div>
     </div>
 
-    <!-- Card principal con tabla -->
+    <!-- Search Card -->
-    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+    <div class="pt-2 w-full">
-      <!-- Tabla de cursos -->
+        <Searcher @search="(x) => searcher.search(x)">
-      <div class="overflow-x-auto">
+        </Searcher>
-        <table class="w-full">
+    </div>
-          <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 -->
+    <!-- List Card -->
-              <td class="py-4 px-4">
+    <div class="pt-2 w-full">
-                <div class="font-medium text-gray-900 dark:text-primary-dt">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
-                  {{ course.courseName }}
+            <template #head>
-                </div>
+                <th v-text="$t('department')" />
-              </td>
+                <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>
 
-              <!-- Costo unitario -->
+            <template #body="{ items }">
-              <td class="py-4 px-4">
+                <tr v-for="model in items" class="table-row">
-                <div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
+                    <td>
-                  {{ formatCurrency(course.unitCost) }}
+                        <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">
-                </div>
+                            {{ model.department.name }}
-              </td>
+                        </span>
+                    </td>
+                    <td>{{ model.name }}</td>
+                    <td>{{ model.cost }} {{ model.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 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 === 'pending',
+                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status === 'approved',
+                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status === 'rejected'
+                            }">
+                            {{ 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>
 
-              <!-- URL -->
+            <template #empty>
-              <td class="py-4 px-4">
+                <td colspan="6" class="py-12 text-center">
-                <a 
+                    <div class="text-gray-500 dark:text-primary-dt/70">
-                  :href="course.url" 
+                        <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                  target="_blank"
+                        <p class="text-lg font-medium">No se encontraron cursos</p>
-                  class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-                >
+                    </div>
-                  Ver curso
+                </td>
-                </a>
+            </template>
-              </td>
+        </Table>
 
-              <!-- Opciones -->
+        <ShowView ref="showModal" />
-              <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 -->
+        <DestroyView ref="destroyModal" subtitle="certification_type"
-                  <button 
+            :to="(course) => apiTo('destroy', { course })" @update="searcher.search()" />
-                    @click="approveCourse(course)"
+    </div>
-                    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/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/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/router/Index.js

@@ -172,7 +172,7 @@ const router = createRouter({
                             component: () => import('@Pages/Courses/Index.vue'),
                         },
                         {
-                            path: 'assignamment',
+                            path: ':id/assignamment',
                             name: 'admin.courses.assignamment',
                             component: () => import('@Pages/Courses/Assignamment.vue'),
                         },