From 1fef53f5582fdcfedfa787db853e376069f35784 Mon Sep 17 00:00:00 2001
From: "jose.lopez" <jose.lopez@golsystems.com.mx>
Date: Sat, 27 Sep 2025 15:45:13 +0000
Subject: [PATCH] historial-academico (#6)

Reviewed-on: https://gitea.golsystems.mx/juan.zapata/golscontrol-frontend-v1/pulls/6
---
 src/components/Holos/Card/AcademicRecords.vue |  83 +++++++
 src/components/Holos/Card/Certifications.vue  | 121 +++++++++
 src/components/Holos/NewTable.vue             | 151 ++++++++++++
 src/lang/es.js                                |  31 +++
 src/layouts/AdminLayout.vue                   |  21 +-
 src/pages/Academic/Index.vue                  | 147 -----------
 .../Users/Academic/CreateCertification.vue    |  58 +++++
 .../Admin/Users/Academic/CreateRecord.vue     |  82 ++++++
 .../Users/Academic/EditCertification.vue      |  75 ++++++
 src/pages/Admin/Users/Academic/EditRecord.vue |  97 ++++++++
 .../Users/Academic/FormCertification.vue      |  76 ++++++
 src/pages/Admin/Users/Academic/FormRecord.vue |  64 +++++
 src/pages/Admin/Users/Academic/Index.vue      | 151 ++++++++++++
 src/pages/Admin/Users/Academic/Module.js      |  21 ++
 .../Index.vue => Admin/Users/Additional.vue}  |   0
 src/pages/Admin/Users/Create.vue              |  22 +-
 src/pages/Admin/Users/Edit.vue                |  38 ++-
 src/pages/Admin/Users/Form.vue                |   7 +
 src/pages/Admin/Users/Index.vue               | 233 +++++++-----------
 .../Index.vue => Admin/Users/Payroll.vue}     |   0
 .../Index.vue => Admin/Users/Security.vue}    |   0
 src/router/Index.js                           |  87 +++----
 22 files changed, 1209 insertions(+), 356 deletions(-)
 create mode 100644 src/components/Holos/Card/AcademicRecords.vue
 create mode 100644 src/components/Holos/Card/Certifications.vue
 create mode 100644 src/components/Holos/NewTable.vue
 delete mode 100644 src/pages/Academic/Index.vue
 create mode 100644 src/pages/Admin/Users/Academic/CreateCertification.vue
 create mode 100644 src/pages/Admin/Users/Academic/CreateRecord.vue
 create mode 100644 src/pages/Admin/Users/Academic/EditCertification.vue
 create mode 100644 src/pages/Admin/Users/Academic/EditRecord.vue
 create mode 100644 src/pages/Admin/Users/Academic/FormCertification.vue
 create mode 100644 src/pages/Admin/Users/Academic/FormRecord.vue
 create mode 100644 src/pages/Admin/Users/Academic/Index.vue
 create mode 100644 src/pages/Admin/Users/Academic/Module.js
 rename src/pages/{Additional/Index.vue => Admin/Users/Additional.vue} (100%)
 rename src/pages/{Payroll/Index.vue => Admin/Users/Payroll.vue} (100%)
 rename src/pages/{Security/Index.vue => Admin/Users/Security.vue} (100%)

