From 6d2cbce90d3dae4fc982d3a9174e3905d6142353 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Fri, 19 Sep 2025 16:24:58 -0600
Subject: [PATCH 1/8] =?UTF-8?q?ADD:=20Creaci=C3=B3n=20del=20frontend=20RH?=
 =?UTF-8?q?=20manager?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Holos/Dropdown.vue             |   2 +-
 src/components/Holos/Layout/RhApp.vue         |  57 ++++++
 src/components/Holos/Searcher.vue             |   2 +-
 src/components/Holos/Skeleton/Header.vue      |  20 +--
 src/components/Holos/Skeleton/RhSidebar.vue   |  54 ++++++
 .../Holos/Skeleton/Sidebar/Link.vue           |  31 +++-
 src/layouts/RhLayout.vue                      |  61 +++++++
 src/pages/Academic/Index.vue                  | 152 ++++++++++++++++
 src/pages/Additional/Index.vue                | 151 ++++++++++++++++
 src/pages/Dashboard/Index.vue                 | 116 +++++++++++-
 src/pages/Employees/Index.vue                 | 166 ++++++++++++++++++
 src/pages/Payroll/Index.vue                   | 145 +++++++++++++++
 src/pages/Security/Index.vue                  | 166 ++++++++++++++++++
 src/router/Index.js                           |  93 +++++++---
 14 files changed, 1165 insertions(+), 51 deletions(-)
 create mode 100644 src/components/Holos/Layout/RhApp.vue
 create mode 100644 src/components/Holos/Skeleton/RhSidebar.vue
 create mode 100644 src/layouts/RhLayout.vue
 create mode 100644 src/pages/Academic/Index.vue
 create mode 100644 src/pages/Additional/Index.vue
 create mode 100644 src/pages/Employees/Index.vue
 create mode 100644 src/pages/Payroll/Index.vue
 create mode 100644 src/pages/Security/Index.vue

diff --git a/src/components/Holos/Dropdown.vue b/src/components/Holos/Dropdown.vue
index a794f48..83eba7f 100644
--- a/src/components/Holos/Dropdown.vue
+++ b/src/components/Holos/Dropdown.vue
@@ -9,7 +9,7 @@ const props = defineProps({
     contentClasses: {
         default: () => [
             'pt-1',
-            'bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt'
+            '!bg-white dark:!bg-primary-d !text-gray-800 dark:!text-primary-dt'
         ],
         type: Array
     },
diff --git a/src/components/Holos/Layout/RhApp.vue b/src/components/Holos/Layout/RhApp.vue
new file mode 100644
index 0000000..c3f6332
--- /dev/null
+++ b/src/components/Holos/Layout/RhApp.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { onMounted } from 'vue';
+import useDarkMode from '@Stores/DarkMode'
+import useLeftSidebar from '@Stores/LeftSidebar'
+import useNotificationSidebar from '@Stores/NotificationSidebar'
+import useNotifier from '@Stores/Notifier'
+
+import Header              from '../Skeleton/Header.vue';
+import RhSidebar           from '../Skeleton/RhSidebar.vue';
+import NotificationSidebar from '../Skeleton/Sidebar/Notification.vue';
+
+/** Definidores */
+const darkMode            = useDarkMode();
+const leftSidebar         = useLeftSidebar();
+const notificationSidebar = useNotificationSidebar();
+const notifier            = useNotifier();
+
+/** Propiedades */
+defineProps({
+    title: String,
+});
+
+/** Ciclos */
+onMounted(() => {
+    leftSidebar.boot();
+    darkMode.boot();
+    notifier.boot();
+});
+</script>
+
+<template>
+    <div class="flex w-full h-screen bg-page text-page-t dark:bg-page-d dark:text-page-dt">
+        <RhSidebar
+            @open="leftSidebar.toggle()"
+        >
+            <slot name="leftSidebar"/>
+        </RhSidebar>
+        <NotificationSidebar
+            @open="notificationSidebar.toggle()"
+        />
+        <div 
+            class="flex flex-col w-full transition-all duration-300"
+            :class="{'md:w-[calc(100vw-rem)] md:ml-64':leftSidebar.isOpened, 'md:w-screen md:ml-0':leftSidebar.isClosed}"
+        >
+            <div class="h-2 md:h-14">
+                <Header
+                    @open="leftSidebar.toggle()"
+                />
+            </div>
+            <main class="flex h-full justify-center md:p-2">
+                <div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-xs md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 pb-4 md:rounded-sm overflow-y-auto overflow-x-auto transition-colors duration-300">
+                    <slot />
+                </div>
+            </main>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Holos/Searcher.vue b/src/components/Holos/Searcher.vue
index 3224708..1bdb48d 100644
--- a/src/components/Holos/Searcher.vue
+++ b/src/components/Holos/Searcher.vue
@@ -86,7 +86,7 @@ const clear = () => {
             <RouterLink :to="$view({name:'index'})">
                 <IconButton
                     :title="$t('home')"
-                    class="text-white"
+                    class="text-white !bg-blue-600"
                     icon="home"
                     filled
                 />
diff --git a/src/components/Holos/Skeleton/Header.vue b/src/components/Holos/Skeleton/Header.vue
index 5dc2abe..c23d72f 100644
--- a/src/components/Holos/Skeleton/Header.vue
+++ b/src/components/Holos/Skeleton/Header.vue
@@ -32,7 +32,7 @@ const loader              = useLoader()
       class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50"
       :class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}"
     >
-      <div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-primary dark:bg-primary-d text-white z-20 ">
+      <div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-white dark:bg-primary-d text-gray-700 z-20 ">
         <GoogleIcon
           class="text-2xl mt-1 z-50"
           name="list"
@@ -103,15 +103,15 @@ const loader              = useLoader()
                       <div class="text-center block px-4 py-2 text-sm border-b truncate">
                         {{ $page.user.name }}
                       </div>
-                      <DropdownLink to="profile.show">
-                        {{$t('profile')}}
-                      </DropdownLink>
-                      <div class="border-t border-gray-100" />
-                      <form @submit.prevent="logout">
-                          <DropdownLink as="button">
-                               {{$t('auth.logout')}}
-                          </DropdownLink>
-                      </form>
+                        <DropdownLink to="profile.show">
+                          {{$t('profile')}}
+                        </DropdownLink>
+                        <div class="border-t border-gray-100" />
+                        <form @submit.prevent="logout">
+                            <DropdownLink as="button">
+                                 {{$t('auth.logout')}}
+                            </DropdownLink>
+                        </form>
                   </template>
                 </Dropdown>
               </div>
diff --git a/src/components/Holos/Skeleton/RhSidebar.vue b/src/components/Holos/Skeleton/RhSidebar.vue
new file mode 100644
index 0000000..b0e0715
--- /dev/null
+++ b/src/components/Holos/Skeleton/RhSidebar.vue
@@ -0,0 +1,54 @@
+<script setup>
+import useLeftSidebar from '@Stores/LeftSidebar'
+import GoogleIcon     from '@Shared/GoogleIcon.vue';
+
+/** Definidores */
+const leftSidebar = useLeftSidebar()
+
+/** Eventos  */
+const emit = defineEmits(['open']);
+
+/** Propiedades */
+const props = defineProps({
+  sidebar: Boolean
+});
+</script>
+
+<template>
+  <div 
+    class="fixed top-[3.1rem] md:top-0 w-fit h-[calc(100vh-3.1rem)] md:h-screen transition-all duration-300 z-50"
+    :class="{'-translate-x-0':leftSidebar.isOpened, '-translate-x-64':leftSidebar.isClosed}"
+  >
+    <nav
+      class="flex md:w-64 h-full transition-all duration-300 border-none"
+      :class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
+    >
+      <div class="flex flex-col h-full p-2 md:w-64">
+        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-white dark:bg-primary-d text-page-t dark:text-page-dt border-r border-gray-200 dark:border-primary/20">
+          <div class="py-4 bg-transparent">
+            <div class="flex flex-row justify-center items-center w-full px-4 mb-6 gap-2">
+              <GoogleIcon class="bg-[#2563eb] text-white text-3xl rounded p-1" name="apartment" />
+              <div class="flex flex-col items-center justify-center gap-1">
+                <h2 class="text-gray-800 dark:text-primary-dt font-bold text-xl"> HR Manager</h2>
+                <span class="text-sm text-gray-500 dark:text-primary-dt/70">Sistema de RRHH</span>
+              </div>
+            </div>
+            <ul class="flex h-full flex-col space-y-1 px-2">
+              <slot />
+            </ul>
+          </div>
+          <div class="mb-4 px-4 py-4 border-t border-gray-200">
+            <p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
+              2025 RH Manager &copy; Golsystems
+            </p>
+          </div>
+        </div>
+      </div>
+      <div
+        class="h-full"
+        :class="{'w-[calc(100vw-17rem)] dark:bg-black/40 md:w-0 bg-black/20':leftSidebar.isOpened,'md:w-0':leftSidebar.isClosed}"
+        @click="leftSidebar.toggle()" 
+      ></div>
+    </nav>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Holos/Skeleton/Sidebar/Link.vue b/src/components/Holos/Skeleton/Sidebar/Link.vue
index d2c206a..1d5e97e 100644
--- a/src/components/Holos/Skeleton/Sidebar/Link.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Link.vue
@@ -13,15 +13,26 @@ const vroute      = useRoute();
 const props = defineProps({
     icon: String,
     name: String,
-    to: String
+    to: String,
+    active: {
+        type: Boolean,
+        default: false
+    }
 });
 
 const classes = computed(() => {
-    let status = props.to === vroute.name
-        ? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d'
-        : 'border-transparent';
+    let isActive = props.active || props.to === vroute.name;
+    
+    if (isActive) {
+        return 'flex items-center px-4 py-3 mx-2 my-1 text-white !bg-blue-600 rounded-lg transition-all duration-200 !border-transparent';
+    } else {
+        return 'flex items-center px-4 py-3 mx-2 my-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200';
+    }
+});
 
-    return `flex items-center h-11 focus:outline-hidden hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
+const iconClasses = computed(() => {
+    let isActive = props.active || props.to === vroute.name;
+    return isActive ? 'text-white' : 'text-gray-500';
 });
 
 const closeSidebar = () => {
@@ -39,19 +50,21 @@ const closeSidebar = () => {
         >
             <span
                 v-if="icon"
-                class="inline-flex justify-center items-center ml-4 mr-2"
+                class="inline-flex justify-center items-center mr-3"
             >
                 <GoogleIcon 
                     class="text-xl"
+                    :class="iconClasses"
                     :name="icon"
                     outline
                 />
             </span>
             <span 
                 v-if="name"
-                v-text="$t(name)"
-                class="text-sm tracking-wide truncate"
-            />
+                class="text-sm font-medium"
+            >
+                {{ name }}
+            </span>
             <slot />
         </RouterLink>
     </li>
diff --git a/src/layouts/RhLayout.vue b/src/layouts/RhLayout.vue
new file mode 100644
index 0000000..d9805de
--- /dev/null
+++ b/src/layouts/RhLayout.vue
@@ -0,0 +1,61 @@
+<script setup>
+import { onMounted } from 'vue';
+import useLoader    from '@Stores/Loader';
+
+import Layout  from '@/components/Holos/Layout/RhApp.vue';
+import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
+
+/** Definidores */
+const loader = useLoader()
+
+/** Propiedades */
+defineProps({
+    title: String,
+});
+
+/** Ciclos */
+onMounted(() => {
+    loader.boot()
+})
+</script>
+<template>
+  <Layout
+        :title="title"
+    >
+        <template #leftSidebar>
+            <Link
+                icon="grid_view"
+                name="Dashboard" 
+                to="dashboard.index"
+            />
+            <Link
+                icon="people"
+                name="Empleados" 
+                to="employees.index"
+            />
+            <Link
+                icon="school"
+                name="Historial Académico" 
+                to="academic.index"
+            />
+            <Link
+                icon="security"
+                name="Seguridad y Salud" 
+                to="security.index"
+            />
+            <Link
+                icon="payments"
+                name="Nómina" 
+                to="payroll.index"
+            />
+            <Link
+                icon="info"
+                name="Información Adicional" 
+                to="additional.index"
+            />
+        </template>
+        <!-- Contenido -->
+        <RouterView />
+        <!-- Fin contenido -->
+    </Layout>
+</template>
\ No newline at end of file
diff --git a/src/pages/Academic/Index.vue b/src/pages/Academic/Index.vue
new file mode 100644
index 0000000..9cf0bff
--- /dev/null
+++ b/src/pages/Academic/Index.vue
@@ -0,0 +1,152 @@
+<script setup>
+import GoogleIcon from '@Shared/GoogleIcon.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>
+        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
+          <GoogleIcon 
+            class="text-white text-xl"
+            name="add"
+          />
+          Agregar Registro
+        </button>
+      </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/Additional/Index.vue b/src/pages/Additional/Index.vue
new file mode 100644
index 0000000..6e576ad
--- /dev/null
+++ b/src/pages/Additional/Index.vue
@@ -0,0 +1,151 @@
+<script setup>
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Información Adicional</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Deportes, evaluaciones de desempeño y desarrollo profesional</p>
+      </div>
+
+      <div>
+        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
+          <GoogleIcon class="text-white text-xl" name="add" />
+          Nueva Evaluación
+        </button>
+      </div>
+    </div>
+
+    <!-- Card principal -->
+    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      <!-- 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">
+              <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="description" />
+            </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 adicional y evaluación de desempeño</p>
+        </div>
+      </header>
+
+      <!-- Deportes -->
+      <div class="mt-6">
+        <h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
+          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="sports_tennis" />
+          Deportes que Practica
+        </h3>
+        <div class="mt-3 flex flex-wrap gap-2">
+          <span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Natación</span>
+          <span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Yoga</span>
+          <span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Ciclismo</span>
+        </div>
+      </div>
+
+      <!-- Evaluación de Desempeño -->
+      <div class="mt-8">
+        <h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
+          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="star" />
+          Evaluación de Desempeño
+        </h3>
+
+        <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
+          <!-- Puntuación grande -->
+          <div class="md:col-span-2 bg-gradient-to-r from-[#1e40af] to-[#2563eb] text-white rounded-lg p-6 flex flex-col justify-between shadow-sm">
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="text-sm font-semibold">Puntuación General</div>
+              </div>
+              <div>
+                <span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full">Excelente</span>
+              </div>
+            </div>
+
+            <div class="mt-4">
+              <div class="text-4xl font-bold">92/100</div>
+              <div class="text-sm opacity-80 mt-1">Evaluado el 2024-01-15</div>
+            </div>
+          </div>
+
+          <!-- Archivo evaluación -->
+          <div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Archivo de Evaluación</div>
+            <div class="mt-3 flex items-start gap-3">
+              <GoogleIcon class="text-gray-400 dark:text-primary-dt text-xl" name="picture_as_pdf" />
+              <div>
+                <div class="text-sm text-gray-700 dark:text-primary-dt">evaluacion_maria_2024.pdf</div>
+                <div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">Evaluador: Juan Pérez</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Observaciones -->
+        <div class="mt-4 rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+           <div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Observaciones</div>
+           <div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
+             Excelente desempeño...
+           </div>
+         </div>
+      </div>
+
+      <!-- Objetivos y Progreso -->
+      <div class="mt-8">
+        <h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
+          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="track_changes" />
+          Objetivos y Progreso
+        </h3>
+
+        <div class="mt-4 space-y-4">
+          <!-- Objetivo 1 -->
+          <div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div class="flex justify-between items-center">
+              <div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Completar certificación en React Advanced</div>
+              <div class="text-sm text-gray-500 dark:text-primary-dt/70">75%</div>
+            </div>
+            <div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-03-30</div>
+            <div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
+              <div class="h-full bg-[#2563eb]" style="width:75%"></div>
+            </div>
+          </div>
+
+          <!-- Objetivo 2 -->
+          <div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div class="flex justify-between items-center">
+              <div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Liderar proyecto de refactorización</div>
+              <div class="text-sm text-gray-500 dark:text_primary-dt/70">45%</div>
+            </div>
+            <div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-04-15</div>
+            <div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
+              <div class="h-full bg-[#2563eb]" style="width:45%"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Acciones -->
+      <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-base" name="file_upload" />
+          Subir Evaluación
+        </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-base" name="target" />
+          Actualizar Objetivos
+        </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-base" name="trophy" />
+          Actualizar Deportes
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Dashboard/Index.vue b/src/pages/Dashboard/Index.vue
index 1b0dd60..6dfd144 100644
--- a/src/pages/Dashboard/Index.vue
+++ b/src/pages/Dashboard/Index.vue
@@ -1,9 +1,119 @@
 <script setup>
-import PageHeader from '@Holos/PageHeader.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue'
+
+const kpis = [ /* test de v-for*/
+  { title: 'Total Empleados', value: '248', meta: '+12% vs mes anterior', icon: 'people' },
+  { title: 'Nuevas Contrataciones', value: '18', meta: '+3 vs mes anterior', icon: 'person_add' },
+  { title: 'Certificaciones', value: '156', meta: '+8% vs mes anterior', icon: 'school' },
+  { title: 'Documentos pendientes', value: '12', meta: '-5 vs mes anterior', icon: 'inventory' },
+];
+
+const employees = [ /* test de v-for*/
+  { initials: 'MG', name: 'María González', role: 'Desarrolladora Frontend • Tecnología', date: '2024-01-15', status: 'Activo' },
+  { initials: 'CR', name: 'Carlos Rodríguez', role: 'Analista de Marketing • Marketing', date: '2024-01-10', status: 'Activo' },
+  { initials: 'AM', name: 'Ana Martínez', role: 'Contadora • Finanzas', date: '2024-01-08', status: 'Activo' },
+];
 
 </script>
 
 <template>
-    <PageHeader title="Dashboard" />
-    <p><b>{{ $t('welcome') }}</b>, {{ $page.user.name }}.</p>
+  <div class="p-6 max-w-auto mx-auto">
+    
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4 mb-8">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Dashboard</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Resumen general del sistema de recursos humanos</p>
+      </div>
+    </div>
+
+    <!-- KPIs -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+      <template v-for="(kpi, i) in kpis" :key="i">
+        <div class="bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg border border-gray-100 p-5 shadow-sm">
+          <div class="flex items-start justify-between">
+            <div>
+              <div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ kpi.title }}</div>
+              <div class="mt-3 text-3xl font-bold text-gray-900 dark:text-primary-dt">{{ kpi.value }}</div>
+              <div class="mt-1 text-xs text-emerald-600 dark:text-success-dt">{{ kpi.meta }}</div>
+            </div>
+            <div class="text-gray-300 dark:text-primary-dt/60">
+              <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-gray-50 dark:bg-primary/10 text-lg">
+                <GoogleIcon :name="kpi.icon" class="text-xl text-gray-500 dark:text-primary-dt" />
+              </span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Left: Empleados recientes (span 2) -->
+    <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="md:col-span-2 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg p-6 shadow-sm">
+        <div class="flex items-center justify-between mb-4">
+          <div>
+            <h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt flex items-center gap-3">
+              <GoogleIcon name="groups" class="text-xl text-gray-700 dark:text-primary-dt" />
+              Empleados Recientes
+            </h3>
+            <p class="text-sm text-gray-500 dark:text-primary-dt/70 mt-1">Últimas incorporaciones al equipo</p>
+          </div>
+        </div>
+
+        <ul class="space-y-4 mt-4">
+          <li v-for="(e, idx) in employees" :key="idx" class="flex items-center justify-between">
+            <div class="flex items-center gap-4">
+              <div class="flex-none w-12 h-12 rounded-full bg-blue-50 dark:bg-primary/10 flex items-center justify-center text-blue-700 dark:text-primary-dt font-semibold">
+                {{ e.initials }}
+              </div>
+              <div>
+                <div class="font-semibold text-gray-800 dark:text-primary-dt">{{ e.name }}</div>
+                <div class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">{{ e.role }}</div>
+              </div>
+            </div>
+
+            <div class="flex flex-col items-end">
+              <div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ e.date }}</div>
+              <span class="mt-2 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">
+                {{ e.status }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Acciones Rápidas -->
+      <div class="bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt rounded-lg p-6 shadow-sm">
+        <div>
+          <h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt flex items-center gap-3">
+            <GoogleIcon name="timeline" class="text-xl text-gray-700 dark:text-primary-dt" />
+            Acciones Rápidas
+          </h3>
+          <p class="text-sm text-gray-500 dark:text-primary-dt/70 mt-1">Tareas frecuentes del sistema</p>
+        </div>
+
+        <div class="mt-4 space-y-3">
+          <div class="w-full flex items-center gap-3 p-3 rounded-md border border-gray-100 dark:border-primary/20 bg-white dark:bg-primary-d/5">
+            <span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-gray-50 dark:bg-primary/10 text-gray-700 dark:text-primary-dt">
+              <GoogleIcon name="person_add" class="text-lg" />
+            </span>
+            <span class="text-sm text-gray-700 dark:text-primary-dt">Registrar Nuevo Empleado</span>
+            <span class="ml-auto text-gray-300 dark:text-primary-dt/50">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+            </span>
+          </div>
+          <div class="w-full flex items-center gap-3 p-3 rounded-md border border-gray-100 dark:border-primary/20 bg-white dark:bg-primary-d/5">
+            <span class="inline-flex items-center justify-center w-9 h-9 rounded-md bg-gray-50 dark:bg-primary/10 text-gray-700 dark:text-primary-dt">
+              <GoogleIcon name="person_add" class="text-lg" />
+            </span>
+            <span class="text-sm text-gray-700 dark:text-primary-dt">Registrar Nuevo Empleado</span>
+            <span class="ml-auto text-gray-300 dark:text-primary-dt/50">
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
 </template>
\ No newline at end of file
diff --git a/src/pages/Employees/Index.vue b/src/pages/Employees/Index.vue
new file mode 100644
index 0000000..afa5afe
--- /dev/null
+++ b/src/pages/Employees/Index.vue
@@ -0,0 +1,166 @@
+<script setup>
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">Empleados</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información general de empleados</p>
+      </div>
+
+      <div class="flex items-center">
+        <button
+          class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-md"
+        >
+          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+          </svg>
+          Nuevo Empleado
+        </button>
+      </div>
+    </div>
+
+    <!-- Search Card -->
+    <div class="mt-6">
+      <Searcher
+        title="Buscar Empleados"
+        placeholder="Buscar por nombre o departamento..."
+        @search="() => {}"
+      >
+      </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="mt-8 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      <div class="flex items-center justify-between">
+        <div>
+          <h3 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">Lista de Empleados</h3>
+          <p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">3 empleados encontrados</p>
+        </div>
+      </div>
+
+      <div class="mt-6 overflow-x-auto">
+        <table class="w-full min-w-[900px]">
+          <thead>
+            <tr class="text-left text-sm text-gray-500 dark:text-primary-dt/70">
+              <th class="py-3 pb-4">Nombre Completo</th>
+              <th class="py-3 pb-4">Departamento</th>
+              <th class="py-3 pb-4">Sede</th>
+              <th class="py-3 pb-4">Fecha Ingreso</th>
+              <th class="py-3 pb-4">Estado</th>
+              <th class="py-3 pb-4 text-right">Acciones</th>
+            </tr>
+          </thead>
+
+          <tbody class="divide-y divide-gray-100 dark:divide-primary/20 text-sm text-gray-700 dark:text-primary-dt">
+            <!-- Row 1 -->
+            <tr class="bg-white dark:bg-transparent">
+              <td class="py-6">
+                <div class="font-semibold text-gray-800 dark:text-primary-dt">María González López</div>
+                <div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">GOLM900515</div>
+              </td>
+              <td class="py-6 dark:text-primary-dt">Tecnología</td>
+              <td class="py-6 dark:text-primary-dt">Ciudad de México</td>
+              <td class="py-6 dark:text-primary-dt">2023-01-15</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">Activo</span>
+              </td>
+              <td class="py-6 text-right space-x-3">
+                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
+                  <GoogleIcon 
+                    class="text-black dark:text-primary-dt text-xl"
+                    name="visibility"
+                  />
+                </button>
+                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
+                  <GoogleIcon 
+                    class="text-black dark:text-primary-dt text-xl"
+                    name="edit"
+                  />
+                </button>
+                <button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
+                  <GoogleIcon 
+                    class="text-red-500 dark:text-danger-d text-xl"
+                    name="delete"
+                  />
+                </button>
+              </td>
+            </tr>
+
+            <!-- Row 2 -->
+            <tr class="bg-white dark:bg-transparent">
+              <td class="py-6">
+                <div class="font-semibold text-gray-800 dark:text-primary-dt">Carlos Rodríguez Martín</div>
+                <div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">ROMC880822</div>
+              </td>
+              <td class="py-6 dark:text-primary-dt">Marketing</td>
+              <td class="py-6 dark:text-primary-dt">Guadalajara</td>
+              <td class="py-6 dark:text-primary-dt">2022-03-10</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">Activo</span>
+              </td>
+              <td class="py-6 text-right space-x-3">
+                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
+                  <GoogleIcon 
+                    class="text-black dark:text-primary-dt text-xl"
+                    name="visibility"
+                  />
+                </button>
+                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
+                  <GoogleIcon 
+                    class="text-black dark:text-primary-dt text-xl"
+                    name="edit"
+                  />
+                </button>
+                <button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
+                  <GoogleIcon 
+                    class="text-red-500 dark:text-danger-d text-xl"
+                    name="delete"
+                  />
+                </button>
+              </td>
+            </tr>
+
+            <!-- Row 3 -->
+            <tr class="bg-white dark:bg-transparent">
+              <td class="py-6">
+                <div class="font-semibold text-gray-800 dark:text-primary-dt">Ana Martínez Sánchez</div>
+                <div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">MASA921203</div>
+              </td>
+              <td class="py-6 dark:text-primary-dt">Finanzas</td>
+              <td class="py-6 dark:text-primary-dt">Monterrey</td>
+              <td class="py-6 dark:text-primary-dt">2023-06-01</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">Activo</span>
+              </td>
+              <td class="py-6 text-right space-x-3">
+                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Ver">
+                  <GoogleIcon 
+                    class="text-black dark:text-primary-dt text-xl"
+                    name="visibility"
+                  />
+                </button>
+                <button class="text-gray-600 hover:text-gray-800 dark:text-primary-dt dark:hover:text-primary-dt" title="Editar">
+                  <GoogleIcon 
+                    class="text-black dark:text-primary-dt text-xl"
+                    name="edit"
+                  />
+                </button>
+                <button class="text-red-500 hover:text-red-600 dark:text-danger-d text-xl" title="Eliminar">
+                  <GoogleIcon 
+                    class="text-red-500 dark:text-danger-d text-xl"
+                    name="delete"
+                  />
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Payroll/Index.vue b/src/pages/Payroll/Index.vue
new file mode 100644
index 0000000..03acdad
--- /dev/null
+++ b/src/pages/Payroll/Index.vue
@@ -0,0 +1,145 @@
+<script setup>
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">Nómina</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información bancaria y salarios de empleados</p>
+      </div>
+
+      <div>
+        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
+          <GoogleIcon class="text-white text-xl" name="add" />
+          Procesar Nómina
+        </button>
+      </div>
+    </div>
+
+    <!-- KPI Cards -->
+    <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+        <div class="text-sm text-gray-500 dark:text-primary-dt/70">Nómina Total Mensual</div>
+        <div class="mt-4 text-3xl font-bold text-gray-900 dark:text-primary-dt">$125,000</div>
+        <div class="mt-1 text-xs text-gray-400 dark:text-primary-dt/70">3 empleados activos</div>
+      </div>
+
+      <div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+        <div class="text-sm text-gray-500 dark:text-primary-dt/70">Último Procesamiento</div>
+        <div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">31 Enero</div>
+        <div class="mt-1 text-sm text-emerald-600 dark:text-success-dt">Procesado exitosamente</div>
+      </div>
+
+      <div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+        <div class="text-sm text-gray-500 dark:text-primary-dt/70">Próximo Procesamiento</div>
+        <div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">29 Feb</div>
+        <div class="mt-1 text-sm text-amber-600 dark:text-warning-dt">En 5 días</div>
+      </div>
+    </div>
+
+    <!-- Employee Payroll Card -->
+    <section class="mt-8 bg-white rounded-lg border border-gray-100 shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      <header class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
+            <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="account_balance_wallet" />
+          </div>
+          <div>
+            <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 dark:text-primary-dt/70">Información bancaria y detalles de nómina</p>
+          </div>
+        </div>
+      </header>
+
+      <!-- Información Bancaria -->
+      <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-gray-600 dark:text-primary-dt text-base" name="account_balance" />
+          Información Bancaria
+        </h3>
+
+        <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-3">
+          <div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
+            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Banco</div>
+            <div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">BBVA Bancomer</div>
+          </div>
+
+          <div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
+            <div class="text-sm text-gray-500 dark:text-primary-dt/70">CLABE</div>
+            <div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">012180001234567890</div>
+          </div>
+
+          <div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
+            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Crédito INFONAVIT</div>
+            <div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">5020123456789</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Desglose Salarial -->
+      <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-gray-600 dark:text-primary-dt text-base" name="payments" />
+          Desglose Salarial
+        </h3>
+
+        <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-6">
+          <div class="md:col-span-1 col-span-2 rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
+            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Salario Base</div>
+            <div class="mt-2 text-xl font-bold text-[#2563eb] dark:text-primary-dt">$35,000</div>
+          </div>
+
+          <div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-emerald-50/40 dark:bg-success-d/10 dark:border-primary/20">
+            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Bonos</div>
+            <div class="mt-2 text-xl font-bold text-emerald-600 dark:text-success-dt">+$8,000</div>
+          </div>
+
+          <div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-rose-50/40 dark:bg-danger-d/10 dark:border-primary/20">
+            <div class="text-sm text-gray-500 dark:text-primary-dt/70">Deducciones</div>
+            <div class="mt-2 text-xl font-bold text-rose-600 dark:text-danger-dt">-$2,000</div>
+          </div>
+
+          <div class="md:col-span-1 col-span-2 rounded-lg p-4 border border-gray-100 bg-rose-50/40 flex items-center justify-between dark:bg-primary/5 dark:border-primary/20">
+            <div class="text-black dark:text-primary-dt">
+              <div class="text-sm dark:text-primary-dt">Total Mensual</div>
+              <div class="mt-2 text-xl font-bold dark:text-primary-dt">$45,000</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Último Pago -->
+      <div class="mt-8">
+        <h3 class="text-base font-medium text-gray-800 dark:text-primary-dt">Último Pago</h3>
+        <div class="mt-3 rounded-lg border border-gray-100 p-4 bg-white flex items-center justify-between dark:bg-primary-d dark:border-primary/20">
+          <div>
+            <div class="text-lg font-semibold text-gray-900 dark:text-primary-dt">$43,000</div>
+            <div class="text-xs text-gray-500 dark:text-primary-dt/70">Fecha: 2024-01-31</div>
+          </div>
+          <span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full dark:bg-success-d dark:text-success-dt">Procesado</span>
+        </div>
+      </div>
+
+      <!-- Acciones -->
+      <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-lg" name="sync" />
+          Actualizar Cuenta
+        </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-lg" name="calculate" />
+          Recalcular Salario
+        </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-lg" name="history" />
+          Historial de Pagos
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Security/Index.vue b/src/pages/Security/Index.vue
new file mode 100644
index 0000000..f0ea0e7
--- /dev/null
+++ b/src/pages/Security/Index.vue
@@ -0,0 +1,166 @@
+<script setup>
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Seguridad y Salud</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información médica, tallas y contactos de emergencia</p>
+      </div>
+
+      <div>
+        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
+          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 4v16M20 12H4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          Actualizar Información
+        </button>
+      </div>
+    </div>
+
+    <!-- Card principal -->
+    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      <!-- 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">
+            <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="shield" />
+          </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 de seguridad y salud ocupacional</p>
+        </div>
+      </header>
+
+      <!-- Tallas de Ropa -->
+      <div class="mt-6">
+        <h3 class="text-base font-medium text-gray-800 mb-3 dark:text-primary-dt">Tallas de Ropa</h3>
+
+        <div class="grid gap-4 grid-cols-1 md:grid-cols-3">
+          <div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <span class="text-sm text-gray-500 dark:text-primary-dt/70">Camisa</span>
+            <span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">M</span>
+          </div>
+
+          <div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <span class="text-sm text-gray-500 dark:text-primary-dt/70">Overol</span>
+            <span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">M</span>
+          </div>
+
+          <div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <span class="text-sm text-gray-500 dark:text-primary-dt/70">Zapatos</span>
+            <span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">25</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Información Médica -->
+      <div class="mt-8">
+        <h3 class="text-base font-medium text-gray-800 mb-3 flex items-center gap-2 dark:text-primary-dt">
+          <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="medical_services" />
+          Información Médica
+        </h3>
+
+        <div class="grid gap-4 grid-cols-1 md:grid-cols-2">
+          <!-- Certificado -->
+          <div class="rounded-lg border border-gray-100 p-4 flex items-center justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div class="flex items-center gap-3">
+              <GoogleIcon class="text-gray-400 dark:text-primary-dt text-xl" name="picture_as_pdf" />
+              <div>
+                <div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Certificado Médico</div>
+                <div class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">certificado_maria_2024.pdf</div>
+              </div>
+            </div>
+            <span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full dark:bg-success-d dark:text-success-dt">Vigente</span>
+          </div>
+
+          <!-- Tipo de sangre -->
+          <div class="rounded-lg border border-gray-100 p-4 flex items-center justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div>
+              <div class="text-sm text-gray-500 dark:text-primary-dt/70">Tipo de Sangre</div>
+              <div class="mt-2 text-xl font-bold text-red-600 dark:text-danger-d">O+</div>
+            </div>
+          </div>
+
+          <!-- Alergias -->
+          <div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Alergias</div>
+            <div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Polen, mariscos</div>
+          </div>
+
+          <!-- Altura / Peso -->
+          <div class="grid grid-cols-2 gap-4">
+            <div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+              <div class="text-sm text-gray-500 dark:text-primary-dt/70">Altura</div>
+              <div class="mt-2 text-lg font-bold text-[#2563eb] dark:text-primary-dt">165 cm</div>
+            </div>
+            <div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+              <div class="text-sm text-gray-500 dark:text-primary-dt/70">Peso</div>
+              <div class="mt-2 text-lg font-bold text-[#2563eb] dark:text-primary-dt">60 kg</div>
+            </div>
+          </div>
+
+          <!-- Prescripciones -->
+          <div class="rounded-lg border border-gray-100 p-4 col-span-1 md:col-span-2 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Prescripciones</div>
+            <div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Antihistamínicos según necesidad</div>
+          </div>
+
+          <!-- Discapacidades -->
+          <div class="rounded-lg border border-gray-100 p-4 col-span-1 md:col-span-2 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Discapacidades</div>
+            <div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Ninguna</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Contactos de Emergencia -->
+      <div class="mt-8">
+        <h3 class="text-base font-medium text-gray-800 mb-3 flex items-center gap-2 dark:text-primary-dt">
+          <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="call" />
+          Contactos de Emergencia
+        </h3>
+
+        <div class="grid gap-4 grid-cols-1 md:grid-cols-2">
+          <div class="rounded-lg border border-gray-100 p-4 flex items-start justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div>
+              <div class="font-semibold text-gray-800 dark:text-primary-dt">Juan González</div>
+              <div class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">+52 55 1234 5678</div>
+            </div>
+            <span class="inline-block bg-gray-100 text-gray-700 text-xs px-3 py-1 rounded-full dark:bg-primary/10 dark:text-primary-dt">Esposo</span>
+          </div>
+
+          <div class="rounded-lg border border-gray-100 p-4 flex items-start justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+            <div>
+              <div class="font-semibold text-gray-800 dark:text-primary-dt">Carmen López</div>
+              <div class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">+52 55 8765 4321</div>
+            </div>
+            <span class="inline-block bg-gray-100 text-gray-700 text-xs px-3 py-1 rounded-full dark:bg-primary/10 dark:text-primary-dt">Madre</span>
+          </div>
+        </div>
+      </div>
+
+      <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="article"
+            />
+          Subir certificado
+        </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="call"
+            />
+          Agregar contacto
+        </button>
+      </div>
+
+    </section>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index 448bef5..28d3ba2 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -16,7 +16,7 @@ const router = createRouter({
     routes: [
         {
             path: '/',
-            component: () => import('@Layouts/AppLayout.vue'),
+            component: () => import('@Layouts/RhLayout.vue'),
             name: 'root',
             meta: {
                 title: 'Inicio',
@@ -27,40 +27,79 @@ const router = createRouter({
                 {
                     path: '',
                     name: 'index',
-                    redirect: '/dashboard',
-                    meta: {
-                        title: 'Inicio',
-                        icon: 'home',
-                    },
+                    redirect: '/dashboard'
                 },
                 {
                     path: 'dashboard',
                     name: 'dashboard.index',
                     component: () => import('@Pages/Dashboard/Index.vue'),
+                    meta: {
+                        title: 'Dashboard',
+                        icon: 'grid_view',
+                    }
                 },
                 {
-                    path: 'profile',
-                    children: [
-                        {
-                            path: '',
-                            name: 'profile.show',
-                            component: () => import('@Pages/Profile/Show.vue'),
-                            meta: {
-                                title: 'Perfil',
-                                icon: 'person',
-                            },
-                        },
-                        {
-                            path: 'notifications',
-                            children: [
+                    path: 'employees',
+                    name: 'employees.index',
+                    component: () => import('@Pages/Employees/Index.vue'),
+                    meta: {
+                        title: 'Empleados',
+                        icon: 'people',
+                    }
+                },
+                {
+                    path: 'academic',
+                    name: 'academic.index',
+                    component: () => import('@Pages/Academic/Index.vue'),
+                    meta: {
+                        title: 'Historial Académico',
+                        icon: 'school',
+                    }
+                },
+                {
+                    path: 'security',
+                    name: 'security.index',
+                    component: () => import('@Pages/Security/Index.vue'),
+                    meta: {
+                        title: 'Seguridad y Salud',
+                        icon: 'security',
+                    }
+                },
+                {
+                    path: 'payroll',
+                    name: 'payroll.index',
+                    component: () => import('@Pages/Payroll/Index.vue'),
+                    meta: {
+                        title: 'Nómina',
+                        icon: 'payments',
+                    }
+                },
+                {
+                    path: 'additional',
+                    name: 'additional.index',
+                    component: () => import('@Pages/Additional/Index.vue'),
+                    meta: {
+                        title: 'Información Adicional',
+                        icon: 'info',
+                    }
+                },
                                 {
-                                    path: '',
-                                    name: 'profile.notifications.index',
-                                    component: () => import('@Pages/Profile/Notifications/Index.vue')
-                                }
-                            ]
-                        },
-                    ]
+                    path: 'profile',
+                    name: 'profile.show',
+                    component: () => import('@Pages/Profile/Show.vue'),
+                    meta: {
+                        title: 'Perfil',
+                        icon: 'person',
+                    }
+                },
+                {
+                    path: 'profile/notifications',
+                    name: 'profile.notifications.index',
+                    component: () => import('@Pages/Profile/Notifications/Index.vue'),
+                    meta: {
+                        title: 'Notificaciones',
+                        icon: 'notifications',
+                    }
                 },
             ],
         },
-- 
2.45.2


From 78a80ab3d537c71c1517ffa66a038d62560817c1 Mon Sep 17 00:00:00 2001
From: "jose.lopez" <jose.lopez@golsystems.com.mx>
Date: Sat, 20 Sep 2025 14:11:38 -0600
Subject: [PATCH 2/8] Layouts separados por roles

---
 package-lock.json                             | 179 ++++++++
 package.json                                  |   4 +
 .../Holos/Skeleton/Sidebar/Left.vue           |  34 +-
 src/index.js                                  |   5 +
 src/layouts/AdminLayout.vue                   | 135 ++++++
 src/layouts/AppLayout.vue                     |  25 +-
 src/layouts/CoordinatorLayout.vue             |  45 ++
 src/layouts/RhLayout.vue                      |  61 ---
 src/pages/Courses/Assignamment.vue            | 281 ++++++++++++
 src/pages/Courses/Calendar.vue                | 411 ++++++++++++++++++
 src/pages/Courses/Index.vue                   | 187 ++++++++
 src/pages/Courses/Request.vue                 | 232 ++++++++++
 src/pages/Dashboard/Admin.vue                 | 274 ++++++++++++
 src/pages/Dashboard/Coordinator.vue           | 341 +++++++++++++++
 src/pages/Dashboard/Employee.vue              | 247 +++++++++++
 src/pages/Events/Assignamment.vue             | 183 ++++++++
 src/pages/Events/Index.vue                    | 284 ++++++++++++
 src/pages/Events/Justification.vue            | 360 +++++++++++++++
 src/pages/Events/Reports.vue                  | 204 +++++++++
 src/router/Index.js                           | 245 ++++++++---
 20 files changed, 3585 insertions(+), 152 deletions(-)
 create mode 100644 src/layouts/AdminLayout.vue
 create mode 100644 src/layouts/CoordinatorLayout.vue
 delete mode 100644 src/layouts/RhLayout.vue
 create mode 100644 src/pages/Courses/Assignamment.vue
 create mode 100644 src/pages/Courses/Calendar.vue
 create mode 100644 src/pages/Courses/Index.vue
 create mode 100644 src/pages/Courses/Request.vue
 create mode 100644 src/pages/Dashboard/Admin.vue
 create mode 100644 src/pages/Dashboard/Coordinator.vue
 create mode 100644 src/pages/Dashboard/Employee.vue
 create mode 100644 src/pages/Events/Assignamment.vue
 create mode 100644 src/pages/Events/Index.vue
 create mode 100644 src/pages/Events/Justification.vue
 create mode 100644 src/pages/Events/Reports.vue

diff --git a/package-lock.json b/package-lock.json
index 1315e92..b3c381c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
       "name": "notsoweb.frontend",
       "version": "0.9.12",
       "dependencies": {
+        "@popperjs/core": "^2.11.8",
         "@tailwindcss/postcss": "^4.0.9",
         "@tailwindcss/vite": "^4.0.9",
         "@vitejs/plugin-vue": "^5.2.1",
+        "apexcharts": "^5.3.5",
         "axios": "^1.8.1",
         "laravel-echo": "^2.0.2",
         "luxon": "^3.5.0",
@@ -19,11 +21,13 @@
         "tailwindcss": "^4.0",
         "toastr": "^2.1.4",
         "uuid": "^11.1.0",
+        "v-calendar": "^3.1.2",
         "vite": "^6.2.0",
         "vue": "^3.5.13",
         "vue-i18n": "^11.1.1",
         "vue-multiselect": "^3.2.0",
         "vue-router": "^4.5.0",
+        "vue3-apexcharts": "^1.8.0",
         "ziggy-js": "^2.5.2"
       },
       "devDependencies": {
@@ -89,6 +93,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.28.1",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.1.tgz",
@@ -658,6 +671,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -952,6 +975,62 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@svgdotjs/svg.draggable.js": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@svgdotjs/svg.draggable.js/-/svg.draggable.js-3.0.6.tgz",
+      "integrity": "sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@svgdotjs/svg.js": "^3.2.4"
+      }
+    },
+    "node_modules/@svgdotjs/svg.filter.js": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@svgdotjs/svg.filter.js/-/svg.filter.js-3.0.9.tgz",
+      "integrity": "sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@svgdotjs/svg.js": "^3.2.4"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/@svgdotjs/svg.js": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.2.5.tgz",
+      "integrity": "sha512-/VNHWYhNu+BS7ktbYoVGrCmsXDh+chFMaONMwGNdIBcFHrWqk2jY8fNyr3DLdtQUIalvkPfM554ZSFa3dm3nxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Fuzzyma"
+      }
+    },
+    "node_modules/@svgdotjs/svg.resize.js": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@svgdotjs/svg.resize.js/-/svg.resize.js-2.0.5.tgz",
+      "integrity": "sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18"
+      },
+      "peerDependencies": {
+        "@svgdotjs/svg.js": "^3.2.4",
+        "@svgdotjs/svg.select.js": "^4.0.1"
+      }
+    },
+    "node_modules/@svgdotjs/svg.select.js": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@svgdotjs/svg.select.js/-/svg.select.js-4.0.3.tgz",
+      "integrity": "sha512-qkMgso1sd2hXKd1FZ1weO7ANq12sNmQJeGDjs46QwDVsxSRcHmvWKL2NDF7Yimpwf3sl5esOLkPqtV2bQ3v/Jg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18"
+      },
+      "peerDependencies": {
+        "@svgdotjs/svg.js": "^3.2.4"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
@@ -1233,12 +1312,24 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "license": "MIT"
+    },
     "node_modules/@types/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz",
       "integrity": "sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==",
       "license": "MIT"
     },
+    "node_modules/@types/resize-observer-browser": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.11.tgz",
+      "integrity": "sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -1397,6 +1488,12 @@
       "integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
       "license": "MIT"
     },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -1426,6 +1523,20 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-5.3.5.tgz",
+      "integrity": "sha512-I04DY/WBZbJgJD2uixeV5EzyiL+J5LgKQXEu8rctqAwyRmKv44aDVeofJoLdTJe3ao4r2KEQfCgtVzXn6pqirg==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@svgdotjs/svg.draggable.js": "^3.0.4",
+        "@svgdotjs/svg.filter.js": "^3.0.8",
+        "@svgdotjs/svg.js": "^3.2.4",
+        "@svgdotjs/svg.resize.js": "^2.0.2",
+        "@svgdotjs/svg.select.js": "^4.0.1",
+        "@yr/monotone-cubic-spline": "^1.0.3"
+      }
+    },
     "node_modules/async": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
@@ -1783,6 +1894,31 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "date-fns": "2.x"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
@@ -2761,6 +2897,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -3491,6 +3633,24 @@
         "uuid": "dist/esm/bin/uuid"
       }
     },
+    "node_modules/v-calendar": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/v-calendar/-/v-calendar-3.1.2.tgz",
+      "integrity": "sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "^4.14.165",
+        "@types/resize-observer-browser": "^0.1.7",
+        "date-fns": "^2.16.1",
+        "date-fns-tz": "^2.0.0",
+        "lodash": "^4.17.20",
+        "vue-screen-utils": "^1.0.0-beta.13"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
@@ -3667,6 +3827,25 @@
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
+    "node_modules/vue-screen-utils": {
+      "version": "1.0.0-beta.13",
+      "resolved": "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz",
+      "integrity": "sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
+    "node_modules/vue3-apexcharts": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.8.0.tgz",
+      "integrity": "sha512-5tSD4mXTBbIJ9ir+58qHE6oNtIe0RNgqIRYMKpcsIaxkKtwUww4JhvPkpUFlmiW4OJbbdklgjleXq1lfcM4gdA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "apexcharts": ">=4.0.0",
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/ws": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
diff --git a/package.json b/package.json
index 0c368ee..9767c4b 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/vite": "^4.0.9",
     "@vitejs/plugin-vue": "^5.2.1",
+    "apexcharts": "^5.3.5",
     "axios": "^1.8.1",
     "laravel-echo": "^2.0.2",
     "luxon": "^3.5.0",
@@ -21,11 +23,13 @@
     "tailwindcss": "^4.0",
     "toastr": "^2.1.4",
     "uuid": "^11.1.0",
+    "v-calendar": "^3.1.2",
     "vite": "^6.2.0",
     "vue": "^3.5.13",
     "vue-i18n": "^11.1.1",
     "vue-multiselect": "^3.2.0",
     "vue-router": "^4.5.0",
+    "vue3-apexcharts": "^1.8.0",
     "ziggy-js": "^2.5.2"
   },
   "devDependencies": {
diff --git a/src/components/Holos/Skeleton/Sidebar/Left.vue b/src/components/Holos/Skeleton/Sidebar/Left.vue
index 3ed0363..33a06a6 100644
--- a/src/components/Holos/Skeleton/Sidebar/Left.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Left.vue
@@ -1,8 +1,7 @@
 <script setup>
 import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
 import useLeftSidebar from '@Stores/LeftSidebar'
-
-import Logo from '@Holos/Logo.vue';
+import GoogleIcon     from '@Shared/GoogleIcon.vue';
 
 /** Definidores */
 const leftSidebar = useLeftSidebar()
@@ -16,7 +15,6 @@ const props = defineProps({
 });
 
 const year = (new Date).getFullYear();
-
 </script>
 
 <template>
@@ -29,30 +27,32 @@ const year = (new Date).getFullYear();
       :class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
     >
       <div class="flex flex-col h-full p-2 md:w-64">
-        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
-          <div>
-            <div class="flex w-full px-2 mt-2">
-              <Logo
-                class="text-lg inline-flex"
-              />
+        <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-white dark:bg-primary-d text-page-t dark:text-page-dt border-r border-gray-200 dark:border-primary/20">
+          <div class="py-4 bg-transparent">
+            <div class="flex flex-row justify-center items-center w-full px-4 mb-6 gap-2">
+              <GoogleIcon class="bg-[#2563eb] text-white text-3xl rounded p-1" name="apartment" />
+              <div class="flex flex-col items-center justify-center gap-1">
+                <h2 class="text-gray-800 dark:text-primary-dt font-bold text-xl"> HR Manager</h2>
+                <span class="text-sm text-gray-500 dark:text-primary-dt/70">Sistema de RRHH</span>
+              </div>
             </div>
-            <ul class="flex h-full flex-col md:pb-4 space-y-1">
+            <ul class="flex h-full flex-col space-y-1 px-2">
               <slot />
             </ul>
           </div>
-          <div class="mb-4 px-5 space-y-1">
-              <p class="block text-center text-xs">
-                &copy {{year}} {{ APP_COPYRIGHT }}
-              </p>
-            <p class="text-center text-xs text-yellow-500 cursor-pointer">
-              <RouterLink :to="{name:'changelogs.app'}"> APP {{ APP_VERSION }} </RouterLink> <RouterLink :to="{name:'changelogs.core'}"> API {{ $page.app.version }} </RouterLink>
+          <div class="mb-4 px-4 py-4 border-t border-gray-200">
+            <p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
+              &copy {{ year }} {{ APP_COPYRIGHT }}
+            </p>
+            <p class="text-center text-xs text-gray-400 dark:text-primary-dt/70">
+              APP {{ APP_VERSION }} API {{ $page.app.version }}
             </p>
           </div>
         </div>
       </div>
       <div
         class="h-full"
-        :class="{'w-[calc(100vw-17rem)] md:w-0 bg-transparent':leftSidebar.isOpened,'md:w-0':leftSidebar.isClosed}"
+        :class="{'w-[calc(100vw-17rem)] dark:bg-black/40 md:w-0 bg-black/20':leftSidebar.isOpened,'md:w-0':leftSidebar.isClosed}"
         @click="leftSidebar.toggle()" 
       ></div>
     </nav>
diff --git a/src/index.js b/src/index.js
index 2bef60a..c62b0fc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,9 @@ import TailwindScreen from '@Plugins/TailwindScreen'
 import { pagePlugin } from '@Services/Page';
 import { defineApp, reloadApp, view } from '@Services/Page';
 import { apiURL } from '@Services/Api';
+import VueApexCharts from "vue3-apexcharts";
+import VCalendar from 'v-calendar'
+import 'v-calendar/style.css';
 
 import App      from '@Components/App.vue'
 import Error503 from '@Pages/Errors/503.vue'
@@ -63,6 +66,8 @@ async function boot() {
             .use(pagePlugin)
             .use(router)
             .use(ZiggyVue)
+            .use(VCalendar, {})
+            .use(VueApexCharts)
             .mount('#app');
     } else {
         createApp(Error503)
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
new file mode 100644
index 0000000..b26aa69
--- /dev/null
+++ b/src/layouts/AdminLayout.vue
@@ -0,0 +1,135 @@
+<script setup>
+import { onMounted } from 'vue';
+import useLoader    from '@Stores/Loader';
+import { hasPermission } from '@Plugins/RolePermission';
+
+import Layout  from '@Holos/Layout/App.vue';
+import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
+import Section from '@Holos/Skeleton/Sidebar/Section.vue';
+
+/** Definidores */
+const loader = useLoader()
+
+/** Propiedades */
+defineProps({
+    title: String,
+});
+
+/** Ciclos */
+onMounted(() => {
+    loader.boot()
+})
+
+</script>
+
+<template>
+    <Layout
+        :title="title"
+    >
+    
+        <template #leftSidebar>
+            <Section name="Principal">
+                <Link
+                    icon="grid_view"
+                    name="Dashboard" 
+                    to="admin.dashboard.index"
+                />
+                <Link
+                    icon="people"
+                    name="Empleados" 
+                    to="admin.employees.index"
+                />
+                <Link
+                    icon="school"
+                    name="Historial Académico" 
+                    to="admin.academic.index"
+                />
+                <Link
+                    icon="security"
+                    name="Seguridad y Salud" 
+                    to="admin.security.index"
+                />
+                <Link
+                    icon="payments"
+                    name="Nómina" 
+                    to="admin.payroll.index"
+                />
+                <Link
+                    icon="info"
+                    name="Información Adicional" 
+                    to="admin.additional.index"
+                />
+            </Section>
+            <Section name="Capacitaciones">
+                <Link
+                    icon="grid_view"
+                    name="Solicitud de Cursos" 
+                    to="admin.courses.request"
+                />
+                <Link
+                    icon="grid_view"
+                    name="Cursos" 
+                    to="admin.courses.index"
+                />
+                <Link
+                    icon="grid_view"
+                    name="Asignación de Cursos" 
+                    to="admin.courses.assignamment"
+                />
+                <Link
+                    icon="grid_view"
+                    name="Calendario de Cursos" 
+                    to="admin.courses.calendar"
+                />
+            </Section>
+            <Section name="Eventos">
+                <Link
+                    icon="grid_view"
+                    name="Dashboard" 
+                    to="admin.events.index"
+                />
+                <Link
+                    icon="grid_view"
+                    name="Asignación de presupuesto" 
+                    to="admin.events.assignamment"
+                />
+                <Link
+                    icon="grid_view"
+                    name="Justificación de gastos" 
+                    to="admin.events.justification"
+                />
+                <Link
+                    icon="grid_view"
+                    name="Reportes de gastos" 
+                    to="admin.events.reports"
+                />
+            </Section>
+            <Section
+                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"
+                    name="roles.title" 
+                    to="admin.roles.index"
+                />
+                <Link
+                    v-if="hasPermission('activities.index')"
+                    icon="event"
+                    name="history.title" 
+                    to="admin.activities.index"
+                />
+            </Section>
+        </template>
+        <!-- Contenido -->
+        <RouterView />
+        <!-- Fin contenido -->
+    </Layout>
+</template>
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index d33531b..01c79b2 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { onMounted } from 'vue';
 import useLoader    from '@Stores/Loader';
-import { hasPermission } from '@Plugins/RolePermission';
 
 import Layout  from '@Holos/Layout/App.vue';
 import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
@@ -26,42 +25,22 @@ onMounted(() => {
     <Layout
         :title="title"
     >
-    
         <template #leftSidebar>
             <Section name="Principal">
                 <Link
                     icon="monitoring"
-                    name="dashboard" 
+                    name="Dashboard" 
                     to="dashboard.index"
                 />
                 <Link
                     icon="person"
-                    name="profile" 
+                    name="Perfil" 
                     to="profile.show"
                 />
             </Section>
             <Section
-                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"
-                    name="roles.title" 
-                    to="admin.roles.index"
-                />
-                <Link
-                    v-if="hasPermission('activities.index')"
-                    icon="event"
-                    name="history.title" 
-                    to="admin.activities.index"
-                />
             </Section>
         </template>
         <!-- Contenido -->
diff --git a/src/layouts/CoordinatorLayout.vue b/src/layouts/CoordinatorLayout.vue
new file mode 100644
index 0000000..555757d
--- /dev/null
+++ b/src/layouts/CoordinatorLayout.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { onMounted } from 'vue';
+import useLoader    from '@Stores/Loader';
+
+import Layout  from '@Holos/Layout/App.vue';
+import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
+import Section from '@Holos/Skeleton/Sidebar/Section.vue';
+
+/** Definidores */
+const loader = useLoader()
+
+/** Propiedades */
+defineProps({
+    title: String,
+});
+
+/** Ciclos */
+onMounted(() => {
+    loader.boot()
+})
+
+</script>
+
+<template>
+    <Layout
+        :title="title"
+    >
+        <template #leftSidebar>
+            <Section name="Principal">
+                <Link
+                    icon="monitoring"
+                    name="Dashboard" 
+                    to="coordinator.dashboard.index"
+                />
+            </Section>
+            <Section
+                :name="$t('admin.title')"
+            >
+            </Section>
+        </template>
+        <!-- Contenido -->
+        <RouterView />
+        <!-- Fin contenido -->
+    </Layout>
+</template>
diff --git a/src/layouts/RhLayout.vue b/src/layouts/RhLayout.vue
deleted file mode 100644
index d9805de..0000000
--- a/src/layouts/RhLayout.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup>
-import { onMounted } from 'vue';
-import useLoader    from '@Stores/Loader';
-
-import Layout  from '@/components/Holos/Layout/RhApp.vue';
-import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
-
-/** Definidores */
-const loader = useLoader()
-
-/** Propiedades */
-defineProps({
-    title: String,
-});
-
-/** Ciclos */
-onMounted(() => {
-    loader.boot()
-})
-</script>
-<template>
-  <Layout
-        :title="title"
-    >
-        <template #leftSidebar>
-            <Link
-                icon="grid_view"
-                name="Dashboard" 
-                to="dashboard.index"
-            />
-            <Link
-                icon="people"
-                name="Empleados" 
-                to="employees.index"
-            />
-            <Link
-                icon="school"
-                name="Historial Académico" 
-                to="academic.index"
-            />
-            <Link
-                icon="security"
-                name="Seguridad y Salud" 
-                to="security.index"
-            />
-            <Link
-                icon="payments"
-                name="Nómina" 
-                to="payroll.index"
-            />
-            <Link
-                icon="info"
-                name="Información Adicional" 
-                to="additional.index"
-            />
-        </template>
-        <!-- Contenido -->
-        <RouterView />
-        <!-- Fin contenido -->
-    </Layout>
-</template>
\ No newline at end of file
diff --git a/src/pages/Courses/Assignamment.vue b/src/pages/Courses/Assignamment.vue
new file mode 100644
index 0000000..c354288
--- /dev/null
+++ b/src/pages/Courses/Assignamment.vue
@@ -0,0 +1,281 @@
+<script setup>
+import { ref, computed } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+// Datos de cursos aprobados
+const approvedCourses = ref([
+  {
+    id: 1,
+    name: 'React Avanzado y GraphQL',
+    area: 'Desarrollo',
+    cost: 499.00
+  },
+  {
+    id: 2,
+    name: 'Certified Ethical Hacker (CEH)',
+    area: 'Seguridad',
+    cost: 1199.00
+  },
+  {
+    id: 3,
+    name: 'Cisco CCNA 200-301',
+    area: 'Redes',
+    cost: 300.00
+  }
+]);
+
+// Lista de personal
+const personnel = ref([
+  { id: 1, name: 'Ana García', selected: false },
+  { id: 2, name: 'Carlos Mendoza', selected: false },
+  { id: 3, name: 'Laura Jiménez', selected: false },
+  { id: 4, name: 'Luis Martínez', selected: false },
+  { id: 5, name: 'Carla Torres', selected: false },
+  { id: 6, name: 'Pedro Ramírez', selected: false }
+]);
+
+// Estado del formulario
+const selectedCourse = ref(approvedCourses.value[0]);
+const startDate = ref('');
+const endDate = ref('');
+const examDate = ref('');
+const showDropdown = ref(false);
+
+// Computed para mostrar el curso seleccionado
+const selectedCourseDisplay = computed(() => {
+  if (selectedCourse.value) {
+    return `${selectedCourse.value.name} (${selectedCourse.value.area})`;
+  }
+  return 'Seleccionar curso...';
+});
+
+// Computed para contar personal seleccionado
+const selectedPersonnelCount = computed(() => {
+  return personnel.value.filter(p => p.selected).length;
+});
+
+// Funciones
+const togglePersonnel = (person) => {
+  person.selected = !person.selected;
+};
+
+const selectAllPersonnel = () => {
+  const allSelected = personnel.value.every(p => p.selected);
+  personnel.value.forEach(p => p.selected = !allSelected);
+};
+
+const selectCourse = (course) => {
+  selectedCourse.value = course;
+  showDropdown.value = false;
+};
+
+const saveAssignment = () => {
+  const selectedPersonnelList = personnel.value.filter(p => p.selected);
+  console.log('Guardar asignación:', {
+    course: selectedCourse.value,
+    personnel: selectedPersonnelList,
+    startDate: startDate.value,
+    endDate: endDate.value,
+    examDate: examDate.value
+  });
+  // Aquí implementarías la lógica para guardar
+};
+
+const notifyPersonnel = () => {
+  const selectedPersonnelList = personnel.value.filter(p => p.selected);
+  console.log('Notificar personal:', {
+    course: selectedCourse.value,
+    personnel: selectedPersonnelList
+  });
+  // Aquí implementarías la lógica para notificar
+};
+
+const formatCurrency = (amount) => {
+  return new Intl.NumberFormat('es-MX', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(amount);
+};
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Asignación de Cursos a Personal</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Asigna cursos aprobados al personal seleccionado</p>
+      </div>
+    </div>
+
+    <!-- Card principal -->
+    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      
+      <!-- Selección de Curso -->
+      <div class="mb-6">
+        <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+          Seleccionar Curso Aprobado
+        </label>
+        
+        <div class="relative">
+          <button
+            @click="showDropdown = !showDropdown"
+            class="w-full px-4 py-3 text-left bg-white border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+          >
+            <span class="block truncate">{{ selectedCourseDisplay }}</span>
+            <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+              </svg>
+            </span>
+          </button>
+
+          <!-- Dropdown -->
+          <div 
+            v-if="showDropdown"
+            class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-primary-d dark:border-primary/20"
+          >
+            <div class="max-h-60 overflow-auto">
+              <div
+                v-for="course in approvedCourses"
+                :key="course.id"
+                @click="selectCourse(course)"
+                class="px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 border-b border-gray-100 dark:border-primary/20 last:border-b-0"
+              >
+                <div class="font-medium text-gray-900 dark:text-primary-dt">{{ course.name }}</div>
+                <div class="text-sm text-gray-500 dark:text-primary-dt/70">
+                  {{ course.area }} • {{ formatCurrency(course.cost) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Asignación de Personal -->
+      <div class="mb-6">
+        <div class="flex items-center justify-between mb-3">
+          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
+            Asignar a personal
+          </label>
+          <button
+            @click="selectAllPersonnel"
+            class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
+          >
+            {{ personnel.every(p => p.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
+          </button>
+        </div>
+
+        <div class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
+          <div class="space-y-2">
+            <div
+              v-for="person in personnel"
+              :key="person.id"
+              @click="togglePersonnel(person)"
+              class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
+            >
+              <div class="flex items-center h-5">
+                <input
+                  :checked="person.selected"
+                  type="checkbox"
+                  class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
+                  @click.stop
+                  @change="togglePersonnel(person)"
+                >
+              </div>
+              <div class="ml-3 text-sm">
+                <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
+                  {{ person.name }}
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
+          {{ selectedPersonnelCount }} persona(s) seleccionada(s)
+        </div>
+      </div>
+
+      <!-- Fechas -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        <!-- Fecha de Inicio -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+            Fecha de Inicio
+          </label>
+          <div class="relative">
+            <input
+              v-model="startDate"
+              type="date"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+            >
+            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <!-- Fecha de Fin -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+            Fecha de Fin
+          </label>
+          <div class="relative">
+            <input
+              v-model="endDate"
+              type="date"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+            >
+            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <!-- Fecha de Examen -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+            Fecha de Examen
+          </label>
+          <div class="relative">
+            <input
+              v-model="examDate"
+              type="date"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+            >
+            <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Botones de Acción -->
+      <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-primary/20">
+        <button
+          @click="saveAssignment"
+          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt dark:hover:bg-primary/10"
+        >
+          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="save" />
+          Guardar
+        </button>
+
+        <button
+          @click="notifyPersonnel"
+          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2"
+        >
+          <GoogleIcon class="text-white text-xl" name="notifications" />
+          Notificar
+        </button>
+      </div>
+
+    </section>
+  </div>
+</template>
diff --git a/src/pages/Courses/Calendar.vue b/src/pages/Courses/Calendar.vue
new file mode 100644
index 0000000..0f149c3
--- /dev/null
+++ b/src/pages/Courses/Calendar.vue
@@ -0,0 +1,411 @@
+<template>
+    <div class="p-5 bg-slate-50 min-h-screen">
+      <!-- Header -->
+      <div class="mb-5 flex items-center justify-between">
+        <h2 class="text-2xl font-semibold text-slate-800 m-0">Calendario de Cursos Programados</h2>
+        
+        <!-- Estadísticas del mes actual -->
+        <div class="flex items-center gap-4 text-sm">
+          <div class="flex items-center gap-2">
+            <div class="w-3 h-3 bg-blue-500 rounded"></div>
+            <span class="text-slate-600">{{ getCurrentMonthInfo.totalCursos }} Cursos</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <div class="w-3 h-3 bg-red-500 rounded"></div>
+            <span class="text-slate-600">{{ getCurrentMonthInfo.totalExamenes }} Exámenes</span>
+          </div>
+        </div>
+      </div>
+  
+      <!-- Calendar Container -->
+      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
+        <!-- Header personalizado -->
+        <div class="flex items-center justify-between px-5 py-4 bg-white border-b border-slate-200">
+          <div class="flex items-center gap-4">
+            <span class="text-sm text-slate-500 font-medium">Vista Mensual</span>
+          </div>
+          
+          <div class="flex items-center gap-4">
+            <!-- Navegación del mes -->
+            <div class="flex items-center gap-2">
+              <button @click="previousMonth" class="p-1 hover:bg-slate-100 rounded">
+                <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+                </svg>
+              </button>
+              
+              <h3 class="text-lg font-semibold text-slate-800 min-w-[140px] text-center">
+                {{ formatMonth(selectedDate) }}
+              </h3>
+              
+              <button @click="nextMonth" class="p-1 hover:bg-slate-100 rounded">
+                <svg class="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+                </svg>
+              </button>
+            </div>
+            
+            <!-- Botones de vista -->
+            <div class="flex gap-1 bg-slate-100 p-1 rounded-md">
+              <button class="px-3 py-1 text-xs font-medium rounded bg-slate-800 text-white transition-all">month</button>
+              <button class="px-3 py-1 text-xs font-medium rounded text-slate-500 hover:bg-slate-200 transition-all">week</button>
+              <button class="px-3 py-1 text-xs font-medium rounded text-slate-500 hover:bg-slate-200 transition-all">list</button>
+            </div>
+          </div>
+        </div>
+  
+        <VCalendar 
+          :key="calendarKey"
+          v-model="selectedDate"
+          :attributes="attributes"
+          :locale="locale"
+          view="monthly"
+          expanded
+          borderless
+          :title-position="'none'"
+          class="custom-calendar"
+        />
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, computed } from 'vue'
+  
+  // Fecha seleccionada
+  const selectedDate = ref(new Date(2025, 8, 1)) // Septiembre 1, 2025
+  
+  // Key para forzar re-render del calendario
+  const calendarKey = ref(0)
+  
+  // Configuración de idioma
+  const locale = {
+    id: 'es',
+    firstDayOfWeek: 1, // Lunes como primer día
+    masks: {
+      weekdays: 'WWW',
+      months: 'MMMM',
+      title: 'MMMM YYYY'
+    }
+  }
+  
+  // Datos de los cursos programados por mes
+  const cursosData = {
+    // Septiembre 2025
+    '2025-09': [
+      {
+        id: 1,
+        title: 'Curso React (A. García, C. Mendoza)',
+        instructor: 'A. García, C. Mendoza',
+        dates: [new Date(2025, 8, 5), new Date(2025, 8, 7)], // 5 y 7 de septiembre
+        color: 'blue',
+        tipo: 'curso'
+      },
+      {
+        id: 2,
+        title: 'EXAMEN: React',
+        dates: [new Date(2025, 8, 9)], // 9 de septiembre
+        color: 'red',
+        tipo: 'examen'
+      },
+      {
+        id: 3,
+        title: 'Curso CEH (P. Ramírez, L. Torres)',
+        instructor: 'P. Ramírez, L. Torres',
+        dates: [new Date(2025, 8, 17), new Date(2025, 8, 21)], // 17 y 21 de septiembre
+        color: 'green',
+        tipo: 'curso'
+      },
+      {
+        id: 4,
+        title: 'Curso Python (S. Hernández)',
+        instructor: 'S. Hernández',
+        dates: [new Date(2025, 8, 18)], // 18 de septiembre
+        color: 'orange',
+        tipo: 'curso'
+      },
+      {
+        id: 5,
+        title: 'Curso AWS (L. Martínez)',
+        instructor: 'L. Martínez',
+        dates: [new Date(2025, 8, 19), new Date(2025, 8, 21)], // 19 y 21 de septiembre
+        color: 'purple',
+        tipo: 'curso'
+      },
+      {
+        id: 6,
+        title: 'EXAMEN: CEH',
+        dates: [new Date(2025, 8, 24)], // 24 de septiembre
+        color: 'red',
+        tipo: 'examen'
+      }
+    ],
+    
+    // Octubre 2025 - Cursos de ejemplo
+    '2025-10': [
+      {
+        id: 7,
+        title: 'Curso Vue.js (M. López, R. Silva)',
+        instructor: 'M. López, R. Silva',
+        dates: [new Date(2025, 9, 3), new Date(2025, 9, 5)], // 3 y 5 de octubre
+        color: 'green',
+        tipo: 'curso'
+      },
+      {
+        id: 8,
+        title: 'EXAMEN: Vue.js',
+        dates: [new Date(2025, 9, 10)], // 10 de octubre
+        color: 'red',
+        tipo: 'examen'
+      },
+      {
+        id: 9,
+        title: 'Curso Docker (J. Rodríguez)',
+        instructor: 'J. Rodríguez',
+        dates: [new Date(2025, 9, 15), new Date(2025, 9, 17), new Date(2025, 9, 19)], // 15, 17 y 19 de octubre
+        color: 'blue',
+        tipo: 'curso'
+      },
+      {
+        id: 10,
+        title: 'Curso Kubernetes (A. Morales)',
+        instructor: 'A. Morales',
+        dates: [new Date(2025, 9, 22), new Date(2025, 9, 24)], // 22 y 24 de octubre
+        color: 'purple',
+        tipo: 'curso'
+      },
+      {
+        id: 11,
+        title: 'EXAMEN: DevOps',
+        dates: [new Date(2025, 9, 29)], // 29 de octubre
+        color: 'red',
+        tipo: 'examen'
+      }
+    ],
+  
+    // Agosto 2025 - Cursos de ejemplo
+    '2025-08': [
+      {
+        id: 12,
+        title: 'Curso Angular (P. Fernández)',
+        instructor: 'P. Fernández',
+        dates: [new Date(2025, 7, 5), new Date(2025, 7, 7), new Date(2025, 7, 9)], // 5, 7 y 9 de agosto
+        color: 'red',
+        tipo: 'curso'
+      },
+      {
+        id: 13,
+        title: 'Curso Node.js (C. García)',
+        instructor: 'C. García',
+        dates: [new Date(2025, 7, 12), new Date(2025, 7, 14)], // 12 y 14 de agosto
+        color: 'green',
+        tipo: 'curso'
+      },
+      {
+        id: 14,
+        title: 'EXAMEN: Full Stack',
+        dates: [new Date(2025, 7, 20)], // 20 de agosto
+        color: 'red',
+        tipo: 'examen'
+      },
+      {
+        id: 15,
+        title: 'Curso MongoDB (L. Torres)',
+        instructor: 'L. Torres',
+        dates: [new Date(2025, 7, 26), new Date(2025, 7, 28)], // 26 y 28 de agosto
+        color: 'orange',
+        tipo: 'curso'
+      }
+    ]
+  }
+  
+  // Convertir datos a atributos de v-calendar
+  const attributes = computed(() => {
+    const currentMonthKey = `${selectedDate.value.getFullYear()}-${String(selectedDate.value.getMonth() + 1).padStart(2, '0')}`
+    const currentMonthCursos = cursosData[currentMonthKey] || []
+    
+    const attrs = []
+    
+    currentMonthCursos.forEach(curso => {
+      curso.dates.forEach(date => {
+        attrs.push({
+          key: `${curso.id}-${date.getTime()}`,
+          dot: false,
+          bar: {
+            style: {
+              backgroundColor: getColorCode(curso.color),
+              height: '4px'
+            }
+          },
+          popover: {
+            label: curso.title,
+            visibility: 'hover'
+          },
+          customData: {
+            title: curso.title,
+            instructor: curso.instructor,
+            tipo: curso.tipo,
+            color: curso.color
+          },
+          dates: date
+        })
+      })
+    })
+    
+    return attrs
+  })
+  
+  // Función para obtener el mes actual con eventos
+  const getCurrentMonthInfo = computed(() => {
+    const currentMonthKey = `${selectedDate.value.getFullYear()}-${String(selectedDate.value.getMonth() + 1).padStart(2, '0')}`
+    const currentMonthCursos = cursosData[currentMonthKey] || []
+    
+    return {
+      key: currentMonthKey,
+      totalCursos: currentMonthCursos.filter(curso => curso.tipo === 'curso').length,
+      totalExamenes: currentMonthCursos.filter(curso => curso.tipo === 'examen').length,
+      eventos: currentMonthCursos
+    }
+  })
+  
+  // Función para obtener códigos de color
+  function getColorCode(color) {
+    const colors = {
+      blue: '#3b82f6',
+      red: '#ef4444',
+      green: '#22c55e',
+      orange: '#f97316',
+      purple: '#8b5cf6'
+    }
+    return colors[color] || '#6b7280'
+  }
+  
+  // Navegación del calendario
+  function previousMonth() {
+    const currentDate = new Date(selectedDate.value)
+    currentDate.setMonth(currentDate.getMonth() - 1)
+    currentDate.setDate(1)
+    selectedDate.value = currentDate
+    
+    // Forzar re-render del calendario
+    calendarKey.value++
+  }
+  
+  function nextMonth() {
+    const currentDate = new Date(selectedDate.value)
+    currentDate.setMonth(currentDate.getMonth() + 1)
+    currentDate.setDate(1)
+    selectedDate.value = currentDate
+    
+    // Forzar re-render del calendario
+    calendarKey.value++
+  }
+  
+  // Formatear el mes
+  function formatMonth(date) {
+    return date.toLocaleDateString('es-ES', { 
+      month: 'long', 
+      year: 'numeric' 
+    })
+  }
+  </script>
+  
+  <style scoped>
+  /* Solo estilos esenciales que no se pueden hacer con Tailwind */
+  :deep(.vc-container) {
+    border: none;
+    font-family: inherit;
+  }
+  
+  /* Ocultar el header original de v-calendar */
+  :deep(.vc-header) {
+    display: none;
+  }
+  
+  :deep(.vc-weekday) {
+    background: #f8fafc;
+    color: #64748b;
+    font-weight: 600;
+    font-size: 0.75rem;
+    padding: 0.75rem;
+    text-transform: lowercase;
+    border-bottom: 1px solid #e2e8f0;
+  }
+  
+  :deep(.vc-day) {
+    padding: 0;
+    border: 1px solid #e2e8f0;
+    min-height: 100px;
+    border-top: none;
+  }
+  
+  :deep(.vc-day-content) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0.5rem;
+  }
+  
+  :deep(.vc-day-number) {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #374151;
+    margin-bottom: 0.25rem;
+  }
+  
+  :deep(.vc-day.is-today .vc-day-number) {
+    background: #3b82f6;
+    color: white;
+    border-radius: 50%;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  :deep(.vc-day.is-not-in-month) {
+    opacity: 0.3;
+  }
+  
+  :deep(.vc-day.is-not-in-month .vc-day-number) {
+    color: #9ca3af;
+  }
+  
+  :deep(.vc-bars) {
+    margin-top: 0.25rem;
+  }
+  
+  :deep(.vc-bar) {
+    margin-bottom: 0.125rem;
+    border-radius: 0.125rem;
+    height: 4px;
+  }
+  
+  /* Mejorar los bordes del calendario */
+  :deep(.vc-weeks) {
+    border: 1px solid #e2e8f0;
+    border-top: none;
+  }
+  
+  :deep(.vc-weekdays) {
+    border-left: 1px solid #e2e8f0;
+    border-right: 1px solid #e2e8f0;
+  }
+  
+  /* Responsivo */
+  @media (max-width: 768px) {
+    :deep(.vc-day) {
+      min-height: 80px;
+    }
+    
+    :deep(.vc-day-content) {
+      padding: 0.25rem;
+    }
+    
+    :deep(.vc-weekday) {
+      padding: 0.5rem 0.25rem;
+      font-size: 0.75rem;
+    }
+  }
+  </style>
\ No newline at end of file
diff --git a/src/pages/Courses/Index.vue b/src/pages/Courses/Index.vue
new file mode 100644
index 0000000..e3724db
--- /dev/null
+++ b/src/pages/Courses/Index.vue
@@ -0,0 +1,187 @@
+<script setup>
+import { ref } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+// Datos de ejemplo de los cursos
+const courses = ref([
+  {
+    id: 1,
+    area: 'Desarrollo',
+    courseName: 'React Avanzado y GraphQL',
+    unitCost: 499.00,
+    url: 'https://example.com/react-avanzado',
+    status: 'pending'
+  },
+  {
+    id: 2,
+    area: 'Seguridad',
+    courseName: 'Certified Ethical Hacker (CEH)',
+    unitCost: 1199.00,
+    url: 'https://example.com/ceh',
+    status: 'pending'
+  },
+  {
+    id: 3,
+    area: 'Redes',
+    courseName: 'Cisco CCNA 200-301',
+    unitCost: 300.00,
+    url: 'https://example.com/ccna',
+    status: 'pending'
+  }
+]);
+
+// Funciones para las acciones
+const viewCourse = (course) => {
+  console.log('Ver curso:', course.courseName);
+  // Aquí puedes implementar la lógica para ver el curso
+};
+
+const approveCourse = (course) => {
+  console.log('Aprobar curso:', course.courseName);
+  course.status = 'approved';
+  // Aquí puedes implementar la lógica para aprobar el curso
+};
+
+const rejectCourse = (course) => {
+  console.log('Rechazar curso:', course.courseName);
+  course.status = 'rejected';
+  // Aquí puedes implementar la lógica para rechazar el curso
+};
+
+const formatCurrency = (amount) => {
+  return new Intl.NumberFormat('es-MX', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(amount);
+};
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Gestión de Solicitudes de Capacitación</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Administra y aprueba las solicitudes de cursos de capacitación</p>
+      </div>
+    </div>
+
+    <!-- Card principal con tabla -->
+    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      <!-- Tabla de cursos -->
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-gray-100 dark:border-primary/20">
+              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Área</th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Nombre del Curso</th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Costo Unitario</th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Url</th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">Opciones</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr 
+              v-for="course in courses" 
+              :key="course.id"
+              class="border-b border-gray-50 dark:border-primary/10 hover:bg-gray-50 dark:hover:bg-primary/5"
+            >
+              <!-- Área -->
+              <td class="py-4 px-4">
+                <span class="inline-block bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
+                  {{ course.area }}
+                </span>
+              </td>
+
+              <!-- Nombre del curso -->
+              <td class="py-4 px-4">
+                <div class="font-medium text-gray-900 dark:text-primary-dt">
+                  {{ course.courseName }}
+                </div>
+              </td>
+
+              <!-- Costo unitario -->
+              <td class="py-4 px-4">
+                <div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
+                  {{ formatCurrency(course.unitCost) }}
+                </div>
+              </td>
+
+              <!-- URL -->
+              <td class="py-4 px-4">
+                <a 
+                  :href="course.url" 
+                  target="_blank"
+                  class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
+                >
+                  Ver curso
+                </a>
+              </td>
+
+              <!-- Opciones -->
+              <td class="py-4 px-4">
+                <div class="flex items-center gap-2">
+                  <!-- Botón Ver -->
+                  <button 
+                    @click="viewCourse(course)"
+                    class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-primary-dt dark:hover:bg-primary/10"
+                    title="Ver detalles"
+                  >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                    </svg>
+                  </button>
+
+                  <!-- Botón Aprobar -->
+                  <button 
+                    @click="approveCourse(course)"
+                    class="p-2 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-green-400 dark:hover:bg-green-900/20"
+                    title="Aprobar curso"
+                  >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                    </svg>
+                  </button>
+
+                  <!-- Botón Rechazar -->
+                  <button 
+                    @click="rejectCourse(course)"
+                    class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors dark:text-primary-dt/70 dark:hover:text-red-400 dark:hover:bg-red-900/20"
+                    title="Rechazar curso"
+                  >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer con estadísticas -->
+      <div class="mt-6 border-t border-gray-100 pt-4 flex items-center justify-between dark:border-primary/20">
+        <div class="text-sm text-gray-500 dark:text-primary-dt/70">
+          Mostrando {{ courses.length }} solicitudes
+        </div>
+        
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2 text-sm">
+            <span class="w-3 h-3 bg-yellow-400 rounded-full"></span>
+            <span class="text-gray-600 dark:text-primary-dt/70">Pendientes: {{ courses.filter(c => c.status === 'pending').length }}</span>
+          </div>
+          <div class="flex items-center gap-2 text-sm">
+            <span class="w-3 h-3 bg-green-400 rounded-full"></span>
+            <span class="text-gray-600 dark:text-primary-dt/70">Aprobadas: {{ courses.filter(c => c.status === 'approved').length }}</span>
+          </div>
+          <div class="flex items-center gap-2 text-sm">
+            <span class="w-3 h-3 bg-red-400 rounded-full"></span>
+            <span class="text-gray-600 dark:text-primary-dt/70">Rechazadas: {{ courses.filter(c => c.status === 'rejected').length }}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
diff --git a/src/pages/Courses/Request.vue b/src/pages/Courses/Request.vue
new file mode 100644
index 0000000..27149d2
--- /dev/null
+++ b/src/pages/Courses/Request.vue
@@ -0,0 +1,232 @@
+<script setup>
+import { ref } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+// Estado del formulario
+const formData = ref({
+  courseName: '',
+  cost: '',
+  description: '',
+  certificationName: '',
+  certificationType: '',
+  duration: '',
+  courseUrl: ''
+});
+
+// Lista de personal a capacitar
+const personnelToTrain = ref([
+  { name: 'Ana García', department: 'Desarrollo' },
+  { name: 'Luis Martínez', department: 'Redes' },
+  { name: 'Carla Torres', department: 'Sistemas' },
+  { name: 'Pedro Ramírez', department: 'Seguridad' },
+  { name: 'Sofía Hernandez', department: 'Ventas' }
+]);
+
+// Función para enviar la solicitud
+const submitRequest = () => {
+  console.log('Enviar solicitud:', formData.value);
+  
+  // Validación básica
+  if (!formData.value.courseName || !formData.value.cost || !formData.value.description) {
+    alert('Por favor, completa todos los campos obligatorios');
+    return;
+  }
+  
+  // Aquí implementarías la lógica para enviar la solicitud
+  alert('Solicitud enviada correctamente');
+  
+  // Limpiar formulario
+  formData.value = {
+    courseName: '',
+    cost: '',
+    description: '',
+    certificationName: '',
+    certificationType: '',
+    duration: '',
+    courseUrl: ''
+  };
+};
+
+// Función para validar URL
+const isValidUrl = (url) => {
+  if (!url) return true; // Campo opcional
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Solicitud de Nuevo Curso</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Completa la información para solicitar un nuevo curso de capacitación</p>
+      </div>
+    </div>
+
+    <!-- Card principal -->
+    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      
+      <!-- Formulario -->
+      <form @submit.prevent="submitRequest" class="space-y-6">
+        
+        <!-- Campos del formulario en dos columnas -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          
+          <!-- Columna izquierda -->
+          <div class="space-y-6">
+            
+            <!-- Nombre del Curso -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+                Nombre del Curso *
+              </label>
+              <input
+                v-model="formData.courseName"
+                type="text"
+                required
+                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                placeholder="Ingresa el nombre del curso"
+              >
+            </div>
+
+            <!-- Costo (USD) -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+                Costo (USD) *
+              </label>
+              <input
+                v-model="formData.cost"
+                type="number"
+                required
+                min="0"
+                step="0.01"
+                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                placeholder="0.00"
+              >
+            </div>
+
+            <!-- Breve descripción del curso -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+                Breve descripción del curso *
+              </label>
+              <textarea
+                v-model="formData.description"
+                required
+                rows="4"
+                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                placeholder="Describe brevemente el contenido y objetivos del curso"
+              ></textarea>
+            </div>
+
+            <!-- Nombre de la certificación a obtener -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+                Nombre de la certificación a obtener
+              </label>
+              <input
+                v-model="formData.certificationName"
+                type="text"
+                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                placeholder="Ej: Certificación AWS Solutions Architect"
+              >
+            </div>
+
+          </div>
+
+          <!-- Columna derecha -->
+          <div class="space-y-6">
+            
+            <!-- Tipo de Certificación -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+                Tipo de Certificación
+              </label>
+              <input
+                v-model="formData.certificationType"
+                type="text"
+                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                placeholder="Ej: Técnica, Profesional, Oficial"
+              >
+            </div>
+
+            <!-- Duración (días) -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+                Duración (días)
+              </label>
+              <input
+                v-model="formData.duration"
+                type="number"
+                min="1"
+                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                placeholder="Número de días"
+              >
+            </div>
+
+            <!-- URL del curso -->
+            <div>
+              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+                URL del curso
+              </label>
+              <input
+                v-model="formData.courseUrl"
+                type="url"
+                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                placeholder="https://ejemplo.com/curso"
+              >
+            </div>
+
+          </div>
+        </div>
+
+        <!-- Sección de Personal a Capacitar -->
+        <div class="mt-8">
+          <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center gap-2 dark:text-primary-dt">
+            <GoogleIcon class="text-black dark:text-primary-dt text-xl" name="people" />
+            Personal a capacitar
+          </h3>
+
+          <div class="bg-gray-50 rounded-lg p-4 dark:bg-primary/5">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              <div
+                v-for="person in personnelToTrain"
+                :key="person.name"
+                class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200 dark:bg-primary-d dark:border-primary/20"
+              >
+                <div>
+                  <div class="font-medium text-gray-900 dark:text-primary-dt">{{ person.name }}</div>
+                  <div class="text-sm text-gray-500 dark:text-primary-dt/70">{{ person.department }}</div>
+                </div>
+                <div class="flex-shrink-0">
+                  <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
+                    {{ person.department }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Botón de Enviar -->
+        <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
+          <button
+            type="submit"
+            class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2 transition-colors"
+          >
+            <GoogleIcon class="text-white text-xl" name="send" />
+            Enviar Solicitud
+          </button>
+        </div>
+
+      </form>
+
+    </section>
+  </div>
+</template>
diff --git a/src/pages/Dashboard/Admin.vue b/src/pages/Dashboard/Admin.vue
new file mode 100644
index 0000000..8985870
--- /dev/null
+++ b/src/pages/Dashboard/Admin.vue
@@ -0,0 +1,274 @@
+<script setup>
+import { computed } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import VueApexCharts from 'vue3-apexcharts';
+
+// Props
+const props = defineProps({
+    adminInfo: {
+        type: Object,
+        default: () => ({})
+    },
+    charts: {
+        type: Object,
+        default: () => ({})
+    }
+});
+
+// Datos procesados para los charts
+const chartData = computed(() => {
+    // Datos para el gráfico de línea (Solicitudes por Mes)
+    const monthlyData = props.charts.requests_by_month || [];
+    const lineChartCategories = monthlyData.map(item => item.month_name);
+    const lineChartSeries = [{
+        name: 'Solicitudes',
+        data: monthlyData.map(item => item.total_requests)
+    }];
+
+    // Datos para el gráfico de dona (Solicitudes por Departamento)
+    const departmentData = props.charts.requests_by_department || [];
+    const donutChartLabels = departmentData.map(item => item.department_name);
+    const donutChartSeries = departmentData.map(item => item.total_requests);
+
+    return {
+        lineChartCategories,
+        lineChartSeries,
+        donutChartLabels,
+        donutChartSeries
+    };
+});
+
+// Datos para el gráfico de línea (Solicitudes por Mes) - Solo para admin
+const lineChartOptions = computed(() => ({
+    chart: {
+        type: 'line',
+        height: 350,
+        toolbar: {
+            show: false
+        },
+        background: 'transparent'
+    },
+    colors: ['#3b82f6'],
+    stroke: {
+        curve: 'smooth',
+        width: 3
+    },
+    grid: {
+        borderColor: 'rgba(148, 163, 184, 0.2)',
+        strokeDashArray: 3,
+        xaxis: {
+            lines: {
+                show: true
+            }
+        },
+        yaxis: {
+            lines: {
+                show: true
+            }
+        }
+    },
+    xaxis: {
+        categories: chartData.value.lineChartCategories,
+        labels: {
+            style: {
+                colors: '#64748b',
+                fontSize: '12px'
+            }
+        },
+        axisBorder: {
+            color: 'rgba(148, 163, 184, 0.2)'
+        }
+    },
+    yaxis: {
+        min: 0,
+        labels: {
+            style: {
+                colors: '#64748b',
+                fontSize: '12px'
+            }
+        }
+    },
+    markers: {
+        size: 6,
+        colors: ['#3b82f6'],
+        strokeColors: '#fff',
+        strokeWidth: 2,
+        hover: {
+            size: 8
+        }
+    },
+    tooltip: {
+        theme: 'dark'
+    }
+}));
+
+const lineChartSeries = computed(() => chartData.value.lineChartSeries);
+
+// Datos para el gráfico de dona (Solicitudes por Departamento) - Solo para admin
+const donutChartOptions = computed(() => ({
+    chart: {
+        type: 'donut',
+        height: 350
+    },
+    colors: ['#8b5cf6', '#10b981', '#f59e0b', '#ef4444', '#3b82f6', '#f97316'],
+    labels: chartData.value.donutChartLabels,
+    legend: {
+        position: 'right',
+        fontSize: '14px',
+        labels: {
+            colors: '#64748b'
+        }
+    },
+    plotOptions: {
+        pie: {
+            donut: {
+                size: '60%'
+            }
+        }
+    },
+    dataLabels: {
+        enabled: true,
+        formatter: function(val, opts) {
+            return opts.w.config.series[opts.seriesIndex]
+        },
+        style: {
+            fontSize: '14px',
+            colors: ['#fff']
+        }
+    },
+    tooltip: {
+        theme: 'dark'
+    }
+}));
+
+const donutChartSeries = computed(() => chartData.value.donutChartSeries);
+</script>
+
+<template>
+    <div>
+        <!-- Banner de bienvenida -->
+        <section
+            class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-indigo-600 to-purple-600 text-white"
+        >
+            <div class="relative z-10 p-6 md:p-8">
+                <p class="text-2xl md:text-3xl font-semibold">
+                    Bienvenido, {{ $page.user.name }}
+                </p>
+                <p class="mt-2 text-white/90">
+                    Administra el sistema de vacaciones y supervisa el rendimiento organizacional.
+                </p>
+            </div>
+        </section>
+
+        <!-- Tarjetas de KPIs -->
+        <section class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
+            <!-- Total Empleados -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="group" class="text-blue-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Total Empleados</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ adminInfo.total_users }}</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+
+            <!-- Solicitudes Este Mes -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="description" class="text-blue-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Solicitudes Este Mes</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ adminInfo.monthly_requests }}</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+
+            <!-- Solicitudes Aprobadas -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="check_circle" class="text-emerald-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Solicitudes Aprobadas</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ adminInfo.approved_requests }}</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+
+            <!-- Eficiencia Aprobación -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="trending_up" class="text-emerald-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Eficiencia Aprobación</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ adminInfo.approval_efficiency }}%</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+        </section>
+
+        <!-- Gráficos -->
+        <section v-if="charts.requests_by_month && charts.requests_by_department" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <!-- Gráfico de Solicitudes por Mes -->
+            <article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
+                <div class="mb-6 flex items-center gap-3">
+                    <GoogleIcon name="trending_up" class="text-blue-500 text-2xl" />
+                    <div>
+                        <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Solicitudes por Mes</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400">Tendencia de solicitudes durante el año</p>
+                    </div>
+                </div>
+                
+                <div class="h-80">
+                    <VueApexCharts
+                        type="line"
+                        height="100%"
+                        :options="lineChartOptions"
+                        :series="lineChartSeries"
+                    />
+                </div>
+            </article>
+
+            <!-- Gráfico de Solicitudes por Departamento -->
+            <article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
+                <div class="mb-6 flex items-center gap-3">
+                    <GoogleIcon name="pie_chart" class="text-purple-500 text-2xl" />
+                    <div>
+                        <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Solicitudes por Departamento</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400">Distribución de solicitudes por área</p>
+                    </div>
+                </div>
+                
+                <div class="h-80">
+                    <VueApexCharts
+                        type="donut"
+                        height="100%"
+                        :options="donutChartOptions"
+                        :series="donutChartSeries"
+                    />
+                </div>
+            </article>
+        </section>
+
+        <!-- Estado vacío para charts -->
+        <section v-else class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
+            <div class="text-center py-12">
+                <GoogleIcon name="analytics" class="text-slate-400 text-6xl mx-auto mb-4" />
+                <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
+                    No hay datos de gráficos disponibles
+                </h3>
+                <p class="text-slate-500 dark:text-slate-400">
+                    Los gráficos se mostrarán cuando haya datos de solicitudes disponibles.
+                </p>
+            </div>
+        </section>
+    </div>
+</template>
diff --git a/src/pages/Dashboard/Coordinator.vue b/src/pages/Dashboard/Coordinator.vue
new file mode 100644
index 0000000..d13379b
--- /dev/null
+++ b/src/pages/Dashboard/Coordinator.vue
@@ -0,0 +1,341 @@
+<script setup>
+import { computed } from 'vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+// Props
+const props = defineProps({
+    vacations: {
+        type: Object,
+        default: () => ({})
+    },
+    vacationsRequests: {
+        type: Array,
+        default: () => []
+    },
+    coordinatorInfo: {
+        type: Object,
+        default: () => ({})
+    },
+    lastVacationRequests: {
+        type: Array,
+        default: () => []
+    },
+    employeeStatusDepartment: {
+        type: Array,
+        default: () => []
+    }
+});
+</script>
+
+<template>
+    <div>
+        <!-- Banner de bienvenida -->
+        <section
+            class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-purple-600 to-indigo-600 text-white"
+        >
+            <div class="relative z-10 p-6 md:p-8">
+                <p class="text-2xl md:text-3xl font-semibold">
+                    Bienvenido, {{ $page.user.name }}
+                </p>
+                <p class="mt-2 text-white/90">
+                    Coordina y gestiona las solicitudes de vacaciones de tu equipo.
+                </p>
+            </div>
+        </section>
+
+        <h2 class="mb-6 text-xl font-bold text-slate-900 dark:text-slate-100">
+            Gestión del Equipo
+        </h2>
+
+        <!-- Tarjetas de KPIs -->
+        <section class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
+            <!-- Solicitudes Pendientes -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="schedule" class="text-amber-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Solicitudes Pendientes</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ coordinatorInfo.pending_requests }}</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+
+            <!-- Conflictos Detectados -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="warning" class="text-red-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Conflictos Detectados</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ coordinatorInfo.conflicts }}</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+
+            <!-- Miembros del Equipo -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="group" class="text-blue-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Miembros del Equipo</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ coordinatorInfo.department_employees }}</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+
+            <!-- Aprobadas Este Mes -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="check_circle" class="text-emerald-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Aprobadas Este Mes</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ coordinatorInfo.approved_requests_current_month }}</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+        </section>
+
+        <!-- Contenido principal -->
+        <section class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <!-- Solicitudes Pendientes -->
+            <article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
+                <div class="mb-6 flex items-center gap-3">
+                    <GoogleIcon name="schedule" class="text-amber-500 text-2xl" />
+                    <div>
+                        <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Solicitudes Pendientes</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400">Solicitudes que requieren tu aprobación</p>
+                    </div>
+                </div>
+
+                <div v-if="lastVacationRequests.length > 0" class="space-y-4">
+                    <div
+                        v-for="request in lastVacationRequests"
+                        :key="request.user.id"
+                        class="rounded-lg border border-slate-200 p-4 dark:border-slate-700"
+                    >
+                        <div class="mb-3 flex items-center justify-between">
+                            <div>
+                                <p class="font-medium text-slate-900 dark:text-slate-100">{{ request.user.name }}</p>
+                                <p class="text-sm text-slate-500 dark:text-slate-400">
+                                    {{ request.number_of_days }} día{{ request.number_of_days !== 1 ? 's' : '' }} 
+                                    ({{ request.count_periods }} período{{ request.count_periods !== 1 ? 's' : '' }})
+                                </p>
+                            </div>
+                            <span v-if="request.have_conflict" class="rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-700 dark:bg-red-500/10 dark:text-red-400">
+                                Conflicto
+                            </span>
+                        </div>
+                        
+                        <!-- Mensaje de conflicto -->
+                        <div v-if="request.have_conflict" class="mb-4 rounded-md bg-red-50 p-3 dark:bg-red-500/10">
+                            <p class="text-sm text-red-700 dark:text-red-400">Hay conflicto en alguno de los periodos de vacaciones</p>
+                        </div>
+
+                        <!-- Botones de acción -->
+                        <div class="flex gap-2">
+                            <button v-if="!request.have_conflict" class="flex items-center gap-1 rounded-md bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-700 with-transition">
+                                <GoogleIcon name="check" class="text-sm" />
+                                Aprobar
+                            </button>
+                            <button v-if="!request.have_conflict" class="flex items-center gap-1 rounded-md bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-700 with-transition">
+                                <GoogleIcon name="close" class="text-sm" />
+                                Rechazar
+                            </button>
+                            <button v-if="request.have_conflict" class="flex items-center gap-1 rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700 with-transition">
+                                <GoogleIcon name="visibility" class="text-sm" />
+                                Revisar
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div v-else class="text-center py-8">
+                    <GoogleIcon name="check_circle" class="text-emerald-400 text-4xl mx-auto mb-2" />
+                    <p class="text-slate-500 dark:text-slate-400">No hay solicitudes pendientes</p>
+                </div>
+
+                <!-- Ver todas las solicitudes -->
+                <div class="mt-4 text-center">
+                    <button class="inline-flex items-center gap-1 text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
+                        Ver todas las solicitudes
+                        <GoogleIcon name="chevron_right" />
+                    </button>
+                </div>
+            </article>
+
+            <!-- Mi Equipo -->
+            <article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
+                <div class="mb-6 flex items-center gap-3">
+                    <GoogleIcon name="group" class="text-blue-500 text-2xl" />
+                    <div>
+                        <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Mi Equipo</h3>
+                        <p class="text-sm text-slate-500 dark:text-slate-400">Estado actual de los miembros de tu equipo</p>
+                    </div>
+                </div>
+
+                <div v-if="employeeStatusDepartment.length > 0" class="space-y-3">
+                    <div
+                        v-for="employee in employeeStatusDepartment"
+                        :key="employee.id"
+                        class="flex items-center justify-between rounded-lg border border-slate-200 p-4 dark:border-slate-700"
+                    >
+                        <div>
+                            <p class="font-medium text-slate-900 dark:text-slate-100">{{ employee.name }}</p>
+                            <p class="text-sm text-slate-500 dark:text-slate-400">
+                                {{ employee.vacation_days_available }} día{{ employee.vacation_days_available !== 1 ? 's' : '' }} disponibles
+                            </p>
+                        </div>
+                        <span
+                            :class="{
+                                'rounded-full px-3 py-1 text-xs font-medium': true,
+                                'bg-blue-100 text-blue-700 dark:bg-blue-500/10 dark:text-blue-400': employee.status_ek == 'Disponible',
+                                'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400': employee.status_ek == 'En vacaciones'
+                            }"
+                        >
+                            {{ employee.status_ek }}
+                        </span>
+                    </div>
+                </div>
+
+                <div v-else class="text-center py-8">
+                    <GoogleIcon name="group_off" class="text-slate-400 text-4xl mx-auto mb-2" />
+                    <p class="text-slate-500 dark:text-slate-400">No hay miembros en el equipo</p>
+                </div>
+
+                <!-- Gestionar equipo -->
+                <div class="mt-4 text-center">
+                    <button class="inline-flex items-center gap-1 text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
+                        Gestionar equipo
+                        <GoogleIcon name="chevron_right" />
+                    </button>
+                </div>
+            </article>
+        </section>
+
+        <!-- Mi Información de Vacaciones -->
+        
+        <h2 class="mt-8A text-xl font-bold text-slate-900 dark:text-slate-100">
+            Mis Vacaciones Personales
+        </h2>
+        <section class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
+            <!-- Días disponibles -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="check_circle" class="text-emerald-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">
+                                Mis Días Disponibles
+                            </h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                                {{ vacations.available_days }}
+                            </p>
+                        </div>
+                    </div>
+                    <span class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400">
+                        Disponible
+                    </span>
+                </div>
+            </article>
+
+            <!-- Próxima renovación -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center gap-4">
+                    <GoogleIcon name="event" class="text-sky-500 text-5xl" />
+                    <div>
+                        <h3 class="text-sm text-slate-500 dark:text-slate-400">
+                            Próxima Renovación
+                        </h3>
+                        <div class="flex items-end gap-2">
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                                {{ vacations.next_renewal_date ? (() => { const date = new Date(vacations.next_renewal_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+
+            <!-- Solicitudes activas -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="hourglass_top" class="text-amber-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">
+                                Mis Solicitudes Activas
+                            </h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                                {{ vacations.active_requests }}
+                            </p>
+                        </div>
+                    </div>
+                    <span class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700 dark:bg-amber-500/10 dark:text-amber-400">
+                        Pendientes
+                    </span>
+                </div>
+            </article>
+
+            <!-- Días usados -->
+            <article class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="task_alt" class="text-indigo-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Mis Días Usados</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.used_days }}</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+        </section>
+
+        <!-- Mis Solicitudes Recientes -->
+        <section class="mt-8 rounded-2xl bg-white p-6 shadow dark:bg-slate-800">
+            <h3 class="mb-4 text-lg font-semibold text-slate-900 dark:text-slate-100">
+                Mis Solicitudes Recientes
+            </h3>
+
+            <div v-if="vacationsRequests?.length == 0" class="text-center py-8">
+                <GoogleIcon name="inbox" class="text-slate-400 text-4xl mx-auto mb-2" />
+                <p class="text-slate-500 dark:text-slate-400">No tienes solicitudes recientes</p>
+            </div>
+
+            <div v-if="vacationsRequests?.length > 0" class="space-y-3">
+                <div
+                    v-for="request in vacationsRequests"
+                    class="flex items-center justify-between rounded-lg border border-slate-200 p-4 dark:border-slate-700"
+                >
+                    <div>
+                        <p class="font-medium">{{ request.first_period_start }} - {{ request.last_period_end }}</p>
+                        <p class="text-xs text-slate-500 dark:text-slate-400">{{ request.total_days }} días</p>
+                    </div>
+                    <span
+                        :class="{
+                            'rounded-full px-3 py-1 text-xs font-medium': true,
+                            'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400': request.status === 'pendiente',
+                            'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400': request.status === 'aprobada',
+                            'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400': request.status === 'rechazada'
+                        }"
+                    >
+                        {{ request.status }}
+                    </span>
+                </div>
+            </div>
+
+            <div class="mt-4">
+                <RouterLink to="/vacations" class="inline-flex items-center gap-1 text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
+                    Ver todas mis solicitudes
+                    <GoogleIcon name="chevron_right" />
+                </RouterLink>
+            </div>
+        </section>
+    </div>
+</template>
diff --git a/src/pages/Dashboard/Employee.vue b/src/pages/Dashboard/Employee.vue
new file mode 100644
index 0000000..f001a50
--- /dev/null
+++ b/src/pages/Dashboard/Employee.vue
@@ -0,0 +1,247 @@
+
+<script setup>
+import { computed } from 'vue';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+// Props
+const props = defineProps({
+    vacations: {
+        type: Object,
+        default: () => ({})
+    },
+    vacationsRequests: {
+        type: Array,
+        default: () => []
+    }
+});
+</script>
+
+<template>
+    <div>
+        <!-- Banner de bienvenida -->
+        <section
+            class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-blue-600 to-sky-600 text-white"
+        >
+            <div class="relative z-10 p-6 md:p-8">
+                <p class="text-2xl md:text-3xl font-semibold">
+                    Bienvenido, {{ $page.user.name }}
+                </p>
+                <p class="mt-2 text-white/90">
+                    Gestiona tus solicitudes de vacaciones y revisa tu información.
+                </p>
+                <div class="mt-6">
+                    <RouterLink to="/vacations/create">
+                        <PrimaryButton
+                            type="button"
+                            class="hover:scale-[1.02] with-transition"
+                            v-text="'Solicitar Vacaciones'"
+                        />
+                    </RouterLink>
+                </div>
+            </div>
+        </section>
+
+        <!-- Tarjetas de KPIs -->
+        <section class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
+            <!-- Días disponibles -->
+            <article
+                class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
+            >
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="check_circle" class="text-emerald-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">
+                                Días Disponibles
+                            </h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                                {{ vacations.available_days }}
+                            </p>
+                        </div>
+                    </div>
+                    <span
+                        class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400"
+                    >
+                        Disponible
+                    </span>
+                </div>
+            </article>
+
+            <!-- Próxima renovación -->
+            <article
+                class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
+            >
+                <div class="flex items-center gap-4">
+                    <GoogleIcon name="event" class="text-sky-500 text-5xl" />
+                    <div>
+                        <h3 class="text-sm text-slate-500 dark:text-slate-400">
+                            Próxima Renovación
+                        </h3>
+                        <div class="flex items-end gap-2">
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                                {{ vacations.next_renewal_date ? (() => { const date = new Date(vacations.next_renewal_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+
+            <!-- Solicitudes activas -->
+            <article
+                class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
+            >
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="hourglass_top" class="text-amber-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">
+                                Solicitudes Activas
+                            </h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                                {{ vacations.active_requests }}
+                            </p>
+                        </div>
+                    </div>
+                    <span
+                        class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700 dark:bg-amber-500/10 dark:text-amber-400"
+                    >
+                        Pendientes
+                    </span>
+                </div>
+            </article>
+
+            <!-- Días usados -->
+            <article
+                class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
+            >
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-4">
+                        <GoogleIcon name="task_alt" class="text-indigo-500 text-5xl" />
+                        <div>
+                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Días Usados</h3>
+                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.used_days }}</p>
+                        </div>
+                    </div>
+                </div>
+            </article>
+        </section>
+
+        <!-- Acciones rápidas y solicitudes recientes -->
+        <section class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
+            <!-- Acciones rápidas -->
+            <article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
+                <div class="mb-4">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
+                        Acciones Rápidas
+                    </h3>
+                    <p class="text-sm text-slate-500 dark:text-slate-400">
+                        Gestiona tus vacaciones de forma rápida
+                    </p>
+                </div>
+                <div class="space-y-3">
+                    <RouterLink
+                        to="/vacations/create"
+                        class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 with-transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700/40"
+                    >
+                        <div class="flex items-center gap-3">
+                            <GoogleIcon name="add" class="text-sky-500 text-2xl" />
+                            <span class="font-medium">Nueva Solicitud de Vacaciones</span>
+                        </div>
+                        <GoogleIcon name="chevron_right" class="text-slate-400" />
+                    </RouterLink>
+
+                    <RouterLink
+                        to="/vacations"
+                        class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 with-transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700/40"
+                    >
+                        <div class="flex items-center gap-3">
+                            <GoogleIcon name="format_list_bulleted" class="text-indigo-500 text-2xl" />
+                            <span class="font-medium">Ver Mis Solicitudes</span>
+                        </div>
+                        <GoogleIcon name="chevron_right" class="text-slate-400" />
+                    </RouterLink>
+
+                    <RouterLink
+                        to="/profile"
+                        class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 with-transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700/40"
+                    >
+                        <div class="flex items-center gap-3">
+                            <GoogleIcon name="person" class="text-emerald-500 text-2xl" />
+                            <span class="font-medium">Mi Perfil</span>
+                        </div>
+                        <GoogleIcon name="chevron_right" class="text-slate-400" />
+                    </RouterLink>
+                </div>
+            </article>
+
+            <!-- Solicitudes recientes -->
+            <article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
+                <h3 class="mb-4 text-lg font-semibold text-slate-900 dark:text-slate-100">
+                    Solicitudes Recientes
+                </h3>
+
+                <div v-if="vacationsRequests?.length == 0" class="text-center py-8">
+                    <GoogleIcon name="inbox" class="text-slate-400 text-4xl mx-auto mb-2" />
+                    <p class="text-slate-500 dark:text-slate-400">No tienes solicitudes recientes</p>
+                </div>
+
+                <div v-if="vacationsRequests?.length > 0" class="space-y-3">
+                    <div
+                        v-for="request in vacationsRequests"
+                        class="flex items-center justify-between rounded-lg border border-slate-200 p-4 dark:border-slate-700"
+                    >
+                        <div>
+                            <p class="font-medium">{{ request.first_period_start }} - {{ request.last_period_end }}</p>
+                            <p class="text-xs text-slate-500 dark:text-slate-400">{{ request.total_days }} días</p>
+                        </div>
+                        <span
+                            :class="{
+                                'rounded-full px-3 py-1 text-xs font-medium': true,
+                                'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400': request.status === 'pendiente',
+                                'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400': request.status === 'aprobada',
+                                'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400': request.status === 'rechazada'
+                            }"
+                        >
+                            {{ request.status }}
+                        </span>
+                    </div>
+                </div>
+
+                <div class="mt-4">
+                    <RouterLink to="/vacations" class="inline-flex items-center gap-1 text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
+                        Ver todas las solicitudes
+                        <GoogleIcon name="chevron_right" />
+                    </RouterLink>
+                </div>
+            </article>
+        </section>
+
+        <!-- Resumen -->
+        <section
+            class="mt-8 rounded-2xl bg-white p-6 shadow dark:bg-slate-800"
+        >
+            <h3 class="mb-4 text-lg font-semibold text-slate-900 dark:text-slate-100">
+                Resumen de Vacaciones
+            </h3>
+            <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
+                <div class="text-center">
+                    <p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.available_days }}</p>
+                    <p class="text-sm text-slate-500 dark:text-slate-400">Días Disponibles</p>
+                </div>
+                <div class="text-center">
+                    <p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.used_days }}</p>
+                    <p class="text-sm text-slate-500 dark:text-slate-400">Días Usados</p>
+                </div>
+                <div class="text-center">
+                    <p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.total_days_in_period }}</p>
+                    <p class="text-sm text-slate-500 dark:text-slate-400">Total del Período</p>
+                </div>
+            </div>
+            <div class="mt-4 text-center text-sm text-slate-500 dark:text-slate-400">
+                <p>Período: {{ vacations.period_start_date ? (() => { const date = new Date(vacations.period_start_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }} - {{ vacations.period_end_date ? (() => { const date = new Date(vacations.period_end_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }}</p>
+            </div>
+        </section>
+    </div>
+</template>
diff --git a/src/pages/Events/Assignamment.vue b/src/pages/Events/Assignamment.vue
new file mode 100644
index 0000000..49d3b3c
--- /dev/null
+++ b/src/pages/Events/Assignamment.vue
@@ -0,0 +1,183 @@
+<script setup>
+import { ref, computed } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+// Estado del presupuesto
+const budgetItems = ref([
+  {
+    id: 1,
+    concept: 'Ej. Catering para evento X',
+    amount: 1500.00
+  },
+]);
+
+let nextId = 5;
+
+// Computed para calcular el total
+const totalBudget = computed(() => {
+  return budgetItems.value.reduce((total, item) => {
+    return total + (parseFloat(item.amount) || 0);
+  }, 0);
+});
+
+// Función para agregar nueva fila
+const addBudgetItem = () => {
+  budgetItems.value.push({
+    id: nextId++,
+    concept: '',
+    amount: 0
+  });
+};
+
+// Función para eliminar fila
+const removeBudgetItem = (id) => {
+  if (budgetItems.value.length > 1) {
+    budgetItems.value = budgetItems.value.filter(item => item.id !== id);
+  }
+};
+
+// Función para guardar presupuesto
+const saveBudget = () => {
+  // Filtrar elementos vacíos
+  const validItems = budgetItems.value.filter(item => 
+    item.concept.trim() !== '' && item.amount > 0
+  );
+
+  if (validItems.length === 0) {
+    alert('Por favor, agrega al menos un elemento al presupuesto');
+    return;
+  }
+
+  console.log('Guardar presupuesto:', {
+    items: validItems,
+    total: totalBudget.value
+  });
+
+  // Aquí implementarías la lógica para guardar
+  alert(`Presupuesto guardado correctamente. Total: $${totalBudget.value.toFixed(2)}`);
+};
+
+// Función para formatear moneda
+const formatCurrency = (amount) => {
+  return new Intl.NumberFormat('es-MX', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(amount);
+};
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Asignación de Presupuesto Anual</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestiona y asigna el presupuesto anual para eventos y actividades</p>
+      </div>
+    </div>
+
+    <!-- Card principal -->
+    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      
+      <!-- Formulario de presupuesto -->
+      <div class="space-y-6">
+        
+        <!-- Filas de presupuesto -->
+        <div class="space-y-4">
+          <div
+            v-for="(item, index) in budgetItems"
+            :key="item.id"
+            class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end"
+          >
+            
+            <!-- Campo Concepto -->
+            <div class="md:col-span-5">
+              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+                Concepto
+              </label>
+              <input
+                v-model="item.concept"
+                type="text"
+                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                :placeholder="index === 0 ? 'Ej. Catering para evento X' : 'Ingresa el concepto'"
+              >
+            </div>
+
+            <!-- Campo Monto -->
+            <div class="md:col-span-4">
+              <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+                Monto (USD)
+              </label>
+              <input
+                v-model.number="item.amount"
+                type="number"
+                min="0"
+                step="0.01"
+                class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                placeholder="0.00"
+              >
+            </div>
+
+            <!-- Botón de eliminar -->
+            <div class="md:col-span-3 flex justify-end">
+              <button
+                v-if="budgetItems.length > 1"
+                @click="removeBudgetItem(item.id)"
+                type="button"
+                class="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/20"
+                title="Eliminar fila"
+              >
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                </svg>
+              </button>
+            </div>
+
+          </div>
+        </div>
+
+        <!-- Resumen del presupuesto -->
+        <div class="mt-8 p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="account_balance_wallet" />
+              <span class="text-lg font-medium text-gray-800 dark:text-primary-dt">Total del Presupuesto:</span>
+            </div>
+            <div class="text-2xl font-bold text-[#2563eb] dark:text-primary-dt">
+              {{ formatCurrency(totalBudget) }}
+            </div>
+          </div>
+        </div>
+
+        <!-- Botones de acción -->
+        <div class="flex items-center justify-between pt-6 border-t border-gray-100 dark:border-primary/20">
+          
+          <!-- Botón Agregar más -->
+          <button
+            @click="addBudgetItem"
+            type="button"
+            class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
+          >
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16M20 12H4"></path>
+            </svg>
+            + Agregar más
+          </button>
+
+          <!-- Botón Guardar Presupuesto -->
+          <button
+            @click="saveBudget"
+            type="button"
+            class="inline-flex items-center gap-2 px-6 py-2 rounded-lg bg-[#2563eb] hover:bg-[#1e40af] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-2 transition-colors"
+          >
+            <GoogleIcon class="text-white text-xl" name="save" />
+            Guardar Presupuesto
+          </button>
+
+        </div>
+
+      </div>
+
+    </section>
+  </div>
+</template>
diff --git a/src/pages/Events/Index.vue b/src/pages/Events/Index.vue
new file mode 100644
index 0000000..52f0e44
--- /dev/null
+++ b/src/pages/Events/Index.vue
@@ -0,0 +1,284 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import VueApexCharts from 'vue3-apexcharts';
+
+// Datos del dashboard
+const dashboardData = ref({
+  annualBudget: 50000,
+  justifiedExpenses: 32500,
+  remainingBalance: 17500,
+  expenseDistribution: [
+    { name: 'Catering', value: 45, color: '#3B82F6' },
+    { name: 'Marketing', value: 25, color: '#EF4444' },
+    { name: 'Viáticos', value: 15, color: '#F97316' },
+    { name: 'Otros', value: 10, color: '#6B7280' },
+    { name: 'Renta de Equipo', value: 5, color: '#10B981' }
+  ]
+});
+
+// Configuración del gráfico de pie
+const chartOptions = ref({
+  chart: {
+    type: 'pie',
+    height: 400,
+    fontFamily: 'Inter, sans-serif'
+  },
+  labels: dashboardData.value.expenseDistribution.map(item => item.name),
+  colors: dashboardData.value.expenseDistribution.map(item => item.color),
+  dataLabels: {
+    enabled: true,
+    formatter: function (val) {
+      return val + "%"
+    },
+    style: {
+      fontSize: '14px',
+      fontWeight: 'bold',
+      colors: ['#fff']
+    }
+  },
+  legend: {
+    position: 'bottom',
+    horizontalAlign: 'center',
+    fontSize: '14px',
+    fontFamily: 'Inter, sans-serif',
+    markers: {
+      width: 12,
+      height: 12,
+      radius: 2
+    },
+    itemMargin: {
+      horizontal: 10,
+      vertical: 5
+    }
+  },
+  plotOptions: {
+    pie: {
+      donut: {
+        size: '0%'
+      },
+      expandOnClick: false
+    }
+  },
+  tooltip: {
+    y: {
+      formatter: function (val) {
+        return val + "%"
+      }
+    }
+  },
+  responsive: [{
+    breakpoint: 768,
+    options: {
+      chart: {
+        height: 300
+      },
+      legend: {
+        position: 'bottom'
+      }
+    }
+  }]
+});
+
+// Datos del gráfico
+const chartSeries = computed(() => {
+  return dashboardData.value.expenseDistribution.map(item => item.value);
+});
+
+// Función para formatear moneda
+const formatCurrency = (amount) => {
+  return new Intl.NumberFormat('es-MX', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(amount);
+};
+
+// Función para calcular porcentaje
+const calculatePercentage = (value, total) => {
+  return ((value / total) * 100).toFixed(1);
+};
+
+// Computed para el porcentaje de gastos
+const expensesPercentage = computed(() => {
+  return calculatePercentage(dashboardData.value.justifiedExpenses, dashboardData.value.annualBudget);
+});
+
+// Computed para el porcentaje de saldo restante
+const remainingPercentage = computed(() => {
+  return calculatePercentage(dashboardData.value.remainingBalance, dashboardData.value.annualBudget);
+});
+
+onMounted(() => {
+  // Aquí podrías cargar datos reales desde tu API
+  console.log('Dashboard de eventos cargado');
+});
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Dashboard de Eventos</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Resumen financiero y distribución de gastos por concepto</p>
+      </div>
+    </div>
+
+    <!-- Tarjetas de métricas -->
+    <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+      
+      <!-- Presupuesto Anual -->
+      <div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+        <div class="flex items-center justify-between">
+          <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Presupuesto Anual</h3>
+            <p class="mt-2 text-3xl font-bold text-blue-600 dark:text-blue-400">
+              {{ formatCurrency(dashboardData.annualBudget) }}
+            </p>
+          </div>
+          <div class="flex-shrink-0">
+            <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center dark:bg-blue-900/30">
+              <GoogleIcon class="text-blue-600 dark:text-blue-400 text-xl" name="account_balance_wallet" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Gastos Justificados -->
+      <div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+        <div class="flex items-center justify-between">
+          <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Gastos Justificados</h3>
+            <p class="mt-2 text-3xl font-bold text-green-600 dark:text-green-400">
+              {{ formatCurrency(dashboardData.justifiedExpenses) }}
+            </p>
+            <p class="mt-1 text-xs text-gray-500 dark:text-primary-dt/50">
+              {{ expensesPercentage }}% del presupuesto
+            </p>
+          </div>
+          <div class="flex-shrink-0">
+            <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center dark:bg-green-900/30">
+              <GoogleIcon class="text-green-600 dark:text-green-400 text-xl" name="check_circle" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Saldo Restante -->
+      <div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+        <div class="flex items-center justify-between">
+          <div>
+            <h3 class="text-sm font-medium text-gray-500 dark:text-primary-dt/70">Saldo Restante</h3>
+            <p class="mt-2 text-3xl font-bold text-amber-600 dark:text-amber-400">
+              {{ formatCurrency(dashboardData.remainingBalance) }}
+            </p>
+            <p class="mt-1 text-xs text-gray-500 dark:text-primary-dt/50">
+              {{ remainingPercentage }}% del presupuesto
+            </p>
+          </div>
+          <div class="flex-shrink-0">
+            <div class="w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center dark:bg-amber-900/30">
+              <GoogleIcon class="text-amber-600 dark:text-amber-400 text-xl" name="savings" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Gráfica de distribución -->
+    <div class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      
+      <!-- Título de la sección -->
+      <div class="mb-6">
+        <h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">
+          Distribución de Gastos por Concepto
+        </h2>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">
+          Porcentaje de gastos por categoría
+        </p>
+      </div>
+
+      <!-- Gráfico de pie -->
+      <div class="flex flex-col lg:flex-row gap-6">
+        
+        <!-- Gráfico -->
+        <div class="flex-1">
+          <VueApexCharts
+            type="pie"
+            :options="chartOptions"
+            :series="chartSeries"
+            height="400"
+          />
+        </div>
+
+        <!-- Leyenda detallada -->
+        <div class="lg:w-80">
+          <div class="space-y-3">
+            <h3 class="text-lg font-medium text-gray-800 dark:text-primary-dt mb-4">
+              Detalle por Categoría
+            </h3>
+            
+            <div
+              v-for="(item, index) in dashboardData.expenseDistribution"
+              :key="item.name"
+              class="flex items-center justify-between p-3 rounded-lg border border-gray-100 dark:border-primary/20"
+            >
+              <div class="flex items-center gap-3">
+                <div 
+                  class="w-4 h-4 rounded"
+                  :style="{ backgroundColor: item.color }"
+                ></div>
+                <span class="text-sm font-medium text-gray-700 dark:text-primary-dt">
+                  {{ item.name }}
+                </span>
+              </div>
+              <div class="text-right">
+                <div class="text-sm font-bold text-gray-900 dark:text-primary-dt">
+                  {{ item.value }}%
+                </div>
+                <div class="text-xs text-gray-500 dark:text-primary-dt/50">
+                  {{ formatCurrency((item.value / 100) * dashboardData.justifiedExpenses) }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Resumen estadístico -->
+      <div class="mt-6 pt-6 border-t border-gray-100 dark:border-primary/20">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div class="text-center">
+            <div class="text-2xl font-bold text-gray-900 dark:text-primary-dt">
+              {{ dashboardData.expenseDistribution.length }}
+            </div>
+            <div class="text-sm text-gray-500 dark:text-primary-dt/70">
+              Categorías
+            </div>
+          </div>
+          <div class="text-center">
+            <div class="text-2xl font-bold text-gray-900 dark:text-primary-dt">
+              {{ Math.max(...dashboardData.expenseDistribution.map(item => item.value)) }}%
+            </div>
+            <div class="text-sm text-gray-500 dark:text-primary-dt/70">
+              Mayor gasto
+            </div>
+          </div>
+          <div class="text-center">
+            <div class="text-2xl font-bold text-gray-900 dark:text-primary-dt">
+              {{ Math.min(...dashboardData.expenseDistribution.map(item => item.value)) }}%
+            </div>
+            <div class="text-sm text-gray-500 dark:text-primary-dt/70">
+              Menor gasto
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
diff --git a/src/pages/Events/Justification.vue b/src/pages/Events/Justification.vue
new file mode 100644
index 0000000..c1128f8
--- /dev/null
+++ b/src/pages/Events/Justification.vue
@@ -0,0 +1,360 @@
+<script setup>
+import { ref, computed } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+// Estado del formulario
+const formData = ref({
+  eventName: '',
+  place: '',
+  description: '',
+  company: 'Empresa A',
+  participants: '',
+  provider: '',
+  assignedAmount: 5000,
+  cost: '',
+  spent: '',
+  observations: '',
+  justificationFile: null
+});
+
+// Opciones de empresas
+const companies = ref([
+  'Empresa A',
+  'Empresa B',
+  'Empresa C',
+  'Empresa D'
+]);
+
+// Computed para calcular la diferencia
+const difference = computed(() => {
+  const assigned = parseFloat(formData.value.assignedAmount) || 0;
+  const spent = parseFloat(formData.value.spent) || 0;
+  return assigned - spent;
+});
+
+// Función para manejar la subida de archivos
+const handleFileUpload = (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    if (file.type === 'application/pdf') {
+      formData.value.justificationFile = file;
+    } else {
+      alert('Por favor, selecciona un archivo PDF válido');
+      event.target.value = '';
+    }
+  }
+};
+
+// Función para eliminar archivo
+const removeFile = () => {
+  formData.value.justificationFile = null;
+  const fileInput = document.getElementById('justification-file');
+  if (fileInput) {
+    fileInput.value = '';
+  }
+};
+
+// Función para enviar justificación
+const submitJustification = () => {
+  // Validación básica
+  if (!formData.value.eventName || !formData.value.place || !formData.value.description) {
+    alert('Por favor, completa todos los campos obligatorios');
+    return;
+  }
+
+  if (!formData.value.justificationFile) {
+    alert('Por favor, sube un archivo de justificación');
+    return;
+  }
+
+  console.log('Enviar justificación:', formData.value);
+  
+  // Aquí implementarías la lógica para enviar
+  alert('Justificación enviada correctamente');
+  
+  // Limpiar formulario
+  formData.value = {
+    eventName: '',
+    place: '',
+    description: '',
+    company: 'Empresa A',
+    participants: '',
+    provider: '',
+    assignedAmount: 5000,
+    cost: '',
+    spent: '',
+    observations: '',
+    justificationFile: null
+  };
+};
+
+// Función para formatear moneda
+const formatCurrency = (amount) => {
+  return new Intl.NumberFormat('es-MX', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(amount);
+};
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Justificación de Gastos</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Documenta y justifica los gastos realizados en eventos</p>
+      </div>
+    </div>
+
+    <!-- Card principal -->
+    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      
+      <!-- Formulario -->
+      <form @submit.prevent="submitJustification" class="space-y-6">
+        
+        <!-- Detalles del Evento -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          
+          <!-- Nombre del Evento -->
+          <div class="md:col-span-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+              Nombre del Evento *
+            </label>
+            <input
+              v-model="formData.eventName"
+              type="text"
+              required
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+              placeholder="Ingresa el nombre del evento"
+            >
+          </div>
+
+          <!-- Lugar -->
+          <div class="md:col-span-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+              Lugar *
+            </label>
+            <input
+              v-model="formData.place"
+              type="text"
+              required
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+              placeholder="Ingresa el lugar del evento"
+            >
+          </div>
+
+        </div>
+
+        <!-- Descripción -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+            Descripción y Detalles *
+          </label>
+          <textarea
+            v-model="formData.description"
+            required
+            rows="4"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+            placeholder="Describe los detalles del evento y los gastos realizados"
+          ></textarea>
+        </div>
+
+        <!-- Detalles Financieros y Participantes -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          
+          <!-- Empresa -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+              Empresa
+            </label>
+            <select
+              v-model="formData.company"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+            >
+              <option v-for="company in companies" :key="company" :value="company">
+                {{ company }}
+              </option>
+            </select>
+          </div>
+
+          <!-- Número de Participantes -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+              Número de Participantes
+            </label>
+            <input
+              v-model.number="formData.participants"
+              type="number"
+              min="1"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+              placeholder="0"
+            >
+          </div>
+
+          <!-- Proveedor -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+              Proveedor
+            </label>
+            <input
+              v-model="formData.provider"
+              type="text"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+              placeholder="Nombre del proveedor"
+            >
+          </div>
+
+          <!-- Monto Asignado -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+              Monto Asignado (USD)
+            </label>
+            <input
+              v-model.number="formData.assignedAmount"
+              type="number"
+              min="0"
+              step="0.01"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+              placeholder="0.00"
+            >
+          </div>
+
+          <!-- Costo -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+              Costo (USD)
+            </label>
+            <input
+              v-model.number="formData.cost"
+              type="number"
+              min="0"
+              step="0.01"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+              placeholder="0.00"
+            >
+          </div>
+
+          <!-- Gastado -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+              Gastado (USD)
+            </label>
+            <input
+              v-model.number="formData.spent"
+              type="number"
+              min="0"
+              step="0.01"
+              class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+              placeholder="0.00"
+            >
+          </div>
+
+        </div>
+
+        <!-- Resumen financiero -->
+        <div v-if="formData.assignedAmount > 0 || formData.spent > 0" class="p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="text-center">
+              <div class="text-sm text-gray-500 dark:text-primary-dt/70">Monto Asignado</div>
+              <div class="text-lg font-bold text-blue-600 dark:text-blue-400">
+                {{ formatCurrency(formData.assignedAmount) }}
+              </div>
+            </div>
+            <div class="text-center">
+              <div class="text-sm text-gray-500 dark:text-primary-dt/70">Gastado</div>
+              <div class="text-lg font-bold text-red-600 dark:text-red-400">
+                {{ formatCurrency(formData.spent) }}
+              </div>
+            </div>
+            <div class="text-center">
+              <div class="text-sm text-gray-500 dark:text-primary-dt/70">Diferencia</div>
+              <div class="text-lg font-bold" :class="difference >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
+                {{ formatCurrency(difference) }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Observaciones -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+            Observaciones
+          </label>
+          <textarea
+            v-model="formData.observations"
+            rows="3"
+            class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:border-transparent resize-vertical dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+            placeholder="Agrega observaciones adicionales si es necesario"
+          ></textarea>
+        </div>
+
+        <!-- Subida de archivo -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
+            Subir justificante (PDF) *
+          </label>
+          
+          <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-[#7c3aed] transition-colors dark:border-primary/20 dark:hover:border-[#7c3aed]">
+            <div class="space-y-1 text-center">
+              <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
+                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+              <div class="flex text-sm text-gray-600 dark:text-primary-dt/70">
+                <label for="justification-file" class="relative cursor-pointer bg-white rounded-md font-medium text-[#7c3aed] hover:text-[#6d28d9] focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-[#7c3aed]">
+                  <span>Sube un archivo</span>
+                  <input
+                    id="justification-file"
+                    name="justification-file"
+                    type="file"
+                    accept=".pdf"
+                    class="sr-only"
+                    @change="handleFileUpload"
+                  >
+                </label>
+                <p class="pl-1">o arrastra y suelta</p>
+              </div>
+              <p class="text-xs text-gray-500 dark:text-primary-dt/50">
+                PDF hasta 10MB
+              </p>
+            </div>
+          </div>
+
+          <!-- Archivo seleccionado -->
+          <div v-if="formData.justificationFile" class="mt-3 p-3 bg-green-50 border border-green-200 rounded-lg dark:bg-green-900/20 dark:border-green-800">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <GoogleIcon class="text-green-600 dark:text-green-400 text-xl" name="picture_as_pdf" />
+                <span class="text-sm font-medium text-green-800 dark:text-green-300">
+                  {{ formData.justificationFile.name }}
+                </span>
+              </div>
+              <button
+                @click="removeFile"
+                type="button"
+                class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+              >
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Botón de envío -->
+        <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
+          <button
+            type="submit"
+            class="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2 transition-colors"
+          >
+            <GoogleIcon class="text-white text-xl" name="send" />
+            Enviar Justificación
+          </button>
+        </div>
+
+      </form>
+
+    </section>
+  </div>
+</template>
diff --git a/src/pages/Events/Reports.vue b/src/pages/Events/Reports.vue
new file mode 100644
index 0000000..e9673cb
--- /dev/null
+++ b/src/pages/Events/Reports.vue
@@ -0,0 +1,204 @@
+<script setup>
+import { ref, computed } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+// Datos de ejemplo de gastos
+const expenses = ref([
+  {
+    id: 1,
+    date: '2024-08-15',
+    concept: 'Catering para evento X',
+    reason: 'Servicio de comida para 50 asistentes.',
+    amount: 1500.00,
+    justificationFile: 'catering_evento_x.pdf'
+  },
+  {
+    id: 2,
+    date: '2024-08-14',
+    concept: 'Renta de equipo de audio',
+    reason: 'Micrófonos y bocinas para el auditorio.',
+    amount: 800.00,
+    justificationFile: 'renta_audio.pdf'
+  },
+  {
+    id: 3,
+    date: '2024-08-10',
+    concept: 'Viáticos para conferencista',
+    reason: 'Vuelo y hospedaje para Dr. Smith.',
+    amount: 1250.00,
+    justificationFile: 'viaticos_dr_smith.pdf'
+  }
+]);
+
+// Computed para calcular el total
+const totalExpenses = computed(() => {
+  return expenses.value.reduce((total, expense) => {
+    return total + expense.amount;
+  }, 0);
+});
+
+// Función para ver PDF
+const viewPDF = (fileName) => {
+  console.log('Ver PDF:', fileName);
+  // Aquí implementarías la lógica para abrir el PDF
+  // Por ejemplo: window.open(`/pdfs/${fileName}`, '_blank');
+  alert(`Abriendo archivo: ${fileName}`);
+};
+
+// Función para formatear moneda
+const formatCurrency = (amount) => {
+  return new Intl.NumberFormat('es-MX', {
+    style: 'currency',
+    currency: 'USD'
+  }).format(amount);
+};
+
+// Función para formatear fecha
+const formatDate = (dateString) => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('es-MX', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  });
+};
+
+// Función para exportar reporte
+const exportReport = () => {
+  console.log('Exportar reporte:', expenses.value);
+  // Aquí implementarías la lógica para exportar el reporte
+  alert('Reporte exportado correctamente');
+};
+
+// Función para filtrar por fecha
+const filterByDate = () => {
+  // Aquí podrías implementar filtros por fecha
+  console.log('Filtrar por fecha');
+};
+</script>
+
+<template>
+  <div class="p-6 max-w-auto mx-auto">
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+      <div>
+        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Reporte de Gastos de Eventos</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Consulta y gestiona los gastos realizados en eventos</p>
+      </div>
+
+      <div class="flex gap-3">
+        <button 
+          @click="filterByDate"
+          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:border-transparent dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt dark:hover:bg-primary/10"
+        >
+          <GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="filter_list" />
+          Filtrar
+        </button>
+
+        <button 
+          @click="exportReport"
+          class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#2563eb] hover:bg-[#1e40af] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#2563eb] focus:ring-offset-2"
+        >
+          <GoogleIcon class="text-white text-xl" name="download" />
+          Exportar
+        </button>
+      </div>
+    </div>
+
+    <!-- Card principal -->
+    <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
+      
+      <!-- Tabla de gastos -->
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead>
+            <tr class="border-b border-gray-100 dark:border-primary/20">
+              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">FECHA</th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">CONCEPTO</th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">RAZÓN</th>
+              <th class="text-right py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">MONTO</th>
+              <th class="text-left py-3 px-4 font-semibold text-gray-800 dark:text-primary-dt">JUSTIFICANTE</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr 
+              v-for="expense in expenses" 
+              :key="expense.id"
+              class="border-b border-gray-50 dark:border-primary/10 hover:bg-gray-50 dark:hover:bg-primary/5"
+            >
+              <!-- Fecha -->
+              <td class="py-4 px-4">
+                <div class="text-sm text-gray-900 dark:text-primary-dt">
+                  {{ formatDate(expense.date) }}
+                </div>
+              </td>
+
+              <!-- Concepto -->
+              <td class="py-4 px-4">
+                <div class="font-medium text-gray-900 dark:text-primary-dt">
+                  {{ expense.concept }}
+                </div>
+              </td>
+
+              <!-- Razón -->
+              <td class="py-4 px-4">
+                <div class="text-sm text-gray-600 dark:text-primary-dt/70">
+                  {{ expense.reason }}
+                </div>
+              </td>
+
+              <!-- Monto -->
+              <td class="py-4 px-4 text-right">
+                <div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
+                  {{ formatCurrency(expense.amount) }}
+                </div>
+              </td>
+
+              <!-- Justificante -->
+              <td class="py-4 px-4">
+                <button
+                  @click="viewPDF(expense.justificationFile)"
+                  class="text-blue-600 hover:text-blue-800 underline text-sm font-medium dark:text-blue-400 dark:hover:text-blue-300 transition-colors"
+                >
+                  Ver PDF
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Resumen de gastos -->
+      <div class="mt-6 p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="account_balance_wallet" />
+            <span class="text-lg font-medium text-gray-800 dark:text-primary-dt">Total de Gastos:</span>
+          </div>
+          <div class="text-2xl font-bold text-[#2563eb] dark:text-primary-dt">
+            {{ formatCurrency(totalExpenses) }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer con estadísticas -->
+      <div class="mt-6 border-t border-gray-100 pt-4 flex items-center justify-between dark:border-primary/20">
+        <div class="text-sm text-gray-500 dark:text-primary-dt/70">
+          Mostrando {{ expenses.length }} gastos registrados
+        </div>
+        
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2 text-sm">
+            <span class="w-3 h-3 bg-blue-400 rounded-full"></span>
+            <span class="text-gray-600 dark:text-primary-dt/70">Total: {{ expenses.length }} registros</span>
+          </div>
+          <div class="flex items-center gap-2 text-sm">
+            <span class="w-3 h-3 bg-green-400 rounded-full"></span>
+            <span class="text-gray-600 dark:text-primary-dt/70">Justificados: {{ expenses.length }}</span>
+          </div>
+        </div>
+      </div>
+
+    </section>
+  </div>
+</template>
diff --git a/src/router/Index.js b/src/router/Index.js
index 28d3ba2..56c55de 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -16,7 +16,7 @@ const router = createRouter({
     routes: [
         {
             path: '/',
-            component: () => import('@Layouts/RhLayout.vue'),
+            component: () => import('@Layouts/AppLayout.vue'),
             name: 'root',
             meta: {
                 title: 'Inicio',
@@ -32,58 +32,13 @@ const router = createRouter({
                 {
                     path: 'dashboard',
                     name: 'dashboard.index',
-                    component: () => import('@Pages/Dashboard/Index.vue'),
+                    component: () => import('@Pages/Dashboard/Employee.vue'),
                     meta: {
                         title: 'Dashboard',
                         icon: 'grid_view',
                     }
                 },
                 {
-                    path: 'employees',
-                    name: 'employees.index',
-                    component: () => import('@Pages/Employees/Index.vue'),
-                    meta: {
-                        title: 'Empleados',
-                        icon: 'people',
-                    }
-                },
-                {
-                    path: 'academic',
-                    name: 'academic.index',
-                    component: () => import('@Pages/Academic/Index.vue'),
-                    meta: {
-                        title: 'Historial Académico',
-                        icon: 'school',
-                    }
-                },
-                {
-                    path: 'security',
-                    name: 'security.index',
-                    component: () => import('@Pages/Security/Index.vue'),
-                    meta: {
-                        title: 'Seguridad y Salud',
-                        icon: 'security',
-                    }
-                },
-                {
-                    path: 'payroll',
-                    name: 'payroll.index',
-                    component: () => import('@Pages/Payroll/Index.vue'),
-                    meta: {
-                        title: 'Nómina',
-                        icon: 'payments',
-                    }
-                },
-                {
-                    path: 'additional',
-                    name: 'additional.index',
-                    component: () => import('@Pages/Additional/Index.vue'),
-                    meta: {
-                        title: 'Información Adicional',
-                        icon: 'info',
-                    }
-                },
-                                {
                     path: 'profile',
                     name: 'profile.show',
                     component: () => import('@Pages/Profile/Show.vue'),
@@ -104,15 +59,203 @@ const router = createRouter({
             ],
         },
         {
-            path: '/admin',
-            name: 'admin',
-            component: () => import('@Layouts/AppLayout.vue'),
+            path: '/coordinator',
+            name: 'coordinator',
+            component: () => import('@Layouts/CoordinatorLayout.vue'),
             meta: {
                 title: 'Inicio',
                 icon: 'home',
             },
-            redirect: '/',
+            redirect: '/coordinator/dashboard',
             children: [
+                {
+                    path: 'dashboard',
+                    name: 'coordinator.dashboard',
+                    component: () => import('@Pages/Dashboard/Coordinator.vue'),
+                    meta: {
+                        title: 'Dashboard',
+                        icon: 'grid_view',
+                    },
+                    redirect: '/coordinator/dashboard',
+                    children: [
+                        {
+                            path: '',
+                            name: 'coordinator.dashboard.index',
+                            component: () => import('@Pages/Dashboard/Coordinator.vue'),
+                        }
+                    ]
+                },
+            ]
+        },
+        {
+            path: '/admin',
+            name: 'admin',
+            component: () => import('@Layouts/AdminLayout.vue'),
+            meta: {
+                title: 'Inicio',
+                icon: 'home',
+            },
+            redirect: '/admin/dashboard',
+            children: [
+                {
+                    path: 'dashboard',
+                    name: 'admin.dashboard',
+                    component: () => import('@Pages/Dashboard/Admin.vue'),
+                    meta: {
+                        title: 'Dashboard',
+                        icon: 'grid_view',
+                    },
+                    redirect: '/admin/dashboard',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.dashboard.index',
+                            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',
+                    meta: {
+                        title: 'Historial Académico',
+                        icon: 'school',
+                    },
+                    redirect: '/admin/academic',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.academic.index',
+                            component: () => import('@Pages/Academic/Index.vue'),
+                        }
+                    ]
+                },
+                {
+                    path: 'security',
+                    name: 'admin.security',
+                    meta: {
+                        title: 'Seguridad y Salud',
+                        icon: 'security',
+                    },
+                    redirect: '/admin/security',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.security.index',
+                            component: () => import('@Pages/Security/Index.vue'),
+                        }
+                    ]
+                },
+                {
+                    path: 'payroll',
+                    name: 'admin.payroll',
+                    meta: {
+                        title: 'Nómina',
+                        icon: 'payments',
+                    },
+                    redirect: '/admin/payroll',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.payroll.index',
+                            component: () => import('@Pages/Payroll/Index.vue'),
+                        }
+                    ]
+                },
+                {
+                    path: 'additional',
+                    name: 'admin.additional',
+                    meta: {
+                        title: 'Información Adicional',
+                        icon: 'info',
+                    },
+                    redirect: '/admin/additional',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.additional.index',
+                            component: () => import('@Pages/Additional/Index.vue'),
+                        }
+                    ]
+                },
+                {
+                    path: 'courses',
+                    name: 'admin.courses',
+                    meta: {
+                        title: 'Capacitaciones',
+                        icon: 'info',
+                    },
+                    redirect: '/admin/courses',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.courses.index',
+                            component: () => import('@Pages/Courses/Index.vue'),
+                        },
+                        {
+                            path: 'assignamment',
+                            name: 'admin.courses.assignamment',
+                            component: () => import('@Pages/Courses/Assignamment.vue'),
+                        },
+                        {
+                            path: 'request',
+                            name: 'admin.courses.request',
+                            component: () => import('@Pages/Courses/Request.vue'),
+                        },
+                        {
+                            path: 'calendar',
+                            name: 'admin.courses.calendar',
+                            component: () => import('@Pages/Courses/Calendar.vue'),
+                        },
+                    ]
+                },
+                {
+                    path: 'events',
+                    name: 'admin.events',
+                    meta: {
+                        title: 'Eventos',
+                        icon: 'info',
+                    },
+                    redirect: '/admin/events',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.events.index',
+                            component: () => import('@Pages/Events/Index.vue'),
+                        },
+                        {
+                            path: 'assignamment',
+                            name: 'admin.events.assignamment',
+                            component: () => import('@Pages/Events/Assignamment.vue'),
+                        },
+                        {
+                            path: 'justification',
+                            name: 'admin.events.justification',
+                            component: () => import('@Pages/Events/Justification.vue'),
+                        },
+                        {
+                            path: 'reports',
+                            name: 'admin.events.reports',
+                            component: () => import('@Pages/Events/Reports.vue'),
+                        },
+                    ]
+                },
                 {
                     path: 'users',
                     name: 'admin.users',
-- 
2.45.2


From c6aa67a7f8d25df0ef0e6f3715e56c7e95a4c1ff Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Mon, 22 Sep 2025 11:59:32 -0600
Subject: [PATCH 3/8] ADD: Se desarrollo el maquetador de documentos

---
 package-lock.json                    |  43 ++
 package.json                         |   1 +
 src/components/Holos/Canvas.vue      | 606 ++++++++++++++++++++++++
 src/components/Holos/Draggable.vue   |  64 +++
 src/components/Holos/PDFViewport.vue | 261 +++++++++++
 src/layouts/AdminLayout.vue          |  14 +-
 src/pages/Maquetador/Index.vue       | 663 +++++++++++++++++++++++++++
 src/router/Index.js                  |  18 +-
 8 files changed, 1667 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Holos/Canvas.vue
 create mode 100644 src/components/Holos/Draggable.vue
 create mode 100644 src/components/Holos/PDFViewport.vue
 create mode 100644 src/pages/Maquetador/Index.vue

diff --git a/package-lock.json b/package-lock.json
index b3c381c..a7e332d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "axios": "^1.8.1",
         "laravel-echo": "^2.0.2",
         "luxon": "^3.5.0",
+        "pdf-lib": "^1.17.1",
         "pinia": "^3.0.1",
         "pusher-js": "^8.4.0",
         "tailwindcss": "^4.0",
@@ -671,6 +672,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pdf-lib/standard-fonts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
+      "integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.6"
+      }
+    },
+    "node_modules/@pdf-lib/upng": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz",
+      "integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.10"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -3130,6 +3149,12 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -3159,6 +3184,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pdf-lib": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
+      "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@pdf-lib/standard-fonts": "^1.0.0",
+        "@pdf-lib/upng": "^1.0.1",
+        "pako": "^1.0.11",
+        "tslib": "^1.11.1"
+      }
+    },
+    "node_modules/pdf-lib/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
diff --git a/package.json b/package.json
index 9767c4b..6b2b224 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "axios": "^1.8.1",
     "laravel-echo": "^2.0.2",
     "luxon": "^3.5.0",
+    "pdf-lib": "^1.17.1",
     "pinia": "^3.0.1",
     "pusher-js": "^8.4.0",
     "tailwindcss": "^4.0",
diff --git a/src/components/Holos/Canvas.vue b/src/components/Holos/Canvas.vue
new file mode 100644
index 0000000..e675454
--- /dev/null
+++ b/src/components/Holos/Canvas.vue
@@ -0,0 +1,606 @@
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    element: {
+        type: Object,
+        required: true
+    },
+    isSelected: {
+        type: Boolean,
+        default: false
+    }
+});
+
+/** Eventos */
+const emit = defineEmits(['select', 'delete', 'update', 'move']);
+
+/** Referencias */
+const isEditing = ref(false);
+const editValue = ref('');
+const editInput = ref(null);
+const editTextarea = ref(null);
+const elementRef = ref(null);
+const isDragging = ref(false);
+const isResizing = ref(false);
+const resizeDirection = ref(null); // 'corner', 'right', 'bottom'
+const dragStart = ref({ x: 0, y: 0 });
+const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
+const fileInput = ref(null);
+
+/** Propiedades computadas */
+const elementStyles = computed(() => ({
+    left: `${props.element.x}px`,
+    top: `${props.element.y}px`,
+    width: `${props.element.width || 200}px`,
+    height: `${props.element.height || 40}px`
+}));
+
+/** Watchers */
+watch(() => props.isSelected, (selected) => {
+    if (selected && isEditing.value) {
+        nextTick(() => {
+            if (props.element.type === 'text' && editInput.value) {
+                editInput.value.focus();
+                editInput.value.select();
+            } else if (props.element.type === 'code' && editTextarea.value) {
+                editTextarea.value.focus();
+                editTextarea.value.select();
+            }
+        });
+    }
+});
+
+/** Métodos */
+const handleSelect = (event) => {
+    event.stopPropagation();
+    emit('select', props.element.id);
+};
+
+const handleDelete = () => {
+    emit('delete', props.element.id);
+};
+
+const startEditing = () => {
+    if (props.element.type === 'table' && props.element.content) {
+        // Deep copy para evitar mutaciones directas
+        editValue.value = JSON.parse(JSON.stringify(props.element.content));
+    } else if (props.element.type === 'code') {
+        editValue.value = props.element.content || 'console.log("Hola mundo");';
+    } else {
+        editValue.value = props.element.content || getDefaultEditValue();
+    }
+    isEditing.value = true;
+    
+    nextTick(() => {
+        if (editTextarea.value) editTextarea.value.focus();
+        if (editInput.value) editInput.value.focus();
+    });
+};
+
+const finishEditing = () => {
+    if (isEditing.value) {
+        isEditing.value = false;
+        
+        // Para tablas, emitir el objeto completo
+        if (props.element.type === 'table') {
+            emit('update', {
+                id: props.element.id,
+                content: editValue.value
+            });
+        } else {
+            emit('update', {
+                id: props.element.id,
+                content: editValue.value
+            });
+        }
+    }
+};
+
+const handleKeydown = (event) => {
+    if (props.element.type === 'text') {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            finishEditing();
+        } else if (event.key === 'Escape') {
+            isEditing.value = false;
+            editValue.value = props.element.content || 'Nuevo texto';
+        }
+    } else if (props.element.type === 'code') {
+        if (event.key === 'Escape') {
+            isEditing.value = false;
+            editValue.value = props.element.content || 'console.log("Hola mundo");';
+        }
+        // Para código, permitimos Enter normal y usamos Ctrl+Enter para terminar
+        if (event.key === 'Enter' && event.ctrlKey) {
+            event.preventDefault();
+            finishEditing();
+        }
+    } else if (props.element.type === 'table') {
+        if (event.key === 'Escape') {
+            isEditing.value = false;
+            // Restaurar el contenido original de la tabla
+            editValue.value = props.element.content ? 
+                JSON.parse(JSON.stringify(props.element.content)) : 
+                getDefaultEditValue();
+        }
+        // Para tablas, Enter normal para nueva línea en celda, Ctrl+Enter para terminar
+        if (event.key === 'Enter' && event.ctrlKey) {
+            event.preventDefault();
+            finishEditing();
+        }
+    }
+};
+
+// Manejo de archivo de imagen
+const handleFileSelect = (event) => {
+    const file = event.target.files[0];
+    if (file && file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            emit('update', {
+                id: props.element.id,
+                content: e.target.result,
+                fileName: file.name
+            });
+        };
+        reader.readAsDataURL(file);
+    }
+    // Limpiar el input
+    event.target.value = '';
+};
+
+// Funcionalidad de arrastre
+const handleMouseDown = (event) => {
+    if (isEditing.value || isResizing.value) return;
+    
+    isDragging.value = true;
+    dragStart.value = {
+        x: event.clientX - props.element.x,
+        y: event.clientY - props.element.y
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    
+    event.preventDefault();
+};
+
+const handleMouseMove = (event) => {
+    if (isDragging.value && !isResizing.value) {
+        const newX = event.clientX - dragStart.value.x;
+        const newY = event.clientY - dragStart.value.y;
+
+        emit('move', {
+            id: props.element.id,
+            x: Math.max(0, newX),
+            y: Math.max(0, newY)
+        });
+    } else if (isResizing.value && !isDragging.value) {
+        handleResizeMove(event);
+    }
+};
+
+const handleMouseUp = () => {
+    isDragging.value = false;
+    isResizing.value = false;
+    resizeDirection.value = null;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+};
+
+// Funcionalidad de redimensionamiento por esquina
+const startResize = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    
+    isResizing.value = true;
+    resizeDirection.value = 'corner';
+    resizeStart.value = {
+        x: event.clientX,
+        y: event.clientY,
+        width: props.element.width || 200,
+        height: props.element.height || 40
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+};
+
+// Funcionalidad de redimensionamiento por bordes
+const startResizeEdge = (event, direction) => {
+    event.stopPropagation();
+    event.preventDefault();
+    
+    isResizing.value = true;
+    resizeDirection.value = direction;
+    resizeStart.value = {
+        x: event.clientX,
+        y: event.clientY,
+        width: props.element.width || 200,
+        height: props.element.height || 40
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+};
+
+const handleResizeMove = (event) => {
+    if (!isResizing.value) return;
+
+    const deltaX = event.clientX - resizeStart.value.x;
+    const deltaY = event.clientY - resizeStart.value.y;
+
+    let newWidth = resizeStart.value.width;
+    let newHeight = resizeStart.value.height;
+
+    // Calcular nuevas dimensiones según la dirección
+    if (resizeDirection.value === 'corner') {
+        newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
+        newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
+    } else if (resizeDirection.value === 'right') {
+        newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
+    } else if (resizeDirection.value === 'bottom') {
+        newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
+    }
+
+    emit('update', {
+        id: props.element.id,
+        width: newWidth,
+        height: newHeight
+    });
+};
+
+// Obtener tamaños mínimos según el tipo de elemento
+const getMinWidth = () => {
+    switch (props.element.type) {
+        case 'text':
+            return 100;
+        case 'image':
+            return 100;
+        case 'table':
+            return 200;
+        default:
+            return 100;
+    }
+};
+
+const getMinHeight = () => {
+    switch (props.element.type) {
+        case 'text':
+            return 30;
+        case 'image':
+            return 80;
+        case 'table':
+            return 80;
+        default:
+            return 30;
+    }
+};
+
+// Obtener tamaños máximos según el tipo de elemento
+const getMaxWidth = () => {
+    return 800; // Máximo general
+};
+
+const getMaxHeight = () => {
+    return 600; // Máximo general
+};
+</script>
+
+<template>
+    <div
+        ref="elementRef"
+        :style="elementStyles"
+        @click="handleSelect"
+        @dblclick="startEditing"
+        @mousedown="handleMouseDown"
+        class="absolute group select-none"
+        :class="{
+            'ring-2 ring-blue-500 ring-opacity-50': isSelected,
+            'cursor-move': !isEditing && !isResizing,
+            'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'),
+            'cursor-se-resize': isResizing && resizeDirection === 'corner',
+            'cursor-e-resize': isResizing && resizeDirection === 'right',
+            'cursor-s-resize': isResizing && resizeDirection === 'bottom'
+        }"
+    >
+        <!-- Input oculto para selección de archivos -->
+        <input
+            ref="fileInput"
+            type="file"
+            accept="image/*"
+            @change="handleFileSelect"
+            class="hidden"
+        />
+
+        <!-- Elemento de Texto -->
+        <div
+            v-if="element.type === 'text'"
+            class="w-full h-full flex items-center px-3 py-2 bg-blue-100 rounded border border-blue-300 text-blue-800 text-sm font-medium dark:bg-blue-900/30 dark:border-blue-600 dark:text-blue-300"
+        >
+            <input
+                v-if="isEditing"
+                ref="editInput"
+                v-model="editValue"
+                @blur="finishEditing"
+                @keydown="handleKeydown"
+                class="w-full bg-transparent outline-none cursor-text"
+                @mousedown.stop
+            />
+            <span v-else class="truncate pointer-events-none">
+                {{ element.content || 'Nuevo texto' }}
+            </span>
+        </div>
+
+        <!-- Elemento de Imagen -->
+        <div
+            v-else-if="element.type === 'image'"
+            class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden"
+        >
+            <!-- Si hay imagen cargada -->
+            <img
+                v-if="element.content && element.content.startsWith('data:image')"
+                :src="element.content"
+                :alt="element.fileName || 'Imagen'"
+                class="w-full h-full object-cover pointer-events-none"
+            />
+            <!-- Placeholder para imagen -->
+            <div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
+                <GoogleIcon name="image" class="text-2xl mb-1" />
+                <span class="text-xs text-center">Haz doble clic para cargar imagen</span>
+            </div>
+        </div>
+
+        <!-- Elemento de Código -->
+        <div
+            v-else-if="element.type === 'code'"
+            class="w-full h-full bg-gray-900 rounded border overflow-hidden"
+        >
+            <div class="w-full h-6 bg-gray-800 flex items-center px-2 text-xs text-gray-400 border-b border-gray-700">
+                <div class="flex gap-1">
+                    <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+                    <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
+                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+                </div>
+                <span class="ml-2">{{ element.fileName || 'script.js' }}</span>
+            </div>
+            <div class="p-2 h-[calc(100%-24px)]">
+                <textarea
+                    v-if="isEditing"
+                    ref="editTextarea"
+                    v-model="editValue"
+                    @blur="finishEditing"
+                    @keydown="handleKeydown"
+                    class="w-full h-full bg-transparent text-green-400 text-xs font-mono outline-none resize-none cursor-text"
+                    @mousedown.stop
+                />
+                <pre v-else class="text-green-400 text-xs font-mono overflow-auto h-full pointer-events-none whitespace-pre-wrap">{{ element.content || 'console.log("Hola mundo");' }}</pre>
+            </div>
+        </div>
+
+        <!-- Elemento de Tabla -->
+        <div
+            v-else-if="element.type === 'table'"
+            class="w-full h-full bg-white rounded border overflow-hidden"
+        >
+            <div v-if="element.content && element.content.data" class="w-full h-full">
+                <table class="w-full h-full text-xs border-collapse">
+                    <thead v-if="element.content.data.length > 0">
+                        <tr class="bg-blue-50 dark:bg-blue-900/20">
+                            <th 
+                                v-for="(header, colIndex) in element.content.data[0]" 
+                                :key="colIndex"
+                                class="border border-gray-300 dark:border-primary/20 px-1 py-1 text-left font-semibold text-blue-800 dark:text-blue-300"
+                            >
+                                <input
+                                    v-if="isEditing"
+                                    v-model="editValue.data[0][colIndex]"
+                                    class="w-full bg-transparent outline-none text-xs"
+                                    @mousedown.stop
+                                    @click.stop
+                                    @focus.stop
+                                />
+                                <span v-else class="truncate">{{ header }}</span>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr 
+                            v-for="(row, rowIndex) in element.content.data.slice(1)" 
+                            :key="rowIndex"
+                            class="hover:bg-gray-50 dark:hover:bg-primary/5"
+                        >
+                            <td 
+                                v-for="(cell, colIndex) in row" 
+                                :key="colIndex"
+                                class="border border-gray-300 dark:border-primary/20 px-1 py-1"
+                            >
+                                <input
+                                    v-if="isEditing"
+                                    v-model="editValue.data[rowIndex + 1][colIndex]"
+                                    class="w-full bg-transparent outline-none text-xs"
+                                    @mousedown.stop
+                                    @click.stop
+                                    @focus.stop
+                                />
+                                <span v-else class="truncate text-gray-700 dark:text-primary-dt">{{ cell }}</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <!-- Placeholder para tabla vacía -->
+            <div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
+                <GoogleIcon name="table_chart" class="text-2xl mb-1" />
+                <span class="text-xs text-center">Doble clic para editar tabla</span>
+            </div>
+        </div>
+
+        <!-- Controles del elemento -->
+        <div
+            v-if="isSelected && !isEditing"
+            class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-10"
+        >
+            <!-- Indicador de tamaño -->
+            <div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
+                {{ Math.round(element.width || 200) }} × {{ Math.round(element.height || 40) }}
+            </div>
+
+            <!-- Botón para cargar imagen (solo para elementos de imagen) -->
+            <button
+                v-if="element.type === 'image'"
+                @click.stop="() => fileInput.click()"
+                class="w-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
+                title="Cargar imagen"
+            >
+                <GoogleIcon name="upload" class="text-xs" />
+            </button>
+
+            <!-- Botón eliminar -->
+            <button
+                @click.stop="handleDelete"
+                class="w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
+                title="Eliminar"
+            >
+                <GoogleIcon name="close" class="text-xs" />
+            </button>
+        </div>
+
+        <!-- Controles de redimensionamiento mejorados -->
+        <div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none">
+            <!-- Esquina inferior derecha -->
+            <div
+                @mousedown.stop="startResize"
+                class="absolute -bottom-1 -right-1 w-2 h-2 bg-blue-500 border border-white cursor-se-resize pointer-events-auto rounded-sm resize-handle-corner"
+                title="Redimensionar"
+            ></div>
+
+            <!-- Lado derecho -->
+            <div
+                @mousedown.stop="(event) => startResizeEdge(event, 'right')"
+                class="absolute top-1 bottom-1 -right-0.5 w-1 bg-blue-500 opacity-0 cursor-e-resize pointer-events-auto resize-handle-edge"
+                title="Redimensionar ancho"
+            ></div>
+
+            <!-- Lado inferior -->
+            <div
+                @mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
+                class="absolute -bottom-0.5 left-1 right-1 h-1 bg-blue-500 opacity-0 cursor-s-resize pointer-events-auto resize-handle-edge"
+                title="Redimensionar alto"
+            ></div>
+
+            <!-- Puntos de agarre visuales en los bordes (solo visuales) -->
+            <div class="absolute top-1/2 -right-0.5 w-1 h-6 -translate-y-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
+            <div class="absolute -bottom-0.5 left-1/2 w-6 h-1 -translate-x-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
+        </div>
+
+        <!-- Indicador de arrastre -->
+        <div
+            v-if="isDragging"
+            class="absolute inset-0 bg-blue-500 opacity-20 rounded pointer-events-none"
+        ></div>
+
+        <!-- Indicador de redimensionamiento -->
+        <div
+            v-if="isResizing"
+            class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
+        ></div>
+
+        <!-- Tooltip con instrucciones -->
+        <div
+            v-if="isSelected && !element.content && element.type !== 'image' && !isResizing"
+            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
+        >
+            {{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }}
+            {{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
+        </div>
+
+        <!-- Tooltip con instrucciones de redimensionamiento -->
+        <div
+            v-if="isSelected && !isEditing && element.type === 'image' && !element.content && !isResizing"  
+            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
+        >
+            Arrastra las esquinas para redimensionar
+        </div>
+
+        <!-- Botón para terminar edición de tabla -->
+        <div
+            v-if="isEditing && element.type === 'table'"
+            class="absolute -bottom-10 left-0 flex gap-2 z-20"
+        >
+            <button
+                @click="finishEditing"
+                class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
+            >
+                Guardar (Ctrl+Enter)
+            </button>
+            <button
+                @click="() => { isEditing = false; editValue = JSON.parse(JSON.stringify(element.content)); }"
+                class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded shadow-sm transition-colors"
+            >
+                Cancelar (Esc)
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Estilos para los controles de redimensionamiento mejorados */
+.resize-handle-corner {
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.resize-handle-corner:hover {
+    background-color: #2563eb;
+    transform: scale(1.1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.resize-handle-edge {
+    transition: all 0.2s ease;
+}
+
+.resize-handle-edge:hover {
+    opacity: 0.7 !important;
+    background-color: #2563eb;
+}
+
+.resize-handle-visual {
+    transition: all 0.2s ease;
+}
+
+/* Efecto hover para los indicadores visuales */
+.group:hover .resize-handle-visual {
+    opacity: 0.6 !important;
+}
+
+.group:hover .resize-handle-edge {
+    opacity: 0.4 !important;
+}
+
+/* Prevenir selección de texto durante el redimensionamiento */
+.select-none {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+/* Animación suave para los controles */
+@keyframes pulse-resize {
+    0%, 100% {
+        opacity: 0.3;
+    }
+    50% {
+        opacity: 0.7;
+    }
+}
+
+.group:hover .resize-handle-visual {
+    animation: pulse-resize 2s infinite;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Holos/Draggable.vue b/src/components/Holos/Draggable.vue
new file mode 100644
index 0000000..4bd032c
--- /dev/null
+++ b/src/components/Holos/Draggable.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { ref } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    type: {
+        type: String,
+        required: true, 
+    },
+    icon: String,
+    title: String,
+    description: String,
+});
+
+/** Eventos */
+const emit = defineEmits(['dragstart']);
+
+/** Referencias */
+const isDragging = ref(false);
+
+/** Métodos */
+const handleDragStart = (event) => {
+    isDragging.value = true;
+    event.dataTransfer.setData('text/plain', JSON.stringify({
+        type: props.type,
+        title: props.title
+    }));
+    emit('dragstart', props.type);
+};
+
+const handleDragEnd = () => {
+    isDragging.value = false;
+};
+</script>
+
+<template>
+    <div
+        draggable="true"
+        @dragstart="handleDragStart"
+        @dragend="handleDragEnd"
+        class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 bg-white cursor-grab hover:bg-gray-50 hover:border-blue-300 transition-colors dark:bg-primary-d dark:border-primary/20 dark:hover:bg-primary/10"
+        :class="{
+            'opacity-50 cursor-grabbing': isDragging,
+            'shadow-sm hover:shadow-md': !isDragging
+        }"
+    >
+        <div class="flex-shrink-0 w-8 h-8 rounded-md bg-blue-100 flex items-center justify-center dark:bg-blue-900/30">
+            <GoogleIcon 
+                :name="icon" 
+                class="text-blue-600 dark:text-blue-400 text-lg"
+            />
+        </div>
+        
+        <div class="flex-1 min-w-0">
+            <div class="text-sm font-medium text-gray-900 dark:text-primary-dt">
+                {{ title }}
+            </div>
+            <div class="text-xs text-gray-500 dark:text-primary-dt/70 truncate">
+                {{ description }}
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Holos/PDFViewport.vue b/src/components/Holos/PDFViewport.vue
new file mode 100644
index 0000000..967ca1b
--- /dev/null
+++ b/src/components/Holos/PDFViewport.vue
@@ -0,0 +1,261 @@
+<script setup>
+import { ref, computed, nextTick } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    pages: {
+        type: Array,
+        default: () => [{ id: 1, elements: [] }]
+    },
+    selectedElementId: String,
+    isExporting: Boolean
+});
+
+/** Eventos */
+const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change']);
+
+/** Referencias */
+const viewportRef = ref(null);
+const currentPage = ref(1);
+
+/** Constantes de diseño */
+const PAGE_WIDTH = 794; // A4 width in pixels (210mm @ 96dpi * 3.78)
+const PAGE_HEIGHT = 1123; // A4 height in pixels (297mm @ 96dpi * 3.78)
+const PAGE_MARGIN = 40;
+const ZOOM_LEVEL = 0.8; // Factor de escala para visualización
+
+/** Propiedades computadas */
+const scaledPageWidth = computed(() => PAGE_WIDTH * ZOOM_LEVEL);
+const scaledPageHeight = computed(() => PAGE_HEIGHT * ZOOM_LEVEL);
+const totalPages = computed(() => props.pages.length);
+
+/** Métodos */
+const handleDrop = (event, pageIndex) => {
+    event.preventDefault();
+    
+    const pageElement = event.currentTarget;
+    const rect = pageElement.getBoundingClientRect();
+    
+    // Calcular posición relativa a la página específica
+    const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
+    const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
+    
+    emit('drop', {
+        originalEvent: event,
+        pageIndex,
+        x: Math.max(PAGE_MARGIN, Math.min(PAGE_WIDTH - PAGE_MARGIN, relativeX)),
+        y: Math.max(PAGE_MARGIN, Math.min(PAGE_HEIGHT - PAGE_MARGIN, relativeY))
+    });
+};
+
+const handleDragOver = (event) => {
+    event.preventDefault();
+    emit('dragover', event);
+};
+
+const handleClick = (event, pageIndex) => {
+    if (event.target.classList.contains('pdf-page')) {
+        emit('click', { originalEvent: event, pageIndex });
+    }
+};
+
+const addPage = () => {
+    emit('add-page');
+    nextTick(() => {
+        scrollToPage(totalPages.value);
+    });
+};
+
+const deletePage = (pageIndex) => {
+    if (totalPages.value > 1) {
+        emit('delete-page', pageIndex);
+    }
+};
+
+const scrollToPage = (pageNumber) => {
+    if (viewportRef.value) {
+        const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
+        if (pageElement) {
+            pageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+};
+
+const setCurrentPage = (pageNumber) => {
+    currentPage.value = pageNumber;
+    emit('page-change', pageNumber);
+};
+
+/** Métodos expuestos */
+defineExpose({
+    scrollToPage,
+    setCurrentPage,
+    PAGE_WIDTH,
+    PAGE_HEIGHT,
+    ZOOM_LEVEL
+});
+</script>
+
+<template>
+    <div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
+        <!-- Toolbar de páginas -->
+        <div class="flex items-center justify-between px-4 py-2 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
+            <div class="flex items-center gap-3">
+                <span class="text-sm text-gray-600 dark:text-primary-dt">
+                    Página {{ currentPage }} de {{ totalPages }}
+                </span>
+                
+                <div class="flex items-center gap-1">
+                    <button
+                        @click="setCurrentPage(Math.max(1, currentPage - 1))"
+                        :disabled="currentPage <= 1"
+                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
+                    >
+                        <GoogleIcon name="keyboard_arrow_left" class="text-lg" />
+                    </button>
+                    
+                    <button
+                        @click="setCurrentPage(Math.min(totalPages, currentPage + 1))"
+                        :disabled="currentPage >= totalPages"
+                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
+                    >
+                        <GoogleIcon name="keyboard_arrow_right" class="text-lg" />
+                    </button>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-2">
+                
+                <button
+                    @click="addPage"
+                    :disabled="isExporting"
+                    class="flex items-center gap-1 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50"
+                >
+                    <GoogleIcon name="add" class="text-sm" />
+                    Nueva Página
+                </button>
+            </div>
+        </div>
+
+        <!-- Viewport de páginas -->
+        <div
+            ref="viewportRef"
+            class="flex-1 overflow-auto p-8"
+            style="background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
+        >
+            <div class="flex flex-col items-center gap-8">
+                <!-- Páginas -->
+                <div
+                    v-for="(page, pageIndex) in pages"
+                    :key="page.id"
+                    :data-page="pageIndex + 1"
+                    class="relative"
+                    @mouseenter="setCurrentPage(pageIndex + 1)"
+                >
+                    <!-- Número de página -->
+                    <div class="absolute -top-6 left-0 flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
+                        <span>Página {{ pageIndex + 1 }}</span>
+                        
+                        <button
+                            v-if="totalPages > 1"
+                            @click="deletePage(pageIndex)"
+                            :disabled="isExporting"
+                            class="text-red-500 hover:text-red-700 disabled:opacity-50"
+                            title="Eliminar página"
+                        >
+                            <GoogleIcon name="delete" class="text-sm" />
+                        </button>
+                    </div>
+                    
+                    <!-- Página PDF -->
+                    <div
+                        class="pdf-page relative bg-white rounded-lg shadow-lg border border-gray-300 dark:border-primary/20"
+                        :class="{
+                            'ring-2 ring-blue-500': currentPage === pageIndex + 1,
+                            'opacity-50': isExporting
+                        }"
+                        :style="{
+                            width: `${scaledPageWidth}px`,
+                            height: `${scaledPageHeight}px`,
+                            transform: `scale(${ZOOM_LEVEL})`,
+                            transformOrigin: 'top left'
+                        }"
+                        @drop="(e) => handleDrop(e, pageIndex)"
+                        @dragover="handleDragOver"
+                        @click="(e) => handleClick(e, pageIndex)"
+                    >
+                        <!-- Márgenes visuales -->
+                        <div
+                            class="absolute border border-dashed border-gray-300 dark:border-primary/30 pointer-events-none"
+                            :style="{
+                                top: `${PAGE_MARGIN}px`,
+                                left: `${PAGE_MARGIN}px`,
+                                width: `${PAGE_WIDTH - (PAGE_MARGIN * 2)}px`,
+                                height: `${PAGE_HEIGHT - (PAGE_MARGIN * 2)}px`
+                            }"
+                        ></div>
+                        
+                        <!-- Elementos de la página -->
+                        <slot
+                            name="elements"
+                            :page="page"
+                            :pageIndex="pageIndex"
+                            :pageWidth="PAGE_WIDTH"
+                            :pageHeight="PAGE_HEIGHT"
+                        />
+                        
+                        <!-- Indicador de página vacía -->
+                        <div
+                            v-if="page.elements.length === 0"
+                            class="absolute inset-0 flex items-center justify-center pointer-events-none"
+                        >
+                            <div class="text-center text-gray-400 dark:text-primary-dt/50">
+                                <GoogleIcon name="description" class="text-4xl mb-2" />
+                                <p class="text-sm">Página {{ pageIndex + 1 }}</p>
+                                <p class="text-xs">Arrastra elementos aquí</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Regla inferior (tamaño de referencia) -->
+                    <div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/50 text-center">
+                        210 × 297 mm (A4)
+                    </div>
+                </div>
+                
+                <!-- Botón para agregar página al final -->
+                <button
+                    @click="addPage"
+                    :disabled="isExporting"
+                    class="flex flex-col items-center justify-center w-40 h-20 border-2 border-dashed border-gray-300 dark:border-primary/30 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors disabled:opacity-50"
+                >
+                    <GoogleIcon name="add" class="text-2xl text-gray-400 dark:text-primary-dt/50" />
+                    <span class="text-xs text-gray-500 dark:text-primary-dt/70 mt-1">Nueva Página</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Overlay durante exportación -->
+        <div
+            v-if="isExporting"
+            class="absolute inset-0 bg-white/80 dark:bg-primary-d/80 flex items-center justify-center z-50"
+        >
+            <div class="text-center">
+                <GoogleIcon name="picture_as_pdf" class="text-4xl text-red-600 dark:text-red-400 animate-pulse mb-2" />
+                <p class="text-sm font-medium text-gray-900 dark:text-primary-dt">Generando PDF...</p>
+                <p class="text-xs text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.pdf-page {
+    transition: all 0.2s ease;
+}
+
+.pdf-page:hover {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index b26aa69..499d2ee 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -117,16 +117,26 @@ onMounted(() => {
                 <Link
                     v-if="hasPermission('roles.index')"
                     icon="license"
-                    name="roles.title" 
+                    name="Roles" 
                     to="admin.roles.index"
                 />
                 <Link
                     v-if="hasPermission('activities.index')"
                     icon="event"
-                    name="history.title" 
+                    name="Historial de Acciones" 
                     to="admin.activities.index"
                 />
             </Section>
+            <Section
+                name="Documentos"
+            >
+                <Link
+                    v-if="hasPermission('activities.index')"
+                    icon="event"
+                    name="Maquetador de Documentos" 
+                    to="admin.maquetador.index"
+                />
+            </Section>
         </template>
         <!-- Contenido -->
         <RouterView />
diff --git a/src/pages/Maquetador/Index.vue b/src/pages/Maquetador/Index.vue
new file mode 100644
index 0000000..a9f2790
--- /dev/null
+++ b/src/pages/Maquetador/Index.vue
@@ -0,0 +1,663 @@
+<script setup>
+import { ref, nextTick, onMounted, computed } from 'vue';
+import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Draggable from '@Holos/Draggable.vue';
+import CanvasElement from '@Holos/Canvas.vue';
+import PDFViewport from '@Holos/PDFViewport.vue';
+
+/** Estado reactivo */
+const pages = ref([{ id: 1, elements: [] }]);
+const selectedElementId = ref(null);
+const elementCounter = ref(0);
+const documentTitle = ref('Documento sin título');
+const isExporting = ref(false);
+const currentPage = ref(1);
+
+/** Referencias */
+const viewportRef = ref(null);
+
+/** Tipos de elementos disponibles */
+const availableElements = [
+    {
+        type: 'text',
+        icon: 'text_fields',
+        title: 'Texto',
+        description: 'Texto enriquecido con formato'
+    },
+    {
+        type: 'image',
+        icon: 'image',
+        title: 'Imagen',
+        description: 'Subir y editar imágenes'
+    },
+    {
+        type: 'table',
+        icon: 'table_chart',
+        title: 'Tabla',
+        description: 'Tabla con filas y columnas'
+    }
+];
+
+/** Propiedades computadas */
+const allElements = computed(() => {
+    return pages.value.flatMap(page => page.elements);
+});
+
+const totalElements = computed(() => {
+    return allElements.value.length;
+});
+
+/** Métodos del canvas */
+const handleDrop = (dropData) => {
+    try {
+        const data = JSON.parse(dropData.originalEvent.dataTransfer.getData('text/plain'));
+        
+        const newElement = {
+            id: `element-${++elementCounter.value}`,
+            type: data.type,
+            pageIndex: dropData.pageIndex,
+            x: dropData.x,
+            y: dropData.y,
+            width: data.type === 'table' ? 300 : data.type === 'image' ? 200 : 200,
+            height: data.type === 'table' ? 120 : data.type === 'image' ? 150 : 40,
+            content: getDefaultContent(data.type),
+            fileName: getDefaultFileName(data.type),
+            created_at: new Date().toISOString()
+        };
+        
+        pages.value[dropData.pageIndex].elements.push(newElement);
+        selectedElementId.value = newElement.id;
+    } catch (error) {
+        console.error('Error al procesar elemento arrastrado:', error);
+    }
+};
+
+const getDefaultContent = (type) => {
+    switch(type) {
+        case 'text':
+            return 'Nuevo texto';
+        case 'table':
+            return {
+                rows: 3,
+                cols: 3,
+                data: [
+                    ['Encabezado 1', 'Encabezado 2', 'Encabezado 3'],
+                    ['Fila 1, Col 1', 'Fila 1, Col 2', 'Fila 1, Col 3'],
+                    ['Fila 2, Col 1', 'Fila 2, Col 2', 'Fila 2, Col 3']
+                ]
+            };
+        case 'image':
+            return null;
+        default:
+            return null;
+    }
+};
+
+const getDefaultFileName = (type) => {
+    switch(type) {
+        case 'table':
+            return 'tabla.csv';
+        case 'image':
+            return null;
+        default:
+            return null;
+    }
+};
+
+const handleDragOver = (event) => {
+    event.preventDefault();
+};
+
+const handleCanvasClick = (clickData) => {
+    selectedElementId.value = null;
+};
+
+const selectElement = (elementId) => {
+    selectedElementId.value = elementId;
+};
+
+const deleteElement = (elementId) => {
+    const index = allElements.value.findIndex(el => el.id === elementId);
+    if (index !== -1) {
+        const pageIndex = Math.floor(index / 3); // Suponiendo 3 elementos por página
+        pages.value[pageIndex].elements.splice(index % 3, 1);
+        if (selectedElementId.value === elementId) {
+            selectedElementId.value = null;
+        }
+    }
+};
+
+const updateElement = (update) => {
+    const element = allElements.value.find(el => el.id === update.id);
+    if (element) {
+        Object.assign(element, update);
+    }
+};
+
+const moveElement = (moveData) => {
+    const element = allElements.value.find(el => el.id === moveData.id);
+    if (element) {
+        element.x = moveData.x;
+        element.y = moveData.y;
+    }
+};
+
+/** Paginación */
+const addPage = () => {
+    const newPageId = Math.max(...pages.value.map(p => p.id)) + 1;
+    pages.value.push({
+        id: newPageId,
+        elements: []
+    });
+};
+
+const deletePage = (pageIndex) => {
+    if (pages.value.length > 1) {
+        // Mover elementos de la página eliminada a la página anterior
+        const elementsToMove = pages.value[pageIndex].elements;
+        if (pageIndex > 0 && elementsToMove.length > 0) {
+            elementsToMove.forEach(element => {
+                element.pageIndex = pageIndex - 1;
+                pages.value[pageIndex - 1].elements.push(element);
+            });
+        }
+        
+        pages.value.splice(pageIndex, 1);
+        
+        // Actualizar índices de página de elementos restantes
+        pages.value.forEach((page, index) => {
+            page.elements.forEach(element => {
+                element.pageIndex = index;
+            });
+        });
+        
+        // Ajustar página actual si es necesario
+        if (currentPage.value > pages.value.length) {
+            currentPage.value = pages.value.length;
+        }
+    }
+};
+
+/** Métodos de acciones rápidas */
+const addQuickElement = (type) => {
+    const targetPageIndex = currentPage.value - 1;
+    const existingElements = pages.value[targetPageIndex].elements.length;
+    
+    const newElement = {
+        id: `element-${++elementCounter.value}`,
+        type: type,
+        pageIndex: targetPageIndex,
+        x: 80 + (existingElements * 20),
+        y: 80 + (existingElements * 20),
+        width: type === 'table' ? 300 : type === 'image' ? 200 : 200,
+        height: type === 'table' ? 120 : type === 'image' ? 150 : 40,
+        content: getDefaultContent(type),
+        fileName: getDefaultFileName(type),
+        created_at: new Date().toISOString()
+    };
+    
+    pages.value[targetPageIndex].elements.push(newElement);
+    selectedElementId.value = newElement.id;
+};
+
+const exportPDF = async () => {
+    if (totalElements.value === 0) {
+        window.Notify.warning('No hay elementos para exportar');
+        return;
+    }
+
+    try {
+        isExporting.value = true;
+        window.Notify.info('Generando PDF...');
+
+        // Crear un nuevo documento PDF
+        const pdfDoc = await PDFDocument.create();
+        let currentPage = pdfDoc.addPage([595.28, 841.89]); // A4 size in points
+        let currentPageHeight = 841.89;
+        let yOffset = 50; // Margen superior
+
+        // Obtener fuentes
+        const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
+        const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
+
+        // Ordenar elementos por posición (de arriba hacia abajo, de izquierda a derecha)
+        const sortedElements = [...allElements.value].sort((a, b) => {
+            if (Math.abs(a.y - b.y) < 20) {
+                return a.x - b.x; // Si están en la misma línea, ordenar por X
+            }
+            return a.y - b.y; // Ordenar por Y
+        });
+
+        // Procesar elementos
+        for (const element of sortedElements) {
+            // Calcular posición en el PDF
+            const x = Math.max(50, Math.min(500, (element.x * 0.75) + 50)); // Convertir y limitar X
+            let y = currentPageHeight - yOffset - (element.y * 0.75); // Convertir Y
+
+            // Verificar si necesitamos una nueva página
+            const elementHeight = getElementHeight(element);
+            if (y - elementHeight < 50) {
+                currentPage = pdfDoc.addPage([595.28, 841.89]);
+                currentPageHeight = 841.89;
+                yOffset = 50;
+                y = currentPageHeight - yOffset;
+            }
+
+            switch (element.type) {
+                case 'text':
+                    if (element.content) {
+                        // Dividir texto largo en líneas
+                        const words = element.content.split(' ');
+                        const lines = [];
+                        let currentLine = '';
+                        const maxWidth = Math.min(400, (element.width || 200) * 0.75);
+
+                        for (const word of words) {
+                            const testLine = currentLine + (currentLine ? ' ' : '') + word;
+                            const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
+                            
+                            if (testWidth <= maxWidth) {
+                                currentLine = testLine;
+                            } else {
+                                if (currentLine) lines.push(currentLine);
+                                currentLine = word;
+                            }
+                        }
+                        if (currentLine) lines.push(currentLine);
+
+                        // Dibujar cada línea
+                        lines.forEach((line, index) => {
+                            currentPage.drawText(line, {
+                                x: x,
+                                y: y - (index * 15),
+                                size: 12,
+                                font: helveticaFont,
+                                color: rgb(0, 0, 0),
+                            });
+                        });
+
+                        yOffset += lines.length * 15 + 10;
+                    }
+                    break;
+
+                case 'code':
+                    if (element.content) {
+                        // Dibujar fondo para el código
+                        const codeLines = element.content.split('\n');
+                        const codeWidth = Math.min(450, (element.width || 300) * 0.75);
+                        const codeHeight = (codeLines.length * 12) + 20;
+
+                        currentPage.drawRectangle({
+                            x: x - 10,
+                            y: y - codeHeight,
+                            width: codeWidth,
+                            height: codeHeight,
+                            color: rgb(0.95, 0.95, 0.95),
+                        });
+
+                        // Dibujar código
+                        codeLines.forEach((line, index) => {
+                            // Truncar líneas muy largas
+                            const maxChars = Math.floor(codeWidth / 6);
+                            const displayLine = line.length > maxChars ? 
+                                line.substring(0, maxChars - 3) + '...' : line;
+
+                            currentPage.drawText(displayLine, {
+                                x: x - 5,
+                                y: y - 15 - (index * 12),
+                                size: 9,
+                                font: courierFont,
+                                color: rgb(0, 0, 0),
+                            });
+                        });
+
+                        yOffset += codeHeight + 20;
+                    }
+                    break;
+
+                case 'image':
+                    if (element.content && element.content.startsWith('data:image')) {
+                        try {
+                            // Convertir base64 a bytes
+                            const base64Data = element.content.split(',')[1];
+                            const imageBytes = Uint8Array.from(
+                                atob(base64Data), 
+                                c => c.charCodeAt(0)
+                            );
+                            
+                            let image;
+                            if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
+                                image = await pdfDoc.embedJpg(imageBytes);
+                            } else if (element.content.includes('image/png')) {
+                                image = await pdfDoc.embedPng(imageBytes);
+                            }
+
+                            if (image) {
+                                // Calcular dimensiones manteniendo proporción
+                                const maxWidth = Math.min(400, (element.width || 200) * 0.75);
+                                const maxHeight = Math.min(300, (element.height || 150) * 0.75);
+                                
+                                const imageAspectRatio = image.width / image.height;
+                                let displayWidth = maxWidth;
+                                let displayHeight = maxWidth / imageAspectRatio;
+                                
+                                if (displayHeight > maxHeight) {
+                                    displayHeight = maxHeight;
+                                    displayWidth = maxHeight * imageAspectRatio;
+                                }
+
+                                currentPage.drawImage(image, {
+                                    x: x,
+                                    y: y - displayHeight,
+                                    width: displayWidth,
+                                    height: displayHeight,
+                                });
+
+                                yOffset += displayHeight + 20;
+                            }
+                        } catch (imageError) {
+                            console.warn('Error al procesar imagen:', imageError);
+                            // Dibujar placeholder para imagen
+                            currentPage.drawRectangle({
+                                x: x,
+                                y: y - 60,
+                                width: 100,
+                                height: 60,
+                                borderColor: rgb(0.7, 0.7, 0.7),
+                                borderWidth: 1,
+                            });
+
+                            currentPage.drawText('[Imagen no disponible]', {
+                                x: x + 5,
+                                y: y - 35,
+                                size: 10,
+                                font: helveticaFont,
+                                color: rgb(0.7, 0.7, 0.7),
+                            });
+
+                            yOffset += 80;
+                        }
+                    } else {
+                        // Placeholder para imagen vacía
+                        currentPage.drawRectangle({
+                            x: x,
+                            y: y - 60,
+                            width: 100,
+                            height: 60,
+                            borderColor: rgb(0.7, 0.7, 0.7),
+                            borderWidth: 1,
+                            borderDashArray: [3, 3],
+                        });
+
+                        currentPage.drawText('[Imagen]', {
+                            x: x + 25,
+                            y: y - 35,
+                            size: 10,
+                            font: helveticaFont,
+                            color: rgb(0.7, 0.7, 0.7),
+                        });
+
+                        yOffset += 80;
+                    }
+                    break;
+
+                case 'table':
+                    if (element.content && element.content.data) {
+                        const tableData = element.content.data;
+                        const cellWidth = 80;
+                        const cellHeight = 20;
+                        const tableWidth = tableData[0].length * cellWidth;
+                        const tableHeight = tableData.length * cellHeight;
+
+                        // Dibujar bordes de la tabla
+                        currentPage.drawRectangle({
+                            x: x,
+                            y: y - tableHeight,
+                            width: tableWidth,
+                            height: tableHeight,
+                            borderColor: rgb(0.3, 0.3, 0.3),
+                            borderWidth: 1,
+                        });
+
+                        // Dibujar contenido de las celdas
+                        tableData.forEach((row, rowIndex) => {
+                            row.forEach((cell, colIndex) => {
+                                const cellX = x + (colIndex * cellWidth);
+                                const cellY = y - (rowIndex * cellHeight) - 15;
+
+                                // Dibujar borde de celda
+                                currentPage.drawRectangle({
+                                    x: cellX,
+                                    y: y - ((rowIndex + 1) * cellHeight),
+                                    width: cellWidth,
+                                    height: cellHeight,
+                                    borderColor: rgb(0.7, 0.7, 0.7),
+                                    borderWidth: 0.5,
+                                });
+
+                                // Dibujar texto de la celda (truncar si es muy largo)
+                                const maxChars = 10;
+                                const displayText = cell.length > maxChars ? 
+                                    cell.substring(0, maxChars - 3) + '...' : cell;
+
+                                currentPage.drawText(displayText, {
+                                    x: cellX + 5,
+                                    y: cellY,
+                                    size: 8,
+                                    font: helveticaFont,
+                                    color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0), // Encabezados en azul
+                                });
+                            });
+                        });
+
+                        yOffset += tableHeight + 20;
+                    }
+                    break;
+            }
+        }
+
+        // Generar PDF
+        const pdfBytes = await pdfDoc.save();
+
+        // Descargar
+        const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${documentTitle.value.replace(/\s+/g, '_')}.pdf`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+
+        window.Notify.success('PDF generado correctamente');
+        
+    } catch (error) {
+        console.error('Error al generar PDF:', error);
+        window.Notify.error('Error al generar el PDF');
+    } finally {
+        isExporting.value = false;
+    }
+};
+
+// Función auxiliar para calcular la altura aproximada de un elemento
+const getElementHeight = (element) => {
+    switch (element.type) {
+        case 'text':
+            if (!element.content) return 20;
+            const lines = Math.ceil(element.content.length / 50);
+            return lines * 15 + 10;
+        case 'table':
+            if (!element.content || !element.content.data) return 60;
+            const tableRows = element.content.data.length;
+            return (tableRows * 20) + 20;
+        case 'image':
+            return Math.min(300, (element.height || 150) * 0.75) + 30;
+        default:
+            return 40;
+    }
+};
+
+const clearCanvas = () => {
+    if (confirm('¿Estás seguro de que quieres limpiar el canvas? Se perderán todos los elementos.')) {
+        pages.value = [{ id: 1, elements: [] }];
+        selectedElementId.value = null;
+        elementCounter.value = 0;
+    }
+};
+
+/** Atajos de teclado */
+const handleKeydown = (event) => {
+    if (event.key === 'Delete' && selectedElementId.value) {
+        deleteElement(selectedElementId.value);
+    }
+    
+    if (event.key === 'Escape') {
+        selectedElementId.value = null;
+    }
+};
+
+/** Ciclo de vida */
+onMounted(() => {
+    document.addEventListener('keydown', handleKeydown);
+});
+</script>
+
+<template>
+    <div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
+        <!-- Panel Izquierdo - Elementos -->
+        <div class="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col">
+            <!-- Header del panel -->
+            <div class="p-4 border-b border-gray-200 dark:border-primary/20">
+                <div class="flex items-center gap-2 mb-4">
+                    <GoogleIcon name="text_snippet" class="text-blue-600 dark:text-blue-400 text-xl" />
+                    <h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
+                        Diseñador de Documentos
+                    </h2>
+                </div>
+                
+                <!-- Título del documento -->
+                <input
+                    v-model="documentTitle"
+                    class="w-full px-2 py-1 text-xs border border-gray-200 rounded mb-3 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                    placeholder="Título del documento"
+                />
+                
+                <!-- Botón de exportación PDF -->
+                <button
+                    @click="exportPDF"
+                    :disabled="isExporting"
+                    :class="[
+                        'w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors',
+                        isExporting
+                            ? 'bg-gray-400 text-white cursor-not-allowed'
+                            : 'bg-red-600 hover:bg-red-700 text-white'
+                    ]"
+                >
+                    <GoogleIcon :name="isExporting ? 'hourglass_empty' : 'picture_as_pdf'" class="text-sm" />
+                    {{ isExporting ? 'Generando PDF...' : 'Exportar PDF' }}
+                </button>
+            </div>
+
+            <!-- Sección Elementos -->
+            <div class="p-4 flex-1 overflow-y-auto">
+                <h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mb-3">
+                    Elementos
+                </h3>
+                <p class="text-xs text-gray-400 dark:text-primary-dt/70 mb-4">
+                    Arrastra elementos al canvas para crear tu documento
+                </p>
+                
+                <div class="space-y-3">
+                    <Draggable
+                        v-for="element in availableElements"
+                        :key="element.type"
+                        :type="element.type"
+                        :icon="element.icon"
+                        :title="element.title"
+                        :description="element.description"
+                    />
+                </div>
+
+                <!-- Agregar rápido -->
+                <h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mt-6 mb-3">
+                    Agregar rápido
+                </h3>
+                
+                <div class="space-y-2">
+                    <button
+                        v-for="element in availableElements"
+                        :key="`quick-${element.type}`"
+                        @click="addQuickElement(element.type)"
+                        :disabled="isExporting"
+                        class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-primary-dt hover:bg-gray-100 dark:hover:bg-primary/10 rounded transition-colors disabled:opacity-50"
+                    >
+                        <GoogleIcon name="add" class="text-gray-400 dark:text-primary-dt/70 text-sm" />
+                        {{ element.title }}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Área Principal con Viewport -->
+        <div class="flex-1 flex flex-col">
+            <!-- Toolbar superior -->
+            <div class="h-14 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20 flex items-center justify-between px-4">
+                <div class="flex items-center gap-4">
+                    <!-- Herramientas de formato (simuladas) -->
+                    <div class="flex items-center gap-1 text-sm">
+                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
+                            <GoogleIcon name="format_bold" class="text-gray-600 dark:text-primary-dt" />
+                        </button>
+                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
+                            <GoogleIcon name="format_italic" class="text-gray-600 dark:text-primary-dt" />
+                        </button>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-4">
+                    <span class="text-xs text-gray-500 dark:text-primary-dt/70">
+                        {{ totalElements }} elemento{{ totalElements !== 1 ? 's' : '' }} • {{ pages.length }} página{{ pages.length !== 1 ? 's' : '' }}
+                    </span>
+                    
+                    <button
+                        v-if="totalElements > 0"
+                        @click="clearCanvas"
+                        :disabled="isExporting"
+                        class="flex items-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20 rounded transition-colors disabled:opacity-50"
+                    >
+                        <GoogleIcon name="delete" class="text-sm" />
+                        Limpiar Todo
+                    </button>
+                </div>
+            </div>
+
+            <!-- PDFViewport -->
+            <PDFViewport
+                ref="viewportRef"
+                :pages="pages"
+                :selected-element-id="selectedElementId"
+                :is-exporting="isExporting"
+                @drop="handleDrop"
+                @click="handleCanvasClick"
+                @add-page="addPage"
+                @delete-page="deletePage"
+                @page-change="(page) => currentPage = page"
+            >
+                <template #elements="{ page, pageIndex }">
+                    <CanvasElement
+                        v-for="element in page.elements"
+                        :key="element.id"
+                        :element="element"
+                        :is-selected="selectedElementId === element.id && !isExporting"
+                        @select="selectElement"
+                        @delete="deleteElement"
+                        @update="updateElement"
+                        @move="moveElement"
+                    />
+                </template>
+            </PDFViewport>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index 56c55de..cce72fe 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -356,7 +356,23 @@ const router = createRouter({
                             component: () => import('@Pages/Admin/Activities/Index.vue')
                         }
                     ]
-                }
+                },
+                {
+                    path: 'documentation',
+                    name: 'admin.documentation',
+                    meta: {
+                        title: 'Maquetador de Documentos',
+                        icon: 'documents',
+                    },
+                    redirect: '/admin/documentation',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.maquetador.index',
+                            component: () => import('@Pages/Maquetador/Index.vue'),
+                        },
+                    ]
+                },
             ]
         },
         {
-- 
2.45.2


From 6563c1a5b3b3127ceac85567fee44d31123a3b14 Mon Sep 17 00:00:00 2001
From: "juan.zapata" <juan.zapata@golsystems.com.mx>
Date: Mon, 22 Sep 2025 18:01:34 +0000
Subject: [PATCH 4/8] Maquetador de documentos (#2)

Co-authored-by: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Reviewed-on: https://gitea.golsystems.mx/juan.zapata/golscontrol-frontend-v1/pulls/2
---
 package-lock.json                    |  43 ++
 package.json                         |   1 +
 src/components/Holos/Canvas.vue      | 606 ++++++++++++++++++++++++
 src/components/Holos/Draggable.vue   |  64 +++
 src/components/Holos/PDFViewport.vue | 261 +++++++++++
 src/layouts/AdminLayout.vue          |  14 +-
 src/pages/Maquetador/Index.vue       | 663 +++++++++++++++++++++++++++
 src/router/Index.js                  |  18 +-
 8 files changed, 1667 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Holos/Canvas.vue
 create mode 100644 src/components/Holos/Draggable.vue
 create mode 100644 src/components/Holos/PDFViewport.vue
 create mode 100644 src/pages/Maquetador/Index.vue

diff --git a/package-lock.json b/package-lock.json
index b3c381c..a7e332d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "axios": "^1.8.1",
         "laravel-echo": "^2.0.2",
         "luxon": "^3.5.0",
+        "pdf-lib": "^1.17.1",
         "pinia": "^3.0.1",
         "pusher-js": "^8.4.0",
         "tailwindcss": "^4.0",
@@ -671,6 +672,24 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pdf-lib/standard-fonts": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
+      "integrity": "sha512-hU30BK9IUN/su0Mn9VdlVKsWBS6GyhVfqjwl1FjZN4TxP6cCw0jP2w7V3Hf5uX7M0AZJ16vey9yE0ny7Sa59ZA==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.6"
+      }
+    },
+    "node_modules/@pdf-lib/upng": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@pdf-lib/upng/-/upng-1.0.1.tgz",
+      "integrity": "sha512-dQK2FUMQtowVP00mtIksrlZhdFXQZPC+taih1q4CvPZ5vqdxR/LKBaFg0oAfzd1GlHZXXSPdQfzQnt+ViGvEIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "pako": "^1.0.10"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -3130,6 +3149,12 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -3159,6 +3184,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/pdf-lib": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/pdf-lib/-/pdf-lib-1.17.1.tgz",
+      "integrity": "sha512-V/mpyJAoTsN4cnP31vc0wfNA1+p20evqqnap0KLoRUN0Yk/p3wN52DOEsL4oBFcLdb76hlpKPtzJIgo67j/XLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@pdf-lib/standard-fonts": "^1.0.0",
+        "@pdf-lib/upng": "^1.0.1",
+        "pako": "^1.0.11",
+        "tslib": "^1.11.1"
+      }
+    },
+    "node_modules/pdf-lib/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
diff --git a/package.json b/package.json
index 9767c4b..6b2b224 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "axios": "^1.8.1",
     "laravel-echo": "^2.0.2",
     "luxon": "^3.5.0",
+    "pdf-lib": "^1.17.1",
     "pinia": "^3.0.1",
     "pusher-js": "^8.4.0",
     "tailwindcss": "^4.0",
diff --git a/src/components/Holos/Canvas.vue b/src/components/Holos/Canvas.vue
new file mode 100644
index 0000000..e675454
--- /dev/null
+++ b/src/components/Holos/Canvas.vue
@@ -0,0 +1,606 @@
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    element: {
+        type: Object,
+        required: true
+    },
+    isSelected: {
+        type: Boolean,
+        default: false
+    }
+});
+
+/** Eventos */
+const emit = defineEmits(['select', 'delete', 'update', 'move']);
+
+/** Referencias */
+const isEditing = ref(false);
+const editValue = ref('');
+const editInput = ref(null);
+const editTextarea = ref(null);
+const elementRef = ref(null);
+const isDragging = ref(false);
+const isResizing = ref(false);
+const resizeDirection = ref(null); // 'corner', 'right', 'bottom'
+const dragStart = ref({ x: 0, y: 0 });
+const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
+const fileInput = ref(null);
+
+/** Propiedades computadas */
+const elementStyles = computed(() => ({
+    left: `${props.element.x}px`,
+    top: `${props.element.y}px`,
+    width: `${props.element.width || 200}px`,
+    height: `${props.element.height || 40}px`
+}));
+
+/** Watchers */
+watch(() => props.isSelected, (selected) => {
+    if (selected && isEditing.value) {
+        nextTick(() => {
+            if (props.element.type === 'text' && editInput.value) {
+                editInput.value.focus();
+                editInput.value.select();
+            } else if (props.element.type === 'code' && editTextarea.value) {
+                editTextarea.value.focus();
+                editTextarea.value.select();
+            }
+        });
+    }
+});
+
+/** Métodos */
+const handleSelect = (event) => {
+    event.stopPropagation();
+    emit('select', props.element.id);
+};
+
+const handleDelete = () => {
+    emit('delete', props.element.id);
+};
+
+const startEditing = () => {
+    if (props.element.type === 'table' && props.element.content) {
+        // Deep copy para evitar mutaciones directas
+        editValue.value = JSON.parse(JSON.stringify(props.element.content));
+    } else if (props.element.type === 'code') {
+        editValue.value = props.element.content || 'console.log("Hola mundo");';
+    } else {
+        editValue.value = props.element.content || getDefaultEditValue();
+    }
+    isEditing.value = true;
+    
+    nextTick(() => {
+        if (editTextarea.value) editTextarea.value.focus();
+        if (editInput.value) editInput.value.focus();
+    });
+};
+
+const finishEditing = () => {
+    if (isEditing.value) {
+        isEditing.value = false;
+        
+        // Para tablas, emitir el objeto completo
+        if (props.element.type === 'table') {
+            emit('update', {
+                id: props.element.id,
+                content: editValue.value
+            });
+        } else {
+            emit('update', {
+                id: props.element.id,
+                content: editValue.value
+            });
+        }
+    }
+};
+
+const handleKeydown = (event) => {
+    if (props.element.type === 'text') {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            finishEditing();
+        } else if (event.key === 'Escape') {
+            isEditing.value = false;
+            editValue.value = props.element.content || 'Nuevo texto';
+        }
+    } else if (props.element.type === 'code') {
+        if (event.key === 'Escape') {
+            isEditing.value = false;
+            editValue.value = props.element.content || 'console.log("Hola mundo");';
+        }
+        // Para código, permitimos Enter normal y usamos Ctrl+Enter para terminar
+        if (event.key === 'Enter' && event.ctrlKey) {
+            event.preventDefault();
+            finishEditing();
+        }
+    } else if (props.element.type === 'table') {
+        if (event.key === 'Escape') {
+            isEditing.value = false;
+            // Restaurar el contenido original de la tabla
+            editValue.value = props.element.content ? 
+                JSON.parse(JSON.stringify(props.element.content)) : 
+                getDefaultEditValue();
+        }
+        // Para tablas, Enter normal para nueva línea en celda, Ctrl+Enter para terminar
+        if (event.key === 'Enter' && event.ctrlKey) {
+            event.preventDefault();
+            finishEditing();
+        }
+    }
+};
+
+// Manejo de archivo de imagen
+const handleFileSelect = (event) => {
+    const file = event.target.files[0];
+    if (file && file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            emit('update', {
+                id: props.element.id,
+                content: e.target.result,
+                fileName: file.name
+            });
+        };
+        reader.readAsDataURL(file);
+    }
+    // Limpiar el input
+    event.target.value = '';
+};
+
+// Funcionalidad de arrastre
+const handleMouseDown = (event) => {
+    if (isEditing.value || isResizing.value) return;
+    
+    isDragging.value = true;
+    dragStart.value = {
+        x: event.clientX - props.element.x,
+        y: event.clientY - props.element.y
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    
+    event.preventDefault();
+};
+
+const handleMouseMove = (event) => {
+    if (isDragging.value && !isResizing.value) {
+        const newX = event.clientX - dragStart.value.x;
+        const newY = event.clientY - dragStart.value.y;
+
+        emit('move', {
+            id: props.element.id,
+            x: Math.max(0, newX),
+            y: Math.max(0, newY)
+        });
+    } else if (isResizing.value && !isDragging.value) {
+        handleResizeMove(event);
+    }
+};
+
+const handleMouseUp = () => {
+    isDragging.value = false;
+    isResizing.value = false;
+    resizeDirection.value = null;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+};
+
+// Funcionalidad de redimensionamiento por esquina
+const startResize = (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    
+    isResizing.value = true;
+    resizeDirection.value = 'corner';
+    resizeStart.value = {
+        x: event.clientX,
+        y: event.clientY,
+        width: props.element.width || 200,
+        height: props.element.height || 40
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+};
+
+// Funcionalidad de redimensionamiento por bordes
+const startResizeEdge = (event, direction) => {
+    event.stopPropagation();
+    event.preventDefault();
+    
+    isResizing.value = true;
+    resizeDirection.value = direction;
+    resizeStart.value = {
+        x: event.clientX,
+        y: event.clientY,
+        width: props.element.width || 200,
+        height: props.element.height || 40
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+};
+
+const handleResizeMove = (event) => {
+    if (!isResizing.value) return;
+
+    const deltaX = event.clientX - resizeStart.value.x;
+    const deltaY = event.clientY - resizeStart.value.y;
+
+    let newWidth = resizeStart.value.width;
+    let newHeight = resizeStart.value.height;
+
+    // Calcular nuevas dimensiones según la dirección
+    if (resizeDirection.value === 'corner') {
+        newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
+        newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
+    } else if (resizeDirection.value === 'right') {
+        newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
+    } else if (resizeDirection.value === 'bottom') {
+        newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY));
+    }
+
+    emit('update', {
+        id: props.element.id,
+        width: newWidth,
+        height: newHeight
+    });
+};
+
+// Obtener tamaños mínimos según el tipo de elemento
+const getMinWidth = () => {
+    switch (props.element.type) {
+        case 'text':
+            return 100;
+        case 'image':
+            return 100;
+        case 'table':
+            return 200;
+        default:
+            return 100;
+    }
+};
+
+const getMinHeight = () => {
+    switch (props.element.type) {
+        case 'text':
+            return 30;
+        case 'image':
+            return 80;
+        case 'table':
+            return 80;
+        default:
+            return 30;
+    }
+};
+
+// Obtener tamaños máximos según el tipo de elemento
+const getMaxWidth = () => {
+    return 800; // Máximo general
+};
+
+const getMaxHeight = () => {
+    return 600; // Máximo general
+};
+</script>
+
+<template>
+    <div
+        ref="elementRef"
+        :style="elementStyles"
+        @click="handleSelect"
+        @dblclick="startEditing"
+        @mousedown="handleMouseDown"
+        class="absolute group select-none"
+        :class="{
+            'ring-2 ring-blue-500 ring-opacity-50': isSelected,
+            'cursor-move': !isEditing && !isResizing,
+            'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'),
+            'cursor-se-resize': isResizing && resizeDirection === 'corner',
+            'cursor-e-resize': isResizing && resizeDirection === 'right',
+            'cursor-s-resize': isResizing && resizeDirection === 'bottom'
+        }"
+    >
+        <!-- Input oculto para selección de archivos -->
+        <input
+            ref="fileInput"
+            type="file"
+            accept="image/*"
+            @change="handleFileSelect"
+            class="hidden"
+        />
+
+        <!-- Elemento de Texto -->
+        <div
+            v-if="element.type === 'text'"
+            class="w-full h-full flex items-center px-3 py-2 bg-blue-100 rounded border border-blue-300 text-blue-800 text-sm font-medium dark:bg-blue-900/30 dark:border-blue-600 dark:text-blue-300"
+        >
+            <input
+                v-if="isEditing"
+                ref="editInput"
+                v-model="editValue"
+                @blur="finishEditing"
+                @keydown="handleKeydown"
+                class="w-full bg-transparent outline-none cursor-text"
+                @mousedown.stop
+            />
+            <span v-else class="truncate pointer-events-none">
+                {{ element.content || 'Nuevo texto' }}
+            </span>
+        </div>
+
+        <!-- Elemento de Imagen -->
+        <div
+            v-else-if="element.type === 'image'"
+            class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden"
+        >
+            <!-- Si hay imagen cargada -->
+            <img
+                v-if="element.content && element.content.startsWith('data:image')"
+                :src="element.content"
+                :alt="element.fileName || 'Imagen'"
+                class="w-full h-full object-cover pointer-events-none"
+            />
+            <!-- Placeholder para imagen -->
+            <div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
+                <GoogleIcon name="image" class="text-2xl mb-1" />
+                <span class="text-xs text-center">Haz doble clic para cargar imagen</span>
+            </div>
+        </div>
+
+        <!-- Elemento de Código -->
+        <div
+            v-else-if="element.type === 'code'"
+            class="w-full h-full bg-gray-900 rounded border overflow-hidden"
+        >
+            <div class="w-full h-6 bg-gray-800 flex items-center px-2 text-xs text-gray-400 border-b border-gray-700">
+                <div class="flex gap-1">
+                    <div class="w-2 h-2 bg-red-500 rounded-full"></div>
+                    <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
+                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
+                </div>
+                <span class="ml-2">{{ element.fileName || 'script.js' }}</span>
+            </div>
+            <div class="p-2 h-[calc(100%-24px)]">
+                <textarea
+                    v-if="isEditing"
+                    ref="editTextarea"
+                    v-model="editValue"
+                    @blur="finishEditing"
+                    @keydown="handleKeydown"
+                    class="w-full h-full bg-transparent text-green-400 text-xs font-mono outline-none resize-none cursor-text"
+                    @mousedown.stop
+                />
+                <pre v-else class="text-green-400 text-xs font-mono overflow-auto h-full pointer-events-none whitespace-pre-wrap">{{ element.content || 'console.log("Hola mundo");' }}</pre>
+            </div>
+        </div>
+
+        <!-- Elemento de Tabla -->
+        <div
+            v-else-if="element.type === 'table'"
+            class="w-full h-full bg-white rounded border overflow-hidden"
+        >
+            <div v-if="element.content && element.content.data" class="w-full h-full">
+                <table class="w-full h-full text-xs border-collapse">
+                    <thead v-if="element.content.data.length > 0">
+                        <tr class="bg-blue-50 dark:bg-blue-900/20">
+                            <th 
+                                v-for="(header, colIndex) in element.content.data[0]" 
+                                :key="colIndex"
+                                class="border border-gray-300 dark:border-primary/20 px-1 py-1 text-left font-semibold text-blue-800 dark:text-blue-300"
+                            >
+                                <input
+                                    v-if="isEditing"
+                                    v-model="editValue.data[0][colIndex]"
+                                    class="w-full bg-transparent outline-none text-xs"
+                                    @mousedown.stop
+                                    @click.stop
+                                    @focus.stop
+                                />
+                                <span v-else class="truncate">{{ header }}</span>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr 
+                            v-for="(row, rowIndex) in element.content.data.slice(1)" 
+                            :key="rowIndex"
+                            class="hover:bg-gray-50 dark:hover:bg-primary/5"
+                        >
+                            <td 
+                                v-for="(cell, colIndex) in row" 
+                                :key="colIndex"
+                                class="border border-gray-300 dark:border-primary/20 px-1 py-1"
+                            >
+                                <input
+                                    v-if="isEditing"
+                                    v-model="editValue.data[rowIndex + 1][colIndex]"
+                                    class="w-full bg-transparent outline-none text-xs"
+                                    @mousedown.stop
+                                    @click.stop
+                                    @focus.stop
+                                />
+                                <span v-else class="truncate text-gray-700 dark:text-primary-dt">{{ cell }}</span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <!-- Placeholder para tabla vacía -->
+            <div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
+                <GoogleIcon name="table_chart" class="text-2xl mb-1" />
+                <span class="text-xs text-center">Doble clic para editar tabla</span>
+            </div>
+        </div>
+
+        <!-- Controles del elemento -->
+        <div
+            v-if="isSelected && !isEditing"
+            class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-10"
+        >
+            <!-- Indicador de tamaño -->
+            <div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
+                {{ Math.round(element.width || 200) }} × {{ Math.round(element.height || 40) }}
+            </div>
+
+            <!-- Botón para cargar imagen (solo para elementos de imagen) -->
+            <button
+                v-if="element.type === 'image'"
+                @click.stop="() => fileInput.click()"
+                class="w-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
+                title="Cargar imagen"
+            >
+                <GoogleIcon name="upload" class="text-xs" />
+            </button>
+
+            <!-- Botón eliminar -->
+            <button
+                @click.stop="handleDelete"
+                class="w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
+                title="Eliminar"
+            >
+                <GoogleIcon name="close" class="text-xs" />
+            </button>
+        </div>
+
+        <!-- Controles de redimensionamiento mejorados -->
+        <div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none">
+            <!-- Esquina inferior derecha -->
+            <div
+                @mousedown.stop="startResize"
+                class="absolute -bottom-1 -right-1 w-2 h-2 bg-blue-500 border border-white cursor-se-resize pointer-events-auto rounded-sm resize-handle-corner"
+                title="Redimensionar"
+            ></div>
+
+            <!-- Lado derecho -->
+            <div
+                @mousedown.stop="(event) => startResizeEdge(event, 'right')"
+                class="absolute top-1 bottom-1 -right-0.5 w-1 bg-blue-500 opacity-0 cursor-e-resize pointer-events-auto resize-handle-edge"
+                title="Redimensionar ancho"
+            ></div>
+
+            <!-- Lado inferior -->
+            <div
+                @mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
+                class="absolute -bottom-0.5 left-1 right-1 h-1 bg-blue-500 opacity-0 cursor-s-resize pointer-events-auto resize-handle-edge"
+                title="Redimensionar alto"
+            ></div>
+
+            <!-- Puntos de agarre visuales en los bordes (solo visuales) -->
+            <div class="absolute top-1/2 -right-0.5 w-1 h-6 -translate-y-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
+            <div class="absolute -bottom-0.5 left-1/2 w-6 h-1 -translate-x-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
+        </div>
+
+        <!-- Indicador de arrastre -->
+        <div
+            v-if="isDragging"
+            class="absolute inset-0 bg-blue-500 opacity-20 rounded pointer-events-none"
+        ></div>
+
+        <!-- Indicador de redimensionamiento -->
+        <div
+            v-if="isResizing"
+            class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
+        ></div>
+
+        <!-- Tooltip con instrucciones -->
+        <div
+            v-if="isSelected && !element.content && element.type !== 'image' && !isResizing"
+            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
+        >
+            {{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }}
+            {{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
+        </div>
+
+        <!-- Tooltip con instrucciones de redimensionamiento -->
+        <div
+            v-if="isSelected && !isEditing && element.type === 'image' && !element.content && !isResizing"  
+            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
+        >
+            Arrastra las esquinas para redimensionar
+        </div>
+
+        <!-- Botón para terminar edición de tabla -->
+        <div
+            v-if="isEditing && element.type === 'table'"
+            class="absolute -bottom-10 left-0 flex gap-2 z-20"
+        >
+            <button
+                @click="finishEditing"
+                class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
+            >
+                Guardar (Ctrl+Enter)
+            </button>
+            <button
+                @click="() => { isEditing = false; editValue = JSON.parse(JSON.stringify(element.content)); }"
+                class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded shadow-sm transition-colors"
+            >
+                Cancelar (Esc)
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Estilos para los controles de redimensionamiento mejorados */
+.resize-handle-corner {
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.resize-handle-corner:hover {
+    background-color: #2563eb;
+    transform: scale(1.1);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.resize-handle-edge {
+    transition: all 0.2s ease;
+}
+
+.resize-handle-edge:hover {
+    opacity: 0.7 !important;
+    background-color: #2563eb;
+}
+
+.resize-handle-visual {
+    transition: all 0.2s ease;
+}
+
+/* Efecto hover para los indicadores visuales */
+.group:hover .resize-handle-visual {
+    opacity: 0.6 !important;
+}
+
+.group:hover .resize-handle-edge {
+    opacity: 0.4 !important;
+}
+
+/* Prevenir selección de texto durante el redimensionamiento */
+.select-none {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+/* Animación suave para los controles */
+@keyframes pulse-resize {
+    0%, 100% {
+        opacity: 0.3;
+    }
+    50% {
+        opacity: 0.7;
+    }
+}
+
+.group:hover .resize-handle-visual {
+    animation: pulse-resize 2s infinite;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Holos/Draggable.vue b/src/components/Holos/Draggable.vue
new file mode 100644
index 0000000..4bd032c
--- /dev/null
+++ b/src/components/Holos/Draggable.vue
@@ -0,0 +1,64 @@
+<script setup>
+import { ref } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    type: {
+        type: String,
+        required: true, 
+    },
+    icon: String,
+    title: String,
+    description: String,
+});
+
+/** Eventos */
+const emit = defineEmits(['dragstart']);
+
+/** Referencias */
+const isDragging = ref(false);
+
+/** Métodos */
+const handleDragStart = (event) => {
+    isDragging.value = true;
+    event.dataTransfer.setData('text/plain', JSON.stringify({
+        type: props.type,
+        title: props.title
+    }));
+    emit('dragstart', props.type);
+};
+
+const handleDragEnd = () => {
+    isDragging.value = false;
+};
+</script>
+
+<template>
+    <div
+        draggable="true"
+        @dragstart="handleDragStart"
+        @dragend="handleDragEnd"
+        class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 bg-white cursor-grab hover:bg-gray-50 hover:border-blue-300 transition-colors dark:bg-primary-d dark:border-primary/20 dark:hover:bg-primary/10"
+        :class="{
+            'opacity-50 cursor-grabbing': isDragging,
+            'shadow-sm hover:shadow-md': !isDragging
+        }"
+    >
+        <div class="flex-shrink-0 w-8 h-8 rounded-md bg-blue-100 flex items-center justify-center dark:bg-blue-900/30">
+            <GoogleIcon 
+                :name="icon" 
+                class="text-blue-600 dark:text-blue-400 text-lg"
+            />
+        </div>
+        
+        <div class="flex-1 min-w-0">
+            <div class="text-sm font-medium text-gray-900 dark:text-primary-dt">
+                {{ title }}
+            </div>
+            <div class="text-xs text-gray-500 dark:text-primary-dt/70 truncate">
+                {{ description }}
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Holos/PDFViewport.vue b/src/components/Holos/PDFViewport.vue
new file mode 100644
index 0000000..967ca1b
--- /dev/null
+++ b/src/components/Holos/PDFViewport.vue
@@ -0,0 +1,261 @@
+<script setup>
+import { ref, computed, nextTick } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    pages: {
+        type: Array,
+        default: () => [{ id: 1, elements: [] }]
+    },
+    selectedElementId: String,
+    isExporting: Boolean
+});
+
+/** Eventos */
+const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change']);
+
+/** Referencias */
+const viewportRef = ref(null);
+const currentPage = ref(1);
+
+/** Constantes de diseño */
+const PAGE_WIDTH = 794; // A4 width in pixels (210mm @ 96dpi * 3.78)
+const PAGE_HEIGHT = 1123; // A4 height in pixels (297mm @ 96dpi * 3.78)
+const PAGE_MARGIN = 40;
+const ZOOM_LEVEL = 0.8; // Factor de escala para visualización
+
+/** Propiedades computadas */
+const scaledPageWidth = computed(() => PAGE_WIDTH * ZOOM_LEVEL);
+const scaledPageHeight = computed(() => PAGE_HEIGHT * ZOOM_LEVEL);
+const totalPages = computed(() => props.pages.length);
+
+/** Métodos */
+const handleDrop = (event, pageIndex) => {
+    event.preventDefault();
+    
+    const pageElement = event.currentTarget;
+    const rect = pageElement.getBoundingClientRect();
+    
+    // Calcular posición relativa a la página específica
+    const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
+    const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
+    
+    emit('drop', {
+        originalEvent: event,
+        pageIndex,
+        x: Math.max(PAGE_MARGIN, Math.min(PAGE_WIDTH - PAGE_MARGIN, relativeX)),
+        y: Math.max(PAGE_MARGIN, Math.min(PAGE_HEIGHT - PAGE_MARGIN, relativeY))
+    });
+};
+
+const handleDragOver = (event) => {
+    event.preventDefault();
+    emit('dragover', event);
+};
+
+const handleClick = (event, pageIndex) => {
+    if (event.target.classList.contains('pdf-page')) {
+        emit('click', { originalEvent: event, pageIndex });
+    }
+};
+
+const addPage = () => {
+    emit('add-page');
+    nextTick(() => {
+        scrollToPage(totalPages.value);
+    });
+};
+
+const deletePage = (pageIndex) => {
+    if (totalPages.value > 1) {
+        emit('delete-page', pageIndex);
+    }
+};
+
+const scrollToPage = (pageNumber) => {
+    if (viewportRef.value) {
+        const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
+        if (pageElement) {
+            pageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+};
+
+const setCurrentPage = (pageNumber) => {
+    currentPage.value = pageNumber;
+    emit('page-change', pageNumber);
+};
+
+/** Métodos expuestos */
+defineExpose({
+    scrollToPage,
+    setCurrentPage,
+    PAGE_WIDTH,
+    PAGE_HEIGHT,
+    ZOOM_LEVEL
+});
+</script>
+
+<template>
+    <div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
+        <!-- Toolbar de páginas -->
+        <div class="flex items-center justify-between px-4 py-2 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
+            <div class="flex items-center gap-3">
+                <span class="text-sm text-gray-600 dark:text-primary-dt">
+                    Página {{ currentPage }} de {{ totalPages }}
+                </span>
+                
+                <div class="flex items-center gap-1">
+                    <button
+                        @click="setCurrentPage(Math.max(1, currentPage - 1))"
+                        :disabled="currentPage <= 1"
+                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
+                    >
+                        <GoogleIcon name="keyboard_arrow_left" class="text-lg" />
+                    </button>
+                    
+                    <button
+                        @click="setCurrentPage(Math.min(totalPages, currentPage + 1))"
+                        :disabled="currentPage >= totalPages"
+                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
+                    >
+                        <GoogleIcon name="keyboard_arrow_right" class="text-lg" />
+                    </button>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-2">
+                
+                <button
+                    @click="addPage"
+                    :disabled="isExporting"
+                    class="flex items-center gap-1 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50"
+                >
+                    <GoogleIcon name="add" class="text-sm" />
+                    Nueva Página
+                </button>
+            </div>
+        </div>
+
+        <!-- Viewport de páginas -->
+        <div
+            ref="viewportRef"
+            class="flex-1 overflow-auto p-8"
+            style="background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
+        >
+            <div class="flex flex-col items-center gap-8">
+                <!-- Páginas -->
+                <div
+                    v-for="(page, pageIndex) in pages"
+                    :key="page.id"
+                    :data-page="pageIndex + 1"
+                    class="relative"
+                    @mouseenter="setCurrentPage(pageIndex + 1)"
+                >
+                    <!-- Número de página -->
+                    <div class="absolute -top-6 left-0 flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
+                        <span>Página {{ pageIndex + 1 }}</span>
+                        
+                        <button
+                            v-if="totalPages > 1"
+                            @click="deletePage(pageIndex)"
+                            :disabled="isExporting"
+                            class="text-red-500 hover:text-red-700 disabled:opacity-50"
+                            title="Eliminar página"
+                        >
+                            <GoogleIcon name="delete" class="text-sm" />
+                        </button>
+                    </div>
+                    
+                    <!-- Página PDF -->
+                    <div
+                        class="pdf-page relative bg-white rounded-lg shadow-lg border border-gray-300 dark:border-primary/20"
+                        :class="{
+                            'ring-2 ring-blue-500': currentPage === pageIndex + 1,
+                            'opacity-50': isExporting
+                        }"
+                        :style="{
+                            width: `${scaledPageWidth}px`,
+                            height: `${scaledPageHeight}px`,
+                            transform: `scale(${ZOOM_LEVEL})`,
+                            transformOrigin: 'top left'
+                        }"
+                        @drop="(e) => handleDrop(e, pageIndex)"
+                        @dragover="handleDragOver"
+                        @click="(e) => handleClick(e, pageIndex)"
+                    >
+                        <!-- Márgenes visuales -->
+                        <div
+                            class="absolute border border-dashed border-gray-300 dark:border-primary/30 pointer-events-none"
+                            :style="{
+                                top: `${PAGE_MARGIN}px`,
+                                left: `${PAGE_MARGIN}px`,
+                                width: `${PAGE_WIDTH - (PAGE_MARGIN * 2)}px`,
+                                height: `${PAGE_HEIGHT - (PAGE_MARGIN * 2)}px`
+                            }"
+                        ></div>
+                        
+                        <!-- Elementos de la página -->
+                        <slot
+                            name="elements"
+                            :page="page"
+                            :pageIndex="pageIndex"
+                            :pageWidth="PAGE_WIDTH"
+                            :pageHeight="PAGE_HEIGHT"
+                        />
+                        
+                        <!-- Indicador de página vacía -->
+                        <div
+                            v-if="page.elements.length === 0"
+                            class="absolute inset-0 flex items-center justify-center pointer-events-none"
+                        >
+                            <div class="text-center text-gray-400 dark:text-primary-dt/50">
+                                <GoogleIcon name="description" class="text-4xl mb-2" />
+                                <p class="text-sm">Página {{ pageIndex + 1 }}</p>
+                                <p class="text-xs">Arrastra elementos aquí</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Regla inferior (tamaño de referencia) -->
+                    <div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/50 text-center">
+                        210 × 297 mm (A4)
+                    </div>
+                </div>
+                
+                <!-- Botón para agregar página al final -->
+                <button
+                    @click="addPage"
+                    :disabled="isExporting"
+                    class="flex flex-col items-center justify-center w-40 h-20 border-2 border-dashed border-gray-300 dark:border-primary/30 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors disabled:opacity-50"
+                >
+                    <GoogleIcon name="add" class="text-2xl text-gray-400 dark:text-primary-dt/50" />
+                    <span class="text-xs text-gray-500 dark:text-primary-dt/70 mt-1">Nueva Página</span>
+                </button>
+            </div>
+        </div>
+
+        <!-- Overlay durante exportación -->
+        <div
+            v-if="isExporting"
+            class="absolute inset-0 bg-white/80 dark:bg-primary-d/80 flex items-center justify-center z-50"
+        >
+            <div class="text-center">
+                <GoogleIcon name="picture_as_pdf" class="text-4xl text-red-600 dark:text-red-400 animate-pulse mb-2" />
+                <p class="text-sm font-medium text-gray-900 dark:text-primary-dt">Generando PDF...</p>
+                <p class="text-xs text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.pdf-page {
+    transition: all 0.2s ease;
+}
+
+.pdf-page:hover {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index b26aa69..499d2ee 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -117,16 +117,26 @@ onMounted(() => {
                 <Link
                     v-if="hasPermission('roles.index')"
                     icon="license"
-                    name="roles.title" 
+                    name="Roles" 
                     to="admin.roles.index"
                 />
                 <Link
                     v-if="hasPermission('activities.index')"
                     icon="event"
-                    name="history.title" 
+                    name="Historial de Acciones" 
                     to="admin.activities.index"
                 />
             </Section>
+            <Section
+                name="Documentos"
+            >
+                <Link
+                    v-if="hasPermission('activities.index')"
+                    icon="event"
+                    name="Maquetador de Documentos" 
+                    to="admin.maquetador.index"
+                />
+            </Section>
         </template>
         <!-- Contenido -->
         <RouterView />
diff --git a/src/pages/Maquetador/Index.vue b/src/pages/Maquetador/Index.vue
new file mode 100644
index 0000000..a9f2790
--- /dev/null
+++ b/src/pages/Maquetador/Index.vue
@@ -0,0 +1,663 @@
+<script setup>
+import { ref, nextTick, onMounted, computed } from 'vue';
+import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Draggable from '@Holos/Draggable.vue';
+import CanvasElement from '@Holos/Canvas.vue';
+import PDFViewport from '@Holos/PDFViewport.vue';
+
+/** Estado reactivo */
+const pages = ref([{ id: 1, elements: [] }]);
+const selectedElementId = ref(null);
+const elementCounter = ref(0);
+const documentTitle = ref('Documento sin título');
+const isExporting = ref(false);
+const currentPage = ref(1);
+
+/** Referencias */
+const viewportRef = ref(null);
+
+/** Tipos de elementos disponibles */
+const availableElements = [
+    {
+        type: 'text',
+        icon: 'text_fields',
+        title: 'Texto',
+        description: 'Texto enriquecido con formato'
+    },
+    {
+        type: 'image',
+        icon: 'image',
+        title: 'Imagen',
+        description: 'Subir y editar imágenes'
+    },
+    {
+        type: 'table',
+        icon: 'table_chart',
+        title: 'Tabla',
+        description: 'Tabla con filas y columnas'
+    }
+];
+
+/** Propiedades computadas */
+const allElements = computed(() => {
+    return pages.value.flatMap(page => page.elements);
+});
+
+const totalElements = computed(() => {
+    return allElements.value.length;
+});
+
+/** Métodos del canvas */
+const handleDrop = (dropData) => {
+    try {
+        const data = JSON.parse(dropData.originalEvent.dataTransfer.getData('text/plain'));
+        
+        const newElement = {
+            id: `element-${++elementCounter.value}`,
+            type: data.type,
+            pageIndex: dropData.pageIndex,
+            x: dropData.x,
+            y: dropData.y,
+            width: data.type === 'table' ? 300 : data.type === 'image' ? 200 : 200,
+            height: data.type === 'table' ? 120 : data.type === 'image' ? 150 : 40,
+            content: getDefaultContent(data.type),
+            fileName: getDefaultFileName(data.type),
+            created_at: new Date().toISOString()
+        };
+        
+        pages.value[dropData.pageIndex].elements.push(newElement);
+        selectedElementId.value = newElement.id;
+    } catch (error) {
+        console.error('Error al procesar elemento arrastrado:', error);
+    }
+};
+
+const getDefaultContent = (type) => {
+    switch(type) {
+        case 'text':
+            return 'Nuevo texto';
+        case 'table':
+            return {
+                rows: 3,
+                cols: 3,
+                data: [
+                    ['Encabezado 1', 'Encabezado 2', 'Encabezado 3'],
+                    ['Fila 1, Col 1', 'Fila 1, Col 2', 'Fila 1, Col 3'],
+                    ['Fila 2, Col 1', 'Fila 2, Col 2', 'Fila 2, Col 3']
+                ]
+            };
+        case 'image':
+            return null;
+        default:
+            return null;
+    }
+};
+
+const getDefaultFileName = (type) => {
+    switch(type) {
+        case 'table':
+            return 'tabla.csv';
+        case 'image':
+            return null;
+        default:
+            return null;
+    }
+};
+
+const handleDragOver = (event) => {
+    event.preventDefault();
+};
+
+const handleCanvasClick = (clickData) => {
+    selectedElementId.value = null;
+};
+
+const selectElement = (elementId) => {
+    selectedElementId.value = elementId;
+};
+
+const deleteElement = (elementId) => {
+    const index = allElements.value.findIndex(el => el.id === elementId);
+    if (index !== -1) {
+        const pageIndex = Math.floor(index / 3); // Suponiendo 3 elementos por página
+        pages.value[pageIndex].elements.splice(index % 3, 1);
+        if (selectedElementId.value === elementId) {
+            selectedElementId.value = null;
+        }
+    }
+};
+
+const updateElement = (update) => {
+    const element = allElements.value.find(el => el.id === update.id);
+    if (element) {
+        Object.assign(element, update);
+    }
+};
+
+const moveElement = (moveData) => {
+    const element = allElements.value.find(el => el.id === moveData.id);
+    if (element) {
+        element.x = moveData.x;
+        element.y = moveData.y;
+    }
+};
+
+/** Paginación */
+const addPage = () => {
+    const newPageId = Math.max(...pages.value.map(p => p.id)) + 1;
+    pages.value.push({
+        id: newPageId,
+        elements: []
+    });
+};
+
+const deletePage = (pageIndex) => {
+    if (pages.value.length > 1) {
+        // Mover elementos de la página eliminada a la página anterior
+        const elementsToMove = pages.value[pageIndex].elements;
+        if (pageIndex > 0 && elementsToMove.length > 0) {
+            elementsToMove.forEach(element => {
+                element.pageIndex = pageIndex - 1;
+                pages.value[pageIndex - 1].elements.push(element);
+            });
+        }
+        
+        pages.value.splice(pageIndex, 1);
+        
+        // Actualizar índices de página de elementos restantes
+        pages.value.forEach((page, index) => {
+            page.elements.forEach(element => {
+                element.pageIndex = index;
+            });
+        });
+        
+        // Ajustar página actual si es necesario
+        if (currentPage.value > pages.value.length) {
+            currentPage.value = pages.value.length;
+        }
+    }
+};
+
+/** Métodos de acciones rápidas */
+const addQuickElement = (type) => {
+    const targetPageIndex = currentPage.value - 1;
+    const existingElements = pages.value[targetPageIndex].elements.length;
+    
+    const newElement = {
+        id: `element-${++elementCounter.value}`,
+        type: type,
+        pageIndex: targetPageIndex,
+        x: 80 + (existingElements * 20),
+        y: 80 + (existingElements * 20),
+        width: type === 'table' ? 300 : type === 'image' ? 200 : 200,
+        height: type === 'table' ? 120 : type === 'image' ? 150 : 40,
+        content: getDefaultContent(type),
+        fileName: getDefaultFileName(type),
+        created_at: new Date().toISOString()
+    };
+    
+    pages.value[targetPageIndex].elements.push(newElement);
+    selectedElementId.value = newElement.id;
+};
+
+const exportPDF = async () => {
+    if (totalElements.value === 0) {
+        window.Notify.warning('No hay elementos para exportar');
+        return;
+    }
+
+    try {
+        isExporting.value = true;
+        window.Notify.info('Generando PDF...');
+
+        // Crear un nuevo documento PDF
+        const pdfDoc = await PDFDocument.create();
+        let currentPage = pdfDoc.addPage([595.28, 841.89]); // A4 size in points
+        let currentPageHeight = 841.89;
+        let yOffset = 50; // Margen superior
+
+        // Obtener fuentes
+        const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
+        const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
+
+        // Ordenar elementos por posición (de arriba hacia abajo, de izquierda a derecha)
+        const sortedElements = [...allElements.value].sort((a, b) => {
+            if (Math.abs(a.y - b.y) < 20) {
+                return a.x - b.x; // Si están en la misma línea, ordenar por X
+            }
+            return a.y - b.y; // Ordenar por Y
+        });
+
+        // Procesar elementos
+        for (const element of sortedElements) {
+            // Calcular posición en el PDF
+            const x = Math.max(50, Math.min(500, (element.x * 0.75) + 50)); // Convertir y limitar X
+            let y = currentPageHeight - yOffset - (element.y * 0.75); // Convertir Y
+
+            // Verificar si necesitamos una nueva página
+            const elementHeight = getElementHeight(element);
+            if (y - elementHeight < 50) {
+                currentPage = pdfDoc.addPage([595.28, 841.89]);
+                currentPageHeight = 841.89;
+                yOffset = 50;
+                y = currentPageHeight - yOffset;
+            }
+
+            switch (element.type) {
+                case 'text':
+                    if (element.content) {
+                        // Dividir texto largo en líneas
+                        const words = element.content.split(' ');
+                        const lines = [];
+                        let currentLine = '';
+                        const maxWidth = Math.min(400, (element.width || 200) * 0.75);
+
+                        for (const word of words) {
+                            const testLine = currentLine + (currentLine ? ' ' : '') + word;
+                            const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
+                            
+                            if (testWidth <= maxWidth) {
+                                currentLine = testLine;
+                            } else {
+                                if (currentLine) lines.push(currentLine);
+                                currentLine = word;
+                            }
+                        }
+                        if (currentLine) lines.push(currentLine);
+
+                        // Dibujar cada línea
+                        lines.forEach((line, index) => {
+                            currentPage.drawText(line, {
+                                x: x,
+                                y: y - (index * 15),
+                                size: 12,
+                                font: helveticaFont,
+                                color: rgb(0, 0, 0),
+                            });
+                        });
+
+                        yOffset += lines.length * 15 + 10;
+                    }
+                    break;
+
+                case 'code':
+                    if (element.content) {
+                        // Dibujar fondo para el código
+                        const codeLines = element.content.split('\n');
+                        const codeWidth = Math.min(450, (element.width || 300) * 0.75);
+                        const codeHeight = (codeLines.length * 12) + 20;
+
+                        currentPage.drawRectangle({
+                            x: x - 10,
+                            y: y - codeHeight,
+                            width: codeWidth,
+                            height: codeHeight,
+                            color: rgb(0.95, 0.95, 0.95),
+                        });
+
+                        // Dibujar código
+                        codeLines.forEach((line, index) => {
+                            // Truncar líneas muy largas
+                            const maxChars = Math.floor(codeWidth / 6);
+                            const displayLine = line.length > maxChars ? 
+                                line.substring(0, maxChars - 3) + '...' : line;
+
+                            currentPage.drawText(displayLine, {
+                                x: x - 5,
+                                y: y - 15 - (index * 12),
+                                size: 9,
+                                font: courierFont,
+                                color: rgb(0, 0, 0),
+                            });
+                        });
+
+                        yOffset += codeHeight + 20;
+                    }
+                    break;
+
+                case 'image':
+                    if (element.content && element.content.startsWith('data:image')) {
+                        try {
+                            // Convertir base64 a bytes
+                            const base64Data = element.content.split(',')[1];
+                            const imageBytes = Uint8Array.from(
+                                atob(base64Data), 
+                                c => c.charCodeAt(0)
+                            );
+                            
+                            let image;
+                            if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
+                                image = await pdfDoc.embedJpg(imageBytes);
+                            } else if (element.content.includes('image/png')) {
+                                image = await pdfDoc.embedPng(imageBytes);
+                            }
+
+                            if (image) {
+                                // Calcular dimensiones manteniendo proporción
+                                const maxWidth = Math.min(400, (element.width || 200) * 0.75);
+                                const maxHeight = Math.min(300, (element.height || 150) * 0.75);
+                                
+                                const imageAspectRatio = image.width / image.height;
+                                let displayWidth = maxWidth;
+                                let displayHeight = maxWidth / imageAspectRatio;
+                                
+                                if (displayHeight > maxHeight) {
+                                    displayHeight = maxHeight;
+                                    displayWidth = maxHeight * imageAspectRatio;
+                                }
+
+                                currentPage.drawImage(image, {
+                                    x: x,
+                                    y: y - displayHeight,
+                                    width: displayWidth,
+                                    height: displayHeight,
+                                });
+
+                                yOffset += displayHeight + 20;
+                            }
+                        } catch (imageError) {
+                            console.warn('Error al procesar imagen:', imageError);
+                            // Dibujar placeholder para imagen
+                            currentPage.drawRectangle({
+                                x: x,
+                                y: y - 60,
+                                width: 100,
+                                height: 60,
+                                borderColor: rgb(0.7, 0.7, 0.7),
+                                borderWidth: 1,
+                            });
+
+                            currentPage.drawText('[Imagen no disponible]', {
+                                x: x + 5,
+                                y: y - 35,
+                                size: 10,
+                                font: helveticaFont,
+                                color: rgb(0.7, 0.7, 0.7),
+                            });
+
+                            yOffset += 80;
+                        }
+                    } else {
+                        // Placeholder para imagen vacía
+                        currentPage.drawRectangle({
+                            x: x,
+                            y: y - 60,
+                            width: 100,
+                            height: 60,
+                            borderColor: rgb(0.7, 0.7, 0.7),
+                            borderWidth: 1,
+                            borderDashArray: [3, 3],
+                        });
+
+                        currentPage.drawText('[Imagen]', {
+                            x: x + 25,
+                            y: y - 35,
+                            size: 10,
+                            font: helveticaFont,
+                            color: rgb(0.7, 0.7, 0.7),
+                        });
+
+                        yOffset += 80;
+                    }
+                    break;
+
+                case 'table':
+                    if (element.content && element.content.data) {
+                        const tableData = element.content.data;
+                        const cellWidth = 80;
+                        const cellHeight = 20;
+                        const tableWidth = tableData[0].length * cellWidth;
+                        const tableHeight = tableData.length * cellHeight;
+
+                        // Dibujar bordes de la tabla
+                        currentPage.drawRectangle({
+                            x: x,
+                            y: y - tableHeight,
+                            width: tableWidth,
+                            height: tableHeight,
+                            borderColor: rgb(0.3, 0.3, 0.3),
+                            borderWidth: 1,
+                        });
+
+                        // Dibujar contenido de las celdas
+                        tableData.forEach((row, rowIndex) => {
+                            row.forEach((cell, colIndex) => {
+                                const cellX = x + (colIndex * cellWidth);
+                                const cellY = y - (rowIndex * cellHeight) - 15;
+
+                                // Dibujar borde de celda
+                                currentPage.drawRectangle({
+                                    x: cellX,
+                                    y: y - ((rowIndex + 1) * cellHeight),
+                                    width: cellWidth,
+                                    height: cellHeight,
+                                    borderColor: rgb(0.7, 0.7, 0.7),
+                                    borderWidth: 0.5,
+                                });
+
+                                // Dibujar texto de la celda (truncar si es muy largo)
+                                const maxChars = 10;
+                                const displayText = cell.length > maxChars ? 
+                                    cell.substring(0, maxChars - 3) + '...' : cell;
+
+                                currentPage.drawText(displayText, {
+                                    x: cellX + 5,
+                                    y: cellY,
+                                    size: 8,
+                                    font: helveticaFont,
+                                    color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0), // Encabezados en azul
+                                });
+                            });
+                        });
+
+                        yOffset += tableHeight + 20;
+                    }
+                    break;
+            }
+        }
+
+        // Generar PDF
+        const pdfBytes = await pdfDoc.save();
+
+        // Descargar
+        const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${documentTitle.value.replace(/\s+/g, '_')}.pdf`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+
+        window.Notify.success('PDF generado correctamente');
+        
+    } catch (error) {
+        console.error('Error al generar PDF:', error);
+        window.Notify.error('Error al generar el PDF');
+    } finally {
+        isExporting.value = false;
+    }
+};
+
+// Función auxiliar para calcular la altura aproximada de un elemento
+const getElementHeight = (element) => {
+    switch (element.type) {
+        case 'text':
+            if (!element.content) return 20;
+            const lines = Math.ceil(element.content.length / 50);
+            return lines * 15 + 10;
+        case 'table':
+            if (!element.content || !element.content.data) return 60;
+            const tableRows = element.content.data.length;
+            return (tableRows * 20) + 20;
+        case 'image':
+            return Math.min(300, (element.height || 150) * 0.75) + 30;
+        default:
+            return 40;
+    }
+};
+
+const clearCanvas = () => {
+    if (confirm('¿Estás seguro de que quieres limpiar el canvas? Se perderán todos los elementos.')) {
+        pages.value = [{ id: 1, elements: [] }];
+        selectedElementId.value = null;
+        elementCounter.value = 0;
+    }
+};
+
+/** Atajos de teclado */
+const handleKeydown = (event) => {
+    if (event.key === 'Delete' && selectedElementId.value) {
+        deleteElement(selectedElementId.value);
+    }
+    
+    if (event.key === 'Escape') {
+        selectedElementId.value = null;
+    }
+};
+
+/** Ciclo de vida */
+onMounted(() => {
+    document.addEventListener('keydown', handleKeydown);
+});
+</script>
+
+<template>
+    <div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
+        <!-- Panel Izquierdo - Elementos -->
+        <div class="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col">
+            <!-- Header del panel -->
+            <div class="p-4 border-b border-gray-200 dark:border-primary/20">
+                <div class="flex items-center gap-2 mb-4">
+                    <GoogleIcon name="text_snippet" class="text-blue-600 dark:text-blue-400 text-xl" />
+                    <h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
+                        Diseñador de Documentos
+                    </h2>
+                </div>
+                
+                <!-- Título del documento -->
+                <input
+                    v-model="documentTitle"
+                    class="w-full px-2 py-1 text-xs border border-gray-200 rounded mb-3 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
+                    placeholder="Título del documento"
+                />
+                
+                <!-- Botón de exportación PDF -->
+                <button
+                    @click="exportPDF"
+                    :disabled="isExporting"
+                    :class="[
+                        'w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors',
+                        isExporting
+                            ? 'bg-gray-400 text-white cursor-not-allowed'
+                            : 'bg-red-600 hover:bg-red-700 text-white'
+                    ]"
+                >
+                    <GoogleIcon :name="isExporting ? 'hourglass_empty' : 'picture_as_pdf'" class="text-sm" />
+                    {{ isExporting ? 'Generando PDF...' : 'Exportar PDF' }}
+                </button>
+            </div>
+
+            <!-- Sección Elementos -->
+            <div class="p-4 flex-1 overflow-y-auto">
+                <h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mb-3">
+                    Elementos
+                </h3>
+                <p class="text-xs text-gray-400 dark:text-primary-dt/70 mb-4">
+                    Arrastra elementos al canvas para crear tu documento
+                </p>
+                
+                <div class="space-y-3">
+                    <Draggable
+                        v-for="element in availableElements"
+                        :key="element.type"
+                        :type="element.type"
+                        :icon="element.icon"
+                        :title="element.title"
+                        :description="element.description"
+                    />
+                </div>
+
+                <!-- Agregar rápido -->
+                <h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mt-6 mb-3">
+                    Agregar rápido
+                </h3>
+                
+                <div class="space-y-2">
+                    <button
+                        v-for="element in availableElements"
+                        :key="`quick-${element.type}`"
+                        @click="addQuickElement(element.type)"
+                        :disabled="isExporting"
+                        class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-primary-dt hover:bg-gray-100 dark:hover:bg-primary/10 rounded transition-colors disabled:opacity-50"
+                    >
+                        <GoogleIcon name="add" class="text-gray-400 dark:text-primary-dt/70 text-sm" />
+                        {{ element.title }}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Área Principal con Viewport -->
+        <div class="flex-1 flex flex-col">
+            <!-- Toolbar superior -->
+            <div class="h-14 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20 flex items-center justify-between px-4">
+                <div class="flex items-center gap-4">
+                    <!-- Herramientas de formato (simuladas) -->
+                    <div class="flex items-center gap-1 text-sm">
+                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
+                            <GoogleIcon name="format_bold" class="text-gray-600 dark:text-primary-dt" />
+                        </button>
+                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
+                            <GoogleIcon name="format_italic" class="text-gray-600 dark:text-primary-dt" />
+                        </button>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-4">
+                    <span class="text-xs text-gray-500 dark:text-primary-dt/70">
+                        {{ totalElements }} elemento{{ totalElements !== 1 ? 's' : '' }} • {{ pages.length }} página{{ pages.length !== 1 ? 's' : '' }}
+                    </span>
+                    
+                    <button
+                        v-if="totalElements > 0"
+                        @click="clearCanvas"
+                        :disabled="isExporting"
+                        class="flex items-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20 rounded transition-colors disabled:opacity-50"
+                    >
+                        <GoogleIcon name="delete" class="text-sm" />
+                        Limpiar Todo
+                    </button>
+                </div>
+            </div>
+
+            <!-- PDFViewport -->
+            <PDFViewport
+                ref="viewportRef"
+                :pages="pages"
+                :selected-element-id="selectedElementId"
+                :is-exporting="isExporting"
+                @drop="handleDrop"
+                @click="handleCanvasClick"
+                @add-page="addPage"
+                @delete-page="deletePage"
+                @page-change="(page) => currentPage = page"
+            >
+                <template #elements="{ page, pageIndex }">
+                    <CanvasElement
+                        v-for="element in page.elements"
+                        :key="element.id"
+                        :element="element"
+                        :is-selected="selectedElementId === element.id && !isExporting"
+                        @select="selectElement"
+                        @delete="deleteElement"
+                        @update="updateElement"
+                        @move="moveElement"
+                    />
+                </template>
+            </PDFViewport>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index 56c55de..cce72fe 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -356,7 +356,23 @@ const router = createRouter({
                             component: () => import('@Pages/Admin/Activities/Index.vue')
                         }
                     ]
-                }
+                },
+                {
+                    path: 'documentation',
+                    name: 'admin.documentation',
+                    meta: {
+                        title: 'Maquetador de Documentos',
+                        icon: 'documents',
+                    },
+                    redirect: '/admin/documentation',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.maquetador.index',
+                            component: () => import('@Pages/Maquetador/Index.vue'),
+                        },
+                    ]
+                },
             ]
         },
         {
-- 
2.45.2


From 1adc188eb1ede07b92584a330ba541c9903faa3e Mon Sep 17 00:00:00 2001
From: "jose.lopez" <jose.lopez@golsystems.com.mx>
Date: Mon, 22 Sep 2025 12:02:29 -0600
Subject: [PATCH 5/8] redireccion

---
 src/layouts/AdminLayout.vue       | 13 ++++++++++++-
 src/layouts/AppLayout.vue         | 11 +++++++++++
 src/layouts/CoordinatorLayout.vue | 11 +++++++++++
 src/pages/Auth/Login.vue          | 30 +++++++++++++++++++++++++++++-
 4 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index b26aa69..628ef7e 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -1,7 +1,11 @@
 <script setup>
 import { onMounted } from 'vue';
-import useLoader    from '@Stores/Loader';
 import { hasPermission } from '@Plugins/RolePermission';
+import { hasToken } from '@Services/Api';
+import { reloadApp } from '@Services/Page';
+import { useRouter } from 'vue-router';
+
+import useLoader    from '@Stores/Loader';
 
 import Layout  from '@Holos/Layout/App.vue';
 import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
@@ -9,6 +13,7 @@ import Section from '@Holos/Skeleton/Sidebar/Section.vue';
 
 /** Definidores */
 const loader = useLoader()
+const router = useRouter();
 
 /** Propiedades */
 defineProps({
@@ -18,6 +23,12 @@ defineProps({
 /** Ciclos */
 onMounted(() => {
     loader.boot()
+
+    if(!hasToken()) {
+        return router.push({ name: 'auth.index' })
+    } else {
+        reloadApp();
+    }
 })
 
 </script>
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 01c79b2..6ddf680 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -1,5 +1,9 @@
 <script setup>
 import { onMounted } from 'vue';
+import { hasToken } from '@Services/Api';
+import { reloadApp } from '@Services/Page';
+import { useRouter } from 'vue-router';
+
 import useLoader    from '@Stores/Loader';
 
 import Layout  from '@Holos/Layout/App.vue';
@@ -8,6 +12,7 @@ import Section from '@Holos/Skeleton/Sidebar/Section.vue';
 
 /** Definidores */
 const loader = useLoader()
+const router = useRouter();
 
 /** Propiedades */
 defineProps({
@@ -17,6 +22,12 @@ defineProps({
 /** Ciclos */
 onMounted(() => {
     loader.boot()
+
+    if(!hasToken()) {
+        return router.push({ name: 'auth.index' })
+    } else {
+        reloadApp();
+    }
 })
 
 </script>
diff --git a/src/layouts/CoordinatorLayout.vue b/src/layouts/CoordinatorLayout.vue
index 555757d..5248829 100644
--- a/src/layouts/CoordinatorLayout.vue
+++ b/src/layouts/CoordinatorLayout.vue
@@ -1,5 +1,9 @@
 <script setup>
 import { onMounted } from 'vue';
+import { hasToken } from '@Services/Api';
+import { reloadApp } from '@Services/Page';
+import { useRouter } from 'vue-router';
+
 import useLoader    from '@Stores/Loader';
 
 import Layout  from '@Holos/Layout/App.vue';
@@ -8,6 +12,7 @@ import Section from '@Holos/Skeleton/Sidebar/Section.vue';
 
 /** Definidores */
 const loader = useLoader()
+const router = useRouter();
 
 /** Propiedades */
 defineProps({
@@ -17,6 +22,12 @@ defineProps({
 /** Ciclos */
 onMounted(() => {
     loader.boot()
+
+    if(!hasToken()) {
+        return router.push({ name: 'auth.index' })
+    } else {
+        reloadApp();
+    }
 })
 
 </script>
diff --git a/src/pages/Auth/Login.vue b/src/pages/Auth/Login.vue
index 6d162dc..386c644 100644
--- a/src/pages/Auth/Login.vue
+++ b/src/pages/Auth/Login.vue
@@ -30,11 +30,39 @@ const login = () => {
           defineUser(res.user)
           defineCsrfToken(res.csrf)
 
-          location.replace('/')
+          // Redirección basada en roles
+          redirectBasedOnRole(res.userRoles)
         }
     });
 };
 
+const redirectBasedOnRole = (userRoles) => {
+    // Si no tiene roles o el array está vacío, redirigir a "/"
+    if (!userRoles || userRoles.length === 0) {
+        router.push('/')
+        return
+    }
+
+    // Verificar si tiene el rol coordinador
+    const hasCoordinatorRole = userRoles.some(role => role.name === 'coordinador')
+    if (hasCoordinatorRole) {
+        router.push('/coordinator')
+        return
+    }
+
+    // Verificar si tiene rol admin o developer
+    const hasAdminOrDeveloperRole = userRoles.some(role => 
+        role.name === 'admin' || role.name === 'developer'
+    )
+    if (hasAdminOrDeveloperRole) {
+        router.push('/admin')
+        return
+    }
+
+    // Si no cumple ninguna condición, redirigir a "/"
+    router.push('/')
+};
+
 /** Ciclos */
 onMounted(() => {
   if (hasToken()) {
-- 
2.45.2


From 38f46cef8485bea44ff9bbe06401db1953291f15 Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Tue, 23 Sep 2025 11:34:48 -0600
Subject: [PATCH 6/8] ADD: Crear componente Dropdown para el sidebar

---
 src/components/Holos/Button/ButtonRh.vue      |  27 ++++
 .../Holos/Skeleton/Sidebar/Drop.vue           |  78 +++++++++++
 .../Holos/Skeleton/Sidebar/Section.vue        |  22 +--
 src/layouts/AdminLayout.vue                   | 127 +++++++++---------
 src/pages/Academic/Index.vue                  |   9 +-
 src/pages/Additional/Index.vue                |   6 +-
 src/pages/Employees/Index.vue                 |  12 +-
 src/pages/Payroll/Index.vue                   |   6 +-
 src/pages/Security/Index.vue                  |   6 +-
 src/router/Index.js                           |  76 ++---------
 10 files changed, 206 insertions(+), 163 deletions(-)
 create mode 100644 src/components/Holos/Button/ButtonRh.vue
 create mode 100644 src/components/Holos/Skeleton/Sidebar/Drop.vue

diff --git a/src/components/Holos/Button/ButtonRh.vue b/src/components/Holos/Button/ButtonRh.vue
new file mode 100644
index 0000000..fb5879b
--- /dev/null
+++ b/src/components/Holos/Button/ButtonRh.vue
@@ -0,0 +1,27 @@
+<script setup>
+import GoogleIcon from "@Shared/GoogleIcon.vue";
+defineProps({
+  type: {
+    default: "button",
+    type: String,
+  },
+  icon: {
+    default: "add",
+    type: String,
+  },
+  text: {
+    default: "",
+    type: String,
+  }
+});
+</script>
+
+<template>
+  <button
+    :type="type"
+    class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md"
+  >
+  <GoogleIcon :name="icon" />
+  <span>{{ text }}</span>
+  </button>
+</template>
diff --git a/src/components/Holos/Skeleton/Sidebar/Drop.vue b/src/components/Holos/Skeleton/Sidebar/Drop.vue
new file mode 100644
index 0000000..f69bf4f
--- /dev/null
+++ b/src/components/Holos/Skeleton/Sidebar/Drop.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { ref, computed } from "vue";
+import { RouterLink, useRoute } from "vue-router";
+
+import useLeftSidebar from "@Stores/LeftSidebar";
+import GoogleIcon from "@Shared/GoogleIcon.vue";
+
+/** Definidores */
+const leftSidebar = useLeftSidebar();
+const vroute = useRoute();
+
+/** Propiedades */
+const props = defineProps({
+  name: String,
+  icon: String,
+  to: String,
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const isCollapsed = ref(props.collapsed);
+
+const closeSidebar = () => {
+  if (TwScreen.isDevice("phone") || TwScreen.isDevice("tablet")) {
+    leftSidebar.close();
+  }
+};
+
+const isActive = computed(() => props.active || props.to === vroute.name);
+
+const classes = computed(() => {
+  return isActive.value
+    ? "flex items-center px-4 py-2 mx-2 my-1 text-white !bg-blue-600 rounded-lg transition-all duration-200 !border-transparent"
+    : "flex items-center px-4 py-2 mx-2 my-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200";
+});
+</script>
+
+<template>
+  <ul>
+    <li class="hidden md:block">
+      <div class="flex items-center px-2 py-2 rounded">
+        <button
+          class="dropdown-toggle w-full"
+          @click.stop="isCollapsed = !isCollapsed"
+        >
+          <RouterLink
+            :to="$view({ name: props.to })"
+            :class="classes"
+            class="flex items-center justify-between flex-1"
+            @click="closeSidebar"
+          >
+            <div class="flex items-center">
+              <GoogleIcon v-if="icon" :name="icon" class="text-xl mr-2" />
+              <span class="text-sm font-medium">{{ name }}</span>
+            </div>
+
+            <GoogleIcon
+              :name="isCollapsed ? 'expand_more' : 'expand_less'"
+              class="text-gray-400 text-lg"
+            />
+          </RouterLink>
+        </button>
+      </div>
+    </li>
+    <div
+      class="transition-all duration-300 ease-in-out overflow-hidden"
+      :class="{ 'max-h-0': isCollapsed, 'max-h-96': !isCollapsed }"
+    >
+      <slot />
+    </div>
+  </ul>
+</template>
diff --git a/src/components/Holos/Skeleton/Sidebar/Section.vue b/src/components/Holos/Skeleton/Sidebar/Section.vue
index 7a6cc53..304c82a 100644
--- a/src/components/Holos/Skeleton/Sidebar/Section.vue
+++ b/src/components/Holos/Skeleton/Sidebar/Section.vue
@@ -1,19 +1,19 @@
 <script setup>
 /** Propiedades */
 const props = defineProps({
-    name: String
+  name: String,
 });
 </script>
 
 <template>
-    <ul v-if="$slots['default']">
-        <li class="px-5 hidden md:block">
-            <div class="flex flex-row items-center h-8">
-                <div class="text-sm font-light tracking-wide text-gray-400 uppercase">
-                    {{name}}
-                </div>
-            </div>
-        </li>
-        <slot />
-    </ul>
+  <ul v-if="$slots['default']">
+    <li class="px-5 hidden md:block">
+      <div class="flex flex-row items-center h-8 cursor-pointer">
+        <div class="text-sm font-light tracking-wide text-gray-400 uppercase">
+          {{ name }}
+        </div>
+      </div>
+    </li>
+    <slot />
+  </ul>
 </template>
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 499d2ee..ff2c059 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -6,6 +6,7 @@ import { hasPermission } from '@Plugins/RolePermission';
 import Layout  from '@Holos/Layout/App.vue';
 import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
 import Section from '@Holos/Skeleton/Sidebar/Section.vue';
+import DropDown from '@Holos/Skeleton/Sidebar/Drop.vue'
 
 /** Definidores */
 const loader = useLoader()
@@ -30,79 +31,85 @@ onMounted(() => {
         <template #leftSidebar>
             <Section name="Principal">
                 <Link
-                    icon="grid_view"
-                    name="Dashboard" 
-                    to="admin.dashboard.index"
+                icon="grid_view"
+                name="Dashboard" 
+                to="admin.dashboard.index"
                 />
-                <Link
+                <DropDown 
                     icon="people"
                     name="Empleados" 
                     to="admin.employees.index"
-                />
-                <Link
-                    icon="school"
-                    name="Historial Académico" 
-                    to="admin.academic.index"
-                />
-                <Link
-                    icon="security"
-                    name="Seguridad y Salud" 
-                    to="admin.security.index"
-                />
-                <Link
-                    icon="payments"
-                    name="Nómina" 
-                    to="admin.payroll.index"
-                />
-                <Link
-                    icon="info"
-                    name="Información Adicional" 
-                    to="admin.additional.index"
-                />
+                    :collapsed="true"
+                >
+                        <Link
+                            icon="school"
+                            name="Historial Académico" 
+                            to="admin.academic.index"
+                        />
+                        <Link
+                            icon="security"
+                            name="Seguridad y Salud" 
+                            to="admin.security.index"
+                        />
+                        <Link
+                            icon="payments"
+                            name="Nómina" 
+                            to="admin.payroll.index"
+                        />
+                        <Link
+                            icon="info"
+                            name="Información Adicional" 
+                            to="admin.additional.index"
+                        />
+                </DropDown>
             </Section>
             <Section name="Capacitaciones">
-                <Link
-                    icon="grid_view"
-                    name="Solicitud de Cursos" 
-                    to="admin.courses.request"
-                />
-                <Link
+                <DropDown
                     icon="grid_view"
                     name="Cursos" 
                     to="admin.courses.index"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Asignación de Cursos" 
-                    to="admin.courses.assignamment"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Calendario de Cursos" 
-                    to="admin.courses.calendar"
-                />
+                    :collapsed="true"
+                >
+                    <Link
+                        icon="grid_view"
+                        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" 
+                        to="admin.courses.calendar"
+                    />
+                </DropDown>
             </Section>
             <Section name="Eventos">
-                <Link
+                <DropDown
                     icon="grid_view"
-                    name="Dashboard" 
+                    name="Eventos" 
                     to="admin.events.index"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Asignación de presupuesto" 
-                    to="admin.events.assignamment"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Justificación de gastos" 
-                    to="admin.events.justification"
-                />
-                <Link
-                    icon="grid_view"
-                    name="Reportes de gastos" 
-                    to="admin.events.reports"
-                />
+                    :collapsed="true"
+                >
+                    <Link
+                        icon="grid_view"
+                        name="Asignación de presupuesto" 
+                        to="admin.events.assignamment"
+                    />
+                    <Link
+                        icon="grid_view"
+                        name="Justificación de gastos" 
+                        to="admin.events.justification"
+                    />
+                    <Link
+                        icon="grid_view"
+                        name="Reportes de gastos" 
+                        to="admin.events.reports"
+                    />
+                </DropDown>
             </Section>
             <Section
                 v-if="hasPermission('users.index')"
diff --git a/src/pages/Academic/Index.vue b/src/pages/Academic/Index.vue
index 9cf0bff..3f4a3a9 100644
--- a/src/pages/Academic/Index.vue
+++ b/src/pages/Academic/Index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,13 +13,7 @@ import GoogleIcon from '@Shared/GoogleIcon.vue';
       </div>
 
       <div>
-        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
-          <GoogleIcon 
-            class="text-white text-xl"
-            name="add"
-          />
-          Agregar Registro
-        </button>
+        <Adding text="Agregar Registro" />
       </div>
     </div>
 
diff --git a/src/pages/Additional/Index.vue b/src/pages/Additional/Index.vue
index 6e576ad..4eb8299 100644
--- a/src/pages/Additional/Index.vue
+++ b/src/pages/Additional/Index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,10 +13,7 @@ import GoogleIcon from '@Shared/GoogleIcon.vue';
       </div>
 
       <div>
-        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
-          <GoogleIcon class="text-white text-xl" name="add" />
-          Nueva Evaluación
-        </button>
+        <Adding text="Nueva Evaluación" />
       </div>
     </div>
 
diff --git a/src/pages/Employees/Index.vue b/src/pages/Employees/Index.vue
index afa5afe..27327bb 100644
--- a/src/pages/Employees/Index.vue
+++ b/src/pages/Employees/Index.vue
@@ -1,6 +1,7 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
 import Searcher from '@Holos/Searcher.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,15 +13,8 @@ import Searcher from '@Holos/Searcher.vue';
         <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información general de empleados</p>
       </div>
 
-      <div class="flex items-center">
-        <button
-          class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-md"
-        >
-          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
-          </svg>
-          Nuevo Empleado
-        </button>
+      <div>
+        <Adding text="Nuevo Empleado" />
       </div>
     </div>
 
diff --git a/src/pages/Payroll/Index.vue b/src/pages/Payroll/Index.vue
index 03acdad..bbbc2b0 100644
--- a/src/pages/Payroll/Index.vue
+++ b/src/pages/Payroll/Index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,10 +13,7 @@ import GoogleIcon from '@Shared/GoogleIcon.vue';
       </div>
 
       <div>
-        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
-          <GoogleIcon class="text-white text-xl" name="add" />
-          Procesar Nómina
-        </button>
+        <Adding text="Procesar Nómina" />
       </div>
     </div>
 
diff --git a/src/pages/Security/Index.vue b/src/pages/Security/Index.vue
index f0ea0e7..b66675b 100644
--- a/src/pages/Security/Index.vue
+++ b/src/pages/Security/Index.vue
@@ -1,5 +1,6 @@
 <script setup>
 import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
 </script>
 
 <template>
@@ -12,10 +13,7 @@ import GoogleIcon from '@Shared/GoogleIcon.vue';
       </div>
 
       <div>
-        <button class="inline-flex items-center gap-3 bg-[#2563eb] hover:bg-[#1e40af] text-white px-4 py-2 rounded-full shadow-md">
-          <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M12 4v16M20 12H4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-          Actualizar Información
-        </button>
+        <Adding text="Agregar Información" />
       </div>
     </div>
 
diff --git a/src/router/Index.js b/src/router/Index.js
index cce72fe..69ccfec 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -95,24 +95,16 @@ const router = createRouter({
                 title: 'Inicio',
                 icon: 'home',
             },
-            redirect: '/admin/dashboard',
+            redirect: '/admin/employees',
             children: [
                 {
                     path: 'dashboard',
-                    name: 'admin.dashboard',
-                    component: () => import('@Pages/Dashboard/Admin.vue'),
+                    name: 'admin.dashboard.index',
                     meta: {
                         title: 'Dashboard',
                         icon: 'grid_view',
                     },
-                    redirect: '/admin/dashboard',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.dashboard.index',
-                            component: () => import('@Pages/Dashboard/Admin.vue'),
-                        }
-                    ]
+                    component: () => import('@Pages/Dashboard/Admin.vue'),
                 },
                 {
                     path: 'employees',
@@ -127,71 +119,27 @@ const router = createRouter({
                             path: '',
                             name: 'admin.employees.index',
                             component: () => import('@Pages/Employees/Index.vue'),
-                        }
-                    ]
-                },
-                {
-                    path: 'academic',
-                    name: 'admin.academic',
-                    meta: {
-                        title: 'Historial Académico',
-                        icon: 'school',
-                    },
-                    redirect: '/admin/academic',
-                    children: [
+                        },
                         {
-                            path: '',
+                            path: 'academic',
                             name: 'admin.academic.index',
                             component: () => import('@Pages/Academic/Index.vue'),
-                        }
-                    ]
-                },
-                {
-                    path: 'security',
-                    name: 'admin.security',
-                    meta: {
-                        title: 'Seguridad y Salud',
-                        icon: 'security',
-                    },
-                    redirect: '/admin/security',
-                    children: [
+                        },
                         {
-                            path: '',
+                            path: 'security',
                             name: 'admin.security.index',
                             component: () => import('@Pages/Security/Index.vue'),
-                        }
-                    ]
-                },
-                {
-                    path: 'payroll',
-                    name: 'admin.payroll',
-                    meta: {
-                        title: 'Nómina',
-                        icon: 'payments',
-                    },
-                    redirect: '/admin/payroll',
-                    children: [
+                        },
                         {
-                            path: '',
+                            path: 'payroll',
                             name: 'admin.payroll.index',
                             component: () => import('@Pages/Payroll/Index.vue'),
-                        }
-                    ]
-                },
-                {
-                    path: 'additional',
-                    name: 'admin.additional',
-                    meta: {
-                        title: 'Información Adicional',
-                        icon: 'info',
-                    },
-                    redirect: '/admin/additional',
-                    children: [
+                        },
                         {
-                            path: '',
+                            path: 'additional',
                             name: 'admin.additional.index',
                             component: () => import('@Pages/Additional/Index.vue'),
-                        }
+                        },
                     ]
                 },
                 {
-- 
2.45.2


From b402991ac796fbb10cc4a9ddc14265faa938fa89 Mon Sep 17 00:00:00 2001
From: "jose.lopez" <jose.lopez@golsystems.com.mx>
Date: Tue, 23 Sep 2025 13:42:23 -0600
Subject: [PATCH 7/8] vue datepicker y layouts separados

---
 package-lock.json                          |  26 ++
 package.json                               |   1 +
 src/components/Holos/Calendar.vue          | 191 +++++++++++++
 src/layouts/AdminLayout.vue                |   7 +
 src/layouts/AppLayout.vue                  |   5 +
 src/layouts/CoordinatorLayout.vue          |   5 +
 src/pages/Auth/Login.vue                   |   2 +-
 src/pages/Dashboard/Module.js              |  16 ++
 src/pages/Vacations/Admin/Create.vue       | 181 +++++++++++++
 src/pages/Vacations/Admin/Form.vue         | 236 +++++++++++++++++
 src/pages/Vacations/Admin/Index.vue        | 129 +++++++++
 src/pages/Vacations/Admin/Module.js        |  16 ++
 src/pages/Vacations/Coordinator/Create.vue | 181 +++++++++++++
 src/pages/Vacations/Coordinator/Form.vue   | 236 +++++++++++++++++
 src/pages/Vacations/Coordinator/Index.vue  | 295 +++++++++++++++++++++
 src/pages/Vacations/Coordinator/Module.js  |  16 ++
 src/pages/Vacations/Employee/Create.vue    | 181 +++++++++++++
 src/pages/Vacations/Employee/Form.vue      | 236 +++++++++++++++++
 src/pages/Vacations/Employee/Index.vue     | 136 ++++++++++
 src/pages/Vacations/Employee/Module.js     |  16 ++
 src/router/Index.js                        |  51 ++++
 21 files changed, 2162 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Holos/Calendar.vue
 create mode 100644 src/pages/Dashboard/Module.js
 create mode 100644 src/pages/Vacations/Admin/Create.vue
 create mode 100644 src/pages/Vacations/Admin/Form.vue
 create mode 100644 src/pages/Vacations/Admin/Index.vue
 create mode 100644 src/pages/Vacations/Admin/Module.js
 create mode 100644 src/pages/Vacations/Coordinator/Create.vue
 create mode 100644 src/pages/Vacations/Coordinator/Form.vue
 create mode 100644 src/pages/Vacations/Coordinator/Index.vue
 create mode 100644 src/pages/Vacations/Coordinator/Module.js
 create mode 100644 src/pages/Vacations/Employee/Create.vue
 create mode 100644 src/pages/Vacations/Employee/Form.vue
 create mode 100644 src/pages/Vacations/Employee/Index.vue
 create mode 100644 src/pages/Vacations/Employee/Module.js

diff --git a/package-lock.json b/package-lock.json
index a7e332d..6e1802a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@tailwindcss/postcss": "^4.0.9",
         "@tailwindcss/vite": "^4.0.9",
         "@vitejs/plugin-vue": "^5.2.1",
+        "@vuepic/vue-datepicker": "^11.0.2",
         "apexcharts": "^5.3.5",
         "axios": "^1.8.1",
         "laravel-echo": "^2.0.2",
@@ -1507,6 +1508,31 @@
       "integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
       "license": "MIT"
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.2.tgz",
+      "integrity": "sha512-uHh78mVBXCEjam1uVfTzZ/HkyDwut/H6b2djSN9YTF+l/EA+XONfdCnOVSi1g+qVGSy65DcQAwyBNidAssnudQ==",
+      "license": "MIT",
+      "dependencies": {
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.3.0"
+      }
+    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/@yr/monotone-cubic-spline": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
diff --git a/package.json b/package.json
index 6b2b224..cc69e1c 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/vite": "^4.0.9",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vuepic/vue-datepicker": "^11.0.2",
     "apexcharts": "^5.3.5",
     "axios": "^1.8.1",
     "laravel-echo": "^2.0.2",
diff --git a/src/components/Holos/Calendar.vue b/src/components/Holos/Calendar.vue
new file mode 100644
index 0000000..96db6d4
--- /dev/null
+++ b/src/components/Holos/Calendar.vue
@@ -0,0 +1,191 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { Calendar } from 'v-calendar';
+import 'v-calendar/style.css';
+
+// Props del componente
+const props = defineProps({
+    // Días de conflicto a pintar en rojo
+    conflictDays: {
+        type: Array,
+        default: () => []
+    },
+    // Configuración adicional
+    locale: {
+        type: String,
+        default: 'es'
+    }
+});
+
+// Emits
+const emit = defineEmits(['monthChanged']);
+
+// Variables reactivas
+const currentMonth = ref(new Date());
+const fromPage = ref(null);
+
+// Atributos para el calendario (eventos, vacaciones, etc.)
+const attributes = computed(() => {
+    const attrs = [];
+    
+
+    // Agregar días de conflicto (pintarlos en rojo)
+    if (props.conflictDays && props.conflictDays.length > 0) {
+        props.conflictDays.forEach((day) => {
+            const currentYear = currentMonth.value.getFullYear();
+            const currentMonthNumber = currentMonth.value.getMonth();
+            const conflictDate = new Date(currentYear, currentMonthNumber, day);
+            
+            attrs.push({
+                key: `conflict-${day}`,
+                dates: conflictDate,
+                highlight: {
+                    color: 'red',
+                    fillMode: 'solid'
+                },
+                popover: {
+                    label: `Día con conflictos de vacaciones`,
+                    visibility: 'hover'
+                }
+            });
+        });
+    }
+
+    return attrs;
+});
+
+// Configuración del calendario
+const calendarConfig = computed(() => ({
+    locale: props.locale,
+    firstDayOfWeek: 2, // Lunes
+    masks: {
+        weekdays: 'WWW',
+        navMonths: 'MMMM',
+        title: 'MMMM YYYY'
+    },
+    theme: {
+        isDark: false
+    }
+}));
+
+// Métodos
+const onPageChanged = (page) => {
+    // Actualizar el mes actual cuando se cambia de página
+    currentMonth.value = new Date(page[0].year, page[0].month - 1, 1);
+    emit('monthChanged', page[0].month);
+};
+
+// Watch para re-renderizar cuando cambien los días de conflicto o el mes actual
+watch([() => props.conflictDays, currentMonth], () => {
+    // Los attributes se recalcularán automáticamente al cambiar estas dependencias
+}, { deep: true });
+
+// Exponer métodos para uso externo
+defineExpose({
+    currentMonth
+});
+</script>
+
+<template>
+    <div class="calendar-container bg-white rounded-lg shadow-md p-4">
+        <!-- Header del calendario -->
+        <div class="flex items-center justify-between mb-4">
+            <h3 class="text-lg font-semibold text-gray-900">Calendario</h3>
+        </div>
+
+        <!-- Calendario principal -->
+        <div class="calendar-wrapper">
+            <Calendar
+                v-model="currentMonth"
+                :attributes="attributes"
+                :locale="calendarConfig.locale"
+                :first-day-of-week="calendarConfig.firstDayOfWeek"
+                :masks="calendarConfig.masks"
+                class="custom-calendar"
+                v-model:from-page="fromPage"
+                @update:from-page="onPageChanged"
+                @did-move="onPageChanged"
+                expanded
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Estilos personalizados para el calendario */
+.calendar-container {
+    min-width: 300px;
+}
+
+.custom-calendar {
+    width: 100%;
+}
+
+/* Personalización de v-calendar */
+:deep(.vc-container) {
+    --vc-border-radius: 0.5rem;
+    --vc-weekday-color: #6B7280;
+    --vc-popover-content-bg: white;
+    --vc-popover-content-border: 1px solid #E5E7EB;
+    border: none;
+    font-family: inherit;
+}
+
+:deep(.vc-header) {
+    padding: 1rem 1rem 0.5rem;
+}
+
+:deep(.vc-title) {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #1F2937;
+}
+
+:deep(.vc-weekday) {
+    color: #6B7280;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: 0.5rem 0;
+}
+
+:deep(.vc-day) {
+    min-height: 2rem;
+}
+
+:deep(.vc-day-content) {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.375rem;
+    border: none;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+:deep(.vc-day-content:hover) {
+    background-color: #EFF6FF;
+    color: #2563EB;
+}
+
+:deep(.vc-day-content.vc-day-content-today) {
+    background-color: #DBEAFE;
+    color: #1D4ED8;
+    font-weight: 600;
+}
+
+:deep(.vc-highlights .vc-highlight) {
+    border-radius: 0.375rem;
+}
+
+:deep(.vc-dots) {
+    margin-bottom: 0.125rem;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+    .calendar-container {
+        min-width: auto;
+        margin: 0 -1rem;
+        border-radius: 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index f72215c..8d4d7c4 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -71,6 +71,13 @@ onMounted(() => {
                     to="admin.additional.index"
                 />
             </Section>
+            <Section name="Vacaciones">
+                <Link
+                    icon="grid_view"
+                    name="Vacaciones" 
+                    to="admin.vacations.index"
+                />
+            </Section>
             <Section name="Capacitaciones">
                 <Link
                     icon="grid_view"
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 6ddf680..4b1c41c 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -43,6 +43,11 @@ onMounted(() => {
                     name="Dashboard" 
                     to="dashboard.index"
                 />
+                <Link
+                    icon="calendar_month"
+                    name="Vacaciones" 
+                    to="vacations.index"
+                />
                 <Link
                     icon="person"
                     name="Perfil" 
diff --git a/src/layouts/CoordinatorLayout.vue b/src/layouts/CoordinatorLayout.vue
index 5248829..2485899 100644
--- a/src/layouts/CoordinatorLayout.vue
+++ b/src/layouts/CoordinatorLayout.vue
@@ -43,6 +43,11 @@ onMounted(() => {
                     name="Dashboard" 
                     to="coordinator.dashboard.index"
                 />
+                <Link
+                    icon="calendar_month"
+                    name="Vacaciones" 
+                    to="vacations.coordinator.index"
+                />
             </Section>
             <Section
                 :name="$t('admin.title')"
diff --git a/src/pages/Auth/Login.vue b/src/pages/Auth/Login.vue
index 386c644..0bf2be0 100644
--- a/src/pages/Auth/Login.vue
+++ b/src/pages/Auth/Login.vue
@@ -44,7 +44,7 @@ const redirectBasedOnRole = (userRoles) => {
     }
 
     // Verificar si tiene el rol coordinador
-    const hasCoordinatorRole = userRoles.some(role => role.name === 'coordinador')
+    const hasCoordinatorRole = userRoles.some(role => role.name === 'coordinator')
     if (hasCoordinatorRole) {
         router.push('/coordinator')
         return
diff --git a/src/pages/Dashboard/Module.js b/src/pages/Dashboard/Module.js
new file mode 100644
index 0000000..cd617bf
--- /dev/null
+++ b/src/pages/Dashboard/Module.js
@@ -0,0 +1,16 @@
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`dashboard.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `dashboard.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`dashboard.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/pages/Vacations/Admin/Create.vue b/src/pages/Vacations/Admin/Create.vue
new file mode 100644
index 0000000..c1692d9
--- /dev/null
+++ b/src/pages/Vacations/Admin/Create.vue
@@ -0,0 +1,181 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Form from './Form.vue';
+
+/** Definidores */
+const router = useRouter();
+
+const form = useForm({
+    periods: [
+        {
+            start_date: '',
+            end_date: '',
+            number_of_days: 0,
+        }
+    ],
+    comments: ''
+});
+
+const availableDays = ref(0);
+const formRef = ref(null);
+
+// Calcular días restantes
+const remainingDays = computed(() => {
+    if (!formRef.value) return availableDays.value;
+    return availableDays.value - formRef.value.totalSelectedDays;
+});
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    if (!formRef.value) return 0;
+    return formRef.value.totalSelectedDays;
+});
+
+// Obtener períodos con datos
+const periodsWithData = computed(() => {
+    return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store'), {
+        onSuccess: (res) => {
+            Notify.success(Lang('created'));
+            router.push(viewTo({ name: 'index' }));
+        }
+    });
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.get(route('resources.available-days'), {
+        onSuccess: (res) => {
+            availableDays.value = res.available_days;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="mb-8">
+            <div class="flex items-center gap-4 mb-4">
+            <RouterLink :to="viewTo({ name: 'index' })">
+                    <button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
+                        <GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
+                    </button>
+            </RouterLink>
+                <div>
+                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
+                    <p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Layout de dos columnas -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Formulario - Columna izquierda (2/3) -->
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
+
+                    <Form 
+                        ref="formRef"
+                        :form="form"
+                        @submit="submit"
+                    />
+                </div>
+            </div>
+
+            <!-- Resumen - Columna derecha (1/3) -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
+
+                    <!-- Días disponibles -->
+                    <div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
+                        <div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
+                        <div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
+                    </div>
+
+                    <!-- Detalles de períodos -->
+                    <div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
+                        <div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
+                            <h4 class="font-medium text-slate-900 dark:text-slate-100">
+                                Período {{ index + 1 }}:
+                            </h4>
+                            <div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
+                                <div>Inicio: {{ period.start_date }}</div>
+                                <div>Fin: {{ period.end_date }}</div>
+                                <div class="flex items-center gap-2">
+                                    <span>Días en período {{ index + 1 }}:</span>
+                                    <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                        {{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Resumen de días -->
+                    <div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
+                            <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                {{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
+                            <span class="px-2 py-1 rounded-full text-xs font-medium"
+                                  :class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
+                                {{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Advertencia si se excede el límite -->
+                    <div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
+                        <div class="flex items-center gap-2">
+                            <GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
+                            <span class="text-sm text-red-600 dark:text-red-400 font-medium">
+                                Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Recordatorios -->
+                    <div class="space-y-3">
+                        <h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
+                        <div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Las solicitudes deben hacerse con 15 días de anticipación</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Tu coordinador revisará y aprobará la solicitud</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Recibirás una notificación con la decisión</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Los días se descontarán una vez aprobados</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Vacations/Admin/Form.vue b/src/pages/Vacations/Admin/Form.vue
new file mode 100644
index 0000000..4ac48cb
--- /dev/null
+++ b/src/pages/Vacations/Admin/Form.vue
@@ -0,0 +1,236 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Textarea         from '@Holos/Form/Textarea.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+const props = defineProps({
+    form: Object
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+
+function addPeriod() {
+    props.form.periods.push({
+        start_date: '',
+        end_date: '',
+        number_of_days: 0,
+    });
+}
+
+function removePeriod(index) {
+    if (props.form.periods.length > 1) {
+        props.form.periods.splice(index, 1);
+    }
+}
+
+function calculateDays(startDate, endDate) {
+    if (!startDate || !endDate) return 0;
+    
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    
+    // Validar que la fecha de inicio no sea posterior a la de fin
+    if (start > end) return 0;
+    
+    // Calcular la diferencia en días (incluyendo ambos días)
+    const timeDiff = end.getTime() - start.getTime();
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
+    
+    return daysDiff;
+}
+
+function updatePeriodDays(index) {
+    const period = props.form.periods[index];
+    if (period.start_date && period.end_date) {
+        period.number_of_days = calculateDays(period.start_date, period.end_date);
+    } else {
+        period.number_of_days = 0;
+    }
+}
+
+function getMinDate() {
+    const today = new Date();
+    let daysToAdd = 15;
+    let currentDate = new Date(today);
+    
+    while (daysToAdd > 0) {
+        currentDate.setDate(currentDate.getDate() + 1);
+        // Si no es domingo (0), contar el día
+        if (currentDate.getDay() !== 0) {
+            daysToAdd--;
+        }
+    }
+    
+    return currentDate.toISOString().split('T')[0];
+}
+
+// Función para desactivar domingos
+function isDisabled(date) {
+    return date.getDay() === 0; // 0 = domingo
+}
+
+// Función para formatear fecha a Y-m-d
+function formatDate(date) {
+    if (!date) return '';
+    
+    // Si la fecha ya es un string en formato correcto, devolverla
+    if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        return date;
+    }
+    
+    let d;
+    if (date instanceof Date) {
+        d = date;
+    } else {
+        d = new Date(date);
+    }
+    
+    // Verificar que la fecha es válida
+    if (isNaN(d.getTime())) {
+        console.warn('Fecha inválida recibida:', date);
+        return '';
+    }
+    
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+// Watcher para detectar cambios en las fechas
+watch(() => props.form.periods, (newPeriods) => {
+    newPeriods.forEach((period, index) => {
+        if (period.start_date && period.end_date) {
+            updatePeriodDays(index);
+        }
+    });
+}, { deep: true });
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    return props.form.periods.reduce((total, period) => {
+        return total + (period.number_of_days || 0);
+    }, 0);
+});
+
+// Exponer el total para el componente padre
+defineExpose({
+    totalSelectedDays
+});
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="space-y-6">
+        <!-- Períodos de vacaciones -->
+        <div class="space-y-4">
+            <div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
+                <div class="flex items-center justify-between">
+                    <h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
+                        Período {{ index + 1 }}
+                    </h4>
+                    <button
+                        v-if="form.periods.length > 1"
+                        type="button"
+                        @click="removePeriod(index)"
+                        class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
+                    >
+                        <GoogleIcon name="delete" class="w-4 h-4" />
+                        Eliminar
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.start_date"
+                                class="w-full"
+                                placeholder="Fecha de inicio"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (inicio):', date);
+                                    period.start_date = formatDate(date); 
+                                    console.log('Fecha formateada (inicio):', period.start_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.end_date"
+                                class="w-full"
+                                placeholder="Fecha de fin"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (fin):', date);
+                                    period.end_date = formatDate(date); 
+                                    console.log('Fecha formateada (fin):', period.end_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Botón añadir período -->
+            <button
+                type="button"
+                @click="addPeriod"
+                class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
+            >
+                <GoogleIcon name="add" />
+                Añadir período
+            </button>
+        </div>
+
+        <!-- Comentarios -->
+        <div>
+            <Textarea
+                v-model="form.comments"
+                id="comments"
+                rows="4"
+                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
+                placeholder="Agrega cualquier información adicional sobre tu solicitud..."
+                :onError="form.errors.comments"
+            />
+        </div>
+
+        <!-- Botón de envío -->
+        <div class="col-span-1 md:col-span-2 flex justify-center">
+            <PrimaryButton
+                v-text="$t('request')"
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+            />
+        </div>
+    </form>
+</template>
\ No newline at end of file
diff --git a/src/pages/Vacations/Admin/Index.vue b/src/pages/Vacations/Admin/Index.vue
new file mode 100644
index 0000000..0636614
--- /dev/null
+++ b/src/pages/Vacations/Admin/Index.vue
@@ -0,0 +1,129 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { getDate } from '@Controllers/DateController';
+import { apiTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const vacationRequests = ref([]);
+
+/** Metodos */
+const generateConstance = (vacationId) => {
+    api.get(route('vacation-requests-public.generate-route', { vacation: vacationId }), {
+        onSuccess: (res) => {
+            Notify.success('Constancia generada correctamente');
+            openNewTab(res.route);
+        }
+    });
+};
+
+const getStatusClasses = (status) => {
+    const statusMap = {
+        'Pendiente': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+        'Aprobado': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+        'Rechazado': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+        'Agendado': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+        'Cancelado': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+        'Concluido': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300'
+    };
+    
+    return statusMap[status] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300';
+};
+
+const getStatusIcon = (status) => {
+    const iconMap = {
+        'Pendiente': { name: 'schedule', classes: 'text-amber-600 dark:text-amber-400' },
+        'Aprobado': { name: 'check_circle', classes: 'text-blue-600 dark:text-blue-400' },
+        'Rechazado': { name: 'cancel', classes: 'text-orange-600 dark:text-orange-400' },
+        'Agendado': { name: 'event', classes: 'text-green-600 dark:text-green-400' },
+        'Cancelado': { name: 'block', classes: 'text-red-600 dark:text-red-400' },
+        'Concluido': { name: 'task_alt', classes: 'text-cyan-600 dark:text-cyan-400' }
+    };
+    
+    return iconMap[status] || { name: 'help', classes: 'text-gray-600 dark:text-gray-400' };
+};
+
+const getStatusIconContainer = (status) => {
+    const containerMap = {
+        'Pendiente': 'bg-amber-100 dark:bg-amber-900/30',
+        'Aprobado': 'bg-blue-100 dark:bg-blue-900/30',
+        'Rechazado': 'bg-orange-100 dark:bg-orange-900/30',
+        'Agendado': 'bg-green-100 dark:bg-green-900/30',
+        'Cancelado': 'bg-red-100 dark:bg-red-900/30',
+        'Concluido': 'bg-cyan-100 dark:bg-cyan-900/30'
+    };
+    
+    return containerMap[status] || 'bg-gray-100 dark:bg-gray-900/30';
+};
+
+const openNewTab = (url) => {
+    window.open(url, '_blank');
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('index'), {
+        onSuccess: (r) => {
+            vacationRequests.value = r.vacation_requests.data;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="flex items-center justify-between mb-8">
+            <div>
+                <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                    Solicitudes
+                </h1>
+                <p class="text-slate-600 dark:text-slate-400">Gestión completa de todas las solicitudes de vacaciones del sistema.</p>
+            </div>
+        </div>
+
+        <!-- Lista de solicitudes -->
+        <div class="space-y-4">
+            <div v-for="vacation in vacationRequests" class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm dark:bg-slate-800 dark:border-slate-700">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center gap-3">
+                        <div :class="`flex items-center justify-center w-10 h-10 rounded-lg ${getStatusIconContainer(vacation.status)}`">
+                            <GoogleIcon :name="getStatusIcon(vacation.status).name" :class="getStatusIcon(vacation.status).classes" />
+                        </div>
+                        <div>
+                            <h3 v-if="vacation.vacation_periods.length > 1" class="font-semibold text-slate-900 dark:text-slate-100">{{ vacation.vacation_periods.length }} periodos</h3>
+                            <h3 v-else class="font-semibold text-slate-900 dark:text-slate-100">{{ getDate(vacation.vacation_periods[0].start_date) }} - {{ getDate(vacation.vacation_periods[0].end_date) }}</h3>
+                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ vacation.total_days }} días</p>
+                        </div>
+                    </div>
+                    <span :class="`px-3 py-1 rounded-full text-sm font-medium ${getStatusClasses(vacation.status)}`">
+                        {{ vacation.status }}
+                    </span>
+                </div>
+
+                <div v-for="(period, index) in vacation.vacation_periods" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <div>
+                        <p class="text-sm font-medium text-slate-700 dark:text-slate-300">Período {{ index + 1 }}:</p>
+                        <p class="text-sm text-slate-600 dark:text-slate-400">{{ getDate(period.start_date) }} - {{ getDate(period.end_date) }} ({{ period.number_of_days }} días)</p>
+                    </div>
+                </div>
+
+                <div class="flex justify-end gap-3">
+                    <button @click="generateConstance(vacation.id)" type="button" class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg with-transition dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700">
+                        <GoogleIcon name="clinical_notes" />
+                        Generar Constancia de disfrute de vacaciones
+                    </button>
+                </div>
+            </div>
+
+            <!-- Estado vacío cuando no hay solicitudes -->
+            <div v-if="vacationRequests.length == 0" class="text-center py-12">
+                <GoogleIcon name="event_busy" class="text-slate-300 text-6xl mb-4 dark:text-slate-600" />
+                <h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">No hay solicitudes</h3>
+                <p class="text-slate-600 dark:text-slate-400 mb-6">No se han encontrado solicitudes de vacaciones en el sistema.</p>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/pages/Vacations/Admin/Module.js b/src/pages/Vacations/Admin/Module.js
new file mode 100644
index 0000000..f13dddb
--- /dev/null
+++ b/src/pages/Vacations/Admin/Module.js
@@ -0,0 +1,16 @@
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`vacation-requests.admin.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.admin.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`vacations.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/pages/Vacations/Coordinator/Create.vue b/src/pages/Vacations/Coordinator/Create.vue
new file mode 100644
index 0000000..c1692d9
--- /dev/null
+++ b/src/pages/Vacations/Coordinator/Create.vue
@@ -0,0 +1,181 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Form from './Form.vue';
+
+/** Definidores */
+const router = useRouter();
+
+const form = useForm({
+    periods: [
+        {
+            start_date: '',
+            end_date: '',
+            number_of_days: 0,
+        }
+    ],
+    comments: ''
+});
+
+const availableDays = ref(0);
+const formRef = ref(null);
+
+// Calcular días restantes
+const remainingDays = computed(() => {
+    if (!formRef.value) return availableDays.value;
+    return availableDays.value - formRef.value.totalSelectedDays;
+});
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    if (!formRef.value) return 0;
+    return formRef.value.totalSelectedDays;
+});
+
+// Obtener períodos con datos
+const periodsWithData = computed(() => {
+    return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store'), {
+        onSuccess: (res) => {
+            Notify.success(Lang('created'));
+            router.push(viewTo({ name: 'index' }));
+        }
+    });
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.get(route('resources.available-days'), {
+        onSuccess: (res) => {
+            availableDays.value = res.available_days;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="mb-8">
+            <div class="flex items-center gap-4 mb-4">
+            <RouterLink :to="viewTo({ name: 'index' })">
+                    <button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
+                        <GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
+                    </button>
+            </RouterLink>
+                <div>
+                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
+                    <p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Layout de dos columnas -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Formulario - Columna izquierda (2/3) -->
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
+
+                    <Form 
+                        ref="formRef"
+                        :form="form"
+                        @submit="submit"
+                    />
+                </div>
+            </div>
+
+            <!-- Resumen - Columna derecha (1/3) -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
+
+                    <!-- Días disponibles -->
+                    <div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
+                        <div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
+                        <div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
+                    </div>
+
+                    <!-- Detalles de períodos -->
+                    <div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
+                        <div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
+                            <h4 class="font-medium text-slate-900 dark:text-slate-100">
+                                Período {{ index + 1 }}:
+                            </h4>
+                            <div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
+                                <div>Inicio: {{ period.start_date }}</div>
+                                <div>Fin: {{ period.end_date }}</div>
+                                <div class="flex items-center gap-2">
+                                    <span>Días en período {{ index + 1 }}:</span>
+                                    <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                        {{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Resumen de días -->
+                    <div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
+                            <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                {{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
+                            <span class="px-2 py-1 rounded-full text-xs font-medium"
+                                  :class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
+                                {{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Advertencia si se excede el límite -->
+                    <div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
+                        <div class="flex items-center gap-2">
+                            <GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
+                            <span class="text-sm text-red-600 dark:text-red-400 font-medium">
+                                Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Recordatorios -->
+                    <div class="space-y-3">
+                        <h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
+                        <div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Las solicitudes deben hacerse con 15 días de anticipación</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Tu coordinador revisará y aprobará la solicitud</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Recibirás una notificación con la decisión</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Los días se descontarán una vez aprobados</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Vacations/Coordinator/Form.vue b/src/pages/Vacations/Coordinator/Form.vue
new file mode 100644
index 0000000..4ac48cb
--- /dev/null
+++ b/src/pages/Vacations/Coordinator/Form.vue
@@ -0,0 +1,236 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Textarea         from '@Holos/Form/Textarea.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+const props = defineProps({
+    form: Object
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+
+function addPeriod() {
+    props.form.periods.push({
+        start_date: '',
+        end_date: '',
+        number_of_days: 0,
+    });
+}
+
+function removePeriod(index) {
+    if (props.form.periods.length > 1) {
+        props.form.periods.splice(index, 1);
+    }
+}
+
+function calculateDays(startDate, endDate) {
+    if (!startDate || !endDate) return 0;
+    
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    
+    // Validar que la fecha de inicio no sea posterior a la de fin
+    if (start > end) return 0;
+    
+    // Calcular la diferencia en días (incluyendo ambos días)
+    const timeDiff = end.getTime() - start.getTime();
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
+    
+    return daysDiff;
+}
+
+function updatePeriodDays(index) {
+    const period = props.form.periods[index];
+    if (period.start_date && period.end_date) {
+        period.number_of_days = calculateDays(period.start_date, period.end_date);
+    } else {
+        period.number_of_days = 0;
+    }
+}
+
+function getMinDate() {
+    const today = new Date();
+    let daysToAdd = 15;
+    let currentDate = new Date(today);
+    
+    while (daysToAdd > 0) {
+        currentDate.setDate(currentDate.getDate() + 1);
+        // Si no es domingo (0), contar el día
+        if (currentDate.getDay() !== 0) {
+            daysToAdd--;
+        }
+    }
+    
+    return currentDate.toISOString().split('T')[0];
+}
+
+// Función para desactivar domingos
+function isDisabled(date) {
+    return date.getDay() === 0; // 0 = domingo
+}
+
+// Función para formatear fecha a Y-m-d
+function formatDate(date) {
+    if (!date) return '';
+    
+    // Si la fecha ya es un string en formato correcto, devolverla
+    if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        return date;
+    }
+    
+    let d;
+    if (date instanceof Date) {
+        d = date;
+    } else {
+        d = new Date(date);
+    }
+    
+    // Verificar que la fecha es válida
+    if (isNaN(d.getTime())) {
+        console.warn('Fecha inválida recibida:', date);
+        return '';
+    }
+    
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+// Watcher para detectar cambios en las fechas
+watch(() => props.form.periods, (newPeriods) => {
+    newPeriods.forEach((period, index) => {
+        if (period.start_date && period.end_date) {
+            updatePeriodDays(index);
+        }
+    });
+}, { deep: true });
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    return props.form.periods.reduce((total, period) => {
+        return total + (period.number_of_days || 0);
+    }, 0);
+});
+
+// Exponer el total para el componente padre
+defineExpose({
+    totalSelectedDays
+});
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="space-y-6">
+        <!-- Períodos de vacaciones -->
+        <div class="space-y-4">
+            <div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
+                <div class="flex items-center justify-between">
+                    <h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
+                        Período {{ index + 1 }}
+                    </h4>
+                    <button
+                        v-if="form.periods.length > 1"
+                        type="button"
+                        @click="removePeriod(index)"
+                        class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
+                    >
+                        <GoogleIcon name="delete" class="w-4 h-4" />
+                        Eliminar
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.start_date"
+                                class="w-full"
+                                placeholder="Fecha de inicio"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (inicio):', date);
+                                    period.start_date = formatDate(date); 
+                                    console.log('Fecha formateada (inicio):', period.start_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.end_date"
+                                class="w-full"
+                                placeholder="Fecha de fin"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (fin):', date);
+                                    period.end_date = formatDate(date); 
+                                    console.log('Fecha formateada (fin):', period.end_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Botón añadir período -->
+            <button
+                type="button"
+                @click="addPeriod"
+                class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
+            >
+                <GoogleIcon name="add" />
+                Añadir período
+            </button>
+        </div>
+
+        <!-- Comentarios -->
+        <div>
+            <Textarea
+                v-model="form.comments"
+                id="comments"
+                rows="4"
+                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
+                placeholder="Agrega cualquier información adicional sobre tu solicitud..."
+                :onError="form.errors.comments"
+            />
+        </div>
+
+        <!-- Botón de envío -->
+        <div class="col-span-1 md:col-span-2 flex justify-center">
+            <PrimaryButton
+                v-text="$t('request')"
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+            />
+        </div>
+    </form>
+</template>
\ No newline at end of file
diff --git a/src/pages/Vacations/Coordinator/Index.vue b/src/pages/Vacations/Coordinator/Index.vue
new file mode 100644
index 0000000..f0c15ba
--- /dev/null
+++ b/src/pages/Vacations/Coordinator/Index.vue
@@ -0,0 +1,295 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { apiTo } from './Module';
+
+import Calendar from '@Components/Holos/Calendar.vue';
+
+/** Propiedades */
+const applicationsForCoordinator = ref([]);
+const conflictDays = ref([]);
+const calendarRef = ref(null);
+
+/** Metodos */
+const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('es-ES', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    });
+};
+
+// Función para calcular el total de días
+const calculateTotalDays = (vacationPeriods) => {
+    return vacationPeriods.reduce((total, period) => total + period.number_of_days, 0);
+};
+
+// Función para obtener el color del estado
+const getStatusColor = (status) => {
+    switch (status) {
+        case 'Pendiente':
+            return 'bg-yellow-100 text-yellow-800';
+        case 'Aprobada':
+            return 'bg-green-100 text-green-800';
+        case 'Rechazada':
+            return 'bg-red-100 text-red-800';
+        default:
+            return 'bg-gray-100 text-gray-800';
+    }
+};
+
+// Método para obtener los días de conflicto del mes
+const fetchConflictDays = (month) => {
+    // Limpiar inmediatamente los días de conflicto para evitar el parpadeo visual
+    conflictDays.value = [];
+    
+    api.get(apiTo('calendar-month', { month: month }), {
+        onSuccess: (r) => {
+            // El backend puede retornar un array vacío o un array con los días de conflicto
+            conflictDays.value = r.conflict_days || [];
+        },
+    });
+};
+
+const approvePeriod = (periodId) => {
+    api.put(apiTo('approve-period', { period: periodId }), {
+        onSuccess: (r) => {
+            Notify.success('Periodo aprobado correctamente');
+            // recargar la página
+            
+        },
+    });
+};
+
+const approveAll = (applicationId) => {
+    api.put(apiTo('approve-request', { vacationRequest: applicationId }), {
+        onSuccess: (r) => {
+            Notify.success('Solicitud aprobada correctamente');
+            // recargar la página
+            
+        },
+    });
+};
+
+/** Ciclos */
+onMounted(() => {
+    // Cargar los días de conflicto del mes actual al montar el componente
+    const initialMonth = new Date().getMonth() + 1;
+    fetchConflictDays(initialMonth);
+
+    // Cargar las solicitudes para coordinador
+    api.get(apiTo('index'), {
+        onSuccess: (r) => {
+            applicationsForCoordinator.value = r.applications_for_coordinator;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between my-4 sm:my-8 gap-3 sm:gap-0">
+            <div>
+                <h1 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100">Gestión de Solicitudes</h1>
+                <p class="text-sm sm:text-base text-slate-600 dark:text-slate-400">Revisa y gestiona las solicitudes de vacaciones de tu equipo</p>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
+            <div class="order-2 lg:order-1 lg:col-span-8">
+                <!-- Lista de solicitudes -->
+                <div v-for="application in applicationsForCoordinator" :key="application.id" class="bg-white rounded-lg shadow-md p-4 sm:p-6 mb-4 sm:mb-6">
+                    <!-- Información del empleado -->
+                    <div class="flex flex-col sm:flex-row sm:items-center mb-4 sm:mb-6 gap-3 sm:gap-0">
+                        <div class="flex items-center flex-1">
+                            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-gray-200 rounded-full flex items-center justify-center mr-3 sm:mr-4 overflow-hidden flex-shrink-0">
+                                <img v-if="application.user.profile_photo_url" 
+                                     :src="application.user.profile_photo_url" 
+                                     :alt="application.user.full_name"
+                                     class="w-full h-full object-cover">
+                                <svg v-else class="w-5 h-5 sm:w-6 sm:h-6 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-1">
+                                    <h2 class="text-base sm:text-lg font-semibold text-gray-900 truncate">{{ application.user.full_name }}</h2>
+                                    <span :class="`px-2 py-1 text-xs rounded-full font-medium ${getStatusColor(application.status)} flex-shrink-0`">
+                                        {{ application.status }}
+                                    </span>
+                                </div>
+                                <p class="text-gray-500 text-sm">{{ application.user.department.name }}</p>
+                                <p class="text-gray-400 text-xs">Días disponibles: {{ application.user.vacation_days_available }}</p>
+                            </div>
+                        </div>
+                        <div class="text-left sm:text-right text-sm text-gray-500 flex-shrink-0">
+                            <p>Solicitado: {{ formatDate(application.created_at) }}</p>
+                        </div>
+                    </div>
+
+                    <!-- Conflicto -->
+                    <div v-if="application.have_conflict && application.status == 'Pendiente'" class="mb-4 sm:mb-6">
+                        <div class="bg-red-50 border border-red-200 rounded-lg p-3 sm:p-4">
+                            <div class="flex items-start">
+                                <div class="flex-shrink-0">
+                                    <svg class="w-4 h-4 sm:w-5 sm:h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                    </svg>
+                                </div>
+                                <div class="ml-2 sm:ml-3 flex-1">
+                                    <h3 class="text-sm font-medium text-red-800">
+                                        Conflicto detectado
+                                    </h3>
+                                    <div class="mt-2 text-sm text-red-700">
+                                        <p class="mb-3">Las siguientes fechas presentan conflictos con otras solicitudes:</p>
+                                        <div class="space-y-2 sm:space-y-3">
+                                            <div v-for="conflict in application.have_conflict" :key="conflict.request_id" 
+                                                 class="bg-white border border-red-200 rounded-md p-2 sm:p-3">
+                                                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2 gap-1 sm:gap-0">
+                                                    <span class="font-medium text-red-800">{{ conflict.user.name }}</span>
+                                                </div>
+                                                <div class="text-xs text-red-600 space-y-2">
+                                                    <div class="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-2">
+                                                        <span class="font-medium">Período aprobado:</span>
+                                                        <span class="break-all sm:break-normal">{{ formatDate(conflict.conflicting_period.start_date) }} - {{ formatDate(conflict.conflicting_period.end_date) }} ({{ conflict.conflicting_period.number_of_days }} días)</span>
+                                                    </div>
+                                                    <div class="flex flex-col sm:flex-row sm:justify-between gap-1 sm:gap-2">
+                                                        <span class="font-medium">Período solicitado:</span>
+                                                        <span class="break-all sm:break-normal">{{ formatDate(conflict.target_period.start_date) }} - {{ formatDate(conflict.target_period.end_date) }} ({{ conflict.target_period.number_of_days }} días)</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            
+                    <!-- Períodos solicitados -->
+                    <div class="mb-4 sm:mb-6">
+                        <h3 class="text-sm font-medium text-gray-700 mb-3">Períodos solicitados:</h3>
+            
+                        <div class="space-y-2">
+                            <div v-for="period in application.vacation_periods" :key="period.id" 
+                                 class="flex flex-col sm:flex-row sm:items-center p-3 bg-gray-50 rounded-lg gap-3 sm:gap-0">
+                                <div class="flex items-center flex-1">
+                                    <div class="w-6 h-6 sm:w-8 sm:h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2 sm:mr-3 flex-shrink-0">
+                                        <svg class="w-3 h-3 sm:w-4 sm:h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd"
+                                                d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                                                clip-rule="evenodd" />
+                                        </svg>
+                                    </div>
+                                    <div class="flex flex-col sm:flex-row sm:items-center sm:flex-1 gap-2">
+                                        <span class="text-gray-700 text-sm">
+                                            {{ formatDate(period.start_date) }} - {{ formatDate(period.end_date) }}
+                                        </span>
+                                        <span class="px-2 py-1 bg-blue-100 text-blue-600 text-xs rounded-full font-medium self-start sm:self-auto">
+                                            {{ period.number_of_days }} {{ period.number_of_days === 1 ? 'día' : 'días' }}
+                                        </span>
+                                    </div>
+                                </div>
+                                
+                                <!-- Botones de acción para períodos individuales -->
+                                <div v-if="application.status === 'Pendiente'" class="flex gap-2 justify-start sm:justify-end">
+                                    <button
+                                        class="flex items-center justify-center gap-1 bg-green-500 hover:bg-green-600 text-white font-medium py-1.5 px-3 rounded text-xs transition-colors"
+                                        @click="application.vacation_periods.length > 1 ? approvePeriod(period.id) : approveAll(application.id)"
+                                    >
+                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd"
+                                                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                                clip-rule="evenodd" />
+                                        </svg>
+                                        Aprobar
+                                    </button>
+                    
+                                    <button
+                                        class="flex items-center justify-center gap-1 bg-red-500 hover:bg-red-600 text-white font-medium py-1.5 px-3 rounded text-xs transition-colors">
+                                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd"
+                                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                                clip-rule="evenodd" />
+                                        </svg>
+                                        Rechazar
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+            
+                        <!-- Total -->
+                        <div class="mt-3 text-right">
+                            <span class="text-sm font-medium text-gray-700">
+                                Total: {{ calculateTotalDays(application.vacation_periods) }} días
+                            </span>
+                        </div>
+                    </div>
+            
+                    <!-- Comentarios -->
+                    <div v-if="application.comments" class="mb-4 sm:mb-6">
+                        <h3 class="text-sm font-medium text-gray-700 mb-2">Comentarios:</h3>
+                        <div class="p-3 bg-gray-50 rounded-lg">
+                            <span class="text-gray-700 text-sm">{{ application.comments }}</span>
+                        </div>
+                    </div>
+            
+                    <!-- Motivo de rechazo -->
+                    <div v-if="application.rejection_reason" class="mb-4 sm:mb-6">
+                        <h3 class="text-sm font-medium text-red-700 mb-2">Motivo de rechazo:</h3>
+                        <div class="p-3 bg-red-50 rounded-lg border border-red-200">
+                            <span class="text-red-700 text-sm">{{ application.rejection_reason }}</span>
+                        </div>
+                    </div>
+            
+                    <!-- Botones de acción -->
+                    <div v-if="application.status === 'Pendiente' && application.vacation_periods.length > 1" class="flex flex-col sm:flex-row gap-2 sm:gap-3">
+                        <button
+                            class="flex items-center justify-center gap-2 bg-green-500 hover:bg-green-600 text-white font-medium py-2.5 sm:py-2 px-4 rounded-lg transition-colors"
+                            @click="approveAll(application.id)"
+                        >
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd"
+                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Aprobar todo
+                        </button>
+            
+                        <button
+                            class="flex items-center justify-center gap-2 bg-red-500 hover:bg-red-600 text-white font-medium py-2.5 sm:py-2 px-4 rounded-lg transition-colors">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd"
+                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                            Rechazar todo
+                        </button>
+                    </div>
+                </div>
+            
+                <!-- Mensaje cuando no hay solicitudes -->
+                <div v-if="!applicationsForCoordinator || applicationsForCoordinator.length === 0" 
+                     class="text-center py-8 sm:py-12 px-4">
+                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <svg class="w-6 h-6 sm:w-8 sm:h-8 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <h3 class="text-base sm:text-lg font-medium text-gray-900 mb-2">No hay solicitudes pendientes</h3>
+                    <p class="text-sm sm:text-base text-gray-500">Tu equipo no tiene solicitudes de vacaciones que requieran revisión.</p>
+                </div>
+            </div>
+            <div class="order-1 lg:order-2 lg:col-span-4">
+                <Calendar 
+                    ref="calendarRef"
+                    :conflictDays="conflictDays"
+                    @monthChanged="fetchConflictDays"
+                />
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/pages/Vacations/Coordinator/Module.js b/src/pages/Vacations/Coordinator/Module.js
new file mode 100644
index 0000000..b4bb8b3
--- /dev/null
+++ b/src/pages/Vacations/Coordinator/Module.js
@@ -0,0 +1,16 @@
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`vacation-requests.coordinator.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.coordinator.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`vacations.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/pages/Vacations/Employee/Create.vue b/src/pages/Vacations/Employee/Create.vue
new file mode 100644
index 0000000..c1692d9
--- /dev/null
+++ b/src/pages/Vacations/Employee/Create.vue
@@ -0,0 +1,181 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Form from './Form.vue';
+
+/** Definidores */
+const router = useRouter();
+
+const form = useForm({
+    periods: [
+        {
+            start_date: '',
+            end_date: '',
+            number_of_days: 0,
+        }
+    ],
+    comments: ''
+});
+
+const availableDays = ref(0);
+const formRef = ref(null);
+
+// Calcular días restantes
+const remainingDays = computed(() => {
+    if (!formRef.value) return availableDays.value;
+    return availableDays.value - formRef.value.totalSelectedDays;
+});
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    if (!formRef.value) return 0;
+    return formRef.value.totalSelectedDays;
+});
+
+// Obtener períodos con datos
+const periodsWithData = computed(() => {
+    return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store'), {
+        onSuccess: (res) => {
+            Notify.success(Lang('created'));
+            router.push(viewTo({ name: 'index' }));
+        }
+    });
+}
+
+/** Ciclos */
+onMounted(() => {
+    api.get(route('resources.available-days'), {
+        onSuccess: (res) => {
+            availableDays.value = res.available_days;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="mb-8">
+            <div class="flex items-center gap-4 mb-4">
+            <RouterLink :to="viewTo({ name: 'index' })">
+                    <button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
+                        <GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
+                    </button>
+            </RouterLink>
+                <div>
+                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
+                    <p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Layout de dos columnas -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Formulario - Columna izquierda (2/3) -->
+            <div class="lg:col-span-2">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
+
+                    <Form 
+                        ref="formRef"
+                        :form="form"
+                        @submit="submit"
+                    />
+                </div>
+            </div>
+
+            <!-- Resumen - Columna derecha (1/3) -->
+            <div class="lg:col-span-1">
+                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
+                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
+                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
+
+                    <!-- Días disponibles -->
+                    <div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
+                        <div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
+                        <div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
+                    </div>
+
+                    <!-- Detalles de períodos -->
+                    <div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
+                        <div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
+                            <h4 class="font-medium text-slate-900 dark:text-slate-100">
+                                Período {{ index + 1 }}:
+                            </h4>
+                            <div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
+                                <div>Inicio: {{ period.start_date }}</div>
+                                <div>Fin: {{ period.end_date }}</div>
+                                <div class="flex items-center gap-2">
+                                    <span>Días en período {{ index + 1 }}:</span>
+                                    <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                        {{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Resumen de días -->
+                    <div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
+                            <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
+                                {{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
+                            <span class="px-2 py-1 rounded-full text-xs font-medium"
+                                  :class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
+                                {{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Advertencia si se excede el límite -->
+                    <div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
+                        <div class="flex items-center gap-2">
+                            <GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
+                            <span class="text-sm text-red-600 dark:text-red-400 font-medium">
+                                Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
+                            </span>
+                        </div>
+                    </div>
+
+                    <!-- Recordatorios -->
+                    <div class="space-y-3">
+                        <h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
+                        <div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Las solicitudes deben hacerse con 15 días de anticipación</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Tu coordinador revisará y aprobará la solicitud</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Recibirás una notificación con la decisión</span>
+                            </div>
+                            <div class="flex items-start gap-2">
+                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
+                                <span>Los días se descontarán una vez aprobados</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Vacations/Employee/Form.vue b/src/pages/Vacations/Employee/Form.vue
new file mode 100644
index 0000000..4ac48cb
--- /dev/null
+++ b/src/pages/Vacations/Employee/Form.vue
@@ -0,0 +1,236 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Textarea         from '@Holos/Form/Textarea.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+const props = defineProps({
+    form: Object
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+
+function addPeriod() {
+    props.form.periods.push({
+        start_date: '',
+        end_date: '',
+        number_of_days: 0,
+    });
+}
+
+function removePeriod(index) {
+    if (props.form.periods.length > 1) {
+        props.form.periods.splice(index, 1);
+    }
+}
+
+function calculateDays(startDate, endDate) {
+    if (!startDate || !endDate) return 0;
+    
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    
+    // Validar que la fecha de inicio no sea posterior a la de fin
+    if (start > end) return 0;
+    
+    // Calcular la diferencia en días (incluyendo ambos días)
+    const timeDiff = end.getTime() - start.getTime();
+    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
+    
+    return daysDiff;
+}
+
+function updatePeriodDays(index) {
+    const period = props.form.periods[index];
+    if (period.start_date && period.end_date) {
+        period.number_of_days = calculateDays(period.start_date, period.end_date);
+    } else {
+        period.number_of_days = 0;
+    }
+}
+
+function getMinDate() {
+    const today = new Date();
+    let daysToAdd = 15;
+    let currentDate = new Date(today);
+    
+    while (daysToAdd > 0) {
+        currentDate.setDate(currentDate.getDate() + 1);
+        // Si no es domingo (0), contar el día
+        if (currentDate.getDay() !== 0) {
+            daysToAdd--;
+        }
+    }
+    
+    return currentDate.toISOString().split('T')[0];
+}
+
+// Función para desactivar domingos
+function isDisabled(date) {
+    return date.getDay() === 0; // 0 = domingo
+}
+
+// Función para formatear fecha a Y-m-d
+function formatDate(date) {
+    if (!date) return '';
+    
+    // Si la fecha ya es un string en formato correcto, devolverla
+    if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+        return date;
+    }
+    
+    let d;
+    if (date instanceof Date) {
+        d = date;
+    } else {
+        d = new Date(date);
+    }
+    
+    // Verificar que la fecha es válida
+    if (isNaN(d.getTime())) {
+        console.warn('Fecha inválida recibida:', date);
+        return '';
+    }
+    
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+// Watcher para detectar cambios en las fechas
+watch(() => props.form.periods, (newPeriods) => {
+    newPeriods.forEach((period, index) => {
+        if (period.start_date && period.end_date) {
+            updatePeriodDays(index);
+        }
+    });
+}, { deep: true });
+
+// Calcular total de días seleccionados
+const totalSelectedDays = computed(() => {
+    return props.form.periods.reduce((total, period) => {
+        return total + (period.number_of_days || 0);
+    }, 0);
+});
+
+// Exponer el total para el componente padre
+defineExpose({
+    totalSelectedDays
+});
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="space-y-6">
+        <!-- Períodos de vacaciones -->
+        <div class="space-y-4">
+            <div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
+                <div class="flex items-center justify-between">
+                    <h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
+                        Período {{ index + 1 }}
+                    </h4>
+                    <button
+                        v-if="form.periods.length > 1"
+                        type="button"
+                        @click="removePeriod(index)"
+                        class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
+                    >
+                        <GoogleIcon name="delete" class="w-4 h-4" />
+                        Eliminar
+                    </button>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.start_date"
+                                class="w-full"
+                                placeholder="Fecha de inicio"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (inicio):', date);
+                                    period.start_date = formatDate(date); 
+                                    console.log('Fecha formateada (inicio):', period.start_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <div class="relative">
+                            <VueDatePicker
+                                v-model="period.end_date"
+                                class="w-full"
+                                placeholder="Fecha de fin"
+                                format="dd/MM/yyyy"
+                                locale="es"
+                                :min-date="getMinDate()"
+                                :disabled-dates="isDisabled"
+                                :enable-time-picker="false"
+                                :auto-apply="true"
+                                :close-on-auto-apply="true"
+                                @update:model-value="(date) => { 
+                                    console.log('Fecha seleccionada (fin):', date);
+                                    period.end_date = formatDate(date); 
+                                    console.log('Fecha formateada (fin):', period.end_date);
+                                    updatePeriodDays(index); 
+                                }"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Botón añadir período -->
+            <button
+                type="button"
+                @click="addPeriod"
+                class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
+            >
+                <GoogleIcon name="add" />
+                Añadir período
+            </button>
+        </div>
+
+        <!-- Comentarios -->
+        <div>
+            <Textarea
+                v-model="form.comments"
+                id="comments"
+                rows="4"
+                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
+                placeholder="Agrega cualquier información adicional sobre tu solicitud..."
+                :onError="form.errors.comments"
+            />
+        </div>
+
+        <!-- Botón de envío -->
+        <div class="col-span-1 md:col-span-2 flex justify-center">
+            <PrimaryButton
+                v-text="$t('request')"
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+            />
+        </div>
+    </form>
+</template>
\ No newline at end of file
diff --git a/src/pages/Vacations/Employee/Index.vue b/src/pages/Vacations/Employee/Index.vue
new file mode 100644
index 0000000..b0bb3c3
--- /dev/null
+++ b/src/pages/Vacations/Employee/Index.vue
@@ -0,0 +1,136 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { api } from '@Services/Api';
+import { getDate } from '@Controllers/DateController';
+import { apiTo, viewTo } from './Module'
+
+import GoogleIcon          from '@Shared/GoogleIcon.vue';
+import PrimaryButton       from '@Holos/Button/Primary.vue';
+
+/** Propiedades */
+const vacationRequests = ref([]);
+
+/** Metodos */
+const getStatusClasses = (status) => {
+    const statusMap = {
+        'Pendiente': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+        'Aprobado': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+        'Rechazado': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+        'Agendado': 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+        'Cancelado': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+        'Concluido': 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-300'
+    };
+    
+    return statusMap[status] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300';
+};
+
+const getStatusIcon = (status) => {
+    const iconMap = {
+        'Pendiente': { name: 'schedule', classes: 'text-amber-600 dark:text-amber-400' },
+        'Aprobado': { name: 'check_circle', classes: 'text-blue-600 dark:text-blue-400' },
+        'Rechazado': { name: 'cancel', classes: 'text-orange-600 dark:text-orange-400' },
+        'Agendado': { name: 'event', classes: 'text-green-600 dark:text-green-400' },
+        'Cancelado': { name: 'block', classes: 'text-red-600 dark:text-red-400' },
+        'Concluido': { name: 'task_alt', classes: 'text-cyan-600 dark:text-cyan-400' }
+    };
+    
+    return iconMap[status] || { name: 'help', classes: 'text-gray-600 dark:text-gray-400' };
+};
+
+const getStatusIconContainer = (status) => {
+    const containerMap = {
+        'Pendiente': 'bg-amber-100 dark:bg-amber-900/30',
+        'Aprobado': 'bg-blue-100 dark:bg-blue-900/30',
+        'Rechazado': 'bg-orange-100 dark:bg-orange-900/30',
+        'Agendado': 'bg-green-100 dark:bg-green-900/30',
+        'Cancelado': 'bg-red-100 dark:bg-red-900/30',
+        'Concluido': 'bg-cyan-100 dark:bg-cyan-900/30'
+    };
+    
+    return containerMap[status] || 'bg-gray-100 dark:bg-gray-900/30';
+};
+
+/** Ciclos */
+onMounted(() => {
+    api.get(apiTo('index'), {
+        onSuccess: (r) => {
+            vacationRequests.value = r.vacation_requests.data;
+        }
+    });
+});
+</script>
+
+<template>
+    <div>
+        <!-- Header -->
+        <div class="flex items-center justify-between mb-8">
+            <div>
+                <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">
+                    Mis Solicitudes
+                </h1>
+                <p class="text-slate-600 dark:text-slate-400">Historial completo de todas tus solicitudes de vacaciones.</p>
+            </div>
+            <RouterLink :to="viewTo({ name: 'create' })">
+                <PrimaryButton
+                    type="button"
+                    class="flex items-center gap-2"
+                >
+                    <GoogleIcon name="calendar_month" />
+                    Nueva Solicitud
+                </PrimaryButton>
+            </RouterLink>
+        </div>
+
+        <!-- Lista de solicitudes -->
+        <div class="space-y-4">
+            <div v-for="vacation in vacationRequests" class="bg-white rounded-xl border border-slate-200 p-6 shadow-sm dark:bg-slate-800 dark:border-slate-700">
+                <div class="flex items-center justify-between mb-4">
+                    <div class="flex items-center gap-3">
+                        <div :class="`flex items-center justify-center w-10 h-10 rounded-lg ${getStatusIconContainer(vacation.status)}`">
+                            <GoogleIcon :name="getStatusIcon(vacation.status).name" :class="getStatusIcon(vacation.status).classes" />
+                        </div>
+                        <div>
+                            <h3 v-if="vacation.vacation_periods.length > 1" class="font-semibold text-slate-900 dark:text-slate-100">{{ vacation.vacation_periods.length }} periodos</h3>
+                            <h3 v-else class="font-semibold text-slate-900 dark:text-slate-100">{{ getDate(vacation.vacation_periods[0].start_date) }} - {{ getDate(vacation.vacation_periods[0].end_date) }}</h3>
+                            <p class="text-sm text-slate-600 dark:text-slate-400">{{ vacation.total_days }} días</p>
+                        </div>
+                    </div>
+                    <span :class="`px-3 py-1 rounded-full text-sm font-medium ${getStatusClasses(vacation.status)}`">
+                        {{ vacation.status }}
+                    </span>
+                </div>
+
+                <div v-for="(period, index) in vacation.vacation_periods" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                    <div>
+                        <p class="text-sm font-medium text-slate-700 dark:text-slate-300">Período {{ index + 1 }}:</p>
+                        <p class="text-sm text-slate-600 dark:text-slate-400">{{ getDate(period.start_date) }} - {{ getDate(period.end_date) }} ({{ period.number_of_days }} días)</p>
+                    </div>
+                </div>
+
+                <div class="flex justify-end gap-3">
+                    <button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 hover:bg-slate-100 rounded-lg with-transition dark:text-slate-400 dark:hover:text-slate-200 dark:hover:bg-slate-700">
+                        <GoogleIcon name="visibility" />
+                        Ver detalles
+                    </button>
+                    <button class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg with-transition dark:text-red-400 dark:hover:bg-red-900/20">
+                        <GoogleIcon name="cancel" />
+                        Cancelar
+                    </button>
+                </div>
+            </div>
+
+            <!-- Estado vacío cuando no hay solicitudes -->
+            <div v-if="vacationRequests.length == 0" class="text-center py-12">
+                <GoogleIcon name="event_busy" class="text-slate-300 text-6xl mb-4 dark:text-slate-600" />
+                <h3 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-2">No tienes más solicitudes</h3>
+                <p class="text-slate-600 dark:text-slate-400 mb-6">Cuando realices nuevas solicitudes de vacaciones aparecerán aquí.</p>
+                <RouterLink :to="viewTo({ name: 'create' })">
+                    <PrimaryButton>
+                        <GoogleIcon name="add" class="mr-2" />
+                        Nueva Solicitud
+                    </PrimaryButton>
+                </RouterLink>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/pages/Vacations/Employee/Module.js b/src/pages/Vacations/Employee/Module.js
new file mode 100644
index 0000000..43eb3d3
--- /dev/null
+++ b/src/pages/Vacations/Employee/Module.js
@@ -0,0 +1,16 @@
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`vacation-requests.employee.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `vacations.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`vacations.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index cce72fe..aacf6de 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -38,6 +38,26 @@ const router = createRouter({
                         icon: 'grid_view',
                     }
                 },
+                {
+                    path: 'vacations',
+                    name: 'vacations',
+                    meta: {
+                        title: 'Vacaciones',
+                        icon: 'calendar_month',
+                    },
+                    children: [
+                        {
+                            path: '',
+                            name: 'vacations.index',
+                            component: () => import('@Pages/Vacations/Employee/Index.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'vacations.create',
+                            component: () => import('@Pages/Vacations/Employee/Create.vue'),
+                        }
+                    ]
+                },
                 {
                     path: 'profile',
                     name: 'profile.show',
@@ -85,6 +105,21 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    path: 'vacations',
+                    name: 'vacations.coordinator',
+                    meta: {
+                        title: 'Vacaciones',
+                        icon: 'calendar_month',
+                    },
+                    children: [
+                        {
+                            path: '',
+                            name: 'vacations.coordinator.index',
+                            component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
+                        }
+                    ]
+                },
             ]
         },
         {
@@ -194,6 +229,22 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    path: 'vacations',
+                    name: 'admin.vacations',
+                    meta: {
+                        title: 'Vacaciones',
+                        icon: 'calendar_month',
+                    },
+                    redirect: '/admin/vacations',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.vacations.index',
+                            component: () => import('@Pages/Vacations/Admin/Index.vue'),
+                        }
+                    ]
+                },
                 {
                     path: 'courses',
                     name: 'admin.courses',
-- 
2.45.2


From d6bc7d7914587bd272da6a7a928610d3d4ba879f Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <zapata_pipe@hotmail.com>
Date: Tue, 23 Sep 2025 13:50:25 -0600
Subject: [PATCH 8/8] =?UTF-8?q?ADD:=20Tama=C3=B1o=20de=20p=C3=A1ginas,=20T?=
 =?UTF-8?q?oolbar=20dise=C3=B1o=20de=20texto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Holos/{ => PDF}/Canvas.vue     | 254 +++++----
 src/components/Holos/{ => PDF}/Draggable.vue  |   0
 src/components/Holos/PDF/PDFViewport.vue      | 353 +++++++++++++
 src/components/Holos/PDF/PageSizeSelector.vue | 141 +++++
 src/components/Holos/PDF/TextFormatter.vue    | 233 +++++++++
 src/components/Holos/PDFViewport.vue          | 261 ----------
 src/pages/Maquetador/Index.vue                | 483 +++++++++---------
 7 files changed, 1117 insertions(+), 608 deletions(-)
 rename src/components/Holos/{ => PDF}/Canvas.vue (73%)
 rename src/components/Holos/{ => PDF}/Draggable.vue (100%)
 create mode 100644 src/components/Holos/PDF/PDFViewport.vue
 create mode 100644 src/components/Holos/PDF/PageSizeSelector.vue
 create mode 100644 src/components/Holos/PDF/TextFormatter.vue
 delete mode 100644 src/components/Holos/PDFViewport.vue

diff --git a/src/components/Holos/Canvas.vue b/src/components/Holos/PDF/Canvas.vue
similarity index 73%
rename from src/components/Holos/Canvas.vue
rename to src/components/Holos/PDF/Canvas.vue
index e675454..92c32c1 100644
--- a/src/components/Holos/Canvas.vue
+++ b/src/components/Holos/PDF/Canvas.vue
@@ -31,12 +31,80 @@ const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
 const fileInput = ref(null);
 
 /** Propiedades computadas */
-const elementStyles = computed(() => ({
-    left: `${props.element.x}px`,
-    top: `${props.element.y}px`,
-    width: `${props.element.width || 200}px`,
-    height: `${props.element.height || 40}px`
-}));
+const elementStyles = computed(() => {
+    const baseStyles = {
+        left: `${props.element.x}px`,
+        top: `${props.element.y}px`,
+        width: `${props.element.width || 200}px`,
+        height: `${props.element.height || 40}px`
+    };
+
+    // Aplicar estilos de formato para elementos de texto
+    if (props.element.type === 'text' && props.element.formatting) {
+        const formatting = props.element.formatting;
+        
+        if (formatting.fontSize) {
+            baseStyles.fontSize = `${formatting.fontSize}px`;
+        }
+        
+        if (formatting.color) {
+            baseStyles.color = formatting.color;
+        }
+    }
+
+    return baseStyles;
+});
+
+// Propiedades computadas para clases CSS dinámicas
+const textContainerClasses = computed(() => {
+    if (props.element.type !== 'text') return {};
+    
+    const formatting = props.element.formatting || {};
+    
+    return {
+        'font-bold': formatting.bold,
+        'italic': formatting.italic,
+        'underline': formatting.underline,
+        'text-left': !formatting.textAlign || formatting.textAlign === 'left',
+        'text-center': formatting.textAlign === 'center',
+        'text-right': formatting.textAlign === 'right',
+        'justify-start': !formatting.textAlign || formatting.textAlign === 'left',
+        'justify-center': formatting.textAlign === 'center',
+        'justify-end': formatting.textAlign === 'right'
+    };
+});
+
+const inputClasses = computed(() => {
+    if (props.element.type !== 'text') return {};
+    
+    const formatting = props.element.formatting || {};
+    
+    return {
+        'font-bold': formatting.bold,
+        'italic': formatting.italic,
+        'underline': formatting.underline,
+        'text-left': !formatting.textAlign || formatting.textAlign === 'left',
+        'text-center': formatting.textAlign === 'center',
+        'text-right': formatting.textAlign === 'right'
+    };
+});
+
+const inputStyles = computed(() => {
+    if (props.element.type !== 'text') return {};
+    
+    const formatting = props.element.formatting || {};
+    const styles = {};
+    
+    if (formatting.fontSize) {
+        styles.fontSize = `${formatting.fontSize}px`;
+    }
+    
+    if (formatting.color) {
+        styles.color = formatting.color;
+    }
+    
+    return styles;
+});
 
 /** Watchers */
 watch(() => props.isSelected, (selected) => {
@@ -304,7 +372,9 @@ const getMaxHeight = () => {
             'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'),
             'cursor-se-resize': isResizing && resizeDirection === 'corner',
             'cursor-e-resize': isResizing && resizeDirection === 'right',
-            'cursor-s-resize': isResizing && resizeDirection === 'bottom'
+            'cursor-s-resize': isResizing && resizeDirection === 'bottom',
+            'z-50': isSelected,
+            'z-10': !isSelected
         }"
     >
         <!-- Input oculto para selección de archivos -->
@@ -316,10 +386,15 @@ const getMaxHeight = () => {
             class="hidden"
         />
 
-        <!-- Elemento de Texto -->
+        <!-- Elemento de Texto con formato aplicado -->
         <div
             v-if="element.type === 'text'"
-            class="w-full h-full flex items-center px-3 py-2 bg-blue-100 rounded border border-blue-300 text-blue-800 text-sm font-medium dark:bg-blue-900/30 dark:border-blue-600 dark:text-blue-300"
+            class="w-full h-full flex items-center px-3 py-2 bg-white rounded border border-gray-300 shadow-sm dark:bg-white dark:border-gray-400"
+            :class="textContainerClasses"
+            :style="{
+                fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
+                color: element.formatting?.color || '#374151'
+            }"
         >
             <input
                 v-if="isEditing"
@@ -328,14 +403,24 @@ const getMaxHeight = () => {
                 @blur="finishEditing"
                 @keydown="handleKeydown"
                 class="w-full bg-transparent outline-none cursor-text"
+                :class="inputClasses"
+                :style="inputStyles"
                 @mousedown.stop
             />
-            <span v-else class="truncate pointer-events-none">
+            <span 
+                v-else 
+                class="truncate pointer-events-none w-full"
+                :class="textContainerClasses"
+                :style="{
+                    fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
+                    color: element.formatting?.color || '#374151'
+                }"
+            >
                 {{ element.content || 'Nuevo texto' }}
             </span>
         </div>
 
-        <!-- Elemento de Imagen -->
+        <!-- Elemento de Imagen (sin cambios) -->
         <div
             v-else-if="element.type === 'image'"
             class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden"
@@ -354,34 +439,7 @@ const getMaxHeight = () => {
             </div>
         </div>
 
-        <!-- Elemento de Código -->
-        <div
-            v-else-if="element.type === 'code'"
-            class="w-full h-full bg-gray-900 rounded border overflow-hidden"
-        >
-            <div class="w-full h-6 bg-gray-800 flex items-center px-2 text-xs text-gray-400 border-b border-gray-700">
-                <div class="flex gap-1">
-                    <div class="w-2 h-2 bg-red-500 rounded-full"></div>
-                    <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
-                    <div class="w-2 h-2 bg-green-500 rounded-full"></div>
-                </div>
-                <span class="ml-2">{{ element.fileName || 'script.js' }}</span>
-            </div>
-            <div class="p-2 h-[calc(100%-24px)]">
-                <textarea
-                    v-if="isEditing"
-                    ref="editTextarea"
-                    v-model="editValue"
-                    @blur="finishEditing"
-                    @keydown="handleKeydown"
-                    class="w-full h-full bg-transparent text-green-400 text-xs font-mono outline-none resize-none cursor-text"
-                    @mousedown.stop
-                />
-                <pre v-else class="text-green-400 text-xs font-mono overflow-auto h-full pointer-events-none whitespace-pre-wrap">{{ element.content || 'console.log("Hola mundo");' }}</pre>
-            </div>
-        </div>
-
-        <!-- Elemento de Tabla -->
+        <!-- Elemento de Tabla (sin cambios en esta parte) -->
         <div
             v-else-if="element.type === 'table'"
             class="w-full h-full bg-white rounded border overflow-hidden"
@@ -439,10 +497,10 @@ const getMaxHeight = () => {
             </div>
         </div>
 
-        <!-- Controles del elemento -->
+        <!-- Controles del elemento con z-index más alto -->
         <div
             v-if="isSelected && !isEditing"
-            class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-10"
+            class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
         >
             <!-- Indicador de tamaño -->
             <div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
@@ -470,31 +528,60 @@ const getMaxHeight = () => {
         </div>
 
         <!-- Controles de redimensionamiento mejorados -->
-        <div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none">
-            <!-- Esquina inferior derecha -->
+        <div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none z-[55]">
+            <!-- Esquina inferior derecha - MÁS GRANDE Y VISIBLE -->
             <div
                 @mousedown.stop="startResize"
-                class="absolute -bottom-1 -right-1 w-2 h-2 bg-blue-500 border border-white cursor-se-resize pointer-events-auto rounded-sm resize-handle-corner"
+                class="absolute -bottom-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-se-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
                 title="Redimensionar"
-            ></div>
+            >
+                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
+            </div>
 
-            <!-- Lado derecho -->
+            <!-- Lado derecho - MÁS VISIBLE -->
             <div
                 @mousedown.stop="(event) => startResizeEdge(event, 'right')"
-                class="absolute top-1 bottom-1 -right-0.5 w-1 bg-blue-500 opacity-0 cursor-e-resize pointer-events-auto resize-handle-edge"
+                class="absolute top-2 bottom-2 -right-1 w-2 bg-blue-500 cursor-e-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 transition-all"
                 title="Redimensionar ancho"
-            ></div>
+            >
+                <!-- Indicador visual en el centro -->
+                <div class="absolute top-1/2 left-1/2 w-0.5 h-4 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
+            </div>
 
-            <!-- Lado inferior -->
+            <!-- Lado inferior - MÁS VISIBLE -->
             <div
                 @mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
-                class="absolute -bottom-0.5 left-1 right-1 h-1 bg-blue-500 opacity-0 cursor-s-resize pointer-events-auto resize-handle-edge"
+                class="absolute -bottom-1 left-2 right-2 h-2 bg-blue-500 cursor-s-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 transition-all"
                 title="Redimensionar alto"
-            ></div>
+            >
+                <!-- Indicador visual en el centro -->
+                <div class="absolute top-1/2 left-1/2 w-4 h-0.5 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
+            </div>
 
-            <!-- Puntos de agarre visuales en los bordes (solo visuales) -->
-            <div class="absolute top-1/2 -right-0.5 w-1 h-6 -translate-y-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
-            <div class="absolute -bottom-0.5 left-1/2 w-6 h-1 -translate-x-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
+            <!-- Esquinas adicionales para mejor UX -->
+            <div
+                @mousedown.stop="startResize"
+                class="absolute -top-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-nw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
+                title="Redimensionar"
+            >
+                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
+            </div>
+            
+            <div
+                @mousedown.stop="startResize"
+                class="absolute -top-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-ne-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
+                title="Redimensionar"
+            >
+                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
+            </div>
+            
+            <div
+                @mousedown.stop="startResize"
+                class="absolute -bottom-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-sw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
+                title="Redimensionar"
+            >
+                <div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
+            </div>
         </div>
 
         <!-- Indicador de arrastre -->
@@ -509,98 +596,55 @@ const getMaxHeight = () => {
             class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
         ></div>
 
-        <!-- Tooltip con instrucciones -->
-        <div
-            v-if="isSelected && !element.content && element.type !== 'image' && !isResizing"
-            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
-        >
-            {{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }}
-            {{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
-        </div>
-
-        <!-- Tooltip con instrucciones de redimensionamiento -->
-        <div
-            v-if="isSelected && !isEditing && element.type === 'image' && !element.content && !isResizing"  
-            class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
-        >
-            Arrastra las esquinas para redimensionar
-        </div>
-
         <!-- Botón para terminar edición de tabla -->
         <div
             v-if="isEditing && element.type === 'table'"
-            class="absolute -bottom-10 left-0 flex gap-2 z-20"
+            class="absolute -bottom-10 left-0 flex gap-2 z-[60]"
         >
             <button
                 @click="finishEditing"
                 class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
             >
-                Guardar (Ctrl+Enter)
+                Guardar
             </button>
             <button
                 @click="() => { isEditing = false; editValue = JSON.parse(JSON.stringify(element.content)); }"
                 class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded shadow-sm transition-colors"
             >
-                Cancelar (Esc)
+                Cancelar
             </button>
         </div>
     </div>
 </template>
 
 <style scoped>
-/* Estilos para los controles de redimensionamiento mejorados */
+/* Estilos existentes sin cambios... */
 .resize-handle-corner {
     transition: all 0.2s ease;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
 .resize-handle-corner:hover {
-    background-color: #2563eb;
     transform: scale(1.1);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
 
 .resize-handle-edge {
     transition: all 0.2s ease;
+    opacity: 0.7;
 }
 
 .resize-handle-edge:hover {
-    opacity: 0.7 !important;
-    background-color: #2563eb;
-}
-
-.resize-handle-visual {
-    transition: all 0.2s ease;
-}
-
-/* Efecto hover para los indicadores visuales */
-.group:hover .resize-handle-visual {
-    opacity: 0.6 !important;
+    opacity: 1;
+    transform: scale(1.05);
 }
 
 .group:hover .resize-handle-edge {
-    opacity: 0.4 !important;
+    opacity: 0.8;
 }
 
-/* Prevenir selección de texto durante el redimensionamiento */
 .select-none {
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
 }
-
-/* Animación suave para los controles */
-@keyframes pulse-resize {
-    0%, 100% {
-        opacity: 0.3;
-    }
-    50% {
-        opacity: 0.7;
-    }
-}
-
-.group:hover .resize-handle-visual {
-    animation: pulse-resize 2s infinite;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/Holos/Draggable.vue b/src/components/Holos/PDF/Draggable.vue
similarity index 100%
rename from src/components/Holos/Draggable.vue
rename to src/components/Holos/PDF/Draggable.vue
diff --git a/src/components/Holos/PDF/PDFViewport.vue b/src/components/Holos/PDF/PDFViewport.vue
new file mode 100644
index 0000000..5ea3d6a
--- /dev/null
+++ b/src/components/Holos/PDF/PDFViewport.vue
@@ -0,0 +1,353 @@
+<script setup>
+import { ref, computed, nextTick, watch } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import PageSizeSelector from '@Holos/PDF/PageSizeSelector.vue';
+
+/** Propiedades */
+const props = defineProps({
+    pages: {
+        type: Array,
+        default: () => [{ id: 1, elements: [] }]
+    },
+    selectedElementId: String,
+    isExporting: Boolean
+});
+
+/** Eventos */
+const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change', 'page-size-change']);
+
+/** Referencias */
+const viewportRef = ref(null);
+const currentPage = ref(1);
+const pageSize = ref('A4');
+
+/** Tamaños de página */
+const pageSizes = {
+    'A4': { width: 794, height: 1123, label: '210 × 297 mm' },
+    'A3': { width: 1123, height: 1587, label: '297 × 420 mm' },
+    'Letter': { width: 816, height: 1056, label: '216 × 279 mm' },
+    'Legal': { width: 816, height: 1344, label: '216 × 356 mm' },
+    'Tabloid': { width: 1056, height: 1632, label: '279 × 432 mm' }
+};
+
+/** Constantes de diseño ajustadas */
+const PAGE_MARGIN = 50;
+const ZOOM_LEVEL = 0.65;
+
+/** Propiedades computadas */
+const currentPageSize = computed(() => pageSizes[pageSize.value]);
+const PAGE_WIDTH = computed(() => currentPageSize.value.width);
+const PAGE_HEIGHT = computed(() => currentPageSize.value.height);
+const scaledPageWidth = computed(() => PAGE_WIDTH.value * ZOOM_LEVEL);
+const scaledPageHeight = computed(() => PAGE_HEIGHT.value * ZOOM_LEVEL);
+const totalPages = computed(() => props.pages.length);
+
+/** Watchers */
+watch(pageSize, (newSize) => {
+    emit('page-size-change', {
+        size: newSize,
+        dimensions: pageSizes[newSize]
+    });
+});
+
+/** Métodos */
+const handleDrop = (event, pageIndex) => {
+    event.preventDefault();
+    
+    const pageElement = event.currentTarget;
+    const rect = pageElement.getBoundingClientRect();
+    
+    const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
+    const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
+    
+    emit('drop', {
+        originalEvent: event,
+        pageIndex,
+        x: Math.max(0, Math.min(PAGE_WIDTH.value, relativeX)),
+        y: Math.max(0, Math.min(PAGE_HEIGHT.value, relativeY))
+    });
+};
+
+const handleDragOver = (event) => {
+    event.preventDefault();
+    emit('dragover', event);
+};
+
+const handleClick = (event, pageIndex) => {
+    if (event.target.classList.contains('pdf-page')) {
+        emit('click', { originalEvent: event, pageIndex });
+    }
+};
+
+const handleNextPage = () => {
+    if (currentPage.value >= totalPages.value) {
+        addPage();
+    } else {
+        setCurrentPage(currentPage.value + 1);
+    }
+};
+
+const addPage = () => {
+    emit('add-page');
+    // Solo cambiar a la nueva página cuando se agrega una
+    nextTick(() => {
+        const newPageNumber = totalPages.value + 1;
+        setCurrentPage(newPageNumber);
+    });
+};
+
+const deletePage = (pageIndex) => {
+    if (totalPages.value > 1) {
+        emit('delete-page', pageIndex);
+    }
+};
+
+const scrollToPage = (pageNumber) => {
+    if (viewportRef.value) {
+        const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
+        if (pageElement) {
+            pageElement.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'nearest',
+                inline: 'center'
+            });
+        }
+    }
+};
+
+const setCurrentPage = (pageNumber) => {
+    currentPage.value = pageNumber;
+    emit('page-change', pageNumber);
+    
+    // Mantener la página actual centrada
+    nextTick(() => {
+        scrollToPage(pageNumber);
+    });
+};
+
+/** Métodos expuestos */
+defineExpose({
+    scrollToPage,
+    setCurrentPage,
+    PAGE_WIDTH,
+    PAGE_HEIGHT,
+    ZOOM_LEVEL
+});
+</script>
+
+<template>
+    <div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
+        <!-- Toolbar de páginas -->
+        <div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
+            <div class="flex items-center gap-4">
+                <span class="text-sm font-medium text-gray-700 dark:text-primary-dt">
+                    Página {{ currentPage }} de {{ totalPages }}
+                </span>
+                
+                <div class="flex items-center gap-1 border-l border-gray-200 dark:border-primary/20 pl-4">
+                    <button
+                        @click="setCurrentPage(Math.max(1, currentPage - 1))"
+                        :disabled="currentPage <= 1"
+                        class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10"
+                        title="Página anterior"
+                    >
+                        <GoogleIcon name="keyboard_arrow_left" class="text-lg" />
+                    </button>
+                    
+                    <button
+                        @click="handleNextPage"
+                        :disabled="isExporting"
+                        class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10 relative"
+                        :title="currentPage >= totalPages ? 'Crear nueva página' : 'Página siguiente'"
+                    >
+                        <GoogleIcon name="keyboard_arrow_right" class="text-lg" />
+                        <!-- Indicador solo cuando estamos en la última página -->
+                        <GoogleIcon 
+                            v-if="currentPage >= totalPages"
+                            name="add" 
+                            class="absolute -top-1 -right-1 text-xs text-green-500 bg-white rounded-full"
+                        />
+                    </button>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-4">
+                <!-- Selector de tamaño de página -->
+                <PageSizeSelector v-model="pageSize" />
+                
+                <span class="text-xs text-gray-500 dark:text-primary-dt/70 bg-gray-50 dark:bg-primary/10 px-2 py-1 rounded">
+                    {{ Math.round(ZOOM_LEVEL * 100) }}% • {{ currentPageSize.label }}
+                </span>
+                
+                <button
+                    @click="addPage"
+                    :disabled="isExporting"
+                    class="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors disabled:opacity-50 font-medium"
+                >
+                    <GoogleIcon name="add" class="text-sm" />
+                    Nueva Página
+                </button>
+            </div>
+        </div>
+
+        <!-- Viewport de páginas horizontal -->
+        <div
+            ref="viewportRef"
+            class="flex-1 overflow-auto"
+            style="background-color: #f8fafc; background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 24px 24px;"
+        >
+            <!-- Contenedor horizontal centrado -->
+            <div class="flex items-center justify-center min-h-full p-6">
+                <div class="flex items-center gap-8">
+                    <!-- Páginas -->
+                    <div
+                        v-for="(page, pageIndex) in pages"
+                        :key="page.id"
+                        :data-page="pageIndex + 1"
+                        class="relative group flex-shrink-0"
+                    >
+                        <!-- Header de página -->
+                        <div class="flex flex-col items-center mb-3">
+                            <div class="flex items-center gap-3">
+                                <span class="text-sm font-medium text-gray-600 dark:text-primary-dt/80">
+                                    Página {{ pageIndex + 1 }}
+                                </span>
+                                <button
+                                    v-if="totalPages > 1"
+                                    @click="deletePage(pageIndex)"
+                                    :disabled="isExporting"
+                                    class="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 disabled:opacity-50 p-1 rounded hover:bg-red-50 transition-all"
+                                    title="Eliminar página"
+                                >
+                                    <GoogleIcon name="delete" class="text-sm" />
+                                </button>
+                            </div>
+                            <span class="text-xs text-gray-400 dark:text-primary-dt/50">
+                                {{ currentPageSize.label }}
+                            </span>
+                        </div>
+                        
+                        <!-- Contenedor de página con sombra -->
+                        <div class="relative">
+                            <!-- Sombra de página -->
+                            <div class="absolute top-2 left-2 w-full h-full bg-gray-400/30 rounded-lg"></div>
+                            
+                            <!-- Página PDF -->
+                            <div
+                                class="pdf-page relative bg-white rounded-lg border border-gray-300 dark:border-primary/20 overflow-hidden"
+                                :class="{
+                                    'ring-2 ring-blue-500 ring-opacity-50 shadow-lg': currentPage === pageIndex + 1,
+                                    'shadow-md hover:shadow-lg': currentPage !== pageIndex + 1,
+                                    'opacity-50': isExporting
+                                }"
+                                :style="{
+                                    width: `${scaledPageWidth}px`,
+                                    height: `${scaledPageHeight}px`
+                                }"
+                                @drop="(e) => handleDrop(e, pageIndex)"
+                                @dragover="handleDragOver"
+                                @click="(e) => handleClick(e, pageIndex)"
+                            >
+                                <!-- Área de contenido con márgenes visuales -->
+                                <div class="relative w-full h-full">
+                                    <!-- Guías de margen -->
+                                    <div
+                                        class="absolute border border-dashed border-blue-300/40 pointer-events-none"
+                                        :style="{
+                                            top: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
+                                            left: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
+                                            width: `${(PAGE_WIDTH - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`,
+                                            height: `${(PAGE_HEIGHT - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`
+                                        }"
+                                    ></div>
+                                    
+                                    <!-- Elementos de la página con transformación -->
+                                    <div 
+                                        class="absolute inset-0"
+                                        :style="{
+                                            transform: `scale(${ZOOM_LEVEL})`,
+                                            transformOrigin: 'top left',
+                                            width: `${PAGE_WIDTH}px`,
+                                            height: `${PAGE_HEIGHT}px`
+                                        }"
+                                    >
+                                        <slot
+                                            name="elements"
+                                            :page="page"
+                                            :pageIndex="pageIndex"
+                                            :pageWidth="PAGE_WIDTH"
+                                            :pageHeight="PAGE_HEIGHT"
+                                            :zoomLevel="ZOOM_LEVEL"
+                                        />
+                                    </div>
+                                </div>
+                                
+                                <!-- Indicador de página vacía -->
+                                <div
+                                    v-if="page.elements.length === 0"
+                                    class="absolute inset-0 flex items-center justify-center pointer-events-none z-10"
+                                    :style="{ transform: `scale(${1/ZOOM_LEVEL})` }"
+                                >
+                                    <div class="text-center text-gray-400 dark:text-primary-dt/50">
+                                        <GoogleIcon name="description" class="text-4xl mb-2" />
+                                        <p class="text-sm font-medium">Página {{ pageIndex + 1 }}</p>
+                                        <p class="text-xs">Arrastra elementos aquí</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Overlay durante exportación -->
+        <div
+            v-if="isExporting"
+            class="absolute inset-0 bg-white/90 dark:bg-primary-d/90 flex items-center justify-center z-50 backdrop-blur-sm"
+        >
+            <div class="text-center bg-white dark:bg-primary-d rounded-lg p-6 shadow-lg border border-gray-200 dark:border-primary/20">
+                <GoogleIcon name="picture_as_pdf" class="text-5xl text-red-600 dark:text-red-400 animate-pulse mb-3" />
+                <p class="text-lg font-semibold text-gray-900 dark:text-primary-dt mb-1">Generando PDF...</p>
+                <p class="text-sm text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.pdf-page {
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.pdf-page:hover {
+    transform: translateY(-2px);
+}
+
+.pdf-page.ring-2 {
+    transform: translateY(-4px);
+}
+
+.overflow-auto {
+    scroll-behavior: smooth;
+}
+
+.overflow-auto::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.overflow-auto::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 4px;
+}
+
+.overflow-auto::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+.overflow-auto::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Holos/PDF/PageSizeSelector.vue b/src/components/Holos/PDF/PageSizeSelector.vue
new file mode 100644
index 0000000..1ec725e
--- /dev/null
+++ b/src/components/Holos/PDF/PageSizeSelector.vue
@@ -0,0 +1,141 @@
+<script setup>
+import { ref, computed } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: 'A4'
+    }
+});
+
+/** Eventos */
+const emit = defineEmits(['update:modelValue']);
+
+/** Referencias */
+const isOpen = ref(false);
+
+/** Tamaños de página disponibles */
+const pageSizes = [
+    {
+        name: 'A4',
+        label: 'A4 (210 x 297 mm)',
+        width: 794,
+        height: 1123,
+        description: 'Estándar internacional'
+    },
+    {
+        name: 'A3',
+        label: 'A3 (297 x 420 mm)',
+        width: 1123,
+        height: 1587,
+        description: 'Doble de A4'
+    },
+    {
+        name: 'Letter',
+        label: 'Carta (216 x 279 mm)',
+        width: 816,
+        height: 1056,
+        description: 'Estándar US'
+    },
+    {
+        name: 'Legal',
+        label: 'Oficio (216 x 356 mm)', 
+        width: 816,
+        height: 1344,
+        description: 'Legal US'
+    },
+    {
+        name: 'Tabloid',
+        label: 'Tabloide (279 x 432 mm)',
+        width: 1056,
+        height: 1632,
+        description: 'Doble carta'
+    }
+];
+
+/** Propiedades computadas */
+const selectedSize = computed(() => {
+    return pageSizes.find(size => size.name === props.modelValue) || pageSizes[0];
+});
+
+/** Métodos */
+const selectSize = (size) => {
+    emit('update:modelValue', size.name);
+    isOpen.value = false;
+};
+</script>
+
+<template>
+    <div class="relative">
+        <!-- Selector principal -->
+        <button
+            @click="isOpen = !isOpen"
+            class="flex items-center gap-2 px-3 py-2 text-sm bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-md hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
+        >
+            <GoogleIcon name="aspect_ratio" class="text-gray-500 dark:text-primary-dt/70" />
+            <span class="text-gray-700 dark:text-primary-dt">{{ selectedSize.name }}</span>
+            <GoogleIcon 
+                name="expand_more" 
+                class="text-gray-400 dark:text-primary-dt/50 transition-transform"
+                :class="{ 'rotate-180': isOpen }"
+            />
+        </button>
+
+        <!-- Dropdown -->
+        <div
+            v-if="isOpen"
+            @click.away="isOpen = false"
+            class="absolute top-full left-0 mt-1 w-72 bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-lg shadow-lg z-50 py-2"
+        >
+            <div class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider border-b border-gray-100 dark:border-primary/20">
+                Tamaños de página
+            </div>
+            
+            <div class="max-h-64 overflow-y-auto">
+                <button
+                    v-for="size in pageSizes"
+                    :key="size.name"
+                    @click="selectSize(size)"
+                    class="w-full flex items-center gap-3 px-3 py-3 hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors text-left"
+                    :class="{
+                        'bg-blue-50 dark:bg-blue-900/20': selectedSize.name === size.name
+                    }"
+                >
+                    <div class="flex-shrink-0">
+                        <div 
+                            class="w-8 h-10 border border-gray-300 dark:border-primary/30 rounded-sm bg-white dark:bg-primary-d flex items-center justify-center"
+                            :class="{
+                                'border-blue-500 dark:border-blue-400': selectedSize.name === size.name
+                            }"
+                        >
+                            <div 
+                                class="bg-gray-200 dark:bg-primary/20 rounded-sm"
+                                :style="{
+                                    width: `${Math.min(20, (size.width / size.height) * 32)}px`,
+                                    height: `${Math.min(32, (size.height / size.width) * 20)}px`
+                                }"
+                                :class="{
+                                    'bg-blue-200 dark:bg-blue-800': selectedSize.name === size.name
+                                }"
+                            ></div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex-1 min-w-0">
+                        <div class="font-medium text-gray-900 dark:text-primary-dt">{{ size.label }}</div>
+                        <div class="text-xs text-gray-500 dark:text-primary-dt/70">{{ size.description }}</div>
+                        <div class="text-xs text-gray-400 dark:text-primary-dt/50 mt-1">
+                            {{ size.width }} x {{ size.height }} px
+                        </div>
+                    </div>
+                    
+                    <div v-if="selectedSize.name === size.name" class="flex-shrink-0">
+                        <GoogleIcon name="check" class="text-blue-500 dark:text-blue-400" />
+                    </div>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Holos/PDF/TextFormatter.vue b/src/components/Holos/PDF/TextFormatter.vue
new file mode 100644
index 0000000..eec22f7
--- /dev/null
+++ b/src/components/Holos/PDF/TextFormatter.vue
@@ -0,0 +1,233 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const props = defineProps({
+    element: {
+        type: Object,
+        default: null
+    },
+    visible: {
+        type: Boolean,
+        default: false
+    }
+});
+
+/** Eventos */
+const emit = defineEmits(['update']);
+
+/** Propiedades computadas */
+const formatting = computed(() => props.element?.formatting || {});
+const hasTextElement = computed(() => props.element?.type === 'text');
+
+/** Métodos */
+const toggleBold = () => {
+    if (!hasTextElement.value) return;
+    updateFormatting('bold', !formatting.value.bold);
+};
+
+const toggleItalic = () => {
+    if (!hasTextElement.value) return;
+    updateFormatting('italic', !formatting.value.italic);
+};
+
+const toggleUnderline = () => {
+    if (!hasTextElement.value) return;
+    updateFormatting('underline', !formatting.value.underline);
+};
+
+const updateFontSize = (size) => {
+    if (!hasTextElement.value) return;
+    updateFormatting('fontSize', size);
+};
+
+const updateTextAlign = (align) => {
+    if (!hasTextElement.value) return;
+    updateFormatting('textAlign', align);
+};
+
+const updateColor = (color) => {
+    if (!hasTextElement.value) return;
+    updateFormatting('color', color);
+};
+
+const updateFormatting = (key, value) => {
+    const newFormatting = { ...formatting.value, [key]: value };
+    emit('update', {
+        id: props.element.id,
+        formatting: newFormatting
+    });
+};
+
+/** Colores predefinidos */
+const predefinedColors = [
+    '#000000', '#333333', '#666666', '#999999',
+    '#FF0000', '#00FF00', '#0000FF', '#FFFF00',
+    '#FF00FF', '#00FFFF', '#FFA500', '#800080'
+];
+
+/** Tamaños de fuente */
+const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
+</script>
+
+<template>
+    <div 
+        v-if="visible && hasTextElement"
+        class="flex items-center gap-6 px-4 py-2 bg-gray-50 dark:bg-primary-d/50 border-b border-gray-200 dark:border-primary/20"
+    >
+        <!-- Estilo de texto -->
+        <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Estilo:</span>
+            <div class="flex gap-1">
+                <button
+                    @click="toggleBold"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center text-sm font-bold transition-colors',
+                        formatting.bold
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Negrita (Ctrl+B)"
+                >
+                    B
+                </button>
+                
+                <button
+                    @click="toggleItalic"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center text-sm italic transition-colors',
+                        formatting.italic
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Cursiva (Ctrl+I)"
+                >
+                    I
+                </button>
+                
+                <button
+                    @click="toggleUnderline"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center text-sm underline transition-colors',
+                        formatting.underline
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Subrayado (Ctrl+U)"
+                >
+                    U
+                </button>
+            </div>
+        </div>
+
+        <!-- Separador -->
+        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+
+        <!-- Tamaño de fuente -->
+        <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Tamaño:</span>
+            <select
+                :value="formatting.fontSize || 12"
+                @change="updateFontSize(parseInt($event.target.value))"
+                class="px-2 py-1 text-sm border border-gray-200 rounded bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            >
+                <option v-for="size in fontSizes" :key="size" :value="size">
+                    {{ size }}px
+                </option>
+            </select>
+        </div>
+
+        <!-- Separador -->
+        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+
+        <!-- Alineación -->
+        <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Alinear:</span>
+            <div class="flex gap-1">
+                <button
+                    @click="updateTextAlign('left')"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center transition-colors',
+                        (formatting.textAlign || 'left') === 'left'
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Alinear izquierda"
+                >
+                    <GoogleIcon name="format_align_left" class="text-sm" />
+                </button>
+                
+                <button
+                    @click="updateTextAlign('center')"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center transition-colors',
+                        formatting.textAlign === 'center'
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Centrar"
+                >
+                    <GoogleIcon name="format_align_center" class="text-sm" />
+                </button>
+                
+                <button
+                    @click="updateTextAlign('right')"
+                    :class="[
+                        'w-8 h-8 rounded flex items-center justify-center transition-colors',
+                        formatting.textAlign === 'right'
+                            ? 'bg-blue-500 text-white shadow-sm'
+                            : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20'
+                    ]"
+                    title="Alinear derecha"
+                >
+                    <GoogleIcon name="format_align_right" class="text-sm" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Separador -->
+        <div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div>
+
+        <!-- Color de texto -->
+        <div class="flex items-center gap-2">
+            <span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Color:</span>
+            <div class="flex items-center gap-2">
+                <!-- Color actual -->
+                <div 
+                    class="w-8 h-8 rounded border-2 border-gray-300 cursor-pointer relative overflow-hidden"
+                    :style="{ backgroundColor: formatting.color || '#000000' }"
+                    title="Color actual"
+                >
+                    <input
+                        type="color"
+                        :value="formatting.color || '#000000'"
+                        @input="updateColor($event.target.value)"
+                        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                    />
+                </div>
+                
+                <!-- Colores rápidos -->
+                <div class="flex gap-1">
+                    <button
+                        v-for="color in predefinedColors.slice(0, 6)"
+                        :key="color"
+                        @click="updateColor(color)"
+                        class="w-6 h-6 rounded border border-gray-300 hover:scale-110 transition-transform"
+                        :class="{
+                            'ring-2 ring-blue-500': (formatting.color || '#000000') === color
+                        }"
+                        :style="{ backgroundColor: color }"
+                        :title="color"
+                    ></button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Información del elemento -->
+        <div class="ml-auto flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
+            <GoogleIcon name="text_fields" class="text-sm" />
+            <span>Elemento de texto seleccionado</span>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/components/Holos/PDFViewport.vue b/src/components/Holos/PDFViewport.vue
deleted file mode 100644
index 967ca1b..0000000
--- a/src/components/Holos/PDFViewport.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<script setup>
-import { ref, computed, nextTick } from 'vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Propiedades */
-const props = defineProps({
-    pages: {
-        type: Array,
-        default: () => [{ id: 1, elements: [] }]
-    },
-    selectedElementId: String,
-    isExporting: Boolean
-});
-
-/** Eventos */
-const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change']);
-
-/** Referencias */
-const viewportRef = ref(null);
-const currentPage = ref(1);
-
-/** Constantes de diseño */
-const PAGE_WIDTH = 794; // A4 width in pixels (210mm @ 96dpi * 3.78)
-const PAGE_HEIGHT = 1123; // A4 height in pixels (297mm @ 96dpi * 3.78)
-const PAGE_MARGIN = 40;
-const ZOOM_LEVEL = 0.8; // Factor de escala para visualización
-
-/** Propiedades computadas */
-const scaledPageWidth = computed(() => PAGE_WIDTH * ZOOM_LEVEL);
-const scaledPageHeight = computed(() => PAGE_HEIGHT * ZOOM_LEVEL);
-const totalPages = computed(() => props.pages.length);
-
-/** Métodos */
-const handleDrop = (event, pageIndex) => {
-    event.preventDefault();
-    
-    const pageElement = event.currentTarget;
-    const rect = pageElement.getBoundingClientRect();
-    
-    // Calcular posición relativa a la página específica
-    const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
-    const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
-    
-    emit('drop', {
-        originalEvent: event,
-        pageIndex,
-        x: Math.max(PAGE_MARGIN, Math.min(PAGE_WIDTH - PAGE_MARGIN, relativeX)),
-        y: Math.max(PAGE_MARGIN, Math.min(PAGE_HEIGHT - PAGE_MARGIN, relativeY))
-    });
-};
-
-const handleDragOver = (event) => {
-    event.preventDefault();
-    emit('dragover', event);
-};
-
-const handleClick = (event, pageIndex) => {
-    if (event.target.classList.contains('pdf-page')) {
-        emit('click', { originalEvent: event, pageIndex });
-    }
-};
-
-const addPage = () => {
-    emit('add-page');
-    nextTick(() => {
-        scrollToPage(totalPages.value);
-    });
-};
-
-const deletePage = (pageIndex) => {
-    if (totalPages.value > 1) {
-        emit('delete-page', pageIndex);
-    }
-};
-
-const scrollToPage = (pageNumber) => {
-    if (viewportRef.value) {
-        const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
-        if (pageElement) {
-            pageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-    }
-};
-
-const setCurrentPage = (pageNumber) => {
-    currentPage.value = pageNumber;
-    emit('page-change', pageNumber);
-};
-
-/** Métodos expuestos */
-defineExpose({
-    scrollToPage,
-    setCurrentPage,
-    PAGE_WIDTH,
-    PAGE_HEIGHT,
-    ZOOM_LEVEL
-});
-</script>
-
-<template>
-    <div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
-        <!-- Toolbar de páginas -->
-        <div class="flex items-center justify-between px-4 py-2 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
-            <div class="flex items-center gap-3">
-                <span class="text-sm text-gray-600 dark:text-primary-dt">
-                    Página {{ currentPage }} de {{ totalPages }}
-                </span>
-                
-                <div class="flex items-center gap-1">
-                    <button
-                        @click="setCurrentPage(Math.max(1, currentPage - 1))"
-                        :disabled="currentPage <= 1"
-                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
-                    >
-                        <GoogleIcon name="keyboard_arrow_left" class="text-lg" />
-                    </button>
-                    
-                    <button
-                        @click="setCurrentPage(Math.min(totalPages, currentPage + 1))"
-                        :disabled="currentPage >= totalPages"
-                        class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
-                    >
-                        <GoogleIcon name="keyboard_arrow_right" class="text-lg" />
-                    </button>
-                </div>
-            </div>
-
-            <div class="flex items-center gap-2">
-                
-                <button
-                    @click="addPage"
-                    :disabled="isExporting"
-                    class="flex items-center gap-1 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50"
-                >
-                    <GoogleIcon name="add" class="text-sm" />
-                    Nueva Página
-                </button>
-            </div>
-        </div>
-
-        <!-- Viewport de páginas -->
-        <div
-            ref="viewportRef"
-            class="flex-1 overflow-auto p-8"
-            style="background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
-        >
-            <div class="flex flex-col items-center gap-8">
-                <!-- Páginas -->
-                <div
-                    v-for="(page, pageIndex) in pages"
-                    :key="page.id"
-                    :data-page="pageIndex + 1"
-                    class="relative"
-                    @mouseenter="setCurrentPage(pageIndex + 1)"
-                >
-                    <!-- Número de página -->
-                    <div class="absolute -top-6 left-0 flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
-                        <span>Página {{ pageIndex + 1 }}</span>
-                        
-                        <button
-                            v-if="totalPages > 1"
-                            @click="deletePage(pageIndex)"
-                            :disabled="isExporting"
-                            class="text-red-500 hover:text-red-700 disabled:opacity-50"
-                            title="Eliminar página"
-                        >
-                            <GoogleIcon name="delete" class="text-sm" />
-                        </button>
-                    </div>
-                    
-                    <!-- Página PDF -->
-                    <div
-                        class="pdf-page relative bg-white rounded-lg shadow-lg border border-gray-300 dark:border-primary/20"
-                        :class="{
-                            'ring-2 ring-blue-500': currentPage === pageIndex + 1,
-                            'opacity-50': isExporting
-                        }"
-                        :style="{
-                            width: `${scaledPageWidth}px`,
-                            height: `${scaledPageHeight}px`,
-                            transform: `scale(${ZOOM_LEVEL})`,
-                            transformOrigin: 'top left'
-                        }"
-                        @drop="(e) => handleDrop(e, pageIndex)"
-                        @dragover="handleDragOver"
-                        @click="(e) => handleClick(e, pageIndex)"
-                    >
-                        <!-- Márgenes visuales -->
-                        <div
-                            class="absolute border border-dashed border-gray-300 dark:border-primary/30 pointer-events-none"
-                            :style="{
-                                top: `${PAGE_MARGIN}px`,
-                                left: `${PAGE_MARGIN}px`,
-                                width: `${PAGE_WIDTH - (PAGE_MARGIN * 2)}px`,
-                                height: `${PAGE_HEIGHT - (PAGE_MARGIN * 2)}px`
-                            }"
-                        ></div>
-                        
-                        <!-- Elementos de la página -->
-                        <slot
-                            name="elements"
-                            :page="page"
-                            :pageIndex="pageIndex"
-                            :pageWidth="PAGE_WIDTH"
-                            :pageHeight="PAGE_HEIGHT"
-                        />
-                        
-                        <!-- Indicador de página vacía -->
-                        <div
-                            v-if="page.elements.length === 0"
-                            class="absolute inset-0 flex items-center justify-center pointer-events-none"
-                        >
-                            <div class="text-center text-gray-400 dark:text-primary-dt/50">
-                                <GoogleIcon name="description" class="text-4xl mb-2" />
-                                <p class="text-sm">Página {{ pageIndex + 1 }}</p>
-                                <p class="text-xs">Arrastra elementos aquí</p>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Regla inferior (tamaño de referencia) -->
-                    <div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/50 text-center">
-                        210 × 297 mm (A4)
-                    </div>
-                </div>
-                
-                <!-- Botón para agregar página al final -->
-                <button
-                    @click="addPage"
-                    :disabled="isExporting"
-                    class="flex flex-col items-center justify-center w-40 h-20 border-2 border-dashed border-gray-300 dark:border-primary/30 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors disabled:opacity-50"
-                >
-                    <GoogleIcon name="add" class="text-2xl text-gray-400 dark:text-primary-dt/50" />
-                    <span class="text-xs text-gray-500 dark:text-primary-dt/70 mt-1">Nueva Página</span>
-                </button>
-            </div>
-        </div>
-
-        <!-- Overlay durante exportación -->
-        <div
-            v-if="isExporting"
-            class="absolute inset-0 bg-white/80 dark:bg-primary-d/80 flex items-center justify-center z-50"
-        >
-            <div class="text-center">
-                <GoogleIcon name="picture_as_pdf" class="text-4xl text-red-600 dark:text-red-400 animate-pulse mb-2" />
-                <p class="text-sm font-medium text-gray-900 dark:text-primary-dt">Generando PDF...</p>
-                <p class="text-xs text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-.pdf-page {
-    transition: all 0.2s ease;
-}
-
-.pdf-page:hover {
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/Maquetador/Index.vue b/src/pages/Maquetador/Index.vue
index a9f2790..af51117 100644
--- a/src/pages/Maquetador/Index.vue
+++ b/src/pages/Maquetador/Index.vue
@@ -1,10 +1,11 @@
 <script setup>
-import { ref, nextTick, onMounted, computed } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
 import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Draggable from '@Holos/Draggable.vue';
-import CanvasElement from '@Holos/Canvas.vue';
-import PDFViewport from '@Holos/PDFViewport.vue';
+import Draggable from '@Holos/PDF/Draggable.vue';
+import CanvasElement from '@Holos/PDF/Canvas.vue';
+import PDFViewport from '@Holos/PDF/PDFViewport.vue';
+import TextFormatter from '@Holos/PDF/TextFormatter.vue';
 
 /** Estado reactivo */
 const pages = ref([{ id: 1, elements: [] }]);
@@ -13,10 +14,61 @@ const elementCounter = ref(0);
 const documentTitle = ref('Documento sin título');
 const isExporting = ref(false);
 const currentPage = ref(1);
+const pageIdCounter = ref(1); // <-- Agregar contador separado para páginas
+
+/** Estado para tamaño de página */
+const currentPageSize = ref({
+    width: 794,  // A4 por defecto
+    height: 1123
+});
+
+/** Manejar cambio de tamaño de página */
+const handlePageSizeChange = (sizeData) => {
+    currentPageSize.value = sizeData.dimensions;
+    // Aquí podrías ajustar elementos existentes si es necesario
+    window.Notify.info(`Tamaño de página cambiado a ${sizeData.size}`);
+};
+
+// Actualizar el método moveElement para usar el tamaño dinámico
+const moveElement = (moveData) => {
+    const element = allElements.value.find(el => el.id === moveData.id);
+    if (element) {
+        element.x = Math.max(0, Math.min(currentPageSize.value.width - (element.width || 200), moveData.x));
+        element.y = Math.max(0, Math.min(currentPageSize.value.height - (element.height || 40), moveData.y));
+    }
+};
 
 /** Referencias */
 const viewportRef = ref(null);
 
+/** Referencias adicionales */
+const textFormatterElement = ref(null);
+const showTextFormatter = ref(false);
+
+const selectElement = (elementId) => {
+    selectedElementId.value = elementId;
+    const selectedEl = allElements.value.find(el => el.id === elementId);
+    showTextFormatter.value = selectedEl?.type === 'text';
+    textFormatterElement.value = selectedEl;
+};
+
+const updateElement = (update) => {
+    const element = allElements.value.find(el => el.id === update.id);
+    if (element) {
+        Object.assign(element, update);
+        // Si se actualiza el formato, actualizar la referencia
+        if (update.formatting && textFormatterElement.value?.id === update.id) {
+            textFormatterElement.value = { ...element };
+        }
+    }
+};
+
+const handleCanvasClick = (clickData) => {
+    selectedElementId.value = null;
+    showTextFormatter.value = false;
+    textFormatterElement.value = null;
+};
+
 /** Tipos de elementos disponibles */
 const availableElements = [
     {
@@ -109,14 +161,6 @@ const handleDragOver = (event) => {
     event.preventDefault();
 };
 
-const handleCanvasClick = (clickData) => {
-    selectedElementId.value = null;
-};
-
-const selectElement = (elementId) => {
-    selectedElementId.value = elementId;
-};
-
 const deleteElement = (elementId) => {
     const index = allElements.value.findIndex(el => el.id === elementId);
     if (index !== -1) {
@@ -128,26 +172,11 @@ const deleteElement = (elementId) => {
     }
 };
 
-const updateElement = (update) => {
-    const element = allElements.value.find(el => el.id === update.id);
-    if (element) {
-        Object.assign(element, update);
-    }
-};
-
-const moveElement = (moveData) => {
-    const element = allElements.value.find(el => el.id === moveData.id);
-    if (element) {
-        element.x = moveData.x;
-        element.y = moveData.y;
-    }
-};
-
 /** Paginación */
 const addPage = () => {
-    const newPageId = Math.max(...pages.value.map(p => p.id)) + 1;
+    pageIdCounter.value++; // <-- Incrementar contador independiente
     pages.value.push({
-        id: newPageId,
+        id: pageIdCounter.value,
         elements: []
     });
 };
@@ -211,249 +240,215 @@ const exportPDF = async () => {
         isExporting.value = true;
         window.Notify.info('Generando PDF...');
 
-        // Crear un nuevo documento PDF
+        // Crear un nuevo documento PDF con el tamaño de página seleccionado
         const pdfDoc = await PDFDocument.create();
-        let currentPage = pdfDoc.addPage([595.28, 841.89]); // A4 size in points
-        let currentPageHeight = 841.89;
+        
+        // Convertir dimensiones de pixels a puntos (1 px = 0.75 puntos)
+        const pageWidthPoints = currentPageSize.value.width * 0.75;
+        const pageHeightPoints = currentPageSize.value.height * 0.75;
+        
+        let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
+        let currentPageHeight = pageHeightPoints;
         let yOffset = 50; // Margen superior
 
         // Obtener fuentes
         const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
         const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
 
-        // Ordenar elementos por posición (de arriba hacia abajo, de izquierda a derecha)
-        const sortedElements = [...allElements.value].sort((a, b) => {
-            if (Math.abs(a.y - b.y) < 20) {
-                return a.x - b.x; // Si están en la misma línea, ordenar por X
-            }
-            return a.y - b.y; // Ordenar por Y
-        });
-
-        // Procesar elementos
-        for (const element of sortedElements) {
-            // Calcular posición en el PDF
-            const x = Math.max(50, Math.min(500, (element.x * 0.75) + 50)); // Convertir y limitar X
-            let y = currentPageHeight - yOffset - (element.y * 0.75); // Convertir Y
-
-            // Verificar si necesitamos una nueva página
-            const elementHeight = getElementHeight(element);
-            if (y - elementHeight < 50) {
-                currentPage = pdfDoc.addPage([595.28, 841.89]);
-                currentPageHeight = 841.89;
+        // Procesar páginas del maquetador
+        for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
+            const page = pages.value[pageIndex];
+            
+            // Crear nueva página PDF si no es la primera
+            if (pageIndex > 0) {
+                currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
+                currentPageHeight = pageHeightPoints;
                 yOffset = 50;
-                y = currentPageHeight - yOffset;
             }
 
-            switch (element.type) {
-                case 'text':
-                    if (element.content) {
-                        // Dividir texto largo en líneas
-                        const words = element.content.split(' ');
-                        const lines = [];
-                        let currentLine = '';
-                        const maxWidth = Math.min(400, (element.width || 200) * 0.75);
+            // Ordenar elementos de esta página por posición
+            const sortedElements = [...page.elements].sort((a, b) => {
+                if (Math.abs(a.y - b.y) < 20) {
+                    return a.x - b.x; // Si están en la misma línea, ordenar por X
+                }
+                return a.y - b.y; // Ordenar por Y
+            });
 
-                        for (const word of words) {
-                            const testLine = currentLine + (currentLine ? ' ' : '') + word;
-                            const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
-                            
-                            if (testWidth <= maxWidth) {
-                                currentLine = testLine;
-                            } else {
-                                if (currentLine) lines.push(currentLine);
-                                currentLine = word;
+            // Procesar elementos de la página
+            for (const element of sortedElements) {
+                // Calcular posición en el PDF manteniendo proporciones
+                const scaleX = pageWidthPoints / currentPageSize.value.width;
+                const scaleY = pageHeightPoints / currentPageSize.value.height;
+                
+                const x = Math.max(50, element.x * scaleX);
+                const y = currentPageHeight - (element.y * scaleY) - 50; // Margen superior
+
+                switch (element.type) {
+                    case 'text':
+                        if (element.content) {
+                            // Dividir texto largo en líneas
+                            const words = element.content.split(' ');
+                            const lines = [];
+                            let currentLine = '';
+                            const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
+
+                            for (const word of words) {
+                                const testLine = currentLine + (currentLine ? ' ' : '') + word;
+                                const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
+                                
+                                if (testWidth <= maxWidth) {
+                                    currentLine = testLine;
+                                } else {
+                                    if (currentLine) lines.push(currentLine);
+                                    currentLine = word;
+                                }
                             }
+                            if (currentLine) lines.push(currentLine);
+
+                            // Dibujar cada línea
+                            lines.forEach((line, index) => {
+                                currentPDFPage.drawText(line, {
+                                    x: x,
+                                    y: y - (index * 15),
+                                    size: 12,
+                                    font: helveticaFont,
+                                    color: rgb(0, 0, 0),
+                                });
+                            });
                         }
-                        if (currentLine) lines.push(currentLine);
+                        break;
 
-                        // Dibujar cada línea
-                        lines.forEach((line, index) => {
-                            currentPage.drawText(line, {
-                                x: x,
-                                y: y - (index * 15),
-                                size: 12,
-                                font: helveticaFont,
-                                color: rgb(0, 0, 0),
-                            });
-                        });
-
-                        yOffset += lines.length * 15 + 10;
-                    }
-                    break;
-
-                case 'code':
-                    if (element.content) {
-                        // Dibujar fondo para el código
-                        const codeLines = element.content.split('\n');
-                        const codeWidth = Math.min(450, (element.width || 300) * 0.75);
-                        const codeHeight = (codeLines.length * 12) + 20;
-
-                        currentPage.drawRectangle({
-                            x: x - 10,
-                            y: y - codeHeight,
-                            width: codeWidth,
-                            height: codeHeight,
-                            color: rgb(0.95, 0.95, 0.95),
-                        });
-
-                        // Dibujar código
-                        codeLines.forEach((line, index) => {
-                            // Truncar líneas muy largas
-                            const maxChars = Math.floor(codeWidth / 6);
-                            const displayLine = line.length > maxChars ? 
-                                line.substring(0, maxChars - 3) + '...' : line;
-
-                            currentPage.drawText(displayLine, {
-                                x: x - 5,
-                                y: y - 15 - (index * 12),
-                                size: 9,
-                                font: courierFont,
-                                color: rgb(0, 0, 0),
-                            });
-                        });
-
-                        yOffset += codeHeight + 20;
-                    }
-                    break;
-
-                case 'image':
-                    if (element.content && element.content.startsWith('data:image')) {
-                        try {
-                            // Convertir base64 a bytes
-                            const base64Data = element.content.split(',')[1];
-                            const imageBytes = Uint8Array.from(
-                                atob(base64Data), 
-                                c => c.charCodeAt(0)
-                            );
-                            
-                            let image;
-                            if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
-                                image = await pdfDoc.embedJpg(imageBytes);
-                            } else if (element.content.includes('image/png')) {
-                                image = await pdfDoc.embedPng(imageBytes);
-                            }
-
-                            if (image) {
-                                // Calcular dimensiones manteniendo proporción
-                                const maxWidth = Math.min(400, (element.width || 200) * 0.75);
-                                const maxHeight = Math.min(300, (element.height || 150) * 0.75);
+                    case 'image':
+                        if (element.content && element.content.startsWith('data:image')) {
+                            try {
+                                // Convertir base64 a bytes
+                                const base64Data = element.content.split(',')[1];
+                                const imageBytes = Uint8Array.from(
+                                    atob(base64Data), 
+                                    c => c.charCodeAt(0)
+                                );
                                 
-                                const imageAspectRatio = image.width / image.height;
-                                let displayWidth = maxWidth;
-                                let displayHeight = maxWidth / imageAspectRatio;
-                                
-                                if (displayHeight > maxHeight) {
-                                    displayHeight = maxHeight;
-                                    displayWidth = maxHeight * imageAspectRatio;
+                                let image;
+                                if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
+                                    image = await pdfDoc.embedJpg(imageBytes);
+                                } else if (element.content.includes('image/png')) {
+                                    image = await pdfDoc.embedPng(imageBytes);
                                 }
 
-                                currentPage.drawImage(image, {
+                                if (image) {
+                                    // Calcular dimensiones manteniendo proporción y escala
+                                    const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
+                                    const maxHeight = Math.min(300, (element.height || 150) * scaleY);
+                                    
+                                    const imageAspectRatio = image.width / image.height;
+                                    let displayWidth = maxWidth;
+                                    let displayHeight = maxWidth / imageAspectRatio;
+                                    
+                                    if (displayHeight > maxHeight) {
+                                        displayHeight = maxHeight;
+                                        displayWidth = maxHeight * imageAspectRatio;
+                                    }
+
+                                    currentPDFPage.drawImage(image, {
+                                        x: x,
+                                        y: y - displayHeight,
+                                        width: displayWidth,
+                                        height: displayHeight,
+                                    });
+                                }
+                            } catch (imageError) {
+                                console.warn('Error al procesar imagen:', imageError);
+                                // Dibujar placeholder para imagen
+                                currentPDFPage.drawRectangle({
                                     x: x,
-                                    y: y - displayHeight,
-                                    width: displayWidth,
-                                    height: displayHeight,
+                                    y: y - 60,
+                                    width: 100 * scaleX,
+                                    height: 60 * scaleY,
+                                    borderColor: rgb(0.7, 0.7, 0.7),
+                                    borderWidth: 1,
                                 });
 
-                                yOffset += displayHeight + 20;
+                                currentPDFPage.drawText('[Imagen no disponible]', {
+                                    x: x + 5,
+                                    y: y - 35,
+                                    size: 10,
+                                    font: helveticaFont,
+                                    color: rgb(0.7, 0.7, 0.7),
+                                });
                             }
-                        } catch (imageError) {
-                            console.warn('Error al procesar imagen:', imageError);
-                            // Dibujar placeholder para imagen
-                            currentPage.drawRectangle({
+                        } else {
+                            // Placeholder para imagen vacía
+                            currentPDFPage.drawRectangle({
                                 x: x,
                                 y: y - 60,
-                                width: 100,
-                                height: 60,
+                                width: 100 * scaleX,
+                                height: 60 * scaleY,
                                 borderColor: rgb(0.7, 0.7, 0.7),
                                 borderWidth: 1,
+                                borderDashArray: [3, 3],
                             });
 
-                            currentPage.drawText('[Imagen no disponible]', {
-                                x: x + 5,
+                            currentPDFPage.drawText('[Imagen]', {
+                                x: x + 25,
                                 y: y - 35,
                                 size: 10,
                                 font: helveticaFont,
                                 color: rgb(0.7, 0.7, 0.7),
                             });
-
-                            yOffset += 80;
                         }
-                    } else {
-                        // Placeholder para imagen vacía
-                        currentPage.drawRectangle({
-                            x: x,
-                            y: y - 60,
-                            width: 100,
-                            height: 60,
-                            borderColor: rgb(0.7, 0.7, 0.7),
-                            borderWidth: 1,
-                            borderDashArray: [3, 3],
-                        });
+                        break;
 
-                        currentPage.drawText('[Imagen]', {
-                            x: x + 25,
-                            y: y - 35,
-                            size: 10,
-                            font: helveticaFont,
-                            color: rgb(0.7, 0.7, 0.7),
-                        });
+                    case 'table':
+                        if (element.content && element.content.data) {
+                            const tableData = element.content.data;
+                            const cellWidth = 80 * scaleX;
+                            const cellHeight = 20 * scaleY;
+                            const tableWidth = tableData[0].length * cellWidth;
+                            const tableHeight = tableData.length * cellHeight;
 
-                        yOffset += 80;
-                    }
-                    break;
+                            // Dibujar bordes de la tabla
+                            currentPDFPage.drawRectangle({
+                                x: x,
+                                y: y - tableHeight,
+                                width: tableWidth,
+                                height: tableHeight,
+                                borderColor: rgb(0.3, 0.3, 0.3),
+                                borderWidth: 1,
+                            });
 
-                case 'table':
-                    if (element.content && element.content.data) {
-                        const tableData = element.content.data;
-                        const cellWidth = 80;
-                        const cellHeight = 20;
-                        const tableWidth = tableData[0].length * cellWidth;
-                        const tableHeight = tableData.length * cellHeight;
+                            // Dibujar contenido de las celdas
+                            tableData.forEach((row, rowIndex) => {
+                                row.forEach((cell, colIndex) => {
+                                    const cellX = x + (colIndex * cellWidth);
+                                    const cellY = y - (rowIndex * cellHeight) - 15;
 
-                        // Dibujar bordes de la tabla
-                        currentPage.drawRectangle({
-                            x: x,
-                            y: y - tableHeight,
-                            width: tableWidth,
-                            height: tableHeight,
-                            borderColor: rgb(0.3, 0.3, 0.3),
-                            borderWidth: 1,
-                        });
+                                    // Dibujar borde de celda
+                                    currentPDFPage.drawRectangle({
+                                        x: cellX,
+                                        y: y - ((rowIndex + 1) * cellHeight),
+                                        width: cellWidth,
+                                        height: cellHeight,
+                                        borderColor: rgb(0.7, 0.7, 0.7),
+                                        borderWidth: 0.5,
+                                    });
 
-                        // Dibujar contenido de las celdas
-                        tableData.forEach((row, rowIndex) => {
-                            row.forEach((cell, colIndex) => {
-                                const cellX = x + (colIndex * cellWidth);
-                                const cellY = y - (rowIndex * cellHeight) - 15;
+                                    // Dibujar texto de la celda (truncar si es muy largo)
+                                    const maxChars = Math.floor(cellWidth / 8);
+                                    const displayText = cell.length > maxChars ? 
+                                        cell.substring(0, maxChars - 3) + '...' : cell;
 
-                                // Dibujar borde de celda
-                                currentPage.drawRectangle({
-                                    x: cellX,
-                                    y: y - ((rowIndex + 1) * cellHeight),
-                                    width: cellWidth,
-                                    height: cellHeight,
-                                    borderColor: rgb(0.7, 0.7, 0.7),
-                                    borderWidth: 0.5,
-                                });
-
-                                // Dibujar texto de la celda (truncar si es muy largo)
-                                const maxChars = 10;
-                                const displayText = cell.length > maxChars ? 
-                                    cell.substring(0, maxChars - 3) + '...' : cell;
-
-                                currentPage.drawText(displayText, {
-                                    x: cellX + 5,
-                                    y: cellY,
-                                    size: 8,
-                                    font: helveticaFont,
-                                    color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0), // Encabezados en azul
+                                    currentPDFPage.drawText(displayText, {
+                                        x: cellX + 5,
+                                        y: cellY,
+                                        size: 8,
+                                        font: helveticaFont,
+                                        color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0),
+                                    });
                                 });
                             });
-                        });
-
-                        yOffset += tableHeight + 20;
-                    }
-                    break;
+                        }
+                        break;
+                }
             }
         }
 
@@ -504,6 +499,8 @@ const clearCanvas = () => {
         pages.value = [{ id: 1, elements: [] }];
         selectedElementId.value = null;
         elementCounter.value = 0;
+        pageIdCounter.value = 1; // <-- Resetear también el contador de páginas
+        currentPage.value = 1;
     }
 };
 
@@ -526,7 +523,7 @@ onMounted(() => {
 
 <template>
     <div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
-        <!-- Panel Izquierdo - Elementos -->
+        <!-- Panel Izquierdo - Elementos (sin cambios) -->
         <div class="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col">
             <!-- Header del panel -->
             <div class="p-4 border-b border-gray-200 dark:border-primary/20">
@@ -602,18 +599,12 @@ onMounted(() => {
 
         <!-- Área Principal con Viewport -->
         <div class="flex-1 flex flex-col">
-            <!-- Toolbar superior -->
+            <!-- Toolbar superior básico -->
             <div class="h-14 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20 flex items-center justify-between px-4">
                 <div class="flex items-center gap-4">
-                    <!-- Herramientas de formato (simuladas) -->
-                    <div class="flex items-center gap-1 text-sm">
-                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
-                            <GoogleIcon name="format_bold" class="text-gray-600 dark:text-primary-dt" />
-                        </button>
-                        <button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
-                            <GoogleIcon name="format_italic" class="text-gray-600 dark:text-primary-dt" />
-                        </button>
-                    </div>
+                    <h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
+                        {{ documentTitle }}
+                    </h2>
                 </div>
 
                 <div class="flex items-center gap-4">
@@ -633,6 +624,13 @@ onMounted(() => {
                 </div>
             </div>
 
+            <!-- TextFormatter como toolbar estático -->
+            <TextFormatter
+                :element="textFormatterElement"
+                :visible="showTextFormatter"
+                @update="updateElement"
+            />
+
             <!-- PDFViewport -->
             <PDFViewport
                 ref="viewportRef"
@@ -644,6 +642,7 @@ onMounted(() => {
                 @add-page="addPage"
                 @delete-page="deletePage"
                 @page-change="(page) => currentPage = page"
+                @page-size-change="handlePageSizeChange"
             >
                 <template #elements="{ page, pageIndex }">
                     <CanvasElement
-- 
2.45.2