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/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/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',