diff --git a/src/components/Holos/Card/AcademicRecords.vue b/src/components/Holos/Card/AcademicRecords.vue
new file mode 100644
index 0000000..6c58818
--- /dev/null
+++ b/src/components/Holos/Card/AcademicRecords.vue
@@ -0,0 +1,83 @@
+<script setup>
+import { getDate } from '@Controllers/DateController';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Props */
+const props = defineProps({
+  records: {
+    type: Array,
+    default: () => []
+  }
+});
+
+/** Eventos */
+const emit = defineEmits(['destroy', 'edit']);
+
+/** Métodos */
+function openDestroy(record) {
+  emit('destroy', record);
+}
+
+function openEdit(record) {
+  emit('edit', record);
+}
+</script>
+
+<template>
+  <div class="mt-6">
+    <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
+      <GoogleIcon 
+        class="text-black dark:text-primary-dt text-xl"
+        name="book"
+      />
+      Grados Académicos
+    </h3>
+
+    <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
+      <!-- Item grado dinámico -->
+      <article 
+        v-for="record in records" 
+        :key="record.id"
+        class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+      >
+        <div class="flex items-start justify-between">
+          <div>
+            <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ record.title }}</h4>
+            <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ record.institution }}</p>
+            <p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Fecha de obtención: {{ record.date_obtained ? getDate(record.date_obtained) : '-' }}</p>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
+              {{ record.degree_type_ek }}
+            </span>
+            <button 
+              @click="openEdit(record)"
+              class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+              title="Editar grado académico"
+            >
+              <GoogleIcon name="edit" class="w-4 h-4" />
+            </button>
+            <button 
+              @click="openDestroy(record)"
+              class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
+              title="Eliminar grado académico"
+            >
+              <GoogleIcon name="delete" class="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </article>
+
+      <!-- Estado vacío para grados académicos -->
+      <div v-if="!records || records.length === 0" class="col-span-2 py-8 text-center">
+        <div class="text-gray-500 dark:text-primary-dt/70">
+          <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+          <p class="text-lg font-medium">No se encontraron grados académicos</p>
+          <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Holos/Card/Certifications.vue b/src/components/Holos/Card/Certifications.vue
new file mode 100644
index 0000000..2d18022
--- /dev/null
+++ b/src/components/Holos/Card/Certifications.vue
@@ -0,0 +1,121 @@
+<script setup>
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import { getDate } from '@Controllers/DateController';
+
+/** Props */
+const props = defineProps({
+  certifications: {
+    type: Array,
+    default: () => []
+  }
+});
+
+/** Eventos */
+const emit = defineEmits(['destroy', 'edit']);
+
+/** Métodos */
+function openDestroy(cert) {
+  emit('destroy', cert);
+}
+
+function openEdit(cert) {
+  emit('edit', cert);
+}
+
+/** Métodos */
+function getCertificationStatus(cert) {
+  // Si no tiene fecha de expiración, se considera permanente
+  if (!cert.date_expiration) {
+    return {
+      status: 'permanente',
+      statusText: 'Permanente',
+      isExpired: false
+    };
+  }
+  
+  const now = new Date();
+  const expirationDate = new Date(cert.date_expiration);
+  
+  // Si la fecha actual es mayor a la fecha de expiración, está vencida
+  const isExpired = now > expirationDate;
+  
+  return {
+    status: isExpired ? 'vencida' : 'vigente',
+    statusText: isExpired ? 'Vencida' : 'Vigente',
+    isExpired
+  };
+}
+</script>
+
+<template>
+  <div class="mt-8">
+    <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
+      <GoogleIcon 
+        class="text-black dark:text-primary-dt text-xl"
+        name="license"
+      />
+      Certificaciones
+    </h3>
+
+    <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
+      <!-- Certificación dinámica -->
+      <article 
+        v-for="cert in certifications" 
+        :key="cert.id"
+        :class="[
+          'rounded-lg border p-4 relative',
+          getCertificationStatus(cert).status === 'vigente' 
+            ? 'border-gray-100 bg-green-50/40 dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt'
+            : 'border-gray-100 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt'
+        ]"
+      >
+        <div class="flex items-start justify-between">
+          <div>
+            <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ cert.name }}</h4>
+            <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ cert.institution }}</p>
+            <p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: {{ cert.date_obtained ? getDate(cert.date_obtained) : '-' }}</p>
+            <p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: {{ cert.date_expiration ? getDate(cert.date_expiration) : 'Permanente' }}</p>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <span 
+              :class="[
+                'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold',
+                getCertificationStatus(cert).status === 'vigente' 
+                  ? 'bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt'
+                  : getCertificationStatus(cert).status === 'permanente'
+                  ? 'bg-blue-100 text-blue-700 dark:bg-info-d dark:text-info-dt'
+                  : 'bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt'
+              ]"
+            >
+              {{ getCertificationStatus(cert).statusText }}
+            </span>
+            <button 
+              @click="openEdit(cert)"
+              class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+              title="Editar certificación"
+            >
+              <GoogleIcon name="edit" class="w-4 h-4" />
+            </button>
+            <button 
+              @click="openDestroy(cert)"
+              class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
+              title="Eliminar certificación"
+            >
+              <GoogleIcon name="delete" class="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      </article>
+
+      <!-- Estado vacío para certificaciones -->
+      <div v-if="!certifications || certifications.length === 0" class="col-span-2 py-8 text-center">
+        <div class="text-gray-500 dark:text-primary-dt/70">
+          <GoogleIcon name="license" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+          <p class="text-lg font-medium">No se encontraron certificaciones</p>
+          <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Holos/NewTable.vue b/src/components/Holos/NewTable.vue
new file mode 100644
index 0000000..574316f
--- /dev/null
+++ b/src/components/Holos/NewTable.vue
@@ -0,0 +1,151 @@
+<script setup>
+import GoogleIcon from '../Shared/GoogleIcon.vue';
+import Loader from '../Shared/Loader.vue';
+
+/** Eventos */
+const emit = defineEmits([
+  'send-pagination'
+]);
+
+/** Propiedades */
+const props = defineProps({
+  items: Object,
+  processing: Boolean
+});
+
+</script>
+
+<template>
+  <div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+
+    <!-- Tabla -->
+    <div class="overflow-x-auto">
+      <table v-if="!processing" class="w-full">
+        <thead>
+          <tr class="text-left text-sm text-gray-500 dark:text-primary-dt/70">
+            <slot name="head" />
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-primary/20 text-sm text-gray-700 dark:text-primary-dt">
+          <template v-if="items?.total > 0">
+            <slot
+              name="body"
+              :items="items?.data"
+            />
+          </template>
+          <template v-else>
+            <tr>
+              <slot name="empty" />
+            </tr>
+          </template>
+        </tbody>
+      </table>
+
+      <!-- Estado de carga -->
+      <table v-else class="animate-pulse w-full">
+        <thead>
+          <tr>
+            <th colspan="100%" class="h-8 text-center">
+              <div class="flex items-center justify-center">
+                <Loader />
+              </div>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="i in 3" :key="i">
+            <td colspan="100%" class="table-cell h-16 text-center">
+              <div class="w-full h-4 bg-secondary/50 rounded-md"></div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Paginación -->
+    <template v-if="items?.links && items.links.length > 3">
+      <div class="mt-6 flex w-full justify-end">
+        <div class="flex w-full justify-end flex-wrap space-x-1 -mb-1">
+          <template v-for="(link, k) in items.links" :key="k">
+            <!-- Botón anterior deshabilitado -->
+            <div v-if="link.url === null && k == 0"
+              class="px-3 py-2 text-sm leading-4 text-gray-400 border rounded-lg bg-gray-50 dark:bg-primary-d dark:border-primary/20"
+            >
+              <GoogleIcon name="arrow_back" class="w-4 h-4" />
+            </div>
+            
+            <!-- Botón anterior activo -->
+            <button v-else-if="k === 0" 
+              class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50" 
+              :class="{ 
+                'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
+                'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
+              }"
+              @click="emit('send-pagination', link.url)"
+            >
+              <GoogleIcon name="arrow_back" class="w-4 h-4" />
+            </button>
+            
+            <!-- Botón siguiente deshabilitado -->
+            <div v-else-if="link.url === null && k == (items.links.length - 1)"
+              class="px-3 py-2 text-sm leading-4 text-gray-400 border rounded-lg bg-gray-50 dark:bg-primary-d dark:border-primary/20"
+            >
+              <GoogleIcon name="arrow_forward" class="w-4 h-4" />
+            </div>
+            
+            <!-- Botón siguiente activo -->
+            <button v-else-if="k === (items.links.length - 1)" 
+              class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50" 
+              :class="{ 
+                'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
+                'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
+              }"
+              @click="emit('send-pagination', link.url)"
+            >
+              <GoogleIcon name="arrow_forward" class="w-4 h-4" />
+            </button>
+            
+            <!-- Números de página -->
+            <button v-else 
+              class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50" 
+              :class="{ 
+                'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
+                'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
+              }"
+              v-html="link.label"
+              @click="emit('send-pagination', link.url)"
+            ></button>
+          </template>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+/* Estilos adicionales para mejorar la experiencia */
+tbody tr {
+  transition: background-color 0.2s ease;
+}
+
+tbody tr:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.dark tbody tr:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+/* Animación suave para los botones de paginación */
+button {
+  transition: all 0.2s ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+}
+
+button:active {
+  transform: translateY(0);
+}
+</style>
diff --git a/src/lang/es.js b/src/lang/es.js
index bc0039a..6e7566e 100644
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -150,6 +150,9 @@ export default {
     },
     dashboard: 'Dashboard',
     date: 'Fecha',
+    date_expiration: 'Fecha de expiración',
+    date_obtained: 'Fecha de obtención',
+    department: 'Departamento',
     dates: {
         start: 'Fecha Inicial',
         end: 'Fecha Final'
@@ -168,6 +171,7 @@ export default {
         confirm: 'Al presionar ELIMINAR el registro se eliminará permanentemente y no podrá recuperarse.',
         title: 'Eliminar',
     },
+    degreeType: 'Tipo de grado',
     deleted:'Registro eliminado',
     description:'Descripción',
     details:'Detalles',
@@ -202,6 +206,9 @@ export default {
         home: 'Volver a la pagina de inicio.',
         title:'Ayuda',
     },
+    headquarter: 'Sede',
+    hire_date: 'Fecha de contratación',
+    institution: 'Institución',
     history: {
         title:'Historial de acciones',
         description:'Historial de acciones realizadas por los usuarios en orden cronológico.'
@@ -216,6 +223,7 @@ export default {
     menu:'Menú',
     name:'Nombre',
     noRecords:'Sin registros',
+    number: 'Número',
     notification:'Notificación',
     notifications: {
         unreadClosed:'Ocultas',
@@ -394,6 +402,28 @@ export default {
     unreaded:'No leído',
     user:'Usuario',
     users:{
+        academic: {
+            create: {
+                certification: {
+                    description: 'Permite agregar nuevas certificaciones profesionales al historial académico del usuario.',
+                    title: 'Crear certificación'
+                },
+                record: {
+                    description: 'Permite agregar nuevos grados académicos al historial del usuario.',
+                    title: 'Crear registro académico'
+                }
+            },
+            edit: {
+                certification: {
+                    description: 'Permite modificar los datos de la certificación profesional seleccionada.',
+                    title: 'Editar certificación'
+                },
+                record: {
+                    description: 'Permite modificar los datos del registro académico seleccionado.',
+                    title: 'Editar registro académico'
+                }
+            }
+        },
         activity: {
             title: 'Actividad del usuario',
             description: 'Historial de acciones realizadas por el usuario.',
@@ -405,6 +435,7 @@ export default {
             onError:'Ocurrió un error al crear el usuario'
         },
         deleted:'Usuario eliminado',
+        description: 'Gestión de información general de empleados',
         remove: 'Remover usuario',
         edit: {
             title: 'Editar usuario'
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 0b5a612..ffdba34 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -48,29 +48,24 @@ onMounted(() => {
                 />
                 <DropDown 
                     icon="people"
-                    name="Empleados" 
-                    to="admin.employees.index"
+                    name="Usuarios" 
+                    to="admin.users.index"
                     :collapsed="true"
                 >
                         <Link
                             icon="school"
                             name="Historial Académico" 
-                            to="admin.academic.index"
+                            to="admin.users.academic.index"
                         />
                         <Link
                             icon="security"
                             name="Seguridad y Salud" 
-                            to="admin.security.index"
-                        />
-                        <Link
-                            icon="payments"
-                            name="Nómina" 
-                            to="admin.payroll.index"
+                            to="admin.users.security"
                         />
                         <Link
                             icon="info"
                             name="Información Adicional" 
-                            to="admin.additional.index"
+                            to="admin.users.additional"
                         />
                 </DropDown>
             </Section>
@@ -133,12 +128,6 @@ onMounted(() => {
                 v-if="hasPermission('users.index')"
                 :name="$t('admin.title')"
             >
-                <!-- <Link
-                    v-if="hasPermission('users.index')"
-                    icon="people"
-                    name="users.title" 
-                    to="admin.users.index"
-                /> -->
                 <Link
                     v-if="hasPermission('roles.index')"
                     icon="license"
diff --git a/src/pages/Academic/Index.vue b/src/pages/Academic/Index.vue
deleted file mode 100644
index 3f4a3a9..0000000
--- a/src/pages/Academic/Index.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- Página: Header principal -->
-    <div class="flex items-start justify-between">
-      <div>
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Historial Académico</h1>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de grados académicos y certificaciones profesionales</p>
-      </div>
-
-      <div>
-        <Adding text="Agregar Registro" />
-      </div>
-    </div>
-
-    <!-- Card principal: perfil + secciones -->
-    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-      <!-- Perfil -->
-      <header class="flex items-start gap-4">
-        <div class="flex-shrink-0">
-          <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
-            <!-- icono usuario -->
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="school"
-            />
-          </div>
-        </div>
-
-        <div class="flex-1">
-          <h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">María González López</h2>
-          <p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información académica y certificaciones profesionales</p>
-        </div>
-      </header>
-
-      <!-- Secciones: Grados Académicos -->
-      <div class="mt-6">
-        <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="book"
-            />
-          Grados Académicos
-        </h3>
-
-        <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
-          <!-- Item grado -->
-          <article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-            <div class="flex items-start justify-between">
-              <div>
-                <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Licenciatura en Ingeniería en Sistemas</h4>
-                <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Universidad Nacional Autónoma de México</p>
-                <p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2015</p>
-              </div>
-
-              <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
-                Licenciatura
-              </span>
-            </div>
-          </article>
-
-          <article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-            <div class="flex items-start justify-between">
-              <div>
-                <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Maestría en Ciencias de la Computación</h4>
-                <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Instituto Tecnológico de Monterrey</p>
-                <p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Año: 2018</p>
-              </div>
-
-              <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
-                Maestría
-              </span>
-            </div>
-          </article>
-        </div>
-      </div>
-
-      <!-- Secciones: Certificaciones -->
-      <div class="mt-8">
-        <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="license"
-            />
-          Certificaciones
-        </h3>
-
-        <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
-          <!-- Cert vigente -->
-          <article class="rounded-lg border border-gray-100 bg-green-50/40 p-4 relative dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt">
-            <div class="flex items-start justify-between">
-              <div>
-                <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">AWS Certified Solutions Architect</h4>
-                <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Amazon Web Services</p>
-                <p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2023-05-15</p>
-                <p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2026-05-15</p>
-              </div>
-
-              <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt">
-                Vigente
-              </span>
-            </div>
-          </article>
-
-          <!-- Cert vencida -->
-          <article class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-            <div class="flex items-start justify-between">
-              <div>
-                <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Certified ScrumMaster</h4>
-                <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">Scrum Alliance</p>
-                <p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: 2022-08-20</p>
-                <p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: 2024-08-20</p>
-              </div>
-
-              <span class="ml-4 inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt">
-                Vencida
-              </span>
-            </div>
-          </article>
-        </div>
-      </div>
-
-      <!-- Acciones al final de la tarjeta -->
-      <div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
-        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-          <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="add"
-            />
-          Agregar Grado
-        </button>
-
-        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="add"
-            />
-          Agregar Certificación
-        </button>
-      </div>
-    </section>
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/CreateCertification.vue b/src/pages/Admin/Users/Academic/CreateCertification.vue
new file mode 100644
index 0000000..bccede7
--- /dev/null
+++ b/src/pages/Admin/Users/Academic/CreateCertification.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { useRouter, useRoute } from 'vue-router';
+import { useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import FormCertification from './FormCertification.vue';
+
+/** Definidores */
+const router = useRouter();
+const route = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    name: '',
+    description: '',
+    institution: '',
+    date_obtained: '',
+    date_expiration: '',
+    number: '',
+    user_id: route.params.id || '',
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store-certificate'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('create.certification.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl('create.certification.description')" />
+    </div>
+    
+    <FormCertification
+        :form="form"
+        @submit="submit"
+    />
+</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/CreateRecord.vue b/src/pages/Admin/Users/Academic/CreateRecord.vue
new file mode 100644
index 0000000..f9110ee
--- /dev/null
+++ b/src/pages/Admin/Users/Academic/CreateRecord.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
+import FormRecord      from './FormRecord.vue';
+
+/** Definidores */
+const router = useRouter();
+const route = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    title: '',
+    institution: '',
+    date_obtained: '',
+    degree_type_ek: '',
+    user_id: route.params.id || '',
+    // file_path: null,
+});
+
+const degreeTypes = ref([]);
+
+/** Métodos */
+function submit() {
+    form.transform(data => ({
+        ...data,
+        degree_type_ek: form.degree_type_ek?.id
+    })).post(apiTo('store-record'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.catalog({
+            'degreeType:all': null,
+        },
+        {
+           onSuccess: (r) => {
+            degreeTypes.value = r['degreeType:all'] ?? [];
+        } 
+    });
+})
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('create.record.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl('create.record.description')" />
+    </div>
+    <FormRecord
+        :degreeTypes="degreeTypes"
+        :form="form"
+        @submit="submit"
+    >
+        <Selectable
+            v-model="form.degree_type_ek"
+            title="degreeType"
+            :options="degreeTypes"
+        />
+    </FormRecord>
+</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/EditCertification.vue b/src/pages/Admin/Users/Academic/EditCertification.vue
new file mode 100644
index 0000000..5cc2039
--- /dev/null
+++ b/src/pages/Admin/Users/Academic/EditCertification.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import FormCertification from './FormCertification.vue';
+
+/** Definidores */
+const router = useRouter();
+const vroute = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    name: '',
+    description: '',
+    institution: '',
+    date_obtained: '',
+    date_expiration: '',
+    number: '',
+    user_id: vroute.params.id || '',
+});
+
+/** Métodos */
+function submit() {
+    form.put(apiTo('update-certificate', { certificate: vroute.params.certification }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('show-certificate', { certificate: vroute.params.certification }), {
+        onSuccess: (r) => {
+            form.fill(r.certificate)
+            if (r.certificate.date_obtained) {
+                form.date_obtained = new Date(r.certificate.date_obtained).toISOString().split('T')[0]
+            }
+            if (r.certificate.date_expiration) {
+                form.date_expiration = new Date(r.certificate.date_expiration).toISOString().split('T')[0]
+            }
+        }
+    });
+})
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('edit.certification.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl('edit.certification.description')" />
+    </div>
+    <FormCertification
+        action="update"
+        :form="form"
+        @submit="submit"
+    />
+</template>
diff --git a/src/pages/Admin/Users/Academic/EditRecord.vue b/src/pages/Admin/Users/Academic/EditRecord.vue
new file mode 100644
index 0000000..2001ef3
--- /dev/null
+++ b/src/pages/Admin/Users/Academic/EditRecord.vue
@@ -0,0 +1,97 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
+import FormRecord      from './FormRecord.vue';
+
+/** Definidores */
+const router = useRouter();
+const vroute = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    title: '',
+    institution: '',
+    date_obtained: '',
+    degree_type_ek: '',
+    user_id: vroute.params.id || '',
+    // file_path: null,
+});
+
+const degreeTypes = ref([]);
+
+/** Métodos */
+function submit() {
+    form.transform(data => ({
+        ...data,
+        degree_type_ek: form.degree_type_ek?.id
+    })).put(apiTo('update-record', { academicRecord: vroute.params.record }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+
+function fillForm() {
+    api.get(apiTo('show-record', { academicRecord: vroute.params.record }), {
+        onSuccess: (r) => {
+            form.fill(r.academic_record)
+            form.degree_type_ek = degreeTypes.value.find(type => type.name == form.degree_type_ek)
+            if (r.academic_record.date_obtained) {
+                form.date_obtained = new Date(r.academic_record.date_obtained).toISOString().split('T')[0]
+            }
+        }
+    });
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.catalog({
+            'degreeType:all': null,
+        },
+        {
+           onSuccess: (r) => {
+            degreeTypes.value = r['degreeType:all'] ?? [];
+            // De esta manera se puede rellenar el form con el degree_type_ek del catalogo
+            fillForm();
+        } 
+    });
+})
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('edit.record.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl('edit.record.description')" />
+    </div>
+    <FormRecord
+        :degreeTypes="degreeTypes"
+        :form="form"
+        @submit="submit"
+    >
+        <Selectable
+            action="update"
+            v-model="form.degree_type_ek"
+            title="degreeType"
+            :options="degreeTypes"
+        />
+    </FormRecord>
+</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/FormCertification.vue b/src/pages/Admin/Users/Academic/FormCertification.vue
new file mode 100644
index 0000000..34f4efd
--- /dev/null
+++ b/src/pages/Admin/Users/Academic/FormCertification.vue
@@ -0,0 +1,76 @@
+<script setup>
+import PrimaryButton   from '@Holos/Button/Primary.vue';
+import Input           from '@Holos/Form/Input.vue';
+import Textarea        from '@Holos/Form/Textarea.vue';
+
+const emit = defineEmits([
+    'submit'
+])
+
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object
+})
+
+const submit = () => {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <Input
+                v-model="form.name"
+                id="name"
+                :onError="form.errors.name"
+                autofocus
+                required
+            />
+            <Input
+                v-model="form.institution"
+                id="institution"
+                :onError="form.errors.institution"
+                required
+            />
+            <Input
+                v-model="form.number"
+                id="number"
+                :onError="form.errors.number"
+                required
+            />
+            <Input
+                v-model="form.date_obtained"
+                id="date_obtained"
+                :onError="form.errors.date_obtained"
+                type="date"
+                required
+            />
+            <Input
+                v-model="form.date_expiration"
+                id="date_expiration"
+                :onError="form.errors.date_expiration"
+                type="date"
+            />
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4">
+                <Textarea
+                    v-model="form.description"
+                    id="description"
+                    :onError="form.errors.description"
+                    rows="4"
+                />
+            </div>
+            
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
+                <PrimaryButton
+                    v-text="$t('create')"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </div>
+        </form>
+    </div>
+</template>
diff --git a/src/pages/Admin/Users/Academic/FormRecord.vue b/src/pages/Admin/Users/Academic/FormRecord.vue
new file mode 100644
index 0000000..ff1b382
--- /dev/null
+++ b/src/pages/Admin/Users/Academic/FormRecord.vue
@@ -0,0 +1,64 @@
+<script setup>
+import PrimaryButton   from '@Holos/Button/Primary.vue';
+import Input           from '@Holos/Form/Input.vue';
+import SingleFile      from '@Holos/Form/SingleFile.vue';
+
+const emit = defineEmits([
+    'submit'
+])
+
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object
+})
+
+const submit = () => {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <Input
+                v-model="form.title"
+                id="title"
+                :onError="form.errors.title"
+                autofocus
+                required
+            />
+            <Input
+                v-model="form.institution"
+                id="institution"
+                :onError="form.errors.institution"
+                required
+            />
+            <Input
+                v-model="form.date_obtained"
+                id="date_obtained"
+                :onError="form.errors.date_obtained"
+                type="date"
+                required
+            />
+            <!-- <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4">
+                <SingleFile
+                    v-model="form.file_path"
+                    title="Archivo"
+                    accept="application/pdf,image/png,image/jpeg"
+                />
+            </div> -->
+            <slot />
+            
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
+                <PrimaryButton
+                    v-text="$t('create')"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </div>
+        </form>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/Index.vue b/src/pages/Admin/Users/Academic/Index.vue
new file mode 100644
index 0000000..58397cf
--- /dev/null
+++ b/src/pages/Admin/Users/Academic/Index.vue
@@ -0,0 +1,151 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useSearcher } from '@Services/Api';
+import { getDate } from '@Controllers/DateController';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+import AcademicRecords from '@Holos/Card/AcademicRecords.vue';
+import Certifications from '@Holos/Card/Certifications.vue';
+import DestroyView from '@Holos/Modal/Template/Destroy.vue';
+
+/** Propiedades */
+const models = ref([]);
+
+/** Definidores */
+const router = useRouter();
+
+/** Referencias */
+const destroyRecordModal = ref(false);
+const destroyCertModal = ref(false);
+
+/** Métodos */
+const searcher = useSearcher({
+    url: apiTo('index'),
+    onSuccess: (r) => models.value = r.models,
+    onError: () => models.value = []
+});
+
+function openDestroyRecord(record) {
+    destroyRecordModal.value.open(record);
+}
+
+function openDestroyCert(cert) {
+    destroyCertModal.value.open(cert);
+}
+
+function openEditRecord(record) {
+    router.push(viewTo({ name: 'editRecord', params: { id: record.user_id, record: record.id } }));
+}
+
+function openEditCert(cert) {
+    router.push(viewTo({ name: 'editCertification', params: { id: cert.user_id, certification: cert.id } }));
+}
+
+/** Ciclos */
+onMounted(() => {
+  searcher.search();
+});
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Página: Header principal -->
+    <div class="flex items-start justify-between">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Historial Académico</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de grados académicos y certificaciones profesionales</p>
+      </div>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+      <Searcher @search="(x) => searcher.search(x)">
+      </Searcher>
+    </div>
+
+    <!-- Cards principales: una por usuario -->
+    <section 
+      v-for="user in models.data" 
+      :key="user.id"
+      class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+    >
+      <!-- Perfil -->
+      <header class="flex items-start gap-4">
+        <div class="flex-shrink-0">
+          <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
+            <!-- icono usuario -->
+            <GoogleIcon 
+               class="text-black dark:text-primary-dt text-xl"
+               name="school"
+            />
+          </div>
+        </div>
+
+        <div class="flex-1">
+          <h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">{{ user.full_name }}</h2>
+          <p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información académica y certificaciones profesionales</p>
+        </div>
+      </header>
+
+      <!-- Secciones: Grados Académicos -->
+      <AcademicRecords 
+        :records="user.academic_records || []" 
+        @destroy="openDestroyRecord"
+        @edit="openEditRecord"
+      />
+
+      <!-- Secciones: Certificaciones -->
+      <Certifications 
+        :certifications="user.certificates || []" 
+        @destroy="openDestroyCert"
+        @edit="openEditCert"
+      />
+
+      <!-- Acciones al final de la tarjeta -->
+      <div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
+        <RouterLink :to="viewTo({ name: 'createRecord', params: { id: user.id } })" class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+          <GoogleIcon 
+               class="text-black dark:text-primary-dt text-xl"
+               name="add"
+            />
+          Agregar Grado
+        </RouterLink>
+
+        <RouterLink :to="viewTo({ name: 'createCertification', params: { id: user.id } })" class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <GoogleIcon 
+               class="text-black dark:text-primary-dt text-xl"
+               name="add"
+            />
+          Agregar Certificación
+        </RouterLink>
+      </div>
+    </section>
+
+    <!-- Estado vacío general -->
+    <div v-if="models.length === 0" class="mt-6 py-12 text-center">
+      <div class="text-gray-500 dark:text-primary-dt/70">
+        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+        <p class="text-lg font-medium">No se encontraron usuarios</p>
+        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+      </div>
+    </div>
+
+    <!-- Modales de eliminación -->
+    <DestroyView 
+      ref="destroyRecordModal" 
+      subtitle="title"
+      :to="(academicRecord) => apiTo('destroy-record', { academicRecord })" 
+      @update="searcher.search()" 
+    />
+    
+    <DestroyView 
+      ref="destroyCertModal" 
+      subtitle="name"
+      :to="(certificate) => apiTo('destroy-certificate', { certificate })" 
+      @update="searcher.search()" 
+    />
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/Module.js b/src/pages/Admin/Users/Academic/Module.js
new file mode 100644
index 0000000..86fb830
--- /dev/null
+++ b/src/pages/Admin/Users/Academic/Module.js
@@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`admin.users.academic.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.academic.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`users.academic.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`users.academic.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/pages/Additional/Index.vue b/src/pages/Admin/Users/Additional.vue
similarity index 100%
rename from src/pages/Additional/Index.vue
rename to src/pages/Admin/Users/Additional.vue
diff --git a/src/pages/Admin/Users/Create.vue b/src/pages/Admin/Users/Create.vue
index 4552fd4..4cb89f2 100644
--- a/src/pages/Admin/Users/Create.vue
+++ b/src/pages/Admin/Users/Create.vue
@@ -20,17 +20,21 @@ const form = useForm({
     maternal: '',
     email: '',
     phone: '',
+    hire_date: '',
     password: '',
-    roles: []
+    roles: [],
+    department_id: '',
 });
 
 const roles = ref([]);
+const departments = ref([]);
 
 /** Métodos */
 function submit() {
     form.transform(data => ({
         ...data,
-        roles: data.roles.map(role => role.id)
+        roles: data.roles.map(role => role.id),
+        department_id: data.department_id?.id
     })).post(apiTo('store'), {
         onSuccess: () => {
             Notify.success(Lang('register.create.onSuccess'))
@@ -46,6 +50,15 @@ onMounted(() => {
             roles.value = r.roles;
         }
     });
+
+    api.catalog({
+            'department:all': null,
+        },
+        {
+           onSuccess: (r) => {
+            departments.value = r['department:all'] ?? [];
+        } 
+    });
 })
 </script>
 
@@ -82,5 +95,10 @@ onMounted(() => {
             :options="roles"
             multiple
         />
+        <Selectable
+            v-model="form.department_id"
+            title="Departamento"
+            :options="departments"
+        />
     </Form>
 </template>
diff --git a/src/pages/Admin/Users/Edit.vue b/src/pages/Admin/Users/Edit.vue
index 058579a..d6f3bff 100644
--- a/src/pages/Admin/Users/Edit.vue
+++ b/src/pages/Admin/Users/Edit.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import { api, useForm } from '@Services/Api';
 import { viewTo, apiTo , transl } from './Module';
 
 import IconButton      from '@Holos/Button/Icon.vue'
 import PageHeader      from '@Holos/PageHeader.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
 import Form            from './Form.vue'
 
 /** Definiciones */
@@ -19,12 +20,19 @@ const form = useForm({
     paternal: '',
     maternal: '',
     email: '',
+    hire_date: '',
     phone: '',
+    department_id: '',
 });
 
+const departments = ref([]);
+
 /** Métodos */
 function submit() {
-    form.put(apiTo('update', { user: form.id }), {
+    form.transform(data => ({
+        ...data,
+        department_id: data.department_id?.id
+    })).put(apiTo('update', { user: form.id }), {
         onSuccess: () => {
             Notify.success(Lang('register.edit.onSuccess'))
             router.push(viewTo({ name: 'index' }));
@@ -34,8 +42,24 @@ function submit() {
 
 onMounted(() => {
     api.get(apiTo('show', { user: vroute.params.id }), {
-        onSuccess: (r) => form.fill(r.user)
+        onSuccess: (r) => {
+            form.fill(r.user)
+            form.department_id = r.user.department
+            if (r.user.hire_date) {
+                form.hire_date = new Date(r.user.hire_date).toISOString().split('T')[0]
+            }
+        }
     });
+    
+    api.catalog({
+            'department:all': null,
+        },
+        {
+           onSuccess: (r) => {
+            departments.value = r['department:all'] ?? [];
+        } 
+        }
+    );
 })
 </script>
 
@@ -54,5 +78,11 @@ onMounted(() => {
         action="update"
         :form="form"
         @submit="submit"
-    />
+    >
+        <Selectable
+            v-model="form.department_id"
+            title="Departamento"
+            :options="departments"
+        />
+    </Form>
 </template>
diff --git a/src/pages/Admin/Users/Form.vue b/src/pages/Admin/Users/Form.vue
index f6990cf..84f6cc2 100644
--- a/src/pages/Admin/Users/Form.vue
+++ b/src/pages/Admin/Users/Form.vue
@@ -61,6 +61,13 @@ function submit() {
                 :onError="form.errors.email"
                 required
             />
+            <Input
+                v-model="form.hire_date"
+                id="hire_date"
+                :onError="form.errors.hire_date"
+                type="date"
+                required
+            />
             <slot />
             <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
                 <PrimaryButton
diff --git a/src/pages/Admin/Users/Index.vue b/src/pages/Admin/Users/Index.vue
index a824ae6..c5933c8 100644
--- a/src/pages/Admin/Users/Index.vue
+++ b/src/pages/Admin/Users/Index.vue
@@ -2,19 +2,24 @@
 import { onMounted, ref } from 'vue';
 import { useSearcher } from '@Services/Api';
 import { hasPermission } from '@Plugins/RolePermission';
+import { getDate } from '@Controllers/DateController';
 import { can, apiTo, viewTo, transl } from './Module'
 
-import IconButton   from '@Holos/Button/Icon.vue'
-import DestroyView  from '@Holos/Modal/Template/Destroy.vue';
+import IconButton from '@Holos/Button/Icon.vue'
+import DestroyView from '@Holos/Modal/Template/Destroy.vue';
 import SearcherHead from '@Holos/Searcher.vue';
-import Table        from '@Holos/Table.vue';
-import ShowView     from './Modals/Show.vue';
+import Table from '@Holos/NewTable.vue';
+import ShowView from './Modals/Show.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 
 /** Propiedades */
 const models = ref([]);
 
 /** Referencias */
-const showModal    = ref(false);
+const showModal = ref(false);
 const destroyModal = ref(false);
 
 /** Métodos */
@@ -31,146 +36,86 @@ onMounted(() => {
 </script>
 
 <template>
-    <div>
-        <SearcherHead
-            :title="transl('title')"
-            @search="(x) => searcher.search(x)"
-        >
-            <RouterLink
-                v-if="can('create')"
-                :to="viewTo({ name: 'create' })"
-            >
-                <IconButton
-                    class="text-white"
-                    icon="add"
-                    :title="$t('crud.create')"
-                    filled
-                />
-            </RouterLink>
-            <IconButton
-                icon="refresh"
-                :title="$t('refresh')"
-                @click="searcher.search()"
-            />
-        </SearcherHead>
-        <div class="pt-2 w-full">
-            <Table 
-                :items="models"
-                :processing="searcher.processing"
-                @send-pagination="(page) => searcher.pagination(page)"
-            >
-                <template #head>
-                    <th v-text="$t('user')" />
-                    <th v-text="$t('contact')" />
-                    <th
-                        v-text="$t('actions')"
-                        class="w-32 text-center"
-                    />
-                </template>
-                <template #body="{items}">
-                    <tr
-                        v-for="model in items"
-                        class="table-row"
-                    >
-                        <td class="table-cell">
-                            {{ `${model.name} ${model.paternal}` }}
-                        </td>
-                        <td class="table-cell">
-                            <p>
-                                <a 
-                                    class="hover:underline"
-                                    target="_blank"
-                                    :href="`mailto:${model.email}`"
-                                >
-                                    {{ model.email }}
-                                </a>
-                            </p>
-                            <p v-if="model.phone" class="font-semibold text-xs">
-                                <b>Teléfono: </b>
-                                <span
-                                    class="hover:underline"
-                                    target="_blank"
-                                    :href="`tel:${model.phone}`"
-                                >
-                                    {{ model.phone }}
-                                </span>
-                            </p>
-                        </td>
-                        <td class="table-cell">
-                            <div class="table-actions">
-                                <IconButton
-                                    icon="visibility"
-                                    :title="$t('crud.show')"
-                                    @click="showModal.open(model)"
-                                    outline
-                                />
-                                <RouterLink
-                                    v-if="can('edit')"
-                                    class="h-fit"
-                                    :to="viewTo({ name: 'edit', params: { id: model.id } })"
-                                >
-                                    <IconButton
-                                        icon="edit"
-                                        :title="$t('crud.edit')"
-                                        outline
-                                    />
-                                </RouterLink>
-                                <IconButton
-                                    v-if="can('destroy')"
-                                    icon="delete"
-                                    :title="$t('crud.destroy')"
-                                    @click="destroyModal.open(model)"
-                                    outline
-                                />
-                                <RouterLink
-                                    v-if="can('settings')"
-                                    class="h-fit"
-                                    :to="viewTo({ name: 'settings', params: { id: model.id } })"
-                                >
-                                    <IconButton
-                                        icon="settings"
-                                        :title="$t('setting')"
-                                    />
-                                </RouterLink>
-                                <RouterLink
-                                    v-if="hasPermission('activities.index')"
-                                    class="h-fit"
-                                    :to="$view({ name: 'admin.activities.index', query: { user: model.id } })"
-                                >
-                                    <IconButton
-                                        icon="timeline"
-                                        :title="$t('activity')"
-                                    />
-                                </RouterLink>
-                            </div>
-                        </td>
-                    </tr>
-                </template>
-                <template #empty>
-                    <td class="table-cell">
-                        <div class="flex items-center text-sm">
-                            <p class="font-semibold">
-                                {{ $t('registers.empty') }}
-                            </p>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('users.title') }}</h1>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('users.description') }}
+            </p>
+        </div>
+
+        <RouterLink :to="viewTo({ name: 'create' })">
+            <Adding text="Nuevo Empleado" />
+        </RouterLink>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+        <Searcher @search="(x) => searcher.search(x)">
+        </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="pt-2 w-full">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
+            <template #head>
+                <th v-text="$t('name')" />
+                <th v-text="$t('department')" />
+                <th v-text="$t('headquarter')" />
+                <th v-text="$t('hire_date')" />
+                <th v-text="$t('status')" />
+                <th class="w-32 text-center" v-text="$t('actions')" />
+            </template>
+
+            <template #body="{ items }">
+                <tr v-for="model in items" class="table-row">
+                    <td>{{ model.full_name }}</td>
+                    <td>{{ model.department?.name }}</td>
+                    <td>{{ model.headquarter }}</td>
+                    <td>{{ model.hire_date ? getDate(model.hire_date) : '-' }}</td>
+                    <td class="py-6">
+                        <span
+                            class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">
+                            {{ model.status_ek }}
+                        </span>
+                    </td>
+                    <td>
+                        <div class="table-actions">
+                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
+                                outline />
+                            <RouterLink v-if="can('edit')" class="h-fit"
+                                :to="viewTo({ name: 'edit', params: { id: model.id } })">
+                                <IconButton icon="edit" :title="$t('crud.edit')" outline />
+                            </RouterLink>
+                            <IconButton v-if="can('destroy')" icon="delete" :title="$t('crud.destroy')"
+                                @click="destroyModal.open(model)" outline />
+                            <RouterLink v-if="can('settings')" class="h-fit"
+                                :to="viewTo({ name: 'settings', params: { id: model.id } })">
+                                <IconButton icon="settings" :title="$t('setting')" />
+                            </RouterLink>
+                            <RouterLink v-if="hasPermission('activities.index')" class="h-fit"
+                                :to="$view({ name: 'admin.activities.index', query: { user: model.id } })">
+                                <IconButton icon="timeline" :title="$t('activity')" />
+                            </RouterLink>
                         </div>
                     </td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                </template>
-            </Table>
-        </div>
-        
-        <ShowView 
-            ref="showModal"
-        />
+                </tr>
+            </template>
 
-        <DestroyView
-            v-if="can('destroy')"
-            ref="destroyModal"
-            subtitle="last_name"
-            :to="(user) => apiTo('destroy', { user })"
-            @update="searcher.search()"
-        />
+            <template #empty>
+                <td colspan="6" class="py-12 text-center">
+                    <div class="text-gray-500 dark:text-primary-dt/70">
+                        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                        <p class="text-lg font-medium">No se encontraron empleados</p>
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+                    </div>
+                </td>
+            </template>
+        </Table>
+
+        <ShowView ref="showModal" />
+
+        <DestroyView v-if="can('destroy')" ref="destroyModal" subtitle="last_name"
+            :to="(user) => apiTo('destroy', { user })" @update="searcher.search()" />
     </div>
-</template>
-    
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/pages/Payroll/Index.vue b/src/pages/Admin/Users/Payroll.vue
similarity index 100%
rename from src/pages/Payroll/Index.vue
rename to src/pages/Admin/Users/Payroll.vue
diff --git a/src/pages/Security/Index.vue b/src/pages/Admin/Users/Security.vue
similarity index 100%
rename from src/pages/Security/Index.vue
rename to src/pages/Admin/Users/Security.vue
diff --git a/src/router/Index.js b/src/router/Index.js
index 99cac92..76b22fb 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -130,7 +130,7 @@ const router = createRouter({
                 title: 'Inicio',
                 icon: 'home',
             },
-            redirect: '/admin/employees',
+            redirect: '/admin/dashboard',
             children: [
                 {
                     path: 'dashboard',
@@ -141,42 +141,6 @@ const router = createRouter({
                     },
                     component: () => import('@Pages/Dashboard/Admin.vue'),
                 },
-                {
-                    path: 'employees',
-                    name: 'admin.employees',
-                    meta: {
-                        title: 'Empleados',
-                        icon: 'people',
-                    },
-                    redirect: '/admin/employees',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.employees.index',
-                            component: () => import('@Pages/Employees/Index.vue'),
-                        },
-                        {
-                            path: 'academic',
-                            name: 'admin.academic.index',
-                            component: () => import('@Pages/Academic/Index.vue'),
-                        },
-                        {
-                            path: 'security',
-                            name: 'admin.security.index',
-                            component: () => import('@Pages/Security/Index.vue'),
-                        },
-                        {
-                            path: 'payroll',
-                            name: 'admin.payroll.index',
-                            component: () => import('@Pages/Payroll/Index.vue'),
-                        },
-                        {
-                            path: 'additional',
-                            name: 'admin.additional.index',
-                            component: () => import('@Pages/Additional/Index.vue'),
-                        },
-                    ]
-                },
                 {
                     path: 'vacations',
                     name: 'admin.vacations',
@@ -267,19 +231,16 @@ const router = createRouter({
                         {
                             path: '',
                             name: 'admin.users.index',
-                            beforeEnter: (to, from, next) => can(next, 'users.index'),
                             component: () => import('@Pages/Admin/Users/Index.vue'),
                         },
                         {
                             path: 'online',
                             name: 'admin.users.online',
-                            beforeEnter: (to, from, next) => can(next, 'users.online'),
                             component: () => import('@Pages/Admin/Users/Online.vue')
                         },
                         {
                             path: 'create',
                             name: 'admin.users.create',
-                            beforeEnter: (to, from, next) => can(next, 'users.create'),
                             meta: {
                                 title: 'Crear',
                                 icon: 'add',
@@ -288,7 +249,6 @@ const router = createRouter({
                         }, {
                             path: ':id/edit',
                             name: 'admin.users.edit',
-                            beforeEnter: (to, from, next) => can(next, 'users.edit'),
                             meta: {
                                 title: 'Editar',
                                 icon: 'edit',
@@ -297,13 +257,54 @@ const router = createRouter({
                         }, {
                             path: ':id/settings',
                             name: 'admin.users.settings',
-                            beforeEnter: (to, from, next) => can(next, 'users.settings'),
                             component: () => import('@Pages/Admin/Users/Settings.vue'),
                             meta: {
                                 title: 'Configuración',
                                 icon: 'settings',
                             },
-                        }
+                        },
+                        {
+                            path: 'academic',
+                            name: 'admin.users.academic',
+                            redirect: '/admin/users/academic',
+                            children: [
+                                {
+                                    path: '',
+                                    name: 'admin.users.academic.index',
+                                    component: () => import('@Pages/Admin/Users/Academic/Index.vue'),
+                                },
+                                {
+                                    path: ':id/create-record',
+                                    name: 'admin.users.academic.createRecord',
+                                    component: () => import('@Pages/Admin/Users/Academic/CreateRecord.vue'),
+                                },
+                                {
+                                    path: ':id/create-certification',
+                                    name: 'admin.users.academic.createCertification',
+                                    component: () => import('@Pages/Admin/Users/Academic/CreateCertification.vue'),
+                                },
+                                {
+                                    path: ':id/edit-record/:record',
+                                    name: 'admin.users.academic.editRecord',
+                                    component: () => import('@Pages/Admin/Users/Academic/EditRecord.vue'),
+                                },
+                                {
+                                    path: ':id/edit-certification/:certification',
+                                    name: 'admin.users.academic.editCertification',
+                                    component: () => import('@Pages/Admin/Users/Academic/EditCertification.vue'),
+                                },
+                            ]
+                        },
+                        {
+                            path: 'security',
+                            name: 'admin.users.security',
+                            component: () => import('@Pages/Admin/Users/Security.vue'),
+                        },
+                        {
+                            path: 'additional',
+                            name: 'admin.users.additional',
+                            component: () => import('@Pages/Admin/Users/Additional.vue'),
+                        },
                     ]
                 },
                 {