diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..7571cec
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,50 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Build outputs
+dist
+dist-ssr
+*.local
+
+# Git
+.git
+.gitignore
+
+# Docker
+Dockerfile
+docker-compose.yml
+.dockerignore
+
+# IDE
+.vscode
+.idea
+*.sw?
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Documentation
+README.md
+*.md
+
+# Testing
+coverage
+.nyc_output
+
+# Logs
+logs
+*.log
diff --git a/.env.example b/.env.example
index 37712f0..74604e7 100644
--- a/.env.example
+++ b/.env.example
@@ -1,13 +1,10 @@
-VITE_API_URL=http://localhost:8080
-VITE_BASE_URL=http://localhost:3000
-
-VITE_REVERB_APP_ID=
-VITE_REVERB_APP_KEY=
-VITE_REVERB_APP_SECRET=
-VITE_REVERB_HOST="localhost"
-VITE_REVERB_PORT=8080
-VITE_REVERB_SCHEME=http
-VITE_REVERB_ACTIVE=false
+# API Configuration
+VITE_API_URL=http://localhost:3000/api
 
+# Environment
+VITE_APP_ENV=development
 APP_PORT=3000
 
+# App Configuration
+VITE_APP_NAME=GOLS Control
+VITE_APP_VERSION=1.0.0
diff --git a/.gitignore b/.gitignore
index 8ef7218..378ffdb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,9 +11,6 @@ node_modules
 dist
 dist-ssr
 *.local
-.env
-colors.css
-notes.md
 
 # Editor directories and files
 .vscode/*
@@ -25,3 +22,11 @@ notes.md
 *.njsproj
 *.sln
 *.sw?
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# Docker
+docker-compose.override.yml
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..ed0fbb0
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,33 @@
+# Stage 1: Build the application
+FROM node:22-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files first to leverage Docker cache
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the application
+ARG VITE_API_URL
+ENV VITE_API_URL=$VITE_API_URL
+RUN npm run build
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:alpine AS production
+
+# Copy the built artifacts from the builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy custom Nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/README.md b/README.md
index 1511959..f08a85e 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,22 @@
-# Vue 3 + Vite
+# Estructura del Proyecto - GOLS Control Frontend
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+##  Docker (Producción)
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+```bash
+# 1. Configurar
+cp .env.production .env
+
+# 2. Levantar
+docker-compose up -d
+
+# 3. Verificar en http://localhost
+```
+
+Ver [DOCKER.md](DOCKER.md) para más detalles.
+
+##  Notas
+
+- Los componentes de PrimeVue se auto-importan
+- TypeScript configurado con strict mode
+- Tailwind CSS v4 integrado
+- Variables CSS personalizadas en `main.css`
diff --git a/agent.md b/agent.md
deleted file mode 100644
index 9b02518..0000000
--- a/agent.md
+++ /dev/null
@@ -1,200 +0,0 @@
-# Prompt: Generador de Módulos CRUD siguiendo la Estructura de Users
-
-Eres un agente especializado en crear módulos CRUD completos para aplicaciones Vue 3 + Composition API siguiendo la estructura establecida en el módulo Users como referencia.
-
-## 🏗️ ESTRUCTURA OBLIGATORIA
-
-Cada módulo debe seguir exactamente esta estructura de archivos:
-
-```
-ModuleName/
-├── Index.vue          # Vista principal con listado paginado
-├── Create.vue         # Formulario de creación
-├── Edit.vue           # Formulario de edición
-├── Form.vue           # Componente de formulario compartido
-├── Settings.vue       # Configuraciones (si aplica)
-├── Module.js          # Utilidades centralizadas del módulo
-├── Modals/
-│   └── Show.vue       # Modal para mostrar detalles
-└── [OtrosArchivos].vue # Archivos específicos del módulo
-```
-
-## 📋 ESPECIFICACIONES TÉCNICAS
-
-### 1. **Module.js - Archivo Central** (OBLIGATORIO)
-```javascript
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`admin.{module}.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
-    name: `admin.{module}.${name}`, params, query 
-})
-
-// Obtener traducción del componente
-const transl = (str) => lang(`{module}.${str}`)
-
-// Control de permisos
-const can = (permission) => hasPermission(`{module}.${permission}`)
-
-export { can, viewTo, apiTo, transl }
-```
-
-### 2. **Index.vue - Vista Principal** (OBLIGATORIO)
-Debe incluir:
-- ✅ `useSearcher` para búsqueda paginada
-- ✅ `SearcherHead` con título y botones de acción
-- ✅ `Table` component con templates: `#head`, `#body`, `#empty`
-- ✅ Modales para `Show` y `Destroy`
-- ✅ Control de permisos para cada acción (`can()`)
-- ✅ Acciones estándar: Ver, Editar, Eliminar, Settings (si aplica)
-
-### 3. **Create.vue - Creación** (OBLIGATORIO)
-```javascript
-// Estructura mínima:
-const form = useForm({
-    // campos del formulario
-});
-
-function submit() {
-    form.post(apiTo('store'), {
-        onSuccess: () => {
-            Notify.success(Lang('register.create.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-```
-
-### 4. **Edit.vue - Edición** (OBLIGATORIO)
-```javascript
-// Estructura mínima:
-const form = useForm({
-    id: null,
-    // otros campos
-});
-
-function submit() {
-    form.put(apiTo('update', { [resource]: form.id }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        },
-    })
-}
-
-onMounted(() => {
-    api.get(apiTo('show', { [resource]: vroute.params.id }), {
-        onSuccess: (r) => form.fill(r.[resource])
-    });
-})
-```
-
-### 5. **Form.vue - Formulario Compartido** (OBLIGATORIO)
-- ✅ Props: `action` (create/update), `form` (objeto de formulario)
-- ✅ Emit: `submit` evento
-- ✅ Grid responsive: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4`
-- ✅ Descripción dinámica: `transl(\`\${action}.description\`)`
-- ✅ Slot para campos adicionales
-- ✅ Botón de submit con estado de carga
-
-### 6. **Modals/Show.vue** (OBLIGATORIO)
-- ✅ `ShowModal` base component
-- ✅ `defineExpose({ open: (data) => {...} })`
-- ✅ Header con información principal
-- ✅ Detalles organizados con iconos
-- ✅ Enlaces de contacto (email, teléfono)
-- ✅ Fechas formateadas con `getDateTime`
-
-## 🎨 PATRONES DE DISEÑO OBLIGATORIOS
-
-### **Imports Estándar**
-```javascript
-// Vue
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-
-// Services
-import { api, useForm, useSearcher } from '@Services/Api';
-
-// Module
-import { apiTo, transl, viewTo, can } from './Module';
-
-// Components
-import IconButton from '@Holos/Button/Icon.vue'
-import PageHeader from '@Holos/PageHeader.vue';
-```
-
-### **Control de Permisos**
-```html
-<!-- Siempre usar can() del módulo -->
-<RouterLink v-if="can('create')" :to="viewTo({ name: 'create' })">
-<IconButton v-if="can('destroy')" @click="destroyModal.open(model)">
-```
-
-### **Navegación Consistente**
-```html
-<!-- Header con botón de retorno -->
-<PageHeader :title="transl('create.title')">
-    <RouterLink :to="viewTo({ name: 'index' })">
-        <IconButton icon="arrow_back" :title="$t('return')" filled />
-    </RouterLink>
-</PageHeader>
-```
-
-### **Grid Responsive**
-```html
-<!-- Formularios siempre con esta estructura -->
-<form class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-```
-
-## 🔧 COMPONENTES REUTILIZABLES OBLIGATORIOS
-
-### **De @Holos:**
-- `Button/Icon.vue`, `Button/Primary.vue`
-- `Form/Input.vue`, `Form/Selectable.vue` 
-- `Modal/Template/Destroy.vue`, `Modal/Show.vue`
-- `PageHeader.vue`, `Searcher.vue`, `Table.vue`
-- `FormSection.vue`, `SectionBorder.vue`
-
-### **De @Services:**
-- `useForm`, `useSearcher`, `api`
-
-### **De @Plugins:**
-- `hasPermission`, sistema de roles
-
-## 📝 INSTRUCCIONES PARA EL AGENTE
-
-Cuando se te solicite crear un módulo:
-
-1. **PREGUNTA PRIMERO:**
-   - Nombre del módulo
-   - Campos principales del formulario
-   - Relaciones con otros módulos
-   - Permisos específicos necesarios
-   - Si requiere configuraciones especiales
-
-2. **GENERA SIEMPRE:**
-   - Todos los archivos de la estructura obligatoria
-   - Module.js con las 4 funciones principales
-   - Permisos específicos del módulo
-   - Traducciones básicas necesarias
-
-3. **RESPETA SIEMPRE:**
-   - Los patrones de naming
-   - La estructura de componentes
-   - Los imports estándar
-   - El sistema de permisos
-   - La navegación consistente
-
-4. **VALIDA QUE:**
-   - Todos los archivos tengan la estructura correcta
-   - Los permisos estén implementados
-   - Las rutas sean consistentes
-   - Los formularios tengan validación
-   - Los modales funcionen correctamente
-
-¿Entendido? Responde "ESTRUCTURA CONFIRMADA" y luego solicita los detalles del módulo que debo crear.
\ No newline at end of file
diff --git a/colors.css.example b/colors.css.example
deleted file mode 100644
index 449a831..0000000
--- a/colors.css.example
+++ /dev/null
@@ -1,34 +0,0 @@
-@theme {
-    --color-page: #fff;
-    --color-page-t: #000;
-    --color-page-d: #292524;
-    --color-page-dt: #fff;
-    --color-primary: #374151;
-    --color-primary-t: #fff;
-    --color-primary-d: #1c1917;
-    --color-primary-dt: #fff;
-    --color-secondary: #3b82f6;
-    --color-secondary-t: #fff;
-    --color-secondary-d: #312e81;
-    --color-secondary-dt: #fff;
-    --color-primary-info: #06b6d4;
-    --color-primary-info-t: #fff;
-    --color-primary-info-d: #06b6d4;
-    --color-primary-info-dt: #fff;
-    --color-secondary-info: #06b6d4;
-    --color-secondary-info-t: #fff;
-    --color-secondary-info-d: #06b6d4;
-    --color-secondary-info-dt: #fff;
-    --color-success: #22c55e;
-    --color-success-t: #fff;
-    --color-success-d: #22c55e;
-    --color-success-dt: #fff;
-    --color-danger: #ef4444;
-    --color-danger-t: #fff;
-    --color-danger-d: #ef4444;
-    --color-danger-dt: #fecaca;
-    --color-warning: #eab308;
-    --color-warning-t: #fff;
-    --color-warning-d: #eab308;
-    --color-warning-dt: #fff;
-}
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..cf2230f
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,56 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppConfig: typeof import('./src/components/layout/AppConfig.vue')['default']
+    AppTopbar: typeof import('./src/components/Holos/AppTopbar.vue')['default']
+    Avatar: typeof import('primevue/avatar')['default']
+    Badge: typeof import('primevue/badge')['default']
+    Breadcrumb: typeof import('primevue/breadcrumb')['default']
+    Button: typeof import('primevue/button')['default']
+    Card: typeof import('primevue/card')['default']
+    Checkbox: typeof import('primevue/checkbox')['default']
+    Chip: typeof import('primevue/chip')['default']
+    Column: typeof import('primevue/column')['default']
+    ConfirmDialog: typeof import('primevue/confirmdialog')['default']
+    DataTable: typeof import('primevue/datatable')['default']
+    Dialog: typeof import('primevue/dialog')['default']
+    Dropdown: typeof import('primevue/dropdown')['default']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    IconField: typeof import('primevue/iconfield')['default']
+    InputGroup: typeof import('primevue/inputgroup')['default']
+    InputGroupAddon: typeof import('primevue/inputgroupaddon')['default']
+    InputIcon: typeof import('primevue/inputicon')['default']
+    InputNumber: typeof import('primevue/inputnumber')['default']
+    InputSwitch: typeof import('primevue/inputswitch')['default']
+    InputText: typeof import('primevue/inputtext')['default']
+    KpiCard: typeof import('./src/components/shared/KpiCard.vue')['default']
+    Menu: typeof import('primevue/menu')['default']
+    Message: typeof import('primevue/message')['default']
+    Paginator: typeof import('primevue/paginator')['default']
+    Panel: typeof import('primevue/panel')['default']
+    ProgressSpinner: typeof import('primevue/progressspinner')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Select: typeof import('primevue/select')['default']
+    Sidebar: typeof import('./src/components/layout/Sidebar.vue')['default']
+    Tag: typeof import('primevue/tag')['default']
+    Textarea: typeof import('primevue/textarea')['default']
+    Toast: typeof import('primevue/toast')['default']
+    Toolbar: typeof import('primevue/toolbar')['default']
+    TopBar: typeof import('./src/components/layout/TopBar.vue')['default']
+  }
+  export interface GlobalDirectives {
+    StyleClass: typeof import('primevue/styleclass')['default']
+    Tooltip: typeof import('primevue/tooltip')['default']
+  }
+}
diff --git a/docker-compose.yml b/docker-compose.yml
index 25c89cd..af69aad 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,19 +1,18 @@
 services:
-  gols-frontend-v1:
+  controls-front:
     build:
       context: .
-      dockerfile: dockerfile
+      dockerfile: Dockerfile
+      args:
+        VITE_API_URL: ${VITE_API_URL}
+    container_name: front-controls
     ports:
-      - "${APP_PORT}:5173"
-    volumes:
-      - .:/var/www/gols-frontend-v1
-      - frontend-v1:/var/www/gols-frontend-v1/node_modules
+      - "${APP_PORT}:80"
     networks:
-      - gols-network
-    mem_limit: 512m
-volumes:
-  frontend-v1:
-    driver: local
+      - controls-network
+    restart: unless-stopped
+    mem_limit: 512mb
+
 networks:
-  gols-network:
+  controls-network:
     driver: bridge
\ No newline at end of file
diff --git a/dockerfile b/dockerfile
deleted file mode 100644
index 9132f7f..0000000
--- a/dockerfile
+++ /dev/null
@@ -1,17 +0,0 @@
-FROM node:22-alpine AS build
-
-WORKDIR /var/www/gols-frontend-v1
-
-COPY install.sh /usr/local/bin/install.sh
-RUN chmod +x /usr/local/bin/install.sh
-
-COPY package*.json ./
-
-RUN npm install
-
-COPY . .
-
-EXPOSE 3000
-
-ENTRYPOINT ["sh","/usr/local/bin/install.sh"]
-CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
diff --git a/index.html b/index.html
index 0749d22..8368882 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,13 @@
 <!doctype html>
-<html id="main-page" lang="es">
+<html lang="es">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Holos</title>
+    <title>Golscontrols V1</title>
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/index.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
- 
\ No newline at end of file
diff --git a/install.sh b/install.sh
deleted file mode 100644
index b40edd2..0000000
--- a/install.sh
+++ /dev/null
@@ -1,13 +0,0 @@
-#! /bin/bash
-
-if [ ! -f .env ]; then
-  cp .env.example .env
-fi
-
-if [ ! -f colors.css ]; then
-  cp colors.css.example colors.css
-fi
-
-exec "$@"
-
-echo "Done!"
\ No newline at end of file
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..b4a471c
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    server_name 127.0.0.1;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    # Optional: Cache static assets for better performance
+    location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|otf)$ {
+        expires 6M;
+        access_log off;
+        add_header Cache-Control "public";
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}
diff --git a/package-lock.json b/package-lock.json
index 1111854..af3fa98 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,68 +1,33 @@
 {
-  "name": "notsoweb.frontend",
-  "version": "0.9.12",
+  "name": "golscontros-frontend-v1",
+  "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "notsoweb.frontend",
-      "version": "0.9.12",
+      "name": "golscontros-frontend-v1",
+      "version": "0.0.0",
       "dependencies": {
-        "@popperjs/core": "^2.11.8",
         "@primeuix/themes": "^1.2.5",
-        "@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",
-        "luxon": "^3.5.0",
-        "material-symbols": "^0.36.2",
-        "pdf-lib": "^1.17.1",
-        "pinia": "^3.0.1",
+        "@primevue/auto-import-resolver": "^4.4.1",
+        "@tailwindcss/vite": "^4.1.16",
+        "@vueuse/core": "^14.0.0",
+        "axios": "^1.13.2",
+        "pinia": "^3.0.4",
+        "primeicons": "^7.0.0",
         "primevue": "^4.4.1",
-        "pusher-js": "^8.4.0",
-        "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"
+        "tailwindcss-primeui": "^0.6.1",
+        "unplugin-vue-components": "^30.0.0",
+        "vue": "^3.5.22",
+        "vue-router": "^4.6.3"
       },
       "devDependencies": {
-        "autoprefixer": "^10.4.20",
-        "vite-plugin-html": "^3.2.2"
-      }
-    },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@ampproject/remapping": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
+        "@types/node": "^24.6.0",
+        "@vitejs/plugin-vue": "^6.0.1",
+        "@vue/tsconfig": "^0.8.1",
+        "typescript": "~5.9.3",
+        "vite": "^7.1.7",
+        "vue-tsc": "^3.1.0"
       }
     },
     "node_modules/@babel/helper-string-parser": {
@@ -75,21 +40,21 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
-      "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz",
-      "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
+      "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.28.0"
+        "@babel/types": "^7.28.5"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -98,32 +63,23 @@
         "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",
-      "integrity": "sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==",
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
+      "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
-        "@babel/helper-validator-identifier": "^7.27.1"
+        "@babel/helper-validator-identifier": "^7.28.5"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.6.tgz",
-      "integrity": "sha512-ShbM/3XxwuxjFiuVBHA+d3j5dyac0aEVVq1oluIDf71hUw0aRF59dV/efUsIwFnR6m8JNM2FjZOzmaZ8yG61kw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
       "cpu": [
         "ppc64"
       ],
@@ -137,9 +93,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.6.tgz",
-      "integrity": "sha512-S8ToEOVfg++AU/bHwdksHNnyLyVM+eMVAOf6yRKFitnwnbwwPNqKr3srzFRe7nzV69RQKb5DgchIX5pt3L53xg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
       "cpu": [
         "arm"
       ],
@@ -153,9 +109,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.6.tgz",
-      "integrity": "sha512-hd5zdUarsK6strW+3Wxi5qWws+rJhCCbMiC9QZyzoxfk5uHRIE8T287giQxzVpEvCwuJ9Qjg6bEjcRJcgfLqoA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
       "cpu": [
         "arm64"
       ],
@@ -169,9 +125,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.6.tgz",
-      "integrity": "sha512-0Z7KpHSr3VBIO9A/1wcT3NTy7EB4oNC4upJ5ye3R7taCc2GUdeynSLArnon5G8scPwaU866d3H4BCrE5xLW25A==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
       "cpu": [
         "x64"
       ],
@@ -185,9 +141,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.6.tgz",
-      "integrity": "sha512-FFCssz3XBavjxcFxKsGy2DYK5VSvJqa6y5HXljKzhRZ87LvEi13brPrf/wdyl/BbpbMKJNOr1Sd0jtW4Ge1pAA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
       "cpu": [
         "arm64"
       ],
@@ -201,9 +157,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.6.tgz",
-      "integrity": "sha512-GfXs5kry/TkGM2vKqK2oyiLFygJRqKVhawu3+DOCk7OxLy/6jYkWXhlHwOoTb0WqGnWGAS7sooxbZowy+pK9Yg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
       "cpu": [
         "x64"
       ],
@@ -217,9 +173,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.6.tgz",
-      "integrity": "sha512-aoLF2c3OvDn2XDTRvn8hN6DRzVVpDlj2B/F66clWd/FHLiHaG3aVZjxQX2DYphA5y/evbdGvC6Us13tvyt4pWg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
       "cpu": [
         "arm64"
       ],
@@ -233,9 +189,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.6.tgz",
-      "integrity": "sha512-2SkqTjTSo2dYi/jzFbU9Plt1vk0+nNg8YC8rOXXea+iA3hfNJWebKYPs3xnOUf9+ZWhKAaxnQNUf2X9LOpeiMQ==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
       "cpu": [
         "x64"
       ],
@@ -249,9 +205,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.6.tgz",
-      "integrity": "sha512-SZHQlzvqv4Du5PrKE2faN0qlbsaW/3QQfUUc6yO2EjFcA83xnwm91UbEEVx4ApZ9Z5oG8Bxz4qPE+HFwtVcfyw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
       "cpu": [
         "arm"
       ],
@@ -265,9 +221,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.6.tgz",
-      "integrity": "sha512-b967hU0gqKd9Drsh/UuAm21Khpoh6mPBSgz8mKRq4P5mVK8bpA+hQzmm/ZwGVULSNBzKdZPQBRT3+WuVavcWsQ==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
       "cpu": [
         "arm64"
       ],
@@ -281,9 +237,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.6.tgz",
-      "integrity": "sha512-aHWdQ2AAltRkLPOsKdi3xv0mZ8fUGPdlKEjIEhxCPm5yKEThcUjHpWB1idN74lfXGnZ5SULQSgtr5Qos5B0bPw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
       "cpu": [
         "ia32"
       ],
@@ -297,9 +253,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.6.tgz",
-      "integrity": "sha512-VgKCsHdXRSQ7E1+QXGdRPlQ/e08bN6WMQb27/TMfV+vPjjTImuT9PmLXupRlC90S1JeNNW5lzkAEO/McKeJ2yg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
       "cpu": [
         "loong64"
       ],
@@ -313,9 +269,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.6.tgz",
-      "integrity": "sha512-WViNlpivRKT9/py3kCmkHnn44GkGXVdXfdc4drNmRl15zVQ2+D2uFwdlGh6IuK5AAnGTo2qPB1Djppj+t78rzw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
       "cpu": [
         "mips64el"
       ],
@@ -329,9 +285,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.6.tgz",
-      "integrity": "sha512-wyYKZ9NTdmAMb5730I38lBqVu6cKl4ZfYXIs31Baf8aoOtB4xSGi3THmDYt4BTFHk7/EcVixkOV2uZfwU3Q2Jw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
       "cpu": [
         "ppc64"
       ],
@@ -345,9 +301,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.6.tgz",
-      "integrity": "sha512-KZh7bAGGcrinEj4qzilJ4hqTY3Dg2U82c8bv+e1xqNqZCrCyc+TL9AUEn5WGKDzm3CfC5RODE/qc96OcbIe33w==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
       "cpu": [
         "riscv64"
       ],
@@ -361,9 +317,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.6.tgz",
-      "integrity": "sha512-9N1LsTwAuE9oj6lHMyyAM+ucxGiVnEqUdp4v7IaMmrwb06ZTEVCIs3oPPplVsnjPfyjmxwHxHMF8b6vzUVAUGw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
       "cpu": [
         "s390x"
       ],
@@ -377,9 +333,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.6.tgz",
-      "integrity": "sha512-A6bJB41b4lKFWRKNrWoP2LHsjVzNiaurf7wyj/XtFNTsnPuxwEBWHLty+ZE0dWBKuSK1fvKgrKaNjBS7qbFKig==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
       "cpu": [
         "x64"
       ],
@@ -393,9 +349,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.6.tgz",
-      "integrity": "sha512-IjA+DcwoVpjEvyxZddDqBY+uJ2Snc6duLpjmkXm/v4xuS3H+3FkLZlDm9ZsAbF9rsfP3zeA0/ArNDORZgrxR/Q==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
       "cpu": [
         "arm64"
       ],
@@ -409,9 +365,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.6.tgz",
-      "integrity": "sha512-dUXuZr5WenIDlMHdMkvDc1FAu4xdWixTCRgP7RQLBOkkGgwuuzaGSYcOpW4jFxzpzL1ejb8yF620UxAqnBrR9g==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
       "cpu": [
         "x64"
       ],
@@ -425,9 +381,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.6.tgz",
-      "integrity": "sha512-l8ZCvXP0tbTJ3iaqdNf3pjaOSd5ex/e6/omLIQCVBLmHTlfXW3zAxQ4fnDmPLOB1x9xrcSi/xtCWFwCZRIaEwg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
       "cpu": [
         "arm64"
       ],
@@ -441,9 +397,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.6.tgz",
-      "integrity": "sha512-hKrmDa0aOFOr71KQ/19JC7az1P0GWtCN1t2ahYAf4O007DHZt/dW8ym5+CUdJhQ/qkZmI1HAF8KkJbEFtCL7gw==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
       "cpu": [
         "x64"
       ],
@@ -457,9 +413,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.6.tgz",
-      "integrity": "sha512-+SqBcAWoB1fYKmpWoQP4pGtx+pUUC//RNYhFdbcSA16617cchuryuhOCRpPsjCblKukAckWsV+aQ3UKT/RMPcA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
       "cpu": [
         "arm64"
       ],
@@ -473,9 +429,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.6.tgz",
-      "integrity": "sha512-dyCGxv1/Br7MiSC42qinGL8KkG4kX0pEsdb0+TKhmJZgCUDBGmyo1/ArCjNGiOLiIAgdbWgmWgib4HoCi5t7kA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
       "cpu": [
         "x64"
       ],
@@ -489,9 +445,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.6.tgz",
-      "integrity": "sha512-42QOgcZeZOvXfsCBJF5Afw73t4veOId//XD3i+/9gSkhSV6Gk3VPlWncctI+JcOyERv85FUo7RxuxGy+z8A43Q==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
       "cpu": [
         "arm64"
       ],
@@ -505,9 +461,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.6.tgz",
-      "integrity": "sha512-4AWhgXmDuYN7rJI6ORB+uU9DHLq/erBbuMoAuB4VWJTu5KtCgcKYPynF0YI1VkBNuEfjNlLrFr9KZPJzrtLkrQ==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
       "cpu": [
         "ia32"
       ],
@@ -521,9 +477,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.6.tgz",
-      "integrity": "sha512-NgJPHHbEpLQgDH2MjQu90pzW/5vvXIZ7KOnPyNBm92A6WgZ/7b6fJyUBjoumLqeOQQGqY2QjQxRo97ah4Sj0cA==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
       "cpu": [
         "x64"
       ],
@@ -536,72 +492,26 @@
         "node": ">=18"
       }
     },
-    "node_modules/@intlify/core-base": {
-      "version": "11.1.9",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.9.tgz",
-      "integrity": "sha512-Lrdi4wp3XnGhWmB/mMD/XtfGUw1Jt+PGpZI/M63X1ZqhTDjNHRVCs/i8vv8U1cwaj1A9fb0bkCQHLSL0SK+pIQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@intlify/message-compiler": "11.1.9",
-        "@intlify/shared": "11.1.9"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/message-compiler": {
-      "version": "11.1.9",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.9.tgz",
-      "integrity": "sha512-84SNs3Ikjg0rD1bOuchzb3iK1vR2/8nxrkyccIl5DjFTeMzE/Fxv6X+A7RN5ZXjEWelc1p5D4kHA6HEOhlKL5Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@intlify/shared": "11.1.9",
-        "source-map-js": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@intlify/shared": {
-      "version": "11.1.9",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.9.tgz",
-      "integrity": "sha512-H/83xgU1l8ox+qG305p6ucmoy93qyjIPnvxGWRA7YdOoHe1tIiW9IlEu4lTdsOR7cfP1ecrwyflQSqXdXBacXA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      }
-    },
-    "node_modules/@isaacs/fs-minipass": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
-      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
-      "license": "ISC",
-      "dependencies": {
-        "minipass": "^7.0.4"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.12",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
-      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
         "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -611,99 +521,22 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/source-map": {
-      "version": "0.3.10",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.10.tgz",
-      "integrity": "sha512-0pPkgz9dY+bijgistcTTJ5mR+ocqRXLuhXHYdzoMmmoJ2C9S46RCm2GMUbatPEUK9Yjy26IrAy8D/M00lLkv+Q==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
-      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.29",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
-      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "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",
-      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "license": "MIT",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@primeuix/styled": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.7.4.tgz",
@@ -735,14 +568,26 @@
       }
     },
     "node_modules/@primeuix/utils": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.1.tgz",
-      "integrity": "sha512-tQL/ZOPgCdD+NTimlUmhyD0ey8J1XmpZE4hDHM+/fnuBicVVmlKOd5HpS748LcOVRUKbWjmEPdHX4hi5XZoC1Q==",
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.6.2.tgz",
+      "integrity": "sha512-l+li4z6UAwamqbu4xodN3lqr1G4S37DKEJ7Y/nE3MjEx7zJ+KIBkb5voF26Nuly1UCmIcRWQJokhLRF7+sRhyg==",
       "license": "MIT",
       "engines": {
         "node": ">=12.11.0"
       }
     },
+    "node_modules/@primevue/auto-import-resolver": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@primevue/auto-import-resolver/-/auto-import-resolver-4.4.1.tgz",
+      "integrity": "sha512-DojDr7rc60gHfax6UD9Re2kBmzy7gXtEBOKXarY8AW4TWWOs0pgBzbY6ejWAks9gAh8EYMOE3loNlrd6+Fgc3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@primevue/metadata": "4.4.1"
+      },
+      "engines": {
+        "node": ">=12.11.0"
+      }
+    },
     "node_modules/@primevue/core": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.4.1.tgz",
@@ -772,37 +617,26 @@
         "node": ">=12.11.0"
       }
     },
-    "node_modules/@rollup/pluginutils": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
-      "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
-      "dev": true,
+    "node_modules/@primevue/metadata": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.4.1.tgz",
+      "integrity": "sha512-fvUVYqzF2Us/NNWXyvO2jFZu4mBk/fkquosmxMrWMULzVbjjptiTdvKWWL5AouATi/w/X1LfMg2dwiA/tbbx6g==",
       "license": "MIT",
-      "dependencies": {
-        "estree-walker": "^2.0.1",
-        "picomatch": "^2.2.2"
-      },
       "engines": {
-        "node": ">= 8.0.0"
+        "node": ">=12.11.0"
       }
     },
-    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.29",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.29.tgz",
+      "integrity": "sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==",
       "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
+      "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.45.0.tgz",
-      "integrity": "sha512-2o/FgACbji4tW1dzXOqAV15Eu7DdgbKsF2QKcxfG4xbh5iwU7yr5RRP5/U+0asQliSYv5M4o7BevlGIoSL0LXg==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.5.tgz",
+      "integrity": "sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==",
       "cpu": [
         "arm"
       ],
@@ -813,9 +647,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.45.0.tgz",
-      "integrity": "sha512-PSZ0SvMOjEAxwZeTx32eI/j5xSYtDCRxGu5k9zvzoY77xUNssZM+WV6HYBLROpY5CkXsbQjvz40fBb7WPwDqtQ==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.5.tgz",
+      "integrity": "sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==",
       "cpu": [
         "arm64"
       ],
@@ -826,9 +660,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.45.0.tgz",
-      "integrity": "sha512-BA4yPIPssPB2aRAWzmqzQ3y2/KotkLyZukVB7j3psK/U3nVJdceo6qr9pLM2xN6iRP/wKfxEbOb1yrlZH6sYZg==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.5.tgz",
+      "integrity": "sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==",
       "cpu": [
         "arm64"
       ],
@@ -839,9 +673,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.45.0.tgz",
-      "integrity": "sha512-Pr2o0lvTwsiG4HCr43Zy9xXrHspyMvsvEw4FwKYqhli4FuLE5FjcZzuQ4cfPe0iUFCvSQG6lACI0xj74FDZKRA==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.5.tgz",
+      "integrity": "sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==",
       "cpu": [
         "x64"
       ],
@@ -852,9 +686,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.45.0.tgz",
-      "integrity": "sha512-lYE8LkE5h4a/+6VnnLiL14zWMPnx6wNbDG23GcYFpRW1V9hYWHAw9lBZ6ZUIrOaoK7NliF1sdwYGiVmziUF4vA==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.5.tgz",
+      "integrity": "sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==",
       "cpu": [
         "arm64"
       ],
@@ -865,9 +699,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.45.0.tgz",
-      "integrity": "sha512-PVQWZK9sbzpvqC9Q0GlehNNSVHR+4m7+wET+7FgSnKG3ci5nAMgGmr9mGBXzAuE5SvguCKJ6mHL6vq1JaJ/gvw==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.5.tgz",
+      "integrity": "sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==",
       "cpu": [
         "x64"
       ],
@@ -878,9 +712,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.45.0.tgz",
-      "integrity": "sha512-hLrmRl53prCcD+YXTfNvXd776HTxNh8wPAMllusQ+amcQmtgo3V5i/nkhPN6FakW+QVLoUUr2AsbtIRPFU3xIA==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.5.tgz",
+      "integrity": "sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==",
       "cpu": [
         "arm"
       ],
@@ -891,9 +725,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.45.0.tgz",
-      "integrity": "sha512-XBKGSYcrkdiRRjl+8XvrUR3AosXU0NvF7VuqMsm7s5nRy+nt58ZMB19Jdp1RdqewLcaYnpk8zeVs/4MlLZEJxw==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.5.tgz",
+      "integrity": "sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==",
       "cpu": [
         "arm"
       ],
@@ -904,9 +738,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.45.0.tgz",
-      "integrity": "sha512-fRvZZPUiBz7NztBE/2QnCS5AtqLVhXmUOPj9IHlfGEXkapgImf4W9+FSkL8cWqoAjozyUzqFmSc4zh2ooaeF6g==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.5.tgz",
+      "integrity": "sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==",
       "cpu": [
         "arm64"
       ],
@@ -917,9 +751,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.45.0.tgz",
-      "integrity": "sha512-Btv2WRZOcUGi8XU80XwIvzTg4U6+l6D0V6sZTrZx214nrwxw5nAi8hysaXj/mctyClWgesyuxbeLylCBNauimg==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.5.tgz",
+      "integrity": "sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==",
       "cpu": [
         "arm64"
       ],
@@ -929,10 +763,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.45.0.tgz",
-      "integrity": "sha512-Li0emNnwtUZdLwHjQPBxn4VWztcrw/h7mgLyHiEI5Z0MhpeFGlzaiBHpSNVOMB/xucjXTTcO+dhv469Djr16KA==",
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.5.tgz",
+      "integrity": "sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==",
       "cpu": [
         "loong64"
       ],
@@ -942,10 +776,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.45.0.tgz",
-      "integrity": "sha512-sB8+pfkYx2kvpDCfd63d5ScYT0Fz1LO6jIb2zLZvmK9ob2D8DeVqrmBDE0iDK8KlBVmsTNzrjr3G1xV4eUZhSw==",
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.5.tgz",
+      "integrity": "sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==",
       "cpu": [
         "ppc64"
       ],
@@ -956,9 +790,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.45.0.tgz",
-      "integrity": "sha512-5GQ6PFhh7E6jQm70p1aW05G2cap5zMOvO0se5JMecHeAdj5ZhWEHbJ4hiKpfi1nnnEdTauDXxPgXae/mqjow9w==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.5.tgz",
+      "integrity": "sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==",
       "cpu": [
         "riscv64"
       ],
@@ -969,9 +803,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.45.0.tgz",
-      "integrity": "sha512-N/euLsBd1rekWcuduakTo/dJw6U6sBP3eUq+RXM9RNfPuWTvG2w/WObDkIvJ2KChy6oxZmOSC08Ak2OJA0UiAA==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.5.tgz",
+      "integrity": "sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==",
       "cpu": [
         "riscv64"
       ],
@@ -982,9 +816,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.45.0.tgz",
-      "integrity": "sha512-2l9sA7d7QdikL0xQwNMO3xURBUNEWyHVHfAsHsUdq+E/pgLTUcCE+gih5PCdmyHmfTDeXUWVhqL0WZzg0nua3g==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.5.tgz",
+      "integrity": "sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==",
       "cpu": [
         "s390x"
       ],
@@ -995,9 +829,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.45.0.tgz",
-      "integrity": "sha512-XZdD3fEEQcwG2KrJDdEQu7NrHonPxxaV0/w2HpvINBdcqebz1aL+0vM2WFJq4DeiAVT6F5SUQas65HY5JDqoPw==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.5.tgz",
+      "integrity": "sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==",
       "cpu": [
         "x64"
       ],
@@ -1008,9 +842,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.45.0.tgz",
-      "integrity": "sha512-7ayfgvtmmWgKWBkCGg5+xTQ0r5V1owVm67zTrsEY1008L5ro7mCyGYORomARt/OquB9KY7LpxVBZes+oSniAAQ==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.5.tgz",
+      "integrity": "sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==",
       "cpu": [
         "x64"
       ],
@@ -1020,10 +854,23 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.5.tgz",
+      "integrity": "sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.45.0.tgz",
-      "integrity": "sha512-B+IJgcBnE2bm93jEW5kHisqvPITs4ddLOROAcOc/diBgrEiQJJ6Qcjby75rFSmH5eMGrqJryUgJDhrfj942apQ==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.5.tgz",
+      "integrity": "sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==",
       "cpu": [
         "arm64"
       ],
@@ -1034,9 +881,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.45.0.tgz",
-      "integrity": "sha512-+CXwwG66g0/FpWOnP/v1HnrGVSOygK/osUbu3wPRy8ECXjoYKjRAyfxYpDQOfghC5qPJYLPH0oN4MCOjwgdMug==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.5.tgz",
+      "integrity": "sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==",
       "cpu": [
         "ia32"
       ],
@@ -1046,10 +893,10 @@
         "win32"
       ]
     },
-    "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.45.0.tgz",
-      "integrity": "sha512-SRf1cytG7wqcHVLrBc9VtPK4pU5wxiB/lNIkNmW2ApKXIg+RpqwHfsaEK+e7eH4A1BpI6BX/aBWXxZCIrJg3uA==",
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.5.tgz",
+      "integrity": "sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==",
       "cpu": [
         "x64"
       ],
@@ -1059,116 +906,61 @@
         "win32"
       ]
     },
-    "node_modules/@socket.io/component-emitter": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
-      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.5.tgz",
+      "integrity": "sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==",
+      "cpu": [
+        "x64"
+      ],
       "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"
-      }
+      "optional": true,
+      "os": [
+        "win32"
+      ]
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
-      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.16.tgz",
+      "integrity": "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw==",
       "license": "MIT",
       "dependencies": {
-        "@ampproject/remapping": "^2.3.0",
-        "enhanced-resolve": "^5.18.1",
-        "jiti": "^2.4.2",
-        "lightningcss": "1.30.1",
-        "magic-string": "^0.30.17",
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.19",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.11"
+        "tailwindcss": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
-      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
-      "hasInstallScript": true,
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
+      "integrity": "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg==",
       "license": "MIT",
-      "dependencies": {
-        "detect-libc": "^2.0.4",
-        "tar": "^7.4.3"
-      },
       "engines": {
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.11",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.11",
-        "@tailwindcss/oxide-darwin-x64": "4.1.11",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.11",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.11",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.11",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
+        "@tailwindcss/oxide-android-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.16",
+        "@tailwindcss/oxide-darwin-x64": "4.1.16",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.16",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.16",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.16",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.16",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.16"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
-      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.16.tgz",
+      "integrity": "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA==",
       "cpu": [
         "arm64"
       ],
@@ -1182,9 +974,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
-      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.16.tgz",
+      "integrity": "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA==",
       "cpu": [
         "arm64"
       ],
@@ -1198,9 +990,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
-      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.16.tgz",
+      "integrity": "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg==",
       "cpu": [
         "x64"
       ],
@@ -1214,9 +1006,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
-      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.16.tgz",
+      "integrity": "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg==",
       "cpu": [
         "x64"
       ],
@@ -1230,9 +1022,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
-      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.16.tgz",
+      "integrity": "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw==",
       "cpu": [
         "arm"
       ],
@@ -1246,9 +1038,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
-      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.16.tgz",
+      "integrity": "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w==",
       "cpu": [
         "arm64"
       ],
@@ -1262,9 +1054,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
-      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.16.tgz",
+      "integrity": "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ==",
       "cpu": [
         "arm64"
       ],
@@ -1278,9 +1070,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
-      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.16.tgz",
+      "integrity": "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew==",
       "cpu": [
         "x64"
       ],
@@ -1294,9 +1086,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
-      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.16.tgz",
+      "integrity": "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw==",
       "cpu": [
         "x64"
       ],
@@ -1310,9 +1102,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
-      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.16.tgz",
+      "integrity": "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -1327,21 +1119,21 @@
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/core": "^1.4.3",
-        "@emnapi/runtime": "^1.4.3",
-        "@emnapi/wasi-threads": "^1.0.2",
-        "@napi-rs/wasm-runtime": "^0.2.11",
-        "@tybys/wasm-util": "^0.9.0",
-        "tslib": "^2.8.0"
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
       },
       "engines": {
         "node": ">=14.0.0"
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
-      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.16.tgz",
+      "integrity": "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A==",
       "cpu": [
         "arm64"
       ],
@@ -1355,9 +1147,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
-      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.16.tgz",
+      "integrity": "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg==",
       "cpu": [
         "x64"
       ],
@@ -1370,28 +1162,15 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.11.tgz",
-      "integrity": "sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==",
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.11",
-        "@tailwindcss/oxide": "4.1.11",
-        "postcss": "^8.4.41",
-        "tailwindcss": "4.1.11"
-      }
-    },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.11.tgz",
-      "integrity": "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.16.tgz",
+      "integrity": "sha512-bbguNBcDxsRmi9nnlWJxhfDWamY3lmcyACHcdO1crxfzuLpOhHLLtEIN/nCbbAtj5rchUgQD17QVAKi1f7IsKg==",
       "license": "MIT",
       "dependencies": {
-        "@tailwindcss/node": "4.1.11",
-        "@tailwindcss/oxide": "4.1.11",
-        "tailwindcss": "4.1.11"
+        "@tailwindcss/node": "4.1.16",
+        "@tailwindcss/oxide": "4.1.16",
+        "tailwindcss": "4.1.16"
       },
       "peerDependencies": {
         "vite": "^5.2.0 || ^6 || ^7"
@@ -1403,107 +1182,123 @@
       "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/node": {
+      "version": "24.10.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.0.tgz",
+      "integrity": "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
     },
-    "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==",
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
       "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",
-      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.1.tgz",
+      "integrity": "sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==",
+      "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-beta.29"
+      },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^5.0.0 || ^6.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
         "vue": "^3.2.25"
       }
     },
-    "node_modules/@vue/compiler-core": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.17.tgz",
-      "integrity": "sha512-Xe+AittLbAyV0pabcN7cP7/BenRBNcteM4aSDCtRvGw0d9OL+HG1u/XHLY/kt1q4fyMeZYXyIYrsHuPSiDPosA==",
+    "node_modules/@volar/language-core": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.23.tgz",
+      "integrity": "sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.27.5",
-        "@vue/shared": "3.5.17",
+        "@volar/source-map": "2.4.23"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.23.tgz",
+      "integrity": "sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.23",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.23.tgz",
+      "integrity": "sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.23",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.23.tgz",
+      "integrity": "sha512-nW7THWj5HOp085ROk65LwaoxuzDsjIxr485F4iu63BoxsXoSqKqmsUUoP4A7Gl67DgIgi0zJ8JFgHfvny/74MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.28.5",
+        "@vue/shared": "3.5.23",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
       }
     },
-    "node_modules/@vue/compiler-core/node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.17.tgz",
-      "integrity": "sha512-+2UgfLKoaNLhgfhV5Ihnk6wB4ljyW1/7wUIog2puUqajiC29Lp5R/IKDdkebh9jTbTogTbsgB+OY9cEWzG95JQ==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.23.tgz",
+      "integrity": "sha512-AT8RMw0vEzzzO0JU5gY0F6iCzaWUIh/aaRVordzMBKXRpoTllTT4kocHDssByPsvodNCfump/Lkdow2mT/O5KQ==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.17",
-        "@vue/shared": "3.5.17"
+        "@vue/compiler-core": "3.5.23",
+        "@vue/shared": "3.5.23"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.17.tgz",
-      "integrity": "sha512-rQQxbRJMgTqwRugtjw0cnyQv9cP4/4BxWfTdRBkqsTfLOHWykLzbOc3C4GGzAmdMDxhzU/1Ija5bTjMVrddqww==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.23.tgz",
+      "integrity": "sha512-3QTEUo4qg7FtQwaDJa8ou1CUikx5WTtZlY61rRRDu3lK2ZKrGoAGG8mvDgOpDsQ4A1bez9s+WtBB6DS2KuFCPw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.27.5",
-        "@vue/compiler-core": "3.5.17",
-        "@vue/compiler-dom": "3.5.17",
-        "@vue/compiler-ssr": "3.5.17",
-        "@vue/shared": "3.5.17",
+        "@babel/parser": "^7.28.5",
+        "@vue/compiler-core": "3.5.23",
+        "@vue/compiler-dom": "3.5.23",
+        "@vue/compiler-ssr": "3.5.23",
+        "@vue/shared": "3.5.23",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.17",
+        "magic-string": "^0.30.21",
         "postcss": "^8.5.6",
         "source-map-js": "^1.2.1"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.17.tgz",
-      "integrity": "sha512-hkDbA0Q20ZzGgpj5uZjb9rBzQtIHLS78mMilwrlpWk2Ep37DYntUz0PonQ6kr113vfOEdM+zTBuJDaceNIW0tQ==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.23.tgz",
+      "integrity": "sha512-Hld2xphbMjXs9Q9WKxPf2EqmE+Rq/FEDnK/wUBtmYq74HCV4XDdSCheAaB823OQXIIFGq9ig/RbAZkF9s4U0Ow==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.17",
-        "@vue/shared": "3.5.17"
+        "@vue/compiler-dom": "3.5.23",
+        "@vue/shared": "3.5.23"
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "7.7.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
-      "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/devtools-kit": "^7.7.7"
-      }
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
     },
     "node_modules/@vue/devtools-kit": {
       "version": "7.7.7",
@@ -1529,92 +1324,141 @@
         "rfdc": "^1.4.1"
       }
     },
-    "node_modules/@vue/reactivity": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.17.tgz",
-      "integrity": "sha512-l/rmw2STIscWi7SNJp708FK4Kofs97zc/5aEPQh4bOsReD/8ICuBcEmS7KGwDj5ODQLYWVN2lNibKJL1z5b+Lw==",
+    "node_modules/@vue/language-core": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.1.3.tgz",
+      "integrity": "sha512-KpR1F/eGAG9D1RZ0/T6zWJs6dh/pRLfY5WupecyYKJ1fjVmDMgTPw9wXmKv2rBjo4zCJiOSiyB8BDP1OUwpMEA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.17"
+        "@volar/language-core": "2.4.23",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^3.0.0",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1",
+        "picomatch": "^4.0.2"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.23.tgz",
+      "integrity": "sha512-ji5w0qvrPyBmBx5Ldv4QGNsw0phgRreEvjt0iUf1lei2Sm8//9ZAi78uM2ZjsT5gk0YZilLuoRCIMvtuZlHMJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.23"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.17.tgz",
-      "integrity": "sha512-QQLXa20dHg1R0ri4bjKeGFKEkJA7MMBxrKo2G+gJikmumRS7PTD4BOU9FKrDQWMKowz7frJJGqBffYMgQYS96Q==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.23.tgz",
+      "integrity": "sha512-LMB0S6/G7mFJcpQeQaZrbsthFbWrIX8FVTzu5x9U3Ec8YW5MY1CGAnBBHNj+TPOBu3pIbtPpjrXtcaN04X+aBw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.17",
-        "@vue/shared": "3.5.17"
+        "@vue/reactivity": "3.5.23",
+        "@vue/shared": "3.5.23"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.17.tgz",
-      "integrity": "sha512-8El0M60TcwZ1QMz4/os2MdlQECgGoVHPuLnQBU3m9h3gdNRW9xRmI8iLS4t/22OQlOE6aJvNNlBiCzPHur4H9g==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.23.tgz",
+      "integrity": "sha512-r/PYc8W9THzEL0UExpTkV+d31zO+Jid/RMZIDG6aS/NekOEUHuCJkJgftySWZw7JTJO/+q9Kxkg8p+i7Q7Q+ew==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.17",
-        "@vue/runtime-core": "3.5.17",
-        "@vue/shared": "3.5.17",
+        "@vue/reactivity": "3.5.23",
+        "@vue/runtime-core": "3.5.23",
+        "@vue/shared": "3.5.23",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.17.tgz",
-      "integrity": "sha512-BOHhm8HalujY6lmC3DbqF6uXN/K00uWiEeF22LfEsm9Q93XeJ/plHTepGwf6tqFcF7GA5oGSSAAUock3VvzaCA==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.23.tgz",
+      "integrity": "sha512-NiWZsNCsXA20/VufcrW5u+Trt/PyFlpMmxaB2KERYM8eZgUoKUjXxJQb9ypq+LZ0Sp3XHJGNBR8DkhRnkKAMUw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.17",
-        "@vue/shared": "3.5.17"
+        "@vue/compiler-ssr": "3.5.23",
+        "@vue/shared": "3.5.23"
       },
       "peerDependencies": {
-        "vue": "3.5.17"
+        "vue": "3.5.23"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.17.tgz",
-      "integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.23.tgz",
+      "integrity": "sha512-0YZ1DYuC5o/YJPf6pFdt2KYxVGDxkDbH/1NYJnVJWUkzr8ituBEmFVQRNX2gCaAsFEjEDnLkWpgqlZA7htgS/g==",
       "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==",
+    "node_modules/@vue/tsconfig": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.8.1.tgz",
+      "integrity": "sha512-aK7feIWPXFSUhsCP9PFqPyFOcz4ENkb8hZ2pneL6m2UjCkccvaOhC/5KCKluuBufvp2KzkbdA2W2pk20vLzu3g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "5.x",
+        "vue": "^3.4.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==",
       "license": "MIT",
       "dependencies": {
-        "date-fns": "^4.1.0"
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.0.0",
+        "@vueuse/shared": "14.0.0"
       },
-      "engines": {
-        "node": ">=18.12.0"
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "vue": ">=3.3.0"
+        "vue": "^3.5.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==",
+    "node_modules/@vueuse/metadata": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.0.0.tgz",
+      "integrity": "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==",
       "license": "MIT",
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
+        "url": "https://github.com/sponsors/antfu"
       }
     },
-    "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/@vueuse/shared": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.0.0.tgz",
+      "integrity": "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
     },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-      "devOptional": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -1623,40 +1467,10 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "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",
-      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+    "node_modules/alien-signals": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.0.6.tgz",
+      "integrity": "sha512-gCs0YqC1mkYGC6IRXsSrA62ShOSv1FlVN5tRp/Cs2vRWLK/BAeluWIdfsl253pFQPznKEvRmHhfep7crWfyfWQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -1666,142 +1480,26 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "license": "MIT"
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/axios": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
-      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
+      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/birpc": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.4.0.tgz",
-      "integrity": "sha512-5IdNxTyhXHv2UlgnPHQ0h+5ypVmkrYHzL8QT+DwFZ//2N/oNV8Ch+BCRmTJ3x6/z9Axo/cXYBc9eprsUVK/Jsg==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.7.0.tgz",
+      "integrity": "sha512-tub/wFGH49vNCm0xraykcY3TcRgX/3JsALYq/Lwrtti+bTyFHkCUAWF5wgYoie8P41wYwig2mIKiqoocr1EkEQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/browserslist": {
-      "version": "4.25.1",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
-      "integrity": "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001726",
-        "electron-to-chromium": "^1.5.173",
-        "node-releases": "^2.0.19",
-        "update-browserslist-db": "^1.1.3"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "devOptional": true,
-      "license": "MIT"
-    },
     "node_modules/call-bind-apply-helpers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -1815,104 +1513,21 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/camel-case": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-      "dev": true,
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
       "license": "MIT",
       "dependencies": {
-        "pascal-case": "^3.1.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001727",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
-      "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "CC-BY-4.0"
-    },
-    "node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "readdirp": "^4.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 14.16.0"
       },
       "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
+        "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/chownr": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
-      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/clean-css": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
-      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "source-map": "~0.6.0"
-      },
-      "engines": {
-        "node": ">= 10.0"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/colorette": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
-      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1925,122 +1540,38 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/connect-history-api-fallback": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/consola": {
-      "version": "2.15.3",
-      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
-      "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==",
-      "dev": true,
+    "node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
       "license": "MIT"
     },
     "node_modules/copy-anything": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
-      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
       "license": "MIT",
       "dependencies": {
-        "is-what": "^4.1.8"
+        "is-what": "^5.2.0"
       },
       "engines": {
-        "node": ">=12.13"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
-    "node_modules/css-select": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
-      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.0.1",
-        "domhandler": "^4.3.1",
-        "domutils": "^2.8.0",
-        "nth-check": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/css-what": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
-      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">= 6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "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",
-      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -2063,107 +1594,14 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/dom-serializer": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
-      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/domelementtype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ],
-      "license": "BSD-2-Clause"
-    },
-    "node_modules/domhandler": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
-      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "domelementtype": "^2.2.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/domutils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
-      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
-    "node_modules/dot-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/dotenv": {
-      "version": "16.6.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
-      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://dotenvx.com"
-      }
-    },
-    "node_modules/dotenv-expand": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-8.0.3.tgz",
-      "integrity": "sha512-SErOMvge0ZUyWd5B0NXMQlDkN+8r+HhVUsxgOO7IoPDOdDRD2JjExpN6y3KnFR66jsJMwSn1pqIivhU5rcJiNg==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2178,57 +1616,10 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/ejs": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
-      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "jake": "^10.8.5"
-      },
-      "bin": {
-        "ejs": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/electron-to-chromium": {
-      "version": "1.5.182",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.182.tgz",
-      "integrity": "sha512-Lv65Btwv9W4J9pyODI6EWpdnhfvrve/us5h1WspW8B2Fb0366REPtY3hX7ounk1CkV/TBjWCEvCBBbYbmV0qCA==",
-      "dev": true,
-      "license": "ISC"
-    },
-    "node_modules/engine.io-client": {
-      "version": "6.6.3",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
-      "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.3.1",
-        "engine.io-parser": "~5.2.1",
-        "ws": "~8.17.1",
-        "xmlhttprequest-ssl": "~2.1.1"
-      }
-    },
-    "node_modules/engine.io-parser": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
-      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/enhanced-resolve": {
-      "version": "5.18.2",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
-      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -2239,11 +1630,13 @@
       }
     },
     "node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true,
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
@@ -2294,9 +1687,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.25.6",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.6.tgz",
-      "integrity": "sha512-GVuzuUwtdsghE3ocJ9Bs8PNoF13HNQ5TXbEi2AhvVb8xU1Iwt9Fos9FEamfoee+u/TOsn7GUWc04lz46n2bbTg==",
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2306,42 +1699,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.6",
-        "@esbuild/android-arm": "0.25.6",
-        "@esbuild/android-arm64": "0.25.6",
-        "@esbuild/android-x64": "0.25.6",
-        "@esbuild/darwin-arm64": "0.25.6",
-        "@esbuild/darwin-x64": "0.25.6",
-        "@esbuild/freebsd-arm64": "0.25.6",
-        "@esbuild/freebsd-x64": "0.25.6",
-        "@esbuild/linux-arm": "0.25.6",
-        "@esbuild/linux-arm64": "0.25.6",
-        "@esbuild/linux-ia32": "0.25.6",
-        "@esbuild/linux-loong64": "0.25.6",
-        "@esbuild/linux-mips64el": "0.25.6",
-        "@esbuild/linux-ppc64": "0.25.6",
-        "@esbuild/linux-riscv64": "0.25.6",
-        "@esbuild/linux-s390x": "0.25.6",
-        "@esbuild/linux-x64": "0.25.6",
-        "@esbuild/netbsd-arm64": "0.25.6",
-        "@esbuild/netbsd-x64": "0.25.6",
-        "@esbuild/openbsd-arm64": "0.25.6",
-        "@esbuild/openbsd-x64": "0.25.6",
-        "@esbuild/openharmony-arm64": "0.25.6",
-        "@esbuild/sunos-x64": "0.25.6",
-        "@esbuild/win32-arm64": "0.25.6",
-        "@esbuild/win32-ia32": "0.25.6",
-        "@esbuild/win32-x64": "0.25.6"
-      }
-    },
-    "node_modules/escalade": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
-      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
       }
     },
     "node_modules/estree-walker": {
@@ -2350,38 +1733,20 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fastq": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
-      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
+    "node_modules/exsolve": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
+      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
+      "license": "MIT"
     },
     "node_modules/fdir": {
-      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
-      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
       "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },
@@ -2391,56 +1756,10 @@
         }
       }
     },
-    "node_modules/filelist": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
-      "integrity": "sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "minimatch": "^5.0.1"
-      }
-    },
-    "node_modules/filelist/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/filelist/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/follow-redirects": {
-      "version": "1.15.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
       "funding": [
         {
           "type": "individual",
@@ -2458,9 +1777,9 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
-      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
@@ -2473,35 +1792,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
-    "node_modules/fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2562,19 +1852,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -2593,16 +1870,6 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -2642,153 +1909,37 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "he": "bin/he"
-      }
-    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
-    "node_modules/html-minifier-terser": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
-      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "camel-case": "^4.1.2",
-        "clean-css": "^5.2.2",
-        "commander": "^8.3.0",
-        "he": "^1.2.0",
-        "param-case": "^3.0.4",
-        "relateurl": "^0.2.7",
-        "terser": "^5.10.0"
-      },
-      "bin": {
-        "html-minifier-terser": "cli.js"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
     "node_modules/is-what": {
-      "version": "4.1.16",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
-      "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
       "license": "MIT",
       "engines": {
-        "node": ">=12.13"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
-    "node_modules/jake": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
-      "integrity": "sha512-2P4SQ0HrLQ+fw6llpLnOaGAvN2Zu6778SJMrCUwns4fOoG9ayrTiZk3VV8sCPkVZF8ab0zksVpS8FDY5pRCNBA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "async": "^3.2.3",
-        "chalk": "^4.0.2",
-        "filelist": "^1.0.4",
-        "minimatch": "^3.1.2"
-      },
-      "bin": {
-        "jake": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/jiti": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
-      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "license": "MIT",
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
     },
-    "node_modules/jquery": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "license": "MIT"
-    },
-    "node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/laravel-echo": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/laravel-echo/-/laravel-echo-2.1.6.tgz",
-      "integrity": "sha512-X7tdIDhG/o8AenMvY83Hcjtw/TN/eKT+zA5WEENHIbY8tq12NQbdxtVePw1yImxXwKC/yZoVWNukFlG+gWqKCA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=20"
-      },
-      "peerDependencies": {
-        "pusher-js": "*",
-        "socket.io-client": "*"
-      }
-    },
     "node_modules/lightningcss": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
-      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -2801,22 +1952,43 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.30.1",
-        "lightningcss-darwin-x64": "1.30.1",
-        "lightningcss-freebsd-x64": "1.30.1",
-        "lightningcss-linux-arm-gnueabihf": "1.30.1",
-        "lightningcss-linux-arm64-gnu": "1.30.1",
-        "lightningcss-linux-arm64-musl": "1.30.1",
-        "lightningcss-linux-x64-gnu": "1.30.1",
-        "lightningcss-linux-x64-musl": "1.30.1",
-        "lightningcss-win32-arm64-msvc": "1.30.1",
-        "lightningcss-win32-x64-msvc": "1.30.1"
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
-      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
       "cpu": [
         "arm64"
       ],
@@ -2834,9 +2006,9 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
-      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
       "cpu": [
         "x64"
       ],
@@ -2854,9 +2026,9 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
-      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
       "cpu": [
         "x64"
       ],
@@ -2874,9 +2046,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
-      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
       "cpu": [
         "arm"
       ],
@@ -2894,9 +2066,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
-      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
       "cpu": [
         "arm64"
       ],
@@ -2914,9 +2086,9 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
-      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
       "cpu": [
         "arm64"
       ],
@@ -2934,9 +2106,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
-      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
       "cpu": [
         "x64"
       ],
@@ -2954,9 +2126,9 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
-      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
       "cpu": [
         "x64"
       ],
@@ -2974,9 +2146,9 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
-      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
       "cpu": [
         "arm64"
       ],
@@ -2994,9 +2166,9 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
-      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
       "cpu": [
         "x64"
       ],
@@ -3013,46 +2185,32 @@
         "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",
-      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-      "dev": true,
+    "node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
       "license": "MIT",
       "dependencies": {
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/luxon": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.7.1.tgz",
-      "integrity": "sha512-RkRWjA926cTvz5rAb1BqyWkKbbjzCGchDUIKMCUvNi17j6f6j8uHGDV82Aqcqtzd+icoYpELmG3ksgGiFNNcNg==",
-      "license": "MIT",
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.17",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
-      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
-    "node_modules/material-symbols": {
-      "version": "0.36.2",
-      "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.36.2.tgz",
-      "integrity": "sha512-FbxzGgQSmAb53Kajv+jyqcZ3Ck0ebfTBSMwHkMoyThsbrINiJb5mzheoiFXA/9MGc3cIl9XbhW8JxPM5vEP6iA==",
-      "license": "Apache-2.0"
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -3062,43 +2220,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/micromatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -3120,67 +2241,53 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
-      "license": "MIT",
-      "dependencies": {
-        "minipass": "^7.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
       "license": "MIT"
     },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+    "node_modules/mlly": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
+      "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==",
       "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "pathe": "^2.0.3",
+        "pkg-types": "^1.3.1",
+        "ufo": "^1.6.1"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
       }
     },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
+    },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/nanoid": {
       "version": "3.3.11",
@@ -3200,111 +2307,19 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/no-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "lower-case": "^2.0.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/node-html-parser": {
-      "version": "5.4.2",
-      "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-5.4.2.tgz",
-      "integrity": "sha512-RaBPP3+51hPne/OolXxcz89iYvQvKOydaqoePpOgXcrOKZhjVIzmpKZz+Hd/RBO2/zN2q6CNJhQzucVz+u3Jyw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "css-select": "^4.2.1",
-        "he": "1.2.0"
-      }
-    },
-    "node_modules/node-releases": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/nth-check": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
-      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      },
-      "funding": {
-        "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",
-      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "dot-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/pascal-case": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
     "node_modules/pathe": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/pathe/-/pathe-0.2.0.tgz",
-      "integrity": "sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==",
-      "dev": true,
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
       "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",
@@ -3318,9 +2333,9 @@
       "license": "ISC"
     },
     "node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3330,19 +2345,19 @@
       }
     },
     "node_modules/pinia": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
-      "integrity": "sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-api": "^7.7.2"
+        "@vue/devtools-api": "^7.7.7"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "typescript": ">=4.4.4",
-        "vue": "^2.7.0 || ^3.5.11"
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -3350,6 +2365,26 @@
         }
       }
     },
+    "node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.7",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
+      "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.7"
+      }
+    },
+    "node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -3378,11 +2413,10 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
       "license": "MIT"
     },
     "node_modules/primevue": {
@@ -3407,67 +2441,33 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
-    "node_modules/pusher-js": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/pusher-js/-/pusher-js-8.4.0.tgz",
-      "integrity": "sha512-wp3HqIIUc1GRyu1XrP6m2dgyE9MoCsXVsWNlohj0rjSkLf+a0jLvEyVubdg58oMk7bhjBWnFClgp8jfAa6Ak4Q==",
-      "license": "MIT",
-      "dependencies": {
-        "tweetnacl": "^1.0.3"
-      }
-    },
-    "node_modules/qs": {
-      "version": "6.9.7",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.7.tgz",
-      "integrity": "sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
       "funding": [
         {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
         },
         {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
         }
       ],
       "license": "MIT"
     },
-    "node_modules/relateurl": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
-      "dev": true,
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
       "license": "MIT",
       "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/rfdc": {
@@ -3477,9 +2477,9 @@
       "license": "MIT"
     },
     "node_modules/rollup": {
-      "version": "4.45.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.45.0.tgz",
-      "integrity": "sha512-WLjEcJRIo7i3WDDgOIJqVI2d+lAC3EwvOGy+Xfq6hs+GQuAA4Di/H72xmXkOhrIWFg2PFYSKZYfH0f4vfKXN4A==",
+      "version": "4.52.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.5.tgz",
+      "integrity": "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -3492,93 +2492,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.45.0",
-        "@rollup/rollup-android-arm64": "4.45.0",
-        "@rollup/rollup-darwin-arm64": "4.45.0",
-        "@rollup/rollup-darwin-x64": "4.45.0",
-        "@rollup/rollup-freebsd-arm64": "4.45.0",
-        "@rollup/rollup-freebsd-x64": "4.45.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.45.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.45.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.45.0",
-        "@rollup/rollup-linux-arm64-musl": "4.45.0",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.45.0",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.45.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.45.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.45.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.45.0",
-        "@rollup/rollup-linux-x64-gnu": "4.45.0",
-        "@rollup/rollup-linux-x64-musl": "4.45.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.45.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.45.0",
-        "@rollup/rollup-win32-x64-msvc": "4.45.0",
+        "@rollup/rollup-android-arm-eabi": "4.52.5",
+        "@rollup/rollup-android-arm64": "4.52.5",
+        "@rollup/rollup-darwin-arm64": "4.52.5",
+        "@rollup/rollup-darwin-x64": "4.52.5",
+        "@rollup/rollup-freebsd-arm64": "4.52.5",
+        "@rollup/rollup-freebsd-x64": "4.52.5",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.52.5",
+        "@rollup/rollup-linux-arm-musleabihf": "4.52.5",
+        "@rollup/rollup-linux-arm64-gnu": "4.52.5",
+        "@rollup/rollup-linux-arm64-musl": "4.52.5",
+        "@rollup/rollup-linux-loong64-gnu": "4.52.5",
+        "@rollup/rollup-linux-ppc64-gnu": "4.52.5",
+        "@rollup/rollup-linux-riscv64-gnu": "4.52.5",
+        "@rollup/rollup-linux-riscv64-musl": "4.52.5",
+        "@rollup/rollup-linux-s390x-gnu": "4.52.5",
+        "@rollup/rollup-linux-x64-gnu": "4.52.5",
+        "@rollup/rollup-linux-x64-musl": "4.52.5",
+        "@rollup/rollup-openharmony-arm64": "4.52.5",
+        "@rollup/rollup-win32-arm64-msvc": "4.52.5",
+        "@rollup/rollup-win32-ia32-msvc": "4.52.5",
+        "@rollup/rollup-win32-x64-gnu": "4.52.5",
+        "@rollup/rollup-win32-x64-msvc": "4.52.5",
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/socket.io-client": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
-      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.3.2",
-        "engine.io-client": "~6.6.1",
-        "socket.io-parser": "~4.2.4"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/socket.io-parser": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
-      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@socket.io/component-emitter": "~3.1.0",
-        "debug": "~4.3.1"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "devOptional": true,
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3588,17 +2526,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "devOptional": true,
-      "license": "MIT",
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
     "node_modules/speakingurl": {
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
@@ -3609,96 +2536,53 @@
       }
     },
     "node_modules/superjson": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
-      "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.5.tgz",
+      "integrity": "sha512-zWPTX96LVsA/eVYnqOM2+ofcdPqdS1dAF1LN4TS2/MWuUpfitd9ctTa87wt4xrYnZnkLtS69xpBdSxVBP5Rm6w==",
       "license": "MIT",
       "dependencies": {
-        "copy-anything": "^3.0.2"
+        "copy-anything": "^4"
       },
       "engines": {
         "node": ">=16"
       }
     },
-    "node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/tailwindcss": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
-      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
+      "version": "4.1.16",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
+      "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
       "license": "MIT"
     },
+    "node_modules/tailwindcss-primeui": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.6.1.tgz",
+      "integrity": "sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.1.0"
+      }
+    },
     "node_modules/tapable": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
-      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "license": "MIT",
       "engines": {
         "node": ">=6"
-      }
-    },
-    "node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
-      "license": "ISC",
-      "dependencies": {
-        "@isaacs/fs-minipass": "^4.0.0",
-        "chownr": "^3.0.0",
-        "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
-        "yallist": "^5.0.0"
       },
-      "engines": {
-        "node": ">=18"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/terser": {
-      "version": "5.43.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
-      "integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
-      "devOptional": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.14.0",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "devOptional": true,
-      "license": "MIT"
-    },
     "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -3707,130 +2591,117 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/toastr": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/toastr/-/toastr-2.1.4.tgz",
-      "integrity": "sha512-LIy77F5n+sz4tefMmFOntcJ6HL0Fv3k1TDnNmFZ0bU/GcvIIfy6eG2v7zQmMiYgaalAiUv75ttFrPn5s0gyqlA==",
-      "dependencies": {
-        "jquery": ">=1.12.0"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
-      "license": "0BSD"
-    },
-    "node_modules/tweetnacl": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
-      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==",
-      "license": "Unlicense"
-    },
-    "node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "license": "MIT",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
       "engines": {
-        "node": ">= 10.0.0"
+        "node": ">=14.17"
       }
     },
-    "node_modules/update-browserslist-db": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
-      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/browserslist"
+    "node_modules/ufo": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
+      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "license": "MIT"
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/unplugin": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.10.tgz",
+      "integrity": "sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/unplugin-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
+      "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-30.0.0.tgz",
+      "integrity": "sha512-4qVE/lwCgmdPTp6h0qsRN2u642tt4boBQtcpn4wQcWZAsr8TQwq+SPT3NDu/6kBFxzo/sSEK4ioXhOOBrXc3iw==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.3",
+        "debug": "^4.4.3",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.19",
+        "mlly": "^1.8.0",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^2.3.10",
+        "unplugin-utils": "^0.3.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2 || ^4.0.0",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
         },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/browserslist"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
+        "@nuxt/kit": {
+          "optional": true
         }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "escalade": "^3.2.0",
-        "picocolors": "^1.1.1"
-      },
-      "bin": {
-        "update-browserslist-db": "cli.js"
-      },
-      "peerDependencies": {
-        "browserslist": ">= 4.21.0"
-      }
-    },
-    "node_modules/uuid": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
-      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "license": "MIT",
-      "bin": {
-        "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",
-      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.0.tgz",
+      "integrity": "sha512-C/Naxf8H0pBx1PA4BdpT+c/5wdqI9ILMdwjSMILw7tVIh3JsxzZqdeTLmmdaoh5MYUEOyBnM9K3o0DzoZ/fe+w==",
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2",
-        "postcss": "^8.5.3",
-        "rollup": "^4.34.9",
-        "tinyglobby": "^0.2.13"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rollup": "^4.43.0",
+        "tinyglobby": "^0.2.15"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
@@ -3839,14 +2710,14 @@
         "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@types/node": "^20.19.0 || >=22.12.0",
         "jiti": ">=1.21.0",
-        "less": "*",
+        "less": "^4.0.0",
         "lightningcss": "^1.21.0",
-        "sass": "*",
-        "sass-embedded": "*",
-        "stylus": "*",
-        "sugarss": "*",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
         "terser": "^5.16.0",
         "tsx": "^4.8.1",
         "yaml": "^2.4.2"
@@ -3887,41 +2758,24 @@
         }
       }
     },
-    "node_modules/vite-plugin-html": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/vite-plugin-html/-/vite-plugin-html-3.2.2.tgz",
-      "integrity": "sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==",
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@rollup/pluginutils": "^4.2.0",
-        "colorette": "^2.0.16",
-        "connect-history-api-fallback": "^1.6.0",
-        "consola": "^2.15.3",
-        "dotenv": "^16.0.0",
-        "dotenv-expand": "^8.0.2",
-        "ejs": "^3.1.6",
-        "fast-glob": "^3.2.11",
-        "fs-extra": "^10.0.1",
-        "html-minifier-terser": "^6.1.0",
-        "node-html-parser": "^5.3.3",
-        "pathe": "^0.2.0"
-      },
-      "peerDependencies": {
-        "vite": ">=2.0.0"
-      }
+      "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.17.tgz",
-      "integrity": "sha512-LbHV3xPN9BeljML+Xctq4lbz2lVHCR6DtbpTf5XIO6gugpXUN49j2QQPcMj086r9+AkJ0FfUT8xjulKKBkkr9g==",
+      "version": "3.5.23",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.23.tgz",
+      "integrity": "sha512-CfvZv/vI52xUhumUvHtD6iFIS78nGWfX4IJnHfBGhpqMI0CwDq2YEngXOeaBFMRmiArcqczuVrLxurvesTYT9w==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.17",
-        "@vue/compiler-sfc": "3.5.17",
-        "@vue/runtime-dom": "3.5.17",
-        "@vue/server-renderer": "3.5.17",
-        "@vue/shared": "3.5.17"
+        "@vue/compiler-dom": "3.5.23",
+        "@vue/compiler-sfc": "3.5.23",
+        "@vue/runtime-dom": "3.5.23",
+        "@vue/server-renderer": "3.5.23",
+        "@vue/shared": "3.5.23"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -3932,46 +2786,10 @@
         }
       }
     },
-    "node_modules/vue-i18n": {
-      "version": "11.1.9",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.9.tgz",
-      "integrity": "sha512-N9ZTsXdRmX38AwS9F6Rh93RtPkvZTkSy/zNv63FTIwZCUbLwwrpqlKz9YQuzFLdlvRdZTnWAUE5jMxr8exdl7g==",
-      "license": "MIT",
-      "dependencies": {
-        "@intlify/core-base": "11.1.9",
-        "@intlify/shared": "11.1.9",
-        "@vue/devtools-api": "^6.5.0"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/kazupon"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
-    "node_modules/vue-i18n/node_modules/@vue/devtools-api": {
-      "version": "6.6.4",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
-      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
-      "license": "MIT"
-    },
-    "node_modules/vue-multiselect": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.2.0.tgz",
-      "integrity": "sha512-ExI+IPvSbILbtaHrU0CgbBmfbD6yBpIWJKsGLPmuQMC7VWK8Nj1XSAI9eIt3n9/e+LSFYdt8VgfHxeS1O1OeVA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 14.18.1",
-        "npm": ">= 6.14.15"
-      }
-    },
     "node_modules/vue-router": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
-      "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz",
+      "integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==",
       "license": "MIT",
       "dependencies": {
         "@vue/devtools-api": "^6.6.4"
@@ -3980,83 +2798,31 @@
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "vue": "^3.2.0"
+        "vue": "^3.5.0"
       }
     },
-    "node_modules/vue-router/node_modules/@vue/devtools-api": {
-      "version": "6.6.4",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
-      "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",
-      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/xmlhttprequest-ssl": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
-      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/yallist": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
-      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/ziggy-js": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/ziggy-js/-/ziggy-js-2.5.3.tgz",
-      "integrity": "sha512-fdlGmRpG6I7yqGicIm6xYXhfbYZHjjb5fPHF5xekK6RLQRgOgLXzEg1R6GUgmF3qPAuKTHhAJ3EUfZ86LyMGeg==",
+    "node_modules/vue-tsc": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.1.3.tgz",
+      "integrity": "sha512-StMNfZHwPIXQgY3KxPKM0Jsoc8b46mDV3Fn2UlHCBIwRJApjqrSwqeMYgWf0zpN+g857y74pv7GWuBm+UqQe1w==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/qs": "^6.9.17",
-        "qs": "~6.9.7"
+        "@volar/typescript": "2.4.23",
+        "@vue/language-core": "3.1.3"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
       }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
     }
   }
 }
diff --git a/package.json b/package.json
index 9bd1552..1fe36b3 100644
--- a/package.json
+++ b/package.json
@@ -1,44 +1,33 @@
 {
-  "name": "notsoweb.frontend",
-  "copyright": "Notsoweb Software Inc.",
+  "name": "golscontros-frontend-v1",
   "private": true,
-  "version": "0.9.12",
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.8",
     "@primeuix/themes": "^1.2.5",
-    "@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",
-    "luxon": "^3.5.0",
-    "material-symbols": "^0.36.2",
-    "pdf-lib": "^1.17.1",
-    "pinia": "^3.0.1",
+    "@primevue/auto-import-resolver": "^4.4.1",
+    "@tailwindcss/vite": "^4.1.16",
+    "@vueuse/core": "^14.0.0",
+    "axios": "^1.13.2",
+    "pinia": "^3.0.4",
+    "primeicons": "^7.0.0",
     "primevue": "^4.4.1",
-    "pusher-js": "^8.4.0",
-    "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"
+    "tailwindcss-primeui": "^0.6.1",
+    "unplugin-vue-components": "^30.0.0",
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
-    "vite-plugin-html": "^3.2.2"
+    "@types/node": "^24.6.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vue-tsc": "^3.1.0"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index fb05b56..0000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-}
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..251e2e0
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// El router se encarga de manejar las vistas
+</script>
+
+<template>
+  <RouterView />
+</template>
+
diff --git a/src/ColorDemo.vue b/src/ColorDemo.vue
new file mode 100644
index 0000000..0dae02d
--- /dev/null
+++ b/src/ColorDemo.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import TopBar from './components/layout/TopBar.vue';
+</script>
+
+<template>
+    <div class="min-h-screen bg-surface-50 dark:bg-surface-950">
+        <TopBar />
+        
+        <div class="p-6">
+            <div class="max-w-7xl mx-auto">
+                <h1 class="text-3xl font-bold text-surface-900 dark:text-surface-0 mb-4">
+                    Personalización de Colores
+                </h1>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Tarjeta de ejemplo 1 -->
+                    <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
+                        <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
+                            Color Primario
+                        </h2>
+                        <p class="text-surface-600 dark:text-surface-400 mb-4">
+                            El color primario azul se usa para botones, enlaces y elementos destacados.
+                        </p>
+                        <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-600 transition-colors">
+                            Botón Primario
+                        </button>
+                    </div>
+
+                    <!-- Tarjeta de ejemplo 2 -->
+                    <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
+                        <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
+                            Colores de Superficie
+                        </h2>
+                        <p class="text-surface-600 dark:text-surface-400 mb-4">
+                            Los colores de superficie definen el fondo y los tonos neutros de la aplicación.
+                        </p>
+                        <div class="flex gap-2">
+                            <div class="w-8 h-8 rounded bg-surface-100 dark:bg-surface-800" title="surface-100"></div>
+                            <div class="w-8 h-8 rounded bg-surface-200 dark:bg-surface-700" title="surface-200"></div>
+                            <div class="w-8 h-8 rounded bg-surface-300 dark:bg-surface-600" title="surface-300"></div>
+                            <div class="w-8 h-8 rounded bg-surface-400 dark:bg-surface-500" title="surface-400"></div>
+                        </div>
+                    </div>
+
+                    <!-- Tarjeta de ejemplo 3 -->
+                    <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
+                        <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
+                            Modo Oscuro
+                        </h2>
+                        <p class="text-surface-600 dark:text-surface-400 mb-4">
+                            Usa el botón en la barra superior para cambiar entre modo claro y oscuro.
+                        </p>
+                        <div class="flex items-center gap-3">
+                            <i class="pi pi-moon text-2xl text-primary"></i>
+                            <span class="text-surface-700 dark:text-surface-300">Tema adaptable</span>
+                        </div>
+                    </div>
+
+                    <!-- Tarjeta de ejemplo 4 -->
+                    <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
+                        <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
+                            Personalización
+                        </h2>
+                        <p class="text-surface-600 dark:text-surface-400 mb-4">
+                            Haz clic en el ícono de paleta en la barra superior para cambiar el color de superficie.
+                        </p>
+                        <div class="flex items-center gap-3">
+                            <i class="pi pi-palette text-2xl text-primary"></i>
+                            <span class="text-surface-700 dark:text-surface-300">5 colores de superficie</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Estilos adicionales si es necesario */
+</style>
diff --git a/src/MainLayout.vue b/src/MainLayout.vue
new file mode 100644
index 0000000..14dc5ab
--- /dev/null
+++ b/src/MainLayout.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import TopBar from './components/layout/TopBar.vue';
+import Sidebar from './components/layout/Sidebar.vue';
+</script>
+
+<template>
+    <div class="flex min-h-screen bg-surface-50 dark:bg-surface-950">
+        <!-- Sidebar -->
+        <Sidebar />
+        
+        <!-- Main Content -->
+        <div class="flex-1 flex flex-col">
+            <!-- TopBar -->
+            <TopBar />
+            
+            <!-- Page Content -->
+            <main class="flex-1 overflow-auto p-4 lg:p-6">
+                <RouterView />
+            </main>
+        </div>
+    </div>
+</template>
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
new file mode 100644
index 0000000..805ccee
--- /dev/null
+++ b/src/assets/styles/main.css
@@ -0,0 +1,33 @@
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+@import "primeicons/primeicons.css";
+@custom-variant dark (&:where(.p-dark, .p-dark *));
+
+:root {
+    /* Primary Colors - Blue */
+    --p-primary-50: #eff6ff;
+    --p-primary-100: #dbeafe;
+    --p-primary-200: #bfdbfe;
+    --p-primary-300: #93c5fd;
+    --p-primary-400: #60a5fa;
+    --p-primary-500: #3b82f6;
+    --p-primary-600: #2563eb;
+    --p-primary-700: #1d4ed8;
+    --p-primary-800: #1e40af;
+    --p-primary-900: #1e3a8a;
+    --p-primary-950: #172554;
+
+    /* Surface Colors - Slate */
+    --p-surface-0: #ffffff;
+    --p-surface-50: #f8fafc;
+    --p-surface-100: #f1f5f9;
+    --p-surface-200: #e2e8f0;
+    --p-surface-300: #cbd5e1;
+    --p-surface-400: #94a3b8;
+    --p-surface-500: #64748b;
+    --p-surface-600: #475569;
+    --p-surface-700: #334155;
+    --p-surface-800: #1e293b;
+    --p-surface-900: #0f172a;
+    --p-surface-950: #020617;
+}
diff --git a/src/components/App.vue b/src/components/App.vue
deleted file mode 100644
index 2cb333f..0000000
--- a/src/components/App.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup>
-import { onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import useLoader from '@Stores/Loader';
-import { hasToken } from '@Services/Api';
-
-/** Definidores */
-const router = useRouter();
-const loader = useLoader();
-
-/** Ciclos */
-onMounted(() => {
-    if(!hasToken()) {
-        return router.push({ name: 'auth.index' })
-    }
-
-    loader.boot()
-})
-</script>
-
-<template>
-    <router-view />
-</template>
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
new file mode 100644
index 0000000..bc029b4
--- /dev/null
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,9 @@
+<script setup>
+</script>
+
+<template>
+  <Button>
+    Hola mundo
+    <!-- Los componentes de PrimeVue se usan directamente sin importar -->
+  </Button>
+</template>
\ No newline at end of file
diff --git a/src/components/Holos/ActionSection.vue b/src/components/Holos/ActionSection.vue
deleted file mode 100644
index 80ce2ee..0000000
--- a/src/components/Holos/ActionSection.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-import SectionTitle from './SectionTitle.vue';
-</script>
-
-<template>
-    <div class="md:grid md:grid-cols-3 md:gap-6">
-        <SectionTitle>
-            <template #title>
-                <slot name="title" />
-            </template>
-            <template #description>
-                <slot name="description" />
-            </template>
-        </SectionTitle>
-
-        <div class="mt-5 md:mt-0 md:col-span-2">
-            <div class="px-4 py-5 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-sm">
-                <slot name="content" />
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/src/components/Holos/Breadcrumb/Container.vue b/src/components/Holos/Breadcrumb/Container.vue
deleted file mode 100644
index ed52e13..0000000
--- a/src/components/Holos/Breadcrumb/Container.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <nav class="flex items-center py-1 gap-0.5">
-        <slot />
-    </nav>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Breadcrumb/Item.vue b/src/components/Holos/Breadcrumb/Item.vue
deleted file mode 100644
index 7bf641e..0000000
--- a/src/components/Holos/Breadcrumb/Item.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue'
-import { useRouter } from 'vue-router';
-
-/** Definidores */
-const router = useRouter();
-
-/** Propiedades */
-const props = defineProps({
-    name: String,
-    icon: String,
-    route: Object,
-    active: Boolean,
-})
-
-/** Métodos */
-const handleClick = () => {
-    if (props.active) {
-        return;
-    }
-
-    router.push(props.route);
-}
-</script>
-
-<template>
-    <button
-        v-if="!active"
-        :to="route"
-        class="inline-flex items-center gap-1.5 text-sm duration-300 ease-in p-1 cursor-pointer"
-        @click="handleClick"
-    >
-            <GoogleIcon
-                :name="icon"
-                class="text-sm"
-            />
-            <span class="text-sm font-semibold hover:underline" v-text="name" />
-    </button>
-    <span v-if="!active" class="inline-block text-sm select-none pointer-events-none opacity-50">
-        <GoogleIcon
-            name="arrow_forward_ios"
-            class="text-xs font-semibold"
-        />
-    </span>
-    <div
-        v-if="active"
-        class="inline-flex items-center gap-1.5 text-sm duration-300 ease-in p-1"
-    >
-        <GoogleIcon
-            :name="icon"
-            class="text-sm"
-        />
-        <span class="font-semibold text-sm underline" v-text="name" />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Breadcrumb/Separator.vue b/src/components/Holos/Breadcrumb/Separator.vue
deleted file mode 100644
index 4c3564b..0000000
--- a/src/components/Holos/Breadcrumb/Separator.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue'
-
-</script>
-
-<template>
-    <span class="inline-block mx-1 text-sm select-none pointer-events-none opacity-50">
-        <GoogleIcon
-            name="arrow_forward_ios"
-            class="text-xs font-semibold"
-        />
-    </span>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Button/Button.vue b/src/components/Holos/Button/Button.vue
deleted file mode 100644
index 33bf969..0000000
--- a/src/components/Holos/Button/Button.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <button :type="type" :disabled="disabled || loading" :class="buttonClasses" @click="handleClick">
-    <svg v-if="loading" class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
-      fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
-      </path>
-    </svg>
-    <slot></slot>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-  variant?: 'solid' | 'outline' | 'ghost' | 'smooth';
-  color?: 'primary' | 'danger' | 'success' | 'info' | 'warning';
-  size?: 'sm' | 'md' | 'lg';
-  type?: 'button' | 'submit' | 'reset';
-  disabled?: boolean;
-  loading?: boolean;
-  fullWidth?: boolean;
-  iconOnly?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: 'solid',
-  color: 'primary',
-  size: 'md',
-  type: 'button',
-  disabled: false,
-  loading: false,
-  fullWidth: false,
-  iconOnly: false,
-});
-
-
-const emit = defineEmits<{
-  click: [event: MouseEvent];
-}>();
-
-function handleClick(event: MouseEvent) {
-  if (props.disabled || props.loading) return;
-  emit('click', event);
-}
-
-const buttonClasses = computed(() => {
-  const baseClasses = [
-    'inline-flex',
-    'items-center',
-    'justify-center',
-    'font-medium',
-    'rounded-lg',
-    'transition-all',
-    'duration-200',
-    'focus:outline-none',
-    'focus:ring-2',
-    'focus:ring-offset-2',
-    'disabled:opacity-50',
-    'disabled:cursor-not-allowed',
-  ];
-
-  const sizeClasses = {
-    sm: ['px-3', 'py-1.5', 'text-sm'],
-    md: ['px-4', 'py-2', 'text-sm'],
-    lg: ['px-6', 'py-3', 'text-base'],
-  };
-
-  // Estilos base por tipo
-  const variantClasses = {
-    solid: ['shadow-sm'],
-    outline: ['border', 'bg-white', 'hover:bg-gray-50'],
-    ghost: ['bg-transparent', 'hover:bg-gray-100'],
-    smooth: ['bg-opacity-20', 'font-bold', 'uppercase', 'shadow-none'],
-  };
-
-  // Colores por tipo
-  const colorClasses = {
-    primary: {
-      solid: ['bg-primary-600', 'text-white', 'hover:bg-primary-700', 'focus:ring-primary-500'],
-      outline: ['border-primary-600', 'text-primary-600', 'focus:ring-primary-500'],
-      ghost: ['text-primary-600', 'focus:ring-primary-500'],
-      smooth: ['bg-primary-100', 'text-primary-600', 'hover:bg-primary-200', 'focus:ring-primary-300'],
-    },
-    danger: {
-      solid: ['bg-red-600', 'text-white', 'hover:bg-red-700', 'focus:ring-red-500'],
-      outline: ['border-red-600', 'text-red-600', 'focus:ring-red-500'],
-      ghost: ['text-red-600', 'focus:ring-red-500'],
-      smooth: ['bg-red-100', 'text-red-600', 'hover:bg-red-200', 'focus:ring-red-300'],
-    },
-    success: {
-      solid: ['bg-green-600', 'text-white', 'hover:bg-green-700', 'focus:ring-green-500'],
-      outline: ['border-green-600', 'text-green-600', 'focus:ring-green-500'],
-      ghost: ['text-green-600', 'focus:ring-green-500'],
-      smooth: ['bg-green-100', 'text-green-600', 'hover:bg-green-200', 'focus:ring-green-300'],
-    },
-    info: {
-      solid: ['bg-blue-600', 'text-white', 'hover:bg-blue-700', 'focus:ring-blue-500'],
-      outline: ['border-blue-600', 'text-blue-600', 'focus:ring-blue-500'],
-      ghost: ['text-blue-600', 'focus:ring-blue-500'],
-      smooth: ['bg-blue-100', 'text-blue-600', 'hover:bg-blue-200', 'focus:ring-blue-300'],
-    },
-    warning: {
-      solid: ['bg-yellow-500', 'text-white', 'hover:bg-yellow-600', 'focus:ring-yellow-400'],
-      outline: ['border-yellow-500', 'text-yellow-600', 'focus:ring-yellow-400'],
-      ghost: ['text-yellow-600', 'focus:ring-yellow-400'],
-      smooth: ['bg-yellow-100', 'text-yellow-600', 'hover:bg-yellow-200', 'focus:ring-yellow-200'],
-    },
-  };
-
-
-  // Asegura que siempre haya un array válido para los estilos
-  const safeVariant = props.variant && variantClasses[props.variant] ? props.variant : 'solid';
-  const safeColor = props.color && colorClasses[props.color] ? props.color : 'primary';
-
-  const classes = [
-    ...baseClasses,
-    ...sizeClasses[props.size],
-    ...(variantClasses[safeVariant] || []),
-    ...(colorClasses[safeColor]?.[safeVariant] || []),
-  ];
-
-  if (props.fullWidth) {
-    classes.push('w-full');
-  }
-  if (props.iconOnly) {
-    if (props.size === 'sm') classes.push('w-8', 'h-8', 'p-0');
-    else if (props.size === 'lg') classes.push('w-12', 'h-12', 'p-0');
-    else classes.push('w-10', 'h-10', 'p-0');
-  } else if (props.fullWidth) {
-    classes.push('w-full');
-  }
-
-  return classes;
-});
-</script>
\ No newline at end of file
diff --git a/src/components/Holos/Button/ButtonRh.vue b/src/components/Holos/Button/ButtonRh.vue
deleted file mode 100644
index fb5879b..0000000
--- a/src/components/Holos/Button/ButtonRh.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<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/Button/Danger.vue b/src/components/Holos/Button/Danger.vue
deleted file mode 100644
index a10f212..0000000
--- a/src/components/Holos/Button/Danger.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-/** Propiedades */
-defineProps({
-    type: {
-        default: 'submit',
-        type: String
-    }
-});
-</script>
-
-<template>
-    <button 
-        class="btn bg-danger"
-        :type="type"
-    >
-        <slot />
-    </button>
-</template>
diff --git a/src/components/Holos/Button/Icon.vue b/src/components/Holos/Button/Icon.vue
deleted file mode 100644
index 4b4ed9a..0000000
--- a/src/components/Holos/Button/Icon.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue'
-
-/** Propiedades */
-const props = defineProps({
-    icon:  String,
-    fill: Boolean,
-    style: {
-        type: String,
-        default: 'rounded'
-    },
-    title: String,
-    type: {
-        type: String,
-        default: 'button'
-    }
-});
-</script>
-
-<template>
-    <button
-        class="flex justify-center items-center h-7 w-7 rounded-sm btn-icon"
-        :title="title"
-        :type="type"
-    >
-        <GoogleIcon
-            :fill="fill"
-            :name="icon"
-            :style="style"
-        />   
-    </button>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Button/Primary.vue b/src/components/Holos/Button/Primary.vue
deleted file mode 100644
index ffc1fa1..0000000
--- a/src/components/Holos/Button/Primary.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-/** Propiedades */
-defineProps({
-    type: {
-        default: 'submit',
-        type: String
-    }
-});
-</script>
-
-<template>
-    <button 
-        class="btn btn-primary"
-        :type="type"
-    >
-        <slot />
-    </button>
-</template>
diff --git a/src/components/Holos/Button/Secondary.vue b/src/components/Holos/Button/Secondary.vue
deleted file mode 100644
index a02d599..0000000
--- a/src/components/Holos/Button/Secondary.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-/** Propiedades */
-defineProps({
-    type: {
-        default: 'submit',
-        type: String
-    }
-});
-</script>
-
-<template>
-    <button 
-        class="btn btn-secondary"
-        :type="type"
-    >
-        <slot />
-    </button>
-</template>
diff --git a/src/components/Holos/Calendar.vue b/src/components/Holos/Calendar.vue
deleted file mode 100644
index 96db6d4..0000000
--- a/src/components/Holos/Calendar.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<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/components/Holos/Canvas.vue b/src/components/Holos/Canvas.vue
deleted file mode 100644
index e675454..0000000
--- a/src/components/Holos/Canvas.vue
+++ /dev/null
@@ -1,606 +0,0 @@
-<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/Card/AcademicRecords.vue b/src/components/Holos/Card/AcademicRecords.vue
deleted file mode 100644
index 6c58818..0000000
--- a/src/components/Holos/Card/AcademicRecords.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script setup>
-import { getDate } from '@Controllers/DateController';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Props */
-const props = defineProps({
-  records: {
-    type: Array,
-    default: () => []
-  }
-});
-
-/** Eventos */
-const emit = defineEmits(['destroy', 'edit']);
-
-/** Métodos */
-function openDestroy(record) {
-  emit('destroy', record);
-}
-
-function openEdit(record) {
-  emit('edit', record);
-}
-</script>
-
-<template>
-  <div class="mt-6">
-    <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
-      <GoogleIcon 
-        class="text-black dark:text-primary-dt text-xl"
-        name="book"
-      />
-      Grados Académicos
-    </h3>
-
-    <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
-      <!-- Item grado dinámico -->
-      <article 
-        v-for="record in records" 
-        :key="record.id"
-        class="rounded-lg border border-gray-100 bg-white p-4 relative dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-      >
-        <div class="flex items-start justify-between">
-          <div>
-            <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ record.title }}</h4>
-            <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ record.institution }}</p>
-            <p class="text-xs text-gray-400 mt-2 dark:text-primary-dt/70">Fecha de obtención: {{ record.date_obtained ? getDate(record.date_obtained) : '-' }}</p>
-          </div>
-
-          <div class="flex items-center gap-2">
-            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-700 dark:bg-primary/10 dark:text-primary-dt">
-              {{ record.degree_type_ek }}
-            </span>
-            <button 
-              @click="openEdit(record)"
-              class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
-              title="Editar grado académico"
-            >
-              <GoogleIcon name="edit" class="w-4 h-4" />
-            </button>
-            <button 
-              @click="openDestroy(record)"
-              class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
-              title="Eliminar grado académico"
-            >
-              <GoogleIcon name="delete" class="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      </article>
-
-      <!-- Estado vacío para grados académicos -->
-      <div v-if="!records || records.length === 0" class="col-span-2 py-8 text-center">
-        <div class="text-gray-500 dark:text-primary-dt/70">
-          <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-          <p class="text-lg font-medium">No se encontraron grados académicos</p>
-          <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/components/Holos/Card/Card.vue b/src/components/Holos/Card/Card.vue
deleted file mode 100644
index 6dd6b64..0000000
--- a/src/components/Holos/Card/Card.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'outline',
-    validator: (value) => ['default', 'outline', 'ghost'].includes(value)
-  },
-  className: {
-    type: String,
-    default: '',
-  }
-});
-
-const cardClasses = computed(() => {
-  const baseClasses = [
-    'rounded-lg',
-    'shadow-sm',
-    'transition-all',
-    'duration-200',
-  ];
-
-  const variantClasses = {
-    default: ['border', 'bg-white', 'dark:bg-gray-800', 'text-gray-900', 'dark:text-gray-100'],
-    outline: ['border-2', 'border-gray-100', 'dark:border-gray-700', 'bg-transparent'],
-    ghost: ['shadow-none', 'border-none', 'bg-transparent'],
-  };
-
-  return [
-    ...baseClasses,
-    ...variantClasses[props.variant],
-    props.className,
-  ].filter(Boolean);
-});
-</script>
-
-<template>
-  <div :class="cardClasses">
-    <slot />
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Card/CardContent.vue b/src/components/Holos/Card/CardContent.vue
deleted file mode 100644
index 151396d..0000000
--- a/src/components/Holos/Card/CardContent.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  className: {
-    type: String,
-    default: '',
-  }
-});
-
-const contentClasses = computed(() => [
-  'p-6',
-  'pt-0',
-  props.className,
-].filter(Boolean));
-</script>
-
-<template>
-  <div :class="contentClasses">
-    <slot />
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Card/CardDescription.vue b/src/components/Holos/Card/CardDescription.vue
deleted file mode 100644
index db4bbad..0000000
--- a/src/components/Holos/Card/CardDescription.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  className: {
-    type: String,
-    default: '',
-  }
-});
-
-const descriptionClasses = computed(() => [
-  'text-sm',
-  'text-gray-600',
-  'dark:text-gray-400',
-  props.className,
-].filter(Boolean));
-</script>
-
-<template>
-  <p :class="descriptionClasses">
-    <slot />
-  </p>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Card/CardFooter.vue b/src/components/Holos/Card/CardFooter.vue
deleted file mode 100644
index 4cc1605..0000000
--- a/src/components/Holos/Card/CardFooter.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  className: {
-    type: String,
-    default: '',
-  }
-});
-
-const footerClasses = computed(() => [
-  'flex',
-  'items-center',
-  'p-6',
-  'pt-0',
-  props.className,
-].filter(Boolean));
-</script>
-
-<template>
-  <div :class="footerClasses">
-    <slot />
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Card/CardHeader.vue b/src/components/Holos/Card/CardHeader.vue
deleted file mode 100644
index a3081c3..0000000
--- a/src/components/Holos/Card/CardHeader.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  className: {
-    type: String,
-    default: '',
-  }
-});
-
-const headerClasses = computed(() => [
-  'flex',
-  'flex-col',
-  'space-y-1.5',
-  'p-6',
-  props.className,
-].filter(Boolean));
-</script>
-
-<template>
-  <div :class="headerClasses">
-    <slot />
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Card/CardTitle.vue b/src/components/Holos/Card/CardTitle.vue
deleted file mode 100644
index e855a2f..0000000
--- a/src/components/Holos/Card/CardTitle.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  className: {
-    type: String,
-    default: '',
-  }
-});
-
-const titleClasses = computed(() => [
-  'text-2xl',
-  'font-semibold',
-  'leading-none',
-  'tracking-tight',
-  props.className,
-].filter(Boolean));
-</script>
-
-<template>
-  <h3 :class="titleClasses">
-    <slot />
-  </h3>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Card/Certifications.vue b/src/components/Holos/Card/Certifications.vue
deleted file mode 100644
index 2d18022..0000000
--- a/src/components/Holos/Card/Certifications.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import { getDate } from '@Controllers/DateController';
-
-/** Props */
-const props = defineProps({
-  certifications: {
-    type: Array,
-    default: () => []
-  }
-});
-
-/** Eventos */
-const emit = defineEmits(['destroy', 'edit']);
-
-/** Métodos */
-function openDestroy(cert) {
-  emit('destroy', cert);
-}
-
-function openEdit(cert) {
-  emit('edit', cert);
-}
-
-/** Métodos */
-function getCertificationStatus(cert) {
-  // Si no tiene fecha de expiración, se considera permanente
-  if (!cert.date_expiration) {
-    return {
-      status: 'permanente',
-      statusText: 'Permanente',
-      isExpired: false
-    };
-  }
-  
-  const now = new Date();
-  const expirationDate = new Date(cert.date_expiration);
-  
-  // Si la fecha actual es mayor a la fecha de expiración, está vencida
-  const isExpired = now > expirationDate;
-  
-  return {
-    status: isExpired ? 'vencida' : 'vigente',
-    statusText: isExpired ? 'Vencida' : 'Vigente',
-    isExpired
-  };
-}
-</script>
-
-<template>
-  <div class="mt-8">
-    <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
-      <GoogleIcon 
-        class="text-black dark:text-primary-dt text-xl"
-        name="license"
-      />
-      Certificaciones
-    </h3>
-
-    <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
-      <!-- Certificación dinámica -->
-      <article 
-        v-for="cert in certifications" 
-        :key="cert.id"
-        :class="[
-          'rounded-lg border p-4 relative',
-          getCertificationStatus(cert).status === 'vigente' 
-            ? 'border-gray-100 bg-green-50/40 dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt'
-            : 'border-gray-100 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt'
-        ]"
-      >
-        <div class="flex items-start justify-between">
-          <div>
-            <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ cert.name }}</h4>
-            <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ cert.institution }}</p>
-            <p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: {{ cert.date_obtained ? getDate(cert.date_obtained) : '-' }}</p>
-            <p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: {{ cert.date_expiration ? getDate(cert.date_expiration) : 'Permanente' }}</p>
-          </div>
-
-          <div class="flex items-center gap-2">
-            <span 
-              :class="[
-                'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold',
-                getCertificationStatus(cert).status === 'vigente' 
-                  ? 'bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt'
-                  : getCertificationStatus(cert).status === 'permanente'
-                  ? 'bg-blue-100 text-blue-700 dark:bg-info-d dark:text-info-dt'
-                  : 'bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt'
-              ]"
-            >
-              {{ getCertificationStatus(cert).statusText }}
-            </span>
-            <button 
-              @click="openEdit(cert)"
-              class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
-              title="Editar certificación"
-            >
-              <GoogleIcon name="edit" class="w-4 h-4" />
-            </button>
-            <button 
-              @click="openDestroy(cert)"
-              class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
-              title="Eliminar certificación"
-            >
-              <GoogleIcon name="delete" class="w-4 h-4" />
-            </button>
-          </div>
-        </div>
-      </article>
-
-      <!-- Estado vacío para certificaciones -->
-      <div v-if="!certifications || certifications.length === 0" class="col-span-2 py-8 text-center">
-        <div class="text-gray-500 dark:text-primary-dt/70">
-          <GoogleIcon name="license" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-          <p class="text-lg font-medium">No se encontraron certificaciones</p>
-          <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/components/Holos/Card/Indicator.vue b/src/components/Holos/Card/Indicator.vue
deleted file mode 100644
index 3c0227c..0000000
--- a/src/components/Holos/Card/Indicator.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-import { RouterLink } from 'vue-router';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Propiedades */
-defineProps({
-    icon: String,
-    title: String,
-    to: String,
-    value: Number
-});
-</script>
-
-<template>
-    <RouterLink
-        class="relative flex-1 flex flex-col gap-2 p-4 rounded-sm -md bg-gray-200 dark:bg-transparent dark:border"
-        :to="to"
-    >
-        <label class="text-base font-semibold tracking-wider">
-            {{ title }}
-        </label>
-        <label class="text-primary dark:text-primary-dt text-4xl font-bold">
-            {{ value }}
-        </label>
-        <div class="absolute bg-primary dark:bg-primary-d rounded-md font-semibold text-xs text-gray-100 p-2 right-4 bottom-4">
-            <GoogleIcon
-              class="text-3xl md:text-2xl lg:text-3xl"
-              :name="icon"
-              filled
-            />
-        </div>
-    </RouterLink>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Card/Simple.vue b/src/components/Holos/Card/Simple.vue
deleted file mode 100644
index d427ce5..0000000
--- a/src/components/Holos/Card/Simple.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Propiedades */
-defineProps({
-    icon: String,
-    title: String
-});
-</script>
-
-<template>
-    <div class="flex flex-col justify-center items-center p-4 bg-primary text-white rounded-md">
-        <GoogleIcon
-            class="text-4xl"
-            :name="icon"
-        />
-        <h4>{{ title }}</h4>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Checkbox.vue b/src/components/Holos/Checkbox.vue
deleted file mode 100644
index 3c9bb12..0000000
--- a/src/components/Holos/Checkbox.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const emit = defineEmits(['update:checked']);
-
-const props = defineProps({
-    checked: {
-        type: [Array, Boolean],
-        default: false,
-    },
-    value: {
-        type: String,
-        default: null,
-    },
-});
-
-const proxyChecked = computed({
-    get() {
-        return props.checked;
-    },
-
-    set(val) {
-        emit('update:checked', val);
-    },
-});
-</script>
-
-
-<template>
-    <input
-        v-model="proxyChecked"
-        type="checkbox"
-        :value="value"
-        class="rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:ring-indigo-500"
-    >
-</template>
diff --git a/src/components/Holos/ConfirmsPassword.vue b/src/components/Holos/ConfirmsPassword.vue
deleted file mode 100644
index 5607467..0000000
--- a/src/components/Holos/ConfirmsPassword.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script setup>
-import { ref, nextTick } from 'vue';
-import { useForm } from '@Services/Api';
-
-import Input           from './Form/Input.vue';
-import DialogModal     from './Modal/Elements/Base.vue';
-import PrimaryButton   from './Button/Primary.vue';
-import SecondaryButton from './Button/Secondary.vue';
-
-const emit = defineEmits(['confirmed']);
-
-defineProps({
-    title: {
-        type: String,
-        default: Lang('confirm'),
-    },
-    content: {
-        type: String,
-        default: Lang('account.password.verify'),
-    },
-    button: {
-        type: String,
-        default: Lang('confirm'),
-    },
-});
-
-const confirmingPassword = ref(false);
-
-const form = useForm({
-    password: '',
-});
-
-const passwordInput = ref(null);
-
-const startConfirmingPassword = () => {
-    confirmingPassword.value = true;
-};
-
-const confirmPassword = () => {
-    form.post(route('user.password-confirm'), {
-        onSuccess: () => {
-            closeModal();
-            nextTick(() => emit('confirmed'));
-        },
-        onFail: () => {
-            passwordInput.value.focus();
-        }
-    });
-};
-
-const closeModal = () => {
-    confirmingPassword.value = false;
-    form.password = '';
-};
-</script>
-
-<template>
-    <span>
-        <span @click="startConfirmingPassword">
-            <slot />
-        </span>
-
-        <DialogModal :show="confirmingPassword" @close="closeModal">
-            <template #title>
-                {{ title }}
-            </template>
-
-            <template #content>
-                {{ content }}
-
-                {{ form }}
-
-                <div class="mt-4">
-                    <Input
-                        v-model="form.password"
-                        id="password"
-                        type="password"
-                        :onError="form.errors.password"
-                    />
-                </div>
-            </template>
-
-            <template #footer>
-                <SecondaryButton @click="closeModal">
-                    {{ $t('cancel') }}
-                </SecondaryButton>
-
-                <PrimaryButton
-                    class="ms-3"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                    @click="confirmPassword"
-                >
-                    {{ button }}
-                </PrimaryButton>
-            </template>
-        </DialogModal>
-    </span>
-</template>
diff --git a/src/components/Holos/Draggable.vue b/src/components/Holos/Draggable.vue
deleted file mode 100644
index 4bd032c..0000000
--- a/src/components/Holos/Draggable.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<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/Dropdown.vue b/src/components/Holos/Dropdown.vue
deleted file mode 100644
index 83eba7f..0000000
--- a/src/components/Holos/Dropdown.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-
-const props = defineProps({
-    align: {
-        default: 'right',
-        type: String
-    },
-    contentClasses: {
-        default: () => [
-            'pt-1',
-            '!bg-white dark:!bg-primary-d !text-gray-800 dark:!text-primary-dt'
-        ],
-        type: Array
-    },
-    width: {
-        default: '48',
-        type: String
-    }
-});
-
-const open = ref(false);
-
-const closeOnEscape = (e) => {
-    if (open.value && e.key === 'Escape') {
-        open.value = false;
-    }
-};
-
-onMounted(() => document.addEventListener('keydown', closeOnEscape));
-onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
-
-const widthClass = computed(() => {
-    return {
-        '48': 'w-48',
-        '52': 'w-52',
-        '56': 'w-56',
-        '60': 'w-60',
-        '64': 'w-64',
-        '72': 'w-52 md:w-72',
-    }[props.width.toString()];
-});
-
-const alignmentClasses = computed(() => {
-    if (props.align === 'left') {
-        return 'origin-top-left left-0';
-    }
-
-    if (props.align === 'right') {
-        return 'origin-top-right right-0';
-    }
-
-    if (props.align === 'icon') {
-        const size = {
-            '48': '-right-20',
-            '52': '-right-22',
-            '56': '-right-24',
-            '60': '-right-26',
-            '64': '-right-28',
-            '72': '-right-36',
-        }[props.width.toString()];
-
-        return `origin-top-right ${size}`;
-    }
-
-    return 'origin-top';
-});
-</script>
-
-<template>
-    <div class="relative">
-        <div @click="open = ! open">
-            <slot name="trigger" />
-        </div>
-
-        <!-- Full Screen Dropdown Overlay -->
-        <div
-            v-show="open"
-            class=" fixed inset-0 z-40"
-            @click="open = false"
-        />
-
-        <transition
-            enter-active-class="transition ease-out duration-200"
-            enter-from-class="transform opacity-0 scale-95"
-            enter-to-class="transform opacity-100 scale-100"
-            leave-active-class="transition ease-in duration-75"
-            leave-from-class="transform opacity-100 scale-100"
-            leave-to-class="transform opacity-0 scale-95"
-        >
-            <div
-                v-show="open"
-                class="absolute z-[1000] mt-2 rounded-t-md shadow-lg"
-                :class="[widthClass, alignmentClasses]"
-                style="display: none;"
-                @click="open = false"
-            >
-                <div class="rounded-sm ring-1 ring-black/5" :class="contentClasses">
-                    <slot name="content" />
-                </div>
-            </div>
-        </transition>
-    </div>
-</template>
diff --git a/src/components/Holos/DropdownLink.vue b/src/components/Holos/DropdownLink.vue
deleted file mode 100644
index 5aa3e22..0000000
--- a/src/components/Holos/DropdownLink.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup>
-import { RouterLink } from 'vue-router'
-
-defineProps({
-    as: String,
-    to: String
-});
-
-const style = 'block px-4 py-2 text-sm leading-5 hover:bg-secondary/80 dark:hover:bg-secondary-d/80 focus:outline-hidden focus:bg-gray-100 cursor-pointer transition';
-</script>
-
-<template>
-    <div>
-        <button 
-            v-if="as == 'button'"
-            class="w-full text-left"
-            :class="style"
-            type="submit"
-        >
-            <slot />
-        </button>
-
-        <a 
-            v-else-if="as =='a'"
-            :href="href"
-            :class="style"
-        >
-            <slot />
-        </a>
-
-        <RouterLink 
-            v-else
-            :to="$view({ name: to })"
-            :class="style"
-        >
-            <slot />
-        </RouterLink>
-    </div>
-</template>
diff --git a/src/components/Holos/Form/Checkbox.vue b/src/components/Holos/Form/Checkbox.vue
deleted file mode 100644
index 51b4db3..0000000
--- a/src/components/Holos/Form/Checkbox.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { v4 as uuidv4 } from 'uuid';
-
-const emit = defineEmits([
-    'update:modelValue'
-]);
-
-const uuid = uuidv4();
-
-const props = defineProps({
-    title: String,
-    modelValue: Object | Boolean,
-    value: Object | Boolean,
-});
-
-const vModel = computed({
-    get() {
-        return props.modelValue;
-    },
-
-    set(value) {
-        emit('update:modelValue', value);
-    },
-});
-</script>
-
-<template>
-    <div class="relative w-full h-8">
-        <input
-            class="appearance-none rounded-sm bg-primary cursor-pointer h-full w-full checked:bg-secondary dark:checked:bg-secondary-d transition-all duration-200 peer"
-            type="checkbox"
-            :id="uuid"
-            v-model="vModel"
-            :value="value"
-        />
-        <label
-            :for="uuid"
-            class="absolute top-[50%] left-3 text-primary-t dark:text-primary-dt -translate-y-[50%] peer-checked:text-white dark:peer-checked:text-primary-dt transition-all duration-200 select-none"
-        >
-            {{ title }}
-        </label>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Form/Elements/Error.vue b/src/components/Holos/Form/Elements/Error.vue
deleted file mode 100644
index 97cf7c6..0000000
--- a/src/components/Holos/Form/Elements/Error.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup>
-/** Propiedades */
-defineProps({
-    onError: String | Array
-});
-</script>
-
-<template>
-    <p v-if="onError"
-        class="mt-1 pl-2 text-xs text-red-500 dark:text-red-300"
-    >
-        {{ Array.isArray(onError) ? onError[0] : onError }}
-    </p>
-</template>
diff --git a/src/components/Holos/Form/Elements/Label.vue b/src/components/Holos/Form/Elements/Label.vue
deleted file mode 100644
index c03836e..0000000
--- a/src/components/Holos/Form/Elements/Label.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-/** Propiedades */
-defineProps({
-    id: String,
-    title: String,
-    required: Boolean
-});
-</script>
-
-<template>
-    <label v-if="title"
-        class="block text-sm font-medium text-page-t dark:text-page-dt"
-        :for="id"
-    >
-        {{ $t(title) }}
-        <span v-if="required"
-            class="text-danger dark:text-danger-d"
-        >
-            *
-        </span>
-    </label>
-</template>
diff --git a/src/components/Holos/Form/Image.vue b/src/components/Holos/Form/Image.vue
deleted file mode 100644
index 7843df4..0000000
--- a/src/components/Holos/Form/Image.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-import GoogleIcon      from '@Shared/GoogleIcon.vue'
-import Label           from './Elements/Label.vue';
-import SecondaryButton from '../Button/Secondary.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'photoInput'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    accept: {
-        default: 'image/png, image/jpeg',
-        type: String
-    },
-    class: String,
-    required: Boolean,
-    title: {
-        default: 'photo.title',
-        type: String
-    }
-});
-
-const fileType     = ref(null);
-const photoInput   = ref(null);
-const photoPreview = ref(null);
-
-/** Métodos */
-const selectNewPhoto = () => {
-    photoInput.value.click();
-};
-
-const updatePhotoPreview = () => {
-    const image_file = photoInput.value.files[0];
-
-    if (! image_file) return;
-
-    emit('photoInput', image_file);
-    
-    fileType.value = image_file.type;
-    
-    if(image_file.type == "application/pdf"){
-        photoPreview.value = image_file.name;
-    }else{
-    const reader = new FileReader();
-
-    reader.onload = (e) => {
-        photoPreview.value = e.target.result;
-    };
-
-    reader.readAsDataURL(image_file);
-    }
-};
-</script>
-
-<template>
-    <div class="col-span-6">
-        <input
-            ref="photoInput"
-            class="hidden"
-            type="file"
-            :accept="accept"
-            :required="required"
-            @change="updatePhotoPreview"
-        >
-        <Label
-            id="image_file"
-            class="dark:text-gray-800"
-            :required="required"
-            :title="title"
-        />
-        <div v-show="! photoPreview" class="mt-2">
-            <!-- si existe una imagen cargada, entonces se muestra en este slot -->
-            <slot />
-        </div>
-        <div v-show="photoPreview" class="mt-2">
-            <div v-if="fileType == 'application/pdf'" class="flex overflow-hidden max-w-full">
-                <GoogleIcon 
-                    class="text-gray-400" 
-                    name="picture_as_pdf"
-                    :title="$t('crud.edit')"
-                    outline 
-                />
-                <div class="ml-2 font-bold text-gray-400 flex-1">
-                    {{ photoPreview }}
-                </div>
-            </div>
-            <div v-else>
-                <span
-                    class="block rounded-lg h-40 bg-cover bg-no-repeat bg-center"
-                    :class="class"
-                    :style="'background-image: url(\'' + photoPreview + '\');'"
-                />
-            </div>
-            
-        </div>
-        <SecondaryButton
-            v-text="$t('photo.new')"
-            class="mt-2 mr-2"
-            type="button"
-            @click.prevent="selectNewPhoto"
-        />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Form/Input.vue b/src/components/Holos/Form/Input.vue
deleted file mode 100644
index 943de04..0000000
--- a/src/components/Holos/Form/Input.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup>
-import { v4 as uuidv4 } from 'uuid';
-import { computed, onMounted, ref } from 'vue';
-
-import Error from './Elements/Error.vue';
-import Label from './Elements/Label.vue';
-
-/** Opciones */
-defineOptions({
-  inheritAttrs: false
-})
-
-/** Eventos */
-const emit = defineEmits([
-    'update:modelValue'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    class: String,
-    disabled: Boolean,
-    id: String,
-    modelValue: Number | String,
-    onError: String | Array,
-    placeholder: String,
-    required: Boolean,
-    title: String,
-    type: {
-        default: 'text',
-        type: String
-    }
-});
-
-const input = ref(null);
-
-/** Propiedades calculadas */
-const autoId = computed(() => {
-    return (props.id)
-        ? props.id
-        : uuidv4()
-})
-
-const autoTitle = computed(() => {
-    if(props.title) {
-        return props.title;
-    }
-
-    return props.id;
-});
-
-/** Exposiciones */
-defineExpose({
-    focus: () => input.value.focus()
-});
-
-/** Ciclos */
-onMounted(() => {
-    if (input.value.hasAttribute('autofocus')) {
-        input.value.focus();
-    }
-});
-</script>
-
-<template>
-    <div class="w-full">
-        <Label
-            :id="autoId"
-            :required="required"
-            :title="autoTitle"
-        />
-        <input
-            v-bind="$attrs"
-            ref="input"
-            class="input-primary"
-            :class="{ 'cursor-not-allowed': disabled }"
-            :disabled="disabled"
-            :id="autoId"
-            :placeholder="placeholder"
-            :required="required"
-            :type="type"
-            :value="modelValue"
-            @input="$emit('update:modelValue', $event.target.value)"
-        >
-        <Error
-            :onError="onError"
-        />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Form/InputWithIcon.vue b/src/components/Holos/Form/InputWithIcon.vue
deleted file mode 100644
index 94c382a..0000000
--- a/src/components/Holos/Form/InputWithIcon.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup>
-import { v4 as uuidv4 } from 'uuid';
-import { computed, onMounted, ref } from 'vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Error      from './Elements/Error.vue';
-
-/** Opciones */
-defineOptions({
-  inheritAttrs: false
-})
-
-/** Eventos */
-const emit = defineEmits([
-    'update:modelValue'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    class: String,
-    disabled: Boolean,
-    id: String,
-    icon: String,
-    modelValue: Number | String,
-    onError: String | Array,
-    placeholder: String,
-    required: Boolean,
-    title: String,
-    type: {
-        default: 'text',
-        type: String
-    }
-});
-
-const input = ref(null);
-
-/** Propiedades computadas */
-const autoId = computed(() => {
-    return (props.id)
-        ? props.id
-        : uuidv4()
-})
-
-const value = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emit('update:modelValue', value)
-  }
-})
-
-/** Exposiciones */
-defineExpose({
-    focus: () => input.value.focus()
-});
-
-/** Ciclos */
-onMounted(() => {
-    if (input.value.hasAttribute('autofocus')) {
-        input.value.focus();
-    }
-});
-</script>
-
-<template>
-    <div class="mb-4">
-        <div class="flex items-center border-2 py-2 px-3 rounded-sm">
-            <GoogleIcon
-                :name="icon"
-            />
-            <input
-                ref="input"
-                v-model="value"
-                v-bind="$attrs"
-                class="pl-2 w-full outline-hidden border-none bg-transparent"
-                :class="{ 'cursor-not-allowed': disabled }"
-                :disabled="disabled"
-                :id="autoId"
-                :placeholder="placeholder"
-                :type="type"
-            />
-        </div>
-        <Error
-            :onError="onError"
-        />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Form/Selectable.vue b/src/components/Holos/Form/Selectable.vue
deleted file mode 100644
index 68a0a7c..0000000
--- a/src/components/Holos/Form/Selectable.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import VueMultiselect from 'vue-multiselect';
-
-import Error from './Elements/Error.vue';
-import Label from './Elements/Label.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'select',
-    'update:modelValue'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    customLabel: String,
-    disabled: Boolean,
-    label: {
-        default: 'name',
-        type: String
-    },
-    modelValue: String | Number,
-    multiple: Boolean,
-    onError: String | Array,
-    options: Object,
-    placeholder: {
-        default: 'Buscar ...',
-        type: String
-    },
-    required: Boolean,
-    trackBy: {
-        default: 'id',
-        type: String
-    },
-    title: String,
-});
-
-const multiselect = ref();
-
-/** Propiedades computadas */
-const value = computed({
-  get() {
-    return props.modelValue
-  },
-  set(value) {
-    emit('update:modelValue', value)
-  }
-})
-
-/** Exposiciones */
-defineExpose({
-    clean: () =>  multiselect.value.removeLastElement()
-});
-</script>
-
-<template>
-    <div class="flex flex-col">
-        <Label
-            :required="required"
-            :title="title"
-        />
-        <VueMultiselect
-            ref="multiselect"
-            v-model="value"
-            deselectLabel="Remover"
-            selectedLabel="Seleccionado"
-            selectLabel="Seleccionar"
-            :clear-on-select="false"
-            :close-on-select="true"
-            :custom-label="customLabel"
-            :disabled="disabled"
-            :label="label"
-            :multiple="multiple"
-            :options="options"
-            :placeholder="placeholder"
-            :preserve-search="true"
-            :required="required && !value"
-            :track-by="trackBy"
-            @select="(x, y) => emit('select', x, y)"
-        >
-            <template #noOptions>
-                {{ $t('noRecords') }}
-            </template>
-        </VueMultiselect>
-        <Error
-            :onError="onError"
-        />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Form/SingleFile.vue b/src/components/Holos/Form/SingleFile.vue
deleted file mode 100644
index f1aee71..0000000
--- a/src/components/Holos/Form/SingleFile.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-import GoogleIcon      from '@Shared/GoogleIcon.vue'
-import Label           from './Elements/Label.vue';
-import SecondaryButton from '../Button/Secondary.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'update:modelValue'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    accept: {
-        default: 'image/png, image/jpeg',
-        type: String
-    },
-    class: String,
-    modelValue:Object|String,
-    required: Boolean,
-    title: {
-        default: 'photo.title',
-        type: String
-    }
-});
-
-const fileType     = ref(null);
-const fileName     = ref(null);
-const photoInput   = ref(null);
-const photoPreview = ref(null);
-
-/** Métodos */
-const selectNewPhoto = () => {
-    photoInput.value.click();
-};
-
-const updatePhotoPreview = () => {
-    const image_file = photoInput.value.files[0];
-
-    if (! image_file) return;
-
-    emit('update:modelValue', image_file);
-    
-    fileType.value = image_file.type;
-    fileName.value = image_file.name;
-    
-    const reader = new FileReader();
-
-    reader.onload = (e) => {
-        photoPreview.value = e.target.result;
-    };
-
-    reader.readAsDataURL(image_file);
-
-};
-</script>
-
-<template>
-    <div class="col-span-6">
-        <input
-            ref="photoInput"
-            type="file"
-            class="hidden"
-            :accept="accept"
-            :required="required"
-            @change="updatePhotoPreview"
-        >
-        <Label
-            id="image_file"
-            :title="title"
-            :required="required"
-        />
-        <div v-show="! photoPreview" class="mt-2">
-            <!-- si existe una imagen cargada, entonces se muestra en este slot -->
-            <slot name="previous"/>
-        </div>
-        <div v-show="photoPreview" class="mt-2">
-            <div class="flex overflow-hidden max-w-full">
-                <GoogleIcon 
-                    class="text-gray-400" 
-                    name="picture_as_pdf"
-                    :title="$t('crud.edit')"
-                    outline 
-                />
-                <div class="ml-2 font-bold text-gray-400 flex-1">
-                    <a 
-                        target="_blank"
-                        :href="photoPreview"
-                    >
-                        {{ fileName }}
-                    </a>
-                </div>
-            </div>
-        </div>
-        <SecondaryButton
-            v-text="$t('files.select')"
-            class="mt-2 mr-2"
-            type="button"
-            @click.prevent="selectNewPhoto"
-        />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Form/Switch.vue b/src/components/Holos/Form/Switch.vue
deleted file mode 100644
index cb8fad6..0000000
--- a/src/components/Holos/Form/Switch.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup>
-import { v4 as uuidv4 } from 'uuid';
-import { computed } from 'vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'update:checked'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    checked: {
-        default: false,
-        type: [
-            Array,
-            Boolean
-        ]
-    },
-    disabled: Boolean,
-    title: {
-        default: Lang('active'),
-        type: String
-    },
-    value: {
-        default: null,
-        type: String
-    }
-});
-
-const uuid = uuidv4()
-
-/** Propiedades computadas */
-const proxyChecked = computed({
-    get() {
-        return props.checked;
-    },
-    set(val) {
-        emit('update:checked', val);
-    },
-});
-</script>
-
-<template>
-    <div class="flex items-center">
-        <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
-            <input
-                v-model="proxyChecked"
-                class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"
-                name="toggle"
-                type="checkbox"
-                :id="uuid"
-                :disabled="disabled"
-                :value="value"
-            />
-            <label
-                class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"
-                :for="uuid"
-            />
-        </div>
-        <label
-            class="text-xs text-gray-700"
-            :for="uuid"
-        >
-            {{ $t(title) }}
-        </label>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Form/Textarea.vue b/src/components/Holos/Form/Textarea.vue
deleted file mode 100644
index ab02f37..0000000
--- a/src/components/Holos/Form/Textarea.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup>
-import { v4 as uuidv4 } from 'uuid';
-import { computed, onMounted, ref } from 'vue';
-
-import Error from './Elements/Error.vue';
-import Label from './Elements/Label.vue';
-
-/** Opciones */
-defineOptions({
-  inheritAttrs: false
-})
-
-/** Eventos */
-const emit = defineEmits([
-    'update:modelValue'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    class: String,
-    id: String,
-    modelValue: Number | String,
-    onError: String,
-    placeholder: String,
-    required: Boolean,
-    title: String,
-});
-
-const input = ref(null);
-
-/** Exposiciones */
-defineExpose({
-    focus: () => input.value.focus()
-});
-
-/** Propiedades computadas */
-const autoId = computed(() => {
-    return (props.id)
-        ? props.id
-        : uuidv4()
-})
-
-const autoTitle = computed(() => {
-    if(props.title) {
-        return props.title;
-    }
-
-    return props.id;
-});
-
-/** Ciclos */
-onMounted(() => {
-    if (input.value.hasAttribute('autofocus')) {
-        input.value.focus();
-    }
-});
-</script>
-
-<template>
-    <div class="w-full">
-        <Label
-            :id="autoId"
-            :required="required"
-            :title="autoTitle"
-        />
-        <textarea
-            ref="input"
-            v-bind="$attrs"
-            class="input-primary"
-            :id="autoId"
-            :placeholder="placeholder"
-            :required="required"
-            :value="modelValue"
-            @input="$emit('update:modelValue', $event.target.value)"
-        ></textarea>
-        <Error 
-            :onError="onError"
-        />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Form/Todo/ItemWithForm.vue b/src/components/Holos/Form/Todo/ItemWithForm.vue
deleted file mode 100644
index b42664c..0000000
--- a/src/components/Holos/Form/Todo/ItemWithForm.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<script setup>
-import { computed, onMounted, ref, watch, watchEffect } from 'vue'
-import { lang } from '@Lang/i18n';
-
-import GoogleIcon    from '@Shared/GoogleIcon.vue';
-import PrimaryButton from '../../Button/Primary.vue';
-import Input         from '../../Form/Input.vue';
-import Selectable    from '../../Form/Selectable.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'update:modelValue'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    itemATitle: String,
-    itemBTitle: String,
-    items: Object,
-    modelValue: Object,
-    title: String,
-    type: {
-        default: 'text',
-        type: String
-    }
-})
-
-// Elementos primarios (controlador)
-const itemA            = ref()
-const itemsASelected   = ref([]);
-const itemsAUnselected = ref([]);
-
-// Elementos secundarios
-const itemB = ref();
-
-/** Propiedades computadas */
-const values = computed({
-  get() {
-    return props.modelValue
-  },
-  set(val) {
-    emit('update:modelValue', val)
-  }
-})
-
-/** Métodos */
-function add() {
-    if (itemA.value) {
-        if(itemB.value) {
-            values.value.push({
-                item: {
-                    _id: itemA.value._id,
-                    name: itemA.value.name,
-                },
-                value: itemB.value,
-            });
-    
-            let x = itemsAUnselected.value.filter((o) => {
-                return o._id != itemA.value._id
-            })
-    
-            itemsAUnselected.value = x
-            itemsASelected.value.push({...itemA.value}),
-        
-            itemA.value = null
-            itemB.value = null
-        } else {
-            Notify.warning(Lang('todo.uniqueSub.b.required', {name:Lang('subclassification')}))
-        }
-    } else {
-        Notify.warning(Lang('todo.uniqueSub.a.required', {name:Lang('classification')}))
-    }
-}
-
-function remove(index, provider) {
-    itemsAUnselected.value.push({...provider})
-    itemsASelected.value.splice(itemsASelected.value.indexOf(provider), 1)
-    values.value.splice(index, 1)
-}
-
-/** Exposiciones */
-defineExpose({
-    itemA,
-    itemB,
-    add,
-})
-
-/** Observadores */
-watchEffect(() => {
-    if(props.items.length > 0) {
-        itemsAUnselected.value = props.items
-    }
-})
-
-watch(itemA, () => {
-    emit('updateItemsB', itemA.value?.id)
-
-    if(!itemA.value) {
-        itemB.value = null
-    }
-})
-
-/** Ciclos */
-onMounted(() => {
-    if(values.value) {
-        values.value.forEach((i) => {
-            itemsASelected.value.push({...i})
-        })
-    }
-})
-</script>
-
-<template>
-    <div class="rounded-sm border border-primary dark:border-primary-d p-2">
-        <p>{{ title }}</p>
-        <div class="w-full grid gap-2 grid-cols-2 dark:bg-primary-d/50 rounded-md">
-            <Selectable
-                v-model="itemA"
-                :title="itemATitle"
-                :options="itemsAUnselected"
-            />
-            <Input
-                v-model="itemB"
-                :title="itemBTitle"
-                :type="type"
-                @keyup.enter="add"
-            />
-            <div class="col-span-2 flex justify-center">
-                <PrimaryButton
-                    type="button"
-                    @click="add"
-                >
-                    {{ $t('add') }}
-                </PrimaryButton>
-            </div>
-            <div class="col-span-2 text-sm">
-                <p><b>{{ $t('items') }}</b> ({{ values.length }})</p>
-            </div>
-            <div class="col-span-2 space-y-2 ">
-                <template v-for="item, index in values">
-                    <div class="relative rounded-sm border border-primary/50">
-                        <div class="grid gap-2 grid-cols-2 w-full items-center p-2 dark:bg-primary-d/50">
-                            <Input
-                                v-model="item.item.name"
-                                :title="itemATitle"
-                                disabled
-                            />
-                            <Input
-                                v-model="item.value"
-                                :title="itemBTitle"
-                            />
-                        </div>
-                        <div class="absolute right-1 top-1">
-                            <GoogleIcon
-                                class="btn-icon-primary"
-                                name="close"
-                                @click="remove(index, item.item)"
-                            />
-                        </div>
-                    </div>
-                </template>
-            </div>
-            <slot />
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/FormSection.vue b/src/components/Holos/FormSection.vue
deleted file mode 100644
index 98892ac..0000000
--- a/src/components/Holos/FormSection.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup>
-import { computed, useSlots } from 'vue';
-import SectionTitle from './SectionTitle.vue';
-
-defineEmits(['submitted']);
-
-const hasActions = computed(() => !! useSlots().actions);
-</script>
-
-<template>
-    <div class="md:grid md:grid-cols-3 md:gap-6">
-        <SectionTitle>
-            <template #title>
-                <slot name="title" />
-            </template>
-            <template #description>
-                <slot name="description" />
-            </template>
-        </SectionTitle>
-
-        <div class="mt-5 md:mt-0 md:col-span-2">
-            <form @submit.prevent="$emit('submitted')">
-                <div
-                    class="p-4 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50"
-                    :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
-                >
-                    <div class="grid grid-cols-6 gap-6">
-                        <slot name="form" />
-                    </div>
-                </div>
-
-                <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 text-end sm:px-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-bl-md sm:rounded-br-md">
-                    <slot name="actions" />
-                </div>
-            </form>
-        </div>
-    </div>
-</template>
diff --git a/src/components/Holos/Inbox.vue b/src/components/Holos/Inbox.vue
deleted file mode 100644
index 2d5ef60..0000000
--- a/src/components/Holos/Inbox.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import InboxItem  from './Inbox/Item.vue';
-
-/** Propiedades */
-const props = defineProps({
-    inboxCtl: Object,
-    items: Object,
-    searcherCtl: Object,
-    withMultiSelection: Boolean 
-});
-
-/** Propiedades */
-const filterMessages = ref(false);
-
-/** Métodos */
-const selectThisPage   = () => props.inboxCtl.onSelectAll(props.items, false);
-const unselectThisPage = () => props.inboxCtl.onUnselectAll(props.items)
-
-const search = url => props.searcherCtl.searchWithInboxPagination(url);
-
-</script>
-
-<template>
-    <div v-if="inboxCtl.inboxNumberSelected.value.length"
-        class="w-full p-1 rounded-b-md bg-primary text-white"
-    >
-        <span>
-            ({{ inboxCtl.inboxNumberSelected.value.length }}) Seleccionados: {{ inboxCtl.inboxNumberSelected.value.join(", ") }}.
-        </span>
-    </div>
-    <div class="w-full flex overflow-x-auto">
-        <div class="w-fit">
-            <div v-if="$slots['main-menu']"
-                class="w-48 xl:w-64"
-            >
-                <slot
-                    name="main-menu"
-                />
-            </div>
-            <div v-if="$slots['menu']"
-                class="w-48 xl:w-64 pr-2 pb-8 border-r border-gray-300"
-                :class="{'mt-16':!$slots['main-menu']}"
-            >
-                <ul class="space-y-1">
-                    <slot
-                        name="menu"
-                    />
-                </ul>
-            </div>
-        </div>
-        <div class="flex-1">
-            <div v-if="$slots['actions']"
-                class="h-16 flex items-center justify-between py-2"
-            >
-                <div class="flex items-center">
-                    <div v-if="withMultiSelection"
-                        class="relative flex items-center px-0.5 space-x-0.5"
-                     >
-                        <button class="px-2 pt-1" @click="filterMessages = !filterMessages">
-                            <GoogleIcon
-                                class="text-xl"
-                                name="checklist"
-                                outline
-                            />
-                        </button>
-                        <div
-                            @click.away="filterMessages = false"
-                            class="bg-gray-200 shadow-2xl absolute left-0 top-6 w-32 py-2 text-gray-900 rounded-sm z-10"
-                            :class="{'hidden':!filterMessages}"
-                        >
-                            <button
-                                type="button"
-                                class="inbox-check-all-option"
-                                @click="selectThisPage()"
-                            >
-                                Seleccionar toda esta página
-                            </button>
-                            <button
-                                type="button"
-                                class="inbox-check-all-option"
-                                @click="unselectThisPage()"
-                            >
-                                Deseleccionar toda esta página
-                            </button>
-                        </div>
-                    </div>
-                    <div class="flex items-center">
-                        <slot name="actions" />
-                    </div>
-                </div>
-                <template v-if="items.links">
-                    <div v-if="items.links.length > 3"
-                        class="flex w-full justify-end"
-                    >
-                        <div class="flex w-full justify-end flex-wrap space-x-1 -mb-1">
-                          <template v-for="(link, k) in items.links" :key="k">
-                            <div v-if="link.url === null && k == 0"
-                                class="px-2 py-1 text-sm leading-4 text-gray-400 border rounded"
-                            >
-                                <GoogleIcon
-                                    name="arrow_back"
-                                />
-                            </div>
-                            <button v-else-if="k === 0"
-                                class="px-2 py-1 text-sm leading-4 border rounded" 
-                                :class="{ 'bg-primary text-white': link.active }"
-                                @click="search(link.url)"
-                            >
-                                <GoogleIcon
-                                    name="arrow_back"
-                                />
-                            </button>
-                            <div v-else-if="link.url === null && k == (items.links.length - 1)"
-                                class="px-2 py-1 text-sm leading-4 text-gray-400 border rounded"
-                            >
-                                <GoogleIcon
-                                    name="arrow_forward"
-                                />
-                            </div>
-                            <button v-else-if="k === (items.links.length - 1)"
-                                class="px-2 py-1 text-sm leading-4 border rounded" 
-                                :class="{ 'bg-primary text-white': link.active }"
-                                @click="search(link.url)"
-                            >
-                                <GoogleIcon
-                                    name="arrow_forward"
-                                />
-                            </button>
-                            <button v-else class="px-2 py-1 text-sm leading-4 border rounded" 
-                                v-html="link.label"
-                                :class="{ 'bg-primary text-white': link.active }"
-                                @click="search(link.url)"
-                            ></button>
-                          </template>
-                        </div>
-                    </div>
-                </template>
-            </div>
-            <div v-else class="w-full mt-4"></div>
-            <div v-if="items.total > 0"
-                class="bg-gray-100 "
-            >
-                <ul class="ml-1">
-                    <slot
-                        name="head"
-                        :items="items.data"
-                    />
-                </ul>
-                <ul class="ml-1">
-                    <slot
-                        name="items"
-                        :items="items.data"
-                    />
-                </ul>
-            </div>
-            <template v-else>
-                <InboxItem>
-                    <template #item>
-                        <span class="w-28 pr-2 truncate">-</span>
-                        <span class="w-96 truncate">Sin resultados</span>
-                    </template>
-                    <template #date>
-                       -
-                    </template>
-                </InboxItem> 
-            </template>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Inbox/Item.vue b/src/components/Holos/Inbox/Item.vue
deleted file mode 100644
index a4d5ea3..0000000
--- a/src/components/Holos/Inbox/Item.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-
-/** Propiedades */
-const props = defineProps({
-    inboxCtl: Object, //Controller
-    item: Object,
-    selecteds: Object
-})
-
-const check        = ref(false);
-const messageHover = ref(false);
-
-/** Métodos */  
-const select = () => (!check.value)
-    ? props.inboxCtl.onSelectOne(props.item)
-    : props.inboxCtl.onUnselectOne(props.item);
-
-const selected = computed(() => {
-    const status = (props.item)
-        ? props.inboxCtl.inboxIdSelected.value.includes(props.item.id)
-        : false;
-
-    check.value = status;
-
-    return status;
-});
-</script>
-
-<template>
-    <li
-        class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300"
-        :class="{'bg-secondary text-secondary-t':selected, 'bg-primary/50 text-primary-t hover:bg-secondary/50 hover:text-secondary-t':!selected}"
-    >
-        <div class="pr-2">
-            <input
-                v-model="check"
-                class="focus:ring-0 border-2 border-gray-400"
-                type="checkbox"
-                @click="select"
-            >
-        </div>
-        <div 
-            class="w-full flex items-center justify-between cursor-pointer"
-            @mouseover="messageHover  = true"
-            @mouseleave="messageHover = false"
-        >
-            <div class="flex items-center">
-                <slot name="item" />
-            </div>
-            <div
-                class="w-36 flex items-center justify-end"
-            >
-                <div
-                    class="flex items-center space-x-2"
-                    :class="{'hidden':!messageHover}"
-                >
-                    <slot name="actions" :check="check" />
-                </div>
-                <div
-                    class="flex space-x-4 text-xs"
-                    :class="{'hidden':messageHover}"
-                >
-                    <slot name="date" />
-                </div>
-            </div>
-        </div>
-    </li>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Inbox/ItemTitle.vue b/src/components/Holos/Inbox/ItemTitle.vue
deleted file mode 100644
index bfceb2b..0000000
--- a/src/components/Holos/Inbox/ItemTitle.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-    <li
-        class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300"
-    >
-        <div class="pl-5 w-full flex items-center justify-between cursor-pointer">
-            <div class="flex items-center font-semibold">
-                <slot />
-            </div>
-        </div>
-    </li>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Inbox/Menu/Item.vue b/src/components/Holos/Inbox/Menu/Item.vue
deleted file mode 100644
index f8850a2..0000000
--- a/src/components/Holos/Inbox/Menu/Item.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { RouterLink } from 'vue-router';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Propiedades */
-const props = defineProps({
-    icon: String,
-    counter: Number,
-    to: String,
-    toParam: {
-        default: {},
-        type: Object 
-    },
-    title: String,
-});
-
-/** Propiedades computadas */
-const classes = computed(() => {
-    let status = route().current(props.to, props.toParam)
-        ? 'bg-secondary/30'
-        : 'border-transparent hover:bg-secondary/30';
-
-    return ` text-primary flex items-center justify-between py-1.5 px-4 rounded-sm cursor-pointer ${status} transition`
-});
-</script>
-
-<template>
-    <li>
-        <RouterLink 
-            v-if="to"
-            :class="classes"
-            :to="to"
-        >
-            <span class="flex items-center space-x-2">
-                <GoogleIcon 
-                    class="text-lg"
-                    :name="icon"
-                    outline
-                />
-                <span>
-                    {{ title }}
-                </span>
-            </span>
-            <span v-if="counter > 0" class="bg-primary text-gray-100 font-bold px-2 py-0.5 text-xs rounded-sm">
-                {{ counter }}
-            </span>
-        </RouterLink>
-    </li>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Inbox/Menu/Static.vue b/src/components/Holos/Inbox/Menu/Static.vue
deleted file mode 100644
index 04cf041..0000000
--- a/src/components/Holos/Inbox/Menu/Static.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { RouterLink } from 'vue-router';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Propiedades */
-const props = defineProps({
-    icon: String,
-    to: String,
-    title: String,
-    type: {
-        default: 'primary',
-        type: String
-    }
-});
-
-/** Propiedades computadas */
-const classes = computed(() => {
-    return `inbox-menu-button-${props.type}`;
-});
-</script>
-
-<template>
-    <div class="h-16 flex items-center pr-2">
-        <RouterLink 
-            :class="classes"
-            :to="to"
-        >
-            <span class="flex items-center space-x-2 ">
-                <GoogleIcon 
-                    class="text-lg text-white font-bold"
-                    :name="icon"
-                    outline
-                />
-                <span>
-                    {{ title }}
-                </span>
-            </span>
-        </RouterLink>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/InputLabel.vue b/src/components/Holos/InputLabel.vue
deleted file mode 100644
index 9967f17..0000000
--- a/src/components/Holos/InputLabel.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup>
-defineProps({
-    value: String,
-});
-</script>
-
-<template>
-    <label class="block font-medium text-sm text-gray-700">
-        <span v-if="value">{{ value }}</span>
-        <span v-else><slot /></span>
-    </label>
-</template>
diff --git a/src/components/Holos/Layout/App.vue b/src/components/Holos/Layout/App.vue
deleted file mode 100644
index fa9e702..0000000
--- a/src/components/Holos/Layout/App.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<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 LeftSidebar         from '../Skeleton/Sidebar/Left.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">
-        <LeftSidebar
-            @open="leftSidebar.toggle()"
-        >
-            <slot name="leftSidebar"/>
-        </LeftSidebar>
-        <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>
diff --git a/src/components/Holos/Layout/Auth.vue b/src/components/Holos/Layout/Auth.vue
deleted file mode 100644
index f629431..0000000
--- a/src/components/Holos/Layout/Auth.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup>
-import { onMounted } from 'vue'
-import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
-import useDarkMode from '@Stores/DarkMode'
-
-import Logo       from '@Holos/Logo.vue'
-import IconButton from '@Holos/Button/Icon.vue'
-
-/** Definidores */
-const darkMode = useDarkMode()
-
-/** Propiedades */
-defineProps({
-    title: String
-})
-
-/** Ciclos */
-onMounted(() => {
-    darkMode.boot()
-});
-</script>
-
-<template>
-  <div class="h-screen flex bg-primary dark:bg-primary-d">
-    <div
-      class="relative flex w-full lg:w-full justify-around items-center with-transition"
-      :class="{'app-bg-light':darkMode.isLight,'app-bg-dark':darkMode.isDark}"
-    >
-      <header class="absolute top-0 flex w-full h-8 px-1 items-center justify-end text-white">
-        <div>
-          <IconButton v-if="darkMode.isLight"
-            icon="light_mode"
-            :title="$t('app.theme.light')"
-            @click="darkMode.applyDark()"
-          />
-          <IconButton v-else
-            icon="dark_mode"
-            :title="$t('app.theme.dark')"
-            @click="darkMode.applyLight()"
-          />
-        </div>
-      </header>
-      <div class="flex w-full flex-col items-center justify-center space-y-2">
-        <div class="flex space-x-2 items-center justify-start text-white">
-          <Logo
-            class="text-lg inline-flex"
-          />
-        </div>
-
-        <main class="bg-white/10 w-full backdrop-blur-xs text-white px-4 py-4 rounded-sm max-w-80">
-          <RouterView />
-        </main>
-
-        <footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-md text-white transition-colors duration-global">
-          <div>
-              <span>
-                  &copy;2024 {{ APP_COPYRIGHT }}
-              </span>
-          </div>
-          <div>
-              <span>
-                APP {{ APP_VERSION }} API {{ $page.app.version }}
-              </span>
-          </div>
-        </footer>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/components/Holos/Layout/RhApp.vue b/src/components/Holos/Layout/RhApp.vue
deleted file mode 100644
index c3f6332..0000000
--- a/src/components/Holos/Layout/RhApp.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<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/Layout/TermsLayout.vue b/src/components/Holos/Layout/TermsLayout.vue
deleted file mode 100644
index 83040d9..0000000
--- a/src/components/Holos/Layout/TermsLayout.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup>
-import { onMounted } from 'vue'
-import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
-import useDarkMode from '@Stores/DarkMode'
-
-import IconButton from '../Button/Icon.vue'
-import Logo       from '../Logo.vue';
-
-/** Definidores */
-const darkMode = useDarkMode()
-
-/** Propiedades */
-defineProps({
-    title: String
-})
-
-/** Ciclos */
-onMounted(() => {
-    darkMode.boot()
-});
-</script>
-
-<template>
-  <div class="min-h-screen flex">
-    <div
-      class="relative flex w-full lg:w-full justify-around items-start with-transition"
-      :class="{'app-bg-light':darkMode.isLight,'app-bg-dark':darkMode.isDark}"
-    >
-      <header class="absolute top-0 flex w-full h-8 px-1 items-center justify-end text-white">
-        <div>
-          <IconButton v-if="darkMode.isLight"
-            icon="light_mode"
-            :title="$t('app.theme.light')"
-            @click="darkMode.applyDark()"
-          />
-          <IconButton v-else
-            icon="dark_mode"
-            :title="$t('app.theme.dark')"
-            @click="darkMode.applyLight()"
-          />
-        </div>
-      </header>
-      <div class="flex w-full flex-col  space-y-2">
-        <div class="flex space-x-2 items-center justify-start text-white">
-          <Logo
-              class="text-lg inline-flex"
-            />
-        </div>
-
-        <main class="bg-white/10 w-full mx-auto sm:max-w-2xl backdrop-blur-xs text-white px-4 py-8 rounded-md">
-          <slot />
-        </main>
-
-        <footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-xs text-white transition-colors duration-global">
-          <div>
-              <span>
-                  &copy;{{ APP_COPYRIGHT }}
-              </span>
-          </div>
-          <div>
-              <span>
-                  Versión {{ APP_VERSION }}
-              </span>
-          </div>
-        </footer>
-      </div>
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Logo.vue b/src/components/Holos/Logo.vue
deleted file mode 100644
index f6b176c..0000000
--- a/src/components/Holos/Logo.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup>
-import { hasToken } from '@Services/Api';
-import { useRouter } from 'vue-router';
-
-/** Definidores */
-const router = useRouter();
-
-/** Métodos */
-const home = () => {
-    if(hasToken()) {
-        router.push({ name: 'dashboard.index' });
-    } else {
-        location.replace('/');
-    }
-}
-</script>
-<template>
-    <div
-        class="flex w-full justify-center items-center space-x-2 cursor-pointer"
-        @click="home"
-    >
-        <img :src="$page.app.logo" class="h-20" />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Modal/Destroy.vue b/src/components/Holos/Modal/Destroy.vue
deleted file mode 100644
index 781bee8..0000000
--- a/src/components/Holos/Modal/Destroy.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-import ModalBase       from './Elements/Base.vue';
-import DangerButton    from '../Button/Danger.vue';
-import SecondaryButton from '../Button/Secondary.vue';
-
-/** Eventos */
-defineEmits([
-    'close',
-    'destroy',
-]);
-
-/** Propiedades */
-const props = defineProps({
-    title: {
-        default: Lang('delete.title'),
-        type: String
-    }
-});
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Exposiciones */
-defineExpose({
-    open:  () => modalRef.value.open(),
-    close: () => modalRef.value.close()
-});
-</script>
-
-<template>
-    <ModalBase
-        ref="modalRef"
-        @close="$emit('close')"
-    >
-        <template #title>
-            <p
-                class="font-bold text-xl"
-                v-text="title"
-            />
-        </template>
-        <template #content>
-            <div class="w-full right-0">
-                <div class="overflow-hidden space-y-2 shadow-lg">
-                    <slot />
-                    <div class="px-4 pb-2">
-                        <p 
-                        class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
-                        v-text="$t('delete.confirm')"
-                        />
-                    </div>
-                </div>
-            </div>
-        </template>
-        <template #footer>
-            <div class="space-x-2">
-                <slot name="buttons" />
-                <DangerButton
-                    v-text="$t('delete.title')"
-                    @click="$emit('destroy')"
-                />
-                <SecondaryButton
-                    v-text="$t('cancel')"
-                    @click="modalRef.close()"
-                />
-            </div>
-        </template>
-    </ModalBase>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Modal/Elements/Base.vue b/src/components/Holos/Modal/Elements/Base.vue
deleted file mode 100644
index c47267c..0000000
--- a/src/components/Holos/Modal/Elements/Base.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup>
-import { computed, ref, watch } from 'vue';
-
-/** Eventos */
-const emit = defineEmits(['close']);
-
-/** Propiedades */
-const props = defineProps({
-    maxWidth: {
-        default: '2xl',
-        type: String
-    }
-});
-
-const show = ref(false);
-
-/** Métodos */
-const maxWidthClass = computed(() => {
-    return {
-        'sm': 'sm:max-w-sm',
-        'md': 'sm:max-w-md',
-        'lg': 'sm:max-w-lg',
-        'xl': 'sm:max-w-xl',
-        '2xl': 'sm:max-w-2xl',
-        '3xl': 'sm:max-w-3xl',
-        '4xl': 'sm:max-w-4xl',
-        '5xl': 'sm:max-w-5xl',
-        '6xl': 'sm:max-w-6xl',
-        '7xl': 'sm:max-w-7xl',
-    }[props.maxWidth];
-});
-
-/** Observadores */
-watch(() => show, () => {
-    if (show.value) {
-        document.body.style.overflow = 'hidden';
-    } else {
-        document.body.style.overflow = null;
-    }
-});
-
-/** Exposiciones */
-defineExpose({
-    open:  () => show.value = true,
-    close: () => {
-        show.value = false;
-        emit('close');
-    }
-});
-</script>
-
-<template>
-    <teleport to="body">
-        <transition
-            enter-active-class="ease-out duration-300"
-            enter-from-class="opacity-0"
-            enter-to-class="opacity-100"
-            leave-active-class="ease-in duration-300"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-        >
-            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 bg-primary/50 z-50 transition-all"></div>
-        </transition>
-        <transition
-            enter-active-class="ease-out duration-300"
-            enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to-class="opacity-100 translate-y-0 sm:scale-100"
-            leave-active-class="ease-in duration-300"
-            leave-from-class="opacity-100 translate-y-0 sm:scale-100"
-            leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        >
-            <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50 transition-all" scroll-region>
-                <div 
-                    v-show="show" 
-                    class="mb-6 bg-page text-page-t dark:bg-page-d dark:text-page-dt rounded-sm overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" 
-                    :class="maxWidthClass"
-                >
-                    <div class="flex flex-col">
-                        <div class="text-lg px-4 font-medium">
-                            <slot name="title" />
-                        </div>
-                        <div class="text-sm">
-                            <slot name="content" />
-                        </div>
-                    </div>
-                    <div class="flex flex-row justify-center p-2 text-end">
-                        <slot name="footer" />
-                    </div>
-                </div>
-            </div>
-        </transition>
-    </teleport>
-</template>
diff --git a/src/components/Holos/Modal/Elements/Header.vue b/src/components/Holos/Modal/Elements/Header.vue
deleted file mode 100644
index 7105ad9..0000000
--- a/src/components/Holos/Modal/Elements/Header.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-/** Propiedades */
-defineProps({
-    subtitle: String,
-    title: String
-})
-</script>
-
-<template>
-    <div class="text-center p-6 bg-primary dark:bg-primary-d">
-        <slot />
-        <p class="pt-2 text-lg font-bold text-primary-t dark:text-primary-t-d">
-            {{ title }}
-        </p>
-        <p v-if="subtitle"
-            class="text-sm text-primary-t dark:text-primary-t-d"
-        >
-            {{ subtitle }}
-        </p>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Modal/Show.vue b/src/components/Holos/Modal/Show.vue
deleted file mode 100644
index 01b40c8..0000000
--- a/src/components/Holos/Modal/Show.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-
-import ModalBase       from './Elements/Base.vue';
-import SecondaryButton from '../Button/Secondary.vue';
-
-/** Eventos */
-const emit = defineEmits(['close']);
-
-/** Propiedades */
-const props = defineProps({
-    title: String
-});
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Exposiciones */
-defineExpose({
-    open: ()  => modalRef.value.open(),
-    close: () => modalRef.value.close()
-});
-</script>
-
-<template>
-    <ModalBase
-        ref="modalRef"
-        @close="emit('close')"
-    >
-        <template #title>
-            <p
-                class="font-bold text-xl"
-                v-text="title ?? $t('details')"
-            />
-        </template>
-        <template #content>
-            <div class="w-full right-0">
-                <div class="overflow-hidden shadow-lg">
-                    <slot />
-                </div>
-            </div>
-        </template>
-        <template #footer>
-            <div class="space-x-2">
-                <slot name="buttons" />
-                <SecondaryButton
-                    v-text="$t('close')"
-                    @click="modalRef.close()" 
-                />
-            </div>
-        </template>
-    </ModalBase>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Modal/Template/Destroy.vue b/src/components/Holos/Modal/Template/Destroy.vue
deleted file mode 100644
index 88c0082..0000000
--- a/src/components/Holos/Modal/Template/Destroy.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { api } from '@Services/Api.js';
-
-import DestroyModal from '../Destroy.vue';
-import Header       from '../Elements/Header.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'open',
-    'close',
-    'update'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    to: Function,
-    title: {
-        type: String,
-        default: 'name'
-    },
-    subtitle: {
-        type: String,
-        default: 'description'
-    }
-});
-
-const model    = ref({});
-const modalRef = ref(null);
-
-/** Métodos */
-const destroy = () => {
-    api.delete(props.to(model.value.id), {
-        onSuccess: () => {
-            Notify.success(Lang('deleted'));
-            emit('update');
-        },
-        onError: () => {
-            Notify.info(Lang('notFound'));
-        },
-        onFinish: () => {
-            modalRef.value.close();
-        }
-    });
-}
-
-/** Exposiciones */
-defineExpose({
-    open:  (modelData) => {
-        model.value = modelData;
-        modalRef.value.open();
-
-        emit('open')
-    }
-});
-</script>
-
-<template>
-    <DestroyModal
-        ref="modalRef"
-        @close="$emit('close')"
-        @destroy="destroy"
-    >
-        <Header
-            :title="model[title]"
-            :subtitle="model[subtitle]"
-        />
-    </DestroyModal>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/NewTable.vue b/src/components/Holos/NewTable.vue
deleted file mode 100644
index 574316f..0000000
--- a/src/components/Holos/NewTable.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup>
-import GoogleIcon from '../Shared/GoogleIcon.vue';
-import Loader from '../Shared/Loader.vue';
-
-/** Eventos */
-const emit = defineEmits([
-  'send-pagination'
-]);
-
-/** Propiedades */
-const props = defineProps({
-  items: Object,
-  processing: Boolean
-});
-
-</script>
-
-<template>
-  <div class="bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-
-    <!-- Tabla -->
-    <div class="overflow-x-auto">
-      <table v-if="!processing" class="w-full">
-        <thead>
-          <tr class="text-left text-sm text-gray-500 dark:text-primary-dt/70">
-            <slot name="head" />
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-100 dark:divide-primary/20 text-sm text-gray-700 dark:text-primary-dt">
-          <template v-if="items?.total > 0">
-            <slot
-              name="body"
-              :items="items?.data"
-            />
-          </template>
-          <template v-else>
-            <tr>
-              <slot name="empty" />
-            </tr>
-          </template>
-        </tbody>
-      </table>
-
-      <!-- Estado de carga -->
-      <table v-else class="animate-pulse w-full">
-        <thead>
-          <tr>
-            <th colspan="100%" class="h-8 text-center">
-              <div class="flex items-center justify-center">
-                <Loader />
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="i in 3" :key="i">
-            <td colspan="100%" class="table-cell h-16 text-center">
-              <div class="w-full h-4 bg-secondary/50 rounded-md"></div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <!-- Paginación -->
-    <template v-if="items?.links && items.links.length > 3">
-      <div class="mt-6 flex w-full justify-end">
-        <div class="flex w-full justify-end flex-wrap space-x-1 -mb-1">
-          <template v-for="(link, k) in items.links" :key="k">
-            <!-- Botón anterior deshabilitado -->
-            <div v-if="link.url === null && k == 0"
-              class="px-3 py-2 text-sm leading-4 text-gray-400 border rounded-lg bg-gray-50 dark:bg-primary-d dark:border-primary/20"
-            >
-              <GoogleIcon name="arrow_back" class="w-4 h-4" />
-            </div>
-            
-            <!-- Botón anterior activo -->
-            <button v-else-if="k === 0" 
-              class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50" 
-              :class="{ 
-                'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
-                'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
-              }"
-              @click="emit('send-pagination', link.url)"
-            >
-              <GoogleIcon name="arrow_back" class="w-4 h-4" />
-            </button>
-            
-            <!-- Botón siguiente deshabilitado -->
-            <div v-else-if="link.url === null && k == (items.links.length - 1)"
-              class="px-3 py-2 text-sm leading-4 text-gray-400 border rounded-lg bg-gray-50 dark:bg-primary-d dark:border-primary/20"
-            >
-              <GoogleIcon name="arrow_forward" class="w-4 h-4" />
-            </div>
-            
-            <!-- Botón siguiente activo -->
-            <button v-else-if="k === (items.links.length - 1)" 
-              class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50" 
-              :class="{ 
-                'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
-                'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
-              }"
-              @click="emit('send-pagination', link.url)"
-            >
-              <GoogleIcon name="arrow_forward" class="w-4 h-4" />
-            </button>
-            
-            <!-- Números de página -->
-            <button v-else 
-              class="px-3 py-2 text-sm leading-4 border rounded-lg transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-primary-d/50" 
-              :class="{ 
-                'bg-primary text-white border-primary dark:bg-primary-dark dark:border-primary-dark': link.active,
-                'border-gray-300 dark:border-primary/20 text-gray-700 dark:text-primary-dt': !link.active
-              }"
-              v-html="link.label"
-              @click="emit('send-pagination', link.url)"
-            ></button>
-          </template>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-/* Estilos adicionales para mejorar la experiencia */
-tbody tr {
-  transition: background-color 0.2s ease;
-}
-
-tbody tr:hover {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-.dark tbody tr:hover {
-  background-color: rgba(255, 255, 255, 0.05);
-}
-
-/* Animación suave para los botones de paginación */
-button {
-  transition: all 0.2s ease;
-}
-
-button:hover {
-  transform: translateY(-1px);
-}
-
-button:active {
-  transform: translateY(0);
-}
-</style>
diff --git a/src/components/Holos/PDF/Canvas.vue b/src/components/Holos/PDF/Canvas.vue
deleted file mode 100644
index 92c32c1..0000000
--- a/src/components/Holos/PDF/Canvas.vue
+++ /dev/null
@@ -1,650 +0,0 @@
-<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(() => {
-    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) => {
-    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',
-            'z-50': isSelected,
-            'z-10': !isSelected
-        }"
-    >
-        <!-- Input oculto para selección de archivos -->
-        <input
-            ref="fileInput"
-            type="file"
-            accept="image/*"
-            @change="handleFileSelect"
-            class="hidden"
-        />
-
-        <!-- 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-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"
-                ref="editInput"
-                v-model="editValue"
-                @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 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 (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"
-        >
-            <!-- 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 Tabla (sin cambios en esta parte) -->
-        <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 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-[60]"
-        >
-            <!-- 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 z-[55]">
-            <!-- Esquina inferior derecha - MÁS GRANDE Y VISIBLE -->
-            <div
-                @mousedown.stop="startResize"
-                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 class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
-            </div>
-
-            <!-- Lado derecho - MÁS VISIBLE -->
-            <div
-                @mousedown.stop="(event) => startResizeEdge(event, 'right')"
-                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"
-            >
-                <!-- 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 - MÁS VISIBLE -->
-            <div
-                @mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
-                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"
-            >
-                <!-- 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>
-
-            <!-- 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 -->
-        <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>
-
-        <!-- 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-[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
-            </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
-            </button>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-/* Estilos existentes sin cambios... */
-.resize-handle-corner {
-    transition: all 0.2s ease;
-}
-
-.resize-handle-corner:hover {
-    transform: scale(1.1);
-}
-
-.resize-handle-edge {
-    transition: all 0.2s ease;
-    opacity: 0.7;
-}
-
-.resize-handle-edge:hover {
-    opacity: 1;
-    transform: scale(1.05);
-}
-
-.group:hover .resize-handle-edge {
-    opacity: 0.8;
-}
-
-.select-none {
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-</style>
\ No newline at end of file
diff --git a/src/components/Holos/PDF/Draggable.vue b/src/components/Holos/PDF/Draggable.vue
deleted file mode 100644
index 4bd032c..0000000
--- a/src/components/Holos/PDF/Draggable.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<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/PDF/PDFViewport.vue b/src/components/Holos/PDF/PDFViewport.vue
deleted file mode 100644
index 5ea3d6a..0000000
--- a/src/components/Holos/PDF/PDFViewport.vue
+++ /dev/null
@@ -1,353 +0,0 @@
-<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
deleted file mode 100644
index 1ec725e..0000000
--- a/src/components/Holos/PDF/PageSizeSelector.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<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
deleted file mode 100644
index eec22f7..0000000
--- a/src/components/Holos/PDF/TextFormatter.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<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/components/Holos/PageHeader.vue b/src/components/Holos/PageHeader.vue
deleted file mode 100644
index 485be1a..0000000
--- a/src/components/Holos/PageHeader.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup>
-import { RouterLink, useRoute } from 'vue-router';
-import { breadcrumbItem, breadcrumbMeta } from '@Controllers/BreadcrumbController.js';
-
-import IconButton from '@Holos/Button/Icon.vue'
-import BreadcrumbContainer from '@Holos/Breadcrumb/Container.vue'
-import BreadcrumbItem from '@Holos/Breadcrumb/Item.vue'
-
-/** Definidores */
-const vroute = useRoute();
-
-const props = defineProps({
-    title: String
-});
-
-const breadcrumbs = breadcrumbMeta(vroute);
-
-</script>
-
-<template>
-    <div>
-        <BreadcrumbContainer>
-            <template v-for="(item, index) in breadcrumbs" :key="item.name">
-                <BreadcrumbItem
-                    :name="item.name"
-                    :icon="item.icon"
-                    :route="item.route"
-                    :active="index === breadcrumbs.length - 1"
-                />
-            </template>
-        </BreadcrumbContainer>
-        <div class="flex w-full justify-end py-[0.31rem] mb-2 border-y-2 border-page-t dark:border-page-dt">
-            <div id="buttons" class="flex items-center space-x-1 text-sm">
-                <slot />
-                <RouterLink :to="$view({ name: 'index' })">
-                    <IconButton
-                        :title="$t('home')"
-                        class="text-white"
-                        icon="refresh"
-                        filled
-                    />
-                </RouterLink>
-            </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Paginable.vue b/src/components/Holos/Paginable.vue
deleted file mode 100644
index 1c71344..0000000
--- a/src/components/Holos/Paginable.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup>
-import GoogleIcon from '../Shared/GoogleIcon.vue';
-import Loader     from '../Shared/Loader.vue';
-
-/** Eventos */
-const emit = defineEmits([
-  'send-pagination'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    items: Object,
-    processing: Boolean
-});
-</script>
-
-<template>
-    <section class="pb-2">
-        <div class="w-full overflow-hidden rounded-sm shadow-lg">
-            <div v-if="!processing" class="w-full overflow-x-auto">
-                <template v-if="items?.total > 0">
-                    <slot
-                        name="body"
-                        :items="items?.data"
-                    />
-                </template>
-                <template v-else>
-                    <template v-if="$slots.empty">
-                        <slot name="empty" />
-                    </template>
-                    <template v-else>
-                        <div class="flex p-2 items-center justify-center">
-                            <p class="text-center text-page-t dark:text-page-dt">{{ $t('noRecords') }}</p>
-                        </div>
-                    </template>
-                </template>
-            </div>
-            <div v-else class="flex items-center justify-center">
-                <Loader />
-            </div>
-        </div>
-    </section>
-
-    <template v-if="items?.links">
-        <div v-if="items.links.length > 3" class="flex w-full justify-end">
-            <div class="flex w-full justify-end flex-wrap space-x-1 -mb-1">
-              <template v-for="(link, k) in items.links" :key="k">
-                <div v-if="link.url === null && k == 0"
-                    class="px-2 py-1 text-sm leading-4 text-gray-400 border rounded"
-                >
-                    <GoogleIcon
-                        name="arrow_back"
-                    />
-                </div>
-                <button v-else-if="k === 0" class="px-2 py-1 text-sm leading-4 border rounded" 
-                    :class="{ 'bg-primary dark:bg-primary-dark text-white': link.active }"
-                    @click="$emit('send-pagination', link.url)"
-                >
-                    <GoogleIcon
-                        name="arrow_back"
-                    />
-                </button>
-                <div v-else-if="link.url === null && k == (items.links.length - 1)"
-                    class="px-2 py-1 text-sm leading-4 text-gray-400 border rounded"
-                >
-                    <GoogleIcon
-                        name="arrow_forward"
-                    />
-                </div>
-                <button v-else-if="k === (items.links.length - 1)" class="px-2 py-1 text-sm leading-4 border rounded" 
-                    :class="{ 'bg-primary dark:bg-primary-dark text-white': link.active }"
-                    @click="$emit('send-pagination', link.url)"
-                >
-                    <GoogleIcon
-                        name="arrow_forward"
-                    />
-                </button>
-                <button v-else class="px-2 py-1 text-sm leading-4 border rounded" 
-                    :class="{ 'bg-primary dark:bg-primary-dark text-white': link.active }"
-                    v-html="link.label"
-                    @click="$emit('send-pagination', link.url)"
-                ></button>
-              </template>
-            </div>
-        </div>
-    </template>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Searcher.vue b/src/components/Holos/Searcher.vue
deleted file mode 100644
index 1bdb48d..0000000
--- a/src/components/Holos/Searcher.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { breadcrumbMeta } from '@Controllers/BreadcrumbController.js';
-
-import IconButton from '@Holos/Button/Icon.vue'
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import BreadcrumbContainer from '@Holos/Breadcrumb/Container.vue'
-import BreadcrumbItem from '@Holos/Breadcrumb/Item.vue'
-
-/** Definidores */
-const vroute = useRoute();
-
-/** Eventos */
-const emit = defineEmits([
-    'search'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    title: String,
-    placeholder: {
-        default: Lang('search'),
-        type: String
-    }
-})
-
-const breadcrumbs = breadcrumbMeta(vroute);
-const query = ref('');
-
-/** Métodos */
-const search = () => {
-    emit('search', query.value);
-}
-
-const clear = () => {
-    query.value = '';
-
-    search();
-}
-
-</script>
-
-<template>
-    <BreadcrumbContainer>
-        <template v-for="(item, index) in breadcrumbs" :key="item.name">
-            <BreadcrumbItem
-                :name="item.name"
-                :icon="item.icon"
-                :route="item.route"
-                :active="index === breadcrumbs.length - 1"
-            />
-        </template>
-    </BreadcrumbContainer>
-    <div class="flex w-full justify-between items-center border-y-2 border-page-t dark:border-page-dt">
-        <div>
-            <div class="relative py-1 z-0">
-                <div  @click="search" class="absolute inset-y-0 right-2 flex items-center pl-3 cursor-pointer">
-                    <GoogleIcon
-                        :title="$t('search')"
-                        class="text-xl text-gray-700 hover:scale-110 hover:text-danger"
-                        name="search"
-                    />
-                    <GoogleIcon
-                        v-show="query"
-                        :title="$t('clear')"
-                        class="text-xl text-gray-700 hover:scale-110 hover:text-danger"
-                        name="close"
-                        @click="clear"
-                    />
-                </div>
-                <input
-                    id="search"
-                    class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-sm outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1"
-                    autocomplete="off"
-                    :placeholder="placeholder"
-                    required
-                    type="text"
-                    v-model="query"
-                    @keyup.enter="search"
-                />
-            </div>
-        </div>
-        <div class="flex items-center space-x-1 text-sm" id="buttons">
-            <slot />
-            <RouterLink :to="$view({name:'index'})">
-                <IconButton
-                    :title="$t('home')"
-                    class="text-white !bg-blue-600"
-                    icon="home"
-                    filled
-                />
-            </RouterLink>
-        </div>
-	</div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/SectionBorder.vue b/src/components/Holos/SectionBorder.vue
deleted file mode 100644
index baec25d..0000000
--- a/src/components/Holos/SectionBorder.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-    <div class="hidden sm:block">
-        <div class="py-8">
-            <div
-                class="border-t border-gray-200"
-            />
-        </div>
-    </div>
-</template>
diff --git a/src/components/Holos/SectionTitle.vue b/src/components/Holos/SectionTitle.vue
deleted file mode 100644
index afff327..0000000
--- a/src/components/Holos/SectionTitle.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-    <div class="md:col-span-1 flex justify-between">
-        <div class="px-4 sm:px-0">
-            <h3 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">
-                <slot name="title" />
-            </h3>
-
-            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">
-                <slot name="description" />
-            </p>
-        </div>
-
-        <div class="px-4 sm:px-0">
-            <slot name="aside" />
-        </div>
-    </div>
-</template>
-
diff --git a/src/components/Holos/Skeleton/Header.vue b/src/components/Holos/Skeleton/Header.vue
deleted file mode 100644
index c23d72f..0000000
--- a/src/components/Holos/Skeleton/Header.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script setup>
-import { users }     from '@Plugins/AuthUsers'
-import { hasPermission } from '@Plugins/RolePermission'
-import { logout } from '@Services/Page';
-import useDarkMode from '@Stores/DarkMode'
-import useLeftSidebar from '@Stores/LeftSidebar'
-import useNotificationSidebar from '@Stores/NotificationSidebar'
-import useNotifier   from '@Stores/Notifier'
-import useLoader     from '@Stores/Loader';
-
-import Loader       from '@Shared/Loader.vue';
-import GoogleIcon   from '@Shared/GoogleIcon.vue';
-import Dropdown     from '../Dropdown.vue';
-import DropdownLink from '../DropdownLink.vue';
-
-/** Eventos */
-const emit = defineEmits([
-  'open'
-]);
-
-/** Definidores */
-const darkMode            = useDarkMode()
-const leftSidebar         = useLeftSidebar()
-const notificationSidebar = useNotificationSidebar()
-const notifier            = useNotifier()
-const loader              = useLoader()
-
-</script>
-
-<template>
-    <header
-      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-white dark:bg-primary-d text-gray-700 z-20 ">
-        <GoogleIcon
-          class="text-2xl mt-1 z-50"
-          name="list"
-          :title="$t('menu')"
-          @click="emit('open')"
-          outline
-        />
-        <div class="flex w-fit justify-end items-center h-14 header-right">
-          <ul class="flex items-center space-x-2">
-            <li v-if="loader.isProcessing" class="flex items-center">
-              <Loader /> 
-            </li>
-            <template v-if="notifier.isEnabled">
-              <li v-if="hasPermission('users.online')">
-                <RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
-                  <GoogleIcon
-                    class="text-xl mt-1"
-                    name="connect_without_contact"
-                    :title="$t('notifications.title')"
-                  />
-                  <span class="text-xs">{{ users.length - 1 }}</span>
-                </RouterLink>
-              </li>
-            </template>
-            <li class="flex items-center">
-              <GoogleIcon
-                class="text-xl mt-1"
-                name="notifications"
-                :title="$t('notifications.title')"
-                @click="notificationSidebar.toggle()"
-              />
-              <span class="text-xs">{{ notifier.counter }}</span>
-            </li>
-            <li v-if="darkMode.isDark">
-              <GoogleIcon
-                class="text-xl mt-1"
-                name="light_mode"
-                :title="$t('notifications.title')"
-                @click="darkMode.applyLight()"
-              />
-            </li>
-            <li v-else>
-              <GoogleIcon
-                class="text-xl mt-1"
-                name="dark_mode"
-                :title="$t('notifications.title')"
-                @click="darkMode.applyDark()"
-              />
-            </li>
-            <li>
-              <div class="relative">
-                <Dropdown align="right" width="48">
-                  <template #trigger>
-                    <div class="flex space-x-4">
-                      <button
-                        class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-hidden cursor-pointer transition"
-                        :title="$t('users.menu')"
-                      >
-                        <img 
-                          class="h-8 w-8 rounded-sm object-cover"
-                          :alt="$page.user.name"
-                          :src="$page.user.profile_photo_url"
-                        >
-                      </button>
-                    </div>
-                  </template>
-                  <template #content>
-                      <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>
-                  </template>
-                </Dropdown>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </header>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Skeleton/RhSidebar.vue b/src/components/Holos/Skeleton/RhSidebar.vue
deleted file mode 100644
index b0e0715..0000000
--- a/src/components/Holos/Skeleton/RhSidebar.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<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/Drop.vue b/src/components/Holos/Skeleton/Sidebar/Drop.vue
deleted file mode 100644
index f69bf4f..0000000
--- a/src/components/Holos/Skeleton/Sidebar/Drop.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<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/Left.vue b/src/components/Holos/Skeleton/Sidebar/Left.vue
deleted file mode 100644
index 33a06a6..0000000
--- a/src/components/Holos/Skeleton/Sidebar/Left.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script setup>
-import { APP_VERSION, APP_COPYRIGHT } from '@/config.js'
-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
-});
-
-const year = (new Date).getFullYear();
-</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">
-              &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)] 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
deleted file mode 100644
index 1d5e97e..0000000
--- a/src/components/Holos/Skeleton/Sidebar/Link.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup>
-import { 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({
-    icon: String,
-    name: String,
-    to: String,
-    active: {
-        type: Boolean,
-        default: false
-    }
-});
-
-const classes = computed(() => {
-    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';
-    }
-});
-
-const iconClasses = computed(() => {
-    let isActive = props.active || props.to === vroute.name;
-    return isActive ? 'text-white' : 'text-gray-500';
-});
-
-const closeSidebar = () => {
-    if(TwScreen.isDevice('phone') || TwScreen.isDevice('tablet')) {
-        leftSidebar.close();
-    }
-};
-</script>
-
-<template>
-    <li @click="closeSidebar()">
-        <RouterLink
-            :class="classes"
-            :to="$view({name:to})"
-        >
-            <span
-                v-if="icon"
-                class="inline-flex justify-center items-center mr-3"
-            >
-                <GoogleIcon 
-                    class="text-xl"
-                    :class="iconClasses"
-                    :name="icon"
-                    outline
-                />
-            </span>
-            <span 
-                v-if="name"
-                class="text-sm font-medium"
-            >
-                {{ name }}
-            </span>
-            <slot />
-        </RouterLink>
-    </li>
-</template>
diff --git a/src/components/Holos/Skeleton/Sidebar/Notification.vue b/src/components/Holos/Skeleton/Sidebar/Notification.vue
deleted file mode 100644
index b4db56a..0000000
--- a/src/components/Holos/Skeleton/Sidebar/Notification.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { RouterLink } from 'vue-router';
-import useNotificationSidebar from '@Stores/NotificationSidebar'
-import useNotifier from '@Stores/Notifier'
-
-import GoogleIcon    from '@Shared/GoogleIcon.vue';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import ShowModal     from './Notification/Show.vue';
-import Item          from './Notification/Item.vue';
-
-/** Eventos */
-const emit = defineEmits(['open']);
-
-/** Definidores */
-const notifier            = useNotifier();
-const notificationSidebar = useNotificationSidebar()
-
-/** Propiedades */
-const props = defineProps({
-  sidebar: Boolean
-});
-
-const showModal = ref(false);
-
-</script>
-
-<template>
-  <div 
-    class="fixed top-[3.1rem] right-[0.1rem] md:right-[0.5rem] w-fit h-[calc(100vh-3.2rem)] transition-all duration-300 z-50"
-    :class="{'translate-x-0':notificationSidebar.isOpened, 'translate-x-64':notificationSidebar.isClosed}"
-  >
-    <section
-      id="notifications"
-      class="flex md:w-64 h-full transition-all duration-300 border-none"
-      :class="{'w-64': notificationSidebar.isClosed}"
-    >
-      <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/70 text-primary-t dark:bg-primary-d/70 dark:text-primary-dt">
-          <div class="flex justify-between px-2 items-center">
-            <div class="py-1">
-              <h4 class="text-md font-semibold">
-                {{ $t('notifications.title') }} <span class="text-xs">({{ notifier.counter }})</span>
-              </h4>
-              <h4 class="text-xs font-semibold" v-if="notifier.unreadClosedCounter > 0">
-                {{ $t('notifications.unreadClosed') }} <span class="text-xs"> ({{ notifier.unreadClosedCounter }})</span>
-              </h4>
-            </div>
-            <GoogleIcon 
-              name="close" 
-              class="text-primary-t dark:text-primary-dt cursor-pointer"
-              @click="notificationSidebar.close()"
-            />
-          </div>
-          <div class="flex h-full flex-col space-y-1">
-            <ul class="px-2 space-y-1 overflow-y-auto"
-              :class="{
-                'h-[calc(100vh-10rem)]': notifier.unreadClosedCounter > 0,
-                'h-[calc(100vh-9rem)]': notifier.unreadClosedCounter === 0
-              }"
-            >
-              <Item v-for="notification in notifier.notifications"
-                :key="notification.id"
-                :notification="notification"
-                @openModal="showModal.open(notification)"
-              />
-            </ul>
-          </div>
-          <div class="flex justify-center items-center pb-1">
-            <RouterLink :to="$view({ name: 'profile.notifications.index' })">
-              <PrimaryButton type="button" @click="notificationSidebar.close()">
-                {{ $t('notifications.seeAll') }}
-              </PrimaryButton>
-            </RouterLink>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <ShowModal
-      ref="showModal"
-      @reload="notifier.getUpdates()"
-    />
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Skeleton/Sidebar/Notification/Item.vue b/src/components/Holos/Skeleton/Sidebar/Notification/Item.vue
deleted file mode 100644
index 8dd316e..0000000
--- a/src/components/Holos/Skeleton/Sidebar/Notification/Item.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script setup>
-import { getDateTime } from '@Controllers/DateController';
-import useNotifier from '@Stores/Notifier';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Definidores */
-const notifier = useNotifier();
-
-/** Eventos */
-const emit = defineEmits([
-    'openModal'
-]);
-
-/** Propiedades */
-defineProps({
-    notification: Object,
-});
-</script>
-
-<template>
-    <li class="flex flex-col w-full items-center p-2 bg-primary dark:bg-primary-d text-white rounded-sm shadow-md">
-        <div class="flex w-full justify-between text-gray-400">
-            <div>
-                <h6 class="text-[10px]">{{ getDateTime(notification.created_at) }}</h6>
-            </div>
-            <div>
-                <GoogleIcon
-                    name="close"
-                    class="text-xs text-white cursor-pointer"
-                    @click="notifier.closeNotification(notification.id)"
-                />
-            </div>
-        </div>
-        <div class="flex w-full cursor-pointer">
-            <div class="w-10 space-y-0" @click="emit('openModal', notification)">
-                <template v-if="notification.user">
-                    <div class="w-10 h-10 bg-transparent rounded-full flex items-center justify-center">
-                        <img v-if="notification.user"
-                            class="rounded-full object-cover"
-                            :alt="notification.user.name"
-                            :src="notification.user.profile_photo_url"
-                        >
-                    </div>
-                </template>
-                <template v-else>
-                    <div class="w-10 h-10 bg-secondary dark:bg-secondary-d rounded-sm flex items-center justify-center">
-                        <img v-if="notification.user"
-                           class="rounded-full object-cover"
-                           :alt="notification.user.name"
-                           :src="notification.user.profile_photo_url"
-                        >
-                        <GoogleIcon v-else
-                            name="tag"
-                            class="text-white text-2xl"
-                        />
-                    </div>
-                </template>
-            </div>
-            <div class="ml-3 w-full">
-                <div
-                    v-text="notification.data.title"
-                    class="text-sm font-medium truncate"
-                />
-                <div
-                    v-text="notification.data.description"
-                    class="text-xs w-40 font-thin truncate"
-                />
-                <div v-if="notification.user"
-                    v-text="`~ ${notification.user.name} ${notification.user.paternal}`"
-                    class="text-xs text-gray-400 truncate"
-                />
-                <div v-else
-                    v-text="$t('system.title')"
-                    class="text-xs text-gray-400 truncate"
-                />
-            </div>
-        </div>
-    </li>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Skeleton/Sidebar/Notification/Show.vue b/src/components/Holos/Skeleton/Sidebar/Notification/Show.vue
deleted file mode 100644
index 2afa0c1..0000000
--- a/src/components/Holos/Skeleton/Sidebar/Notification/Show.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { getDateTime } from '@Controllers/DateController';
-import useNotifier from '@Stores/Notifier';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Definidores */
-const notifier = useNotifier();
-
-/** Eventos */
-const emit = defineEmits([
-    'close',
-    'reload'
-]);
-
-/** Propiedades */
-const modalRef = ref(null);
-const model    = ref({});
-
-/** Métodos */
-function readNotification() {
-    if(!model.value.read_at) {
-        notifier.readNotification(model.value.id);
-    }
-}
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-        readNotification();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        :title="$t('notification')"
-        @close="$emit('reload')"
-    >
-        <Header
-            :title="model.data?.title"
-        >
-        </Header>
-        <div class="py-2 border-b">
-            <div class="flex w-full px-4 py-2">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="contact_mail"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <div class="flex flex-col">
-                        <b>{{ $t('description') }}: </b>
-                        {{ model.data?.description }}
-                    </div>
-                    <div v-if="model.data?.message" class="flex flex-col">
-                        <b>{{ $t('message') }}: </b>
-                        {{ model.data?.message }}
-                    </div>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p v-if="model.read_at">
-                        <b>{{ $t('read_at') }}: </b>
-                        {{ getDateTime(model.read_at) }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Skeleton/Sidebar/Right.vue b/src/components/Holos/Skeleton/Sidebar/Right.vue
deleted file mode 100644
index 8187374..0000000
--- a/src/components/Holos/Skeleton/Sidebar/Right.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-import useRightSidebar from '@Stores/RightSidebar'
-
-/** Definidores */
-const rightSidebar = useRightSidebar()
-
-/** Eventos */
-const emit = defineEmits(['open']);
-
-/** Propiedades */
-const props = defineProps({
-  sidebar: Boolean
-});
-</script>
-
-<template>
-  <div 
-    class="fixed top-[3.1rem] right-[0.1rem] md:right-[0.5rem] w-fit h-[calc(100vh-3.1rem)] transition-all duration-300 z-50"
-    :class="{'translate-x-0':rightSidebar.isOpened, 'translate-x-64':rightSidebar.isClosed}"
-  >
-    <nav
-      class="flex md:w-64 h-full transition-all duration-300 border-none"
-      :class="{'w-64': rightSidebar.isClosed, 'w-screen': rightSidebar.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>
-            <ul class="flex h-full flex-col md:pb-4 space-y-1">
-              <slot />
-            </ul>
-          </div>
-        </div>
-      </div>
-    </nav>
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Skeleton/Sidebar/Section.vue b/src/components/Holos/Skeleton/Sidebar/Section.vue
deleted file mode 100644
index 304c82a..0000000
--- a/src/components/Holos/Skeleton/Sidebar/Section.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup>
-/** Propiedades */
-const props = defineProps({
-  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 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/components/Holos/Table.vue b/src/components/Holos/Table.vue
deleted file mode 100644
index 435bbe3..0000000
--- a/src/components/Holos/Table.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script setup>
-import GoogleIcon from '../Shared/GoogleIcon.vue';
-import Loader     from '../Shared/Loader.vue';
-
-/** Eventos */
-const emit = defineEmits([
-  'send-pagination'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    items: Object,
-    processing: Boolean
-});
-</script>
-
-<template>
-    <section class="pb-2">
-        <div class="w-full overflow-hidden rounded-sm shadow-lg dark:shadow-xs dark:shadow-white">
-            <div class="w-full overflow-x-auto">
-                <table v-if="!processing" class="w-full">
-                    <thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
-                        <tr>
-                            <slot name="head" />
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <template v-if="items?.total > 0">
-                            <slot
-                                name="body"
-                                :items="items?.data"
-                            />
-                        </template>
-                        <template v-else>
-                            <tr>
-                                <slot name="empty" />
-                            </tr>
-                        </template>
-                    </tbody>
-                </table>
-                <table v-else class="animate-pulse w-full">
-                    <thead>
-                        <tr>
-                            <th colspan="100%" class="h-8 text-center">
-                                <div class="flex items-center justify-center">
-                                    <Loader />
-                                </div>
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td colspan="100%" class="table-cell h-7 text-center">
-                                <div class="w-full h-4 bg-secondary/50 rounded-md"></div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </section>
-
-    <template v-if="items?.links">
-        <div v-if="items.links.length > 3" class="flex w-full justify-end">
-            <div class="flex w-full justify-end flex-wrap space-x-1 -mb-1">
-              <template v-for="(link, k) in items.links" :key="k">
-                <div v-if="link.url === null && k == 0"
-                    class="px-2 py-1 text-sm leading-4 text-gray-400 border rounded"
-                >
-                    <GoogleIcon
-                        name="arrow_back"
-                    />
-                </div>
-                <button v-else-if="k === 0" class="px-2 py-1 text-sm leading-4 border rounded" 
-                    :class="{ 'bg-primary dark:bg-primary-dark text-white': link.active }"
-                    @click="$emit('send-pagination', link.url)"
-                >
-                    <GoogleIcon
-                        name="arrow_back"
-                    />
-                </button>
-                <div v-else-if="link.url === null && k == (items.links.length - 1)"
-                    class="px-2 py-1 text-sm leading-4 text-gray-400 border rounded"
-                >
-                    <GoogleIcon
-                        name="arrow_forward"
-                    />
-                </div>
-                <button v-else-if="k === (items.links.length - 1)" class="px-2 py-1 text-sm leading-4 border rounded" 
-                    :class="{ 'bg-primary dark:bg-primary-dark text-white': link.active }"
-                    @click="$emit('send-pagination', link.url)"
-                >
-                    <GoogleIcon
-                        name="arrow_forward"
-                    />
-                </button>
-                <button v-else class="px-2 py-1 text-sm leading-4 border rounded" 
-                    :class="{ 'bg-primary dark:bg-primary-dark text-white': link.active }"
-                    v-html="link.label"
-                    @click="$emit('send-pagination', link.url)"
-                ></button>
-              </template>
-            </div>
-        </div>
-    </template>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/TableSimple.vue b/src/components/Holos/TableSimple.vue
deleted file mode 100644
index 1c9f92b..0000000
--- a/src/components/Holos/TableSimple.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup>
-/** Eventos */
-const emit = defineEmits([
-  'send-pagination'
-]);
-
-/** Propiedades */
-const props = defineProps({
-    items: Object,
-});
-</script>
-
-<template>
-    <section class="py-4">
-        <div class="w-full overflow-hidden rounded-md shadow-lg">
-            <div class="w-full overflow-x-auto">
-                <table class="w-full">
-                    <thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
-                        <tr>
-                            <slot name="head" />
-                        </tr>
-                    </thead>
-                    <tbody class="">
-                        <slot
-                            name="body"
-                            :items="items"
-                        />
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </section>
-</template>
\ No newline at end of file
diff --git a/src/components/Holos/Timeline/Item.vue b/src/components/Holos/Timeline/Item.vue
deleted file mode 100644
index b6df0f6..0000000
--- a/src/components/Holos/Timeline/Item.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { getDate, getTime } from '@Controllers/DateController';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'show',
-]);
-
-/** Propiedades */
-const props = defineProps({
-    event: Object,
-});
-
-const icons = {
-    created: 'add',
-    updated: 'edit',
-    deleted: 'delete',
-    restored: 'restore',
-};
-
-const colors = {
-    created: 'primary',
-    updated: 'primary',
-    deleted: 'danger',
-    restored: 'primary',
-};
-
-/** Propiedades computadas */
-
-const eventType = computed(() => {
-    return props.event.event.split('.')[1];
-});
-
-const bgColor = computed(() => {
-    return `bg-${colors[eventType.value]} dark:bg-${colors[eventType.value]}-d text-${colors[eventType.value]}-t dark:text-${colors[eventType.value]}-t`;
-});
-
-const borderColor = computed(() => {
-    return `border-${colors[eventType.value]} dark:border-${colors[eventType.value]}-d`;
-});
-
-</script>
-
-<template>
-    <li class="border-l-2" :class="borderColor">
-        <div class="relative flex w-full">
-            <div class="absolute -left-3.5 top-7 h-0.5 w-8" :class="bgColor"></div>
-            <div 
-                class="absolute -mt-3 -left-3.5 top-7 w-6 h-6 flex items-center justify-center rounded-sm" 
-                :class="bgColor"
-                @click="emit('show', event.data)"
-            >
-                <GoogleIcon
-                    :name="icons[eventType]"
-                />
-            </div>
-            <div class="w-full rounded-sm shadow-xl dark:shadow-page-dt dark:shadow-xs my-2 mx-4">
-                <div class="flex justify-between p-2 rounded-t-sm" :class="bgColor">
-                    <span
-                        class="font-medium text-sm cursor-pointer"
-                        @click="emit('show', event.data)"
-                    >
-                        {{ $t('event')}}: <i class="underline">{{ event.event }}</i>
-                    </span>
-                    <span class="font-medium text-sm">
-                        {{ getDate(event.created_at) }}, {{ getTime(event.created_at) }}
-                    </span>
-                </div>
-                <div class="p-2">
-                    <div class="flex flex-col justify-center items-center md:flex-row md:justify-start md:space-x-4">
-                        <div v-if="event.user" class="w-32">
-                            <div class="flex flex-col w-full justify-center items-center space-y-2">
-                                <img :src="event.user?.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-sm">
-                            </div>
-                        </div>
-                        <div class="flex w-full flex-col justify-start space-y-2">
-                            <div>
-                                <h4 class="font-semibold">{{ $t('description') }}:</h4>
-                                <p>{{ event.description }}.</p>
-                            </div>
-                            <div>
-                                <h4 class="font-semibold">{{ $t('author') }}:</h4>
-                                <p>{{ event.user?.full_name ?? $t('system.title') }} <span v-if="event.user?.deleted_at" class="text-xs text-gray-500">({{ $t('deleted') }})</span></p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </li>
-</template>
\ No newline at end of file
diff --git a/src/components/Shared/GoogleIcon.vue b/src/components/Shared/GoogleIcon.vue
deleted file mode 100644
index df9093e..0000000
--- a/src/components/Shared/GoogleIcon.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-/** Propiedades */
-const props = defineProps({
-    name:  String,
-    fill: Boolean,
-    style: {
-        type: String,
-        default: 'rounded' // outlined, rounded, sharp
-    },
-    title: String
-})
-
-/** Propiedades computadas */
-const classes = computed(() => {
-    return props.fill
-        ? `font-google-icon-${props.style}-fill`
-        : `font-google-icon-${props.style}`
-});
-</script>
-
-<template>
-    <span
-        v-text="name"
-        class="material-symbols cursor-pointer"
-        :class="classes"
-        translate="no"
-    />
-</template>
\ No newline at end of file
diff --git a/src/components/Shared/Loader.vue b/src/components/Shared/Loader.vue
deleted file mode 100644
index 1ab8724..0000000
--- a/src/components/Shared/Loader.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-    <svg class="animate-spin -ml-1 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-    </svg>
-</template>
\ No newline at end of file
diff --git a/src/components/layout/AppConfig.vue b/src/components/layout/AppConfig.vue
new file mode 100644
index 0000000..f1ba4d5
--- /dev/null
+++ b/src/components/layout/AppConfig.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { useLayout } from "../../composables/useLayout";
+
+const { surfaces, surface, updateColors } = useLayout();
+</script>
+
+<template>
+    <div
+        class="absolute top-16 right-0 w-64 p-4 bg-white dark:bg-surface-900 rounded-md shadow-lg border border-surface-200 dark:border-surface-700 origin-top z-50 hidden"
+    >
+        <div class="flex flex-col gap-4">
+            <div>
+                <span class="text-sm text-surface-600 dark:text-surface-400 font-semibold">Color de Superficie</span>
+                <div class="pt-2 flex gap-2 flex-wrap justify-between">
+                    <button
+                        v-for="s of surfaces"
+                        :key="s.name"
+                        type="button"
+                        :title="s.name"
+                        :class="[
+                            'border border-surface-200 dark:border-surface-700 w-5 h-5 rounded-full p-0 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2',
+                            {
+                                'ring-2 ring-offset-2 ring-surface-950 dark:ring-surface-0': surface === s.name,
+                            },
+                        ]"
+                        :style="{ backgroundColor: s.palette['500'] }"
+                        @click="updateColors('surface', s.name)"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+button:focus-visible {
+    outline: 2px solid var(--p-primary-500);
+    outline-offset: 2px;
+}
+</style>
diff --git a/src/components/layout/Sidebar.vue b/src/components/layout/Sidebar.vue
new file mode 100644
index 0000000..8772744
--- /dev/null
+++ b/src/components/layout/Sidebar.vue
@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();
+const route = useRoute();
+
+interface MenuItem {
+    label: string;
+    icon: string;
+    to?: string;
+    items?: MenuItem[];
+}
+
+const menuItems = ref<MenuItem[]>([
+    {
+        label: 'Dashboard',
+        icon: 'pi pi-chart-line',
+        to: '/'
+    },
+    {
+        label: 'Catálogo',
+        icon: 'pi pi-book',
+        items: [
+            { label: 'Unidades de Medida', icon: 'pi pi-calculator', to: '/catalog/units-of-measure' },
+            { label: 'Clasificaciones Comerciales', icon: 'pi pi-tags', to: '/catalog/classifications-comercial' },
+            { label: 'Proveedores', icon: 'pi pi-briefcase', to: '/catalog/suppliers' },
+            { label: 'Documentos del Modelo', icon: 'pi pi-file', to: '/catalog/model-documents' }
+        ]
+    },
+    {
+        label: 'Productos',
+        icon: 'pi pi-shopping-cart',
+        to: '/products'
+    },
+    {
+        label: 'Requisiciones',
+        icon: 'pi pi-file-edit',
+        items: [
+            { label: 'Requisiciones', icon: 'pi pi-file', to: '/requisitions/request' },
+            { label: 'Crear Requisición', icon: 'pi pi-plus', to: '/requisitions/create' }
+        ]
+    },
+    {
+        label: 'Compras',
+        icon: 'pi pi-shopping-bag',
+        items: [
+            { label: 'Solicitudes de Compra', icon: 'pi pi-shopping-cart', to: '/purchases/requests' },
+            { label: 'Órdenes de Compra', icon: 'pi pi-file', to: '/purchases/orders' },
+            { label: 'Recepciones de Compra', icon: 'pi pi-inbox', to: '/purchases/receipts' }
+        ]
+    },
+    {
+        label: 'Almacén',
+        icon: 'pi pi-box',
+        items: [
+            { label: 'Almacenes', icon: 'pi pi-warehouse', to: '/warehouse' },
+            { label: 'Administrar Clasificaciones', icon: 'pi pi-sitemap', to: '/warehouse/classifications' }
+        ]
+    },
+    {
+        label: 'Recursos humanos',
+        icon: 'pi pi-users',
+        items: [
+            { label: 'Puestos laborales', icon: 'pi pi-user', to: '/rh/positions' },
+            { label: 'Departamentos', icon: 'pi pi-briefcase', to: '/rh/departments' }
+        ]
+    },
+    {
+        label: 'Puntos de venta',
+        icon: 'pi pi-cog',
+        to: '/stores'
+    },
+    {
+        label: 'Configuración',
+        icon: 'pi pi-cog',
+        to: '/configuracion'
+    },
+    {
+        label: 'Usuarios y Roles',
+        icon: 'pi pi-users',
+        items: [
+            { label: 'Usuarios', icon: 'pi pi-user', to: '/users' },
+            { label: 'Roles', icon: 'pi pi-shield', to: '/roles' }
+        ]
+    }
+]);
+
+const sidebarVisible = ref(true);
+const openItems = ref<string[]>([]);
+
+const toggleSidebar = () => {
+    sidebarVisible.value = !sidebarVisible.value;
+};
+
+const toggleItem = (label: string) => {
+    const index = openItems.value.indexOf(label);
+    if (index > -1) {
+        openItems.value.splice(index, 1);
+    } else {
+        openItems.value.push(label);
+    }
+};
+
+const isItemOpen = (label: string) => {
+    return openItems.value.includes(label);
+};
+
+const isRouteActive = (to: string | undefined) => {
+    if (!to) return false;
+
+    // Coincidencia exacta
+    if (route.path === to) {
+        return true;
+    }
+
+    // Para la ruta raíz, solo coincidencia exacta
+    if (to === '/') {
+        return false;
+    }
+
+    // Si la ruta actual es hija (ej: /warehouse/create)
+    // y el item es el padre (ej: /warehouse)
+    // SOLO marcar activo si la ruta hija NO está explícitamente en el menú
+    if (route.path.startsWith(to + '/')) {
+        // Verificar si la ruta actual está definida como un item del menú
+        const isExplicitRoute = menuItems.value.some(item => {
+            if (item.items) {
+                return item.items.some(subItem => subItem.to === route.path);
+            }
+            return item.to === route.path;
+        });
+
+        // Si NO está explícitamente en el menú, entonces es una ruta hija (create, edit, etc)
+        return !isExplicitRoute;
+    }
+
+    return false;
+};
+
+// Navegar usando Vue Router
+const navigateTo = (to: string) => {
+    router.push(to);
+};
+
+// Funciones de animación para los submenús
+const onEnter = (el: Element) => {
+    const element = el as HTMLElement;
+    element.style.height = '0';
+    element.offsetHeight; // Force reflow
+    element.style.height = element.scrollHeight + 'px';
+};
+
+const onLeave = (el: Element) => {
+    const element = el as HTMLElement;
+    element.style.height = element.scrollHeight + 'px';
+    element.offsetHeight; // Force reflow
+    element.style.height = '0';
+};
+
+defineExpose({ toggleSidebar });
+</script>
+
+<template>
+    <aside :class="[
+        'bg-surface-0 dark:bg-surface-900 border-r border-surface-200 dark:border-surface-700 transition-all duration-300',
+        sidebarVisible ? 'w-64' : 'w-20'
+    ]">
+        <div class="flex flex-col h-full">
+            <!-- Logo / Brand -->
+            <div class="p-4">
+                <div class="flex items-center gap-3">
+                    <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary transition-all"
+                        :class="sidebarVisible ? 'bg-primary' : 'bg-primary/90'">
+                        <i class="pi pi-chart-line text-xl text-white"></i>
+                    </div>
+                    <div v-if="sidebarVisible" class="flex flex-col">
+                        <h1 class="text-xl font-bold text-surface-900 dark:text-surface-0">
+                            Golscontrols
+                        </h1>
+                        <p class="text-xs text-surface-500 dark:text-surface-400">
+                            Sistema ERP
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Navigation Menu -->
+            <nav class="flex-1 overflow-y-auto p-3">
+                <ul class="space-y-1">
+                    <li v-for="item in menuItems" :key="item.label">
+                        <!-- Item sin subitems -->
+                        <a v-if="!item.items" :href="item.to" @click.prevent="item.to && navigateTo(item.to)" :class="[
+                            'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all cursor-pointer',
+                            isRouteActive(item.to)
+                                ? 'bg-primary text-white shadow-sm'
+                                : 'text-surface-700 dark:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800'
+                        ]" :title="!sidebarVisible ? item.label : ''">
+                            <i :class="[item.icon, 'shrink-0']"></i>
+                            <span v-if="sidebarVisible">{{ item.label }}</span>
+                        </a>
+
+                        <!-- Item con subitems (Collapsible) -->
+                        <div v-else>
+                            <button @click="toggleItem(item.label)" :class="[
+                                'w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                                'text-surface-700 dark:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800'
+                            ]" :title="!sidebarVisible ? item.label : ''">
+                                <div class="flex items-center gap-3">
+                                    <i :class="[item.icon, 'shrink-0']"></i>
+                                    <span v-if="sidebarVisible">{{ item.label }}</span>
+                                </div>
+                                <i v-if="sidebarVisible" :class="[
+                                    'pi pi-chevron-down text-xs transition-transform duration-200',
+                                    isItemOpen(item.label) && 'rotate-180'
+                                ]"></i>
+                            </button>
+
+                            <!-- Subitems con animación -->
+                            <Transition name="submenu" @enter="onEnter" @leave="onLeave">
+                                <ul v-if="sidebarVisible && isItemOpen(item.label)"
+                                    class="ml-6 mt-1 space-y-1 overflow-hidden">
+                                    <li v-for="subItem in item.items" :key="subItem.label">
+                                        <a :href="subItem.to" @click.prevent="subItem.to && navigateTo(subItem.to)"
+                                            :class="[
+                                                'flex items-center gap-2 px-3 py-2 pl-6 rounded-lg text-sm font-medium transition-all cursor-pointer',
+                                                isRouteActive(subItem.to)
+                                                    ? 'bg-primary text-white shadow-sm'
+                                                    : 'text-surface-600 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-800'
+                                            ]">
+                                            <i :class="[subItem.icon, 'text-xs shrink-0']"></i>
+                                            <span>{{ subItem.label }}</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </Transition>
+                        </div>
+                    </li>
+                </ul>
+            </nav>
+
+            <!-- Toggle Button -->
+            <div class="p-3 border-t border-surface-200 dark:border-surface-700">
+                <button @click="toggleSidebar"
+                    class="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-surface-700 dark:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
+                    :title="sidebarVisible ? 'Contraer sidebar' : 'Expandir sidebar'">
+                    <i :class="sidebarVisible ? 'pi pi-angle-left' : 'pi pi-angle-right'"></i>
+                    <span v-if="sidebarVisible" class="text-sm font-medium">Contraer</span>
+                </button>
+            </div>
+        </div>
+    </aside>
+</template>
+
+<style scoped>
+aside {
+    height: 100vh;
+    position: sticky;
+    top: 0;
+    z-index: 40;
+}
+
+/* Animación para submenús */
+.submenu-enter-active,
+.submenu-leave-active {
+    transition: height 0.3s ease, opacity 0.3s ease;
+    overflow: hidden;
+}
+
+.submenu-enter-from,
+.submenu-leave-to {
+    height: 0;
+    opacity: 0;
+}
+
+.submenu-enter-to,
+.submenu-leave-from {
+    opacity: 1;
+}
+
+/* Animación de rotación para el chevron */
+.rotate-180 {
+    transform: rotate(180deg);
+}
+
+/* Efecto de sombra en item activo */
+.shadow-sm {
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+/* Scroll suave */
+nav {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
+}
+
+nav::-webkit-scrollbar {
+    width: 6px;
+}
+
+nav::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+nav::-webkit-scrollbar-thumb {
+    background-color: rgba(155, 155, 155, 0.5);
+    border-radius: 3px;
+}
+
+nav::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(155, 155, 155, 0.7);
+}
+</style>
diff --git a/src/components/layout/TopBar.vue b/src/components/layout/TopBar.vue
new file mode 100644
index 0000000..5f2cdf6
--- /dev/null
+++ b/src/components/layout/TopBar.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useLayout } from "../../composables/useLayout";
+import { useAuth } from "../../modules/auth/composables/useAuth";
+
+const router = useRouter();
+const { isDarkMode, toggleDarkMode } = useLayout();
+const { user, logout } = useAuth();
+
+// Referencia al menú de usuario
+const userMenu = ref();
+
+// Función para toggle del menú
+const toggleUserMenu = (event: Event) => {
+    userMenu.value.toggle(event);
+};
+
+// Función de logout
+const handleLogout = async () => {
+    await logout();
+    router.push('/login');
+};
+
+// Opciones del menú de usuario
+const userMenuItems = ref([
+    {
+        label: 'Mi Perfil',
+        icon: 'pi pi-user',
+        command: () => {
+            router.push('/profile');
+        }
+    },
+    {
+        label: 'Configuración',
+        icon: 'pi pi-cog',
+        command: () => {
+            router.push('/settings');
+        }
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Cerrar Sesión',
+        icon: 'pi pi-sign-out',
+        command: () => {
+            handleLogout();
+        }
+    }
+]);
+</script>
+
+<template>
+    <header class="bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700 px-6 py-4">
+        <div class="flex items-center justify-between">
+            <!-- Left Section: Branding -->
+            <div class="flex items-center gap-3">
+                <!-- <i class="pi pi-box text-2xl text-primary"></i>
+                <div class="flex flex-col">
+                    <span class="text-lg font-bold text-surface-900 dark:text-surface-0">
+                        GOLS Control
+                    </span>
+                    <span class="text-xs text-surface-500 dark:text-surface-400">
+                        Sistema de Gestión
+                    </span>
+                </div> -->
+            </div>
+
+            <!-- Right Section: Actions -->
+            <div class="flex items-center gap-2">
+                <!-- Search Button (opcional) -->
+               <!--  <button
+                    type="button"
+                    class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-700 dark:text-surface-200"
+                    title="Buscar"
+                >
+                    <i class="pi pi-search"></i>
+                </button> -->
+
+                <!-- Notifications Button (opcional) -->
+                <!-- <button
+                    type="button"
+                    class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-700 dark:text-surface-200 relative"
+                    title="Notificaciones"
+                >
+                    <i class="pi pi-bell"></i>
+                    <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+                </button> -->
+
+                <!-- Dark Mode Toggle -->
+                <button
+                    type="button"
+                    class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-900 dark:text-surface-0"
+                    @click="toggleDarkMode"
+                    :title="isDarkMode ? 'Modo claro' : 'Modo oscuro'"
+                >
+                    <i :class="['pi', isDarkMode ? 'pi-sun' : 'pi-moon']" />
+                </button>
+
+                <!-- Settings/Config Button -->
+                <!-- <div class="relative">
+                    <button
+                        v-styleclass="{
+                            selector: '@next',
+                            enterFromClass: 'hidden',
+                            enterActiveClass: 'animate-scalein',
+                            leaveToClass: 'hidden',
+                            leaveActiveClass: 'animate-fadeout',
+                            hideOnOutsideClick: true,
+                        }"
+                        type="button"
+                        class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-surface-700 dark:text-surface-200"
+                        title="Configuración"
+                    >
+                        <i class="pi pi-cog" />
+                    </button>
+                    <AppConfig />
+                </div> -->
+
+                <!-- User Profile Button with Menu -->
+                <div class="relative">
+                    <button
+                        type="button"
+                        class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-surface-100 dark:hover:bg-surface-800 transition-all"
+                        title="Perfil"
+                        @click="toggleUserMenu"
+                        aria-haspopup="true"
+                        aria-controls="user_menu"
+                    >
+                        <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white text-sm font-semibold">
+                            {{ user?.name?.charAt(0).toUpperCase() || 'U' }}
+                        </div>
+                        <span class="text-sm font-medium text-surface-900 dark:text-surface-0 hidden md:block">
+                            {{ user?.full_name || user?.name || 'Usuario' }}
+                        </span>
+                        <i class="pi pi-angle-down text-sm text-surface-500 hidden md:block"></i>
+                    </button>
+
+                    <!-- Menu de Usuario -->
+                    <Menu 
+                        ref="userMenu" 
+                        id="user_menu" 
+                        :model="userMenuItems" 
+                        :popup="true"
+                        class="w-56"
+                    >
+                        <template #start>
+                            <div class="px-4 py-3 border-b border-surface-200 dark:border-surface-700">
+                                <p class="text-sm font-semibold text-surface-900 dark:text-surface-0">{{ user?.full_name || user?.name }}</p>
+                                <p class="text-xs text-surface-500 dark:text-surface-400">{{ user?.email }}</p>
+                            </div>
+                        </template>
+                        <template #item="{ item, props }">
+                            <a 
+                                v-bind="props.action" 
+                                class="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800 transition-colors"
+                                :class="{ 'text-red-600 dark:text-red-400': item.label === 'Cerrar Sesión' }"
+                            >
+                                <i :class="item.icon"></i>
+                                <span class="text-sm font-medium">{{ item.label }}</span>
+                            </a>
+                        </template>
+                        <template #end>
+                            <div class="px-4 py-2 border-t border-surface-200 dark:border-surface-700">
+                                <p class="text-xs text-surface-400 dark:text-surface-500">Versión 1.0.0</p>
+                            </div>
+                        </template>
+                    </Menu>
+                </div>
+            </div>
+        </div>
+    </header>
+</template>
+
+<style scoped>
+.animate-scalein {
+    animation: scalein 0.15s ease-in;
+}
+
+.animate-fadeout {
+    animation: fadeout 0.15s ease-out;
+}
+
+@keyframes scalein {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeout {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+</style>
diff --git a/src/components/shared/KpiCard.vue b/src/components/shared/KpiCard.vue
new file mode 100644
index 0000000..eaefa51
--- /dev/null
+++ b/src/components/shared/KpiCard.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+interface Props {
+    title: string;
+    value: string | number;
+    icon?: string;
+    trend?: {
+        value: number;
+        isPositive: boolean;
+    };
+    color?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+}
+
+withDefaults(defineProps<Props>(), {
+    color: 'primary'
+});
+
+const colorClasses: Record<string, string> = {
+    primary: 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400',
+    success: 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400',
+    warning: 'bg-orange-50 dark:bg-orange-900/20 text-orange-600 dark:text-orange-400',
+    danger: 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400',
+    info: 'bg-cyan-50 dark:bg-cyan-900/20 text-cyan-600 dark:text-cyan-400'
+};
+</script>
+
+<template>
+    <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
+        <div class="flex items-start justify-between">
+            <div class="flex-1">
+                <p class="text-sm text-surface-600 dark:text-surface-400 mb-2">
+                    {{ title }}
+                </p>
+                <h3 class="text-3xl font-bold text-surface-900 dark:text-surface-0">
+                    {{ value }}
+                </h3>
+                
+                <!-- Trend indicator -->
+                <div v-if="trend" class="flex items-center gap-1 mt-2">
+                    <i 
+                        :class="[
+                            'text-sm',
+                            trend.isPositive ? 'pi pi-arrow-up text-green-500' : 'pi pi-arrow-down text-red-500'
+                        ]"
+                    ></i>
+                    <span 
+                        :class="[
+                            'text-sm font-medium',
+                            trend.isPositive ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'
+                        ]"
+                    >
+                        {{ Math.abs(trend.value) }}%
+                    </span>
+                </div>
+            </div>
+
+            <!-- Icon -->
+            <div 
+                v-if="icon"
+                :class="[
+                    'w-12 h-12 rounded-lg flex items-center justify-center',
+                    colorClasses[color]
+                ]"
+            >
+                <i :class="[icon, 'text-xl']"></i>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/src/components/ui/Icons/MaterialIcon.vue b/src/components/ui/Icons/MaterialIcon.vue
deleted file mode 100644
index 1dbbcad..0000000
--- a/src/components/ui/Icons/MaterialIcon.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <span
-    :class="`material-symbols-${variant}`"
-    :style="{
-      fontVariationSettings: variationSettings,
-      fontSize: size + 'px',
-      color
-    }"
-    aria-hidden="true"
-  >
-    {{ name }}
-  </span>
-</template>
-
-<script>
-export default {
-  name: "MaterialIcon",
-  props: {
-    name: { type: String, required: true }, // Ej: "search", "home", "face"
-    variant: {
-      type: String,
-      default: "outlined", // outlined, rounded, sharp
-      validator: (v) => ["outlined", "rounded", "sharp"].includes(v)
-    },
-    fill: { type: Number, default: 0 }, // 0: borde, 1: relleno
-    weight: { type: Number, default: 400 }, // 100 a 700
-    grade: { type: Number, default: 0 }, // -25, 0, 200
-    opticalSize: { type: Number, default: 48 }, // tamaño óptico
-    size: { type: Number, default: 24 }, // tamaño visual en px
-    color: { type: String, default: "inherit" }
-  },
-  computed: {
-    variationSettings() {
-      return `"FILL" ${this.fill}, "wght" ${this.weight}, "GRAD" ${this.grade}, "opsz" ${this.opticalSize}`;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.material-symbols-outlined,
-.material-symbols-rounded,
-.material-symbols-sharp {
-  vertical-align: middle;
-  user-select: none;
-  display: inline-block;
-  line-height: 1;
-}
-</style>
diff --git a/src/components/ui/Input.vue b/src/components/ui/Input.vue
deleted file mode 100644
index 1ca7f58..0000000
--- a/src/components/ui/Input.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-/** Props */
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: ''
-  },
-  type: {
-    type: String,
-    default: 'text'
-  },
-  class: {
-    type: String,
-    default: ''
-  },
-  placeholder: {
-    type: String,
-    default: ''
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  required: {
-    type: Boolean,
-    default: false
-  },
-  id: {
-    type: String,
-    default: undefined
-  },
-  name: {
-    type: String,
-    default: undefined
-  }
-});
-
-/** Emits */
-const emit = defineEmits(['update:modelValue', 'input', 'change', 'focus', 'blur', 'keydown', 'keyup']);
-
-/** Función para concatenar clases (equivalente a cn() de React) */
-const cn = (...classes) => {
-  return classes.filter(Boolean).join(' ');
-};
-
-/** Clases computadas */
-const inputClasses = computed(() => {
-  return cn(
-    "flex h-10 w-full rounded-md border border-input px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-    props.class
-  );
-});
-
-/** Manejadores de eventos */
-const handleInput = (event) => {
-  emit('update:modelValue', event.target.value);
-  emit('input', event);
-};
-
-const handleChange = (event) => {
-  emit('change', event);
-};
-
-const handleFocus = (event) => {
-  emit('focus', event);
-};
-
-const handleBlur = (event) => {
-  emit('blur', event);
-};
-
-const handleKeydown = (event) => {
-  emit('keydown', event);
-};
-
-const handleKeyup = (event) => {
-  emit('keyup', event);
-};
-</script>
-
-<template>
-  <input
-    :id="id"
-    :name="name"
-    :type="type"
-    :value="modelValue"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :readonly="readonly"
-    :required="required"
-    :class="inputClasses"
-    @input="handleInput"
-    @change="handleChange"
-    @focus="handleFocus"
-    @blur="handleBlur"
-    @keydown="handleKeydown"
-    @keyup="handleKeyup"
-  />
-</template>
-
-<style scoped>
-/* 
-  Nota: Las clases CSS están definidas en Tailwind CSS.
-  Si necesitas definir estilos personalizados para las clases como 
-  'border-input', 'bg-background', 'ring-ring', etc., 
-  puedes agregarlas aquí o en tu archivo de configuración de Tailwind.
-*/
-</style>
\ No newline at end of file
diff --git a/src/components/ui/Table/Table.vue b/src/components/ui/Table/Table.vue
deleted file mode 100644
index 269620d..0000000
--- a/src/components/ui/Table/Table.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
-      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-        <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
-          <div v-if="loading" class="relative">
-            <div class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10">
-              <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
-            </div>
-          </div>
-
-          <table class="min-w-full divide-y divide-gray-300">
-            <TableHeader
-              :columns="columns"
-              :sortable="sortable"
-              :sort-direction="sortDirection"
-              @sort="handleSort"
-            />
-            <TableBody
-              :columns="columns"
-              :data="paginatedData"
-              :empty-message="emptyMessage"
-            >
-              <!-- Pasar todos los slots al TableBody -->
-              <template v-for="(_, name) in $slots" #[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-              </template>
-            </TableBody>
-          </table>
-
-          <TablePagination
-            v-if="pagination && paginationState"
-            :current-page="paginationState.currentPage.value"
-            :total-pages="paginationState.totalPages.value"
-            :total-items="paginationState.totalItems.value"
-            :start-index="paginationState.startIndex.value"
-            :end-index="paginationState.endIndex.value"
-            :has-next-page="paginationState.hasNextPage.value"
-            :has-previous-page="paginationState.hasPreviousPage.value"
-            @next="paginationState.nextPage"
-            @previous="paginationState.previousPage"
-            @go-to-page="paginationState.goToPage"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, watch } from 'vue';
-import { usePagination } from './composables/usePagination';
-import { useSort } from './composables/useSort';
-import TableHeader from './TableHeader.vue';
-import TableBody from './TableBody.vue';
-import TablePagination from './TablePagination.vue';
-
-const props = defineProps({
-  columns: {
-    type: Array,
-    required: true
-  },
-  data: {
-    type: Array,
-    default: () => []
-  },
-  sortable: {
-    type: Boolean,
-    default: true
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  emptyMessage: {
-    type: String,
-    default: 'No data available'
-  },
-  pagination: {
-    type: Object,
-    default: null
-  }
-});
-
-const { sortedData, toggleSort } = useSort(props.data);
-
-const paginationState = props.pagination
-  ? usePagination(props.pagination)
-  : null;
-
-const paginatedData = computed(() => {
-  if (!paginationState) {
-    return sortedData.value;
-  }
-
-  const start = paginationState.startIndex.value;
-  const end = paginationState.endIndex.value;
-  return sortedData.value.slice(start, end);
-});
-
-const sortDirection = computed(() => {
-  return null;
-});
-
-const handleSort = (key) => {
-  toggleSort(key);
-};
-
-watch(
-  () => props.data,
-  (newData) => {
-    if (paginationState) {
-      paginationState.updateTotalItems(newData.length);
-    }
-  }
-);
-</script>
\ No newline at end of file
diff --git a/src/components/ui/Table/TableBody.vue b/src/components/ui/Table/TableBody.vue
deleted file mode 100644
index 9f95778..0000000
--- a/src/components/ui/Table/TableBody.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <tbody class="bg-white divide-y divide-gray-200">
-    <tr
-      v-for="(row, rowIndex) in data"
-      :key="rowIndex"
-      class="hover:bg-gray-50 transition-colors"
-    >
-      <td
-        v-for="column in columns"
-        :key="column.key"
-        class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"
-      >
-        <slot 
-          :name="`cell-${column.key}`" 
-          :value="row[column.key]" 
-          :row="row" 
-          :column="column"
-        >
-          {{ formatCell(row[column.key], row, column) }}
-        </slot>
-      </td>
-    </tr>
-    <tr v-if="!data || data.length === 0">
-      <td
-        :colspan="columns.length"
-        class="px-6 py-8 text-center text-sm text-gray-500"
-      >
-        {{ emptyMessage }}
-      </td>
-    </tr>
-  </tbody>
-</template>
-
-<script setup>
-const props = defineProps({
-  columns: {
-    type: Array,
-    required: true
-  },
-  data: {
-    type: Array,
-    required: true
-  },
-  emptyMessage: {
-    type: String,
-    default: 'No data available'
-  }
-});
-
-const formatCell = (value, row, column) => {
-  if (column.formatter) {
-    return column.formatter(value, row);
-  }
-  return value ?? '-';
-};
-</script>
\ No newline at end of file
diff --git a/src/components/ui/Table/TableHeader.vue b/src/components/ui/Table/TableHeader.vue
deleted file mode 100644
index b7625f8..0000000
--- a/src/components/ui/Table/TableHeader.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <thead class="bg-gray-50 border-b border-gray-200">
-    <tr>
-      <th
-        v-for="column in columns"
-        :key="column.key"
-        :style="column.width ? { width: column.width } : undefined"
-        :class="[
-          'px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider',
-          column.sortable && sortable ? 'cursor-pointer select-none hover:bg-gray-100' : ''
-        ]"
-        @click="column.sortable && sortable ? handleSort(column.key) : undefined"
-      >
-        <div class="flex items-center gap-2">
-          <span>{{ column.label }}</span>
-          <span v-if="column.sortable && sortable" class="flex flex-col">
-            <svg
-              :class="[
-                'w-3 h-3 transition-colors',
-                sortDirection === 'asc' ? 'text-primary-600' : 'text-gray-400'
-              ]"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path d="M5 10l5-5 5 5H5z" />
-            </svg>
-            <svg
-              :class="[
-                'w-3 h-3 -mt-1 transition-colors',
-                sortDirection === 'desc' ? 'text-primary-600' : 'text-gray-400'
-              ]"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path d="M15 10l-5 5-5-5h10z" />
-            </svg>
-          </span>
-        </div>
-      </th>
-    </tr>
-  </thead>
-</template>
-
-<script setup>
-const props = defineProps({
-  columns: {
-    type: Array,
-    required: true
-  },
-  sortable: {
-    type: Boolean,
-    default: true
-  },
-  sortDirection: {
-    type: String,
-    default: null
-  }
-});
-
-const emit = defineEmits(['sort']);
-
-const handleSort = (key) => {
-  emit('sort', key);
-};
-</script>
diff --git a/src/components/ui/Table/TablePagination.vue b/src/components/ui/Table/TablePagination.vue
deleted file mode 100644
index b7a6d3a..0000000
--- a/src/components/ui/Table/TablePagination.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
-    <div class="flex-1 flex justify-between sm:hidden">
-      <button
-        @click="emit('previous')"
-        :disabled="!hasPreviousPage"
-        :class="[
-          'relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md',
-          hasPreviousPage
-            ? 'text-gray-700 bg-white hover:bg-gray-50'
-            : 'text-gray-400 bg-gray-100 cursor-not-allowed'
-        ]"
-      >
-        Previous
-      </button>
-      <button
-        @click="emit('next')"
-        :disabled="!hasNextPage"
-        :class="[
-          'ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md',
-          hasNextPage
-            ? 'text-gray-700 bg-white hover:bg-gray-50'
-            : 'text-gray-400 bg-gray-100 cursor-not-allowed'
-        ]"
-      >
-        Next
-      </button>
-    </div>
-    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-      <div>
-        <p class="text-sm text-gray-700">
-          Mostrando
-          <span class="font-medium">{{ startIndex + 1 }}</span>
-          a
-          <span class="font-medium">{{ endIndex }}</span>
-          de
-          <span class="font-medium">{{ totalItems }}</span>
-          resultados
-        </p>
-      </div>
-      <div>
-        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
-          <button
-            @click="emit('previous')"
-            :disabled="!hasPreviousPage"
-            :class="[
-              'relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 text-sm font-medium',
-              hasPreviousPage
-                ? 'text-gray-500 bg-white hover:bg-gray-50'
-                : 'text-gray-300 bg-gray-100 cursor-not-allowed'
-            ]"
-          >
-            <span class="sr-only">Previous</span>
-            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
-            </svg>
-          </button>
-
-          <button
-            v-for="page in visiblePages"
-            :key="page"
-            @click="emit('goToPage', page)"
-            :class="[
-              'relative inline-flex items-center px-4 py-2 border text-sm font-medium',
-              page === currentPage
-                ? 'z-10 bg-primary-50 border-primary-500 text-primary-600'
-                : 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50'
-            ]"
-          >
-            {{ page }}
-          </button>
-
-          <button
-            @click="emit('next')"
-            :disabled="!hasNextPage"
-            :class="[
-              'relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 text-sm font-medium',
-              hasNextPage
-                ? 'text-gray-500 bg-white hover:bg-gray-50'
-                : 'text-gray-300 bg-gray-100 cursor-not-allowed'
-            ]"
-          >
-            <span class="sr-only">Next</span>
-            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
-            </svg>
-          </button>
-        </nav>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  currentPage: {
-    type: Number,
-    required: true
-  },
-  totalPages: {
-    type: Number,
-    required: true
-  },
-  totalItems: {
-    type: Number,
-    required: true
-  },
-  startIndex: {
-    type: Number,
-    required: true
-  },
-  endIndex: {
-    type: Number,
-    required: true
-  },
-  hasNextPage: {
-    type: Boolean,
-    required: true
-  },
-  hasPreviousPage: {
-    type: Boolean,
-    required: true
-  }
-});
-
-const emit = defineEmits(['next', 'previous', 'goToPage']);
-
-const visiblePages = computed(() => {
-  const pages = [];
-  const maxVisible = 5;
-  const halfVisible = Math.floor(maxVisible / 2);
-
-  let startPage = Math.max(1, props.currentPage - halfVisible);
-  let endPage = Math.min(props.totalPages, startPage + maxVisible - 1);
-
-  if (endPage - startPage < maxVisible - 1) {
-    startPage = Math.max(1, endPage - maxVisible + 1);
-  }
-
-  for (let i = startPage; i <= endPage; i++) {
-    pages.push(i);
-  }
-
-  return pages;
-});
-</script>
diff --git a/src/components/ui/Table/composables/usePagination.js b/src/components/ui/Table/composables/usePagination.js
deleted file mode 100644
index 9cc490c..0000000
--- a/src/components/ui/Table/composables/usePagination.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { computed, ref } from 'vue';
-
-export function usePagination(initialConfig) {
-  const currentPage = ref(initialConfig.currentPage);
-  const pageSize = ref(initialConfig.pageSize);
-  const totalItems = ref(initialConfig.totalItems);
-
-  const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
-
-  const startIndex = computed(() => (currentPage.value - 1) * pageSize.value);
-
-  const endIndex = computed(() => Math.min(startIndex.value + pageSize.value, totalItems.value));
-
-  const hasNextPage = computed(() => currentPage.value < totalPages.value);
-
-  const hasPreviousPage = computed(() => currentPage.value > 1);
-
-  const goToPage = (page) => {
-    if (page >= 1 && page <= totalPages.value) {
-      currentPage.value = page;
-    }
-  };
-
-  const nextPage = () => {
-    if (hasNextPage.value) {
-      currentPage.value++;
-    }
-  };
-
-  const previousPage = () => {
-    if (hasPreviousPage.value) {
-      currentPage.value--;
-    }
-  };
-
-  const setPageSize = (size) => {
-    pageSize.value = size;
-    currentPage.value = 1;
-  };
-
-  const updateTotalItems = (total) => {
-    totalItems.value = total;
-  };
-
-  return {
-    currentPage,
-    pageSize,
-    totalItems,
-    totalPages,
-    startIndex,
-    endIndex,
-    hasNextPage,
-    hasPreviousPage,
-    goToPage,
-    nextPage,
-    previousPage,
-    setPageSize,
-    updateTotalItems,
-  };
-}
diff --git a/src/components/ui/Table/composables/useSort.js b/src/components/ui/Table/composables/useSort.js
deleted file mode 100644
index 9a3e992..0000000
--- a/src/components/ui/Table/composables/useSort.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { ref, computed } from 'vue';
-
-export function useSort(initialData) {
-  const sortConfig = ref(null);
-
-  const sortedData = computed(() => {
-    if (!sortConfig.value) {
-      return initialData;
-    }
-
-    const { key, direction } = sortConfig.value;
-    const sorted = [...initialData];
-
-    sorted.sort((a, b) => {
-      const aValue = a[key];
-      const bValue = b[key];
-
-      if (aValue === bValue) return 0;
-
-      const comparison = aValue > bValue ? 1 : -1;
-      return direction === 'asc' ? comparison : -comparison;
-    });
-
-    return sorted;
-  });
-
-  const toggleSort = (key) => {
-    if (!sortConfig.value || sortConfig.value.key !== key) {
-      sortConfig.value = { key, direction: 'asc' };
-    } else if (sortConfig.value.direction === 'asc') {
-      sortConfig.value = { key, direction: 'desc' };
-    } else {
-      sortConfig.value = null;
-    }
-  };
-
-  const getSortDirection = (key) => {
-    if (!sortConfig.value || sortConfig.value.key !== key) {
-      return null;
-    }
-    return sortConfig.value.direction;
-  };
-
-  return {
-    sortConfig,
-    sortedData,
-    toggleSort,
-    getSortDirection,
-  };
-}
diff --git a/src/components/ui/Tags/Badge.vue b/src/components/ui/Tags/Badge.vue
deleted file mode 100644
index cf4be8a..0000000
--- a/src/components/ui/Tags/Badge.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <span :class="tagClasses">
-    <template v-if="props.dot">
-      <span :class="dotClasses"></span>
-    </template>
-    <template v-else>
-      <slot name="icon" />
-    </template>
-    <slot />
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-  color?: 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'gray' | string; // string para hex
-  dot?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: 'blue',
-  dot: true,
-});
-
-const isHexColor = (color: string) => /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
-
-const colorMap = {
-  blue: {
-    bg: 'bg-blue-100',
-    text: 'text-blue-700',
-    dot: 'bg-blue-500',
-  },
-  purple: {
-    bg: 'bg-purple-100',
-    text: 'text-purple-700',
-    dot: 'bg-purple-500',
-  },
-  green: {
-    bg: 'bg-green-100',
-    text: 'text-green-700',
-    dot: 'bg-green-500',
-  },
-  orange: {
-    bg: 'bg-orange-100',
-    text: 'text-orange-700',
-    dot: 'bg-orange-500',
-  },
-  red: {
-    bg: 'bg-red-100',
-    text: 'text-red-700',
-    dot: 'bg-red-500',
-  },
-  gray: {
-    bg: 'bg-gray-700',
-    text: 'text-gray-700',
-    dot: 'bg-gray-700',
-  },
-};
-
-const tagClasses = computed(() => {
-  if (isHexColor(props.color)) {
-    return [
-      'inline-flex',
-      'items-center',
-      'px-3',
-      'py-1',
-      'rounded-md',
-      'text-sm',
-      'font-medium',
-      { backgroundColor: props.color, color: '#fff' },
-    ];
-  }
-  const allowedColors = Object.keys(colorMap);
-  const isPreset = allowedColors.includes(props.color as string);
-  return [
-    'inline-flex',
-    'items-center',
-    'px-3',
-    'py-1',
-    'rounded-md',
-    'text-sm',
-    'font-medium',
-    isPreset ? colorMap[props.color as keyof typeof colorMap].bg : 'bg-gray-100',
-    isPreset ? colorMap[props.color as keyof typeof colorMap].text : 'text-gray-700',
-  ];
-});
-
-const dotClasses = computed(() => {
-  if (isHexColor(props.color)) {
-    return [
-      'w-2',
-      'h-2',
-      'rounded-full',
-      'mr-2',
-      { backgroundColor: props.color },
-    ];
-  }
-  const allowedColors = Object.keys(colorMap);
-  const isPreset = allowedColors.includes(props.color as string);
-  return [
-    'w-2',
-    'h-2',
-    'rounded-full',
-    'mr-2',
-    isPreset ? colorMap[props.color as keyof typeof colorMap].dot : 'bg-gray-500',
-  ];
-});
-</script>
diff --git a/src/composables/useLayout.ts b/src/composables/useLayout.ts
new file mode 100644
index 0000000..831e36c
--- /dev/null
+++ b/src/composables/useLayout.ts
@@ -0,0 +1,194 @@
+import { updatePrimaryPalette, updateSurfacePalette } from "@primeuix/themes";
+import { computed, ref } from "vue";
+
+const appState = ref({
+    primary: "blue",
+    surface: "slate",
+    darkMode: false
+});
+
+const primaryColors = ref([
+    {
+        name: "blue",
+        palette: {
+            50: "#eff6ff",
+            100: "#dbeafe",
+            200: "#bfdbfe",
+            300: "#93c5fd",
+            400: "#60a5fa",
+            500: "#3b82f6",
+            600: "#2563eb",
+            700: "#1d4ed8",
+            800: "#1e40af",
+            900: "#1e3a8a",
+            950: "#172554"
+        }
+    },
+]);
+
+const surfaces = ref([
+    {
+        name: "slate",
+        palette: {
+            0: "#ffffff",
+            50: "#f8fafc",
+            100: "#f1f5f9",
+            200: "#e2e8f0",
+            300: "#cbd5e1",
+            400: "#94a3b8",
+            500: "#64748b",
+            600: "#475569",
+            700: "#334155",
+            800: "#1e293b",
+            900: "#0f172a",
+            950: "#020617"
+        }
+    },
+    {
+        name: "gray",
+        palette: {
+            0: "#ffffff",
+            50: "#f9fafb",
+            100: "#f3f4f6",
+            200: "#e5e7eb",
+            300: "#d1d5db",
+            400: "#9ca3af",
+            500: "#6b7280",
+            600: "#4b5563",
+            700: "#374151",
+            800: "#1f2937",
+            900: "#111827",
+            950: "#030712"
+        }
+    },
+    {
+        name: "zinc",
+        palette: {
+            0: "#ffffff",
+            50: "#fafafa",
+            100: "#f4f4f5",
+            200: "#e4e4e7",
+            300: "#d4d4d8",
+            400: "#a1a1aa",
+            500: "#71717a",
+            600: "#52525b",
+            700: "#3f3f46",
+            800: "#27272a",
+            900: "#18181b",
+            950: "#09090b"
+        }
+    },
+    {
+        name: "neutral",
+        palette: {
+            0: "#ffffff",
+            50: "#fafafa",
+            100: "#f5f5f5",
+            200: "#e5e5e5",
+            300: "#d4d4d4",
+            400: "#a3a3a3",
+            500: "#737373",
+            600: "#525252",
+            700: "#404040",
+            800: "#262626",
+            900: "#171717",
+            950: "#0a0a0a"
+        }
+    },
+    {
+        name: "stone",
+        palette: {
+            0: "#ffffff",
+            50: "#fafaf9",
+            100: "#f5f5f4",
+            200: "#e7e5e4",
+            300: "#d6d3d1",
+            400: "#a8a29e",
+            500: "#78716c",
+            600: "#57534e",
+            700: "#44403c",
+            800: "#292524",
+            900: "#1c1917",
+            950: "#0c0a09"
+        }
+    }
+]);
+
+// Inicializar el color azul al cargar
+const bluePalette = {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+};
+
+const slatePalette = {
+    0: "#ffffff",
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+};
+
+// Aplicar los colores por defecto inmediatamente
+updatePrimaryPalette(bluePalette);
+updateSurfacePalette(slatePalette);
+
+export function useLayout() {
+    function setPrimary(value: string) {
+        appState.value.primary = value;
+    }
+
+    function setSurface(value: string) {
+        appState.value.surface = value;
+    }
+
+    function toggleDarkMode() {
+        appState.value.darkMode = !appState.value.darkMode;
+        document.documentElement.classList.toggle("p-dark");
+    }
+
+    function updateColors(type: "primary" | "surface", colorName: string) {
+        if (type === "primary") {
+            setPrimary(colorName);
+            const color = primaryColors.value.find((c) => c.name === colorName);
+            if (color) {
+                updatePrimaryPalette(color.palette);
+            }
+        } else if (type === "surface") {
+            setSurface(colorName);
+            const surfaceColor = surfaces.value.find((s) => s.name === colorName);
+            if (surfaceColor) {
+                updateSurfacePalette(surfaceColor.palette);
+            }
+        }
+    }
+
+    const primary = computed(() => appState.value.primary);
+    const surface = computed(() => appState.value.surface);
+    const isDarkMode = computed(() => appState.value.darkMode);
+
+    return {
+        primaryColors,
+        surfaces,
+        primary,
+        surface,
+        isDarkMode,
+        toggleDarkMode,
+        updateColors
+    };
+}
diff --git a/src/config.js b/src/config.js
deleted file mode 100644
index 24a1e61..0000000
--- a/src/config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import config from '../package.json'
-
-const APP_COPYRIGHT = config.copyright
-const APP_NAME      = import.meta.env.VITE_APP_NAME
-const APP_VERSION   = config.version
-
-export {
-    APP_NAME,
-    APP_VERSION,
-    APP_COPYRIGHT
-}
\ No newline at end of file
diff --git a/src/controllers/BreadcrumbController.js b/src/controllers/BreadcrumbController.js
deleted file mode 100644
index c5d7c7e..0000000
--- a/src/controllers/BreadcrumbController.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/** Breadcrumb */
-const breadcrumbItem = (name, icon, route = {name:'index'}) => ({ name, icon, route })
-
-const breadcrumbMeta = (route) => {
-    let breadcrumbs = [];
-
-    route.matched.forEach(match => {
-        if(match.name && match.meta?.title) {
-            breadcrumbs.push(breadcrumbItem(match.meta.title, match.meta.icon, {name: match.name}));
-        }
-    });
-
-    return breadcrumbs;
-}
-
-export {
-    breadcrumbItem,
-    breadcrumbMeta,
-}
\ No newline at end of file
diff --git a/src/controllers/DateController.js b/src/controllers/DateController.js
deleted file mode 100644
index 02f96f2..0000000
--- a/src/controllers/DateController.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DateTime } from "luxon";
-
-// Obtener fecha en formato deseado
-function getDate(value = null) {
-    const date = (value)
-        ? DateTime.fromISO(value)
-        : DateTime.now();
-
-    return date.toLocaleString(DateTime.DATE_MED);
-}
-
-// Obtener hora en formato deseado
-function getTime(value = null) {
-    const date = (value)
-        ? DateTime.fromISO(value)
-        : DateTime.now();
-
-    return date.toLocaleString(DateTime.TIME_24_SIMPLE);
-}
-
-// Obtener fecha y hora
-function getDateTime(value) {
-    const date = (value)
-        ? DateTime.fromISO(value)
-        : DateTime.now();
-
-    return date.toLocaleString(DateTime.DATETIME_SHORT);
-}
-
-export {
-    getDate,
-    getDateTime,
-    getTime
-}
\ No newline at end of file
diff --git a/src/controllers/InboxController.js b/src/controllers/InboxController.js
deleted file mode 100644
index 3b24549..0000000
--- a/src/controllers/InboxController.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ref } from 'vue';
-
-/**
- * Controlador simple de las bandejas
- */
-class InboxController
-{
-    inboxIdSelected = ref([]);
-    inboxNumberSelected = ref([]);
-    selectAll = ref(false);
-    
-    constructor() {}
-
-    /**
-     * Selecciona todas las opciones visibles
-     */
-    onSelectAll = (elements) => {
-        this.inboxIdSelected.value = [];
-        this.inboxNumberSelected.value = [];
-
-        this.selectAll.value = !this.selectAll.value;
-    
-        if(this.selectAll.value) {
-            elements.data.forEach(element => {
-                this.inboxIdSelected.value.push(element.id);
-                this.inboxNumberSelected.value.push(element.number);
-            });
-        }
-    }
-
-    /**
-     * Selecciona solo una opcion
-     */
-    onSelectOne = (invoice) => {
-        this.inboxIdSelected.value.push(invoice.id);
-        this.inboxNumberSelected.value.push(invoice.number);
-    }
-
-    /**
-     * Permite que siempresea solo una opcion seleccionada
-     */
-    onlyOne = (invoice) => {
-        this.clear();
-        this.onSelectOne(invoice);
-    }
-
-    /**
-     * Quita la seleccion
-     */
-    onUnselectOne = (invoice) => {
-        this.inboxIdSelected.value = this.inboxIdSelected.value.filter(element => {
-            return element !== invoice.id;
-        });
-
-        this.inboxNumberSelected.value = this.inboxNumberSelected.value.filter(element => {
-            return element !== invoice.number;
-        });
-    }
-
-    /**
-     * Retorna todos los IDs de los elementos seleccionados
-     */
-    getIdSelections = () => {
-        return this.inboxIdSelected.value;
-    }
-
-    /**
-     * Trata al ID como si fueran muchos
-     * 
-     * Si no se pasa mimgun ID, se devolveran todos los elementos seleccionados almacenados
-     */
-    getAsMany = (id) => {
-        return (id) ? [ id ] : this.getIdSelections();
-    }
-
-    /**
-     * Retorna todos los numeros de las facturas/seleccionadas
-     */
-    getNumberSelections = () => {
-        return this.inboxNumberSelected.value;
-    }
-
-    /**
-     * Limpia los valores seleccionados
-     */
-    clear = () => {
-        this.inboxIdSelected.value = [];
-        this.inboxNumberSelected.value = [];
-        this.selectAll.value = false;
-    }
-
-    /**
-     * Limpia los valores seleccionados con una notificacion de exito
-     */
-    clearWithSuccess = (message) => {
-        this.clear();
-
-        Notify.success(message);
-    }
-}
-
-export default InboxController;
\ No newline at end of file
diff --git a/src/controllers/PrintController.js b/src/controllers/PrintController.js
deleted file mode 100644
index e88739b..0000000
--- a/src/controllers/PrintController.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { ref } from 'vue';
-
-/**
- * Controla la generación de impresiones
- */
-class PrintController
-{
-    invoices = ref(false);
-    
-    constructor({route, meta, params = {}, name = "Comprobante", type='pdf'}) {
-        this.route  = route;
-        this.meta   = meta;
-        this.params = params;
-        this.name   = name;
-        this.type   = type;
-    }
-
-    /**
-     * Manda la orden de impresión y descarga
-     */
-
-    download = (data = {}) => {
-        Notify.info('Generando archivo, espere ...');
-
-        axios({
-            url: route(this.route, this.params),
-            method: 'POST',
-            data: {
-                meta: this.meta,
-                data: data
-            },
-            responseType: 'blob'
-        }).then((response) => {
-            const href = URL.createObjectURL(response.data);
-
-            const link = document.createElement('a');
-            link.href = href;
-            link.setAttribute('download', `${this.name}.${this.type}`);
-            document.body.appendChild(link);
-            link.click();
-
-            document.body.removeChild(link);
-            URL.revokeObjectURL(href);
-            Notify.info('Archivo generado');
-        }).catch(err => {
-            Notify.error('Error al generar');
-        });
-    }
-}
-
-export default PrintController;
\ No newline at end of file
diff --git a/src/css/app.css b/src/css/app.css
deleted file mode 100644
index b4f9467..0000000
--- a/src/css/app.css
+++ /dev/null
@@ -1,87 +0,0 @@
-@import "tailwindcss";
-@import "../../colors.css";
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-  --font-google-icon-outlined: "Material Symbols Outlined"; 
-  --font-google-icon-outlined-fill: "Material Symbols Outlined Fill";
-  --font-google-icon-rounded: "Material Symbols Rounded";
-  --font-google-icon-rounded-fill: "Material Symbols rounded-sm Fill";
-  --font-google-icon-sharp: "Material Symbols Sharp";
-  --font-google-icon-sharp-fill: "Material Symbols Sharp Fill";
-}
-
-.app-bg-light {
-  @apply bg-primary
-}
-
-.app-bg-dark {
-  @apply bg-primary-d
-}
-
-.btn {
-  @apply inline-flex justify-center items-center w-fit px-1.5 py-1.5 rounded-sm font-medium border border-transparent text-xs text-white uppercase tracking-widest hover:opacity-90 focus:outline-hidden active:saturate-150 disabled:opacity-25 cursor-pointer transition;
-}
-
-.btn-primary {
-  @apply bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt;
-}
-
-.btn-secondary {
-  @apply bg-secondary dark:bg-secondary-d text-secondary-t dark:text-secondary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt;
-}
-
-.btn-success {
-  @apply bg-success dark:bg-success-d text-success-t dark:text-success-dt hover:bg-success dark:hover:bg-success hover:text-success-t dark:hover:text-success-dt;
-}
-
-.btn-danger {
-  @apply bg-danger dark:bg-danger-d text-danger-t dark:text-danger-dt hover:bg-danger dark:hover:bg-danger hover:text-danger-t dark:hover:text-danger-dt;
-}
-
-.btn-warning {
-  @apply bg-warning dark:bg-warning-d text-warning-t dark:text-warning-dt hover:bg-warning dark:hover:bg-warning hover:text-warning-t dark:hover:text-warning-dt;
-}
-
-.btn-icon {
-  @apply flex w-fit min-h-6 px-1.5 py-1.5 rounded-sm font-medium bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt cursor-pointer;
-}
-
-.input-primary {
-  @apply w-full p-[6.5px] border-b border-page-t/50 dark:border-page-dt/50 bg-primary/5 rounded-sm outline-0 
-}
-
-.nav-item {
-  @apply p-1
-}
-
-.table-row {
-  @apply hover:bg-secondary/10 dark:hover:bg-secondary-d/10 transition-colors duration-100
-}
-
-.table-cell {
-  @apply px-2 py-0.5 text-sm border border-primary/30 dark:border-primary-dt/30;
-}
-
-.table-actions {
-  @apply flex  justify-center items-center space-x-1;
-}
-
-nav a.router-link-active {
-  @apply bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d
-}
-
-.with-transition {
-  @apply transition-all duration-300
-}
-
-/**
- * Switch
- */
-.toggle-checkbox:checked {
-  @apply right-0 border-slate-500
-}
-
-.toggle-checkbox:checked + .toggle-label {
-  @apply bg-slate-500
-}
\ No newline at end of file
diff --git a/src/css/base.css b/src/css/base.css
deleted file mode 100644
index f2c8fdd..0000000
--- a/src/css/base.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@import './app.css';
-@import './icons.css';
-@import './notifications.css';
-@import "vue-multiselect/dist/vue-multiselect.css";
-@import './multiselect.css';
\ No newline at end of file
diff --git a/src/css/icons.css b/src/css/icons.css
deleted file mode 100644
index d81e33f..0000000
--- a/src/css/icons.css
+++ /dev/null
@@ -1,132 +0,0 @@
-/*
-* Outlined
-*
-* https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0
-* https://fonts.gstatic.com/s/materialsymbolsoutlined/v170/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2
-*/
-@font-face {
-    font-family: 'Material Symbols Outlined';
-    font-style: normal;
-    font-weight: 400;
-    src: url(./icons/google/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
-}
-
-/**
-* Outlined fill
-*
-* https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0
-* https://fonts.gstatic.com/s/materialsymbolsoutlined/v170/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2
-*/
-@font-face {
-    font-family: 'Material Symbols Outlined Fill';
-    font-style: normal;
-    font-weight: 400;
-    src: url(./icons/google/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
-}
-
-/**
-* Rounded
-*
-* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0
-* https://fonts.gstatic.com/s/materialsymbolsrounded/v168/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
-*/
-@font-face {
-  font-family: 'Material Symbols Rounded';
-  font-style: normal;
-  font-weight: 400;
-  src: url(./icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
-}
-
-/**
-* rounded-sm fill
-*
-* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0
-* https://fonts.gstatic.com/s/materialsymbolsrounded/v168/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
-*/
-@font-face {
-    font-family: 'Material Symbols rounded-sm Fill';
-    font-style: normal;
-    font-weight: 400;
-    src: url(./icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
-}
-
-/**
-* Sharp
-*
-* https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,0,0
-* https://fonts.gstatic.com/s/materialsymbolssharp/v166/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2
-*/
-@font-face {
-    font-family: 'Material Symbols Sharp';
-    font-style: normal;
-    font-weight: 400;
-    src: url(./icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
-}
-
-/**
-* Sharp fill
-*
-* https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,1,0
-* https://fonts.gstatic.com/s/materialsymbolssharp/v166/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2
-*/
-@font-face {
-    font-family: 'Material Symbols Sharp Fill';
-    font-style: normal;
-    font-weight: 400;
-    src: url(./icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
-}
-
-/* Clases para MaterialIcon component */
-.material-symbols-outlined {
-    font-family: 'Material Symbols Outlined';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-    font-feature-settings: 'liga';
-}
-
-.material-symbols-rounded {
-    font-family: 'Material Symbols Rounded';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-    font-feature-settings: 'liga';
-}
-
-.material-symbols-sharp {
-    font-family: 'Material Symbols Sharp';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    display: inline-block;
-    line-height: 1;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: normal;
-    white-space: nowrap;
-    direction: ltr;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-    font-feature-settings: 'liga';
-}
diff --git a/src/css/icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2 b/src/css/icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2
deleted file mode 100644
index d4912be..0000000
Binary files a/src/css/icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2 and /dev/null differ
diff --git a/src/css/icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2 b/src/css/icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2
deleted file mode 100644
index d6f770d..0000000
Binary files a/src/css/icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReaU4bHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2 and /dev/null differ
diff --git a/src/css/icons/google/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2 b/src/css/icons/google/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2
deleted file mode 100644
index 5b2397e..0000000
Binary files a/src/css/icons/google/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2 and /dev/null differ
diff --git a/src/css/icons/google/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2 b/src/css/icons/google/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2
deleted file mode 100644
index f46d871..0000000
Binary files a/src/css/icons/google/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2 and /dev/null differ
diff --git a/src/css/icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2 b/src/css/icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
deleted file mode 100644
index 03d95f1..0000000
Binary files a/src/css/icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDB_Qb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2 and /dev/null differ
diff --git a/src/css/icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2 b/src/css/icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
deleted file mode 100644
index 9d8bf82..0000000
Binary files a/src/css/icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2 and /dev/null differ
diff --git a/src/css/multiselect.css b/src/css/multiselect.css
deleted file mode 100644
index 3a3fcb6..0000000
--- a/src/css/multiselect.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.multiselect {
-    @apply dark:text-white min-h-8;
-  }
-
-.multiselect__input,
-.multiselect__single  {
-    @apply bg-white dark:bg-transparent dark:text-white
-}
-
-.multiselect__input::placeholder {
-  @apply text-gray-300;
-}
-
-.multiselect__tag {
-  @apply bg-success dark:bg-success-d;
-}
-
-.multiselect__tag-icon::after {
-  @apply text-gray-300;
-}
-
-.multiselect__tag-icon:focus::after,
-.multiselect__tag-icon:hover::after {
-  @apply text-white;
-}
-
-.multiselect__tags {
-  @apply bg-primary/5  dark:bg-primary-d/5 min-h-8 border-0 border-b border-page-t/50 dark:border-page-dt/50 pt-1;
-}
-
-.multiselect__option--highlight {
-  @apply dark:bg-green-900 dark:text-white outline-0;
-}
-
-.multiselect__option--highlight::after {
-  @apply dark:bg-green-800 dark:text-white;
-}
-
-.multiselect__option--selected.multiselect__option--highlight {
-    @apply bg-red-500 dark:bg-red-600 text-white;
-  }
-
-  .multiselect__option--selected.multiselect__option--highlight::after {
-    @apply bg-red-400 dark:bg-red-500 text-white;
-  }
-
-.multiselect__content-wrapper {
-    @apply bg-page dark:bg-page-d;
-  }
-
-  
-  .multiselect--disabled,
-  .multiselect--disabled .multiselect__select,
-  .multiselect--disabled .multiselect__current,
-  .multiselect__option--disabled.multiselect__option--highlight{
-    background: none;
-  }
\ No newline at end of file
diff --git a/src/css/notifications.css b/src/css/notifications.css
deleted file mode 100644
index 6f1dd57..0000000
--- a/src/css/notifications.css
+++ /dev/null
@@ -1,234 +0,0 @@
-.toast-title {
-    font-weight: bold;
-  }
-  .toast-message {
-    -ms-word-wrap: break-word;
-    word-wrap: break-word;
-  }
-  .toast-message a,
-  .toast-message label {
-    color: #FFFFFF;
-  }
-  .toast-message a:hover {
-    color: #CCCCCC;
-    text-decoration: none;
-  }
-  .toast-close-button {
-    position: relative;
-    right: -0.3em;
-    top: -0.3em;
-    float: right;
-    font-size: 20px;
-    font-weight: bold;
-    color: #FFFFFF;
-    -webkit-text-shadow: 0 1px 0 #ffffff;
-    text-shadow: 0 1px 0 #ffffff;
-    opacity: 0.8;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-    filter: alpha(opacity=80);
-    line-height: 1;
-  }
-  .toast-close-button:hover,
-  .toast-close-button:focus {
-    color: #000000;
-    text-decoration: none;
-    cursor: pointer;
-    opacity: 0.4;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-    filter: alpha(opacity=40);
-  }
-  .rtl .toast-close-button {
-    left: -0.3em;
-    float: left;
-    right: 0.3em;
-  }
-  /*Additional properties for button version
-   iOS requires the button element instead of an anchor tag.
-   If you want the anchor version, it requires `href="#"`.*/
-  button.toast-close-button {
-    padding: 0;
-    cursor: pointer;
-    background: transparent;
-    border: 0;
-    -webkit-appearance: none;
-  }
-  .toast-top-center {
-    top: 0;
-    right: 0;
-    width: 100%;
-  }
-  .toast-bottom-center {
-    bottom: 0;
-    right: 0;
-    width: 100%;
-  }
-  .toast-top-full-width {
-    top: 0;
-    right: 0;
-    width: 100%;
-  }
-  .toast-bottom-full-width {
-    bottom: 0;
-    right: 0;
-    width: 100%;
-  }
-  .toast-top-left {
-    top: 12px;
-    left: 12px;
-  }
-  .toast-top-right {
-    top: 12px;
-    right: 12px;
-  }
-  .toast-bottom-right {
-    right: 12px;
-    bottom: 12px;
-  }
-  .toast-bottom-left {
-    bottom: 12px;
-    left: 12px;
-  }
-  #toast-container {
-    position: fixed;
-    z-index: 999999;
-    pointer-events: none;
-    /*overrides*/
-  }
-  #toast-container * {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  #toast-container > div {
-    position: relative;
-    pointer-events: auto;
-    overflow: hidden;
-    margin: 0 0 6px;
-    padding: 15px 15px 15px 50px;
-    width: 300px;
-    -moz-border-radius: 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    border-radius: 3px 3px 3px 3px;
-    background-position: 15px center;
-    background-repeat: no-repeat;
-    -moz-box-shadow: 0 0 12px #999999;
-    -webkit-box-shadow: 0 0 12px #999999;
-    box-shadow: 0 0 12px #999999;
-    color: #FFFFFF;
-    opacity: 0.8;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-    filter: alpha(opacity=80);
-  }
-  #toast-container > div.rtl {
-    direction: rtl;
-    padding: 15px 50px 15px 15px;
-    background-position: right 15px center;
-  }
-  #toast-container > div:hover {
-    -moz-box-shadow: 0 0 12px #000000;
-    -webkit-box-shadow: 0 0 12px #000000;
-    box-shadow: 0 0 12px #000000;
-    opacity: 1;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-    filter: alpha(opacity=100);
-    cursor: pointer;
-  }
-  #toast-container > .toast-info {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
-  }
-  #toast-container > .toast-error {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
-  }
-  #toast-container > .toast-success {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
-  }
-  #toast-container > .toast-warning {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
-  }
-  #toast-container.toast-top-center > div,
-  #toast-container.toast-bottom-center > div {
-    width: 300px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  #toast-container.toast-top-full-width > div,
-  #toast-container.toast-bottom-full-width > div {
-    width: 96%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .toast {
-    background-color: #030303;
-  }
-
-  .toast-success {
-    @apply bg-success dark:bg-success-d;
-  }
-
-  .toast-error {
-    @apply bg-danger dark:bg-danger-d;
-  }
-
-  .toast-info {
-    @apply bg-primary-info dark:bg-primary-info-d;
-  }
-  
-  .toast-warning {
-    @apply bg-warning dark:bg-warning-d;
-  }
-  
-  .toast-progress {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    height: 4px;
-    background-color: #000000;
-    opacity: 0.4;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-    filter: alpha(opacity=40);
-  }
-  /*Responsive Design*/
-  @media all and (max-width: 240px) {
-    #toast-container > div {
-      padding: 8px 8px 8px 50px;
-      width: 11em;
-    }
-    #toast-container > div.rtl {
-      padding: 8px 50px 8px 8px;
-    }
-    #toast-container .toast-close-button {
-      right: -0.2em;
-      top: -0.2em;
-    }
-    #toast-container .rtl .toast-close-button {
-      left: -0.2em;
-      right: 0.2em;
-    }
-  }
-  @media all and (min-width: 241px) and (max-width: 480px) {
-    #toast-container > div {
-      padding: 8px 8px 8px 50px;
-      width: 18em;
-    }
-    #toast-container > div.rtl {
-      padding: 8px 50px 8px 8px;
-    }
-    #toast-container .toast-close-button {
-      right: -0.2em;
-      top: -0.2em;
-    }
-    #toast-container .rtl .toast-close-button {
-      left: -0.2em;
-      right: 0.2em;
-    }
-  }
-  @media all and (min-width: 481px) and (max-width: 768px) {
-    #toast-container > div {
-      padding: 15px 15px 15px 50px;
-      width: 25em;
-    }
-    #toast-container > div.rtl {
-      padding: 15px 50px 15px 15px;
-    }
-  }
-  
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 7944ce4..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import Aura from '@primeuix/themes/aura';
-import './css/base.css'
-
-import axios from 'axios';
-import { createPinia } from 'pinia'
-import { createApp } from 'vue'
-import { useRoute, ZiggyVue } from 'ziggy-js';
-import { i18n, lang } from '@Lang/i18n.js';
-import router from '@Router/Index'
-import Notify from '@Plugins/Notify'
-import { bootPermissions, bootRoles } from '@Plugins/RolePermission';
-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 PrimeVue from 'primevue/config';
-import 'v-calendar/style.css';
-
-import { definePreset } from '@primeuix/themes';
-import Button from 'primevue/button';
-
-
-
-import App from '@Components/App.vue'
-import Error503 from '@Pages/Errors/503.vue'
-import { hasToken } from './services/Api';
-
-// Configurar axios
-axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
-
-// Elementos globales
-window.axios = axios;
-window.Lang = lang;
-window.Notify = new Notify();
-window.TwScreen = new TailwindScreen();
-
-async function boot() {
-    let initRoutes = false;
-
-    // Iniciar rutas
-    try {
-        const routes = await axios.get(apiURL('resources/routes'));
-        const appData = await axios.get(apiURL('resources/app'));
-
-        window.Ziggy = routes.data;
-        defineApp(appData.data);
-        window.route = useRoute();
-        window.view = view;
-        initRoutes = true;
-    } catch (error) {
-        window.Notify.error(window.Lang('server.api.noAvailable'));
-    }
-
-    if (initRoutes) {
-        // Iniciar permisos
-        if (hasToken()) {
-            await bootPermissions();
-            await bootRoles();
-
-            // Iniciar broadcast
-            if (import.meta.env.VITE_REVERB_ACTIVE === 'true') {
-                await import('@Services/Broadcast')
-            }
-        }
-
-        reloadApp();
-
-        const MyPreset = definePreset(Aura, {
-            semantic: {
-                primary: {
-                    50: '{neutral.50}',
-                    100: '{neutral.100}',
-                    200: '{neutral.200}',
-                    300: '{neutral.300}',
-                    400: '{neutral.400}',
-                    500: '{neutral.500}',
-                    600: '{neutral.600}',
-                    700: '{neutral.700}',
-                    800: '{neutral.800}',
-                    900: '{neutral.900}',
-                    950: '{neutral.950}'
-                },
-            }
-        });
-
-        createApp(App)
-            .use(createPinia())
-            .use(i18n)
-            .use(pagePlugin)
-            .use(router)
-            .use(ZiggyVue)
-            .use(VCalendar, {})
-            .use(VueApexCharts)
-            .use(PrimeVue, {
-                theme: {
-                    preset: MyPreset
-                }
-            })
-            .mount('#app');
-    } else {
-        createApp(Error503)
-            .mount('#app');
-    }
-}
-
-// Iniciar aplicación
-boot();
diff --git a/src/lang/en.js b/src/lang/en.js
deleted file mode 100644
index e29c383..0000000
--- a/src/lang/en.js
+++ /dev/null
@@ -1,205 +0,0 @@
-export default {
-    '&':'and',
-    account: {
-        delete: {
-            confirm:'Are you sure you want to delete your account? Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.',
-            description: 'Permanently delete your account.',
-            onDelete:'Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.',
-            title:'Delete Account',
-        },
-        email: {
-            notifySendVerification:'A new verification link has been sent to your email address.',
-            sendVerification:'Click here to re-send the verification email',
-            unverify: 'Your email address is unverified.',
-        },
-        manage:'Manage Account',
-        password: {
-            description:'Ensure your account is using a long, random password to stay secure.',
-            new:'New password',
-            reset:'Reset password',
-            secure:'This is a secure area of the application. Please confirm your password before continuing.',
-            update: 'Update Password',
-            verify:'For your security, please confirm your password to continue.',
-        },
-        profile: {
-            description:'Update your account\'s profile information and email address.',
-            title:'Profile Information',
-        },
-        sessions: {
-            confirm:'Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices.',
-            description: 'Manage and log out your active sessions on other browsers and devices.',
-            last:'Last active',
-            logout:'Log Out Other Browser Sessions',
-            onLogout:'If necessary, you may log out of all of your other browser sessions across all of your devices. Some of your recent sessions are listed below; however, this list may not be exhaustive. If you feel your account has been compromised, you should also update your password.',
-            this: 'This device',
-            title: 'Browser Sessions',
-        },
-        twoFactor: {
-            codes:{
-                regenerate:'Regenerate Recovery Codes',
-                show:'Show Recovery Codes',
-                store:'Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.',
-            },
-            description:'Add additional security to your account using two factor authentication.',
-            isEnable:'You have enabled two factor authentication.',
-            isNotEnable:{
-                title:'You have not enabled two factor authentication.',
-                description:'When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone\'s Google Authenticator application.',
-            },
-            key:'Setup Key',
-            login: {
-                onAuth: 'Please confirm access to your account by entering the authentication code provided by your authenticator application.',
-                onRecovery: 'Please confirm access to your account by entering one of your emergency recovery codes.',
-            },
-            onFinish:'Finish enabling two factor authentication.',
-            qr: {
-                isConfirmed: 'Two factor authentication is now enabled. Scan the following QR code using your phone\'s authenticator application or enter the setup key.',
-                onConfirmed: 'To finish enabling two factor authentication, scan the following QR code using your phone\'s authenticator application or enter the setup key and provide the generated OTP code.',
-            },
-            recovery: {
-                code: 'Recovery code',
-                useAuth: 'Use an authentication code',
-                useCode: 'Use a recovery code',
-            },
-            title:'Two Factor Authentication',
-        },
-    },
-    actions:'Actions',
-    auth: {
-        forgotPassword: {
-            ask: 'Forgot your password?',
-            description: 'Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.',
-            sendLink: 'Email Password Reset Link',
-            title: 'Forgot Password',
-        },
-        login: 'Log In',
-        logout: 'Log Out',
-        register: {
-            already: 'Already registered?',
-            me: 'Register me',
-        },
-        remember: 'Remember me',
-    },
-    code:'Code',
-    cancel:'Cancel',
-    changelogs: {
-        title:'Changelogs',
-        description: 'List of changes made to the system.',
-    },
-    close:"Close",
-    confirm:'Confirm',
-    copyright:'All rights reserved.',
-    contact:'Contact',
-    description:'Description',
-    date:'Date',
-    delete: {
-        confirm:"By pressing DELETE the record will be permanently deleted and cannot be recovered.",
-        title:'Deleted',
-    },
-    deleted:'Deleted',
-    details:'Details',
-    disable:'Disable',
-    disabled:'Disable',
-    done:'Done.',
-    edit:'Edit',
-    email:'Email',
-    enable:'Enable',
-    endDate:'End date',
-    event:'Event',
-    help: {
-        description:'The following is a list of iconography to understand how the system works.',
-        home: 'Back to home page.',
-        title:'Help',
-    },
-    history: {
-        title:'Stock history',
-        description:'History of actions performed by users in chronological order.',
-    },
-    home:'Home',
-    hour:'Hour',
-    icon:'Icon',
-    maternal:'Mother\'s last name',
-    name:'Name',
-    noRecords:'No records',
-    notifications: {
-        deleted:'Notification deleted',
-        description:'User notifications',
-        notFound:'Notification not found',
-        title:'Notifications',
-    },
-    password:'Password',
-    passwordConfirmation:'Confirm Password',
-    passwordCurrent:'Current Password',
-    paternal:'Paternal surname',
-    phone:'Phone Number',
-    photo: {
-        new: 'Select A New Photo',
-        remove:'Remove Photo',
-        title:'Photo',
-    },
-    profile:'Profile',
-    readed:'Readed',
-    register: {
-        agree:'I agree to the',
-        privacy:'Privacy Policy',
-        signUp:'Sign Up',
-        terms:'Terms of Service',
-    },
-    role:'Role',
-    roles:{
-        create: {
-            title: 'Create role',
-            description: 'These roles will be used to give permissions in the system.',
-            onSuccess: 'Role successfully created',
-            onError: 'Error when creating the role',
-        },
-        deleted:'Role deleted',
-        title: 'Roles',
-    },
-    save:'Save',
-    saved:'Saved!',
-    search:'Search',
-    show: {
-        all:'Show All',
-        title:'Show',
-    },
-    startDate:'Start date',
-    status:'Status',
-    terms: {
-        agree:'I agree to the',
-        privacy:'Privacy Policy',
-        service:'Terms of Service',
-    },
-    unknown:'Unknown',
-    update:'Update',
-    updated:'Updated',
-    updateFail:'Error while updating',
-    unreaded:'Unreaded',
-    user:'User',
-    users:{
-        create:{
-            title:'Create user',
-            description:'Allows you to create new users. Don\'t forget to give them roles so that they can access the desired parts of the system.',
-            onSuccess:'User created',
-            onError:'An error occurred while creating the user',
-        },
-        deleted:'User deleted',
-        notFount:'User not found',
-        password: {
-            description:'Allows users\' passwords to be updated',
-            title:'Update password',
-        },
-        roles: {
-            description:'Updates user roles, allowing or denying access to certain areas.',
-            error:{
-                min:'Select at least one role'
-            },
-            title:'Roles',
-        },
-        select:'Select a user',
-        settings:'User setting',
-        system:'System users',
-        title:'Users',
-    },
-    version:'Version',
-}
\ No newline at end of file
diff --git a/src/lang/es.js b/src/lang/es.js
deleted file mode 100644
index d410a72..0000000
--- a/src/lang/es.js
+++ /dev/null
@@ -1,528 +0,0 @@
-import { success } from "toastr";
-
-export default {
-    '&':'y',
-    account: {
-        delete: {
-            confirm:'¿Está seguro de que quiere eliminar su cuenta? Una vez eliminada su cuenta, todos sus recursos y datos se borrarán permanentemente. Por favor, introduzca su contraseña para confirmar que desea eliminar permanentemente su cuenta.',
-            description:'Eliminar permanentemente su cuenta.',
-            onDelete:'Una vez eliminada su cuenta, todos sus recursos y datos se borrarán permanentemente. Antes de eliminar su cuenta, descargue los datos o la información que desee conservar.',
-            title:'Eliminar cuenta',
-        },
-        email: {
-            notifySendVerification:'Se ha enviado un nuevo enlace de verificación a su dirección de correo electrónico.',
-            sendVerification:'Haga clic aquí para volver a enviar el correo electrónico de verificación.',
-            unverify: 'Su dirección de correo electrónico no está verificada.',
-        },
-        manage:'Administrar cuenta',
-        password: {
-            description:'Asegúrese de que su cuenta utiliza una contraseña larga y aleatoria para estar seguro.',
-            new:'Nueva contraseña',
-            reset:'Restaurar contraseña',
-            secure:'Esta es una zona segura de la aplicación. Confirme su contraseña antes de continuar.',
-            update: 'Actualizar contraseña',
-            updated:'Contraseña actualizada',
-            verify:'Por su seguridad, confirme su contraseña para continuar.',
-        },
-        profile: {
-            description:'Actualice la información del perfil de su cuenta y su dirección de correo electrónico.',
-            title:'Información del perfil',
-            updated:'Perfil actualizado',
-        },
-        sessions: {
-            confirm:'Por favor, introduzca su contraseña para confirmar que desea salir de sus otras sesiones de navegación en todos sus dispositivos.',
-            description: 'Gestiona y cierra tus sesiones activas en otros navegadores y dispositivos.',
-            last:'Último activo',
-            logout:'Cerrar otras sesiones del navegador',
-            done:'Sesiones cerradas',
-            onLogout:'Si es necesario, puede cerrar la sesión de todos sus otros navegadores en todos sus dispositivos. A continuación se enumeran algunas de sus sesiones recientes; sin embargo, esta lista puede no ser exhaustiva. Si crees que tu cuenta ha sido comprometida, también deberías actualizar tu contraseña.',
-            this: 'Dispositivo actual',
-            title: 'Sesiones del navegador',
-        },
-        twoFactor: {
-            codes:{
-                regenerate:'Regenerar los códigos de recuperación',
-                show:'Mostrar códigos de recuperación',
-                store:'Guarde estos códigos de recuperación en un gestor de contraseñas seguro. Pueden utilizarse para recuperar el acceso a su cuenta si se pierde su dispositivo de autenticación de dos factores.',
-            },
-            description:'Añada seguridad adicional a su cuenta mediante la autenticación de dos factores.',
-            isEnable:'Ha activado la autenticación de dos factores.',
-            isNotEnable:{
-                title:'No ha activado la autenticación de dos factores.',
-                description:'Cuando la autenticación de dos factores está activada, se le pedirá un token seguro y aleatorio durante la autenticación. Puedes recuperar este token desde la aplicación Google Authenticator de tu teléfono.',
-            },
-            key:'Llave de configuración',
-            login: {
-                onAuth: 'Por favor, confirme el acceso a su cuenta introduciendo el código de autentificación proporcionado por su aplicación de autentificación.',
-                onRecovery: 'Confirme el acceso a su cuenta introduciendo uno de sus códigos de recuperación de emergencia.',
-            },
-            onFinish:'Termina de habilitar la autenticación de dos factores.',
-            qr: {
-                isConfirmed: 'La autenticación de dos factores ya está activada. Escanee el siguiente código QR con la aplicación de autenticación de su teléfono o introduzca la clave de configuración.',
-                onConfirmed: 'Para terminar de habilitar la autenticación de dos factores, escanea el siguiente código QR utilizando la aplicación de autenticación de tu teléfono o introduce la clave de configuración y proporciona el código OTP generado.',
-            },
-            recovery: {
-                code: 'Código de recuperación',
-                useAuth: 'Utilizar un código de autentificación',
-                useCode: 'Utiliza un código de recuperación',
-            },
-            title:'Autenticación de dos factores',
-        },
-        title: 'Cuenta',
-    },
-    actions:'Acciones',
-    activity:'Actividad',
-    add: 'Agregar',
-    admin: {
-        title: 'Administración',
-        activity: {
-            title: 'Historial de acciones',
-            description: 'Historial de acciones realizadas por los usuarios en orden cronológico.'
-        },
-        products: {
-            name: 'Productos',
-            title: 'Productos',
-            description: 'Gestión del catálogo de productos',
-            create: {
-                title: 'Crear producto',
-                description: 'Permite crear un nuevo producto en el catálogo con sus clasificaciones y atributos personalizados.'
-            },
-            edit: {
-                title: 'Editar producto',
-                description: 'Actualiza la información del producto, sus clasificaciones y atributos.'
-            }
-        }
-    },
-    app: {
-        theme: {
-            dark: 'Tema oscuro',
-            light: 'Tema claro'
-        }
-    },
-    approve: 'Aprobar',
-    assigned_budget: 'Presupuesto asignado',
-    available_budget: 'Presupuesto disponible',
-    assistances: {
-        create: {
-            title: 'Generar asistencia',
-            description: 'Genera una instantánea del Head Count actual de los empleados, por planta y por línea de producción.',
-        },
-        title: 'Asistencias',
-    },
-    auth: {
-        confirmPassword: {
-            description: 'Esta es una zona segura de la aplicación. Por favor, confirma tu contraseña antes de continuar.',
-            title: 'Confirmar contraseña',
-        },
-        forgotPassword: {
-            ask: '¿Olvidaste tu contraseña?',
-            description: '¿Ha olvidado su contraseña? No hay problema. Sólo tienes que indicarnos tu dirección de correo electrónico y te enviaremos un enlace para restablecer la contraseña que te permitirá elegir una nueva.',
-            sendLink: 'Enviar enlace de recuperación',
-            title: 'Contraseña olvidada',
-            success: 'Se ha enviado un enlace de recuperación a su dirección de correo electrónico.',
-            error: 'Error al enviar el enlace de recuperación, intente más tarde.',
-        },
-        login: 'Iniciar sesión',
-        logout: 'Cerrar sesión',
-        register: {
-            already: '¿Ya estas registrado?',
-            me: 'Registrarme',
-        },
-        reset: {
-            success: 'Contraseña actualizada',
-            title: 'Restaurar contraseña',
-        },
-        remember: 'Recuerdame',
-        verifyEmail: {
-            beforeContinue: 'Antes de continuar, ¿podrías verificar tu correo electrónico haciendo clic en el enlace que acabamos de enviar a ti? Si no recibiste el correo electrónico, estaremos encantados de enviarte otro.',
-            sendLink: 'Enviar correo de verificación',
-            title: 'Verificación de correo electrónico',
-            notifySendVerification: 'Se ha enviado un nuevo enlace de verificación a su dirección de correo electrónico.',
-        },
-    },
-    author:'Autor',
-    code:'Código',
-    contracted_at: 'Fecha contratación',
-    cancel:'Cancelar',
-    changes:'Cambios',
-    changelogs: {
-        title:'Historial de cambios',
-        description: 'Lista de los cambios realizados al sistema.',
-    },
-    certification_name: 'Nombre de certificación',
-    certification_type: 'Tipo de certificación',
-    clear: 'Limpiar',
-    close:"Cerrar",
-    company: 'Empresa',
-    confirm:'Confirmar',
-    copyright:'Todos los derechos reservados.',
-    contact:'Contacto',
-    cost: 'Costo',
-    courses: {
-        title: 'Cursos',
-        description: 'Gestión de cursos de capacitación'
-    },
-    create: 'Crear',
-    created: 'Registro creado',
-    created_at: 'Fecha creación',
-    crud: {
-        create: 'Nuevo registro',
-        edit: 'Editar registro',
-        destroy: 'Eliminar registro',
-        show: 'Más detalles',
-        import: 'Importación'
-    },
-    currency: 'Moneda',
-    dashboard: 'Dashboard',
-    date: 'Fecha',
-    date_expiration: 'Fecha de expiración',
-    date_obtained: 'Fecha de obtención',
-    department: 'Departamento',
-    dates: {
-        start: 'Fecha Inicial',
-        end: 'Fecha Final'
-    },
-    days: {
-        title: 'Día',
-        monday: 'Lunes',
-        tuesday: 'Martes',
-        wednesday: 'Miércoles',
-        thursday: 'Jueves',
-        friday: 'Viernes',
-        saturday: 'Sábado',
-        sunday: 'Domingo'
-    },
-    delete:{
-        confirm: 'Al presionar ELIMINAR el registro se eliminará permanentemente y no podrá recuperarse.',
-        title: 'Eliminar',
-    },
-    degreeType: 'Tipo de grado',
-    deleted:'Registro eliminado',
-    description:'Descripción',
-    duration: 'Duración',
-    details:'Detalles',
-    disable:'Deshabilitar',
-    disabled:'Deshabilitado',
-    done:'Hecho.',
-    edit:'Editar',
-    edited:'Registro creado',
-    active:'Activo',
-    inactive:'Inactivo',
-    email:{
-        title:'Correo',
-        verification:'Verificar correo'
-    },
-    exam_date: 'Fecha de examen',
-    employees: {
-        create: {
-            title: 'Crear empleado',
-        },
-        edit: {
-            title: 'Editar empleado',
-        },
-        title: 'Empleados'
-    },
-    enable:'Habilitar',
-    enabled:'Habilitado',
-    endDate:'Fecha Fin',
-    event:'Evento',
-    event_name: 'Nombre del evento',
-    files: {
-        excel: 'Archivo excel',
-        select: 'Seleccionar archivo'
-    },
-    help: {
-        description:'A continuación se lista la iconografía para entender el funcionamiento del sistema.',
-        home: 'Volver a la pagina de inicio.',
-        title:'Ayuda',
-    },
-    headquarter: 'Sede',
-    hire_date: 'Fecha de contratación',
-    institution: 'Institución',
-    history: {
-        title:'Historial de acciones',
-        description:'Historial de acciones realizadas por los usuarios en orden cronológico.'
-    },
-    home:'Inicio',
-    hour:'Hora',
-    icon:'Icono',
-    import: 'Importar',
-    items: 'Elementos',
-    location: 'Ubicación',
-    maternal:'Apellido materno',
-    message:'Mensaje',
-    menu:'Menú',
-    name:'Nombre',
-    noRecords:'Sin registros',
-    number: 'Número',
-    notification:'Notificación',
-    notifications: {
-        unreadClosed:'Ocultas',
-        readed:'Marcar como leído',
-        deleted:'Notificación eliminada',
-        description:'Notificaciones del usuario',
-        notFound:'Notificación no encontrada',
-        title:'Notificaciones',
-        seeAll:'Ver todas',
-    },
-    omitted:'Omitida',
-    participants_count: 'Cantidad de participantes',
-    password:'Contraseña',
-    passwordConfirmation:'Confirmar contraseña',
-    passwordCurrent:'Contraseña actual',
-    passwordReset:'Restaurar contraseña',
-    paternal:'Apellido paterno',
-    petty_cash: {
-        title: 'Caja Chica',
-        description: 'Gestión de caja chica para gastos menores'
-    },
-    pettyCashes: {
-        create: {
-            description: 'Crea una nueva caja chica para gestión de gastos menores'
-        },
-        edit: {
-            description: 'Modifica los datos de la caja chica seleccionada'
-        }
-    },
-    phone:'Teléfono',
-    photo: {
-        new: 'Seleccionar una nueva foto',
-        remove:'Remover foto',
-        title:'Foto',
-    },
-    plant: 'Continente',
-    plants: {
-        create: {
-            title: 'Crear continente',
-        },
-        edit: {
-            title: 'Editar continente',
-        },
-        title: 'Continentes'
-    },
-    'production-line': 'Línea de producción',
-    'production-lines': {
-        create: {
-            title: 'Crear línea de producción',
-        },
-        edit: {
-            title: 'Editar línea de producción',
-        },
-        title: 'Líneas de producción'
-    },
-    profile:'Perfil',
-    readed:'Leído',
-    read_at:'Fecha leído',
-    refresh: 'Recargar',
-    register: {
-        create: {
-            onError: 'Error al crear el registro',
-            onSuccess: 'Registro creado',
-        },
-        edit: {
-            onError: 'Error al actualizar el registro',
-            onSuccess: 'Registro actualizado',
-        },
-        agree:'Estoy de acuerdo con los',
-        privacy:'Política de Privacidad',
-        signUp:'Registrarme',
-        terms:'Términos de Servicio',
-    },
-    registers:{
-        title:'Registros',
-        empty:'Sin registros',
-    },
-    remove: 'Remover',
-    reports: {
-        description: 'Listado de reportes del sistema.',
-        plants: {
-            title: 'Reporte de empleados por continente',
-            description: 'Este reporte muestra el número de empleados contratados, por continente y línea de producción en función del tiempo.',
-        },
-        productionLines: {
-            title: 'Reporte de empleados por línea de producción',
-            description: 'Este reporte muestra el número de empleados contratados, por línea de producción y continente en función del tiempo.',
-        },
-        title: 'Reportes',
-    },
-    return: 'Regresar',
-    role:'Rol',
-    roles:{
-        create: {
-            title: 'Crear rol',
-            description: 'Este nombre sera necesario para identificar el rol en el sistema. Procura que sea algo simple.',
-            onSuccess: 'Rol creado exitosamente',
-            onError: 'Error al crear el role',
-        },
-        deleted:'Rol eliminado',
-        edit: {
-            title: 'Editar rol',
-            onSuccess: 'Rol actualizado exitosamente',
-            onError: 'Error al actualizar el role',
-        },
-        update: {
-            description: 'Si crees necesario, puedes actualizar el nombre del rol. No afecta a los permisos.',
-        },
-        title: 'Roles',
-        description: 'Gestión de roles del sistema. Puedes crear los roles con los permisos que necesites.',
-        permissions: {
-            title: 'Permisos',
-            description: 'Permisos del rol.',
-        }
-    },
-    save:'Guardar',
-    saved:'¡Guardado!',
-    search:'Buscar',
-    selected: 'Seleccionado',
-    select: 'Seleccionar',
-    server: {
-        api: {
-            noAvailable: 'No se encontró el servidor API.'
-        }
-    },
-    session: {
-        closed: 'Sesión cerrada',
-    },
-    setting: 'Configuración',
-    settings: {
-        assistances: {
-            snapshot: {
-                title: 'Captura instantánea del Head Count',
-                description: 'Esta captura genera un resumen del número de empleados contratados, por planta y por línea de producción en un momento específico.',
-            }
-        },
-        title: 'Ajustes',
-    },
-    sex: 'Género',
-    shift: 'Turno',
-    shifts: {
-        create: {
-            title: 'Crear turno'
-        },
-        edit: {
-            title: 'Editar turno'
-        },
-        title: 'Turnos'
-    },
-    show: {
-        all:'Mostrar todo',
-        title:'Mostrar',
-    },
-    startDate:'Fecha de inicio',
-    status:'Estado',
-    system:{
-        title:'Núcleo de Holos',
-    },
-    target: {
-        title: 'Meta',
-        total: 'Meta total'
-    },
-    technology: 'Tecnología',
-    technologies: {
-        create: {
-            title: 'Crear tecnología',
-        },
-        edit: {
-            title: 'Editar tecnología',
-        },
-        title: 'Tecnologías'
-    },
-    terms: {
-        agree:'Estoy de acuerdo con los',
-        privacy:'Política de privacidad',
-        service:'Términos de servicio',
-    },
-    time: {
-        start: 'Hora inicial',
-        end: 'Hora final',
-    },
-    title: 'Título',
-    total: 'Total',
-    unknown:'Desconocido',
-    update:'Actualizar',
-    updated:'Actualizado',
-    updated_at:'Fecha actualización',
-    updateFail:'Error al actualizar',
-    unreaded:'No leído',
-    url: 'URL',
-    user:'Usuario',
-    users:{
-        academic: {
-            create: {
-                certification: {
-                    description: 'Permite agregar nuevas certificaciones profesionales al historial académico del usuario.',
-                    title: 'Crear certificación'
-                },
-                record: {
-                    description: 'Permite agregar nuevos grados académicos al historial del usuario.',
-                    title: 'Crear registro académico'
-                }
-            },
-            edit: {
-                certification: {
-                    description: 'Permite modificar los datos de la certificación profesional seleccionada.',
-                    title: 'Editar certificación'
-                },
-                record: {
-                    description: 'Permite modificar los datos del registro académico seleccionado.',
-                    title: 'Editar registro académico'
-                }
-            }
-        },
-        activity: {
-            title: 'Actividad del usuario',
-            description: 'Historial de acciones realizadas por el usuario.',
-        },
-        create:{
-            title:'Crear usuario',
-            description:'Permite crear nuevos usuarios. No olvides otorgarle roles para que pueda acceder a las partes del sistema deseados.',
-            onSuccess:'Usuario creado',
-            onError:'Ocurrió un error al crear el usuario'
-        },
-        deleted:'Usuario eliminado',
-        description: 'Gestión de información general de empleados',
-        remove: 'Remover usuario',
-        edit: {
-            title: 'Editar usuario'
-        },
-        update: {
-            description: 'Actualiza los datos del usuario.',
-            onError: 'Error al actualizar el usuario',
-            onSuccess: 'Usuario actualizado',
-        },
-        notFount:'Usuario no encontrado',
-        password: {
-            description:'Permite actualizar las contraseñas de los usuarios sobre escribiéndola.',
-            title:'Actualizar contraseña',
-        },
-        roles: {
-            description:'Actualiza los roles de los usuarios, permitiendo o denegando los accesos a determinadas áreas.',
-            error:{
-                min:'Seleccionar mínimo un role'
-            },
-            title:'Roles de usuario',
-        },
-        online: {
-            description: 'Lista de usuarios conectados al sistema.',
-            title: 'Usuarios conectados',
-            count: 'Usuarios conectados.',
-        },
-        menu:'Menú de usuario',
-        select:'Seleccionar un usuario',
-        settings:'Ajustes del usuario',
-        system:'Usuarios del sistema',
-        title:'Usuarios',
-    },
-    version:'Versión',
-    welcome: 'Bienvenido',
-    workstation: 'Puesto de trabajo',
-    workstations: {
-        create: {
-            title: 'Crear puesto de trabajo',
-        },
-        edit: {
-            title: 'Editar puesto de trabajo',
-        },
-        title: 'Puestos de trabajos'
-    },
-}
\ No newline at end of file
diff --git a/src/lang/i18n.js b/src/lang/i18n.js
deleted file mode 100644
index dc03d28..0000000
--- a/src/lang/i18n.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createI18n } from 'vue-i18n';
-import en from './en.js';
-import es from './es.js';
-
-/**
- * Idioma local
- */
-const locale = document.documentElement.lang;
-
-const messages = {
-  en,
-  es
-}
-
-const i18n = createI18n({
-  legacy: false,
-  locale,
-  fallbackLocale: locale,
-  messages
-});
-
-function lang(text, params = {}) {
-  return i18n.global.t(text, params);
-}
-
-export {
-  i18n,
-  lang
-};
\ No newline at end of file
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
deleted file mode 100644
index c7b5031..0000000
--- a/src/layouts/AdminLayout.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<script setup>
-import { onMounted } from 'vue';
-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';
-import Section from '@Holos/Skeleton/Sidebar/Section.vue';
-import DropDown from '@Holos/Skeleton/Sidebar/Drop.vue'
-
-/** Definidores */
-const loader = useLoader()
-const router = useRouter();
-
-/** Propiedades */
-defineProps({
-    title: String,
-});
-
-/** Ciclos */
-onMounted(() => {
-    loader.boot()
-
-    if(!hasToken()) {
-        return router.push({ name: 'auth.index' })
-    } else {
-        reloadApp();
-    }
-})
-
-</script>
-
-<template>
-    <Layout
-        :title="title"
-    >
-    
-        <template #leftSidebar>
-            <Section name="Principal">
-                <Link
-                    icon="grid_view"
-                    name="Dashboard" 
-                    to="admin.dashboard.index"
-                />
-                <DropDown 
-                    icon="people"
-                    name="Usuarios" 
-                    to="admin.users.index"
-                    :collapsed="true"
-                >
-                    <Link
-                        icon="school"
-                        name="Historial Académico" 
-                        to="admin.users.academic.index"
-                    />
-                    <Link
-                        icon="security"
-                        name="Seguridad y Salud" 
-                        to="admin.users.security"
-                    />
-                    <Link
-                        icon="info"
-                        name="Información Adicional" 
-                        to="admin.users.additional"
-                    />
-                </DropDown>
-            </Section>
-            <Section name="Vacaciones">
-                <Link
-                    icon="grid_view"
-                    name="Vacaciones" 
-                    to="admin.vacations.index"
-                />
-            </Section>
-
-            <Section name="Almacén">
-                <Link
-                    icon="grid_view"
-                    name="Almacén" 
-                    to="admin.warehouses.index"
-                />
-                <Link
-                    icon="tag"
-                    name="Clasificaciones de almacenes" 
-                    to="admin.warehouse-classifications.index"
-                />
-                <Link
-                    icon="straighten"
-                    name="Unidades de medida" 
-                    to="admin.units-measure.index"
-                />
-            </Section>
-            <Section name="Comercial">
-                <Link
-                    icon="bookmarks"
-                    name="Clasificaciones Comerciales" 
-                    to="admin.comercial-classifications.index"
-                />
-                <Link
-                    icon="inventory"
-                    name="Productos" 
-                    to="admin.products.index"
-                />
-                <Link
-                    icon="sell"
-                    name="Punto de venta" 
-                    to="admin.pos.index"
-                    />
-            </Section>
-                     
-            <Section name="Capacitaciones">
-                <DropDown
-                    icon="grid_view"
-                    name="Cursos" 
-                    to="admin.courses.index"
-                    :collapsed="true"
-                >
-                    <Link
-                        icon="grid_view"
-                        name="Solicitud de Cursos" 
-                        to="admin.courses.request"
-                    />
-                    <Link
-                        icon="grid_view"
-                        name="Calendario de Cursos" 
-                        to="admin.courses.calendar"
-                    />
-                </DropDown>
-            </Section>
-            <Section name="Eventos">
-                <DropDown
-                    icon="grid_view"
-                    name="Eventos" 
-                    to="admin.events.index"
-                    :collapsed="true"
-                >
-                    <Link
-                        icon="grid_view"
-                        name="Cajas Chicas" 
-                        to="admin.events.pettyCashes"
-                    />
-                    <Link
-                        icon="grid_view"
-                        name="Asignación de presupuesto" 
-                        to="admin.events.pettyCashes.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')"
-                :name="$t('admin.title')"
-            >
-                <Link
-                    v-if="hasPermission('roles.index')"
-                    icon="license"
-                    name="Roles" 
-                    to="admin.roles.index"
-                />
-                <Link
-                    v-if="hasPermission('activities.index')"
-                    icon="event"
-                    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 />
-        <!-- Fin contenido -->
-    </Layout>
-</template>
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
deleted file mode 100644
index 4681d7c..0000000
--- a/src/layouts/AppLayout.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<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';
-import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
-import Section from '@Holos/Skeleton/Sidebar/Section.vue';
-
-/** Definidores */
-const loader = useLoader()
-const router = useRouter();
-
-/** Propiedades */
-defineProps({
-    title: String,
-});
-
-/** Ciclos */
-onMounted(() => {
-    loader.boot()
-
-    if(!hasToken()) {
-        return router.push({ name: 'auth.index' })
-    } else {
-        reloadApp();
-    }
-})
-
-</script>
-
-<template>
-    <Layout
-        :title="title"
-    >
-        <template #leftSidebar>
-            <Section name="Principal">
-                <Link
-                    icon="monitoring"
-                    name="Dashboard" 
-                    to="dashboard.index"
-                />
-                <Link
-                    icon="calendar_month"
-                    name="Vacaciones" 
-                    to="vacations.index"
-                />
-                <Link
-                    icon="info"
-                    name="Cursos" 
-                    to="courses.index"
-                />
-                <Link
-                    icon="person"
-                    name="Perfil" 
-                    to="profile.show"
-                />
-            </Section>
-            <Section
-                :name="$t('admin.title')"
-            >
-            </Section>
-        </template>
-        <!-- Contenido -->
-        <RouterView />
-        <!-- Fin contenido -->
-    </Layout>
-</template>
diff --git a/src/layouts/CoordinatorLayout.vue b/src/layouts/CoordinatorLayout.vue
deleted file mode 100644
index b73cada..0000000
--- a/src/layouts/CoordinatorLayout.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<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';
-import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
-import Section from '@Holos/Skeleton/Sidebar/Section.vue';
-
-/** Definidores */
-const loader = useLoader()
-const router = useRouter();
-
-/** Propiedades */
-defineProps({
-    title: String,
-});
-
-/** Ciclos */
-onMounted(() => {
-    loader.boot()
-
-    if(!hasToken()) {
-        return router.push({ name: 'auth.index' })
-    } else {
-        reloadApp();
-    }
-})
-
-</script>
-
-<template>
-    <Layout
-        :title="title"
-    >
-        <template #leftSidebar>
-            <Section name="Principal">
-                <Link
-                    icon="monitoring"
-                    name="Dashboard" 
-                    to="coordinator.dashboard.index"
-                />
-                <Link
-                    icon="calendar_month"
-                    name="Vacaciones" 
-                    to="vacations.coordinator.index"
-                />
-                <Link
-                    icon="info"
-                    name="Solicitud de Cursos" 
-                    to="courses.coordinator.index"
-                />
-            </Section>
-            <Section
-                :name="$t('admin.title')"
-            >
-            </Section>
-        </template>
-        <!-- Contenido -->
-        <RouterView />
-        <!-- Fin contenido -->
-    </Layout>
-</template>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..81fff8d
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,56 @@
+import "./assets/styles/main.css";
+
+import Aura from "@primeuix/themes/aura";
+import { definePreset } from "@primeuix/themes";
+import PrimeVue from "primevue/config";
+import ConfirmationService from 'primevue/confirmationservice';
+import ToastService from 'primevue/toastservice';
+import StyleClass from "primevue/styleclass";
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+import router from "./router";
+import { useAuth } from "./modules/auth/composables/useAuth";
+
+// Crear un preset personalizado basado en Aura con color azul
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: "{blue.50}",
+            100: "{blue.100}",
+            200: "{blue.200}",
+            300: "{blue.300}",
+            400: "{blue.400}",
+            500: "{blue.500}",
+            600: "{blue.600}",
+            700: "{blue.700}",
+            800: "{blue.800}",
+            900: "{blue.900}",
+            950: "{blue.950}"
+        }
+    }
+});
+
+const app = createApp(App);
+const pinia = createPinia();
+
+// Inicializar autenticación desde localStorage
+const { initAuth } = useAuth();
+initAuth();
+
+app.use(pinia);
+app.use(router);
+app.use(ConfirmationService);
+app.use(ToastService);
+app.use(PrimeVue, {
+    theme: {
+        preset: MyPreset,
+        options: {
+            darkModeSelector: ".p-dark",
+        },
+    },
+});
+
+app.directive("styleclass", StyleClass);
+
+app.mount("#app");
\ No newline at end of file
diff --git a/src/modules/auth/components/Login.vue b/src/modules/auth/components/Login.vue
new file mode 100644
index 0000000..b28fc56
--- /dev/null
+++ b/src/modules/auth/components/Login.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAuth } from '../composables/useAuth';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const { login, isLoading } = useAuth();
+
+const email = ref('');
+const password = ref('');
+const showPassword = ref(false);
+const errorMessage = ref('');
+
+const isFormValid = computed(() => {
+    return email.value.trim() !== '' && password.value.trim() !== '';
+});
+
+const handleLogin = async () => {
+    errorMessage.value = '';
+    
+    const result = await login({
+        email: email.value,
+        password: password.value
+    });
+    
+    if (result.success) {
+        router.push('/');
+    } else {
+        errorMessage.value = result.error || 'Error al iniciar sesión';
+    }
+};
+
+const handleKeyPress = (event: KeyboardEvent) => {
+    if (event.key === 'Enter' && isFormValid.value) {
+        handleLogin();
+    }
+};
+</script>
+
+<template>
+    <div class="flex min-h-screen bg-surface-50 dark:bg-surface-950">
+        <!-- Left Column: Image Panel -->
+        <div 
+            class="relative hidden lg:flex lg:w-1/2 flex-col justify-between p-8 text-white bg-cover bg-center bg-no-repeat"
+            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBTdTKvMQYppS4BwZhrgylD8oKxLJa13js2PIRUwAQF5XbEqqNU2VCYyvJEQTWdKdoCTYHiAm_RGoobkJ3Rt4xd-XJUcshYKfCBrF0fZcBJOFR9UJ0Vh2WuLIA8g_xmKA8Fn7hdh4KPqJC7X_IOg5UPi5RRzqxB-Xn2tMbaEk-n1h8mYXfnKSIV7C0up-YreeZdP9GeznZN6DCzjy8TLyxw03gXdmhHziZC6hzahwWemMrtS8W5sX028-G1tnxivu1v2o8oETFyh5Wi')"
+        >
+            <!-- Overlay oscuro -->
+            <div class="absolute inset-0 bg-black/50"></div>
+            
+            <!-- Logo y nombre -->
+            <div class="relative z-10 flex items-center gap-3">
+                <i class="pi pi-box text-4xl"></i>
+                <span class="text-xl font-bold">Golscontrols ERP</span>
+            </div>
+            
+            <!-- Texto principal -->
+            <div class="relative z-10">
+                <h1 class="text-4xl font-black leading-tight tracking-tight">
+                    Sistema Integral de Gestión Empresarial
+                </h1>
+                <p class="mt-2 max-w-md text-lg text-white/80">
+                    Optimiza tus operaciones, gestiona inventarios y aumenta la eficiencia desde un solo panel.
+                </p>
+            </div>
+        </div>
+
+        <!-- Right Column: Form Panel -->
+        <div class="flex w-full lg:w-1/2 flex-col items-center justify-center px-4 py-12">
+            <div class="w-full max-w-md space-y-8">
+                <!-- Header -->
+                <div>
+                    <h1 class="text-3xl font-bold tracking-tight text-surface-900 dark:text-white">
+                        Bienvenido de nuevo
+                    </h1>
+                    <p class="mt-2 text-base text-surface-600 dark:text-surface-300">
+                        Ingresa tus credenciales para acceder a tu cuenta.
+                    </p>
+                </div>
+
+                <!-- Mensaje de error -->
+                <Message 
+                    v-if="errorMessage" 
+                    severity="error" 
+                    :closable="true"
+                    @close="errorMessage = ''"
+                >
+                    {{ errorMessage }}
+                </Message>
+
+                <!-- Info de prueba (solo para desarrollo) -->
+                <Message severity="info" :closable="false">
+                    <div class="text-sm">
+                        <p class="font-semibold mb-1">Credenciales de prueba:</p>
+                        <p><strong>Email:</strong> admin@golsystems.com.mx</p>
+                        <p><strong>Password:</strong> P8YeFQggR06r</p>
+                    </div>
+                </Message>
+
+                <!-- Formulario -->
+                <form @submit.prevent="handleLogin" class="space-y-6">
+                    <!-- Email -->
+                    <div class="flex flex-col gap-2">
+                        <label for="email" class="text-sm font-medium text-surface-900 dark:text-surface-200">
+                            Correo Electrónico
+                        </label>
+                        <IconField>
+                            <InputIcon class="pi pi-user" />
+                            <InputText
+                                id="email"
+                                v-model="email"
+                                type="email"
+                                placeholder="you@example.com"
+                                :disabled="isLoading"
+                                @keypress="handleKeyPress"
+                                class="w-full"
+                                autocomplete="email"
+                                size="large"
+                            />
+                        </IconField>
+                    </div>
+
+                    <!-- Password -->
+                    <div class="flex flex-col gap-2">
+                        <label for="password" class="text-sm font-medium text-surface-900 dark:text-surface-200">
+                            Contraseña
+                        </label>
+                        <IconField>
+                            <InputIcon class="pi pi-lock" />
+                            <InputText
+                                id="password"
+                                v-model="password"
+                                :type="showPassword ? 'text' : 'password'"
+                                placeholder="Ingresa tu contraseña"
+                                :disabled="isLoading"
+                                @keypress="handleKeyPress"
+                                class="w-full pr-10"
+                                autocomplete="current-password"
+                                size="large"
+                            />
+                            <button
+                                type="button"
+                                @click="showPassword = !showPassword"
+                                class="absolute right-3 top-1/2 -translate-y-1/2 text-surface-400 hover:text-surface-600 dark:hover:text-surface-200"
+                                tabindex="-1"
+                            >
+                                <i :class="showPassword ? 'pi pi-eye-slash' : 'pi pi-eye'"></i>
+                            </button>
+                        </IconField>
+                    </div>
+
+                    <!-- Botón de Login -->
+                    <Button
+                        type="submit"
+                        label="Iniciar Sesión"
+                        :loading="isLoading"
+                        :disabled="!isFormValid || isLoading"
+                        class="w-full"
+                        size="large"
+                        severity="primary"
+                    />
+                </form>
+
+                <!-- Copyright -->
+                <p class="text-center text-sm text-surface-500 dark:text-surface-400">
+                    © 2025 Grupo Golsystems, Todos los derechos reservados.
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+/* Ajuste para el botón de toggle password */
+.p-iconfield {
+    position: relative;
+}
+</style>
diff --git a/src/modules/auth/composables/useAuth.ts b/src/modules/auth/composables/useAuth.ts
new file mode 100644
index 0000000..312ead7
--- /dev/null
+++ b/src/modules/auth/composables/useAuth.ts
@@ -0,0 +1,133 @@
+import { ref, computed } from 'vue';
+import authService from '../services/authService';
+
+export interface Role {
+    id: number;
+    name: string;
+    guard_name: string;
+    description: string;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface User {
+    id: number;
+    name: string;
+    paternal: string;
+    maternal: string;
+    phone: string | null;
+    email: string;
+    email_verified_at: string | null;
+    current_team_id: number | null;
+    profile_photo_path: string | null;
+    department_id: number | null;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+    rfc: string | null;
+    curp: string | null;
+    nss: string | null;
+    hire_date: string | null;
+    gender_ek: string | null;
+    birthdate: string | null;
+    entity_id: number | null;
+    municipality_id: number | null;
+    marital_status_ek: string | null;
+    children: number | null;
+    address: string | null;
+    vacation_days_available: number;
+    status_ek: string;
+    full_name: string;
+    last_name: string;
+    profile_photo_url: string;
+    roles?: Role[];
+}
+
+export interface LoginCredentials {
+    email: string;
+    password: string;
+}
+
+// Estado global de autenticación
+const user = ref<User | null>(null);
+const token = ref<string | null>(null);
+const isLoading = ref(false);
+
+// Inicializar desde localStorage
+const initAuth = () => {
+    try {
+        const storedToken = localStorage.getItem('auth_token');
+        const storedUser = localStorage.getItem('auth_user');
+        
+        if (storedToken && storedUser && storedUser !== 'undefined') {
+            token.value = storedToken;
+            user.value = JSON.parse(storedUser);
+        }
+    } catch (error) {
+        console.error('Error al inicializar autenticación:', error);
+        // Limpiar localStorage si hay datos corruptos
+        localStorage.removeItem('auth_token');
+        localStorage.removeItem('auth_user');
+    }
+};
+
+// Computeds
+const isAuthenticated = computed(() => !!user.value && !!token.value);
+
+// Función de login usando authService
+const login = async (credentials: LoginCredentials): Promise<{ success: boolean; error?: string }> => {
+    isLoading.value = true;
+    
+    try {
+        // Llamar al servicio de autenticación
+        const response = await authService.login(credentials);
+        
+        // Guardar en estado
+        user.value = response.user;
+        token.value = response.token;
+        
+        // Persistir en localStorage
+        localStorage.setItem('auth_token', response.token);
+        localStorage.setItem('auth_user', JSON.stringify(response.user));
+        
+        return { success: true };
+    } catch (error: any) {
+        console.error('Error en login:', error);
+        return { 
+            success: false, 
+            error: error.message || 'Error al iniciar sesión'
+        };
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+// Función de logout
+const logout = async () => {
+    // Limpiar estado local inmediatamente para reactividad
+    user.value = null;
+    token.value = null;
+    localStorage.removeItem('auth_token');
+    localStorage.removeItem('auth_user');
+    
+    try {
+        // Notificar al backend (en segundo plano)
+        await authService.logout();
+    } catch (error) {
+        console.error('Error al cerrar sesión en backend:', error);
+        // El logout local ya se completó, solo loggeamos el error
+    }
+};
+
+// Composable para usar en componentes
+export const useAuth = () => {
+    return {
+        user,
+        token,
+        isLoading,
+        isAuthenticated,
+        login,
+        logout,
+        initAuth
+    };
+};
diff --git a/src/modules/auth/services/authService.ts b/src/modules/auth/services/authService.ts
new file mode 100644
index 0000000..a93edfb
--- /dev/null
+++ b/src/modules/auth/services/authService.ts
@@ -0,0 +1,148 @@
+import api from '../../../services/api';
+import type { User, LoginCredentials, Role } from '../composables/useAuth';
+
+export interface LoginResponse {
+    status: string;
+    data: {
+        user: User;
+        userRoles: Role[];
+        token: string;
+    };
+}
+
+export interface RegisterData {
+    name: string;
+    email: string;
+    password: string;
+    password_confirmation: string;
+}
+
+class AuthService {
+    /**
+     * Iniciar sesión
+     */
+    async login(credentials: LoginCredentials): Promise<{ user: User; token: string }> {
+        try {
+            const response = await api.post<LoginResponse>('/api/auth/login', {
+                email: credentials.email,
+                password: credentials.password
+            });
+            
+            // Retornar solo user y token para mantener compatibilidad con useAuth
+            return {
+                user: response.data.data.user,
+                token: response.data.data.token
+            };
+        } catch (error: any) {
+            console.error('Error en login:', error);
+            
+            // Manejar errores de validación (422)
+            if (error.response?.status === 422 && error.response?.data?.errors) {
+                const errors = error.response.data.errors;
+                const firstError = Object.values(errors)[0] as string[];
+                throw new Error(firstError[0] || error.response.data.message);
+            }
+            
+            // Manejar otros errores
+            throw new Error(error.response?.data?.message || 'Error al iniciar sesión');
+        }
+    }
+
+    /**
+     * Registrar nuevo usuario
+     */
+    async register(data: RegisterData): Promise<LoginResponse> {
+        try {
+            const response = await api.post<LoginResponse>('/auth/register', data);
+            return response.data;
+        } catch (error: any) {
+            throw new Error(error.response?.data?.message || 'Error al registrar usuario');
+        }
+    }
+
+    /**
+     * Cerrar sesión
+     */
+    async logout(): Promise<void> {
+        try {
+            const response = await api.post<{
+                status: string;
+                data: {
+                    is_revoked: boolean;
+                };
+            }>('/api/auth/logout');
+            
+            console.log('Respuesta logout:', response.data);
+            
+            if (response.data.status === 'success' && response.data.data.is_revoked) {
+                console.log('Token revocado exitosamente');
+            }
+        } catch (error: any) {
+            console.error('Error al cerrar sesión:', error);
+            // No lanzar error para que el logout local continúe aunque falle el backend
+        }
+    }
+
+    /**
+     * Obtener usuario actual
+     */
+    async getCurrentUser(): Promise<User> {
+        try {
+            const response = await api.get<User>('/auth/me');
+            return response.data;
+        } catch (error: any) {
+            throw new Error(error.response?.data?.message || 'Error al obtener usuario');
+        }
+    }
+
+    /**
+     * Actualizar perfil de usuario
+     */
+    async updateProfile(data: Partial<User>): Promise<User> {
+        try {
+            const response = await api.put<User>('/auth/profile', data);
+            return response.data;
+        } catch (error: any) {
+            throw new Error(error.response?.data?.message || 'Error al actualizar perfil');
+        }
+    }
+
+    /**
+     * Cambiar contraseña
+     */
+    async changePassword(currentPassword: string, newPassword: string): Promise<void> {
+        try {
+            await api.post('/auth/change-password', {
+                current_password: currentPassword,
+                new_password: newPassword
+            });
+        } catch (error: any) {
+            throw new Error(error.response?.data?.message || 'Error al cambiar contraseña');
+        }
+    }
+
+    /**
+     * Solicitar recuperación de contraseña
+     */
+    async forgotPassword(email: string): Promise<void> {
+        try {
+            await api.post('/auth/forgot-password', { email });
+        } catch (error: any) {
+            throw new Error(error.response?.data?.message || 'Error al solicitar recuperación');
+        }
+    }
+
+    /**
+     * Resetear contraseña con token
+     */
+    async resetPassword(token: string, password: string): Promise<void> {
+        try {
+            await api.post('/auth/reset-password', { token, password });
+        } catch (error: any) {
+            throw new Error(error.response?.data?.message || 'Error al resetear contraseña');
+        }
+    }
+}
+
+export const authService = new AuthService();
+export default authService;
diff --git a/src/modules/blank/Blank.vue b/src/modules/blank/Blank.vue
new file mode 100644
index 0000000..c4355a9
--- /dev/null
+++ b/src/modules/blank/Blank.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="space-y-6">
+
+        <div>
+            <h1 className="text-3xl font-bold tracking-tight text-foreground">
+                Módulo Personalizado
+            </h1>
+            <p className="text-muted-foreground">
+                Este es un módulo en blanco listo para personalizar
+            </p>
+        </div>
+
+        <Card>
+            <template #title>Módulo en Blanco</template>
+            <template #subtitle>Personaliza este módulo según tus necesidades</template>
+            <template #content>
+                <div
+                    className="flex min-h-[400px] items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/20">
+                    <div className="text-center">
+                        <FileStack className="mx-auto h-12 w-12 text-muted-foreground" />
+                        <h3 className="mt-4 text-lg font-semibold">Espacio para tu contenido</h3>
+                        <p className="mt-2 text-sm text-muted-foreground">
+                            Agrega componentes, tablas, formularios o cualquier funcionalidad aquí
+                        </p>
+                    </div>
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>
diff --git a/src/modules/catalog/components/ComercialClassification.vue b/src/modules/catalog/components/ComercialClassification.vue
new file mode 100644
index 0000000..1785b0b
--- /dev/null
+++ b/src/modules/catalog/components/ComercialClassification.vue
@@ -0,0 +1,660 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import Column from 'primevue/column';
+import ConfirmDialog from 'primevue/confirmdialog';
+import DataTable from 'primevue/datatable';
+import Dialog from 'primevue/dialog';
+import Dropdown from 'primevue/dropdown';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import InputSwitch from 'primevue/inputswitch';
+import ProgressSpinner from 'primevue/progressspinner';
+import Toast from 'primevue/toast';
+import { useComercialClassificationStore } from '../stores/comercialClassificationStore';
+import type { ComercialClassification } from '../types/comercialClassification';
+
+const confirm = useConfirm();
+const toast = useToast();
+const classificationStore = useComercialClassificationStore();
+
+interface Category {
+    id: number;
+    code: string;
+    name: string;
+    description: string;
+    parent_id: number | null;
+    is_active: number;
+    created_at: string;
+    subcategories: Category[];
+}
+
+const selectedCategory = ref<Category | null>(null);
+const showCreateModal = ref(false);
+const isSubmitting = ref(false);
+const isEditMode = ref(false);
+const editingId = ref<number | null>(null);
+
+// Computed properties from store
+const loading = computed(() => classificationStore.loading);
+const categories = computed(() => transformClassifications(classificationStore.classifications));
+
+// Form data
+const formData = ref({
+    code: '',
+    name: '',
+    description: '',
+    parent_id: null as number | null,
+    is_active: 1 as number
+});
+
+// Computed para el switch (convierte number a boolean y viceversa)
+const isActiveSwitch = computed({
+    get: () => formData.value.is_active === 1,
+    set: (value: boolean) => {
+        formData.value.is_active = value ? 1 : 0;
+    }
+});
+
+// Transform API data to component structure
+const transformClassifications = (classifications: ComercialClassification[]): Category[] => {
+    return classifications.map(cls => ({
+        id: cls.id,
+        code: cls.code,
+        name: cls.name,
+        description: cls.description || '',
+        parent_id: cls.parent_id,
+        is_active: cls.is_active,
+        created_at: cls.created_at,
+        subcategories: cls.children ? cls.children.map(child => ({
+            id: child.id,
+            code: child.code,
+            name: child.name,
+            description: child.description || '',
+            parent_id: child.parent_id,
+            is_active: child.is_active,
+            created_at: child.created_at,
+            subcategories: []
+        })) : []
+    }));
+};
+
+const loadClassifications = async () => {
+    try {
+        await classificationStore.fetchClassifications();
+        
+        // Select first category by default
+        if (categories.value.length > 0 && categories.value[0]) {
+            selectedCategory.value = categories.value[0];
+        }
+    } catch (error) {
+        console.error('Error loading classifications:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar las clasificaciones comerciales.',
+            life: 3000
+        });
+    }
+};
+
+const selectCategory = (category: Category) => {
+    selectedCategory.value = category;
+};
+
+const addNewCategory = () => {
+    // Reset form
+    isEditMode.value = false;
+    editingId.value = null;
+    formData.value = {
+        code: '',
+        name: '',
+        description: '',
+        parent_id: null,
+        is_active: 1
+    };
+    showCreateModal.value = true;
+};
+
+const closeModal = () => {
+    showCreateModal.value = false;
+    isEditMode.value = false;
+    editingId.value = null;
+};
+
+const createClassification = async () => {
+    try {
+        isSubmitting.value = true;
+        
+        if (isEditMode.value && editingId.value) {
+            // Update existing classification
+            await classificationStore.updateClassification(editingId.value, formData.value);
+            
+            toast.add({
+                severity: 'success',
+                summary: 'Clasificación Actualizada',
+                detail: `La clasificación "${formData.value.name}" ha sido actualizada exitosamente.`,
+                life: 3000
+            });
+            
+            // Actualizar la categoría seleccionada si fue la que se editó
+            if (selectedCategory.value?.id === editingId.value) {
+                const updatedCategory = categories.value.find(c => c.id === editingId.value);
+                if (updatedCategory) {
+                    selectedCategory.value = updatedCategory;
+                }
+            }
+        } else {
+            // Create new classification
+            await classificationStore.createClassification(formData.value);
+            
+            toast.add({
+                severity: 'success',
+                summary: 'Clasificación Creada',
+                detail: `La clasificación "${formData.value.name}" ha sido creada exitosamente.`,
+                life: 3000
+            });
+            
+            // Si se creó una subclasificación, actualizar la vista de la categoría padre
+            if (formData.value.parent_id && selectedCategory.value?.id === formData.value.parent_id) {
+                const parentCategory = categories.value.find(c => c.id === formData.value.parent_id);
+                if (parentCategory) {
+                    selectedCategory.value = parentCategory;
+                }
+            }
+        }
+        
+        showCreateModal.value = false;
+        isEditMode.value = false;
+        editingId.value = null;
+        // Reset form
+        formData.value = {
+            code: '',
+            name: '',
+            description: '',
+            parent_id: null,
+            is_active: 1
+        };
+    } catch (error) {
+        console.error('Error saving classification:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: isEditMode.value 
+                ? 'No se pudo actualizar la clasificación. Por favor, intenta nuevamente.'
+                : 'No se pudo crear la clasificación. Por favor, intenta nuevamente.',
+            life: 3000
+        });
+    } finally {
+        isSubmitting.value = false;
+    }
+};
+
+const addSubcategory = () => {
+    if (selectedCategory.value) {
+        isEditMode.value = false;
+        editingId.value = null;
+        formData.value = {
+            code: '',
+            name: '',
+            description: '',
+            parent_id: selectedCategory.value.id,
+            is_active: 1
+        };
+        showCreateModal.value = true;
+    }
+};
+
+const editCategory = () => {
+    if (!selectedCategory.value) return;
+    
+    isEditMode.value = true;
+    editingId.value = selectedCategory.value.id;
+    formData.value = {
+        code: selectedCategory.value.code,
+        name: selectedCategory.value.name,
+        description: selectedCategory.value.description,
+        parent_id: selectedCategory.value.parent_id,
+        is_active: selectedCategory.value.is_active
+    };
+    showCreateModal.value = true;
+};
+
+const deleteCategory = () => {
+    if (!selectedCategory.value) return;
+    
+    confirm.require({
+        message: `¿Estás seguro de eliminar la clasificación comercial "${selectedCategory.value.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                const categoryName = selectedCategory.value!.name;
+                const categoryId = selectedCategory.value!.id;
+                await classificationStore.deleteClassification(categoryId);
+                
+                toast.add({
+                    severity: 'success',
+                    summary: 'Clasificación Eliminada',
+                    detail: `La clasificación "${categoryName}" ha sido eliminada exitosamente.`,
+                    life: 3000
+                });
+                
+                // Seleccionar otra categoría o limpiar la selección
+                if (categories.value.length > 0) {
+                    selectedCategory.value = categories.value[0] || null;
+                } else {
+                    selectedCategory.value = null;
+                }
+            } catch (error) {
+                console.error('Error deleting classification:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error al Eliminar',
+                    detail: 'No se pudo eliminar la clasificación. Puede estar en uso.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+const editSubcategory = (subcategory: Category) => {
+    isEditMode.value = true;
+    editingId.value = subcategory.id;
+    formData.value = {
+        code: subcategory.code,
+        name: subcategory.name,
+        description: subcategory.description,
+        parent_id: subcategory.parent_id,
+        is_active: subcategory.is_active
+    };
+    showCreateModal.value = true;
+};
+
+const deleteSubcategory = (subcategory: Category) => {
+    confirm.require({
+        message: `¿Estás seguro de eliminar la subclasificación "${subcategory.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await classificationStore.deleteClassification(subcategory.id);
+                
+                toast.add({
+                    severity: 'success',
+                    summary: 'Subclasificación Eliminada',
+                    detail: `La subclasificación "${subcategory.name}" ha sido eliminada exitosamente.`,
+                    life: 3000
+                });
+                
+                // Actualizar la vista de la categoría padre para reflejar los cambios
+                if (selectedCategory.value) {
+                    const updatedParent = categories.value.find(c => c.id === selectedCategory.value!.id);
+                    if (updatedParent) {
+                        selectedCategory.value = updatedParent;
+                    }
+                }
+            } catch (error) {
+                console.error('Error deleting subcategory:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error al Eliminar',
+                    detail: 'No se pudo eliminar la subclasificación.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+onMounted(() => {
+    loadClassifications();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Confirm Dialog -->
+        <ConfirmDialog></ConfirmDialog>
+
+        <!-- Page Heading -->
+        <div class="flex flex-wrap items-center justify-between gap-3">
+            <h1 class="text-2xl font-bold leading-tight tracking-tight text-surface-900 dark:text-white">
+                Clasificaciones Comerciales
+            </h1>
+        </div>
+
+        <!-- Two-Panel Layout -->
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <!-- Left Panel (Category List) -->
+            <Card class="lg:col-span-1">
+                <template #content>
+                    <div class="flex flex-col gap-4">
+                        <!-- Add Category Button -->
+                        <Button
+                            label="Nueva Clasificación"
+                            icon="pi pi-plus"
+                            class="w-full"
+                            @click="addNewCategory"
+                        />
+
+                        <!-- Categories List -->
+                        <div v-if="loading" class="flex items-center justify-center py-8">
+                            <ProgressSpinner style="width: 50px; height: 50px" />
+                        </div>
+                        <div v-else-if="categories.length === 0" class="flex flex-col items-center justify-center py-8 text-center">
+                            <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                            <p class="text-sm text-surface-500 dark:text-surface-400">
+                                No hay clasificaciones comerciales creadas
+                            </p>
+                        </div>
+                        <div v-else class="flex flex-col gap-1">
+                            <div
+                                v-for="category in categories"
+                                :key="category.id"
+                                :class="[
+                                    'flex cursor-pointer items-center justify-between gap-4 rounded-lg px-4 py-3 transition-colors',
+                                    selectedCategory?.id === category.id
+                                        ? 'bg-primary/10 text-primary'
+                                        : 'hover:bg-surface-100 dark:hover:bg-surface-800'
+                                ]"
+                                @click="selectCategory(category)"
+                            >
+                                <div class="flex items-center gap-4">
+                                    <div
+                                        :class="[
+                                            'flex size-10 shrink-0 items-center justify-center rounded-lg',
+                                            selectedCategory?.id === category.id
+                                                ? 'bg-primary/20 text-primary'
+                                                : 'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400'
+                                        ]"
+                                    >
+                                        <i class="pi pi-shopping-bag"></i>
+                                    </div>
+                                    <div class="flex-1 min-w-0">
+                                        <p
+                                            :class="[
+                                                'truncate text-base',
+                                                selectedCategory?.id === category.id
+                                                    ? 'font-semibold text-primary'
+                                                    : 'font-normal text-surface-800 dark:text-surface-300'
+                                            ]"
+                                        >
+                                            {{ category.name }}
+                                        </p>
+                                        <p class="text-xs text-surface-500 dark:text-surface-400 truncate">
+                                            {{ category.code }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div :class="selectedCategory?.id === category.id ? 'text-primary' : 'text-surface-400'">
+                                    <i class="pi pi-chevron-right"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Right Panel (Details View) -->
+            <Card v-if="!selectedCategory" class="lg:col-span-2">
+                <template #content>
+                    <div class="flex flex-col items-center justify-center py-16">
+                        <i class="pi pi-shopping-bag text-6xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                        <h3 class="text-xl font-semibold text-surface-700 dark:text-surface-300 mb-2">
+                            Selecciona una clasificación
+                        </h3>
+                        <p class="text-sm text-surface-500 dark:text-surface-400">
+                            Elige una clasificación comercial de la lista para ver sus detalles
+                        </p>
+                    </div>
+                </template>
+            </Card>
+
+            <Card v-else class="lg:col-span-2">
+                <template #content>
+                    <div class="flex flex-col gap-6">
+                        <!-- Header -->
+                        <div class="flex flex-wrap items-start justify-between gap-4">
+                            <div class="flex-1">
+                                <p class="text-xs font-medium uppercase tracking-wider text-surface-500 dark:text-surface-400">
+                                    Detalles de la Clasificación Comercial
+                                </p>
+                                <h3 class="text-xl font-bold text-surface-900 dark:text-white mt-1">
+                                    {{ selectedCategory.name }}
+                                </h3>
+                                <p class="mt-1 text-sm font-mono text-surface-600 dark:text-surface-400">
+                                    Código: {{ selectedCategory.code }}
+                                </p>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <Button
+                                    icon="pi pi-pencil"
+                                    outlined
+                                    rounded
+                                    @click="editCategory"
+                                    v-tooltip.top="'Editar'"
+                                />
+                                <Button
+                                    icon="pi pi-trash"
+                                    severity="danger"
+                                    outlined
+                                    rounded
+                                    @click="deleteCategory"
+                                    v-tooltip.top="'Eliminar'"
+                                />
+                            </div>
+                        </div>
+
+                        <!-- Subcategory Section -->
+                        <div class="flex flex-col">
+                            <div class="mb-4 flex items-center justify-between">
+                                <h4 class="font-semibold text-surface-800 dark:text-surface-200">
+                                    Subclasificaciones ({{ selectedCategory.subcategories.length }})
+                                </h4>
+                                <Button
+                                    label="Agregar Subclasificación"
+                                    icon="pi pi-plus"
+                                    size="small"
+                                    @click="addSubcategory"
+                                />
+                            </div>
+
+                            <!-- Subcategory Table -->
+                            <DataTable
+                                :value="selectedCategory.subcategories"
+                                stripedRows
+                                responsiveLayout="scroll"
+                            >
+                                <Column field="name" header="Nombre" sortable>
+                                    <template #body="slotProps">
+                                        <span class="font-medium text-surface-900 dark:text-white">
+                                            {{ slotProps.data.name }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column field="code" header="Código" sortable>
+                                    <template #body="slotProps">
+                                        <span class="text-surface-500 dark:text-surface-400 font-mono">
+                                            {{ slotProps.data.code }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column field="created_at" header="Fecha de Creación" sortable>
+                                    <template #body="slotProps">
+                                        <span class="text-surface-500 dark:text-surface-400">
+                                            {{ new Date(slotProps.data.created_at).toLocaleDateString('es-MX', { 
+                                                year: 'numeric', 
+                                                month: 'short', 
+                                                day: 'numeric',
+                                                hour: '2-digit',
+                                                minute: '2-digit'
+                                            }) }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right">
+                                    <template #body="slotProps">
+                                        <div class="flex items-center justify-end gap-2">
+                                            <Button
+                                                icon="pi pi-pencil"
+                                                text
+                                                rounded
+                                                size="small"
+                                                @click="editSubcategory(slotProps.data)"
+                                            />
+                                            <Button
+                                                icon="pi pi-trash"
+                                                text
+                                                rounded
+                                                size="small"
+                                                severity="danger"
+                                                @click="deleteSubcategory(slotProps.data)"
+                                            />
+                                        </div>
+                                    </template>
+                                </Column>
+
+                                <template #empty>
+                                    <div class="flex flex-col items-center justify-center py-8 text-center">
+                                        <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                                        <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-0">
+                                            No hay subclasificaciones
+                                        </h3>
+                                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
+                                            Agrega subclasificaciones para organizar mejor esta categoría
+                                        </p>
+                                    </div>
+                                </template>
+                            </DataTable>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+        </div>
+
+        <!-- Create/Edit Classification Modal -->
+        <Dialog
+            v-model:visible="showCreateModal"
+            modal
+            :header="isEditMode ? 'Editar Clasificación Comercial' : 'Nueva Clasificación Comercial'"
+            :style="{ width: '500px' }"
+        >
+            <div class="flex flex-col gap-4 py-4">
+                <!-- Code -->
+                <div>
+                    <label for="code" class="block text-sm font-medium mb-2">
+                        Código <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                        id="code"
+                        v-model="formData.code"
+                        class="w-full"
+                        placeholder="Ej: COM-001"
+                    />
+                </div>
+
+                <!-- Name -->
+                <div>
+                    <label for="name" class="block text-sm font-medium mb-2">
+                        Nombre <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                        id="name"
+                        v-model="formData.name"
+                        class="w-full"
+                        placeholder="Ej: PRODUCTOS DE CONSUMO"
+                    />
+                </div>
+
+                <!-- Description -->
+                <div>
+                    <label for="description" class="block text-sm font-medium mb-2">
+                        Descripción
+                    </label>
+                    <Textarea
+                        id="description"
+                        v-model="formData.description"
+                        rows="3"
+                        class="w-full"
+                        placeholder="Descripción de la clasificación comercial"
+                    />
+                </div>
+
+                <!-- Parent Category -->
+                <div>
+                    <label for="parent" class="block text-sm font-medium mb-2">
+                        Clasificación Padre (Opcional)
+                    </label>
+                    <Dropdown
+                        id="parent"
+                        v-model="formData.parent_id"
+                        :options="categories"
+                        optionLabel="name"
+                        optionValue="id"
+                        placeholder="Seleccionar clasificación padre..."
+                        class="w-full"
+                        showClear
+                    />
+                    <small class="text-surface-500 dark:text-surface-400">
+                        Deja vacío para crear una clasificación raíz
+                    </small>
+                </div>
+
+                <!-- Active Status -->
+                <div>
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <label for="is_active" class="block text-sm font-medium mb-1">
+                                Estado
+                            </label>
+                            <small class="text-surface-500 dark:text-surface-400">
+                                Activa o desactiva esta clasificación comercial
+                            </small>
+                        </div>
+                        <InputSwitch
+                            id="is_active"
+                            v-model="isActiveSwitch"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button
+                        label="Cancelar"
+                        severity="secondary"
+                        outlined
+                        @click="closeModal"
+                        :disabled="isSubmitting"
+                    />
+                    <Button
+                        :label="isEditMode ? 'Actualizar' : 'Crear'"
+                        @click="createClassification"
+                        :loading="isSubmitting"
+                        :disabled="!formData.code || !formData.name"
+                    />
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
diff --git a/src/modules/catalog/components/ModelDocuments.vue b/src/modules/catalog/components/ModelDocuments.vue
new file mode 100644
index 0000000..6a6434c
--- /dev/null
+++ b/src/modules/catalog/components/ModelDocuments.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useModelDocumentStore } from '../stores/modelDocumentStore';
+import { MODULE_NAMES  } from '../types/modelDocument.interface';
+
+const router = useRouter();
+const documentStore = useModelDocumentStore();
+
+// Breadcrumb
+const breadcrumbItems = ref([
+    { label: 'Inicio', route: '/' },
+    { label: 'Configuración', route: '/catalog' },
+    { label: 'Tipos de Documento' }
+]);
+
+const home = ref({
+    icon: 'pi pi-home',
+    route: '/'
+});
+
+// State
+const searchTerm = ref('');
+const selectedModule = ref<number | null>(null);
+
+// Computed
+const documents = computed(() => documentStore.documents);
+const pagination = computed(() => documentStore.pagination);
+const loading = computed(() => documentStore.loading);
+
+const filteredDocuments = computed(() => {
+    let filtered = documents.value;
+    
+    // Filter by search term
+    if (searchTerm.value) {
+        const search = searchTerm.value.toLowerCase();
+        filtered = filtered.filter(doc => 
+            doc.name.toLowerCase().includes(search) ||
+            getModuleName(doc.module).toLowerCase().includes(search)
+        );
+    }
+    
+    // Filter by module
+    if (selectedModule.value !== null) {
+        filtered = filtered.filter(doc => doc.module === selectedModule.value);
+    }
+    
+    return filtered;
+});
+
+
+// Helper functions
+const getModuleName = (moduleId: number): string => {
+    return MODULE_NAMES[moduleId] || `Módulo ${moduleId}`;
+};
+
+
+const getStatusIcon = (deletedAt: string | null) => {
+    return deletedAt === null ? 'pi pi-circle-fill' : 'pi pi-circle';
+};
+
+const getStatusColor = (deletedAt: string | null) => {
+    return deletedAt === null ? '#10b981' : '#ef4444';
+};
+
+
+const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('es-MX', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    });
+};
+
+const onPageChange = (event: any) => {
+    documentStore.changePage(event.page + 1);
+};
+
+// Lifecycle
+onMounted(async () => {
+    await documentStore.fetchDocuments();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Breadcrumb -->
+        <div class="flex flex-col gap-2">
+            <Breadcrumb :home="home" :model="breadcrumbItems">
+                <template #item="{ item }">
+                    <a 
+                        v-if="item.route" 
+                        :href="item.route"
+                        @click.prevent="router.push(item.route)"
+                        class="text-primary hover:underline"
+                    >
+                        {{ item.label }}
+                    </a>
+                    <span v-else class="text-surface-600 dark:text-surface-400">
+                        {{ item.label }}
+                    </span>
+                </template>
+            </Breadcrumb>
+            
+            <!-- Title -->
+            <div>
+                <h1 class="text-3xl font-black leading-tight tracking-tight text-surface-900 dark:text-white">
+                    Tipos de Documento
+                </h1>
+            </div>
+        </div>
+
+        <!-- Data Table Card -->
+        <Card>
+            <template #content>
+                <!-- Loading State -->
+                <div v-if="loading && documents.length === 0" class="flex justify-center items-center py-12">
+                    <ProgressSpinner 
+                        style="width: 50px; height: 50px"
+                        strokeWidth="4"
+                        animationDuration="1s"
+                    />
+                </div>
+
+                <!-- Data Table -->
+                <DataTable
+                    v-else
+                    :value="filteredDocuments"
+                    :loading="loading"
+                    stripedRows
+                    responsiveLayout="scroll"
+                >
+                    <!-- ID Column -->
+                    <Column field="id" header="ID" sortable style="width: 100px">
+                        <template #body="slotProps">
+                            <span class="font-semibold text-surface-400 dark:text-surface-500">
+                                #{{ slotProps.data.id }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Name Column -->
+                    <Column field="name" header="Nombre" sortable>
+                        <template #body="slotProps">
+                            <div class="flex items-center gap-2">
+                                <i 
+                                    :class="getStatusIcon(slotProps.data.deleted_at)"
+                                    class="text-xs"
+                                    :style="{ color: getStatusColor(slotProps.data.deleted_at) }"
+                                />
+                                <span class="font-semibold text-surface-700 dark:text-surface-200">
+                                    {{ slotProps.data.name }}
+                                </span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <!-- Folio Column -->
+                    <Column field="num_folio" header="Folio Actual" sortable style="width: 150px">
+                        <template #body="slotProps">
+                            <span class="font-mono text-sm text-surface-600 dark:text-surface-300">
+                                {{ String(slotProps.data.num_folio).padStart(6, '0') }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Created At Column -->
+                    <Column field="created_at" header="Fecha Creación" sortable style="width: 150px">
+                        <template #body="slotProps">
+                            <span class="text-sm text-surface-500 dark:text-surface-400">
+                                {{ formatDate(slotProps.data.created_at) }}
+                            </span>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+
+            <!-- Pagination -->
+            <template #footer>
+                <Paginator
+                    v-if="pagination.total > 0"
+                    :rows="pagination.perPage"
+                    :totalRecords="pagination.total"
+                    :first="(pagination.currentPage - 1) * pagination.perPage"
+                    @page="onPageChange"
+                    template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                    :rowsPerPageOptions="[10, 15, 20, 50]"
+                    currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} documentos"
+                />
+            </template>
+        </Card>
+    </div>
+</template>
diff --git a/src/modules/catalog/components/comercial-classification/ClassificationsComercial.vue b/src/modules/catalog/components/comercial-classification/ClassificationsComercial.vue
new file mode 100644
index 0000000..9922153
--- /dev/null
+++ b/src/modules/catalog/components/comercial-classification/ClassificationsComercial.vue
@@ -0,0 +1,660 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import Column from 'primevue/column';
+import ConfirmDialog from 'primevue/confirmdialog';
+import DataTable from 'primevue/datatable';
+import Dialog from 'primevue/dialog';
+import Dropdown from 'primevue/dropdown';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import InputSwitch from 'primevue/inputswitch';
+import ProgressSpinner from 'primevue/progressspinner';
+import Toast from 'primevue/toast';
+import { useComercialClassificationStore } from '../../stores/comercialClassificationStore';
+import type { ComercialClassification } from '../../types/comercialClassification';
+
+const confirm = useConfirm();
+const toast = useToast();
+const classificationStore = useComercialClassificationStore();
+
+interface Category {
+    id: number;
+    code: string;
+    name: string;
+    description: string;
+    parent_id: number | null;
+    is_active: number;
+    created_at: string;
+    subcategories: Category[];
+}
+
+const selectedCategory = ref<Category | null>(null);
+const showCreateModal = ref(false);
+const isSubmitting = ref(false);
+const isEditMode = ref(false);
+const editingId = ref<number | null>(null);
+
+// Computed properties from store
+const loading = computed(() => classificationStore.loading);
+const categories = computed(() => transformClassifications(classificationStore.classifications));
+
+// Form data
+const formData = ref({
+    code: '',
+    name: '',
+    description: '',
+    parent_id: null as number | null,
+    is_active: 1 as number
+});
+
+// Computed para el switch (convierte number a boolean y viceversa)
+const isActiveSwitch = computed({
+    get: () => formData.value.is_active === 1,
+    set: (value: boolean) => {
+        formData.value.is_active = value ? 1 : 0;
+    }
+});
+
+// Transform API data to component structure
+const transformClassifications = (classifications: ComercialClassification[]): Category[] => {
+    return classifications.map(cls => ({
+        id: cls.id,
+        code: cls.code,
+        name: cls.name,
+        description: cls.description || '',
+        parent_id: cls.parent_id,
+        is_active: cls.is_active,
+        created_at: cls.created_at,
+        subcategories: cls.children ? cls.children.map(child => ({
+            id: child.id,
+            code: child.code,
+            name: child.name,
+            description: child.description || '',
+            parent_id: child.parent_id,
+            is_active: child.is_active,
+            created_at: child.created_at,
+            subcategories: []
+        })) : []
+    }));
+};
+
+const loadClassifications = async () => {
+    try {
+        await classificationStore.fetchClassifications();
+        
+        // Select first category by default
+        if (categories.value.length > 0 && categories.value[0]) {
+            selectedCategory.value = categories.value[0];
+        }
+    } catch (error) {
+        console.error('Error loading classifications:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar las clasificaciones comerciales.',
+            life: 3000
+        });
+    }
+};
+
+const selectCategory = (category: Category) => {
+    selectedCategory.value = category;
+};
+
+const addNewCategory = () => {
+    // Reset form
+    isEditMode.value = false;
+    editingId.value = null;
+    formData.value = {
+        code: '',
+        name: '',
+        description: '',
+        parent_id: null,
+        is_active: 1
+    };
+    showCreateModal.value = true;
+};
+
+const closeModal = () => {
+    showCreateModal.value = false;
+    isEditMode.value = false;
+    editingId.value = null;
+};
+
+const createClassification = async () => {
+    try {
+        isSubmitting.value = true;
+        
+        if (isEditMode.value && editingId.value) {
+            // Update existing classification
+            await classificationStore.updateClassification(editingId.value, formData.value);
+            
+            toast.add({
+                severity: 'success',
+                summary: 'Clasificación Actualizada',
+                detail: `La clasificación "${formData.value.name}" ha sido actualizada exitosamente.`,
+                life: 3000
+            });
+            
+            // Actualizar la categoría seleccionada si fue la que se editó
+            if (selectedCategory.value?.id === editingId.value) {
+                const updatedCategory = categories.value.find(c => c.id === editingId.value);
+                if (updatedCategory) {
+                    selectedCategory.value = updatedCategory;
+                }
+            }
+        } else {
+            // Create new classification
+            await classificationStore.createClassification(formData.value);
+            
+            toast.add({
+                severity: 'success',
+                summary: 'Clasificación Creada',
+                detail: `La clasificación "${formData.value.name}" ha sido creada exitosamente.`,
+                life: 3000
+            });
+            
+            // Si se creó una subclasificación, actualizar la vista de la categoría padre
+            if (formData.value.parent_id && selectedCategory.value?.id === formData.value.parent_id) {
+                const parentCategory = categories.value.find(c => c.id === formData.value.parent_id);
+                if (parentCategory) {
+                    selectedCategory.value = parentCategory;
+                }
+            }
+        }
+        
+        showCreateModal.value = false;
+        isEditMode.value = false;
+        editingId.value = null;
+        // Reset form
+        formData.value = {
+            code: '',
+            name: '',
+            description: '',
+            parent_id: null,
+            is_active: 1
+        };
+    } catch (error) {
+        console.error('Error saving classification:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: isEditMode.value 
+                ? 'No se pudo actualizar la clasificación. Por favor, intenta nuevamente.'
+                : 'No se pudo crear la clasificación. Por favor, intenta nuevamente.',
+            life: 3000
+        });
+    } finally {
+        isSubmitting.value = false;
+    }
+};
+
+const addSubcategory = () => {
+    if (selectedCategory.value) {
+        isEditMode.value = false;
+        editingId.value = null;
+        formData.value = {
+            code: '',
+            name: '',
+            description: '',
+            parent_id: selectedCategory.value.id,
+            is_active: 1
+        };
+        showCreateModal.value = true;
+    }
+};
+
+const editCategory = () => {
+    if (!selectedCategory.value) return;
+    
+    isEditMode.value = true;
+    editingId.value = selectedCategory.value.id;
+    formData.value = {
+        code: selectedCategory.value.code,
+        name: selectedCategory.value.name,
+        description: selectedCategory.value.description,
+        parent_id: selectedCategory.value.parent_id,
+        is_active: selectedCategory.value.is_active
+    };
+    showCreateModal.value = true;
+};
+
+const deleteCategory = () => {
+    if (!selectedCategory.value) return;
+    
+    confirm.require({
+        message: `¿Estás seguro de eliminar la clasificación comercial "${selectedCategory.value.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                const categoryName = selectedCategory.value!.name;
+                const categoryId = selectedCategory.value!.id;
+                await classificationStore.deleteClassification(categoryId);
+                
+                toast.add({
+                    severity: 'success',
+                    summary: 'Clasificación Eliminada',
+                    detail: `La clasificación "${categoryName}" ha sido eliminada exitosamente.`,
+                    life: 3000
+                });
+                
+                // Seleccionar otra categoría o limpiar la selección
+                if (categories.value.length > 0) {
+                    selectedCategory.value = categories.value[0] || null;
+                } else {
+                    selectedCategory.value = null;
+                }
+            } catch (error) {
+                console.error('Error deleting classification:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error al Eliminar',
+                    detail: 'No se pudo eliminar la clasificación. Puede estar en uso.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+const editSubcategory = (subcategory: Category) => {
+    isEditMode.value = true;
+    editingId.value = subcategory.id;
+    formData.value = {
+        code: subcategory.code,
+        name: subcategory.name,
+        description: subcategory.description,
+        parent_id: subcategory.parent_id,
+        is_active: subcategory.is_active
+    };
+    showCreateModal.value = true;
+};
+
+const deleteSubcategory = (subcategory: Category) => {
+    confirm.require({
+        message: `¿Estás seguro de eliminar la subclasificación "${subcategory.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await classificationStore.deleteClassification(subcategory.id);
+                
+                toast.add({
+                    severity: 'success',
+                    summary: 'Subclasificación Eliminada',
+                    detail: `La subclasificación "${subcategory.name}" ha sido eliminada exitosamente.`,
+                    life: 3000
+                });
+                
+                // Actualizar la vista de la categoría padre para reflejar los cambios
+                if (selectedCategory.value) {
+                    const updatedParent = categories.value.find(c => c.id === selectedCategory.value!.id);
+                    if (updatedParent) {
+                        selectedCategory.value = updatedParent;
+                    }
+                }
+            } catch (error) {
+                console.error('Error deleting subcategory:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error al Eliminar',
+                    detail: 'No se pudo eliminar la subclasificación.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+onMounted(() => {
+    loadClassifications();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Confirm Dialog -->
+        <ConfirmDialog></ConfirmDialog>
+
+        <!-- Page Heading -->
+        <div class="flex flex-wrap items-center justify-between gap-3">
+            <h1 class="text-2xl font-bold leading-tight tracking-tight text-surface-900 dark:text-white">
+                Clasificaciones Comerciales
+            </h1>
+        </div>
+
+        <!-- Two-Panel Layout -->
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <!-- Left Panel (Category List) -->
+            <Card class="lg:col-span-1">
+                <template #content>
+                    <div class="flex flex-col gap-4">
+                        <!-- Add Category Button -->
+                        <Button
+                            label="Nueva Clasificación"
+                            icon="pi pi-plus"
+                            class="w-full"
+                            @click="addNewCategory"
+                        />
+
+                        <!-- Categories List -->
+                        <div v-if="loading" class="flex items-center justify-center py-8">
+                            <ProgressSpinner style="width: 50px; height: 50px" />
+                        </div>
+                        <div v-else-if="categories.length === 0" class="flex flex-col items-center justify-center py-8 text-center">
+                            <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                            <p class="text-sm text-surface-500 dark:text-surface-400">
+                                No hay clasificaciones comerciales creadas
+                            </p>
+                        </div>
+                        <div v-else class="flex flex-col gap-1">
+                            <div
+                                v-for="category in categories"
+                                :key="category.id"
+                                :class="[
+                                    'flex cursor-pointer items-center justify-between gap-4 rounded-lg px-4 py-3 transition-colors',
+                                    selectedCategory?.id === category.id
+                                        ? 'bg-primary/10 text-primary'
+                                        : 'hover:bg-surface-100 dark:hover:bg-surface-800'
+                                ]"
+                                @click="selectCategory(category)"
+                            >
+                                <div class="flex items-center gap-4">
+                                    <div
+                                        :class="[
+                                            'flex size-10 shrink-0 items-center justify-center rounded-lg',
+                                            selectedCategory?.id === category.id
+                                                ? 'bg-primary/20 text-primary'
+                                                : 'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400'
+                                        ]"
+                                    >
+                                        <i class="pi pi-shopping-bag"></i>
+                                    </div>
+                                    <div class="flex-1 min-w-0">
+                                        <p
+                                            :class="[
+                                                'truncate text-base',
+                                                selectedCategory?.id === category.id
+                                                    ? 'font-semibold text-primary'
+                                                    : 'font-normal text-surface-800 dark:text-surface-300'
+                                            ]"
+                                        >
+                                            {{ category.name }}
+                                        </p>
+                                        <p class="text-xs text-surface-500 dark:text-surface-400 truncate">
+                                            {{ category.code }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div :class="selectedCategory?.id === category.id ? 'text-primary' : 'text-surface-400'">
+                                    <i class="pi pi-chevron-right"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Right Panel (Details View) -->
+            <Card v-if="!selectedCategory" class="lg:col-span-2">
+                <template #content>
+                    <div class="flex flex-col items-center justify-center py-16">
+                        <i class="pi pi-shopping-bag text-6xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                        <h3 class="text-xl font-semibold text-surface-700 dark:text-surface-300 mb-2">
+                            Selecciona una clasificación
+                        </h3>
+                        <p class="text-sm text-surface-500 dark:text-surface-400">
+                            Elige una clasificación comercial de la lista para ver sus detalles
+                        </p>
+                    </div>
+                </template>
+            </Card>
+
+            <Card v-else class="lg:col-span-2">
+                <template #content>
+                    <div class="flex flex-col gap-6">
+                        <!-- Header -->
+                        <div class="flex flex-wrap items-start justify-between gap-4">
+                            <div class="flex-1">
+                                <p class="text-xs font-medium uppercase tracking-wider text-surface-500 dark:text-surface-400">
+                                    Detalles de la Clasificación Comercial
+                                </p>
+                                <h3 class="text-xl font-bold text-surface-900 dark:text-white mt-1">
+                                    {{ selectedCategory.name }}
+                                </h3>
+                                <p class="mt-1 text-sm font-mono text-surface-600 dark:text-surface-400">
+                                    Código: {{ selectedCategory.code }}
+                                </p>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <Button
+                                    icon="pi pi-pencil"
+                                    outlined
+                                    rounded
+                                    @click="editCategory"
+                                    v-tooltip.top="'Editar'"
+                                />
+                                <Button
+                                    icon="pi pi-trash"
+                                    severity="danger"
+                                    outlined
+                                    rounded
+                                    @click="deleteCategory"
+                                    v-tooltip.top="'Eliminar'"
+                                />
+                            </div>
+                        </div>
+
+                        <!-- Subcategory Section -->
+                        <div class="flex flex-col">
+                            <div class="mb-4 flex items-center justify-between">
+                                <h4 class="font-semibold text-surface-800 dark:text-surface-200">
+                                    Subclasificaciones ({{ selectedCategory.subcategories.length }})
+                                </h4>
+                                <Button
+                                    label="Agregar Subclasificación"
+                                    icon="pi pi-plus"
+                                    size="small"
+                                    @click="addSubcategory"
+                                />
+                            </div>
+
+                            <!-- Subcategory Table -->
+                            <DataTable
+                                :value="selectedCategory.subcategories"
+                                stripedRows
+                                responsiveLayout="scroll"
+                            >
+                                <Column field="name" header="Nombre" sortable>
+                                    <template #body="slotProps">
+                                        <span class="font-medium text-surface-900 dark:text-white">
+                                            {{ slotProps.data.name }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column field="code" header="Código" sortable>
+                                    <template #body="slotProps">
+                                        <span class="text-surface-500 dark:text-surface-400 font-mono">
+                                            {{ slotProps.data.code }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column field="created_at" header="Fecha de Creación" sortable>
+                                    <template #body="slotProps">
+                                        <span class="text-surface-500 dark:text-surface-400">
+                                            {{ new Date(slotProps.data.created_at).toLocaleDateString('es-MX', { 
+                                                year: 'numeric', 
+                                                month: 'short', 
+                                                day: 'numeric',
+                                                hour: '2-digit',
+                                                minute: '2-digit'
+                                            }) }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right">
+                                    <template #body="slotProps">
+                                        <div class="flex items-center justify-end gap-2">
+                                            <Button
+                                                icon="pi pi-pencil"
+                                                text
+                                                rounded
+                                                size="small"
+                                                @click="editSubcategory(slotProps.data)"
+                                            />
+                                            <Button
+                                                icon="pi pi-trash"
+                                                text
+                                                rounded
+                                                size="small"
+                                                severity="danger"
+                                                @click="deleteSubcategory(slotProps.data)"
+                                            />
+                                        </div>
+                                    </template>
+                                </Column>
+
+                                <template #empty>
+                                    <div class="flex flex-col items-center justify-center py-8 text-center">
+                                        <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                                        <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-0">
+                                            No hay subclasificaciones
+                                        </h3>
+                                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
+                                            Agrega subclasificaciones para organizar mejor esta categoría
+                                        </p>
+                                    </div>
+                                </template>
+                            </DataTable>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+        </div>
+
+        <!-- Create/Edit Classification Modal -->
+        <Dialog
+            v-model:visible="showCreateModal"
+            modal
+            :header="isEditMode ? 'Editar Clasificación Comercial' : 'Nueva Clasificación Comercial'"
+            :style="{ width: '500px' }"
+        >
+            <div class="flex flex-col gap-4 py-4">
+                <!-- Code -->
+                <div>
+                    <label for="code" class="block text-sm font-medium mb-2">
+                        Código <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                        id="code"
+                        v-model="formData.code"
+                        class="w-full"
+                        placeholder="Ej: COM-001"
+                    />
+                </div>
+
+                <!-- Name -->
+                <div>
+                    <label for="name" class="block text-sm font-medium mb-2">
+                        Nombre <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                        id="name"
+                        v-model="formData.name"
+                        class="w-full"
+                        placeholder="Ej: PRODUCTOS DE CONSUMO"
+                    />
+                </div>
+
+                <!-- Description -->
+                <div>
+                    <label for="description" class="block text-sm font-medium mb-2">
+                        Descripción
+                    </label>
+                    <Textarea
+                        id="description"
+                        v-model="formData.description"
+                        rows="3"
+                        class="w-full"
+                        placeholder="Descripción de la clasificación comercial"
+                    />
+                </div>
+
+                <!-- Parent Category -->
+                <div>
+                    <label for="parent" class="block text-sm font-medium mb-2">
+                        Clasificación Padre (Opcional)
+                    </label>
+                    <Dropdown
+                        id="parent"
+                        v-model="formData.parent_id"
+                        :options="categories"
+                        optionLabel="name"
+                        optionValue="id"
+                        placeholder="Seleccionar clasificación padre..."
+                        class="w-full"
+                        showClear
+                    />
+                    <small class="text-surface-500 dark:text-surface-400">
+                        Deja vacío para crear una clasificación raíz
+                    </small>
+                </div>
+
+                <!-- Active Status -->
+                <div>
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <label for="is_active" class="block text-sm font-medium mb-1">
+                                Estado
+                            </label>
+                            <small class="text-surface-500 dark:text-surface-400">
+                                Activa o desactiva esta clasificación comercial
+                            </small>
+                        </div>
+                        <InputSwitch
+                            id="is_active"
+                            v-model="isActiveSwitch"
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button
+                        label="Cancelar"
+                        severity="secondary"
+                        outlined
+                        @click="closeModal"
+                        :disabled="isSubmitting"
+                    />
+                    <Button
+                        :label="isEditMode ? 'Actualizar' : 'Crear'"
+                        @click="createClassification"
+                        :loading="isSubmitting"
+                        :disabled="!formData.code || !formData.name"
+                    />
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/catalog/components/suppliers/SupplierModal.vue b/src/modules/catalog/components/suppliers/SupplierModal.vue
new file mode 100644
index 0000000..e2b1b88
--- /dev/null
+++ b/src/modules/catalog/components/suppliers/SupplierModal.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import Dialog from 'primevue/dialog';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+import Dropdown from 'primevue/dropdown';
+import Button from 'primevue/button';
+import ProgressSpinner from 'primevue/progressspinner';
+import type { Supplier, SupplierFormErrors, SupplierAddress } from '../../types/suppliers.interfaces';
+import { SupplierType } from '../../types/suppliers.interfaces';
+
+const props = defineProps<{
+  visible: boolean;
+  isEditMode: boolean;
+  supplier?: Supplier | null;
+  formErrors: SupplierFormErrors;
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void;
+  (e: 'submit', value: any): void;
+  (e: 'cancel'): void;
+}>();
+
+const defaultAddress = (): SupplierAddress => ({
+  country: 'México',
+  postal_code: '',
+  state: '',
+  municipality: '',
+  city: '',
+  street: '',
+  num_ext: '',
+  num_int: ''
+});
+
+const form = ref({
+  name: '',
+  comercial_name: '',
+  rfc: '',
+  curp: '',
+  type: SupplierType.PROVIDER as number,
+  credit_limit: 0,
+  payment_days: 30,
+  addresses: [defaultAddress()]
+});
+
+const address = computed(() => form.value.addresses[0] || defaultAddress());
+
+watch(
+  () => props.supplier,
+  (supplier) => {
+    if (props.isEditMode && supplier) {
+      form.value = {
+        name: supplier.name,
+        comercial_name: supplier.comercial_name,
+        rfc: supplier.rfc,
+        curp: supplier.curp,
+        type: supplier.type,
+        credit_limit: parseFloat(supplier.credit_limit),
+        payment_days: supplier.payment_days,
+        addresses: supplier.addresses && supplier.addresses.length > 0 
+          ? [...supplier.addresses]
+          : [defaultAddress()]
+      };
+    } else {
+      form.value = {
+        name: '',
+        comercial_name: '',
+        rfc: '',
+        curp: '',
+        type: SupplierType.PROVIDER,
+        credit_limit: 0,
+        payment_days: 30,
+        addresses: [defaultAddress()]
+      };
+    }
+  },
+  { immediate: true }
+);
+
+const supplierTypeOptions = [
+  { label: 'Cliente', value: SupplierType.CLIENT },
+  { label: 'Proveedor', value: SupplierType.PROVIDER },
+  { label: 'Cliente/Proveedor', value: SupplierType.BOTH }
+];
+
+const handleSubmit = () => {
+  emit('submit', { ...form.value });
+};
+
+const handleCancel = () => {
+  emit('cancel');
+};
+</script>
+
+<template>
+  <Dialog :visible="visible" modal :style="{ width: '800px' }" :header="isEditMode ? 'Editar Proveedor' : 'Crear Nuevo Proveedor'" :closable="true" @update:visible="val => emit('update:visible', val)">
+    
+    <!-- Loading Overlay -->
+    <div v-if="loading" class="flex items-center justify-center py-20">
+      <ProgressSpinner style="width: 50px; height: 50px" strokeWidth="4" />
+    </div>
+
+    <form v-else class="flex flex-col gap-6" @submit.prevent="handleSubmit">
+      
+      <!-- Información General -->
+      <div class="border-b pb-4">
+        <h3 class="text-lg font-semibold mb-4">Información General</h3>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Razón Social <span class="text-red-500">*</span></p>
+            <InputText v-model="form.name" placeholder="Ej: Distribuidora Nacional S.A. de C.V." required />
+            <div v-if="formErrors.name" class="text-red-500 text-xs" v-for="err in formErrors.name" :key="err">{{ err }}</div>
+          </label>
+
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Nombre Comercial <span class="text-red-500">*</span></p>
+            <InputText v-model="form.comercial_name" placeholder="Ej: DistriNacional" required />
+            <div v-if="formErrors.comercial_name" class="text-red-500 text-xs" v-for="err in formErrors.comercial_name" :key="err">{{ err }}</div>
+          </label>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">RFC <span class="text-red-500">*</span></p>
+            <InputText v-model="form.rfc" placeholder="XAXX010101000" required maxlength="13" class="font-mono uppercase" @input="form.rfc = form.rfc.toUpperCase()" />
+            <div v-if="formErrors.rfc" class="text-red-500 text-xs" v-for="err in formErrors.rfc" :key="err">{{ err }}</div>
+          </label>
+
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">CURP <span class="text-red-500">*</span></p>
+            <InputText v-model="form.curp" placeholder="XAXX010101HDFABC01" required maxlength="18" class="font-mono uppercase" @input="form.curp = form.curp.toUpperCase()" />
+            <div v-if="formErrors.curp" class="text-red-500 text-xs" v-for="err in formErrors.curp" :key="err">{{ err }}</div>
+          </label>
+        </div>
+      </div>
+
+      <!-- Información Comercial -->
+      <div class="border-b pb-4">
+        <h3 class="text-lg font-semibold mb-4">Información Comercial</h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Tipo <span class="text-red-500">*</span></p>
+            <Dropdown v-model="form.type" :options="supplierTypeOptions" optionLabel="label" optionValue="value" placeholder="Seleccionar tipo" required />
+            <div v-if="formErrors.type" class="text-red-500 text-xs" v-for="err in formErrors.type" :key="err">{{ err }}</div>
+          </label>
+
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Límite de Crédito <span class="text-red-500">*</span></p>
+            <InputNumber v-model="form.credit_limit" mode="currency" currency="MXN" locale="es-MX" :minFractionDigits="2" required />
+            <div v-if="formErrors.credit_limit" class="text-red-500 text-xs" v-for="err in formErrors.credit_limit" :key="err">{{ err }}</div>
+          </label>
+
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Días de Pago <span class="text-red-500">*</span></p>
+            <InputNumber v-model="form.payment_days" :min="0" :max="365" suffix=" días" required />
+            <div v-if="formErrors.payment_days" class="text-red-500 text-xs" v-for="err in formErrors.payment_days" :key="err">{{ err }}</div>
+          </label>
+        </div>
+      </div>
+
+      <!-- Dirección -->
+      <div class="border-b pb-4">
+        <h3 class="text-lg font-semibold mb-4">Dirección</h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">País</p>
+            <InputText v-model="address.country" placeholder="México" />
+          </label>
+
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Código Postal <span class="text-red-500">*</span></p>
+            <InputText v-model="address.postal_code" placeholder="06000" required maxlength="5" />
+          </label>
+
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Estado <span class="text-red-500">*</span></p>
+            <InputText v-model="address.state" placeholder="CDMX" required />
+          </label>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Municipio/Alcaldía <span class="text-red-500">*</span></p>
+            <InputText v-model="address.municipality" placeholder="Cuauhtémoc" required />
+          </label>
+
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Ciudad <span class="text-red-500">*</span></p>
+            <InputText v-model="address.city" placeholder="Ciudad de México" required />
+          </label>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+          <label class="flex flex-col gap-2 md:col-span-1">
+            <p class="text-sm font-semibold">Calle <span class="text-red-500">*</span></p>
+            <InputText v-model="address.street" placeholder="Av. Reforma" required />
+          </label>
+
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Número Ext. <span class="text-red-500">*</span></p>
+            <InputText v-model="address.num_ext" placeholder="123" required />
+          </label>
+
+          <label class="flex flex-col gap-2">
+            <p class="text-sm font-semibold">Número Int.</p>
+            <InputText v-model="address.num_int" placeholder="4B" />
+          </label>
+        </div>
+      </div>
+
+      <!-- Botones -->
+      <div class="flex flex-col sm:flex-row items-center justify-end gap-3 pt-2">
+        <Button label="Cancelar" text severity="secondary" @click="handleCancel" type="button" />
+        <Button :label="isEditMode ? 'Actualizar Proveedor' : 'Crear Proveedor'" type="submit" icon="pi pi-check" />
+      </div>
+    </form>
+  </Dialog>
+</template>
diff --git a/src/modules/catalog/components/suppliers/Suppliers.vue b/src/modules/catalog/components/suppliers/Suppliers.vue
new file mode 100644
index 0000000..a6a3479
--- /dev/null
+++ b/src/modules/catalog/components/suppliers/Suppliers.vue
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { onMounted } from 'vue';
+
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import InputText from 'primevue/inputtext';
+import Dropdown from 'primevue/dropdown';
+import Tag from 'primevue/tag';
+import Paginator from 'primevue/paginator';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+
+
+
+import { supplierServices } from '../../services/supplier.services';
+import type { Supplier, SupplierPaginatedResponse, SupplierFormErrors } from '../../types/suppliers.interfaces';
+import { SupplierType } from '../../types/suppliers.interfaces';
+import SupplierModal from './SupplierModal.vue';
+
+
+const suppliers = ref<Supplier[]>([]);
+const pagination = ref({
+    first: 0,
+    rows: 5,
+    total: 0,
+    page: 1,
+    lastPage: 1,
+});
+const loading = ref(false);
+const loadingSupplier = ref(false);
+
+// Modal state and form fields
+const showModal = ref(false);
+const isEditMode = ref(false);
+const currentSupplier = ref<Supplier | null>(null);
+const formErrors = ref<SupplierFormErrors>({});
+
+const confirm = useConfirm();
+const toast = useToast();
+const handleDelete = (supplierId: number) => {
+    confirm.require({
+        message: '¿Seguro que deseas eliminar este proveedor?',
+        header: 'Confirmar eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Sí, eliminar',
+        rejectLabel: 'Cancelar',
+        accept: async () => {
+            try {
+                await supplierServices.deleteSupplier(supplierId);
+                toast.add({ severity: 'success', summary: 'Eliminado', detail: 'Proveedor eliminado correctamente', life: 3000 });
+                fetchSuppliers(pagination.value.page);
+            } catch (e) {
+                toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo eliminar el proveedor', life: 3000 });
+            }
+        }
+    });
+};
+
+
+const mapTypeToApi = (typeLabel: string | null) => {
+    if (!typeLabel) return undefined;
+    switch (typeLabel) {
+        case 'Cliente': return SupplierType.CLIENT;
+        case 'Proveedor': return SupplierType.PROVIDER;
+        case 'Ambos': return SupplierType.BOTH;
+        default: return undefined;
+    }
+};
+
+const fetchSuppliers = async (page = 1) => {
+    loading.value = true;
+    try {
+        const name = searchName.value ? searchName.value : undefined;
+        const type = selectedType.value ? mapTypeToApi(selectedType.value)?.toString() : undefined;
+        console.log('🔎 fetchSuppliers params:', { paginated: true, name, type, page });
+        const response = await supplierServices.getSuppliers(true, name, type);
+        const paginated = response as SupplierPaginatedResponse;
+        suppliers.value = paginated.data;
+        pagination.value.total = paginated.total;
+        pagination.value.page = paginated.current_page;
+        pagination.value.lastPage = paginated.last_page;
+        pagination.value.first = (paginated.current_page - 1) * paginated.per_page;
+        pagination.value.rows = paginated.per_page;
+    } catch (e) {
+        // Manejo de error opcional
+    } finally {
+        loading.value = false;
+    }
+};
+
+onMounted(() => {
+    fetchSuppliers();
+});
+
+const supplierTypes = [
+    { label: 'Todos', value: null },
+    { label: 'Cliente', value: 'Cliente' },
+    { label: 'Proveedor', value: 'Proveedor' },
+    { label: 'Ambos', value: 'Ambos' },
+];
+
+const selectedType = ref(null);
+const searchName = ref('');
+
+
+const clearFilters = () => {
+    searchName.value = '';
+    selectedType.value = null;
+    fetchSuppliers(1);
+};
+
+const onFilter = () => {
+    fetchSuppliers(1);
+};
+
+
+const onPageChange = (event: any) => {
+    const newPage = Math.floor(event.first / event.rows) + 1;
+    fetchSuppliers(newPage);
+};
+
+
+const openCreateModal = () => {
+    isEditMode.value = false;
+    showModal.value = true;
+    currentSupplier.value = null;
+    formErrors.value = {};
+};
+
+const openEditModal = async (supplier: Supplier) => {
+    isEditMode.value = true;
+    formErrors.value = {};
+    loadingSupplier.value = true;
+    
+    try {
+        // Obtener la información completa del proveedor incluyendo direcciones
+        const response = await supplierServices.getSupplierById(supplier.id);
+        currentSupplier.value = response.data;
+        showModal.value = true;
+    } catch (e: any) {
+        toast.add({ 
+            severity: 'error', 
+            summary: 'Error', 
+            detail: 'No se pudo cargar la información del proveedor', 
+            life: 3000 
+        });
+        console.error('Error loading supplier details:', e);
+    } finally {
+        loadingSupplier.value = false;
+    }
+};
+
+const closeModal = () => {
+    showModal.value = false;
+    isEditMode.value = false;
+    currentSupplier.value = null;
+    formErrors.value = {};
+};
+
+const handleModalSubmit = async (form: any) => {
+    formErrors.value = {};
+    try {
+        if (isEditMode.value && currentSupplier.value) {
+            await supplierServices.updateSupplier(currentSupplier.value.id, form, 'patch');
+            toast.add({ severity: 'success', summary: 'Proveedor actualizado', detail: 'Proveedor actualizado correctamente', life: 3000 });
+        } else {
+            await supplierServices.createSupplier(form);
+            toast.add({ severity: 'success', summary: 'Proveedor creado', detail: 'Proveedor registrado correctamente', life: 3000 });
+        }
+        closeModal();
+        fetchSuppliers(pagination.value.page);
+    } catch (e: any) {
+        if (e?.response?.data?.errors) {
+            formErrors.value = e.response.data.errors;
+        }
+        toast.add({ severity: 'error', summary: 'Error', detail: e?.response?.data?.message || 'No se pudo guardar el proveedor', life: 3000 });
+    }
+};
+
+// Mapeo para mostrar el tipo de proveedor con label legible
+const typeLabel = (type: number) => {
+    switch (type) {
+        case SupplierType.CLIENT: return 'Cliente';
+        case SupplierType.PROVIDER: return 'Proveedor';
+        case SupplierType.BOTH: return 'Ambos';
+        default: return 'Desconocido';
+    }
+};
+
+const typeSeverity = (type: number) => {
+    switch (type) {
+        case SupplierType.CLIENT: return 'info';
+        case SupplierType.PROVIDER: return 'success';
+        case SupplierType.BOTH: return 'warning';
+        default: return 'secondary';
+    }
+};
+
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Heading -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+            <div>
+                <h2 class="text-3xl font-black text-surface-900 dark:text-white tracking-tight">Gestión de Proveedores
+                </h2>
+                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Administra la base de datos de proveedores y
+                    sus contactos.</p>
+            </div>
+            <Button label="Nuevo Proveedor" icon="pi pi-plus" @click="openCreateModal" />
+            <SupplierModal :visible="showModal" :isEditMode="isEditMode" :supplier="currentSupplier"
+                :formErrors="formErrors" :loading="loadingSupplier" @update:visible="val => { if (!val) closeModal(); }"
+                @submit="handleModalSubmit" @cancel="closeModal" />
+        </div>
+
+        <!-- Filters Toolbar -->
+        <Card>
+            <template #content>
+                <div class="flex flex-wrap gap-4 items-end">
+                    <div class="flex-1 min-w-60">
+                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Buscar
+                            Nombre</label>
+                        <InputText v-model="searchName" placeholder="Ej. TechLogistics S.A." class="w-full" />
+                    </div>
+                    <div class="w-48">
+                        <label
+                            class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">Tipo</label>
+                        <Dropdown v-model="selectedType" :options="supplierTypes" optionLabel="label"
+                            optionValue="value" placeholder="Todos" class="w-full" @change="onFilter" />
+                    </div>
+                    <Button icon="pi pi-search" text rounded @click="onFilter" />
+                    <Button icon="pi pi-times" text rounded severity="secondary" label="Limpiar" @click="clearFilters" />
+                </div>
+            </template>
+        </Card>
+
+        <!-- Table Content -->
+        <Card>
+            <template #content>
+                <DataTable :value="suppliers" :loading="loading" stripedRows responsiveLayout="scroll"
+                    class="p-datatable-sm"><
+                    <Column field="name" header="Razón Social" style="min-width: 180px">
+                        <template #body="{ data }">
+                            <div>
+                                <div class="font-bold text-surface-900 dark:text-white">{{ data.name }}</div>
+                                <div class="text-xs text-gray-500">{{ data.comercial_name }}</div>
+                            </div>
+                        </template>
+                    </Column>
+                    <Column field="rfc" header="RFC" style="min-width: 130px">
+                        <template #body="{ data }">
+                            <span class="font-mono text-sm">{{ data.rfc }}</span>
+                        </template>
+                    </Column>
+                    <Column field="curp" header="CURP" style="min-width: 180px">
+                        <template #body="{ data }">
+                            <span class="font-mono text-sm">{{ data.curp }}</span>
+                        </template>
+                    </Column>
+                    <Column field="type" header="Tipo" style="min-width: 100px">
+                        <template #body="{ data }">
+                            <Tag :value="typeLabel(data.type)" :severity="typeSeverity(data.type)" />
+                        </template>
+                    </Column>
+                    <Column field="credit_limit" header="Límite de Crédito" style="min-width: 140px">
+                        <template #body="{ data }">
+                            <span class="font-semibold text-green-600 dark:text-green-400">${{ parseFloat(data.credit_limit).toLocaleString('es-MX', { minimumFractionDigits: 2 }) }}</span>
+                        </template>
+                    </Column>
+                    <Column field="payment_days" header="Días de Pago" style="min-width: 120px">
+                        <template #body="{ data }">
+                            <span class="font-semibold">{{ data.payment_days }} días</span>
+                        </template>
+                    </Column>
+                    <Column field="created_at" header="Fecha de Registro" style="min-width: 120px">
+                        <template #body="{ data }">
+                            <span class="text-sm">{{ new Date(data.created_at).toLocaleDateString('es-MX') }}</span>
+                        </template>
+                    </Column>
+                    <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right"
+                        style="min-width: 120px">
+                        <template #body="{ data }">
+                            <div class="flex items-center justify-end gap-2">
+                                <Button icon="pi pi-pencil" text rounded size="small" @click="openEditModal(data)" />
+                                <Button icon="pi pi-trash" text rounded size="small" severity="danger"
+                                    @click="handleDelete(data.id)" />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+                <div class="mt-4">
+                    <Paginator :first="pagination.first" :rows="pagination.rows" :totalRecords="pagination.total"
+                        :rowsPerPageOptions="[5, 10, 20, 50]" @page="onPageChange" />
+                </div>
+            </template>
+        </Card>
+
+    </div>
+    <ConfirmDialog />
+    <Toast />
+</template>
\ No newline at end of file
diff --git a/src/modules/catalog/components/units/Units.vue b/src/modules/catalog/components/units/Units.vue
new file mode 100644
index 0000000..e6e4568
--- /dev/null
+++ b/src/modules/catalog/components/units/Units.vue
@@ -0,0 +1,275 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import Breadcrumb from 'primevue/breadcrumb';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+import Toast from 'primevue/toast';
+import ConfirmDialog from 'primevue/confirmdialog';
+import ProgressSpinner from 'primevue/progressspinner';
+import { useUnitOfMeasureStore } from '../../stores/unitOfMeasureStore';
+import UnitsForm from './UnitsForm.vue';
+import type { UnitOfMeasure, CreateUnitOfMeasureData } from '../../types/unit-measure.interfaces';
+
+const router = useRouter();
+const toast = useToast();
+const confirm = useConfirm();
+const unitStore = useUnitOfMeasureStore();
+
+// Breadcrumb
+const breadcrumbItems = ref([
+    { label: 'Catálogo', route: '/catalog' },
+    { label: 'Unidades de Medida' }
+]);
+
+const home = ref({
+    icon: 'pi pi-home',
+    route: '/'
+});
+
+// State
+const showDialog = ref(false);
+const isEditing = ref(false);
+const selectedUnit = ref<UnitOfMeasure | null>(null);
+
+// Computed
+const units = computed(() => unitStore.units);
+const loading = computed(() => unitStore.loading);
+
+const getStatusConfig = (isActive: number) => {
+    return isActive === 1
+        ? { label: 'Activa', severity: 'success' }
+        : { label: 'Inactiva', severity: 'secondary' };
+};
+
+// Methods
+const openCreateDialog = () => {
+    isEditing.value = false;
+    selectedUnit.value = null;
+    showDialog.value = true;
+};
+
+const openEditDialog = (unit: UnitOfMeasure) => {
+    isEditing.value = true;
+    selectedUnit.value = unit;
+    showDialog.value = true;
+};
+
+const handleSaveUnit = async (data: CreateUnitOfMeasureData) => {
+    try {
+        if (isEditing.value && selectedUnit.value) {
+            await unitStore.updateUnit(selectedUnit.value.id, data);
+            toast.add({
+                severity: 'success',
+                summary: 'Actualización Exitosa',
+                detail: 'La unidad de medida ha sido actualizada correctamente.',
+                life: 3000
+            });
+        } else {
+            await unitStore.createUnit(data);
+            toast.add({
+                severity: 'success',
+                summary: 'Creación Exitosa',
+                detail: 'La unidad de medida ha sido creada correctamente.',
+                life: 3000
+            });
+        }
+        showDialog.value = false;
+    } catch (error) {
+        console.error('Error saving unit:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo guardar la unidad de medida. Por favor, intenta nuevamente.',
+            life: 3000
+        });
+    }
+};
+
+const confirmDelete = (unit: UnitOfMeasure) => {
+    confirm.require({
+        message: `¿Estás seguro de eliminar la unidad de medida "${unit.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Sí, eliminar',
+        rejectLabel: 'Cancelar',
+        acceptClass: 'p-button-danger',
+        accept: () => deleteUnit(unit.id)
+    });
+};
+
+const deleteUnit = async (id: number) => {
+    try {
+        await unitStore.deleteUnit(id);
+        toast.add({
+            severity: 'success',
+            summary: 'Eliminación Exitosa',
+            detail: 'La unidad de medida ha sido eliminada correctamente.',
+            life: 3000
+        });
+    } catch (error) {
+        console.error('Error deleting unit:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo eliminar la unidad de medida. Puede estar en uso.',
+            life: 3000
+        });
+    }
+};
+
+// Lifecycle
+onMounted(async () => {
+    await unitStore.fetchUnits();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast & Confirm Dialog -->
+        <Toast position="bottom-right" />
+        <ConfirmDialog />
+
+        <!-- Breadcrumb -->
+        <div class="flex flex-col gap-2">
+            <Breadcrumb :home="home" :model="breadcrumbItems">
+                <template #item="{ item }">
+                    <a 
+                        v-if="item.route" 
+                        :href="item.route"
+                        @click.prevent="router.push(item.route)"
+                        class="text-primary hover:underline"
+                    >
+                        {{ item.label }}
+                    </a>
+                    <span v-else class="text-surface-600 dark:text-surface-400">
+                        {{ item.label }}
+                    </span>
+                </template>
+            </Breadcrumb>
+            
+            <!-- Title -->
+            <div class="flex justify-between items-center">
+                <h1 class="text-3xl font-black leading-tight tracking-tight text-surface-900 dark:text-white">
+                    Unidades de Medida
+                </h1>
+                <Button
+                    label="Nueva Unidad"
+                    icon="pi pi-plus"
+                    @click="openCreateDialog"
+                />
+            </div>
+        </div>
+
+        <!-- Main Card -->
+        <Card>
+            <template #content>
+                <!-- Loading State -->
+                <div v-if="loading && units.length === 0" class="flex justify-center items-center py-12">
+                    <ProgressSpinner 
+                        style="width: 50px; height: 50px"
+                        strokeWidth="4"
+                        animationDuration="1s"
+                    />
+                </div>
+
+                <!-- Data Table -->
+                <DataTable
+                    v-else
+                    :value="units"
+                    :loading="loading"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    :paginator="true"
+                    :rows="10"
+                    :rowsPerPageOptions="[5, 10, 20, 50]"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                    currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} unidades"
+                >
+                    <Column field="abbreviation" header="Abreviatura" sortable style="width: 150px">
+                        <template #body="slotProps">
+                            <span class="font-mono font-semibold text-primary">
+                                {{ slotProps.data.abbreviation }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <Column field="name" header="Nombre" sortable>
+                        <template #body="slotProps">
+                            <span class="font-medium text-surface-900 dark:text-white">
+                                {{ slotProps.data.name }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <Column field="sat_unit.name" header="Unidad SAT" sortable style="width: 200px">
+                        <template #body="slotProps">
+                            <span class="text-sm text-surface-600 dark:text-surface-400">
+                                {{ slotProps.data.sat_unit?.name || 'N/A' }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <Column field="sat_unit.code" header="Código SAT" sortable style="width: 120px">
+                        <template #body="slotProps">
+                            <span class="font-mono text-sm text-surface-600 dark:text-surface-400">
+                                {{ slotProps.data.sat_unit?.code || 'N/A' }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <Column field="is_active" header="Estado" sortable style="width: 120px">
+                        <template #body="slotProps">
+                            <Tag
+                                :value="getStatusConfig(slotProps.data.is_active).label"
+                                :severity="getStatusConfig(slotProps.data.is_active).severity"
+                            />
+                        </template>
+                    </Column>
+
+                    <Column header="Acciones" style="width: 150px">
+                        <template #body="slotProps">
+                            <div class="flex gap-2">
+                                <Button
+                                    icon="pi pi-pencil"
+                                    text
+                                    rounded
+                                    severity="secondary"
+                                    @click="openEditDialog(slotProps.data)"
+                                    v-tooltip.top="'Editar'"
+                                />
+                                <Button
+                                    icon="pi pi-trash"
+                                    text
+                                    rounded
+                                    severity="danger"
+                                    @click="confirmDelete(slotProps.data)"
+                                    v-tooltip.top="'Eliminar'"
+                                />
+                            </div>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="text-center py-8 text-surface-500 dark:text-surface-400">
+                            No hay unidades de medida registradas.
+                        </div>
+                    </template>
+                </DataTable>
+            </template>
+        </Card>
+
+        <!-- Create/Edit Form Dialog -->
+        <UnitsForm
+            v-model:visible="showDialog"
+            :unit="selectedUnit"
+            :is-editing="isEditing"
+            @save="handleSaveUnit"
+        />
+    </div>
+</template>
diff --git a/src/modules/catalog/components/units/UnitsForm.vue b/src/modules/catalog/components/units/UnitsForm.vue
new file mode 100644
index 0000000..5267e5d
--- /dev/null
+++ b/src/modules/catalog/components/units/UnitsForm.vue
@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Dropdown from 'primevue/dropdown';
+import InputSwitch from 'primevue/inputswitch';
+import { satUnitsService } from '../../services/sat-units.services';
+import type { UnitOfMeasure, CreateUnitOfMeasureData, SatUnit } from '../../types/unit-measure.interfaces';
+
+interface Props {
+    visible: boolean;
+    unit?: UnitOfMeasure | null;
+    isEditing?: boolean;
+}
+
+interface Emits {
+    (e: 'update:visible', value: boolean): void;
+    (e: 'save', data: CreateUnitOfMeasureData): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    visible: false,
+    unit: null,
+    isEditing: false
+});
+
+const emit = defineEmits<Emits>();
+
+// Form data
+const formData = ref<CreateUnitOfMeasureData>({
+    name: '',
+    abbreviation: '',
+    code_sat: 1,
+    is_active: 1
+});
+
+// Estado interno del switch (boolean para el UI)
+const isActiveSwitch = ref(true);
+
+// SAT Units
+const satUnits = ref<SatUnit[]>([]);
+const loadingSatUnits = ref(false);
+const searchQuery = ref('');
+let searchTimeout: ReturnType<typeof setTimeout> | null = null;
+
+// Options para el dropdown
+const satUnitOptions = computed(() => 
+    satUnits.value.map(unit => ({
+        label: `${unit.code} - ${unit.name}`,
+        value: unit.id
+    }))
+);
+
+// Computed
+const dialogTitle = computed(() => 
+    props.isEditing ? 'Editar Unidad de Medida' : 'Nueva Unidad de Medida'
+);
+
+const isFormValid = computed(() => {
+    return !!(formData.value.name && formData.value.abbreviation);
+});
+
+const emptyMessage = computed(() => {
+    if (props.isEditing && satUnits.value.length === 1) {
+        return 'Escribe para buscar otra unidad SAT...';
+    }
+    return 'No se encontraron unidades. Escribe para buscar.';
+});
+
+// Load SAT Units
+const loadSatUnits = async (search: string) => {
+    // Solo buscar si hay texto
+    if (!search || search.trim().length === 0) {
+        // Si estamos editando y hay una unidad actual, mantenerla
+        if (props.unit?.sat_unit) {
+            satUnits.value = [props.unit.sat_unit];
+        } else {
+            satUnits.value = [];
+        }
+        return;
+    }
+    
+    try {
+        loadingSatUnits.value = true;
+        const response = await satUnitsService.getSatUnits(search);
+        satUnits.value = response.data;
+    } catch (error) {
+        console.error('Error loading SAT units:', error);
+        // Si hay error y estamos editando, mantener la unidad actual
+        if (props.unit?.sat_unit) {
+            satUnits.value = [props.unit.sat_unit];
+        } else {
+            satUnits.value = [];
+        }
+    } finally {
+        loadingSatUnits.value = false;
+    }
+};
+
+// Debounced search
+const handleSearchChange = (event: any) => {
+    const query = event.value || '';
+    searchQuery.value = query;
+    
+    // Limpiar timeout anterior
+    if (searchTimeout) {
+        clearTimeout(searchTimeout);
+    }
+    
+    // Aplicar debounce de 500ms
+    searchTimeout = setTimeout(() => {
+        loadSatUnits(query);
+    }, 500);
+};
+
+// Methods
+const resetForm = () => {
+    formData.value = {
+        name: '',
+        abbreviation: '',
+        code_sat: null,
+        is_active: 1
+    };
+    isActiveSwitch.value = true;
+};
+
+// Watch para actualizar el formulario cuando cambie la unidad
+watch(() => props.unit, (newUnit) => {
+    if (newUnit) {
+        formData.value = {
+            name: newUnit.name,
+            abbreviation: newUnit.abbreviation,
+            code_sat: newUnit.code_sat,
+            is_active: newUnit.is_active
+        };
+        isActiveSwitch.value = newUnit.is_active === 1;
+        
+        // Precargar la unidad SAT actual en el dropdown
+        if (newUnit.sat_unit) {
+            satUnits.value = [newUnit.sat_unit];
+        }
+    } else {
+        resetForm();
+        satUnits.value = []; // Limpiar el dropdown
+    }
+}, { immediate: true });
+
+const handleClose = () => {
+    emit('update:visible', false);
+    satUnits.value = []; // Limpiar las opciones del dropdown
+    resetForm();
+};
+
+const handleSave = () => {
+    // Convertir el switch boolean a number para el backend
+    formData.value.is_active = isActiveSwitch.value ? 1 : 0;
+    
+    emit('save', { ...formData.value });
+    handleClose();
+};
+</script>
+
+<template>
+    <Dialog
+        :visible="visible"
+        @update:visible="emit('update:visible', $event)"
+        :header="dialogTitle"
+        :modal="true"
+        :closable="true"
+        :draggable="false"
+        class="w-full max-w-md"
+    >
+        <div class="space-y-4 pt-4">
+            <!-- Name -->
+            <div>
+                <label for="name" class="block text-sm font-medium mb-2">
+                    Nombre <span class="text-red-500">*</span>
+                </label>
+                <InputText
+                    id="name"
+                    v-model="formData.name"
+                    class="w-full"
+                    placeholder="Ej: PIEZA, KILOGRAMO, METRO"
+                    :required="true"
+                />
+            </div>
+
+            <!-- Abbreviation -->
+            <div>
+                <label for="abbreviation" class="block text-sm font-medium mb-2">
+                    Abreviatura <span class="text-red-500">*</span>
+                </label>
+                <InputText
+                    id="abbreviation"
+                    v-model="formData.abbreviation"
+                    class="w-full"
+                    placeholder="Ej: PZA, kg, m"
+                    :required="true"
+                />
+            </div>
+
+            <!-- Code SAT -->
+            <div>
+                <label for="code_sat" class="block text-sm font-medium mb-2">
+                    Unidad SAT <span class="text-red-500">*</span>
+                </label>
+                <Dropdown
+                    id="code_sat"
+                    v-model="formData.code_sat"
+                    :options="satUnitOptions"
+                    optionLabel="label"
+                    optionValue="value"
+                    :loading="loadingSatUnits"
+                    placeholder="Escribe para buscar una unidad SAT..."
+                    class="w-full"
+                    :filter="true"
+                    filterPlaceholder="Buscar unidad SAT"
+                    :showClear="false"
+                    @filter="handleSearchChange"
+                    :emptyFilterMessage="emptyMessage"
+                />
+                <small class="text-surface-500 dark:text-surface-400">
+                    Unidad del catálogo SAT
+                </small>
+            </div>
+
+            <!-- Status -->
+            <div>
+                <label for="is_active" class="block text-sm font-medium mb-2">
+                    Estado
+                </label>
+                <div class="flex items-center gap-3">
+                    <InputSwitch
+                        id="is_active"
+                        v-model="isActiveSwitch"
+                    />
+                    <span class="text-sm font-medium">
+                        {{ isActiveSwitch ? 'Activa' : 'Inactiva' }}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="flex justify-end gap-2">
+                <Button
+                    label="Cancelar"
+                    severity="secondary"
+                    outlined
+                    @click="handleClose"
+                />
+                <Button
+                    :label="isEditing ? 'Actualizar' : 'Crear'"
+                    :disabled="!isFormValid"
+                    @click="handleSave"
+                />
+            </div>
+        </template>
+    </Dialog>
+</template>
diff --git a/src/modules/catalog/services/clasificationsComercial.ts b/src/modules/catalog/services/clasificationsComercial.ts
new file mode 100644
index 0000000..e0f52d7
--- /dev/null
+++ b/src/modules/catalog/services/clasificationsComercial.ts
@@ -0,0 +1,57 @@
+import api from '../../../services/api';
+import type { 
+    ComercialClassificationResponse, 
+    CreateComercialClassificationData, 
+    UpdateComercialClassificationData,
+    SingleComercialClassificationResponse
+} from '../types/comercialClassification';
+
+export const comercialClassificationService = {
+    /**
+     * Get all comercial classifications with pagination
+     * GET /api/comercial-classifications
+     */
+    async getClassifications(page = 1, perPage = 100): Promise<ComercialClassificationResponse> {
+        const response = await api.get(`/api/comercial-classifications`, {
+            params: { page, per_page: perPage }
+        });
+        console.log('Comercial Classifications response:', response);
+        return response.data;
+    },
+
+    /**
+     * Get a single comercial classification by ID
+     * GET /api/comercial-classifications/:id
+     */
+    async getClassificationById(id: number): Promise<SingleComercialClassificationResponse> {
+        const response = await api.get(`/api/comercial-classifications/${id}`);
+        return response.data;
+    },
+
+    /**
+     * Create a new comercial classification
+     * POST /api/comercial-classifications
+     */
+    async createClassification(data: CreateComercialClassificationData): Promise<SingleComercialClassificationResponse> {
+        const response = await api.post(`/api/comercial-classifications`, data);
+        console.log('Create Comercial Classification response:', response);
+        return response.data;
+    },
+
+    /**
+     * Update an existing comercial classification
+     * PUT /api/comercial-classifications/:id
+     */
+    async updateClassification(id: number, data: UpdateComercialClassificationData): Promise<SingleComercialClassificationResponse> {
+        const response = await api.put(`/api/comercial-classifications/${id}`, data);
+        return response.data;
+    },
+
+    /**
+     * Delete a comercial classification
+     * DELETE /api/comercial-classifications/:id
+     */
+    async deleteClassification(id: number): Promise<void> {
+        await api.delete(`/api/comercial-classifications/${id}`);
+    }
+};
diff --git a/src/modules/catalog/services/model-document.services.ts b/src/modules/catalog/services/model-document.services.ts
new file mode 100644
index 0000000..bd2e0e5
--- /dev/null
+++ b/src/modules/catalog/services/model-document.services.ts
@@ -0,0 +1,44 @@
+import api from '../../../services/api';
+import type { 
+    ModelDocument, 
+    ModelDocumentPaginatedResponse,
+    CreateModelDocumentData, 
+    UpdateModelDocumentData
+} from '../types/modelDocument.interface';
+
+export const modelDocumentService = {
+    // Obtener todos los documentos con paginación
+    getDocuments: async (page = 1, perPage = 15) => {
+        const response = await api.get<ModelDocumentPaginatedResponse>('/api/catalogs/document-models', {
+            params: { 
+                page, 
+                per_page: perPage 
+            }
+        });
+        return response.data;
+    },
+
+    // Obtener un documento por ID
+    getDocumentById: async (id: number) => {
+        const response = await api.get<{ data: ModelDocument }>(`/api/catalogs/document-models/${id}`);
+        return response.data;
+    },
+
+    // Crear nuevo documento
+    createDocument: async (data: CreateModelDocumentData) => {
+        const response = await api.post<{ data: ModelDocument }>('/api/catalogs/document-models', data);
+        return response.data;
+    },
+
+    // Actualizar documento
+    updateDocument: async (id: number, data: UpdateModelDocumentData) => {
+        const response = await api.put<{ data: ModelDocument }>(`/api/catalogs/document-models/${id}`, data);
+        return response.data;
+    },
+
+    // Eliminar documento (soft delete)
+    deleteDocument: async (id: number) => {
+        const response = await api.delete(`/api/catalogs/document-models/${id}`);
+        return response.data;
+    }
+};
diff --git a/src/modules/catalog/services/sat-code-products.services.ts b/src/modules/catalog/services/sat-code-products.services.ts
new file mode 100644
index 0000000..1ccb17e
--- /dev/null
+++ b/src/modules/catalog/services/sat-code-products.services.ts
@@ -0,0 +1,18 @@
+import api from "../../../services/api";
+
+export interface SatCodeProduct {
+    id: number;
+    code: string;
+    description: string;
+}
+
+export interface SatCodeProductResponse {
+    data: SatCodeProduct[];
+}
+
+export const satCodeProductsService = {
+    async getSatCodeProducts(search: string = ''): Promise<SatCodeProductResponse> {
+        const response = await api.get(`/api/sat/products?search=${search}`);
+        return response.data;
+    }
+};
\ No newline at end of file
diff --git a/src/modules/catalog/services/sat-units.services.ts b/src/modules/catalog/services/sat-units.services.ts
new file mode 100644
index 0000000..8e278e3
--- /dev/null
+++ b/src/modules/catalog/services/sat-units.services.ts
@@ -0,0 +1,17 @@
+import api from '../../../services/api';
+import type { SatUnit } from '../types/unit-measure.interfaces';
+
+// Respuesta del endpoint de unidades SAT
+export interface SatUnitsResponse {
+    data: SatUnit[];
+}
+
+export const satUnitsService = {
+    /**
+     * Get all SAT units with search filter
+     */
+    async getSatUnits(search: string = ''): Promise<SatUnitsResponse> {
+        const response = await api.get(`/api/sat/units?search=${search}`);
+        return response.data;
+    }
+};
diff --git a/src/modules/catalog/services/supplier.services.ts b/src/modules/catalog/services/supplier.services.ts
new file mode 100644
index 0000000..fc71133
--- /dev/null
+++ b/src/modules/catalog/services/supplier.services.ts
@@ -0,0 +1,87 @@
+import api from "../../../services/api";
+import type { SupplierCreateRequest, SupplierCreateResponse, SupplierDeleteResponse, SupplierListResponse, SupplierPaginatedResponse, SupplierUpdateRequest, SupplierUpdateResponse } from "../types/suppliers.interfaces";
+
+
+const supplierServices = {
+
+    /**
+     * Obtiene proveedores, paginados o no según el parámetro.
+     * @param paginated Si es false, retorna SupplierListResponse; si es true o undefined, retorna SupplierPaginatedResponse
+     */
+    async getSuppliers(
+        paginated?: boolean,
+        name?: string,
+        type?: string
+    ): Promise<SupplierPaginatedResponse | SupplierListResponse> {
+        try {
+            const params: any = {};
+            if (paginated === false) params.paginated = false;
+            if (name) params.name = name;
+            if (type) params.type = type;
+            const response = await api.get('/api/suppliers', { params });
+            console.log('📦 Suppliers response:', response);
+            return response.data;
+        } catch (error) {
+            console.error('❌ Error fetching suppliers:', error);
+            throw error;
+        }
+    },
+
+    async getSupplierById(supplierId: number): Promise<SupplierCreateResponse> {
+        try {
+            const response = await api.get(`/api/suppliers/${supplierId}`); 
+            console.log(`📦 Supplier with ID ${supplierId} response:`, response);
+            return response.data;
+        } catch (error) {
+            console.error(`❌ Error fetching supplier with ID ${supplierId}:`, error);
+            throw error;
+        }
+    },
+
+    async createSupplier(data: SupplierCreateRequest): Promise<SupplierCreateResponse> {
+        try {
+            const response = await api.post('/api/suppliers', data);
+            console.log('✅ Supplier created successfully:', response);
+            return response.data;
+        } catch (error) {
+            console.error('❌ Error creating supplier:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Actualiza un proveedor existente
+     * @param supplierId ID del proveedor a actualizar
+     * @param data Campos a actualizar (parcial o total)
+     * @param method 'patch' (default) o 'put'
+     */
+    async updateSupplier(
+        supplierId: number,
+        data: SupplierUpdateRequest,
+        method: 'patch' | 'put' = 'patch'
+    ): Promise<SupplierUpdateResponse> {
+        try {
+            const response = await api[method](`/api/suppliers/${supplierId}`, data);
+            console.log(`✏️ Supplier with ID ${supplierId} updated successfully.`, response);
+            return response.data;
+        } catch (error) {
+            console.error(`❌ Error updating supplier with ID ${supplierId}:`, error);
+            throw error;
+        }
+    },
+
+
+    async deleteSupplier(supplierId: number): Promise<SupplierDeleteResponse> {
+        try {
+            const response = await api.delete(`/api/suppliers/${supplierId}`);
+            console.log(`🗑️ Supplier with ID ${supplierId} deleted successfully.`);
+            return response.data;
+        } catch (error) {
+            console.error(`❌ Error deleting supplier with ID ${supplierId}:`, error);
+            throw error;
+        }
+    }
+
+};
+
+export { supplierServices };
\ No newline at end of file
diff --git a/src/modules/catalog/services/unit-measure.services.ts b/src/modules/catalog/services/unit-measure.services.ts
new file mode 100644
index 0000000..67c5cea
--- /dev/null
+++ b/src/modules/catalog/services/unit-measure.services.ts
@@ -0,0 +1,52 @@
+import api from '../../../services/api';
+import type { 
+    UnitOfMeasurePaginatedResponse, 
+    UnitOfMeasureUnpaginatedResponse,
+    CreateUnitOfMeasureData,
+    UpdateUnitOfMeasureData,
+    SingleUnitOfMeasureResponse,
+    UnitOfMeasureResponseById
+} from '../types/unit-measure.interfaces';
+
+
+export const unitOfMeasureService = {
+    /**
+     * Get all units of measure with optional pagination and search
+     */
+    async getUnits(paginate: boolean = true, search: string = ''): Promise<UnitOfMeasurePaginatedResponse | UnitOfMeasureUnpaginatedResponse> {
+        const response = await api.get(`/api/catalogs/units-of-measure?paginate=${paginate}&search=${search}`);
+        return response.data;
+    },
+
+    /**
+     * Get a single unit of measure by ID
+     */
+    async getUnitById(id: number): Promise<UnitOfMeasureResponseById> {
+        const response = await api.get(`/api/catalogs/units-of-measure/${id}`);
+        return response.data;
+    },
+
+    /**
+     * Create a new unit of measure
+     */
+    async createUnit(data: CreateUnitOfMeasureData): Promise<SingleUnitOfMeasureResponse> {
+        const response = await api.post(`/api/catalogs/units-of-measure`, data);
+        console.log('Create Unit response:', response);
+        return response.data;
+    },
+
+    /**
+     * Update an existing unit of measure
+     */
+    async updateUnit(id: number, data: UpdateUnitOfMeasureData): Promise<SingleUnitOfMeasureResponse> {
+        const response = await api.put(`/api/catalogs/units-of-measure/${id}`, data);
+        return response.data;
+    },
+
+    /**
+     * Delete a unit of measure
+     */
+    async deleteUnit(id: number): Promise<void> {
+        await api.delete(`/api/catalogs/units-of-measure/${id}`);
+    }
+};
diff --git a/src/modules/catalog/services/unitsTypes.ts b/src/modules/catalog/services/unitsTypes.ts
new file mode 100644
index 0000000..9a649c4
--- /dev/null
+++ b/src/modules/catalog/services/unitsTypes.ts
@@ -0,0 +1,14 @@
+import api from '../../../services/api';
+import type { UnitTypesResponse } from '../types/unitTypes';
+
+export const unitTypesService = {
+    /**
+     * Get all unit types
+     * Returns the list of available unit types (Unidad, Peso, Volumen, Longitud, etc.)
+     */
+    async getUnitTypes(): Promise<UnitTypesResponse> {
+        const response = await api.get<UnitTypesResponse>(`/api/catalogs/unit-types`);
+        console.log('Unit Types response:', response.data);
+        return response.data;
+    },
+};
diff --git a/src/modules/catalog/stores/comercialClassificationStore.ts b/src/modules/catalog/stores/comercialClassificationStore.ts
new file mode 100644
index 0000000..bfa100b
--- /dev/null
+++ b/src/modules/catalog/stores/comercialClassificationStore.ts
@@ -0,0 +1,142 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { comercialClassificationService } from '../services/clasificationsComercial';
+import type { ComercialClassification, CreateComercialClassificationData, UpdateComercialClassificationData } from '../types/comercialClassification';
+
+export const useComercialClassificationStore = defineStore('comercialClassification', () => {
+    // State
+    const classifications = ref<ComercialClassification[]>([]);
+    const loading = ref(false);
+    const loaded = ref(false);
+    const error = ref<string | null>(null);
+
+    // Getters
+    const activeClassifications = computed(() => 
+        classifications.value.filter(cls => cls.is_active === 1)
+    );
+
+    const inactiveClassifications = computed(() => 
+        classifications.value.filter(cls => cls.is_active === 0)
+    );
+
+    const classificationCount = computed(() => classifications.value.length);
+
+    const getClassificationById = computed(() => {
+        return (id: number) => classifications.value.find(cls => cls.id === id);
+    });
+
+    // Actions
+    const fetchClassifications = async (force = false) => {
+        if (loaded.value && !force) {
+            console.log('Comercial classifications already loaded from store');
+            return;
+        }
+
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            const response = await comercialClassificationService.getClassifications();
+            classifications.value = response.data.comercial_classifications.data;
+            loaded.value = true;
+            
+            console.log('Comercial classifications loaded into store:', classifications.value.length);
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error loading comercial classifications';
+            console.error('Error in comercial classification store:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const refreshClassifications = () => {
+        return fetchClassifications(true);
+    };
+
+    const createClassification = async (data: CreateComercialClassificationData) => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            await comercialClassificationService.createClassification(data);
+            
+            // Refrescar la lista después de crear
+            await refreshClassifications();
+            
+            console.log('Comercial classification created successfully');
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error creating comercial classification';
+            console.error('Error creating comercial classification:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const updateClassification = async (id: number, data: UpdateComercialClassificationData) => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            await comercialClassificationService.updateClassification(id, data);
+            
+            // Refrescar la lista después de actualizar
+            await refreshClassifications();
+            
+            console.log('Comercial classification updated successfully');
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error updating comercial classification';
+            console.error('Error updating comercial classification:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const deleteClassification = async (id: number) => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            await comercialClassificationService.deleteClassification(id);
+            
+            // Refrescar la lista después de eliminar
+            await refreshClassifications();
+            
+            console.log('Comercial classification deleted successfully');
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error deleting comercial classification';
+            console.error('Error deleting comercial classification:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const clearClassifications = () => {
+        classifications.value = [];
+        loaded.value = false;
+        error.value = null;
+    };
+
+    return {
+        // State
+        classifications,
+        loading,
+        loaded,
+        error,
+        // Getters
+        activeClassifications,
+        inactiveClassifications,
+        classificationCount,
+        getClassificationById,
+        // Actions
+        fetchClassifications,
+        refreshClassifications,
+        createClassification,
+        updateClassification,
+        deleteClassification,
+        clearClassifications,
+    };
+});
diff --git a/src/modules/catalog/stores/modelDocumentStore.ts b/src/modules/catalog/stores/modelDocumentStore.ts
new file mode 100644
index 0000000..d37e3f5
--- /dev/null
+++ b/src/modules/catalog/stores/modelDocumentStore.ts
@@ -0,0 +1,115 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { modelDocumentService } from '../services/model-document.services';
+import type { ModelDocument, CreateModelDocumentData, UpdateModelDocumentData } from '../types/modelDocument.interface';
+
+export const useModelDocumentStore = defineStore('modelDocument', () => {
+    // State
+    const documents = ref<ModelDocument[]>([]);
+    const pagination = ref({
+        currentPage: 1,
+        perPage: 15,
+        total: 0,
+        lastPage: 1
+    });
+    const loading = ref(false);
+    const error = ref<string | null>(null);
+
+    // Getters
+    const activeDocuments = computed(() => 
+        documents.value.filter(doc => doc.deleted_at === null)
+    );
+
+    const deletedDocuments = computed(() => 
+        documents.value.filter(doc => doc.deleted_at !== null)
+    );
+
+    // Actions
+    const fetchDocuments = async (page = 1) => {
+        loading.value = true;
+        error.value = null;
+        try {
+            const response = await modelDocumentService.getDocuments(page, pagination.value.perPage);
+            documents.value = response.data;
+            pagination.value = {
+                currentPage: response.current_page,
+                perPage: response.per_page,
+                total: response.total,
+                lastPage: response.last_page
+            };
+        } catch (err: any) {
+            error.value = err.message || 'Error al cargar documentos';
+            console.error('Error fetching documents:', err);
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const createDocument = async (data: CreateModelDocumentData) => {
+        loading.value = true;
+        error.value = null;
+        try {
+            await modelDocumentService.createDocument(data);
+            // Recargar la lista después de crear
+            await fetchDocuments(pagination.value.currentPage);
+        } catch (err: any) {
+            error.value = err.message || 'Error al crear documento';
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const updateDocument = async (id: number, data: UpdateModelDocumentData) => {
+        loading.value = true;
+        error.value = null;
+        try {
+            const response = await modelDocumentService.updateDocument(id, data);
+            const index = documents.value.findIndex(doc => doc.id === id);
+            if (index !== -1) {
+                documents.value[index] = response.data;
+            }
+        } catch (err: any) {
+            error.value = err.message || 'Error al actualizar documento';
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const deleteDocument = async (id: number) => {
+        loading.value = true;
+        error.value = null;
+        try {
+            await modelDocumentService.deleteDocument(id);
+            // Recargar la lista después de eliminar
+            await fetchDocuments(pagination.value.currentPage);
+        } catch (err: any) {
+            error.value = err.message || 'Error al eliminar documento';
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const changePage = async (page: number) => {
+        await fetchDocuments(page);
+    };
+
+    return {
+        // State
+        documents,
+        pagination,
+        loading,
+        error,
+        // Getters
+        activeDocuments,
+        deletedDocuments,
+        // Actions
+        fetchDocuments,
+        createDocument,
+        updateDocument,
+        deleteDocument,
+        changePage
+    };
+});
diff --git a/src/modules/catalog/stores/supplierStore.ts b/src/modules/catalog/stores/supplierStore.ts
new file mode 100644
index 0000000..201e6cd
--- /dev/null
+++ b/src/modules/catalog/stores/supplierStore.ts
@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { supplierServices } from '../services/supplier.services';
+import type { Supplier } from '../types/suppliers.interfaces';
+
+export const useSupplierStore = defineStore('supplier', () => {
+	const suppliers = ref<Supplier[]>([]);
+	const loading = ref(false);
+	const error = ref<string | null>(null);
+
+	async function fetchAllSuppliers() {
+		loading.value = true;
+		error.value = null;
+		try {
+			const response = await supplierServices.getSuppliers(false);
+			// Si la respuesta es paginada, usar response.data; si es lista, usar response.suppliers o response directamente
+			if (Array.isArray(response)) {
+				suppliers.value = response as Supplier[];
+			} else if ('suppliers' in response) {
+				suppliers.value = (response as any).suppliers;
+			} else if ('data' in response) {
+				suppliers.value = (response as any).data;
+			} else {
+				suppliers.value = [];
+			}
+		} catch (e: any) {
+			error.value = e?.message || 'Error al cargar proveedores';
+			suppliers.value = [];
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	return {
+		suppliers,
+		loading,
+		error,
+		fetchAllSuppliers,
+	};
+});
diff --git a/src/modules/catalog/stores/unitOfMeasureStore.ts b/src/modules/catalog/stores/unitOfMeasureStore.ts
new file mode 100644
index 0000000..0ff506c
--- /dev/null
+++ b/src/modules/catalog/stores/unitOfMeasureStore.ts
@@ -0,0 +1,162 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { unitOfMeasureService } from '../services/unit-measure.services';
+import type { 
+    UnitOfMeasure, 
+    CreateUnitOfMeasureData, 
+    UpdateUnitOfMeasureData 
+} from '../types/unit-measure.interfaces';
+
+export const useUnitOfMeasureStore = defineStore('unitOfMeasure', () => {
+    // State
+    const units = ref<UnitOfMeasure[]>([]);
+    const loading = ref(false);
+    const loaded = ref(false);
+    const error = ref<string | null>(null);
+
+    // Getters
+    const activeUnits = computed(() => 
+        units.value.filter(unit => unit.is_active === 1)
+    );
+
+    const inactiveUnits = computed(() => 
+        units.value.filter(unit => unit.is_active === 0)
+    );
+
+    const unitCount = computed(() => units.value.length);
+
+    const getUnitById = computed(() => {
+        return (id: number) => units.value.find(unit => unit.id === id);
+    });
+
+    const getUnitByAbbreviation = computed(() => {
+        return (abbreviation: string) => 
+            units.value.find(unit => unit.abbreviation.toLowerCase() === abbreviation.toLowerCase());
+    });
+
+    // Actions
+    const fetchUnits = async (force = false, paginate = true, search = '') => {
+        // Si ya están cargados y no se fuerza la recarga, no hacer nada
+        if (loaded.value && !force) {
+            console.log('Units of measure already loaded from store');
+            return;
+        }
+
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            const response = await unitOfMeasureService.getUnits(paginate, search);
+            
+            // Manejar respuesta paginada o no paginada
+            if ('current_page' in response) {
+                // Respuesta paginada
+                units.value = response.data;
+            } else {
+                // Respuesta no paginada
+                units.value = response.data;
+            }
+            
+            loaded.value = true;
+            
+            console.log('Units of measure loaded into store:', units.value.length);
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error loading units of measure';
+            console.error('Error in unit of measure store:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const refreshUnits = () => {
+        return fetchUnits(true);
+    };
+
+    const createUnit = async (data: CreateUnitOfMeasureData) => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            await unitOfMeasureService.createUnit(data);
+            
+            // Refrescar la lista después de crear
+            await refreshUnits();
+            
+            console.log('Unit of measure created successfully');
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error creating unit of measure';
+            console.error('Error creating unit of measure:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const updateUnit = async (id: number, data: UpdateUnitOfMeasureData) => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            await unitOfMeasureService.updateUnit(id, data);
+            
+            // Refrescar la lista después de actualizar
+            await refreshUnits();
+            
+            console.log('Unit of measure updated successfully');
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error updating unit of measure';
+            console.error('Error updating unit of measure:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const deleteUnit = async (id: number) => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            await unitOfMeasureService.deleteUnit(id);
+            
+            // Refrescar la lista después de eliminar
+            await refreshUnits();
+            
+            console.log('Unit of measure deleted successfully');
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error deleting unit of measure';
+            console.error('Error deleting unit of measure:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const clearUnits = () => {
+        units.value = [];
+        loaded.value = false;
+        error.value = null;
+    };
+
+    return {
+        // State
+        units,
+        loading,
+        loaded,
+        error,
+        // Getters
+        activeUnits,
+        inactiveUnits,
+        unitCount,
+        getUnitById,
+        getUnitByAbbreviation,
+        // Actions
+        fetchUnits,
+        refreshUnits,
+        createUnit,
+        updateUnit,
+        deleteUnit,
+        clearUnits,
+    };
+});
diff --git a/src/modules/catalog/types/comercialClassification.d.ts b/src/modules/catalog/types/comercialClassification.d.ts
new file mode 100644
index 0000000..60d57b7
--- /dev/null
+++ b/src/modules/catalog/types/comercialClassification.d.ts
@@ -0,0 +1,61 @@
+/**
+ * Comercial Classification Type Definitions
+ */
+
+export interface ComercialClassification {
+    id: number;
+    code: string;
+    name: string;
+    description?: string;
+    parent_id: number | null;
+    is_active: number;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+    children?: ComercialClassification[];
+}
+
+export interface CreateComercialClassificationData {
+    code: string;
+    name: string;
+    description?: string;
+    parent_id?: number | null;
+    is_active?: number;
+}
+
+export interface UpdateComercialClassificationData {
+    code?: string;
+    name?: string;
+    description?: string;
+    parent_id?: number | null;
+    is_active?: number;
+}
+
+export interface ComercialClassificationData {
+    current_page: number;
+    data: ComercialClassification[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+export interface ComercialClassificationResponse {
+    status: string;
+    data: {
+        comercial_classifications: ComercialClassificationData;
+    };
+}
+
+export interface SingleComercialClassificationResponse {
+    status: string;
+    data: {
+        comercial_classification: ComercialClassification;
+    };
+}
diff --git a/src/modules/catalog/types/modelDocument.interface.ts b/src/modules/catalog/types/modelDocument.interface.ts
new file mode 100644
index 0000000..ff283f3
--- /dev/null
+++ b/src/modules/catalog/types/modelDocument.interface.ts
@@ -0,0 +1,64 @@
+// Tipos para Documentos del Sistema
+export interface ModelDocument {
+    id: number;
+    name: string;
+    module: number;
+    type: number;
+    num_folio: number;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+}
+
+export interface PaginationLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+export interface ModelDocumentPaginatedResponse {
+    current_page: number;
+    data: ModelDocument[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: PaginationLink[];
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+export interface CreateModelDocumentData {
+    name: string;
+    module: number;
+    type: number;
+    num_folio?: number;
+}
+
+export interface UpdateModelDocumentData extends Partial<CreateModelDocumentData> {
+}
+
+export interface ModelDocumentStats {
+    total_active: number;
+    last_folio: string;
+    archived: number;
+}
+
+// Module mapping
+export const MODULE_NAMES: Record<number, string> = {
+    1: 'Ventas',
+    2: 'Compras',
+    3: 'Clientes',
+    4: 'Proveedores',
+    5: 'Inventarios'
+};
+
+// Type mapping
+export const TYPE_NAMES: Record<number, string> = {
+    0: 'Sin Folio',
+    1: 'Con Folio'
+};
diff --git a/src/modules/catalog/types/suppliers.interfaces.ts b/src/modules/catalog/types/suppliers.interfaces.ts
new file mode 100644
index 0000000..e3adaef
--- /dev/null
+++ b/src/modules/catalog/types/suppliers.interfaces.ts
@@ -0,0 +1,99 @@
+// Enum para tipos de proveedor
+export const SupplierType = {
+	CLIENT: 0,
+	PROVIDER: 1,
+	BOTH: 2
+} as const;
+
+export type SupplierType = typeof SupplierType[keyof typeof SupplierType];
+
+// Errores de validación del formulario de proveedor
+export interface SupplierFormErrors {
+	name?: string[];
+	comercial_name?: string[];
+	rfc?: string[];
+	curp?: string[];
+	type?: string[];
+	credit_limit?: string[];
+	payment_days?: string[];
+}
+// Respuesta simple de proveedores (sin paginación)
+export interface SupplierListResponse {
+	data: Supplier[];
+}
+
+export interface Supplier {
+	id: number;
+	name: string;
+	comercial_name: string;
+	rfc: string;
+	curp: string;
+	type: SupplierType;
+	credit_limit: string;
+	payment_days: number;
+	contact_email?: string;
+	phone_number?: string;
+	addresses?: SupplierAddress[];
+	created_at: string;
+	updated_at: string;
+	deleted_at: string | null;
+}
+
+export interface SupplierPaginationLink {
+	url: string | null;
+	label: string;
+	active: boolean;
+}
+
+export interface SupplierPaginatedResponse {
+	current_page: number;
+	data: Supplier[];
+	first_page_url: string;
+	from: number;
+	last_page: number;
+	last_page_url: string;
+	links: SupplierPaginationLink[];
+	next_page_url: string | null;
+	path: string;
+	per_page: number;
+	prev_page_url: string | null;
+	to: number;
+	total: number;
+}
+
+export interface SupplierDeleteResponse {
+    message: string;
+    data: null;
+}
+
+export interface SupplierAddress {
+    country: string;
+    postal_code: string;
+    state: string;
+    municipality: string;
+    city: string;
+    street: string;
+    num_ext: string;
+    num_int: string;
+}
+
+export interface SupplierCreateRequest {
+    name: string;
+    comercial_name: string;
+    rfc: string;
+    curp: string;
+    type: SupplierType;
+    credit_limit: number;
+    payment_days: number;
+    contact_email?: string;
+    phone_number?: string;
+    addresses: SupplierAddress[];
+}
+
+export interface SupplierCreateResponse {
+    data: Supplier;
+}
+
+// Para actualización, todos los campos son opcionales
+export type SupplierUpdateRequest = Partial<SupplierCreateRequest>;
+export type SupplierUpdateResponse = SupplierCreateResponse;
\ No newline at end of file
diff --git a/src/modules/catalog/types/unit-measure.interfaces.ts b/src/modules/catalog/types/unit-measure.interfaces.ts
new file mode 100644
index 0000000..0ab0ff9
--- /dev/null
+++ b/src/modules/catalog/types/unit-measure.interfaces.ts
@@ -0,0 +1,81 @@
+// Interface para la unidad SAT
+export interface SatUnit {
+  id: number;
+  code: string;
+  name: string;
+  symbol: string;
+  created_at: string;
+  updated_at: string;
+}
+
+// Interface para la Unidad de Medida
+export interface UnitOfMeasure {
+  id: number;
+  name: string;
+  abbreviation: string;
+  is_active: number;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  code_sat: number;
+  sat_unit: SatUnit;
+}
+
+// Interfaces para crear y actualizar unidades de medida
+export interface CreateUnitOfMeasureData {
+  name: string;
+  abbreviation: string;
+  code_sat: number | null;
+  is_active: number;
+}
+
+export interface UpdateUnitOfMeasureData {
+  name?: string;
+  abbreviation?: string;
+  code_sat?: number | null;
+  is_active?: number;
+}
+
+// Interface para los links de paginación
+export interface PaginationLink {
+  url: string | null;
+  label: string;
+  active: boolean;
+}
+
+// Interface genérica para respuestas paginadas
+export interface PaginatedResponse<T> {
+  current_page: number;
+  data: T[];
+  first_page_url: string;
+  from: number;
+  last_page: number;
+  last_page_url: string;
+  links: PaginationLink[];
+  next_page_url: string | null;
+  path: string;
+  per_page: number;
+  prev_page_url: string | null;
+  to: number;
+  total: number;
+}
+
+// Interface genérica para respuestas sin paginación
+export interface UnpaginatedResponse<T> {
+  data: T[];
+}
+
+// Tipo específico para la respuesta paginada de Unidades de Medida
+export type UnitOfMeasurePaginatedResponse = PaginatedResponse<UnitOfMeasure>;
+
+// Tipo específico para la respuesta no paginada de Unidades de Medida
+export type UnitOfMeasureUnpaginatedResponse = UnpaginatedResponse<UnitOfMeasure>;
+
+export type UnitOfMeasureResponseById = {
+    data: UnitOfMeasure;
+};
+
+export interface SingleUnitOfMeasureResponse {
+    message: string;
+    data: UnitOfMeasure;
+}
\ No newline at end of file
diff --git a/src/modules/catalog/types/unitTypes.d.ts b/src/modules/catalog/types/unitTypes.d.ts
new file mode 100644
index 0000000..7a7c723
--- /dev/null
+++ b/src/modules/catalog/types/unitTypes.d.ts
@@ -0,0 +1,15 @@
+/**
+ * Unit Types Definitions
+ */
+
+export interface UnitType {
+    id: number;
+    name: string;
+}
+
+export interface UnitTypesResponse {
+    status: string;
+    data: {
+        unit_types: UnitType[];
+    };
+}
diff --git a/src/modules/products/components/ProductForm.vue b/src/modules/products/components/ProductForm.vue
new file mode 100644
index 0000000..facc074
--- /dev/null
+++ b/src/modules/products/components/ProductForm.vue
@@ -0,0 +1,717 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import Card from 'primevue/card';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import Button from 'primevue/button';
+import FileUpload from 'primevue/fileupload';
+import Dropdown from 'primevue/dropdown';
+import { useComercialClassificationStore } from '../../catalog/stores/comercialClassificationStore';
+import { useUnitOfMeasureStore } from '../../catalog/stores/unitOfMeasureStore';
+import { satCodeProductsService, type SatCodeProduct } from '../../catalog/services/sat-code-products.services';
+import type { Product, CreateProductData } from '../types/product';
+
+// Props
+interface Props {
+    product?: Product | null;
+    isEditing?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    product: null,
+    isEditing: false
+});
+
+// Emits
+const emit = defineEmits<{
+    save: [data: CreateProductData];
+    cancel: [];
+}>();
+
+// Stores
+const clasificationsStore = useComercialClassificationStore();
+const unitOfMeasureStore = useUnitOfMeasureStore();
+
+// Form data
+const formData = ref<CreateProductData>({
+    code: '',
+    sku: '',
+    name: '',
+    barcode: '',
+    description: '',
+    unit_of_measure_id: 0,
+    suggested_sale_price: 0,
+    attributes: null,
+    is_active: true,
+    is_serial: false,
+    sat_code_product_id: null,
+    classifications: []
+});
+
+// Temporary string for price input
+const priceInput = ref<string>('0');
+
+// SAT Code Products
+const satCodeProducts = ref<SatCodeProduct[]>([]);
+const loadingSatCodeProducts = ref(false);
+const searchSatQuery = ref('');
+let searchSatTimeout: ReturnType<typeof setTimeout> | null = null;
+
+// Attributes management
+interface AttributeValue {
+    id: string;
+    value: string;
+}
+
+interface AttributeField {
+    id: string;
+    name: string;
+    values: AttributeValue[];
+}
+
+const attributes = ref<AttributeField[]>([]);
+
+// Units of measure from store
+const unitsOfMeasure = computed(() => {
+    return unitOfMeasureStore.activeUnits.map(unit => ({
+        label: unit.name,
+        value: unit.id
+    }));
+});
+
+// Search classifications
+const searchClassification = ref('');
+
+// Computed para clasificaciones filtradas por búsqueda
+const filteredClassifications = computed(() => {
+    const search = searchClassification.value.toLowerCase().trim();
+    
+    if (!search) {
+        // Retornar solo clasificaciones padre (sin parent_id)
+        return clasificationsStore.classifications.filter(cls => cls.parent_id === null);
+    }
+    
+    // Filtrar clasificaciones que coincidan con la búsqueda
+    return clasificationsStore.classifications
+        .filter(cls => cls.parent_id === null)
+        .map(parent => {
+            // Filtrar hijos que coincidan con la búsqueda
+            const matchingChildren = parent.children?.filter(child =>
+                child.name.toLowerCase().includes(search) ||
+                child.code.toLowerCase().includes(search)
+            ) || [];
+            
+            // Incluir el padre si coincide o tiene hijos que coincidan
+            const parentMatches = parent.name.toLowerCase().includes(search) ||
+                                 parent.code.toLowerCase().includes(search);
+            
+            if (parentMatches || matchingChildren.length > 0) {
+                return {
+                    ...parent,
+                    children: matchingChildren.length > 0 ? matchingChildren : parent.children
+                };
+            }
+            return null;
+        })
+        .filter(cls => cls !== null);
+});
+
+// Verificar si una clasificación está seleccionada
+const isClassificationSelected = (classificationId: number) => {
+    return formData.value.classifications?.includes(classificationId) || false;
+};
+
+// Toggle clasificación (agregar o quitar)
+const toggleClassification = (classificationId: number) => {
+    if (!formData.value.classifications) {
+        formData.value.classifications = [];
+    }
+    
+    const index = formData.value.classifications.indexOf(classificationId);
+    if (index > -1) {
+        // Quitar clasificación
+        formData.value.classifications.splice(index, 1);
+    } else {
+        // Agregar clasificación
+        formData.value.classifications.push(classificationId);
+    }
+    
+    console.log('📋 Classifications updated:', formData.value.classifications);
+};
+
+const loadingClassifications = computed(() => clasificationsStore.loading);
+
+// Options para el dropdown de SAT
+const satCodeProductOptions = computed(() => 
+    satCodeProducts.value.map(product => ({
+        label: `${product.code} - ${product.description}`,
+        value: product.id
+    }))
+);
+
+const satEmptyMessage = computed(() => {
+    if (props.isEditing && satCodeProducts.value.length === 1) {
+        return 'Escribe para buscar otro código SAT...';
+    }
+    return 'No se encontraron códigos. Escribe para buscar.';
+});
+
+// Load SAT Code Products
+const loadSatCodeProducts = async (search: string) => {
+    // Solo buscar si hay texto
+    if (!search || search.trim().length === 0) {
+        // Si estamos editando y hay un código actual, mantenerlo
+        if (props.product?.sat_code_product) {
+            satCodeProducts.value = [props.product.sat_code_product];
+        } else {
+            satCodeProducts.value = [];
+        }
+        return;
+    }
+    
+    try {
+        loadingSatCodeProducts.value = true;
+        const response = await satCodeProductsService.getSatCodeProducts(search);
+        satCodeProducts.value = response.data;
+    } catch (error) {
+        console.error('Error loading SAT code products:', error);
+        // Si hay error y estamos editando, mantener el código actual
+        if (props.product?.sat_code_product) {
+            satCodeProducts.value = [props.product.sat_code_product];
+        } else {
+            satCodeProducts.value = [];
+        }
+    } finally {
+        loadingSatCodeProducts.value = false;
+    }
+};
+
+// Debounced search for SAT codes
+const handleSatSearchChange = (event: any) => {
+    const query = event.value || '';
+    searchSatQuery.value = query;
+    
+    // Limpiar timeout anterior
+    if (searchSatTimeout) {
+        clearTimeout(searchSatTimeout);
+    }
+    
+    // Aplicar debounce de 500ms
+    searchSatTimeout = setTimeout(() => {
+        loadSatCodeProducts(query);
+    }, 500);
+};
+
+// Load classifications on mount
+onMounted(async () => {
+    console.log('🔄 ProductForm mounted, loading classifications and units of measure...');
+    try {
+        await Promise.all([
+            clasificationsStore.fetchClassifications(),
+            unitOfMeasureStore.fetchUnits()
+        ]);
+        console.log('✅ Classifications loaded:', clasificationsStore.classifications.length);
+        console.log('✅ Units of measure loaded:', unitOfMeasureStore.units.length);
+    } catch (error) {
+        console.error('❌ Error loading data:', error);
+    }
+});
+
+// Watch for product changes (when editing)
+watch(() => props.product, (newProduct) => {
+    if (newProduct) {
+        formData.value = {
+            code: newProduct.code,
+            sku: newProduct.sku,
+            name: newProduct.name,
+            barcode: newProduct.barcode || '',
+            description: newProduct.description || '',
+            unit_of_measure_id: newProduct.unit_of_measure_id,
+            suggested_sale_price: newProduct.suggested_sale_price,
+            attributes: newProduct.attributes || {},
+            is_active: newProduct.is_active,
+            is_serial: newProduct.is_serial || false,
+            sat_code_product_id: newProduct.sat_code_product_id || null,
+            classifications: newProduct.classifications?.map(c => c.id) || []
+        };
+
+        // Precargar el código SAT actual en el dropdown
+        if (newProduct.sat_code_product) {
+            satCodeProducts.value = [newProduct.sat_code_product];
+        }
+
+        priceInput.value = newProduct.suggested_sale_price.toString();
+
+        // Convert attributes object to array format
+        if (newProduct.attributes) {
+            attributes.value = Object.entries(newProduct.attributes).map(([key, values], index) => ({
+                id: `attr-${index}`,
+                name: key,
+                values: values.map((val, valIndex) => ({
+                    id: `val-${index}-${valIndex}`,
+                    value: val
+                }))
+            }));
+        }
+    }
+}, { immediate: true });
+
+// Attribute methods
+const addAttribute = () => {
+    const newId = `attr-${Date.now()}`;
+    attributes.value.push({
+        id: newId,
+        name: '',
+        values: [{ id: `val-${newId}-0`, value: '' }]
+    });
+};
+
+const removeAttribute = (attributeId: string) => {
+    attributes.value = attributes.value.filter(attr => attr.id !== attributeId);
+};
+
+const addAttributeValue = (attributeId: string) => {
+    const attribute = attributes.value.find(attr => attr.id === attributeId);
+    if (attribute) {
+        const newValueId = `val-${attributeId}-${attribute.values.length}`;
+        attribute.values.push({ id: newValueId, value: '' });
+    }
+};
+
+const removeAttributeValue = (attributeId: string, valueId: string) => {
+    const attribute = attributes.value.find(attr => attr.id === attributeId);
+    if (attribute && attribute.values.length > 1) {
+        attribute.values = attribute.values.filter(val => val.id !== valueId);
+    }
+};
+
+// Form validation
+const isFormValid = computed(() => {
+    return formData.value.name.trim() !== '' &&
+           formData.value.sku.trim() !== '' &&
+           formData.value.unit_of_measure_id > 0;
+});
+
+// Form submission
+const handleSubmit = () => {
+    if (!isFormValid.value) return;
+
+    // Convert attributes array back to object format
+    const attributesObject: Record<string, string[]> = {};
+    attributes.value.forEach(attr => {
+        if (attr.name.trim()) {
+            attributesObject[attr.name] = attr.values
+                .map(v => v.value.trim())
+                .filter(v => v !== '');
+        }
+    });
+
+    formData.value.attributes = attributesObject;
+
+    // Log the data being sent
+    console.log('📤 Datos enviados al servidor:', JSON.stringify(formData.value, null, 2));
+
+    emit('save', formData.value);
+};
+
+const handleCancel = () => {
+    emit('cancel');
+};
+
+// File upload
+const onUpload = (event: any) => {
+    console.log('File uploaded:', event);
+    // TODO: Implement file upload logic
+};
+</script>
+
+<template>
+    <div class="product-form">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left column - Main information -->
+            <div class="lg:col-span-2 flex flex-col gap-8">
+                <!-- Product Information Card -->
+                <Card>
+                    <template #title>
+                        <h2 class="text-lg font-bold">Información del Producto</h2>
+                    </template>
+                    <template #content>
+                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+                            <!-- Product Name -->
+                            <div class="sm:col-span-2">
+                                <label for="product-name" class="block text-sm font-medium mb-2">
+                                    Nombre del Producto *
+                                </label>
+                                <InputText
+                                    id="product-name"
+                                    v-model="formData.name"
+                                    class="w-full"
+                                    placeholder="ej., Mouse Inalámbrico Premium"
+                                />
+                            </div>
+
+                            <!-- SKU -->
+                            <div>
+                                <label for="sku" class="block text-sm font-medium mb-2">
+                                    SKU (Código de Producto) *
+                                </label>
+                                <InputText
+                                    id="sku"
+                                    v-model="formData.sku"
+                                    class="w-full"
+                                    placeholder="ej., WRLS-MSE-BLK-01"
+                                />
+                            </div>
+
+                            <!-- Code -->
+                            <div>
+                                <label for="code" class="block text-sm font-medium mb-2">
+                                    Código
+                                </label>
+                                <InputText
+                                    id="code"
+                                    v-model="formData.code"
+                                    class="w-full"
+                                    placeholder="ej., PRD-001"
+                                />
+                            </div>
+
+                            <!-- Barcode -->
+                            <div>
+                                <label for="barcode" class="block text-sm font-medium mb-2">
+                                    Código de Barras
+                                </label>
+                                <InputText
+                                    id="barcode"
+                                    v-model="formData.barcode"
+                                    class="w-full"
+                                    placeholder="ej., 1234567890123"
+                                />
+                            </div>
+
+                            <!-- Unit of Measure -->
+                            <div>
+                                <label for="unit-measure" class="block text-sm font-medium mb-2">
+                                    Unidad de Medida *
+                                </label>
+                                <select
+                                    id="unit-measure"
+                                    v-model="formData.unit_of_measure_id"
+                                    class="w-full rounded-lg border border-surface-300 dark:border-surface-600 bg-surface-0 dark:bg-surface-900 text-surface-900 dark:text-surface-0 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50"
+                                >
+                                    <option value="0" disabled>Selecciona una unidad</option>
+                                    <option
+                                        v-for="unit in unitsOfMeasure"
+                                        :key="unit.value"
+                                        :value="unit.value"
+                                    >
+                                        {{ unit.label }}
+                                    </option>
+                                </select>
+                            </div>
+
+                            <!-- Suggested Sale Price -->
+                            <div>
+                                <label for="price" class="block text-sm font-medium mb-2">
+                                    Precio Sugerido de Venta
+                                </label>
+                                <InputText
+                                    id="price"
+                                    v-model="priceInput"
+                                    type="number"
+                                    class="w-full"
+                                    placeholder="0.00"
+                                    step="0.01"
+                                    min="0"
+                                    @input="formData.suggested_sale_price = parseFloat(priceInput) || 0"
+                                />
+                            </div>
+
+                            <!-- SAT Code Product -->
+                            <div class="sm:col-span-2">
+                                <label for="sat-code-product" class="block text-sm font-medium mb-2">
+                                    Código SAT de Producto
+                                </label>
+                                <Dropdown
+                                    id="sat-code-product"
+                                    v-model="formData.sat_code_product_id"
+                                    :options="satCodeProductOptions"
+                                    optionLabel="label"
+                                    optionValue="value"
+                                    :loading="loadingSatCodeProducts"
+                                    placeholder="Escribe para buscar un código SAT..."
+                                    class="w-full"
+                                    :filter="true"
+                                    filterPlaceholder="Buscar código SAT"
+                                    :showClear="true"
+                                    @filter="handleSatSearchChange"
+                                    :emptyFilterMessage="satEmptyMessage"
+                                />
+                                <small class="text-surface-500 dark:text-surface-400">
+                                    Código del catálogo SAT para facturación
+                                </small>
+                            </div>
+
+                            <!-- Is Serial -->
+                            <div class="sm:col-span-2">
+                                <label class="flex items-center space-x-3 cursor-pointer">
+                                    <input
+                                        type="checkbox"
+                                        v-model="formData.is_serial"
+                                        class="w-5 h-5 rounded border-surface-300 dark:border-surface-600 text-primary focus:ring-primary/50"
+                                    />
+                                    <span class="text-sm font-medium">
+                                        Producto requiere número de serie
+                                    </span>
+                                </label>
+                                <p class="text-xs text-surface-500 mt-1 ml-8">
+                                    Marca esta opción si cada unidad del producto debe tener un número de serie único
+                                </p>
+                            </div>
+
+                            <!-- Description -->
+                            <div class="sm:col-span-2">
+                                <label for="description" class="block text-sm font-medium mb-2">
+                                    Descripción del Producto
+                                </label>
+                                <Textarea
+                                    id="description"
+                                    v-model="formData.description"
+                                    class="w-full"
+                                    rows="4"
+                                    placeholder="Ingresa una descripción detallada del producto..."
+                                />
+                            </div>
+                        </div>
+                    </template>
+                </Card>
+
+                <!-- Product Attributes Card -->
+                <Card>
+                    <template #title>
+                        <h2 class="text-lg font-bold">Características del Producto</h2>
+                    </template>
+                    <template #content>
+                        <div class="space-y-6">
+                            <!-- Attribute item -->
+                            <div
+                                v-for="attribute in attributes"
+                                :key="attribute.id"
+                                class="p-4 border surface-border rounded-lg"
+                            >
+                                <div class="flex items-center justify-between mb-4">
+                                    <label class="block text-sm font-medium">
+                                        Nombre de la característica
+                                    </label>
+                                    <Button
+                                        icon="pi pi-trash"
+                                        severity="danger"
+                                        text
+                                        rounded
+                                        @click="removeAttribute(attribute.id)"
+                                    />
+                                </div>
+
+                                <InputText
+                                    v-model="attribute.name"
+                                    class="w-full mb-4"
+                                    placeholder="ej., resolución"
+                                />
+
+                                <label class="block text-sm font-medium mb-2">
+                                    Valores de la característica
+                                </label>
+
+                                <!-- Attribute values -->
+                                <div
+                                    v-for="attrValue in attribute.values"
+                                    :key="attrValue.id"
+                                    class="flex items-center gap-2 mb-2"
+                                >
+                                    <InputText
+                                        v-model="attrValue.value"
+                                        class="flex-1"
+                                        placeholder="ej., 1080p"
+                                    />
+                                    <Button
+                                        icon="pi pi-minus-circle"
+                                        severity="danger"
+                                        text
+                                        rounded
+                                        :disabled="attribute.values.length === 1"
+                                        @click="removeAttributeValue(attribute.id, attrValue.id)"
+                                    />
+                                </div>
+
+                                <Button
+                                    label="Agregar Valor"
+                                    icon="pi pi-plus-circle"
+                                    text
+                                    class="mt-2"
+                                    @click="addAttributeValue(attribute.id)"
+                                />
+                            </div>
+
+                            <!-- Add attribute button -->
+                            <Button
+                                label="Agregar Otra Característica"
+                                icon="pi pi-plus"
+                                severity="secondary"
+                                outlined
+                                class="w-full"
+                                @click="addAttribute"
+                            />
+                        </div>
+                    </template>
+                </Card>
+            </div>
+
+            <!-- Right column - Sidebar -->
+            <div class="lg:col-span-1 flex flex-col gap-8">
+                <!-- Product Image Card -->
+                <Card>
+                    <template #title>
+                        <h3 class="text-lg font-bold">Imagen del Producto</h3>
+                    </template>
+                    <template #content>
+                        <FileUpload
+                            mode="basic"
+                            name="product-image"
+                            accept="image/*"
+                            :maxFileSize="1000000"
+                            chooseLabel="Seleccionar Imagen"
+                            class="w-full"
+                            @upload="onUpload"
+                        >
+                            <template #empty>
+                                <div class="flex flex-col items-center justify-center p-6 border-2 border-dashed surface-border rounded-lg text-center">
+                                    <i class="pi pi-upload text-5xl mb-3 text-surface-400"></i>
+                                    <p class="text-sm">
+                                        <span class="font-semibold text-primary">Click para subir</span> o arrastra y suelta
+                                    </p>
+                                    <p class="text-xs text-surface-500 mt-1">
+                                        SVG, PNG, JPG o GIF (max. 800x400px)
+                                    </p>
+                                </div>
+                            </template>
+                        </FileUpload>
+                    </template>
+                </Card>
+
+                <!-- Organization Card -->
+                <Card>
+                    <template #title>
+                        <h3 class="text-lg font-bold">Clasificaciones de Producto</h3>
+                    </template>
+                    <template #content>
+                        <div>
+                            <!-- Search input -->
+                            <div class="relative mb-4">
+                                <InputText
+                                    v-model="searchClassification"
+                                    type="search"
+                                    class="w-full pl-10"
+                                    placeholder="Buscar clasificaciones..."
+                                />
+                            </div>
+
+                            <!-- Classifications tree -->
+                            <div class="space-y-2 h-96 overflow-y-auto pr-2">
+                                <div
+                                    v-for="classification in filteredClassifications"
+                                    :key="classification.id"
+                                    class="space-y-1"
+                                >
+                                    <!-- Parent classification -->
+                                    <label class="flex items-center space-x-3 p-2 rounded-md hover:bg-surface-50 dark:hover:bg-surface-800/50 cursor-pointer">
+                                        <input
+                                            type="checkbox"
+                                            :value="classification.id"
+                                            :checked="isClassificationSelected(classification.id)"
+                                            @change="toggleClassification(classification.id)"
+                                            class="w-5 h-5 rounded border-surface-300 dark:border-surface-600 text-primary focus:ring-primary/50"
+                                        />
+                                        <span class="text-surface-700 dark:text-surface-300">
+                                           {{ classification.name }}
+                                        </span>
+                                    </label>
+
+                                    <!-- Children classifications -->
+                                    <div
+                                        v-if="classification.children && classification.children.length > 0"
+                                        class="ml-6 pl-4 border-l-2 border-surface-200 dark:border-surface-700 space-y-1"
+                                    >
+                                        <label
+                                            v-for="child in classification.children"
+                                            :key="child.id"
+                                            class="flex items-center space-x-3 p-2 rounded-md hover:bg-surface-50 dark:hover:bg-surface-800/50 cursor-pointer"
+                                        >
+                                            <input
+                                                type="checkbox"
+                                                :value="child.id"
+                                                :checked="isClassificationSelected(child.id)"
+                                                @change="toggleClassification(child.id)"
+                                                class="w-5 h-5 rounded border-surface-300 dark:border-surface-600 text-primary focus:ring-primary/50"
+                                            />
+                                            <span class="text-surface-700 dark:text-surface-300">
+                                                {{ child.name }}
+                                            </span>
+                                        </label>
+                                    </div>
+                                </div>
+
+                                <!-- Empty state -->
+                                <div
+                                    v-if="filteredClassifications.length === 0 && !loadingClassifications"
+                                    class="text-center py-8 text-surface-500"
+                                >
+                                    <i class="pi pi-inbox text-4xl mb-2"></i>
+                                    <p>No se encontraron clasificaciones</p>
+                                </div>
+
+                                <!-- Loading state -->
+                                <div
+                                    v-if="loadingClassifications"
+                                    class="text-center py-8 text-surface-500"
+                                >
+                                    <i class="pi pi-spin pi-spinner text-4xl mb-2"></i>
+                                    <p>Cargando clasificaciones...</p>
+                                </div>
+                            </div>
+
+                            <!-- Selected count -->
+                            <div class="mt-4 pt-4 border-t border-surface-200 dark:border-surface-700">
+                                <div class="text-sm text-surface-600 dark:text-surface-400">
+                                    <span class="font-medium">{{ formData.classifications?.length || 0 }}</span>
+                                    {{ (formData.classifications?.length || 0) === 1 ? 'clasificación seleccionada' : 'clasificaciones seleccionadas' }}
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </Card>
+            </div>
+        </div>
+
+        <!-- Form Actions -->
+        <div class="mt-8 pt-6 border-t surface-border flex justify-end items-center gap-4">
+            <Button
+                label="Cancelar"
+                severity="secondary"
+                outlined
+                @click="handleCancel"
+            />
+            <Button
+                :label="isEditing ? 'Actualizar Producto' : 'Guardar Producto'"
+                :disabled="!isFormValid"
+                @click="handleSubmit"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.product-form {
+    max-width: 1280px;
+    margin: 0 auto;
+}
+</style>
diff --git a/src/modules/products/components/ProductsIndex.vue b/src/modules/products/components/ProductsIndex.vue
new file mode 100644
index 0000000..c40ae24
--- /dev/null
+++ b/src/modules/products/components/ProductsIndex.vue
@@ -0,0 +1,368 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import Breadcrumb from 'primevue/breadcrumb';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Dialog from 'primevue/dialog';
+import InputText from 'primevue/inputtext';
+import Tag from 'primevue/tag';
+import Toast from 'primevue/toast';
+import ConfirmDialog from 'primevue/confirmdialog';
+import ProgressSpinner from 'primevue/progressspinner';
+import Paginator from 'primevue/paginator';
+import { useProductStore } from '../stores/productStore';
+import ProductForm from './ProductForm.vue';
+import type { Product, CreateProductData } from '../types/product';
+
+const toast = useToast();
+const confirm = useConfirm();
+const productStore = useProductStore();
+
+// Breadcrumb
+const breadcrumbItems = ref([
+    { label: 'Productos' }
+]);
+
+const home = ref({
+    icon: 'pi pi-home',
+    route: '/'
+});
+
+// State
+const showDialog = ref(false);
+const isEditing = ref(false);
+const searchTerm = ref('');
+const selectedProduct = ref<Product | null>(null);
+
+// Computed
+const products = computed(() => productStore.products);
+const loading = computed(() => productStore.loading);
+const pagination = computed(() => productStore.pagination);
+
+const dialogTitle = computed(() => 
+    isEditing.value ? 'Editar Producto' : 'Nuevo Producto'
+);
+
+// Methods
+const loadProducts = async () => {
+    try {
+        await productStore.fetchProducts();
+    } catch (error) {
+        console.error('Error loading products:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar los productos.',
+            life: 3000
+        });
+    }
+};
+
+const getStatusSeverity = (product: Product): "success" | "danger" => {
+    return product.is_active ? 'success' : 'danger';
+};
+
+const getStatusLabel = (product: Product): string => {
+    return product.is_active ? 'Activo' : 'Inactivo';
+};
+
+const openCreateDialog = () => {
+    selectedProduct.value = null;
+    isEditing.value = false;
+    showDialog.value = true;
+};
+
+const editProduct = (product: Product) => {
+    selectedProduct.value = product;
+    isEditing.value = true;
+    showDialog.value = true;
+};
+
+const handleSaveProduct = async (productData: CreateProductData) => {
+    try {
+        if (isEditing.value && selectedProduct.value) {
+            await productStore.updateProduct(selectedProduct.value.id, productData);
+            toast.add({
+                severity: 'success',
+                summary: 'Producto Actualizado',
+                detail: 'El producto ha sido actualizado exitosamente.',
+                life: 3000
+            });
+        } else {
+            await productStore.createProduct(productData);
+            toast.add({
+                severity: 'success',
+                summary: 'Producto Creado',
+                detail: 'El producto ha sido creado exitosamente.',
+                life: 3000
+            });
+        }
+        showDialog.value = false;
+        selectedProduct.value = null;
+    } catch (error) {
+        console.error('Error saving product:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo guardar el producto.',
+            life: 3000
+        });
+    }
+};
+
+const handleCancelForm = () => {
+    showDialog.value = false;
+    selectedProduct.value = null;
+};
+
+const deleteProductConfirm = (product: Product) => {
+    confirm.require({
+        message: `¿Estás seguro de eliminar el producto "${product.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await productStore.deleteProduct(product.id);
+                toast.add({
+                    severity: 'success',
+                    summary: 'Producto Eliminado',
+                    detail: `El producto "${product.name}" ha sido eliminado exitosamente.`,
+                    life: 3000
+                });
+            } catch (error) {
+                console.error('Error deleting product:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error al Eliminar',
+                    detail: 'No se pudo eliminar el producto.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+const onSearch = () => {
+    if (searchTerm.value.trim()) {
+        console.log('Searching:', searchTerm.value);
+        // TODO: Implementar búsqueda cuando el API lo soporte
+    }
+};
+
+const onPageChange = (event: any) => {
+    productStore.changePage(event.page + 1);
+};
+
+onMounted(() => {
+    loadProducts();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Confirm Dialog -->
+        <ConfirmDialog></ConfirmDialog>
+
+        <!-- Breadcrumb -->
+        <Breadcrumb :home="home" :model="breadcrumbItems" />
+
+        <!-- Page Heading -->
+        <div class="flex flex-wrap items-center justify-between gap-3">
+            <h1 class="text-2xl font-bold leading-tight tracking-tight text-surface-900 dark:text-white">
+                Catálogo de Productos
+            </h1>
+            <Button
+                label="Nuevo Producto"
+                icon="pi pi-plus"
+                @click="openCreateDialog"
+            />
+        </div>
+
+        <!-- Filters & Search -->
+        <Card>
+            <template #content>
+                <div class="flex gap-4">
+                    <!-- Search -->
+                    <div class="flex-1">
+                        <span class="p-input-icon-left w-full">
+                            <i class="pi pi-search" />
+                            <InputText
+                                v-model="searchTerm"
+                                placeholder="Buscar por nombre, código o SKU..."
+                                class="w-full"
+                                @keyup.enter="onSearch"
+                            />
+                        </span>
+                    </div>
+                </div>
+            </template>
+        </Card>
+
+        <!-- Products Table -->
+        <Card>
+            <template #content>
+                <div v-if="loading" class="flex items-center justify-center py-8">
+                    <ProgressSpinner style="width: 50px; height: 50px" />
+                </div>
+                <DataTable
+                    v-else
+                    :value="products"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    class="p-datatable-sm"
+                >
+                    <!-- Product Name -->
+                    <Column field="name" header="Producto" sortable style="min-width: 200px">
+                        <template #body="slotProps">
+                            <div class="flex flex-col">
+                                <span class="font-medium text-surface-900 dark:text-white">
+                                    {{ slotProps.data.name }}
+                                </span>
+                                <span class="text-xs text-surface-500 dark:text-surface-400">
+                                    {{ slotProps.data.description }}
+                                </span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <!-- Code -->
+                    <Column field="code" header="Código" sortable style="min-width: 100px">
+                        <template #body="slotProps">
+                            <span class="font-mono text-sm text-primary-600 dark:text-primary-400">
+                                {{ slotProps.data.code }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- SKU -->
+                    <Column field="sku" header="SKU" sortable style="min-width: 120px">
+                        <template #body="slotProps">
+                            <span class="font-mono text-sm text-surface-600 dark:text-surface-400">
+                                {{ slotProps.data.sku }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Barcode -->
+                    <Column field="barcode" header="Código de Barras" style="min-width: 140px">
+                        <template #body="slotProps">
+                            <span class="font-mono text-xs text-surface-500 dark:text-surface-400">
+                                {{ slotProps.data.barcode || '-' }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Price -->
+                    <Column field="suggested_sale_price" header="Precio Sugerido" sortable style="min-width: 130px">
+                        <template #body="slotProps">
+                            <span class="font-semibold text-green-600 dark:text-green-400">
+                                ${{ slotProps.data.suggested_sale_price.toLocaleString('es-MX', { minimumFractionDigits: 2 }) }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Status -->
+                    <Column field="is_active" header="Estado" sortable style="min-width: 100px">
+                        <template #body="slotProps">
+                            <Tag
+                                :value="getStatusLabel(slotProps.data)"
+                                :severity="getStatusSeverity(slotProps.data)"
+                            />
+                        </template>
+                    </Column>
+
+                    <!-- Is Serial -->
+                    <Column field="is_serial" header="N° Serie" sortable style="min-width: 100px">
+                        <template #body="slotProps">
+                            <Tag
+                                :value="slotProps.data.is_serial ? 'Sí' : 'No'"
+                                :severity="slotProps.data.is_serial ? 'info' : 'secondary'"
+                            />
+                        </template>
+                    </Column>
+
+                    <!-- Actions -->
+                    <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right" style="min-width: 120px">
+                        <template #body="slotProps">
+                            <div class="flex items-center justify-end gap-2">
+                                <Button
+                                    icon="pi pi-pencil"
+                                    text
+                                    rounded
+                                    size="small"
+                                    @click="editProduct(slotProps.data)"
+                                    v-tooltip.top="'Editar'"
+                                />
+                                <Button
+                                    icon="pi pi-trash"
+                                    text
+                                    rounded
+                                    size="small"
+                                    severity="danger"
+                                    @click="deleteProductConfirm(slotProps.data)"
+                                    v-tooltip.top="'Eliminar'"
+                                />
+                            </div>
+                        </template>
+                    </Column>
+
+                    <template #empty>
+                        <div class="flex flex-col items-center justify-center py-8 text-center">
+                            <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                            <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-0">
+                                No hay productos
+                            </h3>
+                            <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
+                                Agrega tu primer producto para comenzar
+                            </p>
+                        </div>
+                    </template>
+                </DataTable>
+
+                <!-- Pagination -->
+                <div v-if="!loading && products.length > 0" class="mt-4">
+                    <Paginator
+                        :first="(pagination.currentPage - 1) * pagination.perPage"
+                        :rows="pagination.perPage"
+                        :totalRecords="pagination.total"
+                        :rowsPerPageOptions="[5, 10, 20, 50]"
+                        @page="onPageChange"
+                    >
+                        <template #start>
+                            <span class="text-sm text-surface-500 dark:text-surface-400">
+                                Mostrando {{ pagination.from }} - {{ pagination.to }} de {{ pagination.total }}
+                            </span>
+                        </template>
+                    </Paginator>
+                </div>
+            </template>
+        </Card>
+
+        <!-- Create/Edit Product Dialog -->
+        <Dialog
+            v-model:visible="showDialog"
+            modal
+            :header="dialogTitle"
+            :style="{ width: '90vw', maxWidth: '1400px' }"
+            :contentStyle="{ padding: '1.5rem' }"
+        >
+            <ProductForm
+                :product="selectedProduct"
+                :is-editing="isEditing"
+                @save="handleSaveProduct"
+                @cancel="handleCancelForm"
+            />
+        </Dialog>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/products/services/productService.ts b/src/modules/products/services/productService.ts
new file mode 100644
index 0000000..bc016db
--- /dev/null
+++ b/src/modules/products/services/productService.ts
@@ -0,0 +1,71 @@
+import api from '../../../services/api';
+import type {
+    ProductResponse,
+    ProductListResponse,
+    SingleProductResponse,
+    CreateProductData,
+    UpdateProductData,
+} from '../types/product';
+
+/**
+ * Obtener todos los productos con paginación y filtros
+ */
+export const getProducts = async (): Promise<ProductResponse> => {
+    const response = await api.get<ProductResponse>('/api/products');
+    return response.data;
+};
+
+/**
+ * Obtener todos los productos sin paginación
+ * @param search - Término de búsqueda opcional para filtrar productos
+ */
+export const getAllProducts = async (search?: string): Promise<ProductListResponse> => {
+    const url = search 
+        ? `/api/products?paginate=false&search=${encodeURIComponent(search)}`
+        : '/api/products?paginate=false';
+    const response = await api.get<ProductListResponse>(url);
+    return response.data;
+};
+
+/**
+ * Obtener un producto por ID
+ */
+export const getProductById = async (id: number): Promise<SingleProductResponse> => {
+    const response = await api.get<SingleProductResponse>(`/api/products/${id}`);
+    return response.data;
+};
+
+/**
+ * Crear un nuevo producto
+ */
+export const createProduct = async (data: CreateProductData): Promise<SingleProductResponse> => {
+    const response = await api.post<SingleProductResponse>('/api/products', data);
+    return response.data;
+};
+
+/**
+ * Actualizar un producto
+ */
+export const updateProduct = async (
+    id: number,
+    data: UpdateProductData
+): Promise<SingleProductResponse> => {
+    const response = await api.put<SingleProductResponse>(`/api/products/${id}`, data);
+    return response.data;
+};
+
+/**
+ * Eliminar un producto
+ */
+export const deleteProduct = async (id: number): Promise<void> => {
+    await api.delete(`/api/products/${id}`);
+};
+
+export const productService = {
+    getProducts,
+    getAllProducts,
+    getProductById,
+    createProduct,
+    updateProduct,
+    deleteProduct
+};
diff --git a/src/modules/products/stores/productStore.ts b/src/modules/products/stores/productStore.ts
new file mode 100644
index 0000000..e672f2d
--- /dev/null
+++ b/src/modules/products/stores/productStore.ts
@@ -0,0 +1,170 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { productService } from '../services/productService';
+import type { Product, CreateProductData, UpdateProductData } from '../types/product';
+
+export const useProductStore = defineStore('product', () => {
+    // State
+    const products = ref<Product[]>([]);
+    const currentPage = ref(1);
+    const perPage = ref(10);
+    const totalProducts = ref(0);
+    const lastPage = ref(1);
+    const loading = ref(false);
+    const error = ref<string | null>(null);
+
+    // Getters
+    const activeProducts = computed(() => 
+        products.value.filter(product => product.is_active === true)
+    );
+
+    const inactiveProducts = computed(() => 
+        products.value.filter(product => product.is_active === false)
+    );
+
+    const productCount = computed(() => products.value.length);
+
+    const getProductById = computed(() => {
+        return (id: number) => products.value.find(product => product.id === id);
+    });
+
+    const getProductBySku = computed(() => {
+        return (sku: string) => 
+            products.value.find(product => product.sku.toLowerCase() === sku.toLowerCase());
+    });
+
+    const pagination = computed(() => ({
+        currentPage: currentPage.value,
+        perPage: perPage.value,
+        total: totalProducts.value,
+        lastPage: lastPage.value,
+        from: (currentPage.value - 1) * perPage.value + 1,
+        to: Math.min(currentPage.value * perPage.value, totalProducts.value)
+    }));
+
+    // Actions
+    const fetchProducts = async () => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            const response = await productService.getProducts();
+            products.value = response.data.products.data;
+            currentPage.value = response.data.products.current_page;
+            perPage.value = response.data.products.per_page;
+            totalProducts.value = response.data.products.total;
+            lastPage.value = response.data.products.last_page;
+            
+            console.log('Products loaded into store:', products.value.length);
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error loading products';
+            console.error('Error in product store:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const refreshProducts = () => {
+        return fetchProducts();
+    };
+
+    const createProduct = async (data: CreateProductData) => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            await productService.createProduct(data);
+            
+            // Refrescar la lista después de crear
+            await refreshProducts();
+            
+            console.log('Product created successfully');
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error creating product';
+            console.error('Error creating product:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const updateProduct = async (id: number, data: UpdateProductData) => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            await productService.updateProduct(id, data);
+            
+            // Refrescar la lista después de actualizar
+            await refreshProducts();
+            
+            console.log('Product updated successfully');
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error updating product';
+            console.error('Error updating product:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const deleteProduct = async (id: number) => {
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            await productService.deleteProduct(id);
+            
+            // Refrescar la lista después de eliminar
+            await refreshProducts();
+            
+            console.log('Product deleted successfully');
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error deleting product';
+            console.error('Error deleting product:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const changePage = async (page: number) => {
+        currentPage.value = page;
+        await fetchProducts();
+    };
+
+    const changePerPage = async (itemsPerPage: number) => {
+        perPage.value = itemsPerPage;
+        currentPage.value = 1; // Reset to first page when changing items per page
+        await fetchProducts();
+    };
+
+    return {
+        // State
+        products,
+        currentPage,
+        perPage,
+        totalProducts,
+        lastPage,
+        loading,
+        error,
+
+        // Getters
+        activeProducts,
+        inactiveProducts,
+        productCount,
+        getProductById,
+        getProductBySku,
+        pagination,
+
+        // Actions
+        fetchProducts,
+        refreshProducts,
+        createProduct,
+        updateProduct,
+        deleteProduct,
+        changePage,
+        changePerPage
+    };
+});
diff --git a/src/modules/products/types/product.d.ts b/src/modules/products/types/product.d.ts
new file mode 100644
index 0000000..d04a76d
--- /dev/null
+++ b/src/modules/products/types/product.d.ts
@@ -0,0 +1,106 @@
+/**
+ * Product Type Definitions
+ */
+
+import type { SatCodeProduct } from '../../catalog/services/sat-code-products.services';
+
+export interface Product {
+    id: number;
+    code: string;
+    sku: string;
+    name: string;
+    barcode?: string;
+    description?: string;
+    unit_of_measure_id: number;
+    suggested_sale_price: number;
+    attributes?: Record<string, string[]>;
+    is_active: boolean;
+    is_serial: boolean;
+    sat_code_product_id?: number | null;
+    sat_code_product?: SatCodeProduct;
+    created_at: string;
+    updated_at: string;
+    deleted_at?: string | null;
+    classifications?: any[];
+    warehouses?: any[];
+}
+
+export interface CreateProductData {
+    code: string;
+    sku: string;
+    name: string;
+    barcode?: string;
+    description?: string;
+    unit_of_measure_id: number;
+    suggested_sale_price: number;
+    attributes?: Record<string, string[]> | null;
+    is_active?: boolean;
+    is_serial?: boolean;
+    sat_code_product_id?: number | null;
+    classifications?: number[];
+}
+
+export interface UpdateProductData {
+    code?: string;
+    sku?: string;
+    name?: string;
+    barcode?: string;
+    description?: string;
+    unit_of_measure_id?: number;
+    suggested_sale_price?: number;
+    attributes?: Record<string, string[]> | null;
+    is_active?: boolean;
+    is_serial?: boolean;
+    sat_code_product_id?: number | null;
+    classifications?: number[];
+}
+
+export interface ProductPagination {
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
+    from: number;
+    to: number;
+}
+
+export interface ProductData {
+    current_page: number;
+    data: Product[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: Array<{
+        url: string | null;
+        label: string;
+        active: boolean;
+    }>;
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+export interface ProductResponse {
+    status: string;
+    data: {
+        products: ProductData;
+    };
+}
+
+export interface ProductListResponse {
+    status: string;
+    data: {
+        products: Product[];
+    };
+}
+
+export interface SingleProductResponse {
+    status: string;
+    data: {
+        product: Product;
+    };
+}
diff --git a/src/modules/purchases/components/ProductsModal.vue b/src/modules/purchases/components/ProductsModal.vue
new file mode 100644
index 0000000..a1712d1
--- /dev/null
+++ b/src/modules/purchases/components/ProductsModal.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { productService } from '../../products/services/productService';
+import type { Product } from '../../products/types/product';
+
+const visible = defineModel<boolean>('visible');
+const emit = defineEmits(['confirm', 'productSelected']);
+
+const search = ref('');
+const loading = ref(false);
+const products = ref<Product[]>([]);
+const selectedProduct = ref<Product | null>(null);
+const productAttributes = ref<Record<string, string>>({});
+const quantity = ref(1);
+
+let debounceTimer: number | null = null;
+
+async function fetchProducts(searchTerm?: string) {
+  loading.value = true;
+  try {
+    const response = await productService.getAllProducts(searchTerm);
+    products.value = response.data.products;
+  } catch (error) {
+    console.error('Error loading products:', error);
+    products.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+// Debounce para búsqueda
+watch(search, (newValue) => {
+  if (debounceTimer) {
+    clearTimeout(debounceTimer);
+  }
+  debounceTimer = window.setTimeout(() => {
+    fetchProducts(newValue);
+  }, 500);
+});
+
+const filteredProducts = computed(() => products.value);
+
+const totalProducts = computed(() => products.value.length);
+const totalFiltered = computed(() => products.value.length);
+
+function selectProduct(product: Product) {
+  selectedProduct.value = product;
+  // Inicializar atributos dinámicos del producto
+  const attrs: Record<string, string> = {};
+  if (product.attributes) {
+    Object.keys(product.attributes).forEach(key => {
+      attrs[key] = '';
+    });
+  }
+  productAttributes.value = attrs;
+  quantity.value = 1;
+}
+
+function close() {
+  visible.value = false;
+  selectedProduct.value = null;
+  productAttributes.value = {};
+  quantity.value = 1;
+}
+
+function confirm() {
+  if (selectedProduct.value) {
+    const productToAdd = {
+      product_id: selectedProduct.value.id,
+      product_name: selectedProduct.value.name,
+      sku: selectedProduct.value.sku,
+      quantity: quantity.value,
+      unit_price: selectedProduct.value.suggested_sale_price || 0,
+      subtotal: (selectedProduct.value.suggested_sale_price || 0) * quantity.value,
+      attributes: productAttributes.value
+    };
+    emit('confirm', productToAdd);
+  }
+  close();
+}
+</script>
+
+<template>
+  <Dialog v-model:visible="visible" modal :style="{ width: '700px', maxWidth: '90vw' }" header="Agregar Producto a la Solicitud" :closable="true" @hide="close">
+    <div class="space-y-6">
+      <IconField iconPosition="left">
+        <InputIcon class="pi pi-search" />
+        <InputText v-model="search" placeholder="Buscar por Nombre o SKU..." class="w-full" />
+      </IconField>
+      <DataTable :value="filteredProducts" :loading="loading" class="w-full text-left border-collapse" :rows="10" :paginator="false">
+        <Column header="Imagen" bodyStyle="width:80px">
+          <template #body="{ data }">
+            <Avatar :image="data.image || ''" shape="square" size="large" class="w-10 h-10" />
+          </template>
+        </Column>
+        <Column header="Producto / SKU">
+          <template #body="{ data }">
+            <div class="text-sm font-semibold text-[#111418] dark:text-white">{{ data.name }}</div>
+            <div class="text-xs text-[#617589]">{{ data.sku }}</div>
+          </template>
+        </Column>
+        <Column header="Acción" bodyStyle="text-align:right">
+          <template #body="{ data }">
+            <Button 
+              v-if="!selectedProduct || selectedProduct.id !== data.id"
+              icon="pi pi-plus" 
+              label="Agregar" 
+              class="text-primary" 
+              text 
+              @click="selectProduct(data)" 
+            />
+            <div v-else class="flex items-center justify-end gap-2 text-primary">
+              <i class="pi pi-check text-primary" />
+              <span class="font-bold">Seleccionado</span>
+            </div>
+          </template>
+        </Column>
+      </DataTable>
+      <div class="flex items-center justify-between px-2 py-2 border-t border-[#dbe0e6] dark:border-[#2d3748]">
+        <p class="text-xs text-[#617589]">Mostrando {{ totalFiltered }} de {{ totalProducts }} productos</p>
+      </div>
+      <div v-if="selectedProduct" class="px-2 py-4 border-t-2 border-primary/20 bg-blue-50/20 dark:bg-blue-900/5">
+        <h3 class="text-sm font-bold text-[#111418] dark:text-white mb-4 flex items-center gap-2">
+          <i class="pi pi-sliders-h text-primary text-[20px]" />
+          Configurar Atributos: <span class="text-primary">{{ selectedProduct.name }}</span>
+        </h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div v-for="(options, attrName) in selectedProduct.attributes" :key="attrName">
+            <p class="text-xs font-bold text-[#617589] uppercase tracking-wider mb-2">{{ attrName }}</p>
+            <Dropdown 
+              v-model="productAttributes[attrName]" 
+              :options="options" 
+              :placeholder="`Selecciona ${attrName}`" 
+              class="w-full h-10 rounded-lg border-[#dbe0e6] dark:border-[#2d3748] dark:bg-[#2d3748] dark:text-white text-sm" 
+            />
+          </div>
+          <div>
+            <p class="text-xs font-bold text-[#617589] uppercase tracking-wider mb-2">Cantidad</p>
+            <div class="flex items-center h-10 border border-[#dbe0e6] dark:border-[#2d3748] rounded-lg overflow-hidden">
+              <Button icon="pi pi-minus" class="px-3 h-full bg-gray-50 dark:bg-[#2d3748] text-[#617589] border-r border-[#dbe0e6] dark:border-[#2d3748]" text @click="quantity = Math.max(1, quantity - 1)" />
+              <InputNumber v-model="quantity" :min="1" class="w-full border-none text-center text-sm font-bold dark:bg-[#1a202c]" />
+              <Button icon="pi pi-plus" class="px-3 h-full bg-gray-50 dark:bg-[#2d3748] text-[#617589] border-l border-[#dbe0e6] dark:border-[#2d3748]" text @click="quantity++" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex justify-end gap-3 pt-4">
+        <Button label="Cancelar" class="px-6 py-2 rounded-lg border border-[#dbe0e6] dark:border-[#2d3748] text-[#111418] dark:text-white text-sm font-bold" @click="close" />
+        <Button 
+          label="Confirmar y Agregar" 
+          class="px-6 py-2 rounded-lg bg-primary text-white text-sm font-bold shadow-lg shadow-primary/20" 
+          @click="confirm" 
+          :disabled="!selectedProduct"
+        />
+      </div>
+    </div>
+  </Dialog>
+</template>
+
diff --git a/src/modules/purchases/components/PurchaseDetails.vue b/src/modules/purchases/components/PurchaseDetails.vue
new file mode 100644
index 0000000..a9eb49d
--- /dev/null
+++ b/src/modules/purchases/components/PurchaseDetails.vue
@@ -0,0 +1,274 @@
+<template>
+    <div class="purchase-details-container">
+        <!-- Breadcrumbs -->
+        <Breadcrumb :home="home" :model="breadcrumbItems">
+            <template #item="{ item }">
+                <a v-if="item.route" :href="item.route" @click.prevent="router.push(item.route)"
+                    class="text-primary hover:underline">
+                    {{ item.label }}
+                </a>
+                <span v-else class="text-[#617589] text-sm font-bold leading-normal">
+                    {{ item.label }}
+                </span>
+            </template>
+        </Breadcrumb>
+        <!-- Page Heading & Actions -->
+        <div v-if="!loading && purchase"
+            class="flex flex-wrap justify-between items-end gap-4 bg-white dark:bg-background-dark p-6 rounded-xl border border-[#dbe0e6] dark:border-gray-800 mb-6 shadow-sm">
+            <div class="flex flex-col gap-2">
+                <div class="flex items-center gap-3">
+                    <h1 class="text-[#111418] dark:text-white text-4xl font-black leading-tight tracking-[-0.033em]">{{
+                        purchase.purchase_number }}</h1>
+                    <span
+                        class="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full border border-primary/20">{{
+                            PURCHASE_STATUS_MAP[purchase.status] || purchase.status }}</span>
+                </div>
+
+                <p class="text-[#617589] text-base font-normal leading-normal">Creada el {{
+                    formatDate(purchase.request_date) }}
+                </p>
+            </div>
+            <div class="flex gap-3">
+                <Button icon="pi pi-check-circle" label="Convertir a compra" class="min-w-[140px] h-10 px-4" />
+            </div>
+        </div>
+        <div v-else-if="loading" class="flex justify-center items-center min-h-[200px]">
+            <span class="pi pi-spin pi-spinner text-3xl text-primary"></span>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Left Column: Details & Items -->
+            <div class="lg:col-span-2 flex flex-col gap-6">
+                <!-- Order Information Card -->
+                <Card v-if="!loading && purchase"
+                    class="rounded-xl border border-[#dbe0e6] dark:border-gray-800 overflow-hidden shadow-sm">
+                    <template #header>
+                        <div
+                            class="p-4 border-b border-[#dbe0e6] dark:border-gray-800 bg-[#f8f9fa] dark:bg-gray-800/50 flex items-center gap-2">
+                            <span class="pi pi-info-circle text-sm text-[#617589]"></span>
+                            <span class="font-bold text-sm uppercase tracking-wider text-[#617589]">Información de la solicitud</span>
+                        </div>
+                    </template>
+                    <template #content>
+                        <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
+                            <div class="flex flex-col gap-1 border-l-4 border-primary pl-4">
+                                <p class="text-[#617589] text-xs font-semibold uppercase">Información del proveedor</p>
+                                <p class="text-[#111418] dark:text-white text-base font-bold">
+                                    {{ purchase.supplier && purchase.supplier.name ? purchase.supplier.name : 'Sin proveedor' }}
+                                </p>
+                                <p class="text-[#617589] text-sm">
+                                    <span v-if="purchase.supplier && purchase.supplier.contact_email">{{
+                                        purchase.supplier.contact_email }}</span>
+                                    <span
+                                        v-if="purchase.supplier && purchase.supplier.contact_email && purchase.supplier.phone_number">
+                                        | </span>
+                                    <span v-if="purchase.supplier && purchase.supplier.phone_number">{{
+                                        purchase.supplier.phone_number }}</span>
+                                </p>
+                            </div>
+                            <div class="flex flex-col gap-1 border-l-4 border-gray-300 dark:border-gray-600 pl-4">
+                                <p class="text-[#617589] text-xs font-semibold uppercase">Referencia de la solicitud de compra</p>
+                                <p class="text-[#111418] dark:text-white text-base font-bold">{{
+                                    purchase.purchase_number }}</p>
+                            </div>
+                            <div class="flex flex-col gap-1 border-l-4 border-gray-300 dark:border-gray-600 pl-4">
+                                <p class="text-[#617589] text-xs font-semibold uppercase">Notas</p>
+                                <p class="text-[#111418] dark:text-white text-base font-bold">{{ purchase.notes }}</p>
+                            </div>
+                            <div class="flex flex-col gap-1 border-l-4 border-gray-300 dark:border-gray-600 pl-4">
+                                <p class="text-[#617589] text-xs font-semibold uppercase">Fecha de Entrega</p>
+                                <p class="text-[#111418] dark:text-white text-base font-bold">{{
+                                    formatDate(purchase.delivery_date) }}</p>
+                            </div>
+                        </div>
+                    </template>
+
+                </Card>
+                <!-- Ordered Items Card -->
+                <Card v-if="!loading && purchase"
+                    class="rounded-xl border border-[#dbe0e6] dark:border-gray-800 overflow-hidden shadow-sm">
+                    <template #header>
+                        <div
+                            class="p-4 border-b border-[#dbe0e6] dark:border-gray-800 bg-[#f8f9fa] dark:bg-gray-800/50 flex justify-between items-center">
+                            <div class="flex items-center gap-2">
+                                <span class="pi pi-list text-sm text-[#617589]"></span>
+                                <span class="font-bold text-sm uppercase tracking-wider text-[#617589]">Productos</span>
+                            </div>
+                            <span class="text-xs text-[#617589] font-medium">{{ purchase.items ? purchase.items.length :
+                                0 }} Productos listados</span>
+                        </div>
+                    </template>
+                    <template #content>
+                        <DataTable v-if="purchase.items && purchase.items.length" :value="purchase.items"
+                            class="w-full">
+                            <Column field="product_id" header="ID" />
+                            <Column field="quantity" header="Cantidad" body-class="text-center" />
+                            <Column field="unit_price" header="Precio Unitario" body-class="text-right">
+                                <template #body="{ data }">
+                                    <span>{{ formatCurrency(data.unit_price) }}</span>
+                                </template>
+                            </Column>
+                            <Column field="subtotal" header="Subtotal" body-class="text-right">
+                                <template #body="{ data }">
+                                    <span class="font-bold text-primary">{{ formatCurrency(data.subtotal) }}</span>
+                                </template>
+                            </Column>
+                            <Column field="notes" header="Notas" />
+                        </DataTable>
+                        <div v-else class="text-center text-[#617589] py-6">No hay items para mostrar.</div>
+                    </template>
+                </Card>
+            </div>
+            <!-- Right Column: Logistics & Financial Summary -->
+            <div class="flex flex-col gap-6">
+                <!-- Logistics Tracking Card -->
+                <!-- <Card class="rounded-xl border border-[#dbe0e6] dark:border-gray-800 overflow-hidden shadow-sm">
+                    <template #header>
+                        <div
+                            class="p-4 border-b border-[#dbe0e6] dark:border-gray-800 bg-[#f8f9fa] dark:bg-gray-800/50 flex items-center gap-2">
+                            <span class="pi pi-truck text-sm text-[#617589]"></span>
+                            <span class="font-bold text-sm uppercase tracking-wider text-[#617589]">Logistics</span>
+                        </div>
+                    </template>
+                    <div class="p-6">
+                        <div class="mb-6">
+                            <p class="text-[#617589] text-xs font-semibold uppercase mb-2">Delivery Status</p>
+                            <div class="flex items-center gap-3">
+                                <div class="w-full bg-[#f0f2f4] dark:bg-gray-800 rounded-full h-2">
+                                    <div class="bg-primary h-2 rounded-full" style="width: 40%"></div>
+                                </div>
+                                <span class="text-xs font-bold text-primary whitespace-nowrap">In Transit</span>
+                            </div>
+                            <p class="text-[#617589] text-[11px] mt-2 italic">Estimated delivery: Oct 31, 2023</p>
+                        </div>
+                        <div>
+                            <p class="text-[#617589] text-xs font-semibold uppercase mb-2">Destination</p>
+                            <div class="flex items-start gap-3">
+                                <span class="pi pi-map-marker text-primary mt-1"></span>
+                                <div class="text-sm">
+                                    <p class="font-bold">Main Distribution Center</p>
+                                    <p class="text-[#617589]">Warehouse B, Dock 4</p>
+                                    <p class="text-[#617589]">882 Logistics Way</p>
+                                    <p class="text-[#617589]">Chicago, IL 60601</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-6 pt-6 border-t border-[#dbe0e6] dark:border-gray-800">
+                            <div class="rounded-lg overflow-hidden h-32 bg-gray-100 relative group">
+                                <div class="absolute inset-0 bg-primary/10 flex items-center justify-center">
+                                    <span class="pi pi-map-marker text-3xl text-primary animate-bounce"></span>
+                                </div>
+                                <img class="w-full h-full object-cover grayscale"
+                                    alt="Map view showing delivery destination"
+                                    src="https://lh3.googleusercontent.com/aida-public/AB6AXuCm1mh8AyZ_GOLrQWGg6_fQE6_m-PpLiUyQDhDK_cooMkYT8QRVfPsWPGyLAICz7vKq7tVhRDGTJk9e0XjZZ-91XpsMoguksdn7YEB_WJflyuZvPsCqcxApGFkkC11P9N1iPNw6YcDM5VPuF1AQVB1JpyQijgQIZTsnuK5A1Fm6--evPpKckIawOpHRj8FBB8wh2YQM9fZ5Zl45ex3f4q9fTYU3k0k0Bgu6pG2hZC31PEqu2QZgJp3-LNsWIozBAEJMjrOjLzRnR7aj" />
+                            </div>
+                        </div>
+                    </div>
+                </Card> -->
+                <!-- Financial Summary Card -->
+                <Card class="rounded-xl border-2 border-primary overflow-hidden shadow-lg">
+                    <template #header>
+                        <div
+                            class="p-4 border-b border-[#dbe0e6] dark:border-gray-800 bg-primary/5 flex items-center gap-2">
+                            <span class="pi pi-credit-card text-sm text-primary"></span>
+                            <span class="font-bold text-sm uppercase tracking-wider text-primary">Resumen
+                                Financiero</span>
+                        </div>
+                    </template>
+                    <template #content>
+                        <div class="p-6 flex flex-col gap-4">
+                            <div class="flex justify-between items-center">
+                                <span class="text-[#617589] text-sm">Subtotal</span>
+                                <span class="font-bold text-primary">{{ formatCurrency(purchase?.total_amount ? purchase.total_amount : 0) }}</span>
+                            </div>
+                           <!--  <div class="flex justify-between items-center">
+                                <span class="text-[#617589] text-sm">Impuesto</span>
+                                <span class="font-bold text-primary">{{ formatCurrency(summary.tax) }}</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-[#617589] text-sm">Envío</span>
+                                <span class="font-bold text-primary">{{ formatCurrency(summary.shipping) }}</span>
+                            </div> -->
+                            <div class="flex justify-between items-center pt-4 border-t border-[#dbe0e6] dark:border-gray-800">
+                                <span class="text-[#617589] text-sm font-semibold uppercase">Total</span>
+                                <span class="font-bold text-xl text-primary">{{ formatCurrency(purchase?.total_amount ? purchase.total_amount : 0) }}</span>
+                            </div>
+                        </div>
+                    </template>
+                    <div class="p-4 bg-[#f8f9fa] dark:bg-gray-800/50 text-center">
+                        <p class="text-[11px] text-[#617589] font-medium leading-relaxed">
+                            La factura final puede variar según el peso exacto del envío y los impuestos locales en el momento de la entrega.
+                        </p>
+                    </div>
+                </Card>
+            </div>
+        </div>
+        <!-- Footer Audit Log -->
+        <div
+            class="mt-8 flex items-center justify-between text-[#617589] text-[11px] font-medium uppercase tracking-widest px-4">
+            <div class="flex items-center gap-4">
+                <span>Last modified: Oct 25, 2023 10:42 AM</span>
+                <span class="size-1 rounded-full bg-[#dbe0e6]"></span>
+                <span>Revision: v2.1</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <span class="pi pi-lock text-xs"></span>
+                <span>Secure Transaction</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Breadcrumb from 'primevue/breadcrumb';
+import { useRouter } from 'vue-router';
+import { purchaseServices } from '../services/purchaseServices';
+import type { PurchaseDetailResponse, PurchaseDetailData } from '../types/purchases';
+import { useRoute } from 'vue-router';
+import { PURCHASE_STATUS_MAP } from '../types/purchases.d';
+
+const route = useRoute();
+const router = useRouter();
+const breadcrumbItems = [
+    { label: 'Inicio', route: '/' },
+    { label: 'Compras', route: '/purchases/requests' },
+    { label: 'Órdenes', route: '/purchases/requests' },
+    { label: 'Detalle' }
+];
+const home = { icon: 'pi pi-home', route: '/' };
+const purchase = ref<PurchaseDetailData | null>(null);
+const loading = ref(true);
+
+onMounted(async () => {
+    loading.value = true;
+    try {
+        const id = Number(route.params.id);
+        if (id) {
+            const response: PurchaseDetailResponse = await purchaseServices.getPurchaseById(id);
+            console.log('Fetched purchase details:', response);
+            purchase.value = response.data;
+        }
+    } finally {
+        loading.value = false;
+    }
+});
+
+function formatCurrency(value: number | string) {
+    const num = typeof value === 'string' ? parseFloat(value) : value;
+    return num.toLocaleString('en-US', {
+        style: 'currency',
+        currency: 'MXN',
+        minimumFractionDigits: 2,
+    });
+}
+
+function formatDate(dateStr: string) {
+    if (!dateStr) return '';
+    const d = new Date(dateStr.replace(' ', 'T'));
+    return d.toLocaleDateString('es-MX', { day: '2-digit', month: '2-digit', year: 'numeric' });
+}
+</script>
diff --git a/src/modules/purchases/components/PurchaseForm.vue b/src/modules/purchases/components/PurchaseForm.vue
new file mode 100644
index 0000000..048b90b
--- /dev/null
+++ b/src/modules/purchases/components/PurchaseForm.vue
@@ -0,0 +1,295 @@
+<template>
+    <div class="purchase-form-container">
+        <Toast />
+        <Breadcrumb :home="home" :model="breadcrumbItems" class="mb-4">
+            <template #item="{ item }">
+                <a v-if="item.route" :href="item.route" @click.prevent="router.push(item.route)"
+                    class="text-primary hover:underline">
+                    {{ item.label }}
+                </a>
+                <span v-else class="text-[#111418] dark:text-white text-sm font-bold leading-normal">
+                    {{ item.label }}
+                </span>
+            </template>
+        </Breadcrumb>
+
+        <div class="flex flex-wrap justify-between gap-3 py-6 border-b border-[#dbe0e6] dark:border-[#2d3748] mb-8">
+            <div class="flex flex-col gap-1">
+                <h1 class="text-[#111418] dark:text-white text-3xl font-black leading-tight tracking-[-0.033em]">Nueva
+                    Solicitud
+                    de Compra</h1>
+            </div>
+        </div>
+        <form class="space-y-8" @submit.prevent="onSubmit">
+            <!-- Información General -->
+            <Card
+                class="bg-white dark:bg-[#1a202c] rounded-xl shadow-sm border border-[#dbe0e6] dark:border-[#2d3748] overflow-hidden">
+                <template #header>
+                    <div
+                        class="flex items-center gap-3 px-6 py-4 border-b border-[#dbe0e6] dark:border-[#2d3748] bg-gray-50 dark:bg-[#232a35]">
+                        <i class="pi pi-info-circle text-primary" />
+                        <h2 class="text-[#111418] dark:text-white text-lg font-bold">Información General</h2>
+                    </div>
+                </template>
+                <template #content>
+                    <div class="p-6">
+                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                            <div>
+                                <label class="text-[#111418] dark:text-gray-200 text-sm font-semibold">Proveedor</label>
+                                <Dropdown v-model="form.supplier_id" :options="suppliers" optionLabel="name"
+                                    optionValue="id" placeholder="Seleccionar proveedor..."
+                                    class="w-full h-12 text-sm" />
+                            </div>
+                        </div>
+                        <div class="flex flex-col gap-2 mt-6">
+                            <label class="text-[#111418] dark:text-gray-200 text-sm font-semibold">Notas</label>
+                            <Textarea v-model="form.notes" autoResize rows="3" class="w-full min-h-20 text-sm"
+                                placeholder="Información adicional sobre la orden..." />
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Items de la Solicitud -->
+            <Card
+                class="bg-white dark:bg-[#1a202c] rounded-xl shadow-sm border border-[#dbe0e6] dark:border-[#2d3748] overflow-hidden">
+                <template #header>
+                    <div
+                        class="flex items-center justify-between px-6 py-4 border-b border-[#dbe0e6] dark:border-[#2d3748] bg-gray-50 dark:bg-[#232a35]">
+                        <div class="flex items-center gap-3">
+                            <i class="pi pi-box text-primary" />
+                            <h2 class="text-[#111418] dark:text-white text-lg font-bold">Items de la Solicitud</h2>
+                        </div>
+                        <Button icon="pi pi-plus" label="Agregar Producto"
+                            class="bg-primary text-white px-4 py-2 rounded-lg text-sm font-bold" @click="handleAddProduct"
+                            type="button" />
+                    </div>
+                </template>
+                <template #content>
+                    <DataTable :value="form.items" class="w-full min-w-[900px]">
+                        <Column field="product" header="Producto">
+                            <template #body="{ data }">
+                                <div>
+                                    <div class="font-medium text-[#111418] dark:text-white">{{ data.product_name }}</div>
+                                    <div class="text-xs text-[#617589]">{{ data.sku }}</div>
+                                </div>
+                            </template>
+                        </Column>
+                        <Column field="attributes" header="Atributos" :body="attributesBody" />
+                        <Column field="quantity" header="Cantidad">
+                            <template #body="{ data }">
+                                <InputNumber v-model="data.quantity" :min="1" class="w-full" />
+                            </template>
+                        </Column>
+                        <Column field="unit_price" header="Precio Unitario">
+                            <template #body="{ data }">
+                                <InputNumber v-model="data.unit_price" mode="currency" currency="MXN" locale="es-MX" 
+                                    class="w-full" />
+                            </template>
+                        </Column>
+                        <Column field="subtotal" header="Subtotal">
+                            <template #body="{ data }">
+                                <span class="font-bold">{{ formatCurrency(calculateItemSubtotal(data)) }}</span>
+                            </template>
+                        </Column>
+                        <Column field="notes" header="Notas">
+                            <template #body="{ data }">
+                                <InputText v-model="data.notes" class="w-full min-w-[150px]" 
+                                    placeholder="Nota de item" />
+                            </template>
+                        </Column>
+                        <Column header="Acciones" style="text-align:center; width:100px">
+                            <template #body="{ index }">
+                                <Button icon="pi pi-trash" class="text-gray-400 hover:text-red-500" 
+                                    text @click="removeItem(index)" type="button" />
+                            </template>
+                        </Column>
+                    </DataTable>
+                    <div class="flex justify-end bg-gray-50 dark:bg-[#232a35] px-6 py-4">
+                        <span class="text-base font-bold text-[#111418] dark:text-white mr-4">Total Estimado:</span>
+                        <span class="text-xl font-black text-primary">{{ formatCurrency(total) }}</span>
+                    </div>
+                </template>
+            </Card>
+            <ProductsModal v-model:visible="showProductModal" @confirm="handleProductConfirm" />
+
+            <div class="flex items-center justify-end gap-4 py-10 border-t border-[#dbe0e6] dark:border-[#2d3748]">
+                <Button label="Cancelar"
+                    class="px-8 py-3 rounded-lg border border-[#dbe0e6] dark:border-[#2d3748] text-[#111418] dark:text-white font-bold"
+                    type="button" @click="onCancel" outlined />
+                <Button label="Enviar Solicitud" icon="pi pi-send"
+                    class="px-10 py-3 rounded-lg bg-primary text-white font-bold shadow-lg shadow-primary/20"
+                    type="submit" />
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useSupplierStore } from '../../catalog/stores/supplierStore';
+import { purchaseServices } from '../services/purchaseServices';
+import type { CreatePurchaseData, CreatePurchaseItemData } from '../types/purchases';
+import type { PurchaseFormItem } from '../types/purchaseForm';
+import { useToast } from 'primevue/usetoast';
+
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import Dropdown from 'primevue/dropdown';
+import Textarea from 'primevue/textarea';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+import Toast from 'primevue/toast';
+
+import Breadcrumb from 'primevue/breadcrumb';
+import ProductsModal from './ProductsModal.vue';
+
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const toast = useToast();
+const breadcrumbItems = [
+    { label: 'Compras', route: '/purchases/requests' },
+    { label: 'Solicitudes', route: '/purchases/requests' },
+    { label: 'Crear' }
+];
+const home = { icon: 'pi pi-home', route: '/' };
+
+// Proveedores desde el store global
+const supplierStore = useSupplierStore();
+const { suppliers } = storeToRefs(supplierStore);
+onMounted(() => {
+    if (!suppliers.value.length) supplierStore.fetchAllSuppliers();
+});
+
+const form = ref({
+    purchase_number: '',
+    supplier_id: null,
+    request_date: '',
+    delivery_date: '',
+    notes: '',
+    items: [] as PurchaseFormItem[],
+});
+
+function calculateItemSubtotal(item: PurchaseFormItem): number {
+    return (Number(item.quantity) || 0) * (Number(item.unit_price) || 0);
+}
+
+const total = computed(() => {
+    return form.value.items.reduce((sum, item) => {
+        return sum + calculateItemSubtotal(item);
+    }, 0);
+});
+
+function formatCurrency(value: number) {
+    return value.toLocaleString('es-MX', { style: 'currency', currency: 'MXN', minimumFractionDigits: 2 });
+}
+
+function onCancel() {
+    // Navegar o limpiar formulario
+    router.replace('/purchases/requests'); 
+}
+
+async function onSubmit() {
+    try {
+        // Validación básica
+        if (!form.value.supplier_id) {
+            toast.add({
+                severity: 'warn',
+                summary: 'Validación',
+                detail: 'Por favor seleccione un proveedor',
+                life: 3000
+            });
+            return;
+        }
+
+        if (form.value.items.length === 0) {
+            toast.add({
+                severity: 'warn',
+                summary: 'Validación',
+                detail: 'Por favor agregue al menos un producto',
+                life: 3000
+            });
+            return;
+        }
+
+        // Transformar items del formulario al formato del API
+        const items: CreatePurchaseItemData[] = form.value.items.map(item => ({
+            product_id: item.product_id,
+            quantity: item.quantity,
+            unit_price: Number(item.unit_price),
+            subtotal: calculateItemSubtotal(item),
+            notes: item.notes || '',
+            attributes: item.attributes || {}
+        }));
+
+        // Preparar datos para enviar
+        const purchaseData: CreatePurchaseData = {
+            supplier_id: form.value.supplier_id,
+            notes: form.value.notes || '',
+            total_amount: total.value,
+            items
+        };
+
+        // Enviar solicitud
+        const response = await purchaseServices.createPurchaseRequest(purchaseData);
+
+        // Mostrar mensaje de éxito
+        toast.add({
+            severity: 'success',
+            summary: 'Solicitud Creada',
+            detail: `Solicitud ${response.data.purchase_number} creada exitosamente`,
+            life: 3000
+        });
+
+        // Redirigir al listado
+        router.push('/purchases/requests');
+    } catch (error) {
+        console.error('Error creating purchase:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo crear la solicitud. Intente nuevamente',
+            life: 3000
+        });
+    }
+}
+
+function handleAddProduct(): void {
+    showProductModal.value = true;
+}
+
+function handleProductConfirm(productData: PurchaseFormItem): void {
+    // Agregar el producto seleccionado al formulario
+    if (productData) {
+        form.value.items.push({
+            product_id: productData.product_id,
+            product_name: productData.product_name,
+            sku: productData.sku,
+            quantity: productData.quantity,
+            unit_price: productData.unit_price,
+            subtotal: '0', // Se calculará dinámicamente
+            notes: productData.notes || '',
+            attributes: productData.attributes || {}
+        });
+    }
+    showProductModal.value = false;
+}
+
+const showProductModal = ref(false);
+
+function removeItem(index: number) {
+    form.value.items.splice(index, 1);
+}
+
+// DataTable custom bodies
+function attributesBody(row: any) {
+    if (!row.attributes || typeof row.attributes !== 'object') return '';
+    const attrs = Object.entries(row.attributes)
+        .filter(([, value]) => value)
+        .map(([key, value]) => `<span class='px-2 py-0.5 bg-gray-100 dark:bg-gray-700 rounded text-[10px] mr-1'>${key}: ${value}</span>`);
+    return attrs.join('');
+}
+</script>
diff --git a/src/modules/purchases/components/Purchases.vue b/src/modules/purchases/components/Purchases.vue
new file mode 100644
index 0000000..b98159f
--- /dev/null
+++ b/src/modules/purchases/components/Purchases.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { purchaseServices } from '../services/purchaseServices';
+import type { Purchase } from '../types/purchases';
+import { PURCHASE_STATUS_MAP } from '../types/purchases.d';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Paginator from 'primevue/paginator';
+import Toast from 'primevue/toast';
+import { useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import ConfirmDialog from 'primevue/confirmdialog';
+import { useConfirm } from 'primevue/useconfirm';
+
+const purchaseOrders = ref<Purchase[]>([]);
+const page = ref(1);
+const rows = ref(10);
+const totalRecords = ref(0);
+const router = useRouter();
+const toast = useToast();
+const confirm = useConfirm();
+
+const fetchPurchases = async () => {
+    try {
+        const response = await purchaseServices.getPurchases();
+        purchaseOrders.value = response.data;
+        totalRecords.value = response.total;
+        // Si tu backend soporta paginación, puedes actualizar page, rows, etc. aquí
+    } catch (e) {
+        // Manejo de error opcional
+    }
+};
+
+onMounted(() => {
+    fetchPurchases();
+});
+
+const onPageChange = (event: any) => {
+    page.value = Math.floor(event.first / event.rows) + 1;
+    rows.value = event.rows;
+};
+
+function goToDetails(id: string | number) {
+    router.push({ name: 'PurchaseDetails', params: { id } });
+}
+
+function goToCreate() {
+    router.push({ name: 'PurchaseCreate' });
+}
+
+function getStatusSeverity(status: string): 'success' | 'info' | 'warning' | 'danger' {
+    const severityMap: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
+        '0': 'warning',  // Pendiente
+        '1': 'danger',   // Rechazada
+        '2': 'success',  // Aceptada
+        '3': 'info',     // Convertida en compra
+        '4': 'success',  // Ingresada a inventario
+    };
+    return severityMap[status] || 'info';
+}
+
+async function approvePurchase(id: string | number) {
+    confirm.require({
+        message: '¿Está seguro de que desea aceptar esta orden de compra?',
+        header: 'Confirmar Aceptación',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Sí, Aceptar',
+        rejectLabel: 'Cancelar',
+        accept: async () => {
+            try {
+                const response = await purchaseServices.updatePurchaseStatus(Number(id), '2');
+                const index = purchaseOrders.value.findIndex(p => p.id === Number(id));
+                if (index !== -1) {
+                    purchaseOrders.value[index] = response.data;
+                }
+                toast.add({ severity: 'success', summary: 'Orden Aceptada', detail: 'La orden de compra ha sido aceptada exitosamente', life: 3000 });
+            } catch (error) {
+                toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo aceptar la orden de compra', life: 3000 });
+            }
+        }
+    });
+}
+
+async function rejectPurchase(id: string | number) {
+    confirm.require({
+        message: '¿Está seguro de que desea rechazar esta orden de compra? Esta acción no se puede deshacer.',
+        header: 'Confirmar Rechazo',
+        icon: 'pi pi-exclamation-triangle',
+        acceptLabel: 'Sí, Rechazar',
+        rejectLabel: 'Cancelar',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                const response = await purchaseServices.updatePurchaseStatus(Number(id), '1');
+                const index = purchaseOrders.value.findIndex(p => p.id === Number(id));
+                if (index !== -1) {
+                    purchaseOrders.value[index] = response.data;
+                }
+                toast.add({ severity: 'warn', summary: 'Orden Rechazada', detail: 'La orden de compra ha sido rechazada', life: 3000 });
+            } catch (error) {
+                toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo rechazar la orden de compra', life: 3000 });
+            }
+        }
+    });
+}
+
+async function convertToPurchase(id: string | number) {
+    confirm.require({
+        message: '¿Está seguro de que desea convertir esta solicitud en una orden de compra?',
+        header: 'Confirmar Conversión',
+        icon: 'pi pi-shopping-cart',
+        acceptLabel: 'Sí, Convertir',
+        rejectLabel: 'Cancelar',
+        accept: async () => {
+            try {
+                const response = await purchaseServices.updatePurchaseStatus(Number(id), '3');
+                const index = purchaseOrders.value.findIndex(p => p.id === Number(id));
+                if (index !== -1) {
+                    purchaseOrders.value[index] = response.data;
+                }
+                toast.add({ severity: 'success', summary: 'Convertida en Compra', detail: 'La solicitud ha sido convertida en orden de compra exitosamente', life: 3000 });
+            } catch (error) {
+                toast.add({ severity: 'error', summary: 'Error', detail: 'No se pudo convertir la solicitud en compra', life: 3000 });
+            }
+        }
+    });
+}
+
+function goToAddInventory(id: string | number) {
+    router.push({ name: 'WarehouseAddInventory', query: { purchaseId: id } });
+}
+</script>
+
+<template>
+    <div class="space-y-6">
+        <Toast />
+        <ConfirmDialog />
+        <!-- Page Heading & Actions -->
+        <div class="flex flex-wrap justify-between items-end gap-3 mb-8">
+            <div>
+                <p class="text-4xl font-black leading-tight tracking-[-0.033em]">Órdenes de Compra</p>
+                <p class="text-gray-500 mt-1">Administra y rastrea los ciclos de compras en todos los departamentos.</p>
+            </div>
+            <div class="flex gap-3">
+                <!-- <Button icon="pi pi-download" label="Exportar CSV" outlined /> -->
+                <Button icon="pi pi-plus" label="Nueva Orden" @click="goToCreate" />
+
+            </div>
+        </div>
+
+        <Card>
+            <template #content>
+                <!-- Data Table -->
+                <DataTable :value="purchaseOrders" stripedRows responsiveLayout="scroll" class="p-datatable-sm">
+                    <Column field="purchase_number" header="Folio" />
+                    <Column field="supplier.name" header="Proveedor" />
+                    <Column field="request_date" header="Fecha de Solicitud">
+                        <template #body="{ data }">
+                            {{ new Date(data.request_date).toLocaleDateString() }}
+                        </template>
+                    </Column>
+                    <Column field="total_amount" header="Monto Total">
+                        <template #body="{ data }">
+                            {{ new Intl.NumberFormat('es-MX', {
+                                style: 'currency', currency: 'MXN'
+                            }).format(data.total_amount) }}
+                        </template>
+                    </Column>
+                    <Column header="Estado">
+                        <template #body="{ data }">
+                            <Tag :value="PURCHASE_STATUS_MAP[data.status] || data.status" 
+                                 :severity="getStatusSeverity(data.status)" />
+                        </template>
+                    </Column>
+                    <Column header="Acciones" bodyStyle="text-align: right">
+                        <template #body="{ data }">
+                            <div class="flex gap-2 justify-end">
+                                <Button v-if="data.status === '0'" icon="pi pi-check" severity="success" text rounded
+                                    @click="approvePurchase(data.id)" v-tooltip.top="'Aprobar'" />
+                                <Button v-if="data.status === '0'" icon="pi pi-times" severity="danger" text rounded
+                                    @click="rejectPurchase(data.id)" v-tooltip.top="'Rechazar'" />
+                                <Button v-if="data.status === '2'" icon="pi pi-shopping-cart" severity="success" text rounded
+                                    @click="convertToPurchase(data.id)" v-tooltip.top="'Convertir en Compra'" />
+                                <Button v-if="data.status === '3'" icon="pi pi-warehouse" severity="info" text rounded
+                                    @click="goToAddInventory(data.id)" v-tooltip.top="'Cargar Inventario'" />
+                                <Button icon="pi pi-eye" severity="info" text rounded
+                                    @click="goToDetails(data.id)" v-tooltip.top="'Ver Detalles'" />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+                <div class="mt-4">
+                    <Paginator :first="(page - 1) * rows" :rows="rows" :totalRecords="totalRecords"
+                        :rowsPerPageOptions="[10, 20, 50]" @page="onPageChange" />
+                </div>
+            </template>
+        </Card>
+    </div>
+</template>
diff --git a/src/modules/purchases/services/purchaseServices.ts b/src/modules/purchases/services/purchaseServices.ts
new file mode 100644
index 0000000..3ac39ca
--- /dev/null
+++ b/src/modules/purchases/services/purchaseServices.ts
@@ -0,0 +1,52 @@
+import api from '../../../services/api';
+import type { PurchasePaginatedResponse, PurchaseDetailResponse, CreatePurchaseData, CreatePurchaseResponse, UpdatePurchaseStatusResponse } from '../types/purchases';
+
+
+const purchaseServices = {
+
+    async getPurchases(): Promise<PurchasePaginatedResponse> {
+        try {
+            const response = await api.get('/api/purchases');
+            console.log('📦 Purchases response:', response);
+            return response.data;
+        } catch (error) {
+            console.error('❌ Error fetching purchases:', error);
+            throw error;
+        }
+    },
+    
+    async getPurchaseById(purchaseId: number): Promise<PurchaseDetailResponse> {
+        try {
+            const response = await api.get(`/api/purchases/${purchaseId}`);
+            console.log(`📦 Purchase with ID ${purchaseId} response:`, response.data);
+            return response.data;
+        } catch (error) {
+            console.error(`❌ Error fetching purchase with ID ${purchaseId}:`, error);
+            throw error;
+        }
+    },
+
+    async createPurchaseRequest(data: CreatePurchaseData): Promise <CreatePurchaseResponse> {
+        try {
+            const response = await api.post('/api/purchases', data);
+            console.log('📦 Create Purchase response:', response.data);
+            return response.data;
+        } catch (error) {
+            console.error('❌ Error creating purchase:', error);
+            throw error;
+        }
+    },
+    async updatePurchaseStatus(purchaseId: number, status: string): Promise<UpdatePurchaseStatusResponse> {
+        try {
+            const response = await api.patch(`/api/purchases/${purchaseId}`, { status });
+            console.log(`✅ Updated status for purchase with ID ${purchaseId} to ${status}`);
+            return response.data;
+        } catch (error) {
+            console.error(`❌ Error updating status for purchase with ID ${purchaseId}:`, error);
+            throw error;
+        }
+    }
+
+}
+
+export { purchaseServices };
\ No newline at end of file
diff --git a/src/modules/purchases/types/purchaseForm.d.ts b/src/modules/purchases/types/purchaseForm.d.ts
new file mode 100644
index 0000000..daf9ae8
--- /dev/null
+++ b/src/modules/purchases/types/purchaseForm.d.ts
@@ -0,0 +1,10 @@
+export interface PurchaseFormItem {
+    product_id: number;
+    product_name: string;
+    sku: string;
+    quantity: number;
+    unit_price: number | string;
+    subtotal?: string;
+    notes?: string;
+    attributes?: Record<string, any>;
+}
\ No newline at end of file
diff --git a/src/modules/purchases/types/purchaseForm.ts b/src/modules/purchases/types/purchaseForm.ts
new file mode 100644
index 0000000..c858e1a
--- /dev/null
+++ b/src/modules/purchases/types/purchaseForm.ts
@@ -0,0 +1,10 @@
+export interface PurchaseFormItem {
+    product_id: number;
+    product_name: string;
+    sku: string;
+    quantity: number;
+    unit_price: number | string;
+    subtotal?: string;
+    notes?: string;
+    attributes?: Record<string, any>;
+}
diff --git a/src/modules/purchases/types/purchases.d.ts b/src/modules/purchases/types/purchases.d.ts
new file mode 100644
index 0000000..7a21ed4
--- /dev/null
+++ b/src/modules/purchases/types/purchases.d.ts
@@ -0,0 +1,120 @@
+import type { Supplier } from '../../catalog/types/suppliers.interfaces';
+
+export interface Product {
+  id: number;
+  code: string;
+  sku: string;
+  name: string;
+  barcode: string;
+  description: string;
+  unit_of_measure_id: number;
+  suggested_sale_price: number;
+  attributes: Record<string, any>;
+  is_active: boolean;
+  is_serial: boolean;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+}
+
+export interface Purchase {
+  id: number;
+  purchase_number: string;
+  supplier_id: number;
+  status: string;
+  notes: string;
+  total_amount: number;
+  request_date: string;
+  delivery_date: string;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  supplier: Supplier | null;
+}
+
+export interface PaginationLink {
+  url: string | null;
+  label: string;
+  active: boolean;
+}
+
+export interface PurchasePaginatedResponse {
+  current_page: number;
+  data: Purchase[];
+  first_page_url: string;
+  from: number;
+  last_page: number;
+  last_page_url: string;
+  links: PaginationLink[];
+  next_page_url: string | null;
+  path: string;
+  per_page: number;
+  prev_page_url: string | null;
+  to: number;
+  total: number;
+}
+
+export interface PurchaseItem {
+  id: number;
+  purchase_id: number;
+  product_id: number;
+  quantity: number;
+  unit_price: string;
+  subtotal: string;
+  notes: string | null;
+  attributes: Record<string, any>;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  product: Product;
+}
+
+export interface PurchaseDetailData extends Purchase {
+  items: PurchaseItem[];
+  supplier: Supplier;
+}
+
+export interface PurchaseDetailResponse {
+  data: PurchaseDetailData;
+}
+
+// Mapeo de estatus de solicitud de compra (enum backend)
+export interface PurchaseStatusMap {
+  [key: string]: string;
+}
+
+export const PURCHASE_STATUS_MAP: PurchaseStatusMap = {
+  '0': 'Pendiente',
+  '1': 'Rechazada',
+  '2': 'Aceptada',
+  '3': 'Convertida en compra',
+  '4': 'Ingresada a inventario',
+};
+
+export interface CreatePurchaseItemData {
+  product_id: number;
+  quantity: number;
+  unit_price: number;
+  subtotal: number;
+  notes: string;
+  attributes: Record<string, any>;
+}
+
+export interface CreatePurchaseData {
+  supplier_id: number;
+  notes: string;
+  total_amount: number;
+  items: CreatePurchaseItemData[];
+}
+
+export interface CreatedPurchaseData extends Omit<Purchase, 'supplier'> {
+  items: PurchaseItem[];
+}
+
+export interface CreatePurchaseResponse {
+  data: CreatedPurchaseData;
+}
+
+export interface UpdatePurchaseStatusResponse {
+  data: Purchase;
+}
diff --git a/src/modules/requisitions/CreateRequisition.vue b/src/modules/requisitions/CreateRequisition.vue
new file mode 100644
index 0000000..d94e41d
--- /dev/null
+++ b/src/modules/requisitions/CreateRequisition.vue
@@ -0,0 +1,760 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Dropdown from 'primevue/dropdown';
+import Textarea from 'primevue/textarea';
+import InputNumber from 'primevue/inputnumber';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Dialog from 'primevue/dialog';
+import Toast from 'primevue/toast';
+import { useRequisitionStore } from './stores/requisitionStore';
+import type { RequisitionItem } from './types/requisition.interfaces';
+
+const router = useRouter();
+const route = useRoute();
+const toast = useToast();
+const requisitionStore = useRequisitionStore();
+
+const isEditMode = ref(false);
+const requisitionId = ref<number | null>(null);
+
+const form = ref({
+    folio: '',
+    requester: 'Edgar Mendoza',
+    status: 'Borrador',
+    priority: 'medium',
+    department: '',
+    justification: ''
+});
+
+const items = ref<RequisitionItem[]>([]);
+const isSaving = ref(false);
+
+const priorityOptions = [
+    { label: 'Baja', value: 'low' },
+    { label: 'Media', value: 'medium' },
+    { label: 'Alta', value: 'high' },
+    { label: 'Urgente', value: 'urgent' }
+];
+
+const departmentOptions = [
+    { label: 'Producción - Línea A', value: 'prod_a' },
+    { label: 'Mantenimiento Industrial', value: 'maintenance' },
+    { label: 'Logística y Almacén', value: 'logistics' },
+    { label: 'Administración', value: 'admin' }
+];
+
+const urlDialogVisible = ref(false);
+const selectedItemIndex = ref<number | null>(null);
+const tempUrl = ref('');
+
+const addItem = () => {
+    items.value.push({
+        id: items.value.length + 1,
+        product: '',
+        quantity: 0,
+        unit: '',
+        unitPrice: 0,
+        url: ''
+    });
+};
+
+const openUrlDialog = (index: number) => {
+    selectedItemIndex.value = index;
+    const item = items.value[index];
+    if (item) {
+        tempUrl.value = item.url || '';
+    }
+    urlDialogVisible.value = true;
+};
+
+const saveUrl = () => {
+    if (selectedItemIndex.value !== null) {
+        const item = items.value[selectedItemIndex.value];
+        if (item) {
+            item.url = tempUrl.value;
+        }
+    }
+    urlDialogVisible.value = false;
+    tempUrl.value = '';
+    selectedItemIndex.value = null;
+};
+
+const closeUrlDialog = () => {
+    urlDialogVisible.value = false;
+    tempUrl.value = '';
+    selectedItemIndex.value = null;
+};
+
+const copyToClipboard = async (text: string) => {
+    try {
+        await navigator.clipboard.writeText(text);
+        console.log('URL copiado al portapapeles');
+    } catch (err) {
+        console.error('Error al copiar:', err);
+    }
+};
+
+const calculateSubtotal = (item: RequisitionItem): number => {
+    return item.quantity * item.unitPrice;
+};
+
+const calculateTotal = (): number => {
+    return items.value.reduce((total: number, item: RequisitionItem) => total + calculateSubtotal(item), 0);
+};
+
+const formatCurrency = (value: number): string => {
+    return new Intl.NumberFormat('es-MX', {
+        style: 'currency',
+        currency: 'MXN'
+    }).format(value);
+};
+
+const removeItem = (index: number) => {
+    items.value.splice(index, 1);
+};
+
+/* const removeFile = (index: number) => {
+    uploadedFiles.value.splice(index, 1);
+};
+
+const onFileUpload = (event: any) => {
+    const files = event.files;
+    files.forEach((file: File) => {
+        uploadedFiles.value.push({
+            name: file.name,
+            size: (file.size / 1024 / 1024).toFixed(2) + ' MB',
+            type: file.type.includes('image') ? 'image' : 'pdf'
+        });
+    });
+}; */
+
+const loadRequisition = async () => {
+    const id = route.params.id;
+    if (id && typeof id === 'string') {
+        isEditMode.value = true;
+        requisitionId.value = parseInt(id);
+        
+        const requisition = requisitionStore.getRequisitionById(requisitionId.value);
+        if (requisition) {
+            form.value = {
+                folio: requisition.folio,
+                requester: requisition.requester,
+                status: requisition.status === 'draft' ? 'Borrador' : requisition.status,
+                priority: requisition.priority,
+                department: requisition.department,
+                justification: requisition.justification
+            };
+            items.value = [...requisition.items];
+        } else {
+            toast.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'Requisición no encontrada',
+                life: 3000
+            });
+            router.push('/requisitions');
+        }
+    } else {
+        // Modo creación - generar nuevo folio
+        const nextNumber = requisitionStore.requisitions.length + 1;
+        form.value.folio = `REQ-2024-${String(nextNumber).padStart(3, '0')}`;
+    }
+};
+
+const validateForm = (): boolean => {
+    if (!form.value.priority) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'La prioridad es requerida',
+            life: 3000
+        });
+        return false;
+    }
+
+    if (!form.value.department) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'El departamento es requerido',
+            life: 3000
+        });
+        return false;
+    }
+
+    if (items.value.length === 0) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'Debe agregar al menos un item',
+            life: 3000
+        });
+        return false;
+    }
+
+    const hasInvalidItems = items.value.some((item: RequisitionItem) =>
+        !item.product || item.quantity <= 0 || !item.unit || item.unitPrice <= 0
+    );
+
+    if (hasInvalidItems) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'Todos los items deben tener producto, cantidad, unidad y precio válidos',
+            life: 3000
+        });
+        return false;
+    }
+
+    return true;
+};
+
+const handleCancel = () => {
+    router.push('/requisitions');
+};
+
+const handleSaveDraft = async () => {
+    if (!validateForm()) return;
+
+    isSaving.value = true;
+    try {
+        if (isEditMode.value && requisitionId.value) {
+            await requisitionStore.updateRequisition(requisitionId.value, form.value, items.value);
+            toast.add({
+                severity: 'success',
+                summary: 'Guardado',
+                detail: 'Requisición actualizada correctamente',
+                life: 3000
+            });
+        } else {
+            await requisitionStore.createRequisition(form.value, items.value);
+            toast.add({
+                severity: 'success',
+                summary: 'Guardado',
+                detail: 'Requisición guardada como borrador',
+                life: 3000
+            });
+        }
+        router.push('/requisitions');
+    } catch (error: any) {
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: error.message || 'Error al guardar la requisición',
+            life: 3000
+        });
+    } finally {
+        isSaving.value = false;
+    }
+};
+
+const handleSubmit = async () => {
+    if (!validateForm()) return;
+
+    isSaving.value = true;
+    try {
+        let reqId: number;
+
+        if (isEditMode.value && requisitionId.value) {
+            await requisitionStore.updateRequisition(requisitionId.value, form.value, items.value);
+            reqId = requisitionId.value;
+        } else {
+            const newReq = await requisitionStore.createRequisition(form.value, items.value);
+            reqId = newReq.id;
+        }
+
+        // Enviar a aprobación
+        await requisitionStore.submitForApproval(reqId);
+        
+        toast.add({
+            severity: 'success',
+            summary: 'Enviado',
+            detail: 'Requisición enviada a aprobación correctamente',
+            life: 3000
+        });
+        router.push('/requisitions');
+    } catch (error: any) {
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: error.message || 'Error al enviar la requisición',
+            life: 3000
+        });
+    } finally {
+        isSaving.value = false;
+    }
+};
+
+onMounted(() => {
+    loadRequisition();
+});
+
+const totalItems = () => {
+    return items.value.filter((item: RequisitionItem) => item.quantity > 0).length;
+};
+</script>
+
+<template>
+    <div class="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="space-y-6 py-4">
+            <!-- Header -->
+            <div class="flex flex-col gap-4">
+                <div class="flex items-center gap-3">
+                    <Button icon="pi pi-arrow-left" text rounded @click="$router.back()" class="shrink-0" size="small" />
+                    <h2 class="text-xl md:text-2xl lg:text-3xl font-black text-surface-900 dark:text-white tracking-tight">
+                        Crear Requisición de Material
+                    </h2>
+                </div>
+                <div class="flex items-center gap-3 flex-wrap">
+                    <Button icon="pi pi-print" label="Imprimir" text size="small" />
+                    <Button icon="pi pi-share-alt" label="Compartir" text size="small" />
+                </div>
+            </div>
+
+            <!-- Información General -->
+            <Card>
+                <template #header>
+                    <div class="px-4 md:px-6 py-3 border-b border-surface-200 dark:border-surface-700 flex flex-col md:flex-row md:items-center justify-between gap-2">
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-info-circle text-primary text-lg"></i>
+                            <h3 class="font-bold text-base">Información General</h3>
+                        </div>
+                        <span class="text-xs text-gray-500">Campos obligatorios marcados con *</span>
+                    </div>
+                </template>
+
+                <template #content>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">
+                                Folio
+                            </label>
+                            <InputText v-model="form.folio" class="w-full bg-gray-50 dark:bg-gray-900" size="small" />
+                        </div>
+
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">
+                                Solicitante
+                            </label>
+                            <InputText v-model="form.requester" readonly class="w-full bg-gray-50 dark:bg-gray-900" size="small" />
+                        </div>
+
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">
+                                Estatus
+                            </label>
+                            <div class="relative">
+                                <span class="absolute left-3 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-blue-400"></span>
+                                <InputText v-model="form.status" readonly class="w-full bg-gray-50 dark:bg-gray-900 pl-8" size="small" />
+                            </div>
+                        </div>
+
+                        <div>
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">
+                                Prioridad <span class="text-red-500">*</span>
+                            </label>
+                            <Dropdown 
+                                v-model="form.priority" 
+                                :options="priorityOptions" 
+                                optionLabel="label" 
+                                optionValue="value"
+                                class="w-full"
+                            />
+                        </div>
+
+                        <div class="sm:col-span-2 lg:col-span-4">
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">
+                                Departamento / Centro de Costos
+                            </label>
+                            <Dropdown 
+                                v-model="form.department" 
+                                :options="departmentOptions" 
+                                optionLabel="label" 
+                                optionValue="value"
+                                placeholder="Seleccionar departamento"
+                                class="w-full"
+                            />
+                        </div>
+
+                        <div class="sm:col-span-2 lg:col-span-4">
+                            <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">
+                                Justificación de la Requisición
+                            </label>
+                            <Textarea 
+                                v-model="form.justification" 
+                                placeholder="Describe el motivo y la necesidad de esta requisición..."
+                                rows="3" 
+                                autoResize
+                                class="w-full"
+                            />
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Items de la Requisición -->
+            <Card>
+                <template #header>
+                    <div class="px-4 md:px-6 py-3 border-b border-surface-200 dark:border-surface-700 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-list text-primary text-lg"></i>
+                            <h3 class="font-bold text-base">Items de la Requisición</h3>
+                        </div>
+                        <Button label="Agregar" icon="pi pi-plus-circle" @click="addItem" size="small" class="w-full sm:w-auto" />
+                    </div>
+                </template>
+
+                <template #content>
+                    <!-- Mobile View - Cards -->
+                    <div class="lg:hidden space-y-4">
+                        <div v-for="(item, index) in items" :key="item.id" 
+                            class="border border-gray-200 dark:border-gray-800 rounded-lg p-4 space-y-3">
+                            <div class="flex items-center justify-between border-b pb-2 mb-2">
+                                <span class="text-sm font-bold text-gray-500">
+                                    Item #{{ String(index + 1).padStart(2, '0') }}
+                                </span>
+                                <Button 
+                                    icon="pi pi-trash" 
+                                    text 
+                                    rounded 
+                                    severity="danger" 
+                                    size="small"
+                                    @click="removeItem(index)"
+                                />
+                            </div>
+
+                            <div>
+                                <label class="block text-xs font-bold text-gray-500 mb-1">Producto / Servicio</label>
+                                <InputText 
+                                    v-model="item.product" 
+                                    placeholder="Nombre del producto o servicio..." 
+                                    class="w-full bg-gray-50 dark:bg-gray-900"
+                                    size="small"
+                                />
+                            </div>
+
+                            <div class="grid grid-cols-2 gap-3">
+                                <div>
+                                    <label class="block text-xs font-bold text-gray-500 mb-1">Cantidad</label>
+                                    <InputNumber v-model="item.quantity" :min="0" class="w-full" size="small" />
+                                </div>
+                                <div>
+                                    <label class="block text-xs font-bold text-gray-500 mb-1">Unidad</label>
+                                    <InputText 
+                                        v-model="item.unit" 
+                                        placeholder="Pz, Kg, Lt, etc." 
+                                        class="w-full bg-gray-50 dark:bg-gray-900"
+                                        size="small"
+                                    />
+                                </div>
+                            </div>
+
+                            <div>
+                                <label class="block text-xs font-bold text-gray-500 mb-1">Precio Unitario</label>
+                                <InputNumber 
+                                    v-model="item.unitPrice" 
+                                    :min="0" 
+                                    :minFractionDigits="2" 
+                                    :maxFractionDigits="2"
+                                    mode="currency" 
+                                    currency="MXN" 
+                                    locale="es-MX"
+                                    class="w-full" 
+                                    size="small" 
+                                />
+                            </div>
+
+                            <div class="pt-2 border-t border-gray-200 dark:border-gray-700">
+                                <Button 
+                                    :label="item.url ? 'Editar URL' : 'Agregar URL'"
+                                    :icon="item.url ? 'pi pi-pencil' : 'pi pi-link'"
+                                    size="small"
+                                    outlined
+                                    class="w-full"
+                                    @click="openUrlDialog(index)"
+                                />
+                            </div>
+
+                            <div class="pt-2 border-t border-gray-200 dark:border-gray-700">
+                                <div class="flex items-center justify-between">
+                                    <span class="text-xs font-bold text-gray-500 uppercase">Subtotal</span>
+                                    <span class="text-lg font-bold text-primary">{{ formatCurrency(calculateSubtotal(item)) }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Desktop View - DataTable -->
+                    <div class="hidden lg:block">
+                        <DataTable :value="items" class="text-sm" stripedRows>
+                            <Column field="id" header="#" class="text-center" style="width: 60px">
+                                <template #body="{ index }">
+                                    <span class="text-gray-400 font-medium text-xs">{{ String(index + 1).padStart(2, '0') }}</span>
+                                </template>
+                            </Column>
+                            
+                            <Column header="Cantidad" style="width: 130px">
+                                <template #body="{ data }">
+                                    <InputNumber v-model="data.quantity" :min="0" class="w-full" size="small" />
+                                </template>
+                            </Column>
+                            
+                            <Column header="Unidad" style="width: 120px">
+                                <template #body="{ data }">
+                                    <InputText 
+                                        v-model="data.unit" 
+                                        placeholder="Pz, Kg, Lt..." 
+                                        class="w-full text-sm"
+                                        size="small"
+                                    />
+                                </template>
+                            </Column>
+                            
+                            <Column header="Producto / Servicio" style="min-width: 300px">
+                                <template #body="{ data }">
+                                    <InputText 
+                                        v-model="data.product" 
+                                        placeholder="Nombre del producto o servicio..." 
+                                        class="w-full border-none p-0 text-sm"
+                                        unstyled
+                                    />
+                                </template>
+                            </Column>
+                            
+                            <Column header="Precio Unitario" style="width: 180px">
+                                <template #body="{ data }">
+                                    <InputNumber 
+                                        v-model="data.unitPrice" 
+                                        :min="0" 
+                                        :minFractionDigits="2" 
+                                        :maxFractionDigits="2"
+                                        mode="currency" 
+                                        currency="MXN" 
+                                        locale="es-MX"
+                                        class="w-full" 
+                                        size="small" 
+                                    />
+                                </template>
+                            </Column>
+                            
+                            <Column header="Subtotal" headerClass="text-right" style="width: 180px">
+                                <template #body="{ data }">
+                                    <div class="text-right">
+                                        <span class="font-semibold text-gray-700 dark:text-gray-300">{{ formatCurrency(calculateSubtotal(data)) }}</span>
+                                    </div>
+                                </template>
+                            </Column>
+                            
+                            <Column header="URL" style="width: 120px" class="text-center">
+                                <template #body="{ data, index }">
+                                    <Button 
+                                        :icon="data.url ? 'pi pi-check-circle' : 'pi pi-link'"
+                                        :severity="data.url ? 'success' : 'secondary'"
+                                        text
+                                        rounded
+                                        size="small"
+                                        @click="openUrlDialog(index)"
+                                        v-tooltip.top="data.url ? 'Editar URL' : 'Agregar URL'"
+                                    />
+                                </template>
+                            </Column>
+                            
+                            <Column header="Acciones" class="text-center" style="width: 80px">
+                                <template #body="{ index }">
+                                    <Button 
+                                        icon="pi pi-trash" 
+                                        text 
+                                        rounded 
+                                        severity="danger"
+                                        size="small"
+                                        @click="removeItem(index)"
+                                    />
+                                </template>
+                            </Column>
+                        </DataTable>
+                    </div>
+
+                    <div class="mt-3 p-4 bg-gray-50 dark:bg-gray-800/30 flex flex-col sm:flex-row items-end justify-between gap-3">
+                        <div class="text-left">
+                            <p class="text-xs text-gray-500 uppercase font-semibold">Total Items</p>
+                            <p class="text-lg font-bold">{{ totalItems() }}</p>
+                        </div>
+                        <div class="text-right">
+                            <p class="text-xs text-gray-500 uppercase font-semibold mb-1">Total General</p>
+                            <p class="text-2xl font-black text-primary">{{ formatCurrency(calculateTotal()) }}</p>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Documentos y Fotos -->
+            <!-- <Card>
+                <template #header>
+                    <div class="px-4 md:px-6 py-3 border-b border-surface-200 dark:border-surface-700">
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-paperclip text-primary text-lg"></i>
+                            <h3 class="font-bold text-base">Documentos y Fotos</h3>
+                        </div>
+                    </div>
+                </template>
+
+                <template #content>
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                        <div>
+                            <FileUpload 
+                                mode="basic" 
+                                accept="image/*,application/pdf" 
+                                :maxFileSize="5000000"
+                                chooseLabel="Seleccionar archivos"
+                                @select="onFileUpload"
+                                :auto="true"
+                                customUpload
+                            >
+                                <template #empty>
+                                    <div class="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-xl p-6 flex flex-col items-center justify-center text-center hover:border-primary hover:bg-primary/5 transition-all cursor-pointer">
+                                        <div class="bg-primary/10 w-12 h-12 rounded-full flex items-center justify-center mb-3">
+                                            <i class="pi pi-cloud-upload text-primary text-xl"></i>
+                                        </div>
+                                        <p class="font-semibold text-gray-700 dark:text-gray-300 text-sm">Suelte archivos aquí</p>
+                                        <p class="text-xs text-gray-400 mt-1">
+                                            O haga clic para explorar. JPG, PNG, PDF (Máx. 5MB)
+                                        </p>
+                                    </div>
+                                </template>
+                            </FileUpload>
+                        </div>
+
+                        <div class="space-y-2">
+                            <p class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-3">Archivos Subidos</p>
+                            <div v-for="(file, index) in uploadedFiles" :key="index" 
+                                class="flex items-center justify-between p-2.5 border border-gray-200 dark:border-gray-800 rounded-lg bg-white dark:bg-gray-900 shadow-sm">
+                                <div class="flex items-center gap-2.5 min-w-0 flex-1">
+                                    <div class="p-1.5 rounded shrink-0" :class="file.type === 'image' ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'bg-red-50 dark:bg-red-900/20 text-red-600'">
+                                        <i :class="file.type === 'image' ? 'pi pi-image' : 'pi pi-file-pdf'" class="text-base"></i>
+                                    </div>
+                                    <div class="min-w-0 flex-1">
+                                        <p class="text-sm font-medium truncate">{{ file.name }}</p>
+                                        <p class="text-[10px] text-gray-400 uppercase font-bold">{{ file.size }}</p>
+                                    </div>
+                                </div>
+                                <Button 
+                                    icon="pi pi-times" 
+                                    text 
+                                    rounded 
+                                    severity="danger" 
+                                    size="small"
+                                    @click="removeFile(index)"
+                                    class="shrink-0"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card> -->
+
+            <!-- Action Buttons -->
+            <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 pt-4 border-t border-gray-200 dark:border-gray-800 pb-8">
+                <Button 
+                    label="Cancelar Registro" 
+                    icon="pi pi-times" 
+                    severity="danger" 
+                    text 
+                    size="small"
+                    @click="handleCancel"
+                    class="w-full sm:w-auto order-3 sm:order-1"
+                />
+                <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2.5 order-1 sm:order-2">
+                    <Button 
+                        label="Guardar como Borrador" 
+                        severity="secondary" 
+                        outlined
+                        size="small"
+                        :loading="isSaving"
+                        :disabled="isSaving"
+                        @click="handleSaveDraft"
+                        class="w-full sm:w-auto"
+                    />
+                    <Button 
+                        label="Enviar a Aprobación" 
+                        icon="pi pi-send" 
+                        size="small"
+                        :loading="isSaving"
+                        :disabled="isSaving"
+                        @click="handleSubmit"
+                        class="w-full sm:w-auto"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- URL Dialog -->
+    <Dialog 
+        v-model:visible="urlDialogVisible" 
+        modal 
+        :header="selectedItemIndex !== null && items[selectedItemIndex]?.url ? 'Editar URL del Producto' : 'Agregar URL del Producto'"
+        :style="{ width: '500px' }"
+        :dismissableMask="true"
+    >
+        <div class="space-y-4 py-4">
+            <div>
+                <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+                    <i class="pi pi-link mr-2 text-primary"></i>
+                    URL del producto
+                </label>
+                <InputText 
+                    v-model="tempUrl" 
+                    placeholder="https://ejemplo.com/producto" 
+                    class="w-full"
+                    autofocus
+                />
+                <small class="text-gray-500 mt-1 block">
+                    Puede ser un enlace de Amazon, MercadoLibre, página del fabricante, etc.
+                </small>
+            </div>
+
+            <div v-if="tempUrl" class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+                <div class="flex items-start gap-2">
+                    <i class="pi pi-info-circle text-blue-600 mt-0.5"></i>
+                    <div class="flex-1 min-w-0">
+                        <p class="text-xs font-semibold text-blue-900 dark:text-blue-100 mb-1">Vista previa:</p>
+                        <p class="text-xs text-blue-700 dark:text-blue-300 break-all">{{ tempUrl }}</p>
+                    </div>
+                    <Button 
+                        icon="pi pi-copy" 
+                        text 
+                        rounded 
+                        size="small"
+                        @click="copyToClipboard(tempUrl)"
+                        v-tooltip.top="'Copiar'"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="flex items-center justify-end gap-2">
+                <Button 
+                    label="Cancelar" 
+                    severity="secondary" 
+                    text
+                    @click="closeUrlDialog"
+                />
+                <Button 
+                    label="Guardar" 
+                    icon="pi pi-check" 
+                    @click="saveUrl"
+                />
+            </div>
+        </template>
+    </Dialog>
+
+    <Toast />
+</template>
+       
\ No newline at end of file
diff --git a/src/modules/requisitions/Requisitions.vue b/src/modules/requisitions/Requisitions.vue
new file mode 100644
index 0000000..d858936
--- /dev/null
+++ b/src/modules/requisitions/Requisitions.vue
@@ -0,0 +1,526 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import InputText from 'primevue/inputtext';
+import Dropdown from 'primevue/dropdown';
+import Tag from 'primevue/tag';
+import Paginator from 'primevue/paginator';
+import Toast from 'primevue/toast';
+import ConfirmDialog from 'primevue/confirmdialog';
+import Dialog from 'primevue/dialog';
+import Textarea from 'primevue/textarea';
+import { useRequisitionStore } from './stores/requisitionStore';
+import type { Requisition } from './types/requisition.interfaces';
+
+const router = useRouter();
+const toast = useToast();
+const requisitionStore = useRequisitionStore();
+
+const searchQuery = ref('');
+const selectedStatus = ref<string | null>(null);
+const selectedPriority = ref<string | null>(null);
+
+const pagination = ref({
+    first: 0,
+    rows: 10
+});
+
+// Cancel dialog
+const showCancelDialog = ref(false);
+const cancelComment = ref('');
+const requisitionToCancel = ref<Requisition | null>(null);
+
+// Computed filtered requisitions
+const filteredRequisitions = computed(() => {
+    let filtered = [...requisitionStore.requisitions];
+
+    if (searchQuery.value) {
+        const query = searchQuery.value.toLowerCase();
+        filtered = filtered.filter(r => 
+            r.folio.toLowerCase().includes(query) ||
+            r.requester.toLowerCase().includes(query)
+        );
+    }
+
+    if (selectedStatus.value) {
+        filtered = filtered.filter(r => r.status === selectedStatus.value);
+    }
+
+    if (selectedPriority.value) {
+        filtered = filtered.filter(r => r.priority === selectedPriority.value);
+    }
+
+    return filtered;
+});
+
+const paginatedRequisitions = computed(() => {
+    const start = pagination.value.first;
+    const end = start + pagination.value.rows;
+    return filteredRequisitions.value.slice(start, end);
+});
+
+const totalRecords = computed(() => filteredRequisitions.value.length);
+
+const statusOptions = [
+    { label: 'Todos', value: null },
+    { label: 'Borrador', value: 'draft' },
+    { label: 'Pendiente', value: 'pending' },
+    { label: 'Aprobado', value: 'approved' },
+    { label: 'Rechazado', value: 'rejected' },
+    { label: 'Cancelado', value: 'cancelled' }
+];
+
+const priorityOptions = [
+    { label: 'Todas', value: null },
+    { label: 'Baja', value: 'low' },
+    { label: 'Normal', value: 'normal' },
+    { label: 'Alta', value: 'high' },
+    { label: 'Urgente', value: 'urgent' }
+];
+
+const getStatusSeverity = (status: string) => {
+    const severityMap: Record<string, string> = {
+        pending: 'warning',
+        approved: 'success',
+        draft: 'secondary',
+        rejected: 'danger',
+        cancelled: 'contrast'
+    };
+    return severityMap[status] || 'info';
+};
+
+const getStatusLabel = (status: string) => {
+    const labelMap: Record<string, string> = {
+        pending: 'Pendiente',
+        approved: 'Aprobado',
+        draft: 'Borrador',
+        rejected: 'Rechazado',
+        cancelled: 'Cancelado'
+    };
+    return labelMap[status] || status;
+};
+
+const getPriorityColor = (priority: string) => {
+    const colorMap: Record<string, string> = {
+        low: 'bg-slate-300 dark:bg-slate-600',
+        normal: 'bg-blue-500',
+        high: 'bg-red-500',
+        urgent: 'bg-red-600'
+    };
+    return colorMap[priority] || 'bg-gray-400';
+};
+
+const getPriorityLabel = (priority: string) => {
+    const labelMap: Record<string, string> = {
+        low: 'Baja',
+        normal: 'Normal',
+        high: 'Alta',
+        urgent: 'Urgente'
+    };
+    return labelMap[priority] || priority;
+};
+
+const onPageChange = (event: any) => {
+    pagination.value.first = event.first;
+    pagination.value.rows = event.rows;
+};
+
+const handleView = (requisition: Requisition) => {
+    router.push(`/requisitions/${requisition.id}`);
+};
+
+const handleEdit = (requisition: Requisition) => {
+    if (requisition.status === 'draft' || requisition.status === 'pending') {
+        router.push(`/requisitions/edit/${requisition.id}`);
+    } else {
+        toast.add({
+            severity: 'warn',
+            summary: 'No permitido',
+            detail: 'Solo se pueden editar requisiciones en borrador o pendientes',
+            life: 3000
+        });
+    }
+};
+
+const handleCancel = (requisition: Requisition) => {
+    requisitionToCancel.value = requisition;
+    cancelComment.value = '';
+    showCancelDialog.value = true;
+};
+
+const confirmCancel = async () => {
+    if (!requisitionToCancel.value) return;
+
+    if (!cancelComment.value.trim() || cancelComment.value.trim().length < 10) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Campo requerido',
+            detail: 'Debe proporcionar un motivo válido (mínimo 10 caracteres)',
+            life: 3000
+        });
+        return;
+    }
+
+    try {
+        // Usar el método cancelRequisition del store en lugar de deleteRequisition
+        await requisitionStore.cancelRequisition(
+            requisitionToCancel.value.id,
+            cancelComment.value.trim(),
+            requisitionToCancel.value.requester // O el usuario actual del sistema
+        );
+
+        toast.add({
+            severity: 'success',
+            summary: 'Cancelado',
+            detail: 'Requisición cancelada correctamente',
+            life: 3000
+        });
+
+        showCancelDialog.value = false;
+        requisitionToCancel.value = null;
+        cancelComment.value = '';
+    } catch (error: any) {
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: error.message || 'Error al cancelar la requisición',
+            life: 3000
+        });
+    }
+};
+
+const closeCancelDialog = () => {
+    showCancelDialog.value = false;
+    requisitionToCancel.value = null;
+    cancelComment.value = '';
+};
+
+const handleNewRequisition = () => {
+    router.push('/requisitions/create');
+};
+
+onMounted(async () => {
+    await requisitionStore.fetchRequisitions();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Header -->
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+            <div>
+                <h2 class="text-3xl font-black text-surface-900 dark:text-white tracking-tight">
+                    Gestión de Requisiciones
+                </h2>
+                <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">
+                    Revisa y administra las requisiciones de almacén y producción.
+                </p>
+            </div>
+            <Button label="Nueva Requisición" icon="pi pi-plus" @click="handleNewRequisition" />
+        </div>
+
+        <!-- KPI Cards -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            <Card>
+                <template #content>
+                    <div class="space-y-2">
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Total Pendientes</p>
+                        <div class="flex items-end justify-between">
+                            <h3 class="text-2xl font-bold">{{ requisitionStore.pendingCount }}</h3>
+                            <Tag value="Acción requerida" severity="warning" class="text-xs" />
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <Card>
+                <template #content>
+                    <div class="space-y-2">
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Aprobados Hoy</p>
+                        <div class="flex items-end justify-between">
+                            <h3 class="text-2xl font-bold">{{ requisitionStore.approvedTodayCount }}</h3>
+                            <Tag value="Actualizado" severity="success" class="text-xs" />
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <Card>
+                <template #content>
+                    <div class="space-y-2">
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Total Requisiciones</p>
+                        <div class="flex items-end justify-between">
+                            <h3 class="text-2xl font-bold">{{ requisitionStore.requisitions.length }}</h3>
+                            <Tag value="Sistema" severity="info" class="text-xs" />
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <Card>
+                <template #content>
+                    <div class="space-y-2">
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Presupuesto Mensual</p>
+                        <div class="flex items-end justify-between">
+                            <h3 class="text-2xl font-bold">${{ (requisitionStore.totalBudgetThisMonth / 1000).toFixed(1) }}k</h3>
+                            <Tag value="Este mes" severity="secondary" class="text-xs" />
+                        </div>
+                    </div>
+                </template>
+            </Card>
+        </div>
+
+        <!-- Filters and Table -->
+        <Card>
+            <template #content>
+                <!-- Filters Toolbar -->
+                <div class="flex flex-wrap gap-4 items-end mb-6">
+                    <div class="flex-1 min-w-[300px]">
+                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">
+                            Buscar
+                        </label>
+                        <span class="p-input-icon-left w-full">
+                            <i class="pi pi-search" />
+                            <InputText 
+                                v-model="searchQuery" 
+                                placeholder="Buscar por número de folio (ej. REQ-2023...)" 
+                                class="w-full"
+                            />
+                        </span>
+                    </div>
+
+                    <div class="w-48">
+                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">
+                            Estado
+                        </label>
+                        <Dropdown 
+                            v-model="selectedStatus" 
+                            :options="statusOptions" 
+                            optionLabel="label" 
+                            optionValue="value"
+                            placeholder="Todos" 
+                            class="w-full"
+                        />
+                    </div>
+
+                    <div class="w-48">
+                        <label class="block text-xs font-bold text-gray-500 dark:text-gray-400 uppercase mb-2">
+                            Prioridad
+                        </label>
+                        <Dropdown 
+                            v-model="selectedPriority" 
+                            :options="priorityOptions" 
+                            optionLabel="label" 
+                            optionValue="value"
+                            placeholder="Todas" 
+                            class="w-full"
+                        />
+                    </div>
+
+                    <Button icon="pi pi-filter" label="Más Filtros" text />
+                </div>
+
+                <!-- DataTable -->
+                <DataTable 
+                    :value="paginatedRequisitions" 
+                    :loading="requisitionStore.loading" 
+                    stripedRows 
+                    responsiveLayout="scroll"
+                    class="p-datatable-sm"
+                >
+                    <Column field="id" header="ID" style="min-width: 80px">
+                        <template #body="{ data }">
+                            <span class="font-mono text-gray-500">{{ data.id }}</span>
+                        </template>
+                    </Column>
+
+                    <Column field="folio" header="Folio" style="min-width: 150px">
+                        <template #body="{ data }">
+                            <span class="font-bold">{{ data.folio }}</span>
+                        </template>
+                    </Column>
+
+                    <Column field="requester" header="Solicitante" style="min-width: 150px" />
+
+                    <Column field="status" header="Estado" style="min-width: 120px">
+                        <template #body="{ data }">
+                            <Tag :value="getStatusLabel(data.status)" :severity="getStatusSeverity(data.status)" />
+                        </template>
+                    </Column>
+
+                    <Column field="priority" header="Prioridad" style="min-width: 120px">
+                        <template #body="{ data }">
+                            <span class="flex items-center gap-2">
+                                <span :class="['w-2 h-2 rounded-full', getPriorityColor(data.priority)]"></span>
+                                {{ getPriorityLabel(data.priority) }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <Column field="totalAmount" header="Monto Total" style="min-width: 140px">
+                        <template #body="{ data }">
+                            <span class="font-semibold">${{ data.totalAmount.toLocaleString('es-MX', { minimumFractionDigits: 2 }) }}</span>
+                        </template>
+                    </Column>
+
+                    <Column field="createdAt" header="Fecha de Creación" style="min-width: 140px">
+                        <template #body="{ data }">
+                            <span class="text-sm">{{ new Date(data.createdAt).toLocaleDateString('es-MX') }}</span>
+                        </template>
+                    </Column>
+
+                    <Column header="Acciones" headerStyle="text-align: center" bodyStyle="text-align: center" style="min-width: 150px">
+                        <template #body="{ data }">
+                            <div class="flex items-center justify-center gap-2">
+                                <Button 
+                                    icon="pi pi-eye" 
+                                    text 
+                                    rounded 
+                                    size="small" 
+                                    @click="handleView(data)"
+                                    v-tooltip.top="'Ver Detalles'"
+                                />
+                                <Button 
+                                    icon="pi pi-pencil" 
+                                    text 
+                                    rounded 
+                                    size="small" 
+                                    @click="handleEdit(data)"
+                                    v-tooltip.top="'Editar'"
+                                />
+                                <Button 
+                                    icon="pi pi-times" 
+                                    text 
+                                    rounded 
+                                    size="small" 
+                                    severity="danger"
+                                    @click="handleCancel(data)"
+                                    v-tooltip.top="'Cancelar'"
+                                />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+
+                <!-- Pagination -->
+                <div class="mt-4">
+                    <Paginator 
+                        :first="pagination.first" 
+                        :rows="pagination.rows" 
+                        :totalRecords="totalRecords"
+                        :rowsPerPageOptions="[10, 20, 50]" 
+                        @page="onPageChange"
+                    />
+                </div>
+            </template>
+        </Card>
+
+        <!-- Help Section -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card class="bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/30">
+                <template #content>
+                    <div class="flex gap-4">
+                        <i class="pi pi-info-circle text-blue-500 text-xl"></i>
+                        <div>
+                            <h4 class="font-semibold text-blue-900 dark:text-blue-300 text-sm mb-1">
+                                ¿Necesitas Ayuda?
+                            </h4>
+                            <p class="text-blue-700 dark:text-blue-400 text-xs leading-relaxed">
+                                Los flujos de aprobación requieren al menos una firma de supervisor para requisiciones que excedan $500. 
+                                Consulta la sección "Ver Detalles" para la jerarquía de aprobación.
+                            </p>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <Card class="bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-800">
+                <template #content>
+                    <div class="flex gap-4">
+                        <i class="pi pi-link text-slate-500 text-xl"></i>
+                        <div>
+                            <h4 class="font-semibold text-slate-900 dark:text-slate-200 text-sm mb-2">
+                                Enlaces Rápidos
+                            </h4>
+                            <div class="flex gap-3 text-xs">
+                                <a href="#" class="text-primary hover:underline">Descargar Reporte</a>
+                                <span class="text-slate-300 dark:text-slate-700">|</span>
+                                <a href="#" class="text-primary hover:underline">Política de Aprobación</a>
+                                <span class="text-slate-300 dark:text-slate-700">|</span>
+                                <a href="#" class="text-primary hover:underline">Estado del Sistema</a>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+        </div>
+    </div>
+
+    <!-- Cancel Dialog -->
+    <Dialog 
+        v-model:visible="showCancelDialog" 
+        modal 
+        header="Cancelar Requisición" 
+        :style="{ width: '500px' }"
+        :closable="true"
+        @hide="closeCancelDialog"
+    >
+        <div class="space-y-4">
+            <div v-if="requisitionToCancel" class="bg-orange-50 dark:bg-orange-900/10 border border-orange-200 dark:border-orange-900/30 rounded-lg p-4">
+                <div class="flex items-start gap-3">
+                    <i class="pi pi-exclamation-triangle text-orange-500 text-xl mt-0.5"></i>
+                    <div class="flex-1">
+                        <h4 class="font-semibold text-orange-900 dark:text-orange-300 text-sm mb-1">
+                            ¿Está seguro de cancelar esta requisición?
+                        </h4>
+                        <p class="text-orange-700 dark:text-orange-400 text-xs">
+                            Folio: <span class="font-bold">{{ requisitionToCancel.folio }}</span>
+                        </p>
+                        <p class="text-orange-700 dark:text-orange-400 text-xs">
+                            Solicitante: {{ requisitionToCancel.requester }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div>
+                <label for="cancelReason" class="block text-sm font-semibold text-surface-900 dark:text-white mb-2">
+                    Motivo de cancelación <span class="text-red-500">*</span>
+                </label>
+                <Textarea 
+                    id="cancelReason"
+                    v-model="cancelComment" 
+                    rows="4" 
+                    class="w-full"
+                    placeholder="Describa el motivo por el cual se cancela esta requisición..."
+                    :class="{ 'p-invalid': !cancelComment.trim() }"
+                />
+                <small class="text-gray-500 dark:text-gray-400">Mínimo 10 caracteres requeridos</small>
+            </div>
+        </div>
+
+        <template #footer>
+            <Button 
+                label="Cancelar" 
+                icon="pi pi-times" 
+                text 
+                @click="closeCancelDialog" 
+            />
+            <Button 
+                label="Confirmar Cancelación" 
+                icon="pi pi-check" 
+                severity="danger"
+                @click="confirmCancel"
+                :disabled="!cancelComment.trim() || cancelComment.trim().length < 10"
+            />
+        </template>
+    </Dialog>
+
+    <Toast />
+    <ConfirmDialog />
+</template>
\ No newline at end of file
diff --git a/src/modules/requisitions/stores/requisitionStore.ts b/src/modules/requisitions/stores/requisitionStore.ts
new file mode 100644
index 0000000..5424183
--- /dev/null
+++ b/src/modules/requisitions/stores/requisitionStore.ts
@@ -0,0 +1,361 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import type { Requisition, RequisitionForm, RequisitionItem } from '../types/requisition.interfaces';
+
+export const useRequisitionStore = defineStore('requisition', () => {
+	const requisitions = ref<Requisition[]>([
+		
+	]);
+
+   /*  {
+			id: 1,
+			folio: 'REQ-2024-001',
+			requester: 'Edgar Mendoza',
+			department: 'prod_a',
+			status: 'draft',
+			priority: 'medium',
+			justification: 'Necesitamos equipos para la línea de producción A',
+			items: [
+				{
+					id: 1,
+					product: 'Motor eléctrico 3HP',
+					quantity: 2,
+					unit: 'Pz',
+					unitPrice: 1250.00,
+					url: 'https://amazon.com/product/123'
+				},
+				{
+					id: 2,
+					product: 'Cable calibre 12',
+					quantity: 50,
+					unit: 'M',
+					unitPrice: 15.50,
+					url: ''
+				}
+			],
+			totalAmount: 3275.00,
+			createdAt: '2024-02-20',
+			updatedAt: '2024-02-20'
+		},
+		{
+			id: 2,
+			folio: 'REQ-2024-002',
+			requester: 'María González',
+			department: 'maintenance',
+			status: 'pending',
+			priority: 'high',
+			justification: 'Mantenimiento preventivo de equipos críticos',
+			items: [
+				{
+					id: 1,
+					product: 'Aceite hidráulico SAE 68',
+					quantity: 20,
+					unit: 'Lt',
+					unitPrice: 85.00,
+					url: 'https://mercadolibre.com/product/456'
+				}
+			],
+			totalAmount: 1700.00,
+			createdAt: '2024-02-22',
+			updatedAt: '2024-02-22'
+		},
+		{
+			id: 3,
+			folio: 'REQ-2024-003',
+			requester: 'Carlos Ruiz',
+			department: 'logistics',
+			status: 'approved',
+			priority: 'normal',
+			justification: 'Material de empaque para envíos',
+			items: [
+				{
+					id: 1,
+					product: 'Caja de cartón corrugado 40x30x20',
+					quantity: 100,
+					unit: 'Pz',
+					unitPrice: 12.50,
+					url: ''
+				},
+				{
+					id: 2,
+					product: 'Cinta adhesiva transparente',
+					quantity: 50,
+					unit: 'Pz',
+					unitPrice: 8.00,
+					url: ''
+				}
+			],
+			totalAmount: 1650.00,
+			createdAt: '2024-02-18',
+			updatedAt: '2024-02-23'
+		},
+		{
+			id: 4,
+			folio: 'REQ-2024-004',
+			requester: 'Ana Martínez',
+			department: 'admin',
+			status: 'rejected',
+			priority: 'low',
+			justification: 'Suministros de oficina',
+			items: [
+				{
+					id: 1,
+					product: 'Papel bond tamaño carta',
+					quantity: 10,
+					unit: 'Pq',
+					unitPrice: 120.00,
+					url: ''
+				}
+			],
+			totalAmount: 1200.00,
+			createdAt: '2024-02-15',
+			updatedAt: '2024-02-21'
+		} */
+
+	const loading = ref(false);
+	const error = ref<string | null>(null);
+	let nextId = ref(5);
+	let nextFolio = ref(5);
+
+	// Computed properties for statistics
+	const pendingCount = computed(() => 
+		requisitions.value.filter(r => r.status === 'pending').length
+	);
+
+	const approvedTodayCount = computed(() => {
+		const today = new Date().toISOString().split('T')[0];
+		return requisitions.value.filter(
+			r => r.status === 'approved' && r.updatedAt === today
+		).length;
+	});
+
+	const totalBudgetThisMonth = computed(() => {
+		const now = new Date();
+		const currentMonth = now.getMonth();
+		const currentYear = now.getFullYear();
+		
+		return requisitions.value
+			.filter(r => {
+				const reqDate = new Date(r.createdAt);
+				return reqDate.getMonth() === currentMonth && 
+				       reqDate.getFullYear() === currentYear;
+			})
+			.reduce((sum, r) => sum + r.totalAmount, 0);
+	});
+
+	// Actions
+	async function fetchRequisitions() {
+		loading.value = true;
+		error.value = null;
+		try {
+			// Simular delay de API
+			await new Promise(resolve => setTimeout(resolve, 500));
+			// Los datos ya están cargados en el estado inicial
+		} catch (e: any) {
+			error.value = e?.message || 'Error al cargar requisiciones';
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	function getRequisitionById(id: number): Requisition | undefined {
+		return requisitions.value.find(r => r.id === id);
+	}
+
+	function getRequisitionByFolio(folio: string): Requisition | undefined {
+		return requisitions.value.find(r => r.folio === folio);
+	}
+
+	async function createRequisition(form: RequisitionForm, items: RequisitionItem[]): Promise<Requisition> {
+		loading.value = true;
+		error.value = null;
+		
+		try {
+			// Simular delay de API
+			await new Promise(resolve => setTimeout(resolve, 800));
+
+			const totalAmount = items.reduce((sum, item) => sum + (item.quantity * item.unitPrice), 0);
+			const now = new Date().toISOString().split('T')[0] as string;
+
+			const newRequisition: Requisition = {
+				id: nextId.value++,
+				folio: `REQ-2024-${String(nextFolio.value++).padStart(3, '0')}`,
+				requester: form.requester,
+				department: form.department,
+				status: 'draft',
+				priority: form.priority,
+				justification: form.justification,
+				items: items.map((item, index) => ({ ...item, id: index + 1 })),
+				totalAmount,
+				createdAt: now,
+				updatedAt: now
+			};
+
+			requisitions.value.unshift(newRequisition);
+			return newRequisition;
+		} catch (e: any) {
+			error.value = e?.message || 'Error al crear requisición';
+			throw e;
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	async function updateRequisition(id: number, form: RequisitionForm, items: RequisitionItem[]): Promise<Requisition | null> {
+		loading.value = true;
+		error.value = null;
+		
+		try {
+			// Simular delay de API
+			await new Promise(resolve => setTimeout(resolve, 800));
+
+			const index = requisitions.value.findIndex(r => r.id === id);
+			if (index === -1) {
+				throw new Error('Requisición no encontrada');
+			}
+
+			const existingReq = requisitions.value[index];
+			if (!existingReq) {
+				throw new Error('Requisición no encontrada');
+			}
+
+			const totalAmount = items.reduce((sum, item) => sum + (item.quantity * item.unitPrice), 0);
+			const now = new Date().toISOString().split('T')[0] as string;
+
+			const updatedRequisition: Requisition = {
+				...existingReq,
+				department: form.department,
+				priority: form.priority,
+				justification: form.justification,
+				items: items.map((item, idx) => ({ ...item, id: idx + 1 })),
+				totalAmount,
+				updatedAt: now
+			};
+
+			requisitions.value[index] = updatedRequisition;
+			return updatedRequisition;
+		} catch (e: any) {
+			error.value = e?.message || 'Error al actualizar requisición';
+			throw e;
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	async function submitForApproval(id: number): Promise<void> {
+		loading.value = true;
+		error.value = null;
+		
+		try {
+			await new Promise(resolve => setTimeout(resolve, 500));
+
+			const index = requisitions.value.findIndex(r => r.id === id);
+			if (index === -1) {
+				throw new Error('Requisición no encontrada');
+			}
+
+			const requisition = requisitions.value[index];
+			if (requisition) {
+				requisition.status = 'pending';
+				requisition.updatedAt = new Date().toISOString().split('T')[0] as string;
+			}
+		} catch (e: any) {
+			error.value = e?.message || 'Error al enviar requisición';
+			throw e;
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	async function deleteRequisition(id: number): Promise<void> {
+		loading.value = true;
+		error.value = null;
+		
+		try {
+			await new Promise(resolve => setTimeout(resolve, 500));
+
+			const index = requisitions.value.findIndex(r => r.id === id);
+			if (index === -1) {
+				throw new Error('Requisición no encontrada');
+			}
+
+			requisitions.value.splice(index, 1);
+		} catch (e: any) {
+			error.value = e?.message || 'Error al eliminar requisición';
+			throw e;
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	async function changeStatus(id: number, status: string): Promise<void> {
+		loading.value = true;
+		error.value = null;
+		
+		try {
+			await new Promise(resolve => setTimeout(resolve, 500));
+
+			const index = requisitions.value.findIndex(r => r.id === id);
+			if (index === -1) {
+				throw new Error('Requisición no encontrada');
+			}
+
+			const requisition = requisitions.value[index];
+			if (requisition) {
+				requisition.status = status;
+				requisition.updatedAt = new Date().toISOString().split('T')[0] as string;
+			}
+		} catch (e: any) {
+			error.value = e?.message || 'Error al cambiar estado';
+			throw e;
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	async function cancelRequisition(id: number, reason: string, cancelledBy: string): Promise<void> {
+		loading.value = true;
+		error.value = null;
+		
+		try {
+			await new Promise(resolve => setTimeout(resolve, 500));
+
+			const index = requisitions.value.findIndex(r => r.id === id);
+			if (index === -1) {
+				throw new Error('Requisición no encontrada');
+			}
+
+			const requisition = requisitions.value[index];
+			if (requisition) {
+				requisition.status = 'cancelled';
+				requisition.cancellationReason = reason;
+				requisition.cancelledAt = new Date().toISOString();
+				requisition.cancelledBy = cancelledBy;
+				requisition.updatedAt = new Date().toISOString().split('T')[0] as string;
+			}
+		} catch (e: any) {
+			error.value = e?.message || 'Error al cancelar requisición';
+			throw e;
+		} finally {
+			loading.value = false;
+		}
+	}
+
+	return {
+		requisitions,
+		loading,
+		error,
+		pendingCount,
+		approvedTodayCount,
+		totalBudgetThisMonth,
+		fetchRequisitions,
+		getRequisitionById,
+		getRequisitionByFolio,
+		createRequisition,
+		updateRequisition,
+		submitForApproval,
+		deleteRequisition,
+		changeStatus,
+		cancelRequisition
+	};
+});
diff --git a/src/modules/requisitions/types/requisition.interfaces.ts b/src/modules/requisitions/types/requisition.interfaces.ts
new file mode 100644
index 0000000..939f062
--- /dev/null
+++ b/src/modules/requisitions/types/requisition.interfaces.ts
@@ -0,0 +1,34 @@
+export interface RequisitionItem {
+    id: number;
+    product: string;
+    quantity: number;
+    unit: string;
+    unitPrice: number;
+    url: string;
+}
+
+export interface RequisitionForm {
+    folio: string;
+    requester: string;
+    status: string;
+    priority: string;
+    department: string;
+    justification: string;
+}
+
+export interface Requisition extends RequisitionForm {
+    id: number;
+    items: RequisitionItem[];
+    totalAmount: number;
+    createdAt: string;
+    updatedAt: string;
+    cancellationReason?: string;
+    cancelledAt?: string;
+    cancelledBy?: string;
+}
+
+export interface UploadedFile {
+    name: string;
+    size: string;
+    type: string;
+}
diff --git a/src/modules/rh/components/departments/DepartmentForm.vue b/src/modules/rh/components/departments/DepartmentForm.vue
new file mode 100644
index 0000000..067fd5c
--- /dev/null
+++ b/src/modules/rh/components/departments/DepartmentForm.vue
@@ -0,0 +1,113 @@
+<template>
+    <Dialog
+        :visible="visible"
+        @update:visible="$emit('update:visible', $event)"
+        :modal="true"
+        :style="{ width: '800px' }"
+        :closable="true"
+        class="p-0"
+    >
+        <template #header>
+            <div class="flex flex-col gap-1 w-full">
+                <h2 class="text-gray-900 dark:text-white text-2xl font-bold tracking-tight">
+                    {{ mode === 'create' ? 'Crear Nuevo Departamento' : 'Editar Departamento' }}
+                </h2>
+                <p class="text-gray-500 dark:text-gray-400 text-base font-normal leading-normal">
+                    Configure los detalles básicos para habilitar el nuevo departamento en la estructura organizacional.
+                </p>
+            </div>
+        </template>
+
+        <div class="p-6 pt-0 space-y-6">
+            <!-- Department Name Field -->
+            <div class="flex flex-col gap-2">
+                <label class="text-gray-900 dark:text-gray-200 text-base font-semibold leading-normal">
+                    Nombre del Departamento
+                </label>
+                <InputText 
+                    v-model="localFormData.name" 
+                    placeholder="Ej. Logística, Producción o Calidad"
+                    class="w-full h-14"
+                />
+                <p class="text-gray-500 dark:text-gray-400 text-xs font-normal">
+                    Este nombre será visible en todos los reportes de RH.
+                </p>
+            </div>
+
+            <!-- Department Description Field -->
+            <div class="flex flex-col gap-2">
+                <label class="text-gray-900 dark:text-gray-200 text-base font-semibold leading-normal">
+                    Descripción del Departamento
+                </label>
+                <Textarea 
+                    v-model="localFormData.description" 
+                    rows="5"
+                    placeholder="Describa las funciones, responsabilidades y objetivos principales de este departamento..."
+                    class="w-full"
+                />
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-200 dark:border-gray-800">
+                <Button 
+                    label="Cancelar" 
+                    severity="secondary"
+                    text
+                    @click="handleCancel"
+                    class="px-6"
+                />
+                <Button 
+                    :label="mode === 'create' ? 'Guardar Departamento' : 'Actualizar Departamento'" 
+                    icon="pi pi-save" 
+                    @click="handleSave"
+                    class="px-8"
+                />
+            </div>
+        </template>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import type { Department } from '../../types/departments.interface';
+
+interface Props {
+    visible: boolean;
+    mode: 'create' | 'edit';
+    formData: Partial<Department>;
+}
+
+interface Emits {
+    (e: 'update:visible', value: boolean): void;
+    (e: 'save', data: Partial<Department>): void;
+    (e: 'cancel'): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const localFormData = ref<Partial<Department>>({ ...props.formData });
+
+// Watch for external formData changes
+watch(() => props.formData, (newData) => {
+    localFormData.value = { ...newData };
+}, { deep: true });
+
+const handleSave = () => {
+    emit('save', localFormData.value);
+};
+
+const handleCancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
+</script>
+
+<style scoped>
+/* Estilos adicionales si son necesarios */
+</style>
\ No newline at end of file
diff --git a/src/modules/rh/components/departments/Departments.vue b/src/modules/rh/components/departments/Departments.vue
new file mode 100644
index 0000000..afc1ab2
--- /dev/null
+++ b/src/modules/rh/components/departments/Departments.vue
@@ -0,0 +1,355 @@
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Breadcrumb -->
+        <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
+
+        <!-- Page Header -->
+        <div class="flex flex-wrap items-baseline justify-between gap-4">
+            <div class="flex flex-col gap-2">
+                <h1 class="text-gray-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    Gestión de Departamentos
+                </h1>
+                <p class="text-gray-500 dark:text-gray-400 text-sm">
+                    Total: {{ departments.length }} unidades operativas
+                </p>
+            </div>
+            <Button 
+                label="Nuevo Departamento" 
+                icon="pi pi-plus" 
+                @click="openCreateDialog"
+            />
+        </div>
+
+        <!-- Departments Table -->
+        <Card class="shadow-sm">
+            <template #content>
+                <DataTable 
+                    :value="departments" 
+                    :paginator="true" 
+                    :rows="10"
+                    :rowsPerPageOptions="[10, 25, 50]"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                    currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} departamentos"
+                    :loading="loading"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    class="text-sm"
+                >
+                    <Column field="name" header="Nombre del Departamento" sortable>
+                        <template #body="slotProps">
+                            <div class="flex items-center gap-3">
+                                <div 
+                                    class="size-10 rounded-full flex items-center justify-center text-white font-bold"
+                                    :style="{ backgroundColor: slotProps.data.color }"
+                                >
+                                    <i :class="slotProps.data.icon"></i>
+                                </div>
+                                <span class="font-semibold text-gray-900 dark:text-white">
+                                    {{ slotProps.data.name }}
+                                </span>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <Column field="description" header="Descripción" sortable>
+                        <template #body="slotProps">
+                            <span class="text-sm text-gray-500 dark:text-gray-400">
+                                {{ slotProps.data.description }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <Column header="Acciones" :exportable="false">
+                        <template #body="slotProps">
+                            <div class="flex gap-2">
+                                <Button 
+                                    icon="pi pi-eye" 
+                                    outlined 
+                                    rounded 
+                                    size="small" 
+                                    severity="secondary" 
+                                    @click="viewDepartment(slotProps.data)" 
+                                />
+                                <Button 
+                                    icon="pi pi-pencil" 
+                                    outlined 
+                                    rounded 
+                                    size="small" 
+                                    @click="editDepartment(slotProps.data)" 
+                                />
+                                <Button 
+                                    icon="pi pi-trash" 
+                                    outlined 
+                                    rounded 
+                                    size="small" 
+                                    severity="danger" 
+                                    @click="confirmDelete(slotProps.data)" 
+                                />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+
+        <!-- Create/Edit Dialog -->
+        <DepartmentForm
+            v-model:visible="showDialog"
+            :mode="dialogMode"
+            :formData="formData"
+            @save="saveDepartment"
+            @cancel="showDialog = false"
+        />
+
+        <!-- Delete Confirmation Dialog -->
+        <Dialog
+            v-model:visible="showDeleteDialog"
+            header="Confirmar Eliminación"
+            :modal="true"
+            :style="{ width: '450px' }"
+        >
+            <div class="flex items-start gap-4">
+                <i class="pi pi-exclamation-triangle text-3xl text-red-500"></i>
+                <div>
+                    <p class="text-gray-900 dark:text-white mb-2">
+                        ¿Estás seguro de que deseas eliminar el departamento <strong>{{ departmentToDelete?.name }}</strong>?
+                    </p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">
+                        Esta acción no se puede deshacer.
+                    </p>
+                </div>
+            </div>
+
+            <template #footer>
+                <Button 
+                    label="Cancelar" 
+                    severity="secondary" 
+                    @click="showDeleteDialog = false" 
+                />
+                <Button 
+                    label="Eliminar" 
+                    severity="danger" 
+                    icon="pi pi-trash" 
+                    @click="deleteDepartment" 
+                />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { DepartmentsService } from '../../services/departments.services';
+
+// PrimeVue Components
+import Toast from 'primevue/toast';
+import Breadcrumb from 'primevue/breadcrumb';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Dialog from 'primevue/dialog';
+
+import type { Department, CreateDepartmentDTO, UpdateDepartmentDTO } from '../../types/departments.interface';
+import DepartmentForm from './DepartmentForm.vue';
+
+const toast = useToast();
+const departmentsService = new DepartmentsService();
+
+// State
+const loading = ref(false);
+const showDialog = ref(false);
+const showDeleteDialog = ref(false);
+const dialogMode = ref<'create' | 'edit'>('create');
+const departmentToDelete = ref<Department | null>(null);
+
+// Breadcrumb
+const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' });
+const breadcrumbItems = ref([
+    { label: 'RH', to: '/rh' },
+    { label: 'Departamentos' }
+]);
+
+// Form Data
+const formData = ref<Partial<Department>>({
+    name: '',
+    description: '',
+    employeeCount: 0,
+    color: '#3b82f6',
+    icon: 'pi pi-building'
+});
+
+// Departments Data
+const departments = ref<Department[]>([]);
+
+// Fetch Departments from API
+const fetchDepartments = async (showToast = true) => {
+    loading.value = true;
+    try {
+        const response = await departmentsService.getDepartments();
+        departments.value = response.data;
+        
+        if (showToast) {
+            toast.add({
+                severity: 'success',
+                summary: 'Departamentos Cargados',
+                detail: `Se cargaron ${response.data.length} departamentos`,
+                life: 3000
+            });
+        }
+    } catch (error) {
+        console.error('Error al cargar departamentos:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar los departamentos',
+            life: 3000
+        });
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Lifecycle
+onMounted(() => {
+    fetchDepartments();
+});
+
+// Methods
+const openCreateDialog = () => {
+    dialogMode.value = 'create';
+    formData.value = {
+        name: '',
+        description: '',
+        employeeCount: 0,
+        color: '#3b82f6',
+        icon: 'pi pi-building'
+    };
+    showDialog.value = true;
+};
+
+const viewDepartment = (department: Department) => {
+    toast.add({
+        severity: 'info',
+        summary: 'Ver Departamento',
+        detail: `Visualizando: ${department.name}`,
+        life: 3000
+    });
+};
+
+const editDepartment = (department: Department) => {
+    dialogMode.value = 'edit';
+    formData.value = { ...department };
+    showDialog.value = true;
+};
+
+const confirmDelete = (department: any) => {
+    departmentToDelete.value = department;
+    showDeleteDialog.value = true;
+};
+
+const deleteDepartment = async () => {
+    if (!departmentToDelete.value) return;
+    
+    try {
+        await departmentsService.deleteDepartment(departmentToDelete.value.id);
+        
+        // Recargar la lista de departamentos
+        await fetchDepartments(false);
+        
+        toast.add({
+            severity: 'success',
+            summary: 'Departamento Eliminado',
+            detail: `${departmentToDelete.value.name} ha sido eliminado exitosamente`,
+            life: 3000
+        });
+    } catch (error) {
+        console.error('Error al eliminar departamento:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo eliminar el departamento',
+            life: 3000
+        });
+    } finally {
+        showDeleteDialog.value = false;
+        departmentToDelete.value = null;
+    }
+};
+
+const saveDepartment = async (data: Partial<Department>) => {
+    if (!data.name) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'El nombre del departamento es requerido',
+            life: 3000
+        });
+        return;
+    }
+
+    try {
+        if (dialogMode.value === 'create') {
+            // Create new department
+            const createData: CreateDepartmentDTO = {
+                name: data.name,
+                description: data.description || ''
+            };
+
+            await departmentsService.createDepartment(createData);
+
+            toast.add({
+                severity: 'success',
+                summary: 'Departamento Creado',
+                detail: `${data.name} ha sido creado exitosamente`,
+                life: 3000
+            });
+        } else {
+            // Update existing department
+            if (!data.id) {
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'ID del departamento no encontrado',
+                    life: 3000
+                });
+                return;
+            }
+
+            const updateData: UpdateDepartmentDTO = {
+                name: data.name,
+                description: data.description
+            };
+
+            await departmentsService.updateDepartment(data.id, updateData);
+
+            toast.add({
+                severity: 'success',
+                summary: 'Departamento Actualizado',
+                detail: `${data.name} ha sido actualizado exitosamente`,
+                life: 3000
+            });
+        }
+
+        // Recargar la lista de departamentos
+        await fetchDepartments(false);
+        showDialog.value = false;
+    } catch (error) {
+        console.error('Error al guardar departamento:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: `No se pudo ${dialogMode.value === 'create' ? 'crear' : 'actualizar'} el departamento`,
+            life: 3000
+        });
+    }
+};
+</script>
+
+<style scoped>
+/* Estilos adicionales si son necesarios */
+</style>
diff --git a/src/modules/rh/components/positions/Positions.vue b/src/modules/rh/components/positions/Positions.vue
new file mode 100644
index 0000000..b05f43e
--- /dev/null
+++ b/src/modules/rh/components/positions/Positions.vue
@@ -0,0 +1,319 @@
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Breadcrumb -->
+        <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
+
+        <!-- Page Heading -->
+        <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
+            <div class="space-y-1">
+                <h1 class="text-3xl font-black text-gray-900 dark:text-white tracking-tight">
+                    Puestos de Trabajo
+                </h1>
+                <p class="text-gray-500 dark:text-gray-400 text-sm">
+                    Administre y organice los roles operativos y administrativos de la planta.
+                </p>
+            </div>
+            <Button label="Nuevo Puesto" icon="pi pi-plus-circle" @click="openCreateDialog" class="shadow-lg" />
+        </div>
+
+        <!-- Data Table Card -->
+        <Card class="shadow-sm">
+            <template #content>
+                <DataTable :value="filteredPositions" :paginator="true" :rows="10" :rowsPerPageOptions="[10, 25, 50]"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                    currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} puestos" :loading="loading"
+                    stripedRows responsiveLayout="scroll" class="text-sm">
+
+                    <Column field="code" header="Código" sortable>
+                        <template #body="slotProps">
+                            <span class="px-2.5 py-1 rounded-full text-[11px] font-bold"
+                                :class="'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'">
+                                {{ slotProps.data.code.toUpperCase() }}
+                            </span>
+                        </template>
+                    </Column>
+                    <Column field="name" header="Nombre del Puesto" sortable>
+                        <template #body="slotProps">
+                            <div class="flex items-center gap-3">
+                                <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                                    {{ slotProps.data.name }}
+                                </span>
+                            </div>
+                        </template>
+                    </Column>
+                    <Column field="description" header="Descripción / Actividades" sortable>
+                        <template #body="slotProps">
+                            <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-1">
+                                {{ slotProps.data.description }}
+                            </p>
+                        </template>
+                    </Column>
+
+                    <Column header="Acciones" :exportable="false">
+                        <template #body="slotProps">
+                            <div class="flex items-center justify-end gap-1">
+                                <Button icon="pi pi-eye" text rounded severity="secondary"
+                                    @click="viewPosition(slotProps.data)" />
+                                <Button icon="pi pi-pencil" text rounded @click="editPosition(slotProps.data)" />
+                                <Button icon="pi pi-trash" text rounded severity="danger"
+                                    @click="confirmDelete(slotProps.data)" />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+
+        <!-- Create/Edit Dialog -->
+        <PositionsForm v-model:visible="showDialog" :mode="dialogMode" :formData="formData" @save="savePosition"
+            @cancel="showDialog = false" />
+
+        <!-- Delete Confirmation Dialog -->
+        <Dialog v-model:visible="showDeleteDialog" header="Confirmar Eliminación" :modal="true"
+            :style="{ width: '450px' }">
+            <div class="flex items-start gap-4">
+                <i class="pi pi-exclamation-triangle text-3xl text-red-500"></i>
+                <div>
+                    <p class="text-gray-900 dark:text-white mb-2">
+                        ¿Estás seguro de que deseas eliminar el puesto <strong>{{ positionToDelete?.name }}</strong>?
+                    </p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">
+                        Esta acción no se puede deshacer.
+                    </p>
+                </div>
+            </div>
+
+            <template #footer>
+                <Button label="Cancelar" severity="secondary" @click="showDeleteDialog = false" />
+                <Button label="Eliminar" severity="danger" icon="pi pi-trash" @click="deletePosition" />
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { PositionsService } from '../../services/positions.services';
+import type { Position, CreatePositionDTO, UpdatePositionDTO } from '../../types/positions.interface';
+
+// PrimeVue Components
+import Toast from 'primevue/toast';
+import Breadcrumb from 'primevue/breadcrumb';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Dialog from 'primevue/dialog';
+import PositionsForm from './PositionsForm.vue';
+
+const toast = useToast();
+const positionsService = new PositionsService();
+
+// State
+const loading = ref(false);
+const showDialog = ref(false);
+const showDeleteDialog = ref(false);
+const dialogMode = ref<'create' | 'edit'>('create');
+const positionToDelete = ref<Position | null>(null);
+const searchQuery = ref('');
+const selectedDepartment = ref('all');
+
+// Breadcrumb
+const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' });
+const breadcrumbItems = ref([
+    { label: 'RH', to: '/rh' },
+    { label: 'Puestos' }
+]);
+
+// Options
+// Form Data
+const formData = ref<CreatePositionDTO | UpdatePositionDTO>({
+    name: '',
+    code: '',
+    description: ''
+});
+
+// Positions Data
+const positions = ref<Position[]>([]);
+
+// Computed
+const filteredPositions = computed(() => {
+    const query = searchQuery.value.toLowerCase();
+    return positions.value.filter((pos) => {
+        const matchesQuery =
+            pos.name.toLowerCase().includes(query) ||
+            pos.code.toLowerCase().includes(query);
+        const matchesDept =
+            selectedDepartment.value === 'all' || pos.code === selectedDepartment.value;
+        return matchesQuery && matchesDept;
+    });
+});
+
+
+// Fetch Positions from API
+const fetchPositions = async (showToast = true) => {
+    loading.value = true;
+    try {
+        const response = await positionsService.getPositions();
+        positions.value = response.data;
+
+        if (showToast) {
+            toast.add({
+                severity: 'success',
+                summary: 'Puestos Cargados',
+                detail: `Se cargaron ${response.data.length} puestos`,
+                life: 3000
+            });
+        }
+    } catch (error) {
+        console.error('Error al cargar puestos:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar los puestos',
+            life: 3000
+        });
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Lifecycle
+onMounted(() => {
+    fetchPositions();
+});
+
+const openCreateDialog = () => {
+    dialogMode.value = 'create';
+    formData.value = {
+        name: '',
+        code: '',
+        description: ''
+    };
+    showDialog.value = true;
+};
+
+const viewPosition = (position: Position) => {
+    toast.add({
+        severity: 'info',
+        summary: 'Ver Puesto',
+        detail: `Visualizando: ${position.name}`,
+        life: 3000
+    });
+};
+
+const editPosition = (position: Position) => {
+    dialogMode.value = 'edit';
+    formData.value = { ...position };
+    showDialog.value = true;
+};
+
+const confirmDelete = (position: Position) => {
+    positionToDelete.value = position;
+    showDeleteDialog.value = true;
+};
+
+const deletePosition = async () => {
+    if (!positionToDelete.value) return;
+
+    try {
+        await positionsService.deletePosition(positionToDelete.value.id);
+
+        // Recargar la lista de puestos
+        await fetchPositions(false);
+
+        toast.add({
+            severity: 'success',
+            summary: 'Puesto Eliminado',
+            detail: `${positionToDelete.value.name} ha sido eliminado exitosamente`,
+            life: 3000
+        });
+    } catch (error) {
+        console.error('Error al eliminar puesto:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo eliminar el puesto',
+            life: 3000
+        });
+    } finally {
+        showDeleteDialog.value = false;
+        positionToDelete.value = null;
+    }
+};
+
+const savePosition = async (data: CreatePositionDTO | UpdatePositionDTO) => {
+    if (!data.name || !data.code) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'Nombre y departamento son requeridos',
+            life: 3000
+        });
+        return;
+    }
+
+    try {
+        if (dialogMode.value === 'create') {
+            // Create new position
+            const createData: CreatePositionDTO = {
+                name: data.name,
+                code: data.code,
+                description: data.description || null
+            };
+
+            await positionsService.createPosition(createData);
+
+            toast.add({
+                severity: 'success',
+                summary: 'Puesto Creado',
+                detail: `${data.name} ha sido creado exitosamente`,
+                life: 3000
+            });
+        } else {
+            // Update existing position
+            const updateDataWithId = data as UpdatePositionDTO & { id: number };
+            if (!updateDataWithId.id) {
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'ID del puesto no encontrado',
+                    life: 3000
+                });
+                return;
+            }
+
+            const updateData: UpdatePositionDTO = {
+                name: updateDataWithId.name,
+                code: updateDataWithId.code,
+                description: updateDataWithId.description || null
+            };
+
+            await positionsService.updatePosition(updateDataWithId.id, updateData);
+
+            toast.add({
+                severity: 'success',
+                summary: 'Puesto Actualizado',
+                detail: `${data.name} ha sido actualizado exitosamente`,
+                life: 3000
+            });
+        }
+
+        // Recargar la lista de puestos
+        await fetchPositions(false);
+        showDialog.value = false;
+    } catch (error) {
+        console.error('Error al guardar puesto:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: `No se pudo ${dialogMode.value === 'create' ? 'crear' : 'actualizar'} el puesto`,
+            life: 3000
+        });
+    }
+};
+</script>
diff --git a/src/modules/rh/components/positions/PositionsForm.vue b/src/modules/rh/components/positions/PositionsForm.vue
new file mode 100644
index 0000000..5fd429e
--- /dev/null
+++ b/src/modules/rh/components/positions/PositionsForm.vue
@@ -0,0 +1,127 @@
+<template>
+    <Dialog
+        :visible="visible"
+        @update:visible="$emit('update:visible', $event)"
+        :modal="true"
+        :style="{ width: '720px' }"
+        :closable="true"
+        class="p-0"
+    >
+        <template #header>
+            <div class="flex flex-col gap-1 w-full">
+                <h2 class="text-gray-900 dark:text-white text-2xl font-bold tracking-tight">
+                    {{ mode === 'create' ? 'Crear Nuevo Puesto' : 'Editar Puesto' }}
+                </h2>
+                <p class="text-gray-500 dark:text-gray-400 text-base font-normal leading-normal">
+                    Configure los detalles básicos para habilitar el nuevo puesto en la estructura organizacional.
+                </p>
+            </div>
+        </template>
+
+        <div class="p-6 pt-0 space-y-6">
+            <div class="flex flex-col gap-2">
+                <label class="text-gray-900 dark:text-gray-200 text-base font-semibold leading-normal">
+                    Nombre del Puesto
+                </label>
+                <InputText
+                    v-model="localFormData.name"
+                    placeholder="Ej. Supervisor de Almacén"
+                    class="w-full h-14"
+                />
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <label class="text-gray-900 dark:text-gray-200 text-base font-semibold leading-normal">
+                    Código del Puesto
+                </label>
+                <InputText
+                    v-model="localFormData.code"
+                    placeholder="Ej. SUP-ALM-001"
+                    class="w-full h-14"
+                />
+            </div>
+
+            <div class="flex flex-col gap-2">
+                <label class="text-gray-900 dark:text-gray-200 text-base font-semibold leading-normal">
+                    Descripción / Actividades
+                </label>
+                <Textarea
+                    v-model="localFormData.description"
+                    rows="5"
+                    placeholder="Describa las funciones y actividades principales del puesto..."
+                    class="w-full"
+                />
+            </div>
+
+            <div class="mt-6 p-4 bg-primary-50 dark:bg-primary-900/10 rounded-lg border border-primary-200 dark:border-primary-800 flex gap-4">
+                <div class="text-primary pt-1">
+                    <i class="pi pi-info-circle text-xl"></i>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-gray-900 dark:text-white text-sm font-bold">Importante</p>
+                    <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">
+                        Al crear un nuevo puesto, este podrá asignarse a empleados y centros de costo. Puede editar estos detalles en cualquier momento.
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-200 dark:border-gray-800">
+                <Button
+                    label="Cancelar"
+                    severity="secondary"
+                    text
+                    @click="handleCancel"
+                    class="px-6"
+                />
+                <Button
+                    :label="mode === 'create' ? 'Guardar Puesto' : 'Actualizar Puesto'"
+                    icon="pi pi-save"
+                    @click="handleSave"
+                    class="px-8"
+                />
+            </div>
+        </template>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import Dialog from 'primevue/dialog';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import type { CreatePositionDTO, UpdatePositionDTO } from '../../types/positions.interface';
+
+interface Props {
+    visible: boolean;
+    mode: 'create' | 'edit';
+    formData: CreatePositionDTO | UpdatePositionDTO;
+}
+
+interface Emits {
+    (e: 'update:visible', value: boolean): void;
+    (e: 'save', data: CreatePositionDTO | UpdatePositionDTO): void;
+    (e: 'cancel'): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const localFormData = ref<CreatePositionDTO | UpdatePositionDTO>({ ...props.formData });
+
+// Watch for external formData changes
+watch(() => props.formData, (newData) => {
+    localFormData.value = { ...newData };
+}, { deep: true });
+
+const handleSave = () => {
+    emit('save', localFormData.value);
+};
+
+const handleCancel = () => {
+    emit('update:visible', false);
+    emit('cancel');
+};
+</script>
diff --git a/src/modules/rh/services/departments.services.ts b/src/modules/rh/services/departments.services.ts
new file mode 100644
index 0000000..0300825
--- /dev/null
+++ b/src/modules/rh/services/departments.services.ts
@@ -0,0 +1,47 @@
+
+import type { CreateDepartmentDTO, DeleteDepartmentDTO, ResponseDepartmentsDTO, UpdateDepartmentDTO } from "../types/departments.interface";
+import api from "@/services/api";
+
+export class DepartmentsService {
+  
+    public async getDepartments(): Promise<ResponseDepartmentsDTO> {
+      try {
+        const response = await api.get('/api/rh/departments');
+        return response.data;
+      } catch (error) {
+        console.error('Error fetching departments:', error);
+        throw error;
+      } 
+    }
+
+    public async createDepartment(data: CreateDepartmentDTO): Promise<ResponseDepartmentsDTO> {
+      try {
+        const response = await api.post('/api/rh/departments', data);
+        return response.data;
+      } catch (error) {
+        console.error('Error creating department:', error);
+        throw error;
+      }
+    }
+
+    public async updateDepartment(id: number, data: UpdateDepartmentDTO): Promise<ResponseDepartmentsDTO> {
+      try {
+        const response = await api.put(`/api/rh/departments/${id}`, data);  
+        return response.data;
+      } catch (error) {
+        console.error('Error updating department:', error);
+        throw error;
+      }
+    }
+
+    public async deleteDepartment(id: number): Promise<DeleteDepartmentDTO> {
+      try {
+        const response = await api.delete(`/api/rh/departments/${id}`);
+        return response.data;
+      } catch (error) {
+        console.error('Error deleting department:', error);
+        throw error;
+      }
+    }
+
+}
\ No newline at end of file
diff --git a/src/modules/rh/services/positions.services.ts b/src/modules/rh/services/positions.services.ts
new file mode 100644
index 0000000..f5f3caf
--- /dev/null
+++ b/src/modules/rh/services/positions.services.ts
@@ -0,0 +1,45 @@
+import api from "@/services/api";
+import type { CreatePositionDTO, ResponsePositionsDTO, UpdatePositionDTO } from "../types/positions.interface";
+
+export class PositionsService {
+
+    public async getPositions(): Promise<ResponsePositionsDTO> {
+        try {
+            const response = await api.get('/api/rh/job-positions');
+            return response.data;
+        } catch (error) {
+            console.error('Error fetching positions:', error);
+            throw error;
+        }
+    }
+
+    public async createPosition(data: CreatePositionDTO): Promise<ResponsePositionsDTO> {
+        try {
+            const response = await api.post('/api/rh/job-positions', data);
+            return response.data;
+        } catch (error) {
+            console.error('Error creating position:', error);
+            throw error;
+        }
+    }
+
+    public async updatePosition(id: number, data: UpdatePositionDTO): Promise<ResponsePositionsDTO> {
+        try {
+            const response = await api.put(`/api/rh/job-positions/${id}`, data);
+            return response.data;
+        } catch (error) {
+            console.error('Error updating position:', error);
+            throw error;
+        }
+    }
+
+    public async deletePosition(id: number): Promise<void> {
+        try {
+            await api.delete(`/api/rh/job-positions/${id}`);
+        } catch (error) {
+            console.error('Error deleting position:', error);
+            throw error;
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/src/modules/rh/types/departments.interface.ts b/src/modules/rh/types/departments.interface.ts
new file mode 100644
index 0000000..334155d
--- /dev/null
+++ b/src/modules/rh/types/departments.interface.ts
@@ -0,0 +1,26 @@
+export interface Department {
+  id: number;
+  name: string;
+  description: string;
+  employeeCount?: number;
+  color?: string;
+  icon?: string;
+  created_at: Date;
+  updated_at: Date;
+  deleted_at: Date | null;
+}
+
+export interface ResponseDepartmentsDTO {
+  data: Department[];
+}
+
+export interface DeleteDepartmentDTO {
+  message: string;
+}
+
+export interface CreateDepartmentDTO {
+  name: string;
+  description: string;
+}
+
+export interface UpdateDepartmentDTO extends Partial<CreateDepartmentDTO> {}
\ No newline at end of file
diff --git a/src/modules/rh/types/positions.interface.ts b/src/modules/rh/types/positions.interface.ts
new file mode 100644
index 0000000..314e6ae
--- /dev/null
+++ b/src/modules/rh/types/positions.interface.ts
@@ -0,0 +1,26 @@
+export interface Position {
+  id: number;
+  name: string;
+  code: string;
+  description: string | null;
+  is_active: number;
+  created_at: Date;
+  updated_at: Date;
+  deleted_at: Date | null;
+}
+
+export interface CreatePositionDTO {
+  name: string;
+  code: string;
+  description: string | null;
+}
+
+export interface UpdatePositionDTO extends Partial<CreatePositionDTO> {}
+
+export interface ResponsePositionsDTO {
+  data: Position[];
+}
+
+export interface DeletePositionDTO {
+  message: string;
+}
\ No newline at end of file
diff --git a/src/modules/stores/components/StoreDetails.vue b/src/modules/stores/components/StoreDetails.vue
new file mode 100644
index 0000000..50c2e93
--- /dev/null
+++ b/src/modules/stores/components/StoreDetails.vue
@@ -0,0 +1,498 @@
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Breadcrumb -->
+        <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
+
+        <!-- Header -->
+        <div class="flex flex-wrap items-center justify-between gap-4">
+            <div class="flex flex-col gap-1">
+                <h1
+                    class="text-surface-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    {{ storeData?.name || 'Cargando...' }}
+                </h1>
+                <p class="text-surface-500 dark:text-surface-400 text-base font-normal leading-normal">
+                    Visualiza y gestiona la información de este punto de venta.
+                </p>
+            </div>
+        </div>
+
+        <!-- General Information Card -->
+        <Card class="shadow-sm">
+            <template #header>
+                <div class="flex items-center justify-between p-4">
+                    <div>
+                        <h2 class="text-xl font-bold text-surface-900 dark:text-white">Información General</h2>
+                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                            Datos principales del punto de venta.
+                        </p>
+                    </div>
+                    <Button label="Editar Información" icon="pi pi-pencil" outlined @click="editStore" />
+                </div>
+            </template>
+
+            <template #content>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Store ID -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            ID del Punto de Venta
+                        </label>
+                        <p class="text-sm font-semibold text-surface-900 dark:text-white">
+                            {{ storeData?.id || 'N/A' }}
+                        </p>
+                    </div>
+
+                    <!-- Address -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            Dirección
+                        </label>
+                        <p class="text-sm font-semibold text-surface-900 dark:text-white">
+                            {{ storeData?.location || 'No especificada' }}
+                        </p>
+                    </div>
+
+                    <!-- Status -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            Estado
+                        </label>
+                        <div class="flex items-center">
+                            <Tag :value="storeData?.is_active ? 'Activo' : 'Inactivo'"
+                                :severity="storeData?.is_active ? 'success' : 'danger'" />
+                        </div>
+                    </div>
+
+                    <!-- Created Date -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            Fecha de Creación
+                        </label>
+                        <p class="text-sm font-semibold text-surface-900 dark:text-white">
+                            {{ formatDate(storeData?.created_at) }}
+                        </p>
+                    </div>
+
+                    <!-- Updated Date -->
+                    <div class="space-y-1">
+                        <label class="text-sm font-medium text-surface-500 dark:text-surface-400">
+                            Última Actualización
+                        </label>
+                        <p class="text-sm font-semibold text-surface-900 dark:text-white">
+                            {{ formatDate(storeData?.updated_at) }}
+                        </p>
+                    </div>
+                </div>
+            </template>
+        </Card>
+
+        <!-- Configuration Card -->
+        <Card class="shadow-sm">
+            <template #header>
+                <div class="flex items-center justify-between p-4">
+                    <div>
+                        <h2 class="text-xl font-bold text-surface-900 dark:text-white">Configuración</h2>
+                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                            Ajustes de inventario y catálogo para este punto de venta.
+                        </p>
+                    </div>
+                    <Button label="Guardar Cambios" icon="pi pi-save" :loading="isSaving" @click="saveConfiguration" />
+                </div>
+            </template>
+
+            <template #content>
+                <div class="space-y-6">
+                    <!-- Source Selection -->
+                    <div class="space-y-4">
+                        <h3 class="text-base font-semibold text-surface-900 dark:text-white">
+                            Fuente de Productos y Stock
+                        </h3>
+
+                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <!-- Catalog Option -->
+                            <div class="flex items-start space-x-3 p-4 border rounded-lg cursor-pointer"
+                                :class="sourceType === 'catalog' ? 'border-primary bg-primary/5' : 'border-surface-300 dark:border-surface-600'"
+                                @click="sourceType = 'catalog'">
+                                <RadioButton v-model="sourceType" inputId="catalog" name="source" value="catalog" />
+                                <div class="flex-1">
+                                    <label for="catalog"
+                                        class="block text-sm font-medium text-surface-900 dark:text-white cursor-pointer">
+                                        Catálogo General
+                                    </label>
+                                    <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                                        Usar productos asignados directamente a este punto de venta desde el catálogo
+                                        maestro.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <!-- Warehouse Option -->
+                            <div class="flex items-start space-x-3 p-4 border rounded-lg cursor-pointer"
+                                :class="sourceType === 'warehouse' ? 'border-primary bg-primary/5' : 'border-surface-300 dark:border-surface-600'"
+                                @click="sourceType = 'warehouse'">
+                                <RadioButton v-model="sourceType" inputId="warehouse" name="source" value="warehouse" />
+                                <div class="flex-1">
+                                    <label for="warehouse"
+                                        class="block text-sm font-medium text-surface-900 dark:text-white cursor-pointer">
+                                        Extraer de un Almacén
+                                    </label>
+                                    <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                                        Sincronizar el inventario de productos directamente desde un almacén específico.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Warehouse Selector -->
+                        <div class="space-y-2">
+                            <label class="text-sm font-medium text-surface-700 dark:text-surface-300">
+                                Seleccionar Almacén
+                            </label>
+                            <Dropdown v-model="selectedWarehouse" :options="warehouseOptions" optionLabel="name"
+                                optionValue="id" placeholder="Selecciona un almacén..."
+                                :disabled="sourceType !== 'warehouse'" class="w-full" />
+                            <small class="text-surface-500 dark:text-surface-400">
+                                Esta opción se habilita al seleccionar "Extraer de un Almacén".
+                            </small>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Card>
+
+        
+
+        <!-- Terminals Section -->
+        <Card class="shadow-sm">
+            <template #header>
+                <div class="flex items-center justify-between p-4">
+                    <div>
+                        <h2 class="text-xl font-bold text-surface-900 dark:text-white">Gestionar Terminales</h2>
+                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-1">
+                            Lista de terminales asociadas a este punto de venta.
+                        </p>
+                    </div>
+                    <Button label="Añadir Terminal" icon="pi pi-plus" @click="addTerminal" />
+                </div>
+            </template>
+
+            <template #content>
+                <!-- Search Bar -->
+                <div class="mb-4">
+                    <IconField iconPosition="left">
+                        <InputIcon class="pi pi-search" />
+                        <InputText v-model="terminalSearchQuery"
+                            placeholder="Buscar terminal por ID, nombre o modelo..." class="w-full" />
+                    </IconField>
+                </div>
+
+                <!-- Terminals Table -->
+                <DataTable :value="terminals" :loading="loadingTerminals" responsiveLayout="scroll" stripedRows
+                    class="p-datatable-sm">
+                    <Column field="id" header="ID Terminal" sortable>
+                        <template #body="{ data }">
+                            <span class="font-medium">{{ data.id }}</span>
+                        </template>
+                    </Column>
+
+                    <Column field="alias" header="Alias" sortable>
+                        <template #body="{ data }">
+                            {{ data.alias }}
+                        </template>
+                    </Column>
+
+                    <Column field="model" header="Modelo" sortable>
+                        <template #body="{ data }">
+                            {{ data.model }}
+                        </template>
+                    </Column>
+
+                    <Column field="status" header="Estado" sortable>
+                        <template #body="{ data }">
+                            <Tag :value="getTerminalStatusLabel(data.status)"
+                                :severity="getTerminalStatusSeverity(data.status)" />
+                        </template>
+                    </Column>
+
+                    <Column header="Acciones" style="width: 10rem">
+                        <template #body="{ data }">
+                            <div class="flex gap-2">
+                                <Button icon="pi pi-pencil" severity="secondary" text rounded
+                                    @click="editTerminal(data)" v-tooltip="'Editar terminal'" />
+                                <Button icon="pi pi-trash" severity="danger" text rounded @click="deleteTerminal(data)"
+                                    v-tooltip="'Eliminar terminal'" />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import Breadcrumb from 'primevue/breadcrumb';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import InputText from 'primevue/inputtext';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+import RadioButton from 'primevue/radiobutton';
+import Dropdown from 'primevue/dropdown';
+import Toast from 'primevue/toast';
+import { storesService } from '../services/storesServices';
+import type { Store } from '../types/store';
+
+const route = useRoute();
+const toast = useToast();
+
+// Reactive data
+const storeData = ref<Store | null>(null);
+const loading = ref(false);
+const isSaving = ref(false);
+// const loadingProducts = ref(false);
+const loadingTerminals = ref(false);
+
+// Configuration
+const sourceType = ref('catalog');
+const selectedWarehouse = ref(null);
+// const productSearchQuery = ref('');
+const terminalSearchQuery = ref('');
+
+// Breadcrumb
+const breadcrumbHome = ref({
+    icon: 'pi pi-home',
+    route: '/'
+});
+
+const breadcrumbItems = ref([
+    { label: 'Puntos de Venta', route: '/stores' },
+    { label: 'Detalles' }
+]);
+
+// Mock data - Replace with real API calls
+const warehouseOptions = ref([
+    { id: 1, name: 'Almacén Central' },
+    { id: 2, name: 'Almacén Norte' },
+    { id: 3, name: 'Almacén Sur' }
+]);
+
+// Mock products data (for future use)
+// const products = ref([
+//     {
+//         id: 1,
+//         sku: 'CAFE-GRN-01',
+//         name: 'Café Grano Entero 1kg',
+//         category: 'Café',
+//         price: 250.00
+//     },
+//     {
+//         id: 2,
+//         sku: 'ACC-TZA-05',
+//         name: 'Taza de Cerámica Blanca',
+//         category: 'Accesorios',
+//         price: 120.00
+//     },
+//     {
+//         id: 3,
+//         sku: 'PST-CHC-12',
+//         name: 'Pastel de Chocolate',
+//         category: 'Repostería',
+//         price: 45.00
+//     }
+// ]);
+
+const terminals = ref([
+    {
+        id: 'TERM-01A',
+        alias: 'Caja Principal',
+        model: 'Verifone VX520',
+        status: 'online'
+    },
+    {
+        id: 'TERM-02B',
+        alias: 'Mostrador',
+        model: 'Ingenico ICT250',
+        status: 'offline'
+    },
+    {
+        id: 'TERM-03C',
+        alias: 'Autoservicio',
+        model: 'Verifone VX520',
+        status: 'inactive'
+    }
+]);
+
+// Methods
+const loadStoreData = async () => {
+    const storeId = route.params.id as string;
+    if (!storeId) return;
+
+    try {
+        loading.value = true;
+
+        // Call the real API service
+        const response = await storesService.getStoreById(parseInt(storeId));
+
+        // The API response structure should be: { status: string, data: { point_of_sale: Store } }
+        if (response.data && response.data.data && response.data.data.point_of_sale) {
+            storeData.value = response.data.data.point_of_sale;
+
+            // Update breadcrumb with store name
+            if (storeData.value && breadcrumbItems.value[1]) {
+                breadcrumbItems.value[1].label = storeData.value.name;
+            }
+        } else {
+            throw new Error('Datos de tienda no encontrados en la respuesta');
+        }
+
+    } catch (error) {
+        console.error('Error loading store data:', error);
+
+        let errorMessage = 'No se pudo cargar la información de la tienda';
+        if (error instanceof Error) {
+            errorMessage = error.message;
+        }
+
+        toast.add({
+            severity: 'error',
+            summary: 'Error al Cargar Tienda',
+            detail: errorMessage,
+            life: 5000
+        });
+    } finally {
+        loading.value = false;
+    }
+};
+
+const formatDate = (dateString: string | undefined) => {
+    if (!dateString) return 'N/A';
+    return new Date(dateString).toLocaleDateString('es-ES', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+};
+
+// Unused utility (for future use)
+// const formatCurrency = (amount: number) => {
+//     return new Intl.NumberFormat('es-MX', {
+//         style: 'currency',
+//         currency: 'MXN'
+//     }).format(amount);
+// };
+
+const getTerminalStatusLabel = (status: string) => {
+    const labels = {
+        'online': 'Online',
+        'offline': 'Offline',
+        'inactive': 'Inactiva'
+    };
+    return labels[status as keyof typeof labels] || status;
+};
+
+const getTerminalStatusSeverity = (status: string) => {
+    const severities = {
+        'online': 'success',
+        'offline': 'danger',
+        'inactive': 'warning'
+    };
+    return severities[status as keyof typeof severities] || 'secondary';
+};
+
+// Action methods
+const editStore = () => {
+    // TODO: Implement edit functionality
+    // This could navigate to edit route or open a modal
+    toast.add({
+        severity: 'info',
+        summary: 'Editar Tienda',
+        detail: 'Funcionalidad de edición próximamente',
+        life: 3000
+    });
+};
+
+const saveConfiguration = async () => {
+    try {
+        isSaving.value = true;
+        // TODO: Implement save configuration API call
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        toast.add({
+            severity: 'success',
+            summary: 'Configuración Guardada',
+            detail: 'La configuración se ha guardado exitosamente',
+            life: 3000
+        });
+    } catch (error) {
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo guardar la configuración',
+            life: 3000
+        });
+    } finally {
+        isSaving.value = false;
+    }
+};
+
+// Unused product methods (for future use)
+// const addProduct = () => {
+//     toast.add({
+//         severity: 'info',
+//         summary: 'Añadir Producto',
+//         detail: 'Funcionalidad próximamente',
+//         life: 3000
+//     });
+// };
+
+// const removeProduct = (product: any) => {
+//     toast.add({
+//         severity: 'warn',
+//         summary: 'Quitar Producto',
+//         detail: `¿Quitar ${product.name}?`,
+//         life: 3000
+//     });
+// };
+
+const addTerminal = () => {
+    toast.add({
+        severity: 'info',
+        summary: 'Añadir Terminal',
+        detail: 'Funcionalidad próximamente',
+        life: 3000
+    });
+};
+
+const editTerminal = (terminal: any) => {
+    toast.add({
+        severity: 'info',
+        summary: 'Editar Terminal',
+        detail: `Editando ${terminal.alias}`,
+        life: 3000
+    });
+};
+
+const deleteTerminal = (terminal: any) => {
+    toast.add({
+        severity: 'warn',
+        summary: 'Eliminar Terminal',
+        detail: `¿Eliminar ${terminal.alias}?`,
+        life: 3000
+    });
+};
+
+// Lifecycle
+onMounted(() => {
+    loadStoreData();
+});
+</script>
\ No newline at end of file
diff --git a/src/modules/stores/components/StoreForm.vue b/src/modules/stores/components/StoreForm.vue
new file mode 100644
index 0000000..9a0faf3
--- /dev/null
+++ b/src/modules/stores/components/StoreForm.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import Button from 'primevue/button';
+import InputSwitch from 'primevue/inputswitch';
+import type { Store, CreateStoreData } from '../types/store';
+
+// Props
+interface Props {
+    store?: Store | null;
+    isEditing?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    store: null,
+    isEditing: false
+});
+
+// Emits
+const emit = defineEmits<{
+    save: [data: CreateStoreData];
+    cancel: [];
+}>();
+
+// Form data
+const formData = ref<CreateStoreData>({
+    name: '',
+    location: '',
+    is_active: true
+});
+
+// Track if form has been touched
+const touched = ref(false);
+
+// Watch for store changes (when editing)
+watch(() => props.store, (newStore) => {
+    if (newStore) {
+        formData.value = {
+            name: newStore.name,
+            location: newStore.location,
+            is_active: newStore.is_active
+        };
+        touched.value = false;
+    } else {
+        // Reset form
+        formData.value = {
+            name: '',
+            location: '',
+            is_active: true
+        };
+        touched.value = false;
+    }
+}, { immediate: true });
+
+// Form validation
+const isFormValid = () => {
+    return formData.value.name.trim() !== '' &&
+           formData.value.location.trim() !== '';
+};
+
+// Check if field should show error
+const showError = (field: keyof CreateStoreData) => {
+    if (!touched.value) return false;
+    if (field === 'name') return formData.value.name.trim() === '';
+    if (field === 'location') return formData.value.location.trim() === '';
+    return false;
+};
+
+// Form submission
+const handleSubmit = () => {
+    touched.value = true;
+    if (!isFormValid()) return;
+
+    emit('save', formData.value);
+};
+
+const handleCancel = () => {
+    emit('cancel');
+};
+</script>
+
+<template>
+    <div class="store-form">
+        <div class="space-y-6">
+            <!-- Store Name -->
+            <div>
+                <label for="store-name" class="block text-sm font-medium mb-2 text-surface-900 dark:text-white">
+                    Nombre del Punto de Venta *
+                </label>
+                <InputText
+                    id="store-name"
+                    v-model="formData.name"
+                    class="w-full"
+                    placeholder="ej., Sucursal Centro"
+                    :invalid="showError('name')"
+                />
+                <small class="text-surface-500 dark:text-surface-400 block mt-1">
+                    Ingresa un nombre descriptivo para el punto de venta
+                </small>
+            </div>
+
+            <!-- Location -->
+            <div>
+                <label for="location" class="block text-sm font-medium mb-2 text-surface-900 dark:text-white">
+                    Ubicación *
+                </label>
+                <Textarea
+                    id="location"
+                    v-model="formData.location"
+                    class="w-full"
+                    rows="3"
+                    placeholder="ej., Av. Principal 123, Ciudad, Estado, CP 12345"
+                    :invalid="showError('location')"
+                />
+                <small class="text-surface-500 dark:text-surface-400 block mt-1">
+                    Dirección física completa del punto de venta
+                </small>
+            </div>
+
+            <!-- Active Status -->
+            <div class="flex items-center gap-3">
+                <label for="is-active" class="text-sm font-medium text-surface-900 dark:text-white">
+                    Estado Activo
+                </label>
+                <InputSwitch
+                    id="is-active"
+                    v-model="formData.is_active"
+                />
+                <span class="text-sm text-surface-500 dark:text-surface-400">
+                    {{ formData.is_active ? 'Activo' : 'Inactivo' }}
+                </span>
+            </div>
+        </div>
+
+        <!-- Form Actions -->
+        <div class="mt-6 flex justify-end items-center gap-3">
+            <Button
+                label="Cancelar"
+                severity="secondary"
+                outlined
+                @click="handleCancel"
+            />
+            <Button
+                :label="isEditing ? 'Actualizar' : 'Guardar'"
+                :disabled="!isFormValid()"
+                @click="handleSubmit"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.store-form {
+    min-width: 500px;
+}
+</style>
diff --git a/src/modules/stores/components/StoresIndex.vue b/src/modules/stores/components/StoresIndex.vue
new file mode 100644
index 0000000..9396db8
--- /dev/null
+++ b/src/modules/stores/components/StoresIndex.vue
@@ -0,0 +1,401 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import Card from 'primevue/card';
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Tag from 'primevue/tag';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import Dropdown from 'primevue/dropdown';
+import Dialog from 'primevue/dialog';
+import Toast from 'primevue/toast';
+import ConfirmDialog from 'primevue/confirmdialog';
+import { storesService } from '../services/storesServices';
+import StoreForm from './StoreForm.vue';
+import type { Store, CreateStoreData } from '../types/store';
+
+const router = useRouter();
+const toast = useToast();
+const confirm = useConfirm();
+
+// Search and filters
+const searchQuery = ref('');
+const selectedStatus = ref('all');
+const selectedType = ref('all');
+const selectedLocation = ref('all');
+
+// Data and loading state
+const stores = ref<Store[]>([]);
+const loading = ref(false);
+const totalRecords = ref(0);
+const currentPage = ref(1);
+const rowsPerPage = ref(5);
+
+// Dialog state
+const showDialog = ref(false);
+const isEditing = ref(false);
+const selectedStore = ref<Store | null>(null);
+
+// Computed
+const dialogTitle = computed(() => 
+    isEditing.value ? 'Editar Punto de Venta' : 'Nuevo Punto de Venta'
+);
+
+// Filter options
+const statusOptions = [
+    { label: 'Todos', value: 'all' },
+    { label: 'Activo', value: 'active' },
+    { label: 'Inactivo', value: 'inactive' },
+];
+
+const typeOptions = [
+    { label: 'Todos', value: 'all' },
+    { label: 'Tienda', value: 'store' },
+    { label: 'Kiosco', value: 'kiosk' },
+    { label: 'Almacén', value: 'warehouse' },
+];
+
+const locationOptions = [
+    { label: 'Todas', value: 'all' },
+    { label: 'Centro', value: 'centro' },
+    { label: 'Norte', value: 'norte' },
+    { label: 'Sur', value: 'sur' },
+];
+
+// Fetch stores from API
+const fetchStores = async () => {
+    loading.value = true;
+    try {
+        const response = await storesService.getStores(currentPage.value, rowsPerPage.value);
+        
+        if (response.data.status === 'success') {
+            stores.value = response.data.data.points_of_sale.data;
+            totalRecords.value = response.data.data.points_of_sale.total;
+            currentPage.value = response.data.data.points_of_sale.current_page;
+            
+            console.log('✅ Stores loaded:', stores.value.length);
+        }
+    } catch (error) {
+        console.error('❌ Error loading stores:', error);
+        stores.value = [];
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar los puntos de venta.',
+            life: 3000
+        });
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Pagination handler
+const onPage = (event: any) => {
+    currentPage.value = event.page + 1;
+    rowsPerPage.value = event.rows;
+    fetchStores();
+};
+
+// Dialog methods
+const openCreateDialog = () => {
+    selectedStore.value = null;
+    isEditing.value = false;
+    showDialog.value = true;
+};
+
+const handleViewDetails = (store: Store) => {
+    // Navigate to store details page
+    router.push({ 
+        name: 'StoreDetails', 
+        params: { id: store.id } 
+    });
+};
+
+const handleEdit = (store: Store) => {
+    selectedStore.value = store;
+    isEditing.value = true;
+    showDialog.value = true;
+};
+
+const handleSaveStore = async (storeData: CreateStoreData) => {
+    try {
+        if (isEditing.value && selectedStore.value) {
+            await storesService.updateStore(selectedStore.value.id, storeData);
+            toast.add({
+                severity: 'success',
+                summary: 'Punto de Venta Actualizado',
+                detail: 'El punto de venta ha sido actualizado exitosamente.',
+                life: 3000
+            });
+        } else {
+            await storesService.createStore(storeData);
+            toast.add({
+                severity: 'success',
+                summary: 'Punto de Venta Creado',
+                detail: 'El punto de venta ha sido creado exitosamente.',
+                life: 3000
+            });
+        }
+        showDialog.value = false;
+        selectedStore.value = null;
+        await fetchStores();
+    } catch (error) {
+        console.error('❌ Error saving store:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo guardar el punto de venta.',
+            life: 3000
+        });
+    }
+};
+
+const handleCancelForm = () => {
+    showDialog.value = false;
+    selectedStore.value = null;
+};
+
+const handleDeleteStore = (store: Store) => {
+    confirm.require({
+        message: `¿Estás seguro de eliminar el punto de venta "${store.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await storesService.deleteStore(store.id);
+                toast.add({
+                    severity: 'success',
+                    summary: 'Punto de Venta Eliminado',
+                    detail: `El punto de venta "${store.name}" ha sido eliminado exitosamente.`,
+                    life: 3000
+                });
+                await fetchStores();
+            } catch (error) {
+                console.error('❌ Error deleting store:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'No se pudo eliminar el punto de venta.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+const clearFilters = () => {
+    searchQuery.value = '';
+    selectedStatus.value = 'all';
+    selectedType.value = 'all';
+    selectedLocation.value = 'all';
+};
+
+// Get status configuration
+const getStatusConfig = (isActive: boolean) => {
+    return isActive 
+        ? { label: 'Activo', severity: 'success' as const }
+        : { label: 'Inactivo', severity: 'warning' as const };
+};
+
+// Load stores on mount
+onMounted(() => {
+    fetchStores();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+        
+        <!-- Confirm Dialog -->
+        <ConfirmDialog />
+
+        <!-- Header -->
+        <div class="flex flex-wrap justify-between gap-4 items-center">
+            <div class="flex min-w-72 flex-col gap-1">
+                <h1 class="text-surface-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    Gestión de Puntos de Venta
+                </h1>
+                <p class="text-surface-500 dark:text-surface-400 text-base font-normal leading-normal">
+                    Administra, rastrea y organiza todos tus puntos de venta en un solo lugar.
+                </p>
+            </div>
+            <Button
+                label="Crear Nuevo Punto de Venta"
+                icon="pi pi-plus"
+                @click="openCreateDialog"
+                class="min-w-[200px]"
+            />
+        </div>
+
+        <!-- Table Card -->
+        <Card class="shadow-sm">
+            <template #content>
+                <!-- Search and Filters -->
+                <div class="flex flex-col md:flex-row justify-between gap-4 mb-4">
+                    <div class="flex-1">
+                        <IconField iconPosition="left">
+                            <InputIcon class="pi pi-search" />
+                            <InputText
+                                v-model="searchQuery"
+                                placeholder="Buscar por nombre o ID..."
+                                class="w-full"
+                            />
+                        </IconField>
+                    </div>
+                    <div class="flex gap-2 flex-wrap">
+                        <Dropdown
+                            v-model="selectedStatus"
+                            :options="statusOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Estado: Todos"
+                            class="w-40"
+                        />
+                        <Dropdown
+                            v-model="selectedType"
+                            :options="typeOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Tipo: Todos"
+                            class="w-40"
+                        />
+                        <Dropdown
+                            v-model="selectedLocation"
+                            :options="locationOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Ubicación: Todas"
+                            class="w-40"
+                        />
+                        <Button
+                            label="Limpiar"
+                            icon="pi pi-times"
+                            outlined
+                            @click="clearFilters"
+                        />
+                    </div>
+                </div>
+
+                <!-- Table -->
+                <DataTable
+                    :value="stores"
+                    :loading="loading"
+                    :paginator="true"
+                    :rows="rowsPerPage"
+                    :totalRecords="totalRecords"
+                    :rowsPerPageOptions="[5, 10, 20, 50]"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    lazy
+                    @page="onPage"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                    currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} resultados"
+                >
+                    <!-- Name Column -->
+                    <Column field="name" header="Nombre del Punto de Venta" :sortable="true">
+                        <template #body="{ data }">
+                            <span class="font-medium text-surface-900 dark:text-white">
+                                {{ data.name }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Location Column -->
+                    <Column field="location" header="Ubicación" :sortable="true">
+                        <template #body="{ data }">
+                            <span class="text-surface-500 dark:text-surface-400 text-sm">
+                                {{ data.location }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Status Column -->
+                    <Column field="is_active" header="Estado" :sortable="true">
+                        <template #body="{ data }">
+                            <Tag
+                                :value="getStatusConfig(data.is_active).label"
+                                :severity="getStatusConfig(data.is_active).severity"
+                            />
+                        </template>
+                    </Column>
+
+                    <!-- Created Date Column -->
+                    <Column field="created_at" header="Fecha de Creación" :sortable="true">
+                        <template #body="{ data }">
+                            <span class="text-surface-500 dark:text-surface-400 text-sm">
+                                {{ new Date(data.created_at).toLocaleDateString('es-ES', { 
+                                    year: 'numeric', 
+                                    month: 'short', 
+                                    day: 'numeric' 
+                                }) }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <!-- Actions Column -->
+                    <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right">
+                        <template #body="{ data }">
+                            <div class="flex gap-2 justify-end">
+                                <Button
+                                    icon="pi pi-eye"
+                                    severity="info"
+                                    text
+                                    rounded
+                                    @click="handleViewDetails(data)"
+                                    v-tooltip.top="'Ver Detalles'"
+                                />
+                                <Button
+                                    icon="pi pi-pencil"
+                                    severity="secondary"
+                                    text
+                                    rounded
+                                    @click="handleEdit(data)"
+                                    v-tooltip.top="'Editar'"
+                                />
+                                <Button
+                                    icon="pi pi-trash"
+                                    severity="danger"
+                                    text
+                                    rounded
+                                    @click="handleDeleteStore(data)"
+                                    v-tooltip.top="'Eliminar'"
+                                />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+
+        <!-- Create/Edit Dialog -->
+        <Dialog
+            v-model:visible="showDialog"
+            modal
+            :header="dialogTitle"
+            :style="{ width: '90vw', maxWidth: '800px' }"
+            :contentStyle="{ padding: '1.5rem' }"
+        >
+            <StoreForm
+                :store="selectedStore"
+                :isEditing="isEditing"
+                @save="handleSaveStore"
+                @cancel="handleCancelForm"
+            />
+        </Dialog>
+    </div>
+</template>
+
+<style scoped>
+/* Custom styles if needed */
+</style>
\ No newline at end of file
diff --git a/src/modules/stores/components/index.html b/src/modules/stores/components/index.html
new file mode 100644
index 0000000..6b699f8
--- /dev/null
+++ b/src/modules/stores/components/index.html
@@ -0,0 +1,363 @@
+<main class="w-full flex-1 p-6 lg:p-8">
+    <div class="mx-auto max-w-7xl">
+        <div class="flex flex-wrap items-center gap-2">
+            <a class="text-sm font-medium text-primary hover:underline" href="#">Puntos de Venta</a>
+            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">/</span>
+            <span class="text-sm font-medium text-gray-800 dark:text-gray-200">Sucursal Centro</span>
+        </div>
+        <div class="mt-4 flex flex-wrap items-center justify-between gap-4">
+            <div class="flex flex-col gap-1">
+                <h1 class="text-3xl font-black tracking-tight text-[#111418] dark:text-white">Sucursal Centro</h1>
+                <p class="text-base text-[#617589] dark:text-gray-400">Visualiza y gestiona la información de este punto
+                    de venta.</p>
+            </div>
+        </div>
+        <div class="mt-8 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+            <div class="flex flex-wrap items-start justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-bold text-[#111418] dark:text-white">Información General</h2>
+                    <p class="mt-1 text-sm text-[#617589] dark:text-gray-400">Datos principales del punto de venta.</p>
+                </div>
+                <button
+                    class="flex h-10 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg bg-gray-100 px-4 text-sm font-bold text-[#111418] hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+                    <span class="material-symbols-outlined text-lg">edit</span>
+                    <span class="truncate">Editar Información</span>
+                </button>
+            </div>
+            <div
+                class="mt-6 grid grid-cols-1 gap-x-4 gap-y-6 border-t border-gray-200 pt-6 sm:grid-cols-2 lg:grid-cols-3 dark:border-gray-700">
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">ID del Punto de Venta</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">POS-00123</p>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Dirección</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">Av. Principal 123, Ciudad Capital</p>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Estado</p>
+                    <div class="flex items-center">
+                        <span
+                            class="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200">
+                            <span class="size-1.5 rounded-full bg-green-500"></span> Activo
+                        </span>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Teléfono</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">+52 55 1234 5678</p>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Fecha de Creación</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">15 de Enero, 2023</p>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <p class="text-sm text-[#617589] dark:text-gray-400">Última Actualización</p>
+                    <p class="text-sm font-medium text-[#111418] dark:text-white">02 de Julio, 2024</p>
+                </div>
+            </div>
+        </div>
+        <div class="mt-8 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
+            <div class="flex flex-wrap items-center justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-bold text-[#111418] dark:text-white">Configuración</h2>
+                    <p class="mt-1 text-sm text-[#617589] dark:text-gray-400">Ajustes de inventario y catálogo para este
+                        punto de venta.</p>
+                </div>
+                <button
+                    class="flex h-10 cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg bg-gray-100 px-4 text-sm font-bold text-[#111418] hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
+                    <span class="material-symbols-outlined text-lg">save</span>
+                    <span class="truncate">Guardar Cambios</span>
+                </button>
+            </div>
+            <div class="mt-6 border-t border-gray-200 pt-6 dark:border-gray-700">
+                <fieldset class="space-y-6">
+                    <legend class="text-base font-semibold text-[#111418] dark:text-white">Fuente de Productos y Stock
+                    </legend>
+                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                        <label
+                            class="flex cursor-pointer flex-col rounded-lg border border-primary bg-primary/5 p-4 ring-2 ring-primary dark:border-primary dark:bg-primary/20"
+                            for="catalogo-general">
+                            <div class="flex items-center">
+                                <input checked=""
+                                    class="h-4 w-4 border-gray-300 text-primary focus:ring-primary dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-900"
+                                    id="catalogo-general" name="fuente-stock" type="radio" value="catalogo" />
+                                <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">Catálogo
+                                    General</span>
+                            </div>
+                            <p class="ml-7 mt-1 text-sm text-gray-500 dark:text-gray-400">Usar productos asignados
+                                directamente a este punto de venta desde el catálogo maestro.</p>
+                        </label>
+                        <label
+                            class="flex cursor-pointer flex-col rounded-lg border border-gray-300 bg-white p-4 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700/50"
+                            for="almacen-especifico">
+                            <div class="flex items-center">
+                                <input
+                                    class="h-4 w-4 border-gray-300 text-primary focus:ring-primary dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-900"
+                                    id="almacen-especifico" name="fuente-stock" type="radio" value="almacen" />
+                                <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">Extraer de un
+                                    Almacén</span>
+                            </div>
+                            <p class="ml-7 mt-1 text-sm text-gray-500 dark:text-gray-400">Sincronizar el inventario de
+                                productos directamente desde un almacén específico.</p>
+                        </label>
+                    </div>
+                    <div>
+                        <label class="text-sm font-medium text-gray-700 dark:text-gray-300"
+                            for="almacen-selector">Seleccionar Almacén</label>
+                        <select
+                            class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-primary focus:ring-primary disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:disabled:bg-gray-800"
+                            disabled="" id="almacen-selector">
+                            <option>Selecciona un almacén...</option>
+                            <option>Almacén Central</option>
+                            <option>Almacén Norte</option>
+                            <option>Almacén Sur</option>
+                        </select>
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Esta opción se habilita al seleccionar
+                            "Extraer de un Almacén".</p>
+                    </div>
+                </fieldset>
+            </div>
+        </div>
+        <div class="mt-8">
+            <div class="flex flex-wrap items-center justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-bold text-[#111418] dark:text-white">Productos Asignados</h2>
+                    <p class="mt-1 text-sm text-[#617589] dark:text-gray-400">Catálogo de productos disponibles en esta
+                        sucursal.</p>
+                </div>
+                <button
+                    class="flex h-10 min-w-[84px] cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg bg-primary px-4 text-sm font-bold text-white shadow-sm hover:bg-primary/90">
+                    <span class="material-symbols-outlined text-lg">add_circle</span>
+                    <span class="truncate">Añadir Producto</span>
+                </button>
+            </div>
+            <div class="relative mt-4">
+                <span
+                    class="material-symbols-outlined pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
+                <input
+                    class="w-full rounded-lg border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm focus:border-primary focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:focus:border-primary"
+                    placeholder="Buscar producto por SKU, nombre o categoría..." type="text" />
+            </div>
+            <div class="mt-4 flow-root">
+                <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                        <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800">
+                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+                                <thead class="bg-gray-50 dark:bg-gray-900">
+                                    <tr>
+                                        <th class="px-6 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">SKU</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Producto</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Categoría</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Precio</th>
+                                        <th class="relative py-3.5 pl-3 pr-4 sm:pr-6" scope="col"><span
+                                                class="sr-only">Acciones</span></th>
+                                    </tr>
+                                </thead>
+                                <tbody
+                                    class="divide-y divide-gray-200 bg-white dark:divide-gray-800 dark:bg-gray-900/50">
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            CAFE-GRN-01</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Café Grano Entero 1kg</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Café</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            $250.00</td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">remove_circle</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            ACC-TZA-05</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Taza de Cerámica Blanca</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Accesorios</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            $120.00</td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">remove_circle</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            PST-CHC-12</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Pastel de Chocolate</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Repostería</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            $45.00</td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">remove_circle</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="mt-8">
+            <div class="flex flex-wrap items-center justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-bold text-[#111418] dark:text-white">Gestionar Terminales</h2>
+                    <p class="mt-1 text-sm text-[#617589] dark:text-gray-400">Lista de terminales asociadas a este punto
+                        de venta.</p>
+                </div>
+                <button
+                    class="flex h-10 min-w-[84px] cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg bg-primary px-4 text-sm font-bold text-white shadow-sm hover:bg-primary/90">
+                    <span class="material-symbols-outlined text-lg">add_circle</span>
+                    <span class="truncate">Añadir Terminal</span>
+                </button>
+            </div>
+            <div class="relative mt-4">
+                <span
+                    class="material-symbols-outlined pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
+                <input
+                    class="w-full rounded-lg border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm focus:border-primary focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:focus:border-primary"
+                    placeholder="Buscar terminal por ID, nombre o modelo..." type="text" />
+            </div>
+            <div class="mt-4 flow-root">
+                <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                        <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800">
+                            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+                                <thead class="bg-gray-50 dark:bg-gray-900">
+                                    <tr>
+                                        <th class="px-6 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">ID Terminal</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Alias</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Modelo</th>
+                                        <th class="px-3 py-3.5 text-left text-xs font-semibold text-gray-600 dark:text-gray-300"
+                                            scope="col">Estado</th>
+                                        <th class="relative py-3.5 pl-3 pr-4 sm:pr-6" scope="col"><span
+                                                class="sr-only">Acciones</span></th>
+                                    </tr>
+                                </thead>
+                                <tbody
+                                    class="divide-y divide-gray-200 bg-white dark:divide-gray-800 dark:bg-gray-900/50">
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            TERM-01A</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Caja Principal</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Verifone VX520</td>
+                                        <td class="whitespace-nowrap px-3 py-4 text-sm">
+                                            <span
+                                                class="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200">Online</span>
+                                        </td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary"><span
+                                                        class="material-symbols-outlined text-xl">edit</span></button>
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">delete</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            TERM-02B</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Mostrador</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Ingenico ICT250</td>
+                                        <td class="whitespace-nowrap px-3 py-4 text-sm">
+                                            <span
+                                                class="inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900 dark:text-red-200">Offline</span>
+                                        </td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary"><span
+                                                        class="material-symbols-outlined text-xl">edit</span></button>
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">delete</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td
+                                            class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 dark:text-gray-200">
+                                            TERM-03C</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Autoservicio</td>
+                                        <td
+                                            class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                            Verifone VX520</td>
+                                        <td class="whitespace-nowrap px-3 py-4 text-sm">
+                                            <span
+                                                class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Inactiva</span>
+                                        </td>
+                                        <td
+                                            class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
+                                            <div class="flex items-center justify-end gap-2">
+                                                <button
+                                                    class="text-gray-500 hover:text-primary dark:text-gray-400 dark:hover:text-primary"><span
+                                                        class="material-symbols-outlined text-xl">edit</span></button>
+                                                <button
+                                                    class="text-gray-500 hover:text-red-600 dark:text-gray-400 dark:hover:text-red-500"><span
+                                                        class="material-symbols-outlined text-xl">delete</span></button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
\ No newline at end of file
diff --git a/src/modules/stores/services/storesServices.ts b/src/modules/stores/services/storesServices.ts
new file mode 100644
index 0000000..624d8fa
--- /dev/null
+++ b/src/modules/stores/services/storesServices.ts
@@ -0,0 +1,106 @@
+
+
+import api from '../../../services/api';
+import type { StoreResponse, CreateStoreData, UpdateStoreData, SingleStoreResponse } from '../types/store';
+
+export const storesService = {
+    /**
+     * Get all stores/points of sale with pagination
+     * @param page - Page number (default: 1)
+     * @param perPage - Items per page (default: 20)
+     */
+    async getStores(page: number = 1, perPage: number = 20) {
+        try {
+            const response = await api.get<StoreResponse>('/api/stores', {
+                params: {
+                    page,
+                    per_page: perPage
+                }
+            });
+            console.log('📦 Stores response:', response);
+            return response;
+        } catch (error) {
+            console.error('❌ Error fetching stores:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Get a single store by ID
+     * @param id - Store ID
+     */
+    async getStoreById(id: number) {
+        try {
+            const response = await api.get<SingleStoreResponse>(`/api/stores/${id}`);
+            console.log('📦 Store detail:', response);
+            return response;
+        } catch (error) {
+            console.error('❌ Error fetching store:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Create a new store/point of sale
+     * @param data - Store data
+     */
+    async createStore(data: CreateStoreData) {
+        try {
+            const response = await api.post<SingleStoreResponse>('/api/stores', data);
+            console.log('✅ Store created:', response);
+            return response;
+        } catch (error) {
+            console.error('❌ Error creating store:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Update an existing store
+     * @param id - Store ID
+     * @param data - Updated store data
+     */
+    async updateStore(id: number, data: UpdateStoreData) {
+        try {
+            const response = await api.put<SingleStoreResponse>(`/api/stores/${id}`, data);
+            console.log('✅ Store updated:', response);
+            return response;
+        } catch (error) {
+            console.error('❌ Error updating store:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Delete a store (soft delete)
+     * @param id - Store ID
+     */
+    async deleteStore(id: number) {
+        try {
+            const response = await api.delete(`/api/stores/${id}`);
+            console.log('✅ Store deleted:', response);
+            return response;
+        } catch (error) {
+            console.error('❌ Error deleting store:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Toggle store active status
+     * @param id - Store ID
+     * @param isActive - New active status
+     */
+    async toggleStoreStatus(id: number, isActive: boolean) {
+        try {
+            const response = await api.put<SingleStoreResponse>(`/api/stores/${id}`, {
+                is_active: isActive
+            });
+            console.log('✅ Store status toggled:', response);
+            return response;
+        } catch (error) {
+            console.error('❌ Error toggling store status:', error);
+            throw error;
+        }
+    }
+};
diff --git a/src/modules/stores/services/terminalServices.ts b/src/modules/stores/services/terminalServices.ts
new file mode 100644
index 0000000..82a5c31
--- /dev/null
+++ b/src/modules/stores/services/terminalServices.ts
@@ -0,0 +1,3 @@
+export const terminalServices = {
+    
+};
\ No newline at end of file
diff --git a/src/modules/stores/types/store.d.ts b/src/modules/stores/types/store.d.ts
new file mode 100644
index 0000000..bd80a73
--- /dev/null
+++ b/src/modules/stores/types/store.d.ts
@@ -0,0 +1,64 @@
+/**
+ * Store/Point of Sale Type Definitions
+ */
+
+export interface Store {
+    id: number;
+    name: string;
+    location: string;
+    is_active: boolean;
+    phone?: string;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+}
+
+export interface CreateStoreData {
+    name: string;
+    location: string;
+    is_active?: boolean;
+}
+
+export interface UpdateStoreData {
+    name?: string;
+    location?: string;
+    is_active?: boolean;
+}
+
+export interface StorePagination {
+    current_page: number;
+    data: Store[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: Array<{
+        url: string | null;
+        label: string;
+        active: boolean;
+    }>;
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+export interface StoreData {
+    points_of_sale: StorePagination;
+}
+
+export interface StoreResponse {
+    status: string;
+    data: StoreData;
+}
+
+export interface SingleStoreData {
+    point_of_sale: Store;
+}
+
+export interface SingleStoreResponse {
+    status: string;
+    data: SingleStoreData;
+}
diff --git a/src/modules/users/components/RoleForm.vue b/src/modules/users/components/RoleForm.vue
new file mode 100644
index 0000000..a644e4c
--- /dev/null
+++ b/src/modules/users/components/RoleForm.vue
@@ -0,0 +1,365 @@
+
+<template>
+  <div>
+    <Toast />
+    <!-- Encabezado principal -->
+    <div class="mb-8">
+      <h1 class="text-2xl md:text-3xl font-black text-slate-900 dark:text-white mb-1">Gestión de Roles y Permisos</h1>
+      <p class="text-base text-slate-500 dark:text-slate-400">Asigna permisos específicos a cada rol de usuario.</p>
+    </div>
+
+    <!-- Action Bar -->
+    <div class="sticky top-20 z-10 flex flex-wrap items-center justify-between gap-4 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md p-4 mb-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
+      <div class="flex-1 min-w-[200px]">
+        <p class="text-lg font-bold text-slate-900 dark:text-white">Permisos para <span class="text-primary">{{ activeRoleName }}</span></p>
+        <p class="text-sm text-slate-500 dark:text-slate-400">
+          {{ getPermissionStats().enabled }} de {{ getPermissionStats().total }} permisos seleccionados
+          <span v-if="hasUnsavedChanges" class="text-amber-600 dark:text-amber-400 font-medium"> • Cambios sin guardar</span>
+        </p>
+      </div>
+      <div class="flex items-center gap-3">
+        <Button 
+          label="Cancelar" 
+          class="min-w-[84px]" 
+          outlined 
+          :disabled="saving" 
+          @click="onCancel" 
+        />
+        <Button 
+          :label="saving ? 'Guardando...' : 'Guardar Cambios'" 
+          :icon="saving ? 'pi pi-spin pi-spinner' : ''" 
+          class="min-w-[84px] px-5" 
+          :disabled="saving || !hasUnsavedChanges"
+          @click="onSave" 
+        />
+      </div>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <div class="text-center">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
+        <p class="text-slate-500 dark:text-slate-400">Cargando permisos...</p>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="modules.length === 0" class="text-center py-12">
+      <p class="text-slate-500 dark:text-slate-400">No se encontraron tipos de permisos</p>
+    </div>
+
+    <!-- Permissions Content -->
+    <div v-else class="space-y-6">
+      <div v-for="module in modules" :key="module.id" class="bg-white dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-slate-800">
+        <div class="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-800">
+          <h4 class="text-base font-bold text-slate-800 dark:text-slate-200">{{ module.label }}</h4>
+          <Button 
+            :label="areAllSelected(module) ? 'DESELECCIONAR TODO' : 'SELECCIONAR TODO'" 
+            text 
+            :class="areAllSelected(module) ? 'text-xs font-bold text-primary' : 'text-xs font-bold'" 
+            @click="toggleAllPermissions(module)" 
+          />
+        </div>
+        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          <div v-for="perm in module.permissions" :key="perm.id" class="flex items-center justify-between bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg">
+            <p class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ perm.label }}</p>
+            <InputSwitch 
+              :modelValue="rolePermissions[perm.id] || false" 
+              @update:modelValue="(value: boolean) => rolePermissions[perm.id] = value" 
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import Button from 'primevue/button';
+import InputSwitch from 'primevue/inputswitch';
+import Toast from 'primevue/toast';
+import { useToast } from 'primevue/usetoast';
+import { permissionsService } from '../services/permissionsService';
+import type { PermissionType } from '../types/permissions';
+import type { Role } from '../types/role';
+
+const toast = useToast();
+const route = useRoute();
+const router = useRouter();
+
+// State management
+const loading = ref(false);
+const saving = ref(false);
+const permissionTypes = ref<PermissionType[]>([]);
+const rolePermissions = ref<{ [key: number]: boolean }>({});
+const currentRole = ref<Role | null>(null);
+const originalPermissions = ref<{ [key: number]: boolean }>({});
+
+// Props para recibir el rol desde el componente padre (opcional, también funciona con route params)
+interface Props {
+  roleId?: number;
+  roleName?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  roleId: undefined,
+  roleName: 'Rol sin nombre'
+});
+
+// Obtener roleId desde props o route params
+const currentRoleId = computed(() => {
+  return props.roleId || (route.params.id ? Number(route.params.id) : undefined);
+});
+
+const activeRoleName = computed(() => {
+  if (currentRole.value) {
+    return currentRole.value.description || currentRole.value.name;
+  }
+  return props.roleName;
+});
+
+// Detectar si hay cambios sin guardar
+const hasUnsavedChanges = computed(() => {
+  return JSON.stringify(rolePermissions.value) !== JSON.stringify(originalPermissions.value);
+});
+
+// Computed para los módulos con permisos habilitados/deshabilitados
+const modules = computed(() => {
+  return permissionTypes.value.map(permissionType => ({
+    id: permissionType.id,
+    name: permissionType.name.toLowerCase().replace(/\s+/g, '_'),
+    label: `Módulo de ${permissionType.name}`,
+    permissions: permissionType.permissions.map(permission => ({
+      id: permission.id,
+      key: permission.name,
+      label: permission.description || permission.name,
+      // Remover la propiedad enabled ya que usamos rolePermissions directamente en el template
+    }))
+  }));
+});
+
+// Lifecycle hooks
+onMounted(async () => {
+  await loadInitialData();
+});
+
+// Methods
+async function loadInitialData() {
+  await Promise.all([
+    loadPermissionTypes(),
+    currentRoleId.value ? loadRoleData(currentRoleId.value) : Promise.resolve()
+  ]);
+}
+
+async function loadRoleData(roleId: number) {
+  try {
+    console.log('Cargando datos del rol:', roleId);
+    // Aquí podrías llamar a un endpoint para obtener los datos del rol si fuera necesario
+    // Por ahora, solo simulamos que tenemos el rol
+    currentRole.value = {
+      id: roleId,
+      name: `Rol ${roleId}`,
+      description: `Rol ${roleId}`,
+      guard_name: 'api',
+      created_at: '',
+      updated_at: ''
+    };
+  } catch (error) {
+    console.error('Error al cargar datos del rol:', error);
+  }
+}
+
+async function loadPermissionTypes() {
+  try {
+    loading.value = true;
+    const response = await permissionsService.getAllPermissionTypes();
+    
+    if (response.data?.status === 'success') {
+      permissionTypes.value = response.data.data.models;
+      
+      // Inicializar todos los permisos como deshabilitados por defecto
+      permissionTypes.value.forEach(permissionType => {
+        permissionType.permissions.forEach(permission => {
+          rolePermissions.value[permission.id] = false;
+        });
+      });
+      
+      // Si estamos editando un rol existente, cargar sus permisos específicos
+      console.log('Props roleId:', props.roleId, 'Route params id:', route.params.id, 'Computed currentRoleId:', currentRoleId.value);
+      if (currentRoleId.value) {
+        await loadRolePermissions(currentRoleId.value);
+      } else {
+        console.log('No se cargaron permisos específicos porque roleId no está definido');
+      }
+      
+      console.log('Tipos de permisos cargados. Total de permisos disponibles:', 
+        permissionTypes.value.reduce((total, type) => total + type.permissions.length, 0));
+    } else {
+      throw new Error('Respuesta inválida de la API');
+    }
+  } catch (error) {
+    console.error('Error al cargar tipos de permisos:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'No se pudieron cargar los permisos del sistema',
+      life: 3000
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadRolePermissions(roleId: number) {
+  try {
+    console.log('Cargando permisos específicos del rol:', roleId);
+    const response = await permissionsService.getRolePermissions(roleId);
+    
+    if (response.data?.status === 'success') {
+      const roleSpecificPermissions = response.data.data.permissions;
+      
+      // Crear un Set con los IDs de permisos que tiene el rol para búsqueda rápida
+      const rolePermissionIds = new Set(roleSpecificPermissions.map(perm => perm.id));
+      
+      // Actualizar el estado de rolePermissions basado en la comparación
+      permissionTypes.value.forEach(permissionType => {
+        permissionType.permissions.forEach(permission => {
+          // Si el permiso está en los permisos del rol, marcarlo como habilitado
+          const isEnabled = rolePermissionIds.has(permission.id);
+          rolePermissions.value[permission.id] = isEnabled;
+          
+          if (isEnabled) {
+            console.log(`Permiso habilitado: ${permission.name} (ID: ${permission.id})`);
+          }
+        });
+      });
+      
+      console.log('Permisos del rol cargados y comparados. Total permisos activos:', rolePermissionIds.size);
+      console.log('Estado actual de rolePermissions:', JSON.stringify(rolePermissions.value, null, 2));
+      
+      // Guardar el estado original para detectar cambios
+      originalPermissions.value = { ...rolePermissions.value };
+    }
+  } catch (error) {
+    console.error('Error al cargar permisos del rol:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: `No se pudieron cargar los permisos del rol`,
+      life: 3000
+    });
+  }
+}
+
+function onCancel() {
+  console.log('Cancelando edición de permisos');
+  
+  // Si hay cambios sin guardar, mostrar advertencia
+  if (hasUnsavedChanges.value) {
+    // Podrías agregar un ConfirmDialog aquí para confirmar la cancelación
+    console.log('Hay cambios sin guardar, pero procediendo con cancelación');
+    
+    toast.add({
+      severity: 'warn',
+      summary: 'Cambios Descartados',
+      detail: 'Los cambios no guardados se han descartado',
+      life: 3000
+    });
+  }
+  
+  // Volver a la página de roles
+  router.push({ name: 'RoleIndex' });
+}
+
+async function onSave() {
+  if (!currentRoleId.value) {
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: 'No se pudo identificar el rol a actualizar',
+      life: 3000
+    });
+    return;
+  }
+
+  try {
+    saving.value = true;
+    
+    // Obtener los IDs de permisos habilitados
+    const enabledPermissions = Object.entries(rolePermissions.value)
+      .filter(([, enabled]) => enabled)
+      .map(([permissionId]) => parseInt(permissionId));
+    
+    console.log('Guardando permisos para el rol:', currentRoleId.value, 'Permisos:', enabledPermissions);
+    
+    // Llamar al servicio para actualizar permisos
+    const response = await permissionsService.updateRolePermissions(currentRoleId.value, {
+      permissions: enabledPermissions
+    });
+    
+    if (response.data?.status === 'success') {
+      toast.add({
+        severity: 'success',
+        summary: 'Éxito',
+        detail: `Permisos actualizados correctamente. ${enabledPermissions.length} permisos asignados.`,
+        life: 3000
+      });
+      
+      // Actualizar el estado original para reflejar los cambios guardados
+      originalPermissions.value = { ...rolePermissions.value };
+      
+    } else {
+      throw new Error('Respuesta inválida del servidor');
+    }
+    
+  } catch (error: any) {
+    console.error('Error al guardar permisos:', error);
+    
+    let errorMessage = 'No se pudieron guardar los permisos';
+    
+    // Manejar diferentes tipos de errores
+    if (error.response?.data?.message) {
+      errorMessage = error.response.data.message;
+    } else if (error.response?.data?.errors) {
+      // Si hay errores de validación, mostrar el primero
+      const firstError = Object.values(error.response.data.errors)[0];
+      errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
+    } else if (error.message) {
+      errorMessage = error.message;
+    }
+    
+    toast.add({
+      severity: 'error',
+      summary: 'Error al Guardar',
+      detail: errorMessage,
+      life: 5000
+    });
+  } finally {
+    saving.value = false;
+  }
+}
+
+// Computed function to check if all permissions in a module are selected
+function areAllSelected(module: any) {
+  return module.permissions.length > 0 && module.permissions.every((perm: any) => rolePermissions.value[perm.id] === true);
+}
+
+// Toggle function that handles both select all and deselect all
+function toggleAllPermissions(module: any) {
+  const shouldSelectAll = !areAllSelected(module);
+  
+  module.permissions.forEach((perm: any) => {
+    rolePermissions.value[perm.id] = shouldSelectAll;
+  });
+}
+
+// Helper function to get permission statistics
+function getPermissionStats() {
+  const totalPermissions = Object.keys(rolePermissions.value).length;
+  const enabledPermissions = Object.values(rolePermissions.value).filter(Boolean).length;
+  return { total: totalPermissions, enabled: enabledPermissions };
+}
+</script>
diff --git a/src/modules/users/components/RoleIndex.vue b/src/modules/users/components/RoleIndex.vue
new file mode 100644
index 0000000..94d21d4
--- /dev/null
+++ b/src/modules/users/components/RoleIndex.vue
@@ -0,0 +1,403 @@
+
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+        
+        <!-- Confirm Dialog -->
+        <ConfirmDialog />
+
+        <!-- Header -->
+        <div class="flex flex-wrap justify-between gap-4 items-center">
+            <div class="flex min-w-72 flex-col gap-1">
+                <h1 class="text-surface-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    Administración de Roles de Usuario
+                </h1>
+                <p class="text-surface-500 dark:text-surface-400 text-base font-normal leading-normal">
+                    Crea nuevos roles, edita los existentes y gestiona los permisos del sistema.
+                </p>
+            </div>
+            <Button
+                label="Nuevo Rol"
+                icon="pi pi-plus"
+                @click="openCreateDialog"
+                class="min-w-[180px]"
+            />
+        </div>
+
+        <!-- Table Card -->
+        <Card class="shadow-sm">
+            <template #content>
+                <!-- Search and Filters -->
+                <div class="flex flex-col md:flex-row justify-between gap-4 mb-4">
+                    <div class="flex-1">
+                        <IconField iconPosition="left">
+                            <InputIcon class="pi pi-search" />
+                            <InputText
+                                v-model="searchQuery"
+                                placeholder="Buscar roles por nombre..."
+                                class="w-full"
+                            />
+                        </IconField>
+                    </div>
+                    <div class="flex gap-2 flex-wrap">
+                        <Dropdown
+                            v-model="selectedStatus"
+                            :options="statusOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Estado: Todos"
+                            class="w-40"
+                        />
+                        <Dropdown
+                            v-model="selectedType"
+                            :options="typeOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Tipo: Todos"
+                            class="w-40"
+                        />
+                        <Button
+                            label="Limpiar"
+                            icon="pi pi-times"
+                            outlined
+                            @click="clearFilters"
+                        />
+                    </div>
+                </div>
+
+                <!-- Table -->
+                <DataTable
+                    :value="roles"
+                    :rows="rowsPerPage"
+                    :totalRecords="totalRecords"
+                    :loading="loading"
+                    paginator
+                    lazy
+                    :rowsPerPageOptions="[5, 10, 20, 50]"
+                    @page="onPage"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                    currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} resultados"
+                >
+                    <Column field="name" header="Nombre del Rol" sortable>
+                        <template #body="slotProps">
+                            <span class="font-medium">{{ slotProps.data.name }}</span>
+                        </template>
+                    </Column>
+                    <Column field="description" header="Descripción" sortable>
+                        <template #body="slotProps">
+                            <span class="text-slate-600 dark:text-slate-400">{{ slotProps.data.description }}</span>
+                        </template>
+                    </Column>
+                    <Column field="created_at" header="Fecha de Creación">
+                        <template #body="slotProps">
+                            {{ formatDate(slotProps.data.created_at) }}
+                        </template>
+                    </Column>
+                    <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right" style="min-width: 160px">
+                        <template #body="slotProps">
+                            <div class="flex justify-end gap-2">
+                                <Button icon="pi pi-shield" size="small" text @click="handlePermissions(slotProps.data)" v-tooltip="'Gestionar Permisos'" />
+                                <Button icon="pi pi-pencil" size="small" text @click="handleEdit(slotProps.data)" v-tooltip="'Editar'" />
+                                <Button icon="pi pi-trash" size="small" text severity="danger" @click="handleDelete(slotProps.data)" v-tooltip="'Eliminar'" />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+
+        <!-- Role Form Modal -->
+        <Dialog
+            v-model:visible="showDialog"
+            modal
+            :header="isEditing ? 'Editar Rol' : 'Crear Nuevo Rol'"
+            :style="{ width: '90vw', maxWidth: '500px' }"
+            :contentStyle="{ padding: '1.5rem' }"
+        >
+            <form @submit.prevent="handleSaveRole" class="space-y-4">
+                <!-- Role Description -->
+                <div class="flex flex-col gap-2">
+                    <label for="modal-role-description" class="text-sm font-medium text-slate-700 dark:text-slate-300">
+                        Descripción del Rol *
+                    </label>
+                    <InputText
+                        id="modal-role-description"
+                        v-model="formData.description"
+                        :invalid="showError('description')"
+                        placeholder="Ej: Administrador de almacén"
+                        class="w-full"
+                    />
+                    <small v-if="showError('description')" class="text-red-500">
+                        {{ getErrorMessage('description') }}
+                    </small>
+                </div>
+
+                <!-- Actions -->
+                <div class="flex items-center justify-end gap-3 pt-4">
+                    <Button
+                        label="Cancelar"
+                        outlined
+                        @click="handleCancelForm"
+                        :disabled="modalLoading"
+                    />
+                    <Button
+                        :label="isEditing ? 'Actualizar' : 'Crear Rol'"
+                        type="submit"
+                        :loading="modalLoading"
+                        :disabled="!isFormValid && modalTouched"
+                    />
+                </div>
+            </form>
+        </Dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Card from 'primevue/card';
+import Dropdown from 'primevue/dropdown';
+import Toast from 'primevue/toast';
+import Dialog from 'primevue/dialog';
+import ConfirmDialog from 'primevue/confirmdialog';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import { roleService } from '../services/roleService';
+import type { Role, CreateRoleData } from '../types/role';
+
+const toast = useToast();
+const confirm = useConfirm();
+const router = useRouter();
+
+const roles = ref<Role[]>([]);
+const searchQuery = ref('');
+const selectedStatus = ref('all');
+const selectedType = ref('all');
+const loading = ref(false);
+const totalRecords = ref(0);
+const rowsPerPage = ref(10);
+const currentPage = ref(1);
+
+// Modal states
+const showDialog = ref(false);
+const isEditing = ref(false);
+const selectedRole = ref<Role | null>(null);
+const modalLoading = ref(false);
+const modalTouched = ref(false);
+const fieldErrors = ref<Record<string, string[]>>({});
+
+// Form data
+const formData = ref<CreateRoleData>({
+  description: ''
+});
+
+const isFormValid = computed(() => 
+  formData.value.description.trim() !== ''
+);
+
+const statusOptions = [
+    { label: 'Todos', value: 'all' },
+    { label: 'Activo', value: 'active' },
+    { label: 'Inactivo', value: 'inactive' },
+];
+const typeOptions = [
+    { label: 'Todos', value: 'all' },
+    { label: 'Sistema', value: 'system' },
+    { label: 'Personalizado', value: 'custom' },
+];
+
+function clearFilters() {
+    searchQuery.value = '';
+    selectedStatus.value = 'all';
+    selectedType.value = 'all';
+}
+
+function formatDate(date: string) {
+    return new Date(date).toLocaleDateString('es-MX');
+}
+
+// Fetch roles from API
+const fetchRoles = async () => {
+    loading.value = true;
+    try {
+        const response = await roleService.getAllRoles(currentPage.value, rowsPerPage.value);
+        const data = response.data.data.models;
+        roles.value = data.data;
+        totalRecords.value = data.total;
+        currentPage.value = data.current_page;
+    } catch (error) {
+        console.error('Error fetching roles:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar los roles',
+            life: 3000
+        });
+    } finally {
+        loading.value = false;
+    }
+};
+
+function onPage(event: any) {
+    currentPage.value = event.page + 1;
+    rowsPerPage.value = event.rows;
+    fetchRoles();
+}
+
+function openCreateDialog() {
+    selectedRole.value = null;
+    isEditing.value = false;
+    formData.value = { description: '' };
+    modalTouched.value = false;
+    fieldErrors.value = {};
+    showDialog.value = true;
+}
+
+function handlePermissions(role: Role) {
+    router.push({ name: 'RolePermissions', params: { id: role.id } });
+}
+
+function handleEdit(role: Role) {
+    selectedRole.value = role;
+    isEditing.value = true;
+    formData.value = { description: role.description };
+    modalTouched.value = false;
+    fieldErrors.value = {};
+    showDialog.value = true;
+}
+
+function handleCancelForm() {
+    showDialog.value = false;
+    selectedRole.value = null;
+    formData.value = { description: '' };
+    modalTouched.value = false;
+    fieldErrors.value = {};
+}
+
+function showError(field: keyof CreateRoleData): boolean {
+    // Mostrar error si hay errores del servidor para este campo
+    if (fieldErrors.value[field] && fieldErrors.value[field].length > 0) {
+        return true;
+    }
+    // Mostrar error de validación local solo después del primer intento
+    if (!modalTouched.value) return false;
+    return formData.value[field].trim() === '';
+}
+
+function getErrorMessage(field: keyof CreateRoleData): string {
+    // Priorizar errores del servidor
+    if (fieldErrors.value[field] && fieldErrors.value[field].length > 0) {
+        return fieldErrors.value[field][0] || '';
+    }
+    // Mensaje de validación local
+    if (modalTouched.value && formData.value[field].trim() === '') {
+        return 'La descripción del rol es obligatoria';
+    }
+    return '';
+}
+
+async function handleSaveRole() {
+    modalTouched.value = true;
+    fieldErrors.value = {}; // Limpiar errores anteriores
+    
+    if (!isFormValid.value) {
+        return;
+    }
+
+    modalLoading.value = true;
+    
+    try {
+        if (isEditing.value && selectedRole.value) {
+            await roleService.updateRole(selectedRole.value.id, formData.value);
+            toast.add({
+                severity: 'success',
+                summary: 'Rol Actualizado',
+                detail: `El rol "${formData.value.description}" ha sido actualizado exitosamente.`,
+                life: 3000
+            });
+        } else {
+            await roleService.createRole(formData.value);
+            toast.add({
+                severity: 'success',
+                summary: 'Rol Creado',
+                detail: `El rol "${formData.value.description}" ha sido creado exitosamente.`,
+                life: 3000
+            });
+        }
+        
+        await fetchRoles(); // Recargar la tabla
+        handleCancelForm();
+        
+    } catch (error: any) {
+        console.error('Error saving role:', error);
+        
+        // Manejar errores específicos del backend
+        if (error.response && error.response.data && error.response.data.errors) {
+            fieldErrors.value = error.response.data.errors;
+            toast.add({
+                severity: 'error',
+                summary: 'Error de Validación',
+                detail: error.response.data.message || 'Revisa los campos marcados en rojo.',
+                life: 4000
+            });
+        } else {
+            toast.add({
+                severity: 'error',
+                summary: 'Error',
+                detail: 'No se pudo guardar el rol. Inténtalo de nuevo.',
+                life: 3000
+            });
+        }
+    } finally {
+        modalLoading.value = false;
+    }
+}
+
+function handleDelete(role: Role) {
+    confirm.require({
+        message: `¿Estás seguro de eliminar el rol "${role.description}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await roleService.deleteRole(role.id);
+                toast.add({
+                    severity: 'success',
+                    summary: 'Rol Eliminado',
+                    detail: `El rol "${role.description}" ha sido eliminado exitosamente.`,
+                    life: 3000
+                });
+                await fetchRoles(); // Recargar la tabla
+            } catch (error) {
+                console.error('Error deleting role:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error',
+                    detail: 'No se pudo eliminar el rol. Inténtalo de nuevo.',
+                    life: 3000
+                });
+            }
+        }
+    });
+}
+
+// Load roles on component mount
+onMounted(() => {
+    fetchRoles();
+});
+</script>
\ No newline at end of file
diff --git a/src/modules/users/components/UserIndex.vue b/src/modules/users/components/UserIndex.vue
new file mode 100644
index 0000000..bc7633a
--- /dev/null
+++ b/src/modules/users/components/UserIndex.vue
@@ -0,0 +1,299 @@
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Header -->
+        <div class="flex flex-wrap justify-between gap-4 items-center">
+            <div class="flex min-w-72 flex-col gap-1">
+                <h1 class="text-surface-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    Gestión de Usuarios
+                </h1>
+                <p class="text-surface-500 dark:text-surface-400 text-base font-normal leading-normal">
+                    Administra usuarios, asigna roles y gestiona el acceso al sistema.
+                </p>
+            </div>
+            <Button
+                label="Añadir Usuario"
+                icon="pi pi-plus"
+                @click="createUser"
+                class="min-w-[180px]"
+            />
+        </div>
+
+        <!-- Table Card -->
+        <Card class="shadow-sm">
+            <template #content>
+                <!-- Search and Filters -->
+                <div class="flex flex-col md:flex-row justify-between gap-4 mb-4">
+                    <div class="flex-1">
+                        <IconField iconPosition="left">
+                            <InputIcon class="pi pi-search" />
+                            <InputText
+                                v-model="searchQuery"
+                                placeholder="Buscar usuario..."
+                                class="w-full"
+                            />
+                        </IconField>
+                    </div>
+                    <div class="flex gap-2 flex-wrap">
+                        <Dropdown
+                            v-model="selectedRole"
+                            :options="roleOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Rol: Todos"
+                            class="w-40"
+                        />
+                        <Dropdown
+                            v-model="selectedStatus"
+                            :options="statusOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Estado: Todos"
+                            class="w-40"
+                        />
+                        <Button
+                            label="Limpiar"
+                            icon="pi pi-times"
+                            outlined
+                            @click="clearFilters"
+                        />
+                    </div>
+                </div>
+
+                <!-- Data Table -->
+                <DataTable
+                    :value="users"
+                    :loading="loading"
+                    :paginator="true"
+                    :rows="10"
+                    :rowsPerPageOptions="[5, 10, 20]"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    selectionMode="multiple"
+                    v-model:selection="selectedUsers"
+                    dataKey="id"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                    currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} resultados"
+                >
+                    <!-- Selection Column -->
+                    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+
+                    <!-- User Column -->
+                    <Column field="user" header="Usuario" sortable>
+                        <template #body="slotProps">
+                            <div class="flex items-center gap-3">
+                                <Avatar 
+                                    :image="slotProps.data.avatar" 
+                                    :label="slotProps.data.name.charAt(0)" 
+                                    size="large" 
+                                    shape="circle" 
+                                />
+                                <div>
+                                    <div class="font-medium text-surface-900 dark:text-white">{{ slotProps.data.name }}</div>
+                                    <div class="text-sm text-surface-500 dark:text-surface-400">{{ slotProps.data.email }}</div>
+                                </div>
+                            </div>
+                        </template>
+                    </Column>
+
+                    <!-- Role Column -->
+                    <Column field="role" header="Rol" sortable>
+                        <template #body="slotProps">
+                            <Tag 
+                                :value="slotProps.data.role" 
+                                :severity="getRoleSeverity(slotProps.data.role)"
+                            />
+                        </template>
+                    </Column>
+
+                    <!-- Store Column -->
+                    <Column field="store" header="Punto de Venta" sortable></Column>
+
+                    <!-- Status Column -->
+                    <Column field="status" header="Estado" sortable>
+                        <template #body="slotProps">
+                            <Tag 
+                                :value="slotProps.data.status ? 'Activo' : 'Inactivo'" 
+                                :severity="slotProps.data.status ? 'success' : 'danger'"
+                            />
+                        </template>
+                    </Column>
+
+                    <!-- Actions Column -->
+                    <Column header="Acciones" style="width: 8rem">
+                        <template #body="slotProps">
+                            <div class="flex gap-2">
+                                <Button icon="pi pi-pencil" size="small" text @click="editUser(slotProps.data)" v-tooltip="'Editar Usuario'" />
+                                <Button icon="pi pi-trash" size="small" text severity="danger" @click="deleteUser(slotProps.data)" v-tooltip="'Eliminar Usuario'" />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import InputText from 'primevue/inputtext';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import Dropdown from 'primevue/dropdown';
+import Toast from 'primevue/toast';
+import Avatar from 'primevue/avatar';
+import Tag from 'primevue/tag';
+
+const toast = useToast();
+
+// Interface for User
+interface User {
+    id: number;
+    name: string;
+    email: string;
+    role: string;
+    store: string;
+    status: boolean;
+    avatar?: string;
+}
+
+// State management
+const loading = ref(false);
+const users = ref<User[]>([]);
+const selectedUsers = ref<User[]>([]);
+const searchQuery = ref('');
+const selectedRole = ref('all');
+const selectedStatus = ref('all');
+
+// Options for filters
+const roleOptions = [
+    { label: 'Todos', value: 'all' },
+    { label: 'Administrador', value: 'admin' },
+    { label: 'Gerente', value: 'manager' },
+    { label: 'Cajero', value: 'cashier' },
+    { label: 'Bodeguero', value: 'warehouse' }
+];
+
+const statusOptions = [
+    { label: 'Todos', value: 'all' },
+    { label: 'Activo', value: true },
+    { label: 'Inactivo', value: false }
+];
+
+// Mock data - Replace with real API call
+const mockUsers: User[] = [
+    {
+        id: 1,
+        name: 'Ana García',
+        email: 'ana.garcia@example.com',
+        role: 'Administrador',
+        store: 'Tienda Principal',
+        status: true,
+        avatar: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAAUt9oWSPuyd50GQnJ5fd2b0p63cP-W-fsfYDxFBygy6_EfzdSvJhKlginsHW4OE8NV2DhDHMtBWKUakrC_3jjp_CAEAsKYUzU9AJRMluAd62CcEuNH-9H8bPVNW2QJbW8qJk5_2MiSDtMA1sHvMl3DdExiUw03E2PdM5TA2NJtfdTdz110QQu80ISND_LqkzBoEBIA6qiljOmgvseqDeT2lQZpqFS0qP1uQTiUhHyheUwJo3Btl7RSXBNI-xO-1mURbDsxdLd1qA'
+    },
+    {
+        id: 2,
+        name: 'Carlos Rodríguez',
+        email: 'carlos.r@example.com',
+        role: 'Gerente',
+        store: 'Sucursal Centro',
+        status: true,
+        avatar: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAb5FcsyMz_xnPvPkcz0OkaQWVnxCOirv1s1RR-nRodSKZOUTCDtGm5fEZl2buVNboeobU9uaG7Aon_Bht1l2Q2G2i79oqG4EoCR7MfPogGMSkdOBmEDkxASI5e3DnZ9Xvh9FALi_-elb_in_epquYWCECNvgE3Wcj0qIa98dPSk1pfwHCBZ7V3fRPT8vinqZAv-wBXraWFV8q8eNszE4j5103w8UNgxnOR2taESORJ1-goutNgK-GSkREIMVN74DejqJuW3XJVk40'
+    },
+    {
+        id: 3,
+        name: 'Laura Martínez',
+        email: 'laura.m@example.com',
+        role: 'Cajero',
+        store: 'Tienda Principal',
+        status: false,
+        avatar: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCRYXLv_wMrIojd7wq2GxOeFsx_EN4Y0ncQB6Mzr8fy_48eE8jUZCauQHC6x0QgDlY4mDgFq1MGTE54EBRHlHuUBN8b6tYGC-nLOGcn2mV9Pm1W53YA_aCMQWdNCX_x4ySQAQdKgH-w6eEti7Z3mYwkSF-6eSxNcOpiT1xxk8XOiesSfMX5zEAxgEu39MVICmKW3G1O75BnCkb1tquT110W7CLamK69PokGMCYVujglXI0kPCuS2WblMTPtEXCBSZUhrCpFuwNTpDE'
+    },
+    {
+        id: 4,
+        name: 'Javier López',
+        email: 'javier.l@example.com',
+        role: 'Cajero',
+        store: 'Sucursal Norte',
+        status: true,
+        avatar: 'https://lh3.googleusercontent.com/aida-public/AB6AXuCGXNBCLaQbJ6aBRqlj7z-XYsBmZLDCh81kFIw7QzG0ysu6lOzLtal09wr5txyZrb01R50aM84-1O7OwwtAymfF9-HWydjP1VkBrsPxy__3ftAq4UeUwRFfZBMZi1yKFWdDUFux2hGhMEqjCu3GX8UOUNIn_N1yy7YIspfNLUQYEglElZDYWgLUtG2UVIJ-fhD6iE2992nwamjzeJindFclFPq2vlRB7jj-1aJBNT35SHo4glcLHAxYWdgLACcbo6lCIkNwdweX9q8'
+    }
+];
+
+// Helper functions
+function getRoleSeverity(role: string) {
+    switch (role) {
+        case 'Administrador': return 'danger';
+        case 'Gerente': return 'warning';
+        case 'Cajero': return 'info';
+        case 'Bodeguero': return 'success';
+        default: return 'secondary';
+    }
+}
+
+function clearFilters() {
+    searchQuery.value = '';
+    selectedRole.value = 'all';
+    selectedStatus.value = 'all';
+}
+
+function createUser() {
+    // TODO: Navigate to user creation page
+    toast.add({
+        severity: 'info',
+        summary: 'Próximamente',
+        detail: 'Funcionalidad de creación de usuarios en desarrollo',
+        life: 3000
+    });
+}
+
+function editUser(user: User) {
+    // TODO: Navigate to user edit page
+    toast.add({
+        severity: 'info',
+        summary: 'Editar Usuario',
+        detail: `Editando usuario: ${user.name}`,
+        life: 3000
+    });
+}
+
+function deleteUser(user: User) {
+    // TODO: Implement delete functionality
+    toast.add({
+        severity: 'warn',
+        summary: 'Eliminar Usuario',
+        detail: `¿Eliminar usuario: ${user.name}?`,
+        life: 3000
+    });
+}
+
+// Lifecycle
+onMounted(() => {
+    loadUsers();
+});
+
+async function loadUsers() {
+    try {
+        loading.value = true;
+        // Simulate API call
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        users.value = mockUsers;
+    } catch (error) {
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar los usuarios',
+            life: 3000
+        });
+    } finally {
+        loading.value = false;
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/modules/users/components/index.html b/src/modules/users/components/index.html
new file mode 100644
index 0000000..01a3f91
--- /dev/null
+++ b/src/modules/users/components/index.html
@@ -0,0 +1,243 @@
+<main class="flex-1 p-6 lg:p-10">
+    <div class="max-w-7xl mx-auto">
+        <!-- PageHeading -->
+        <div class="flex flex-wrap justify-between items-center gap-4 mb-6">
+            <h1 class="text-gray-900 dark:text-white text-3xl font-bold tracking-tight">Gestión de Usuarios</h1>
+        </div>
+        <!-- ToolBar -->
+        <div
+            class="flex flex-col md:flex-row justify-between items-center gap-4 p-4 bg-white dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 mb-6">
+            <div class="flex items-center gap-2 w-full md:w-auto">
+                <div class="relative w-full max-w-xs">
+                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                        <span class="material-symbols-outlined text-gray-400">search</span>
+                    </div>
+                    <input
+                        class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
+                        placeholder="Buscar usuario..." type="text" />
+                </div>
+                <button
+                    class="flex items-center justify-center p-2 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                    <span class="material-symbols-outlined">filter_list</span>
+                </button>
+            </div>
+            <button
+                class="flex w-full md:w-auto items-center justify-center rounded-lg h-10 bg-primary text-white gap-2 text-sm font-bold leading-normal tracking-wide px-4 hover:bg-primary/90 transition-colors">
+                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add</span>
+                <span class="truncate">Añadir Usuario</span>
+            </button>
+        </div>
+        <!-- Table -->
+        <div
+            class="bg-white dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <div class="overflow-x-auto">
+                <table class="w-full text-left">
+                    <thead class="bg-gray-50 dark:bg-gray-800">
+                        <tr class="border-b border-gray-200 dark:border-gray-700">
+                            <th class="px-4 py-3 w-12 text-center">
+                                <input
+                                    class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary bg-transparent dark:bg-gray-900"
+                                    type="checkbox" />
+                            </th>
+                            <th
+                                class="px-4 py-3 text-left text-gray-600 dark:text-gray-300 text-xs font-medium uppercase tracking-wider">
+                                Usuario</th>
+                            <th
+                                class="px-4 py-3 text-left text-gray-600 dark:text-gray-300 text-xs font-medium uppercase tracking-wider">
+                                Rol</th>
+                            <th
+                                class="px-4 py-3 text-left text-gray-600 dark:text-gray-300 text-xs font-medium uppercase tracking-wider">
+                                Punto de Venta</th>
+                            <th
+                                class="px-4 py-3 text-left text-gray-600 dark:text-gray-300 text-xs font-medium uppercase tracking-wider">
+                                Estado</th>
+                            <th
+                                class="px-4 py-3 text-left text-gray-600 dark:text-gray-300 text-xs font-medium uppercase tracking-wider">
+                                Acciones</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="px-4 py-3 text-center">
+                                <input
+                                    class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary bg-transparent dark:bg-gray-900"
+                                    type="checkbox" />
+                            </td>
+                            <td class="px-4 py-3 whitespace-nowrap">
+                                <div class="flex items-center gap-3">
+                                    <div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
+                                        data-alt="Avatar de Ana García"
+                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAAUt9oWSPuyd50GQnJ5fd2b0p63cP-W-fsfYDxFBygy6_EfzdSvJhKlginsHW4OE8NV2DhDHMtBWKUakrC_3jjp_CAEAsKYUzU9AJRMluAd62CcEuNH-9H8bPVNW2QJbW8qJk5_2MiSDtMA1sHvMl3DdExiUw03E2PdM5TA2NJtfdTdz110QQu80ISND_LqkzBoEBIA6qiljOmgvseqDeT2lQZpqFS0qP1uQTiUhHyheUwJo3Btl7RSXBNI-xO-1mURbDsxdLd1qA");'>
+                                    </div>
+                                    <div>
+                                        <div class="text-sm font-medium text-gray-900 dark:text-white">Ana García</div>
+                                        <div class="text-sm text-gray-500 dark:text-gray-400">ana.garcia@example.com
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                                Administrador</td>
+                            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">Tienda
+                                Principal</td>
+                            <td class="px-4 py-3 whitespace-nowrap">
+                                <span
+                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Activo</span>
+                            </td>
+                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
+                                <div class="flex items-center gap-2">
+                                    <button
+                                        class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors"><span
+                                            class="material-symbols-outlined text-xl">edit</span></button>
+                                    <button
+                                        class="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-500 transition-colors"><span
+                                            class="material-symbols-outlined text-xl">delete</span></button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="px-4 py-3 text-center">
+                                <input
+                                    class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary bg-transparent dark:bg-gray-900"
+                                    type="checkbox" />
+                            </td>
+                            <td class="px-4 py-3 whitespace-nowrap">
+                                <div class="flex items-center gap-3">
+                                    <div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
+                                        data-alt="Avatar de Carlos Rodríguez"
+                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAb5FcsyMz_xnPvPkcz0OkaQWVnxCOirv1s1RR-nRodSKZOUTCDtGm5fEZl2buVNboeobU9uaG7Aon_Bht1l2Q2G2i79oqG4EoCR7MfPogGMSkdOBmEDkxASI5e3DnZ9Xvh9FALi_-elb_in_epquYWCECNvgE3Wcj0qIa98dPSk1pfwHCBZ7V3fRPT8vinqZAv-wBXraWFV8q8eNszE4j5103w8UNgxnOR2taESORJ1-goutNgK-GSkREIMVN74DejqJuW3XJVk40");'>
+                                    </div>
+                                    <div>
+                                        <div class="text-sm font-medium text-gray-900 dark:text-white">Carlos Rodríguez
+                                        </div>
+                                        <div class="text-sm text-gray-500 dark:text-gray-400">carlos.r@example.com</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">Gerente
+                            </td>
+                            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">Sucursal
+                                Centro</td>
+                            <td class="px-4 py-3 whitespace-nowrap">
+                                <span
+                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Activo</span>
+                            </td>
+                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
+                                <div class="flex items-center gap-2">
+                                    <button
+                                        class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors"><span
+                                            class="material-symbols-outlined text-xl">edit</span></button>
+                                    <button
+                                        class="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-500 transition-colors"><span
+                                            class="material-symbols-outlined text-xl">delete</span></button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="px-4 py-3 text-center">
+                                <input
+                                    class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary bg-transparent dark:bg-gray-900"
+                                    type="checkbox" />
+                            </td>
+                            <td class="px-4 py-3 whitespace-nowrap">
+                                <div class="flex items-center gap-3">
+                                    <div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
+                                        data-alt="Avatar de Laura Martínez"
+                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCRYXLv_wMrIojd7wq2GxOeFsx_EN4Y0ncQB6Mzr8fy_48eE8jUZCauQHC6x0QgDlY4mDgFq1MGTE54EBRHlHuUBN8b6tYGC-nLOGcn2mV9Pm1W53YA_aCMQWdNCX_x4ySQAQdKgH-w6eEti7Z3mYwkSF-6eSxNcOpiT1xxk8XOiesSfMX5zEAxgEu39MVICmKW3G1O75BnCkb1tquT110W7CLamK69PokGMCYVujglXI0kPCuS2WblMTPtEXCBSZUhrCpFuwNTpDE");'>
+                                    </div>
+                                    <div>
+                                        <div class="text-sm font-medium text-gray-900 dark:text-white">Laura Martínez
+                                        </div>
+                                        <div class="text-sm text-gray-500 dark:text-gray-400">laura.m@example.com</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">Cajero</td>
+                            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">Tienda
+                                Principal</td>
+                            <td class="px-4 py-3 whitespace-nowrap">
+                                <span
+                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">Inactivo</span>
+                            </td>
+                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
+                                <div class="flex items-center gap-2">
+                                    <button
+                                        class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors"><span
+                                            class="material-symbols-outlined text-xl">edit</span></button>
+                                    <button
+                                        class="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-500 transition-colors"><span
+                                            class="material-symbols-outlined text-xl">delete</span></button>
+                                </div>
+                            </td>
+                        </tr>
+                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="px-4 py-3 text-center">
+                                <input
+                                    class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-primary focus:ring-primary bg-transparent dark:bg-gray-900"
+                                    type="checkbox" />
+                            </td>
+                            <td class="px-4 py-3 whitespace-nowrap">
+                                <div class="flex items-center gap-3">
+                                    <div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10"
+                                        data-alt="Avatar de Javier López"
+                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCGXNBCLaQbJ6aBRqlj7z-XYsBmZLDCh81kFIw7QzG0ysu6lOzLtal09wr5txyZrb01R50aM84-1O7OwwtAymfF9-HWydjP1VkBrsPxy__3ftAq4UeUwRFfZBMZi1yKFWdDUFux2hGhMEqjCu3GX8UOUNIn_N1yy7YIspfNLUQYEglElZDYWgLUtG2UVIJ-fhD6iE2992nwamjzeJindFclFPq2vlRB7jj-1aJBNT35SHo4glcLHAxYWdgLACcbo6lCIkNwdweX9q8");'>
+                                    </div>
+                                    <div>
+                                        <div class="text-sm font-medium text-gray-900 dark:text-white">Javier López
+                                        </div>
+                                        <div class="text-sm text-gray-500 dark:text-gray-400">javier.l@example.com</div>
+                                    </div>
+                                </div>
+                            </td>
+                            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">Cajero</td>
+                            <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">Sucursal
+                                Norte</td>
+                            <td class="px-4 py-3 whitespace-nowrap">
+                                <span
+                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Activo</span>
+                            </td>
+                            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
+                                <div class="flex items-center gap-2">
+                                    <button
+                                        class="text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors"><span
+                                            class="material-symbols-outlined text-xl">edit</span></button>
+                                    <button
+                                        class="text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-500 transition-colors"><span
+                                            class="material-symbols-outlined text-xl">delete</span></button>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <!-- Pagination -->
+            <div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 px-4 py-3">
+                <div class="text-sm text-gray-600 dark:text-gray-400">
+                    Mostrando <span class="font-medium text-gray-800 dark:text-white">1</span> a <span
+                        class="font-medium text-gray-800 dark:text-white">4</span> de <span
+                        class="font-medium text-gray-800 dark:text-white">25</span> resultados
+                </div>
+                <div class="flex items-center gap-1">
+                    <a class="flex size-8 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                        href="#">
+                        <span class="material-symbols-outlined text-xl">chevron_left</span>
+                    </a>
+                    <a class="text-sm font-bold leading-normal flex size-8 items-center justify-center text-white rounded-md bg-primary"
+                        href="#">1</a>
+                    <a class="text-sm font-normal leading-normal flex size-8 items-center justify-center text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
+                        href="#">2</a>
+                    <a class="text-sm font-normal leading-normal flex size-8 items-center justify-center text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
+                        href="#">3</a>
+                    <span
+                        class="text-sm font-normal leading-normal flex size-8 items-center justify-center text-gray-500 dark:text-gray-400 rounded-md">...</span>
+                    <a class="text-sm font-normal leading-normal flex size-8 items-center justify-center text-gray-600 dark:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
+                        href="#">10</a>
+                    <a class="flex size-8 items-center justify-center rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                        href="#">
+                        <span class="material-symbols-outlined text-xl">chevron_right</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</main>
\ No newline at end of file
diff --git a/src/modules/users/services/permissionsService.ts b/src/modules/users/services/permissionsService.ts
new file mode 100644
index 0000000..fc423ea
--- /dev/null
+++ b/src/modules/users/services/permissionsService.ts
@@ -0,0 +1,60 @@
+import api from "../../../services/api"
+import type { 
+    PermissionTypesResponse, 
+    RolePermissionsResponse, 
+    UpdateRolePermissionsData, 
+    UpdateRolePermissionsResponse 
+} from '../types/permissions'
+
+export const permissionsService = {
+    /**
+     * Obtiene todos los tipos de permisos con sus permisos asociados
+     * @returns Promise con la respuesta de la API conteniendo los tipos de permisos y permisos
+     */
+    async getAllPermissionTypes() {
+        try {
+            console.log('Obteniendo todos los tipos de permisos...');
+            const response = await api.get<PermissionTypesResponse>('/api/permission-types/all-with-permissions');
+            console.log('Tipos de permisos obtenidos:', response.data);
+            return response;
+        } catch (error) {
+            console.error('Error al obtener tipos de permisos:', error);
+            throw error;
+        }
+    },
+
+    /**
+     * Obtiene los permisos asignados a un rol específico
+     * @param roleId - ID del rol del cual obtener los permisos
+     * @returns Promise con la respuesta de la API conteniendo los permisos del rol
+     */
+    async getRolePermissions(roleId: number) {
+        try {
+            console.log(`Obteniendo permisos del rol ${roleId}...`);
+            const response = await api.get<RolePermissionsResponse>(`/api/admin/roles/${roleId}/permissions`);
+            console.log(`Permisos del rol ${roleId} obtenidos:`, response.data);
+            return response;
+        } catch (error) {
+            console.error(`Error al obtener permisos del rol ${roleId}:`, error);
+            throw error;
+        }
+    },
+
+    /**
+     * Actualiza los permisos asignados a un rol específico
+     * @param roleId - ID del rol al cual asignar los permisos
+     * @param data - Objeto con el array de IDs de permisos a asignar
+     * @returns Promise con la respuesta de la API
+     */
+    async updateRolePermissions(roleId: number, data: UpdateRolePermissionsData) {
+        try {
+            console.log(`Actualizando permisos del rol ${roleId}...`, data);
+            const response = await api.put<UpdateRolePermissionsResponse>(`/api/admin/roles/${roleId}/permissions`, data);
+            console.log(`Permisos del rol ${roleId} actualizados:`, response.data);
+            return response;
+        } catch (error) {
+            console.error(`Error al actualizar permisos del rol ${roleId}:`, error);
+            throw error;
+        }
+    }
+};
\ No newline at end of file
diff --git a/src/modules/users/services/roleService.ts b/src/modules/users/services/roleService.ts
new file mode 100644
index 0000000..91e1954
--- /dev/null
+++ b/src/modules/users/services/roleService.ts
@@ -0,0 +1,62 @@
+import api from "../../../services/api"
+import type { 
+    RoleResponse, 
+    CreateRoleData, 
+    UpdateRoleData, 
+    SingleRoleResponse
+} from '../types/role'
+
+export const roleService = {
+    async getAllRoles(page = 1, perPage = 25) {
+        try {
+            console.log('🔍 Fetching roles from API...');
+            const response = await api.get<RoleResponse>('/api/admin/roles', {
+                params: { 
+                    page, 
+                    per_page: perPage 
+                }
+            });
+            console.log('✅ Roles fetched successfully:', response.data);
+            return response;
+        } catch (error) {
+            console.error('❌ Error fetching roles:', error);
+            throw error;
+        }
+    },
+
+    async createRole(data: CreateRoleData) {
+        try {
+            console.log('🔍 Creating role...', data);
+            const response = await api.post<SingleRoleResponse>('/api/admin/roles', data);
+            console.log('✅ Role created successfully:', response.data);
+            return response;
+        } catch (error) {
+            console.error('❌ Error creating role:', error);
+            throw error;
+        }
+    },
+
+    async updateRole(id: number, data: UpdateRoleData) {
+        try {
+            console.log('🔍 Updating role...', { id, data });
+            const response = await api.put<SingleRoleResponse>(`/api/admin/roles/${id}`, data);
+            console.log('✅ Role updated successfully:', response.data);
+            return response;
+        } catch (error) {
+            console.error('❌ Error updating role:', error);
+            throw error;
+        }
+    },
+
+    async deleteRole(id: number) {
+        try {
+            console.log('🔍 Deleting role...', { id });
+            const response = await api.delete(`/api/admin/roles/${id}`);
+            console.log('✅ Role deleted successfully:', response.data);
+            return response;
+        } catch (error) {
+            console.error('❌ Error deleting role:', error);
+            throw error;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/modules/users/types/permissions.d.ts b/src/modules/users/types/permissions.d.ts
new file mode 100644
index 0000000..4f47607
--- /dev/null
+++ b/src/modules/users/types/permissions.d.ts
@@ -0,0 +1,53 @@
+// Base interfaces
+export interface Permission {
+    id: number;
+    name: string;
+    guard_name: string;
+    description: string;
+    permission_type_id: number;
+    created_at: string;
+    updated_at: string;
+}
+
+export interface PermissionType {
+    id: number;
+    name: string;
+    description: string | null;
+    created_at: string;
+    updated_at: string;
+    permissions: Permission[];
+}
+
+// Permission with pivot data for role-permission relationships
+export interface PermissionWithPivot extends Permission {
+    pivot: {
+        role_id: number;
+        permission_id: number;
+    };
+}
+
+// API Response interfaces
+export interface PermissionTypesResponse {
+    status: string;
+    data: {
+        models: PermissionType[];
+    };
+}
+
+export interface RolePermissionsResponse {
+    status: string;
+    data: {
+        permissions: PermissionWithPivot[];
+    };
+}
+
+// Interface for updating role permissions
+export interface UpdateRolePermissionsData {
+    permissions: number[];
+}
+
+export interface UpdateRolePermissionsResponse {
+    status: string;
+    message?: string;
+    data?: any;
+}
\ No newline at end of file
diff --git a/src/modules/users/types/role.d.ts b/src/modules/users/types/role.d.ts
new file mode 100644
index 0000000..7e80591
--- /dev/null
+++ b/src/modules/users/types/role.d.ts
@@ -0,0 +1,59 @@
+// Base Role interface
+export interface Role {
+    id: number;
+    name: string;
+    guard_name: string;
+    description: string;
+    created_at: string;
+    updated_at: string;
+}
+
+// Pagination interfaces
+export interface RolePagination {
+    current_page: number;
+    data: Role[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: Array<{url: string | null; label: string; active: boolean}>;
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+// API Response interfaces
+export interface RoleResponse {
+    status: string;
+    data: {
+        models: RolePagination;
+    };
+}
+
+export interface SingleRoleResponse {
+    status: string;
+    data: {
+        model: Role;
+    };
+}
+
+// Form data interfaces
+export interface CreateRoleData {
+    description: string;
+}
+
+export interface UpdateRoleData {
+    description: string;
+}
+
+// Error handling interface
+export interface ApiError {
+    status: string;
+    message: string;
+    errors: {
+        [key: string]: string[];
+    };
+}
\ No newline at end of file
diff --git a/src/modules/warehouse/components/BatchAddInventory.vue b/src/modules/warehouse/components/BatchAddInventory.vue
new file mode 100644
index 0000000..c260122
--- /dev/null
+++ b/src/modules/warehouse/components/BatchAddInventory.vue
@@ -0,0 +1,648 @@
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Breadcrumb -->
+        <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
+
+        <!-- Page Header -->
+        <div class="flex flex-wrap justify-between items-center gap-4">
+            <div class="flex flex-col gap-2">
+                <h1 class="text-gray-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    Agregar Items al Inventario
+                </h1>
+                <p class="text-gray-500 dark:text-gray-400 text-base font-normal leading-normal">
+                    Busca y agrega múltiples productos a tu stock en un lote único.
+                </p>
+            </div>
+        </div>
+
+        <!-- Search & Select Products Section -->
+        <Card class="shadow-sm">
+            <template #header>
+                <div class="px-6 py-4">
+                    <h2 class="text-lg font-bold text-gray-900 dark:text-white">Seleccionar Productos del Catálogo</h2>
+                </div>
+            </template>
+            <template #content>
+                <div class="flex flex-col lg:flex-row gap-4 items-end">
+                    <!-- Search Input -->
+                    <div class="flex-1 w-full">
+                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            Buscar Catálogo
+                        </label>
+                        <div class="relative">
+                            <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                            <InputText
+                                v-model="searchQuery"
+                                type="text"
+                                placeholder="Escribe Nombre del Producto o SKU..."
+                                class="w-full pl-10 h-11"
+                                @focus="showProductSearch = true"
+                            />
+                        </div>
+                    </div>
+                    <!-- Add Button -->
+                    <Button
+                        label="Agregar Producto"
+                        icon="pi pi-plus"
+                        @click="openProductModal"
+                        class="min-w-[200px]"
+                    />
+                </div>
+
+                <!-- Selected Product Preview (shown when typing) -->
+                <div v-if="showProductSearch && selectedProductPreview" class="mt-4 bg-gray-50 dark:bg-gray-800/30 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+                    <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
+                        <!-- Product Info -->
+                        <div class="md:col-span-4">
+                            <p class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">
+                                Producto Seleccionado
+                            </p>
+                            <div class="flex items-center gap-3">
+                                <Avatar :image="selectedProductPreview.image" shape="square" size="large" class="w-12 h-12" />
+                                <div>
+                                    <p class="font-bold text-gray-900 dark:text-white">{{ selectedProductPreview.name }}</p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400">SKU: {{ selectedProductPreview.sku }}</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Variants -->
+                        <div class="md:col-span-2">
+                            <label class="block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">
+                                Tamaño
+                            </label>
+                            <Select
+                                v-model="tempVariant.size"
+                                :options="selectedProductPreview.sizes"
+                                placeholder="Selecciona..."
+                                class="w-full"
+                            />
+                        </div>
+
+                        <div class="md:col-span-2">
+                            <label class="block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">
+                                Resolución
+                            </label>
+                            <Select
+                                v-model="tempVariant.resolution"
+                                :options="selectedProductPreview.resolutions"
+                                placeholder="Selecciona..."
+                                class="w-full"
+                            />
+                        </div>
+
+                        <!-- Quantity -->
+                        <div class="md:col-span-2">
+                            <label class="block text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">
+                                Cantidad
+                            </label>
+                            <InputNumber
+                                v-model="tempVariant.quantity"
+                                :min="1"
+                                placeholder="0"
+                                class="w-full"
+                            />
+                        </div>
+
+                        <!-- Add Button -->
+                        <div class="md:col-span-2 flex items-end">
+                            <Button
+                                label="Agregar"
+                                icon="pi pi-plus"
+                                @click="addItemToQueue"
+                                class="w-full"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </Card>
+
+        <!-- Queued Items Table -->
+        <Card class="shadow-sm">
+            <template #header>
+                <div class="flex items-center justify-between px-6 py-4">
+                    <h2 class="text-lg font-bold text-gray-900 dark:text-white">
+                        Items en Cola ({{ queuedItems.length }})
+                    </h2>
+                    <Button
+                        label="Limpiar Todo"
+                        severity="danger"
+                        text
+                        size="small"
+                        @click="clearAllItems"
+                        v-if="queuedItems.length > 0"
+                    />
+                </div>
+            </template>
+            <template #content>
+                <DataTable
+                    v-if="queuedItems.length > 0"
+                    :value="queuedItems"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    class="text-sm"
+                >
+                    <Column field="productName" header="Nombre del Producto">
+                        <template #body="slotProps">
+                            <div class="flex items-center gap-3">
+                                <Avatar :image="slotProps.data.image" shape="square" size="large" class="w-8 h-8" />
+                                <span class="font-medium">{{ slotProps.data.productName }}</span>
+                            </div>
+                        </template>
+                    </Column>
+                    <Column field="sku" header="SKU">
+                        <template #body="slotProps">
+                            <span class="text-sm text-gray-500">{{ slotProps.data.sku }}</span>
+                        </template>
+                    </Column>
+                    <Column field="variant" header="Variante">
+                        <template #body="slotProps">
+                            <div class="flex flex-wrap gap-2">
+                                <Tag
+                                    v-if="slotProps.data.size"
+                                    :value="`Tamaño: ${slotProps.data.size}`"
+                                    severity="info"
+                                    class="text-xs"
+                                />
+                                <Tag
+                                    v-if="slotProps.data.resolution"
+                                    :value="`Resolución: ${slotProps.data.resolution}`"
+                                    severity="warning"
+                                    class="text-xs"
+                                />
+                            </div>
+                        </template>
+                    </Column>
+                    <Column field="quantity" header="Cantidad">
+                        <template #body="slotProps">
+                            <InputNumber
+                                v-model="slotProps.data.quantity"
+                                :min="1"
+                                class="w-20"
+                            />
+                        </template>
+                    </Column>
+                    <Column field="unit" header="Unidad">
+                        <template #body="slotProps">
+                            <span class="text-sm">{{ slotProps.data.unit }}</span>
+                        </template>
+                    </Column>
+                    <Column header="Acción" :exportable="false">
+                        <template #body="slotProps">
+                            <Button
+                                icon="pi pi-trash"
+                                severity="danger"
+                                text
+                                rounded
+                                size="small"
+                                @click="removeItem(slotProps.data.id)"
+                            />
+                        </template>
+                    </Column>
+                </DataTable>
+
+                <!-- Empty State -->
+                <div v-else class="text-center py-12">
+                    <i class="pi pi-inbox text-4xl text-gray-300 dark:text-gray-600 mb-4 block"></i>
+                    <p class="text-gray-500 dark:text-gray-400">No hay items en la cola. Comienza a agregar productos.</p>
+                </div>
+
+                <!-- Summary -->
+                <div v-if="queuedItems.length > 0" class="mt-6 p-4 bg-gray-50 dark:bg-gray-800/30 border border-gray-200 dark:border-gray-700 rounded-lg">
+                    <p class="text-sm text-gray-600 dark:text-gray-300">
+                        Total de items a agregar: <span class="font-bold text-gray-900 dark:text-white">{{ totalQueuedQuantity }} unidades</span>
+                        en {{ queuedItems.length }} productos únicos.
+                    </p>
+                </div>
+            </template>
+        </Card>
+
+        <!-- Product Selection Modal -->
+        <Dialog
+            v-model:visible="showModal"
+            :header="'Agregar Producto al Lote'"
+            :modal="true"
+            :style="{ width: '90vw' }"
+            :maximizable="true"
+            class="md:w-full max-w-2xl"
+        >
+            <div class="space-y-6">
+                <!-- Search Input -->
+                <div class="space-y-3">
+                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300">
+                        Buscar Catálogo
+                    </label>
+                    <div class="relative">
+                        <i class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                        <InputText
+                            v-model="modalSearchQuery"
+                            type="text"
+                            placeholder="Escribe Nombre del Producto o SKU..."
+                            class="w-full pl-10"
+                        />
+                    </div>
+                </div>
+
+                <!-- Selected Product Details -->
+                <div class="bg-gray-50 dark:bg-gray-800/30 rounded-lg p-5 border border-gray-100 dark:border-gray-700 space-y-6">
+                    <!-- Product Info -->
+                    <div class="flex items-center gap-4">
+                        <Avatar :image="modalProduct.image" shape="square" size="xlarge" class="w-16 h-16" />
+                        <div>
+                            <p class="text-lg font-bold text-gray-900 dark:text-white">{{ modalProduct.name }}</p>
+                            <p class="text-sm text-gray-500 dark:text-gray-400 font-medium">SKU: {{ modalProduct.sku }}</p>
+                        </div>
+                    </div>
+
+                    <!-- Variants Grid -->
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div class="space-y-2">
+                            <label class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                                Tamaño
+                            </label>
+                            <Select
+                                v-model="modalProduct.selectedSize"
+                                :options="modalProduct.sizes"
+                                placeholder="Selecciona..."
+                                class="w-full"
+                            />
+                        </div>
+
+                        <div class="space-y-2">
+                            <label class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                                Resolución
+                            </label>
+                            <Select
+                                v-model="modalProduct.selectedResolution"
+                                :options="modalProduct.resolutions"
+                                placeholder="Selecciona..."
+                                class="w-full"
+                            />
+                        </div>
+
+                        <div class="space-y-2">
+                            <label class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                                Cantidad
+                            </label>
+                            <div class="flex items-center gap-2">
+                                <InputNumber
+                                    v-model="modalProduct.selectedQuantity"
+                                    :min="1"
+                                    placeholder="0"
+                                    class="flex-1"
+                                />
+                                <span class="text-sm font-medium text-gray-500">pcs</span>
+                            </div>
+                        </div>
+
+                        <!-- Stock Info -->
+                        <div class="flex items-end">
+                            <InlineMessage severity="info" class="w-full text-xs">
+                                <i class="pi pi-info-circle mr-2"></i>
+                                Stock actual: {{ modalProduct.currentStock }} unidades
+                            </InlineMessage>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <template #footer>
+                <Button
+                    label="Cancelar"
+                    severity="secondary"
+                    @click="showModal = false"
+                />
+                <Button
+                    label="Confirmar y Agregar a la Lista"
+                    icon="pi pi-check"
+                    @click="confirmAddFromModal"
+                />
+            </template>
+        </Dialog>
+
+        <!-- Bottom Action Bar -->
+        <div class="fixed bottom-0 right-0 left-0 md:left-64 bg-white dark:bg-background-dark border-t border-gray-200 dark:border-gray-700 p-4 px-6 md:px-10 flex justify-between items-center shadow-lg">
+            <div class="flex items-center gap-6">
+                <div class="flex items-center gap-2">
+                    <span class="text-xs font-medium text-gray-500 uppercase tracking-widest">Ubicación de Almacenamiento</span>
+                    <Select
+                        v-model="selectedLocation"
+                        :options="warehouseLocations"
+                        optionLabel="label"
+                        optionValue="value"
+                        placeholder="Selecciona..."
+                        class="h-9 w-64"
+                    />
+                </div>
+            </div>
+            <div class="flex items-center gap-4">
+                <Button
+                    label="Cancelar"
+                    severity="secondary"
+                    @click="cancelBatch"
+                />
+                <Button
+                    label="Confirmar y Guardar Inventario"
+                    icon="pi pi-check"
+                    @click="saveBatch"
+                    :disabled="queuedItems.length === 0"
+                />
+            </div>
+        </div>
+
+        <!-- Bottom Spacing -->
+        <div class="pb-24"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+
+// PrimeVue Components
+import Toast from 'primevue/toast';
+import Breadcrumb from 'primevue/breadcrumb';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+import Select from 'primevue/select';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Dialog from 'primevue/dialog';
+import Tag from 'primevue/tag';
+import Avatar from 'primevue/avatar';
+import InlineMessage from 'primevue/inlinemessage';
+
+const router = useRouter();
+const toast = useToast();
+
+// State
+const searchQuery = ref('');
+const modalSearchQuery = ref('Smart Display Panel');
+const selectedLocation = ref('main-warehouse');
+const showProductSearch = ref(false);
+const showModal = ref(false);
+
+// Breadcrumb
+const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' });
+const breadcrumbItems = ref([
+    { label: 'Almacén', to: '/warehouse' },
+    { label: 'Agregar Items al Inventario' }
+]);
+
+// Warehouse Locations
+const warehouseLocations = [
+    { label: 'Almacén Principal (A1)', value: 'main-warehouse' },
+    { label: 'Almacenamiento Sur (B4)', value: 'south-storage' },
+    { label: 'Almacenamiento Frío (C2)', value: 'cold-storage' },
+];
+
+// Mock Product Data
+const mockProducts = [
+    {
+        id: 1,
+        name: 'Smart Display Panel',
+        sku: 'DISP-PNL-SD-001',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBMbZhSSPYoHEi3akXSqZXm-T6EghACuHJJ5NYeJ8g4XJIKtqXRhCSQ1kFcvo7Txk01ryR-r6RJ61NzPLENWMywvUVnCkQglsizZG0NKPBwRFQjXvtDULkGbGFm6EPocyHGfuzKJ0EoDr601zMBI34mfPCgn9AAaRkTMj2Ize2nCUcanlGn7QJEp6BdNcmf3JFlk-51jPTXj1-mM4Pw6AGIvarhxnZqtEAji6qRF7evVTR_56c48h5if21S3jD-wVhNVp8AltVn8KEH',
+        sizes: ['24', '36', '64', '85'],
+        resolutions: ['1080', '2K', '4K', '8K'],
+        currentStock: 420,
+    },
+    {
+        id: 2,
+        name: 'Mechanical Keyboard RGB',
+        sku: 'KYBD-RGB-US-02',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuBBMBDEGh1exdBX1lU--TOCsUwfsFkYhrl8DxxvxgH-hKLkcuVtuGP_ZhRS5l_YXFWls08Ecr-Ic748cVHqHexFMMzYTPH8YL2s9OISDgsMIwcDOPxitrPUn3RBCD_krFC8SrBXBeNC8ilcFdg_JCwD5BW5gaYjAAEUMFXyM1vd-YT27KyubBk1IKATsMdDkH-NtwAHcrPgNoXsRaAcubBQiebCG1hmxKVW3fAXoDoSqywrxhwZ7cmIuo7BTThJJ1KcczxQh1jYh_w4',
+        switches: ['Red Switch', 'Blue Switch', 'Brown Switch'],
+        currentStock: 230,
+    },
+    {
+        id: 3,
+        name: 'USB-C Charging Cable 2m',
+        sku: 'CBL-USBC-2M',
+        image: 'https://lh3.googleusercontent.com/aida-public/AB6AXuAsb9nqDON7PeKGYYAU8hmHn7B2l3waP_ewMQTpsgnpJe2vFiY-k-zncE5VEf186tDzlTwVPA6-1SgAFagugq9Anw2WXloUFTNwOrOHgAi-MNhgs0FuxRKF8XMLk6W_u6YLF5xWh3K2q317JXFSUWtURtxCi8pYM4YtHYEyuT2aIrhbAnI2LQ7ja8DvSdvpO6t1IJ6HE9RqlnAFXuLG22igxiekKT2NjRpuK5Zzu_90rBPEjb0KitG9DwiBjzKa702pccHPRqupgXke',
+        variants: ['Braided', 'Standard'],
+        currentStock: 1200,
+    },
+];
+
+// Queued Items
+const queuedItems = ref<any[]>([]);
+
+// Temporary variant selection
+const tempVariant = ref({
+    size: null,
+    resolution: null,
+    quantity: 1,
+});
+
+// Selected Product Preview
+const selectedProductPreview = ref<any>(null);
+
+// Get default product
+const defaultProduct = mockProducts[0]!;
+
+// Modal Product
+const modalProduct = ref({
+    name: 'Smart Display Panel',
+    sku: 'DISP-PNL-SD-001',
+    image: defaultProduct.image,
+    sizes: defaultProduct.sizes,
+    resolutions: defaultProduct.resolutions,
+    currentStock: defaultProduct.currentStock,
+    selectedSize: '85',
+    selectedResolution: '4K',
+    selectedQuantity: 10,
+});
+
+// Computed
+const totalQueuedQuantity = computed(() => {
+    return queuedItems.value.reduce((sum, item) => sum + item.quantity, 0);
+});
+
+// Methods
+const openProductModal = () => {
+    showModal.value = true;
+    resetModalProduct();
+};
+
+const resetModalProduct = () => {
+    modalProduct.value = {
+        name: 'Smart Display Panel',
+        sku: 'DISP-PNL-SD-001',
+        image: defaultProduct.image,
+        sizes: defaultProduct.sizes,
+        resolutions: defaultProduct.resolutions,
+        currentStock: defaultProduct.currentStock,
+        selectedSize: '85',
+        selectedResolution: '4K',
+        selectedQuantity: 1,
+    };
+};
+
+const addItemToQueue = () => {
+    if (!selectedProductPreview.value || !tempVariant.value.quantity) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'Por favor selecciona un producto y cantidad',
+            life: 3000
+        });
+        return;
+    }
+
+    const newItem = {
+        id: Math.random(),
+        productName: selectedProductPreview.value.name,
+        sku: selectedProductPreview.value.sku,
+        image: selectedProductPreview.value.image,
+        size: tempVariant.value.size,
+        resolution: tempVariant.value.resolution,
+        quantity: tempVariant.value.quantity,
+        unit: 'pcs',
+    };
+
+    queuedItems.value.push(newItem);
+    
+    toast.add({
+        severity: 'success',
+        summary: 'Producto Agregado',
+        detail: `${selectedProductPreview.value.name} ha sido agregado a la cola`,
+        life: 3000
+    });
+
+    // Reset
+    selectedProductPreview.value = null;
+    showProductSearch.value = false;
+    searchQuery.value = '';
+    tempVariant.value = { size: null, resolution: null, quantity: 1 };
+};
+
+const confirmAddFromModal = () => {
+    if (!modalProduct.value.selectedQuantity || !modalProduct.value.selectedSize) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'Por favor completa todos los campos',
+            life: 3000
+        });
+        return;
+    }
+
+    const newItem = {
+        id: Math.random(),
+        productName: modalProduct.value.name,
+        sku: modalProduct.value.sku,
+        image: modalProduct.value.image,
+        size: modalProduct.value.selectedSize,
+        resolution: modalProduct.value.selectedResolution,
+        quantity: modalProduct.value.selectedQuantity,
+        unit: 'pcs',
+    };
+
+    queuedItems.value.push(newItem);
+    
+    toast.add({
+        severity: 'success',
+        summary: 'Producto Agregado',
+        detail: `${modalProduct.value.name} ha sido agregado a la cola`,
+        life: 3000
+    });
+
+    showModal.value = false;
+    resetModalProduct();
+};
+
+const removeItem = (id: number) => {
+    const index = queuedItems.value.findIndex(item => item.id === id);
+    if (index > -1) {
+        const removedItem = queuedItems.value.splice(index, 1)[0];
+        toast.add({
+            severity: 'info',
+            summary: 'Item Removido',
+            detail: `${removedItem.productName} ha sido removido`,
+            life: 3000
+        });
+    }
+};
+
+const clearAllItems = () => {
+    queuedItems.value = [];
+    toast.add({
+        severity: 'info',
+        summary: 'Cola Limpiada',
+        detail: 'Todos los items han sido removidos',
+        life: 3000
+    });
+};
+
+const cancelBatch = () => {
+    if (queuedItems.value.length > 0) {
+        const confirmed = confirm('¿Estás seguro? Se perderán todos los items en la cola.');
+        if (!confirmed) return;
+    }
+    router.back();
+};
+
+const saveBatch = () => {
+    if (queuedItems.value.length === 0) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'Agrega al menos un item a la cola',
+            life: 3000
+        });
+        return;
+    }
+
+    if (!selectedLocation.value) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Validación',
+            detail: 'Selecciona una ubicación de almacenamiento',
+            life: 3000
+        });
+        return;
+    }
+
+    // TODO: Enviar datos al API
+    console.log('Batch data:', {
+        items: queuedItems.value,
+        location: selectedLocation.value,
+    });
+
+    toast.add({
+        severity: 'success',
+        summary: 'Éxito',
+        detail: `${queuedItems.value.length} productos agregados al inventario exitosamente`,
+        life: 3000
+    });
+
+    // Reset y volver
+    queuedItems.value = [];
+    setTimeout(() => {
+        router.push({ name: 'WarehouseHome' });
+    }, 1500);
+};
+</script>
+
+<style scoped>
+:deep(.p-dialog-header) {
+    background-color: var(--surface-50);
+}
+
+.dark :deep(.p-dialog-header) {
+    background-color: var(--surface-800);
+}
+
+:deep(.p-dialog-content) {
+    max-height: calc(90vh - 200px);
+    overflow-y: auto;
+}
+</style>
diff --git a/src/modules/warehouse/components/ModalProducts.vue b/src/modules/warehouse/components/ModalProducts.vue
new file mode 100644
index 0000000..361cb5f
--- /dev/null
+++ b/src/modules/warehouse/components/ModalProducts.vue
@@ -0,0 +1,212 @@
+<template>
+  <Dialog 
+    :visible="visible"
+    @update:visible="$emit('update:visible', $event)"
+    modal 
+    header="Seleccionar Productos"
+    :style="{ width: '90vw', maxWidth: '1200px' }"
+    :contentStyle="{ padding: '0' }"
+  >
+    <template #header>
+      <div class="flex items-center gap-2">
+        <i class="pi pi-shopping-cart text-xl"></i>
+        <span class="font-bold text-lg">Seleccionar Productos del Catálogo</span>
+      </div>
+    </template>
+
+    <div class="p-6">
+      <!-- Search Bar -->
+      <div class="mb-4">
+        <IconField iconPosition="left">
+          <InputIcon class="pi pi-search" />
+          <InputText
+            v-model="productSearch"
+            placeholder="Buscar por nombre, SKU o código..."
+            class="w-full"
+          />
+        </IconField>
+      </div>
+
+      <!-- Products Table -->
+      <DataTable
+        v-model:selection="selectedProducts"
+        :value="filteredProducts"
+        :loading="loading"
+        selectionMode="multiple"
+        dataKey="id"
+        :paginator="true"
+        :rows="10"
+        :rowsPerPageOptions="[5, 10, 20, 50]"
+        stripedRows
+        responsiveLayout="scroll"
+        currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} productos"
+        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+      >
+        <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+        
+        <Column field="name" header="Producto" sortable style="min-width: 250px">
+          <template #body="slotProps">
+            <div class="flex flex-col">
+              <span class="font-medium text-surface-900 dark:text-white">
+                {{ slotProps.data.name }}
+              </span>
+              <span class="text-xs text-surface-500 dark:text-surface-400">
+                {{ slotProps.data.description }}
+              </span>
+            </div>
+          </template>
+        </Column>
+
+        <Column field="sku" header="SKU" sortable style="min-width: 120px">
+          <template #body="slotProps">
+            <span class="font-mono text-sm text-surface-600 dark:text-surface-400">
+              {{ slotProps.data.sku }}
+            </span>
+          </template>
+        </Column>
+
+        <Column field="code" header="Código" sortable style="min-width: 100px">
+          <template #body="slotProps">
+            <span class="font-mono text-sm text-primary-600 dark:text-primary-400">
+              {{ slotProps.data.code }}
+            </span>
+          </template>
+        </Column>
+
+        <Column field="is_serial" header="Tipo" style="min-width: 100px">
+          <template #body="slotProps">
+            <Badge 
+              :value="slotProps.data.is_serial ? 'Serial' : 'Estándar'" 
+              :severity="slotProps.data.is_serial ? 'info' : 'secondary'"
+            />
+          </template>
+        </Column>
+
+        <Column field="suggested_sale_price" header="Precio Sugerido" sortable style="min-width: 130px">
+          <template #body="slotProps">
+            <span class="font-semibold text-green-600 dark:text-green-400">
+              ${{ slotProps.data.suggested_sale_price.toLocaleString('es-MX', { minimumFractionDigits: 2 }) }}
+            </span>
+          </template>
+        </Column>
+
+        <template #empty>
+          <div class="text-center py-8">
+            <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+            <p class="text-surface-500 dark:text-surface-400">
+              No se encontraron productos
+            </p>
+          </div>
+        </template>
+
+        <template #loading>
+          <div class="text-center py-8">
+            <i class="pi pi-spin pi-spinner text-4xl text-primary mb-4"></i>
+            <p class="text-surface-500 dark:text-surface-400">
+              Cargando productos...
+            </p>
+          </div>
+        </template>
+      </DataTable>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-between items-center">
+        <span class="text-sm text-surface-600 dark:text-surface-400">
+          {{ selectedProducts.length }} producto(s) seleccionado(s)
+        </span>
+        <div class="flex gap-2">
+          <Button 
+            label="Cancelar" 
+            severity="secondary" 
+            outlined 
+            @click="handleCancel" 
+          />
+          <Button 
+            label="Agregar Productos" 
+            icon="pi pi-plus" 
+            :disabled="selectedProducts.length === 0"
+            @click="handleConfirm" 
+          />
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import Dialog from 'primevue/dialog';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Button from 'primevue/button';
+import Badge from 'primevue/badge';
+import InputText from 'primevue/inputtext';
+import IconField from 'primevue/iconfield';
+import InputIcon from 'primevue/inputicon';
+import { useProductStore } from '../../products/stores/productStore';
+import type { Product } from '../../products/types/product';
+
+// Props
+interface Props {
+  visible: boolean;
+}
+
+const props = defineProps<Props>();
+
+// Emits
+const emit = defineEmits<{
+  'update:visible': [value: boolean];
+  'products-selected': [products: Product[]];
+}>();
+
+// Store
+const productStore = useProductStore();
+
+// State
+const productSearch = ref('');
+const selectedProducts = ref<Product[]>([]);
+const loading = ref(false);
+
+// Computed
+const filteredProducts = computed(() => {
+  if (!productSearch.value) {
+    return productStore.activeProducts;
+  }
+  
+  const search = productSearch.value.toLowerCase();
+  return productStore.activeProducts.filter(p => 
+    p.name.toLowerCase().includes(search) ||
+    p.sku.toLowerCase().includes(search) ||
+    (p.code && p.code.toLowerCase().includes(search))
+  );
+});
+
+// Methods
+const handleCancel = () => {
+  selectedProducts.value = [];
+  productSearch.value = '';
+  emit('update:visible', false);
+};
+
+const handleConfirm = () => {
+  emit('products-selected', selectedProducts.value);
+  selectedProducts.value = [];
+  productSearch.value = '';
+  emit('update:visible', false);
+};
+
+// Cargar productos cuando el modal se abre
+watch(() => props.visible, async (newValue) => {
+  if (newValue && productStore.products.length === 0) {
+    loading.value = true;
+    try {
+      await productStore.fetchProducts();
+    } catch (error) {
+      console.error('Error al cargar productos:', error);
+    } finally {
+      loading.value = false;
+    }
+  }
+});
+</script>
diff --git a/src/modules/warehouse/components/ModalStockProducts.vue b/src/modules/warehouse/components/ModalStockProducts.vue
new file mode 100644
index 0000000..25fa2fd
--- /dev/null
+++ b/src/modules/warehouse/components/ModalStockProducts.vue
@@ -0,0 +1,376 @@
+<template>
+    <Dialog v-model:visible="isVisible" modal :header="`Productos en Stock - ${warehouseName}`"
+        :style="{ width: '95vw', maxWidth: '1400px' }" :dismissableMask="true" @hide="handleClose">
+        <!-- Toolbar con filtros -->
+        <div class="filter-toolbar mb-4">
+            <div class="flex gap-3 align-items-center flex-wrap w-full">
+                <div class="flex-1" style="min-width: 300px">
+                    <span class="p-input-icon-left w-full search-input">
+                        <InputText v-model="searchQuery" placeholder="Buscar por código, SKU o nombre..." class="w-full"
+                            icon="pi pi-search" />
+                    </span>
+                </div>
+
+                <Dropdown v-model="filterSerial" :options="serialFilterOptions" optionLabel="label" optionValue="value"
+                    placeholder="Tipo de producto" style="min-width: 200px" showClear />
+
+            </div>
+        </div>
+
+        <!-- Loading State -->
+        <div v-if="loading" class="flex justify-content-center align-items-center" style="min-height: 400px">
+            <ProgressSpinner />
+        </div>
+
+        <!-- Error State -->
+        <Message v-else-if="error" severity="error" :closable="false" class="mb-4">
+            {{ error }}
+        </Message>
+
+        <!-- Tabla de productos -->
+        <DataTable v-else v-model:selection="selectedProducts" :value="filteredStocks" :paginator="true" :rows="10"
+            :rowsPerPageOptions="[5, 10, 20, 50]" dataKey="id" :loading="loading" stripedRows responsiveLayout="scroll"
+            paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+            currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} productos" class="p-datatable-sm">
+            <template #empty>
+                <div class="text-center py-6">
+                    <i class="pi pi-inbox text-4xl text-400 mb-3"></i>
+                    <p class="text-600 text-lg">No se encontraron productos en este almacén</p>
+                </div>
+            </template>
+
+            <Column selectionMode="multiple" headerStyle="width: 3rem" :exportable="false" frozen />
+
+            <Column field="product.code" header="Código" sortable frozen style="min-width: 120px">
+                <template #body="{ data }">
+                    <span class="font-semibold text-900">{{ data.product.code }}</span>
+                </template>
+            </Column>
+
+            <Column field="product.sku" header="SKU" sortable style="min-width: 130px">
+                <template #body="{ data }">
+                    <span class="text-700">{{ data.product.sku }}</span>
+                </template>
+            </Column>
+
+            <Column field="product.name" header="Nombre del Producto" sortable style="min-width: 300px">
+                <template #body="{ data }">
+                    <div>
+                        <div class="font-semibold text-900 mb-1">{{ data.product.name }}</div>
+                        <div class="text-sm text-600" v-if="data.product.description">{{ data.product.description }}
+                        </div>
+                    </div>
+                </template>
+            </Column>
+
+            <Column field="stock" header="Stock Disponible" sortable style="min-width: 150px" alignFrozen="right">
+                <template #body="{ data }">
+                    <div class="flex align-items-center gap-2">
+                        <Tag :value="data.stock.toString()" :severity="getStockSeverity(data)" class="font-semibold" />
+                    </div>
+                </template>
+            </Column>
+
+            <Column field="product.unit_of_measure.abbreviation" header="Unidad" sortable style="min-width: 120px">
+                <template #body="{ data }">
+                    <div class="flex align-items-center gap-2">
+                        <Tag severity="secondary" class="font-semibold">
+                            {{ data.product.unit_of_measure.name }}
+                        </Tag>
+                    </div>
+                </template>
+            </Column>
+
+
+
+            <Column field="product.is_serial" header="Tipo" sortable style="min-width: 130px">
+                <template #body="{ data }">
+                    <Tag :value="data.product.is_serial ? 'Serializado' : 'Normal'"
+                        :severity="data.product.is_serial ? 'info' : 'success'"
+                        :icon="data.product.is_serial ? 'pi pi-barcode' : 'pi pi-box'" />
+                </template>
+            </Column>
+
+            <Column header="Números de Serie" style="min-width: 150px">
+                <template #body="{ data }">
+                    <Button v-if="data.product.is_serial && data.serial_numbers && data.serial_numbers.length > 0"
+                        :label="`${data.serial_numbers.length} serie(s)`" icon="pi pi-list" text size="small"
+                        severity="info" @click="viewSerialNumbers(data)" />
+                    <span v-else class="text-400">N/A</span>
+                </template>
+            </Column>
+
+            <Column field="product.is_active" header="Estado" sortable style="min-width: 100px">
+                <template #body="{ data }">
+                    <Tag :value="data.product.is_active ? 'Activo' : 'Inactivo'"
+                        :severity="data.product.is_active ? 'success' : 'danger'" />
+                </template>
+            </Column>
+        </DataTable>
+
+        <template #footer>
+            <div class="flex justify-content-between align-items-center">
+                <span class="text-600">
+                    {{ filteredStocks.length }} productos disponibles
+                </span>
+                <div class="flex gap-2">
+                    <Button label="Cancelar" icon="pi pi-times" text @click="handleClose" />
+                    <Button label="Confirmar Selección" icon="pi pi-check" :disabled="selectedProducts.length === 0"
+                        @click="handleConfirm" />
+                </div>
+            </div>
+        </template>
+    </Dialog>
+
+    <!-- Modal para ver números de serie -->
+    <Dialog v-model:visible="showSerialDialog" modal header="Números de Serie del Producto" :style="{ width: '800px' }">
+        <DataTable v-if="currentSerialNumbers" :value="currentSerialNumbers" stripedRows responsiveLayout="scroll"
+            class="p-datatable-sm">
+            <template #empty>
+                <div class="text-center py-4">
+                    <p class="text-600">No hay números de serie disponibles</p>
+                </div>
+            </template>
+
+            <Column field="serial_number" header="Número de Serie" style="min-width: 200px">
+                <template #body="{ data }">
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-barcode text-primary"></i>
+                        <span class="font-semibold">{{ data.serial_number }}</span>
+                    </div>
+                </template>
+            </Column>
+
+            <Column field="acquisition_date" header="Fecha de Adquisición" style="min-width: 180px">
+                <template #body="{ data }">
+                    <div class="flex align-items-center gap-2">
+                        <i class="pi pi-calendar text-500"></i>
+                        <span>{{ formatDate(data.acquisition_date) }}</span>
+                    </div>
+                </template>
+            </Column>
+
+            <Column field="purchase_cost" header="Costo de Compra" style="min-width: 150px">
+                <template #body="{ data }">
+                    <span class="font-semibold text-900">{{ formatCurrency(data.purchase_cost) }}</span>
+                </template>
+            </Column>
+        </DataTable>
+
+        <template #footer>
+            <Button label="Cerrar" icon="pi pi-times" text @click="showSerialDialog = false" />
+        </template>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import Dialog from 'primevue/dialog';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Button from 'primevue/button';
+import InputText from 'primevue/inputtext';
+import Dropdown from 'primevue/dropdown';
+import Tag from 'primevue/tag';
+import Message from 'primevue/message';
+import ProgressSpinner from 'primevue/progressspinner';
+import { StockService } from '../services/stock.services';
+import type { Stock, StocksResponse, SerialNumber } from '../types/stock.interfaces';
+
+// Props
+interface Props {
+    visible: boolean;
+    warehouseId: number;
+    warehouseName?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    warehouseName: 'Almacén'
+});
+
+// Emits
+const emit = defineEmits<{
+    'update:visible': [value: boolean];
+    'confirm': [products: Stock[]];
+}>();
+
+// State
+const isVisible = computed({
+    get: () => props.visible,
+    set: (value) => emit('update:visible', value)
+});
+
+const stockService = new StockService();
+const stocks = ref<Stock[]>([]);
+const selectedProducts = ref<Stock[]>([]);
+const loading = ref(false);
+const error = ref<string | null>(null);
+const searchQuery = ref('');
+const filterSerial = ref<string | null>(null);
+const showOnlyAvailable = ref(false);
+const showSerialDialog = ref(false);
+const currentSerialNumbers = ref<SerialNumber[] | null>(null);
+
+// Filter options
+const serialFilterOptions = [
+    { label: 'Todos', value: null },
+    { label: 'Serializado', value: 'true' },
+    { label: 'Normal', value: 'false' }
+];
+
+// Computed
+const filteredStocks = computed(() => {
+    let result = [...stocks.value];
+
+    // Filtrar por búsqueda
+    if (searchQuery.value) {
+        const query = searchQuery.value.toLowerCase();
+        result = result.filter(stock =>
+            stock.product.code.toLowerCase().includes(query) ||
+            stock.product.sku.toLowerCase().includes(query) ||
+            stock.product.name.toLowerCase().includes(query) ||
+            stock.product.description.toLowerCase().includes(query)
+        );
+    }
+
+    // Filtrar por tipo serializado
+    if (filterSerial.value !== null) {
+        const isSerial = filterSerial.value === 'true';
+        result = result.filter(stock => stock.product.is_serial === isSerial);
+    }
+
+    // Filtrar solo con stock disponible
+    if (showOnlyAvailable.value) {
+        result = result.filter(stock => stock.stock > 0);
+    }
+
+    return result;
+});
+
+// Methods
+const fetchStocks = async () => {
+    loading.value = true;
+    error.value = null;
+
+    try {
+        const response: StocksResponse = await stockService.getStocks(props.warehouseId);
+
+        if (response.status === 'success' && response.data) {
+            stocks.value = response.data.stocks;
+        } else {
+            throw new Error('Respuesta inválida del servidor');
+        }
+    } catch (err: any) {
+        error.value = err.message || 'Error al cargar los productos del almacén';
+        console.error('Error fetching stocks:', err);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleClose = () => {
+    isVisible.value = false;
+    selectedProducts.value = [];
+    searchQuery.value = '';
+    filterSerial.value = null;
+    showOnlyAvailable.value = false;
+};
+
+const handleConfirm = () => {
+    emit('confirm', selectedProducts.value);
+    handleClose();
+};
+
+const getStockSeverity = (stock: Stock) => {
+    if (stock.stock === 0) return 'danger';
+    if (stock.stock_min && stock.stock <= stock.stock_min) return 'warning';
+    if (stock.stock <= 5) return 'info';
+    return 'success';
+};
+
+const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat('es-MX', {
+        style: 'currency',
+        currency: 'MXN'
+    }).format(value);
+};
+
+const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('es-MX', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+};
+
+const viewSerialNumbers = (stock: Stock) => {
+    currentSerialNumbers.value = stock.serial_numbers;
+    showSerialDialog.value = true;
+};
+
+// Watch para cargar datos cuando el modal se abre
+watch(() => props.visible, (newValue) => {
+    if (newValue) {
+        fetchStocks();
+    }
+});
+
+// Cargar datos al montar si el modal ya está visible
+onMounted(() => {
+    if (props.visible) {
+        fetchStocks();
+    }
+});
+</script>
+
+<style scoped>
+.filter-toolbar {
+    background-color: var(--surface-0);
+    border: 1px solid var(--surface-200);
+    border-radius: 8px;
+    padding: 1rem 1.25rem;
+}
+
+.search-input .search-icon {
+    color: var(--text-color-secondary);
+    font-size: 1rem;
+    left: 0.75rem;
+}
+
+:deep(.p-inputtext) {
+    border-radius: 6px;
+}
+
+:deep(.p-dropdown) {
+    border-radius: 6px;
+}
+
+:deep(.p-datatable .p-datatable-tbody > tr > td) {
+    padding: 1rem 0.75rem;
+}
+
+:deep(.p-datatable .p-datatable-thead > tr > th) {
+    padding: 1rem 0.75rem;
+    font-weight: 600;
+    background-color: var(--surface-50);
+}
+
+:deep(.p-tag) {
+    font-weight: 600;
+    padding: 0.35rem 0.75rem;
+}
+
+:deep(.p-panel .p-panel-header) {
+    background-color: var(--green-50);
+    border-color: var(--green-200);
+}
+
+:deep(.p-card) {
+    box-shadow: none;
+    border: 1px solid var(--surface-200);
+}
+
+:deep(.p-card .p-card-content) {
+    padding: 0.75rem;
+}
+</style>
diff --git a/src/modules/warehouse/components/WarehouseAddInventory.vue b/src/modules/warehouse/components/WarehouseAddInventory.vue
new file mode 100644
index 0000000..1dcb195
--- /dev/null
+++ b/src/modules/warehouse/components/WarehouseAddInventory.vue
@@ -0,0 +1,781 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import InputNumber from 'primevue/inputnumber';
+import Dropdown from 'primevue/dropdown';
+import InputText from 'primevue/inputtext';
+import Badge from 'primevue/badge';
+import Toast from 'primevue/toast';
+import { useToast } from 'primevue/usetoast';
+import { purchaseServices } from '../../purchases/services/purchaseServices';
+import type { PurchaseDetailResponse } from '../../purchases/types/purchases';
+import { useWarehouseStore } from '../../../stores/warehouseStore';
+import { inventoryWarehouseServices } from '../services/inventoryWarehouse.services';
+import type { InventoryProductItem, CreateInventoryRequest } from '../types/warehouse.inventory';
+import type { Product as ProductType } from '../../products/types/product';
+import ModalProducts from './ModalProducts.vue';
+
+interface SerialNumber {
+    serial: string;
+    warehouseId: number;
+}
+
+interface Product {
+    id: number;
+    name: string;
+    sku: string;
+    category: string;
+    quantityOrdered: number;
+    quantityReceived: number;
+    warehouseId: number | null;
+    requiresSerial: boolean;
+    serialNumbers: SerialNumber[];
+    purchaseCost: number; // Costo de compra del producto
+    attributes?: Record<string, any>; // Atributos opcionales del producto
+}
+
+const toast = useToast();
+const route = useRoute();
+const router = useRouter();
+const warehouseStore = useWarehouseStore();
+
+// Data from API
+const purchaseData = ref<PurchaseDetailResponse | null>(null);
+const loading = ref(false);
+
+// Modo de operación: 'purchase' o 'manual'
+const operationMode = computed(() => {
+    return route.query.purchaseId ? 'purchase' : 'manual';
+});
+
+// Almacén de destino (para modo manual)
+const targetWarehouseId = computed(() => {
+    return route.query.warehouse ? Number(route.query.warehouse) : null;
+});
+
+// Data
+const purchaseOrderNumber = ref('ORD-2023-001');
+const totalItemsPO = ref(12);
+
+const products = ref<Product[]>([
+    {
+        id: 1,
+        name: 'Cables de Red Cat6 2m',
+        sku: 'NET-C62M-WH',
+        category: 'Accesorios Networking',
+        quantityOrdered: 50,
+        quantityReceived: 0,
+        warehouseId: 1,
+        requiresSerial: false,
+        serialNumbers: [],
+        purchaseCost: 0,
+    },
+    {
+        id: 2,
+        name: 'MacBook Pro M2 14"',
+        sku: 'LAP-MBP14-M2',
+        category: 'Equipos de Cómputo',
+        quantityOrdered: 5,
+        quantityReceived: 1,
+        warehouseId: null,
+        requiresSerial: true,
+        serialNumbers: [
+            { serial: 'SN-LAP-M2-00192', warehouseId: 1 },
+        ],
+        purchaseCost: 0,
+    },
+    {
+        id: 3,
+        name: 'Impresora Zebra ZT411',
+        sku: 'PRN-ZB411-IND',
+        category: 'Hardware Almacén',
+        quantityOrdered: 2,
+        quantityReceived: 0,
+        warehouseId: null,
+        requiresSerial: true,
+        serialNumbers: [],
+        purchaseCost: 0,
+    },
+]);
+
+const expandedRows = ref<any[]>([]);
+const newSerialNumber = ref('');
+const newSerialWarehouse = ref<number>(1);
+
+// Modal de productos
+const showProductModal = ref(false);
+
+const totalReceived = computed(() => {
+    return products.value.reduce((sum, p) => sum + p.quantityReceived, 0);
+});
+
+const warehouseSummary = computed(() => {
+    const summary: Record<number, { name: string; count: number }> = {};
+    
+    warehouseStore.warehouses.forEach(w => {
+        summary[w.id] = { name: w.name, count: 0 };
+    });
+    
+    products.value.forEach(product => {
+        if (product.requiresSerial) {
+            product.serialNumbers.forEach(sn => {
+                const summaryItem = summary[sn.warehouseId];
+                if (summaryItem) {
+                    summaryItem.count++;
+                }
+            });
+        } else if (product.warehouseId && product.quantityReceived > 0) {
+            const summaryItem = summary[product.warehouseId];
+            if (summaryItem) {
+                summaryItem.count += product.quantityReceived;
+            }
+        }
+    });
+    
+    return Object.values(summary);
+});
+
+const isFormValid = computed(() => {
+    // En modo manual sin productos, no es válido
+    if (operationMode.value === 'manual' && products.value.length === 0) {
+        return false;
+    }
+    
+    return products.value.every(product => {
+        if (product.requiresSerial) {
+            return product.serialNumbers.length === product.quantityOrdered;
+        } else {
+            return product.warehouseId !== null && product.quantityReceived > 0;
+        }
+    });
+});
+
+function toggleRow(product: Product) {
+    const index = expandedRows.value.findIndex(p => p.id === product.id);
+    if (index === -1) {
+        expandedRows.value.push(product);
+    } else {
+        expandedRows.value.splice(index, 1);
+    }
+}
+
+function isRowExpanded(product: Product) {
+    return expandedRows.value.some(p => p.id === product.id);
+}
+
+function addSerialNumber(product: Product) {
+    if (!newSerialNumber.value) {
+        toast.add({ severity: 'warn', summary: 'Campo Requerido', detail: 'Por favor ingrese un número de serie', life: 3000 });
+        return;
+    }
+    
+    if (product.serialNumbers.length >= product.quantityOrdered) {
+        toast.add({ severity: 'warn', summary: 'Límite Alcanzado', detail: `Ya se registraron todos los números de serie para este producto`, life: 3000 });
+        return;
+    }
+    
+    product.serialNumbers.push({
+        serial: newSerialNumber.value,
+        warehouseId: newSerialWarehouse.value,
+    });
+    
+    product.quantityReceived = product.serialNumbers.length;
+    newSerialNumber.value = '';
+    
+    toast.add({ severity: 'success', summary: 'Serie Registrada', detail: 'Número de serie agregado exitosamente', life: 2000 });
+}
+
+function removeSerialNumber(product: Product, index: number) {
+    product.serialNumbers.splice(index, 1);
+    product.quantityReceived = product.serialNumbers.length;
+}
+
+// Unused utility (for future use)
+// function getWarehouseName(warehouseId: number): string {
+//     return warehouseStore.warehouses.find(w => w.id === warehouseId)?.name || '';
+// }
+
+async function confirmReceipt() {
+    if (!isFormValid.value) {
+        toast.add({ severity: 'error', summary: 'Validación', detail: 'Por favor complete todos los campos requeridos', life: 3000 });
+        return;
+    }
+    
+    try {
+        loading.value = true;
+        
+        // Transformar productos a formato de API
+        const inventoryItems: InventoryProductItem[] = [];
+        
+        products.value.forEach(product => {
+            if (product.requiresSerial) {
+                // Para productos con serial, crear un item por cada número de serie
+                product.serialNumbers.forEach(sn => {
+                    inventoryItems.push({
+                        product_id: product.id,
+                        warehouse_id: sn.warehouseId,
+                        purchase_cost: product.purchaseCost,
+                        quantity: 1,
+                        serial_number: sn.serial,
+                        attributes: product.attributes || undefined,
+                    });
+                });
+            } else {
+                // Para productos estándar, crear un solo item con la cantidad total
+                if (product.quantityReceived > 0 && product.warehouseId) {
+                    inventoryItems.push({
+                        product_id: product.id,
+                        warehouse_id: product.warehouseId,
+                        purchase_cost: product.purchaseCost,
+                        quantity: product.quantityReceived,
+                        attributes: product.attributes || undefined,
+                    });
+                }
+            }
+        });
+        
+        const requestData: CreateInventoryRequest = {
+            products: inventoryItems
+        };
+        
+        // Enviar al API
+        const response = await inventoryWarehouseServices.addInventory(requestData);
+        
+        // Si es desde una compra, actualizar estado
+        if (operationMode.value === 'purchase' && route.query.purchaseId) {
+            await purchaseServices.updatePurchaseStatus(Number(route.query.purchaseId), '4');
+        }
+        
+        toast.add({ 
+            severity: 'success', 
+            summary: 'Inventario Actualizado', 
+            detail: response.message, 
+            life: 4000 
+        });
+        
+        // Regresar a la vista anterior
+        setTimeout(() => {
+            router.back();
+        }, 1000);
+        
+    } catch (error: any) {
+        console.error('Error al agregar inventario:', error);
+        toast.add({ 
+            severity: 'error', 
+            summary: 'Error', 
+            detail: error.response?.data?.message || 'No se pudo agregar el inventario', 
+            life: 4000 
+        });
+    } finally {
+        loading.value = false;
+    }
+}
+
+async function fetchPurchaseDetails() {
+    const purchaseId = route.query.purchaseId;
+    
+    if (!purchaseId) {
+        // Si no hay purchaseId, estamos en modo manual
+        return;
+    }
+    
+    try {
+        loading.value = true;
+        const response = await purchaseServices.getPurchaseById(Number(purchaseId));
+        purchaseData.value = response;
+        
+        // Actualizar datos de la compra
+        purchaseOrderNumber.value = response.data.purchase_number;
+        totalItemsPO.value = response.data.items.length;
+        
+        // Mapear items de la compra a productos del componente
+        products.value = response.data.items.map(item => ({
+            id: item.product_id,
+            name: item.product.name,
+            sku: item.product.sku,
+            category: item.product.description || 'Sin categoría',
+            quantityOrdered: item.quantity,
+            quantityReceived: 0,
+            warehouseId: null,
+            requiresSerial: item.product.is_serial, // Determina si requiere serial basado en el producto
+            serialNumbers: [],
+            purchaseCost: parseFloat(item.subtotal),
+            attributes: item.product.attributes || null,
+        }));
+        
+    } catch (error) {
+        console.error('Error al cargar los detalles de la compra:', error);
+        toast.add({ 
+            severity: 'error', 
+            summary: 'Error', 
+            detail: 'No se pudieron cargar los detalles de la compra', 
+            life: 3000 
+        });
+        router.back();
+    } finally {
+        loading.value = false;
+    }
+}
+
+function initializeManualMode() {
+    // En modo manual, limpiar productos de ejemplo y establecer almacén por defecto
+    products.value = [];
+    purchaseOrderNumber.value = 'Entrada Manual';
+    totalItemsPO.value = 0;
+    
+    // Obtener el nombre del almacén si se especificó
+    if (targetWarehouseId.value) {
+        const warehouse = warehouseStore.warehouses.find(w => w.id === targetWarehouseId.value);
+        if (warehouse) {
+            toast.add({ 
+                severity: 'info', 
+                summary: 'Entrada Manual', 
+                detail: `Agregando inventario al almacén: ${warehouse.name}`, 
+                life: 3000 
+            });
+        }
+    }
+}
+
+onMounted(async () => {
+    await warehouseStore.fetchWarehouses();
+    // Establecer el primer almacén activo como predeterminado
+    if (warehouseStore.activeWarehouses.length > 0) {
+        newSerialWarehouse.value = warehouseStore.activeWarehouses[0]?.id || 1;
+    }
+    
+    // Cargar datos según el modo
+    if (operationMode.value === 'purchase') {
+        await fetchPurchaseDetails();
+    } else {
+        initializeManualMode();
+    }
+});
+
+function cancel() {
+    router.back();
+}
+
+// Funciones para el modal de productos
+const openProductModal = () => {
+    showProductModal.value = true;
+};
+
+const handleProductsSelected = (selectedProductsList: ProductType[]) => {
+    selectedProductsList.forEach(product => {
+        // Verificar si el producto ya está en la lista
+        const exists = products.value.find(p => p.id === product.id);
+        if (!exists) {
+            products.value.push({
+                id: product.id,
+                name: product.name,
+                sku: product.sku,
+                category: product.description || 'Sin categoría',
+                quantityOrdered: 1, // Cantidad inicial
+                quantityReceived: 0,
+                warehouseId: targetWarehouseId.value || null,
+                requiresSerial: product.is_serial,
+                serialNumbers: [],
+                purchaseCost: 0, // El usuario puede ajustar esto
+                attributes: product.attributes || undefined,
+            });
+        }
+    });
+    
+    toast.add({ 
+        severity: 'success', 
+        summary: 'Productos Agregados', 
+        detail: `Se agregaron ${selectedProductsList.length} producto(s)`, 
+        life: 3000 
+    });
+};
+
+const removeProduct = (productId: number) => {
+    const index = products.value.findIndex(p => p.id === productId);
+    if (index > -1) {
+        products.value.splice(index, 1);
+        toast.add({ 
+            severity: 'info', 
+            summary: 'Producto Eliminado', 
+            detail: 'El producto ha sido eliminado de la lista', 
+            life: 2000 
+        });
+    }
+};
+</script>
+
+<template>
+    <div class="space-y-6">
+        <Toast />
+        
+        <!-- Loading State -->
+        <Card v-if="loading">
+            <template #content>
+                <div class="flex items-center justify-center py-8">
+                    <i class="pi pi-spinner pi-spin text-4xl text-primary"></i>
+                    <span class="ml-3 text-lg">Cargando detalles de la compra...</span>
+                </div>
+            </template>
+        </Card>
+        
+        <template v-else>
+        <!-- Page Header -->
+        <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
+            <div>
+                <h2 class="text-3xl font-black text-slate-900 tracking-tight">Registrar Entrada de Mercancía</h2>
+                <p class="text-slate-500 mt-1 flex items-center gap-2">
+                    <i :class="operationMode === 'purchase' ? 'pi pi-receipt' : 'pi pi-warehouse'" class="text-base"></i>
+                    <template v-if="operationMode === 'purchase'">
+                        No. Orden #{{ purchaseOrderNumber }} | 
+                        <span class="text-primary font-semibold">Distribución Multi-Almacén</span>
+                    </template>
+                    <template v-else>
+                        <span class="text-primary font-semibold">Entrada Manual de Inventario</span>
+                        <template v-if="targetWarehouseId">
+                            | Almacén: {{ warehouseStore.warehouses.find(w => w.id === targetWarehouseId)?.name }}
+                        </template>
+                    </template>
+                </p>
+            </div>
+            <div class="flex items-center gap-3">
+                <Card class="shadow-sm" v-if="operationMode === 'purchase'">
+                    <template #content>
+                        <div class="flex gap-4 px-2">
+                            <div class="text-center">
+                                <p class="text-[10px] text-slate-500 uppercase tracking-wider font-bold">Total Items PO</p>
+                                <p class="text-lg font-black text-slate-900 leading-tight">{{ totalItemsPO }}</p>
+                            </div>
+                            <div class="w-px bg-slate-200 h-8 self-center"></div>
+                            <div class="text-center">
+                                <p class="text-[10px] text-slate-500 uppercase tracking-wider font-bold">Recibidos</p>
+                                <p class="text-lg font-black text-primary leading-tight">{{ totalReceived }}</p>
+                            </div>
+                        </div>
+                    </template>
+                </Card>
+                <Button 
+                    v-if="operationMode === 'manual'" 
+                    icon="pi pi-plus" 
+                    label="Agregar Producto" 
+                    severity="secondary" 
+                    outlined 
+                    @click="openProductModal"
+                />
+                <Button 
+                    v-if="operationMode === 'purchase'"
+                    icon="pi pi-eye" 
+                    label="Ver Detalles" 
+                    severity="secondary" 
+                    outlined 
+                />
+            </div>
+        </div>
+
+        <!-- Products Table -->
+        <Card>
+            <template #header>
+                <div class="px-6 py-4 border-b border-slate-200 bg-slate-50/50 flex justify-between items-center">
+                    <h3 class="font-bold text-slate-900">
+                        {{ operationMode === 'purchase' ? 'Productos de la Orden' : 'Productos a Ingresar' }}
+                    </h3>
+                    <span class="text-xs text-slate-500 flex items-center gap-1">
+                        <i class="pi pi-info-circle text-sm"></i>
+                        Seleccione el almacén de destino por cada producto
+                    </span>
+                </div>
+            </template>
+            <template #content>
+                <!-- Empty State para modo manual -->
+                <div v-if="operationMode === 'manual' && products.length === 0" class="text-center py-12">
+                    <i class="pi pi-inbox text-6xl text-slate-300 mb-4"></i>
+                    <h3 class="text-lg font-semibold text-slate-700 mb-2">No hay productos agregados</h3>
+                    <p class="text-sm text-slate-500 mb-6">Comienza agregando productos para crear la entrada de inventario</p>
+                    <Button 
+                        icon="pi pi-plus" 
+                        label="Agregar Producto" 
+                        severity="primary" 
+                        @click="openProductModal"
+                    />
+                </div>
+                
+                <div v-else class="overflow-x-auto -m-6">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="text-left text-xs font-bold text-slate-500 uppercase tracking-wider bg-slate-50">
+                                <th class="px-6 py-4" style="width: 35%;">Producto</th>
+                                <th class="px-6 py-4" style="width: 12%;">SKU / Ref</th>
+                                <th class="px-6 py-4 text-center" style="width: 8%;">Cant. PO</th>
+                                <th class="px-6 py-4 text-center" style="width: 10%;">Recibida</th>
+                                <th class="px-6 py-4" style="width: 20%;">Almacén de Destino</th>
+                                <th class="px-6 py-4 text-center" style="width: 15%;">Acciones</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-slate-200">
+                            <template v-for="product in products" :key="product.id">
+                                <tr :class="[
+                                    'hover:bg-slate-50 transition-colors',
+                                    isRowExpanded(product) ? 'bg-primary/2' : ''
+                                ]">
+                                    <td class="px-6 py-4" :class="{ 'border-l-4 border-primary': isRowExpanded(product) }">
+                                        <div class="flex items-center gap-3">
+                                            <div class="size-10 bg-slate-100 rounded-lg flex items-center justify-center"
+                                                :class="{ 'bg-primary/10 text-primary': isRowExpanded(product) }">
+                                                <i :class="[
+                                                    product.requiresSerial ? 'pi-desktop' : 'pi-box',
+                                                    'pi text-xl'
+                                                ]"></i>
+                                            </div>
+                                            <div class="flex flex-col">
+                                                <span class="text-sm font-semibold text-slate-900">{{ product.name }}</span>
+                                                <span class="text-xs text-slate-500">{{ product.category }}</span>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-slate-600">{{ product.sku }}</td>
+                                    <td class="px-6 py-4 text-center text-sm font-bold text-slate-900">
+                                        <template v-if="operationMode === 'manual'">
+                                            <InputNumber 
+                                                v-model="product.quantityOrdered" 
+                                                :min="1" 
+                                                showButtons
+                                                buttonLayout="horizontal"
+                                                :step="1"
+                                                class="w-full max-w-[120px] mx-auto"
+                                                :inputStyle="{ textAlign: 'center', fontWeight: 'bold', fontSize: '0.875rem', width: '60px' }"
+                                            />
+                                        </template>
+                                        <template v-else>
+                                            {{ product.quantityOrdered }}
+                                        </template>
+                                    </td>
+                                    <td class="px-6 py-4 text-center">
+                                        <InputNumber v-if="!product.requiresSerial" v-model="product.quantityReceived" 
+                                            :max="product.quantityOrdered" :min="0" 
+                                            showButtons
+                                            buttonLayout="horizontal"
+                                            :step="1"
+                                            class="w-full max-w-[120px] mx-auto"
+                                            :inputStyle="{ textAlign: 'center', fontWeight: 'bold', fontSize: '0.875rem', width: '60px' }" />
+                                        <span v-else class="text-sm font-black text-primary">
+                                            {{ product.quantityReceived }} / {{ product.quantityOrdered }}
+                                        </span>
+                                    </td>
+                                    <td class="px-6 py-4">
+                                        <Dropdown v-if="!product.requiresSerial" v-model="product.warehouseId" 
+                                            :options="warehouseStore.activeWarehouses" 
+                                            optionLabel="name" 
+                                            optionValue="id"
+                                            placeholder="Seleccione Almacén..." 
+                                            class="w-full" 
+                                            style="min-width: 200px;" />
+                                        <div v-else class="text-xs text-slate-400 italic">
+                                            Asignación por número de serie
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4 text-center">
+                                        <template v-if="product.requiresSerial">
+                                            <Button 
+                                                :label="isRowExpanded(product) ? 'OCULTAR' : 'GESTIONAR SERIES'"
+                                                :icon="isRowExpanded(product) ? 'pi pi-chevron-up' : 'pi pi-qrcode'"
+                                                :severity="isRowExpanded(product) ? 'secondary' : 'info'"
+                                                :outlined="!isRowExpanded(product)"
+                                                size="small" 
+                                                @click="toggleRow(product)" 
+                                            />
+                                        </template>
+                                        <template v-else>
+                                            <Badge value="Estándar" severity="secondary" />
+                                        </template>
+                                        
+                                        <!-- Botón eliminar en modo manual -->
+                                        <Button 
+                                            v-if="operationMode === 'manual'"
+                                            icon="pi pi-trash"
+                                            severity="danger"
+                                            text
+                                            rounded
+                                            size="small"
+                                            class="ml-2"
+                                            @click="removeProduct(product.id)"
+                                            v-tooltip.top="'Eliminar producto'"
+                                        />
+                                    </td>
+                                </tr>
+                                
+                                <!-- Serial Numbers Expansion -->
+                                <tr v-if="isRowExpanded(product)" class="bg-primary/2">
+                                    <td colspan="6" class="px-10 pb-6 pt-2">
+                                        <Card class="border border-primary/20 shadow-sm">
+                                            <template #header>
+                                                <div class="px-5 pt-5 pb-3 border-b border-slate-100">
+                                                    <div class="flex items-center justify-between mb-2">
+                                                        <div>
+                                                            <h4 class="text-sm font-bold text-slate-700">
+                                                                Entrada de Números de Serie 
+                                                                ({{ product.quantityOrdered - product.serialNumbers.length }} Pendientes)
+                                                            </h4>
+                                                            <p class="text-[11px] text-slate-500">
+                                                                Defina el almacén para cada equipo escaneado
+                                                            </p>
+                                                        </div>
+                                                        <Badge severity="info">
+                                                            <i class="pi pi-qrcode mr-1"></i>
+                                                            Listo para escanear
+                                                        </Badge>
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <template #content>
+                                                <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
+                                                    <!-- Serial Input Form -->
+                                                    <div class="lg:col-span-5 space-y-4">
+                                                        <div>
+                                                            <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">
+                                                                Número de Serie
+                                                            </label>
+                                                            <div class="relative">
+                                                                <i class="pi pi-qrcode absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                                                                <InputText v-model="newSerialNumber" 
+                                                                    placeholder="Escanear o escribir serie..." 
+                                                                    class="w-full pl-10" />
+                                                            </div>
+                                                        </div>
+                                                        <div>
+                                                            <label class="block text-[10px] font-bold text-slate-500 uppercase mb-1">
+                                                                Almacén Destino
+                                                            </label>
+                                                            <Dropdown v-model="newSerialWarehouse" 
+                                                                :options="warehouseStore.activeWarehouses" optionLabel="name" optionValue="id"
+                                                                class="w-full" />
+                                                        </div>
+                                                        <Button label="Registrar Serie" icon="pi pi-plus" 
+                                                            class="w-full" severity="secondary"
+                                                            @click="addSerialNumber(product)" />
+                                                    </div>
+                                                    
+                                                    <!-- Serial Numbers List -->
+                                                    <div class="lg:col-span-7">
+                                                        <Card class="bg-slate-50 border border-slate-200">
+                                                            <template #content>
+                                                                <div class="overflow-x-auto -m-6">
+                                                                    <table class="w-full text-xs">
+                                                                        <thead class="bg-slate-100">
+                                                                            <tr>
+                                                                                <th class="px-3 py-2 text-left font-bold text-slate-600">
+                                                                                    Nº Serie
+                                                                                </th>
+                                                                                <th class="px-3 py-2 text-left font-bold text-slate-600">
+                                                                                    Almacén Destino
+                                                                                </th>
+                                                                                <th class="px-3 py-2"></th>
+                                                                            </tr>
+                                                                        </thead>
+                                                                        <tbody class="divide-y divide-slate-200">
+                                                                            <tr v-for="(sn, index) in product.serialNumbers" :key="index">
+                                                                                <td class="px-3 py-2 font-mono text-slate-900">
+                                                                                    {{ sn.serial }}
+                                                                                </td>
+                                                                                <td class="px-3 py-2">
+                                                                                    <Dropdown v-model="sn.warehouseId" 
+                                                                                        :options="warehouseStore.activeWarehouses" 
+                                                                                        optionLabel="name" 
+                                                                                        optionValue="id"
+                                                                                        class="w-full text-xs" />
+                                                                                </td>
+                                                                                <td class="px-3 py-2 text-right">
+                                                                                    <Button icon="pi pi-trash" 
+                                                                                        severity="danger" 
+                                                                                        text 
+                                                                                        rounded 
+                                                                                        size="small"
+                                                                                        @click="removeSerialNumber(product, index)" />
+                                                                                </td>
+                                                                            </tr>
+                                                                            <tr v-if="product.serialNumbers.length === 0">
+                                                                                <td colspan="3" class="px-3 py-4 text-center text-slate-400">
+                                                                                    No hay números de serie registrados
+                                                                                </td>
+                                                                            </tr>
+                                                                        </tbody>
+                                                                    </table>
+                                                                </div>
+                                                            </template>
+                                                        </Card>
+                                                    </div>
+                                                </div>
+                                            </template>
+                                        </Card>
+                                    </td>
+                                </tr>
+                            </template>
+                        </tbody>
+                    </table>
+                </div>
+            </template>
+        </Card>
+
+        <!-- Summary and Alerts -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="md:col-span-2">
+                <Card v-if="!isFormValid" class="bg-amber-50 border border-amber-200">
+                    <template #content>
+                        <div class="flex items-start gap-4">
+                            <i class="pi pi-exclamation-triangle text-amber-600 text-xl"></i>
+                            <div>
+                                <p class="text-sm font-bold text-amber-800">Pendiente de Validación y Distribución</p>
+                                <p class="text-sm text-amber-700">
+                                    Por favor complete todos los campos requeridos antes de confirmar la recepción.
+                                </p>
+                            </div>
+                        </div>
+                    </template>
+                </Card>
+            </div>
+            
+            <Card class="shadow-sm">
+                <template #header>
+                    <div class="px-6 pt-4">
+                        <h4 class="text-xs font-bold text-slate-500 uppercase tracking-wider">
+                            Resumen de Destinos
+                        </h4>
+                    </div>
+                </template>
+                <template #content>
+                    <div class="space-y-2 -mt-2">
+                        <div v-for="warehouse in warehouseSummary" :key="warehouse.name" 
+                            class="flex justify-between text-xs">
+                            <span class="text-slate-600">{{ warehouse.name }}</span>
+                            <span class="font-bold text-slate-900">
+                                {{ warehouse.count }} {{ warehouse.count === 1 ? 'Unidad' : 'Unidades' }}
+                            </span>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+        </div>
+
+        <!-- Footer Actions -->
+        <div class="flex items-center justify-end gap-4 pt-4 border-t border-slate-200">
+            <Button label="Cancelar" severity="secondary" text @click="cancel" />
+            <Button 
+                :label="operationMode === 'purchase' ? 'Confirmar Recepción Multi-Almacén' : 'Confirmar Entrada de Inventario'"
+                icon="pi pi-check" 
+                :disabled="!isFormValid || products.length === 0"
+                @click="confirmReceipt" 
+            />
+        </div>
+        </template>
+
+        <!-- Modal de Selección de Productos -->
+        <ModalProducts 
+            v-model:visible="showProductModal" 
+            @products-selected="handleProductsSelected"
+        />
+    </div>
+</template>
+
+<style scoped>
+/* Estilos adicionales si son necesarios */
+</style>
diff --git a/src/modules/warehouse/components/WarehouseClassification.vue b/src/modules/warehouse/components/WarehouseClassification.vue
new file mode 100644
index 0000000..21cb9df
--- /dev/null
+++ b/src/modules/warehouse/components/WarehouseClassification.vue
@@ -0,0 +1,580 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import Column from 'primevue/column';
+import ConfirmDialog from 'primevue/confirmdialog';
+import DataTable from 'primevue/datatable';
+import Dialog from 'primevue/dialog';
+import Dropdown from 'primevue/dropdown';
+import InputText from 'primevue/inputtext';
+import Textarea from 'primevue/textarea';
+import ProgressSpinner from 'primevue/progressspinner';
+import Toast from 'primevue/toast';
+import { useClassificationStore } from '../stores/classificationStore';
+import type { Classification } from '../types/warehouse.clasification';
+
+const confirm = useConfirm();
+const toast = useToast();
+const classificationStore = useClassificationStore();
+
+interface Category {
+    id: number;
+    code: string;
+    name: string;
+    description: string;
+    parent_id: number | null;
+    created_at: string;
+    subcategories: Category[];
+}
+
+const selectedCategory = ref<Category | null>(null);
+const showCreateModal = ref(false);
+const isSubmitting = ref(false);
+const isEditMode = ref(false);
+const editingId = ref<number | null>(null);
+
+// Computed properties from store
+const loading = computed(() => classificationStore.loading);
+const categories = computed(() => transformClassifications(classificationStore.classifications));
+
+// Form data
+const formData = ref({
+    code: '',
+    name: '',
+    description: '',
+    parent_id: null as number | null
+});
+
+// Transform API data to component structure
+const transformClassifications = (classifications: Classification[]): Category[] => {
+    return classifications.map(cls => ({
+        id: cls.id,
+        code: cls.code,
+        name: cls.name,
+        description: cls.description,
+        parent_id: cls.parent_id,
+        created_at: cls.created_at,
+        subcategories: cls.children ? cls.children.map(child => ({
+            id: child.id,
+            code: child.code,
+            name: child.name,
+            description: child.description,
+            parent_id: child.parent_id,
+            created_at: child.created_at,
+            subcategories: []
+        })) : []
+    }));
+};
+
+const loadClassifications = async () => {
+    try {
+        await classificationStore.fetchClassifications();
+        
+        // Select first category by default
+        if (categories.value.length > 0 && categories.value[0]) {
+            selectedCategory.value = categories.value[0];
+        }
+    } catch (error) {
+        console.error('Error loading classifications:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudieron cargar las clasificaciones.',
+            life: 3000
+        });
+    }
+};
+
+const selectCategory = (category: Category) => {
+    selectedCategory.value = category;
+};
+
+const addNewCategory = () => {
+    // Reset form
+    isEditMode.value = false;
+    editingId.value = null;
+    formData.value = {
+        code: '',
+        name: '',
+        description: '',
+        parent_id: null
+    };
+    showCreateModal.value = true;
+};
+
+const closeModal = () => {
+    showCreateModal.value = false;
+    isEditMode.value = false;
+    editingId.value = null;
+};
+
+const createClassification = async () => {
+    try {
+        isSubmitting.value = true;
+        
+        if (isEditMode.value && editingId.value) {
+            // Update existing classification
+            await classificationStore.updateClassification(editingId.value, formData.value);
+            
+            toast.add({
+                severity: 'success',
+                summary: 'Clasificación Actualizada',
+                detail: `La clasificación "${formData.value.name}" ha sido actualizada exitosamente.`,
+                life: 3000
+            });
+        } else {
+            // Create new classification
+            await classificationStore.createClassification(formData.value);
+            
+            toast.add({
+                severity: 'success',
+                summary: 'Clasificación Creada',
+                detail: `La clasificación "${formData.value.name}" ha sido creada exitosamente.`,
+                life: 3000
+            });
+        }
+        
+        showCreateModal.value = false;
+        isEditMode.value = false;
+        editingId.value = null;
+        // Reset form
+        formData.value = {
+            code: '',
+            name: '',
+            description: '',
+            parent_id: null
+        };
+    } catch (error) {
+        console.error('Error saving classification:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: isEditMode.value 
+                ? 'No se pudo actualizar la clasificación. Por favor, intenta nuevamente.'
+                : 'No se pudo crear la clasificación. Por favor, intenta nuevamente.',
+            life: 3000
+        });
+    } finally {
+        isSubmitting.value = false;
+    }
+};
+
+const addSubcategory = () => {
+    if (selectedCategory.value) {
+        isEditMode.value = false;
+        editingId.value = null;
+        formData.value = {
+            code: '',
+            name: '',
+            description: '',
+            parent_id: selectedCategory.value.id
+        };
+        showCreateModal.value = true;
+    }
+};
+
+const editCategory = () => {
+    if (!selectedCategory.value) return;
+    
+    isEditMode.value = true;
+    editingId.value = selectedCategory.value.id;
+    formData.value = {
+        code: selectedCategory.value.code,
+        name: selectedCategory.value.name,
+        description: selectedCategory.value.description,
+        parent_id: selectedCategory.value.parent_id
+    };
+    showCreateModal.value = true;
+};
+
+const deleteCategory = () => {
+    if (!selectedCategory.value) return;
+    
+    confirm.require({
+        message: `¿Estás seguro de eliminar la clasificación "${selectedCategory.value.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                const categoryName = selectedCategory.value!.name;
+                await classificationStore.deleteClassification(selectedCategory.value!.id);
+                
+                toast.add({
+                    severity: 'success',
+                    summary: 'Clasificación Eliminada',
+                    detail: `La clasificación "${categoryName}" ha sido eliminada exitosamente.`,
+                    life: 3000
+                });
+                
+                // Clear selection
+                selectedCategory.value = null;
+            } catch (error) {
+                console.error('Error deleting classification:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error al Eliminar',
+                    detail: 'No se pudo eliminar la clasificación. Verifica si tiene subclasificaciones asociadas.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+const editSubcategory = (subcategory: Category) => {
+    isEditMode.value = true;
+    editingId.value = subcategory.id;
+    formData.value = {
+        code: subcategory.code,
+        name: subcategory.name,
+        description: subcategory.description,
+        parent_id: subcategory.parent_id
+    };
+    showCreateModal.value = true;
+};
+
+const deleteSubcategory = (subcategory: Category) => {
+    confirm.require({
+        message: `¿Estás seguro de eliminar la subclasificación "${subcategory.name}"?`,
+        header: 'Confirmar Eliminación',
+        icon: 'pi pi-exclamation-triangle',
+        rejectLabel: 'Cancelar',
+        acceptLabel: 'Eliminar',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
+        accept: async () => {
+            try {
+                await classificationStore.deleteClassification(subcategory.id);
+                
+                toast.add({
+                    severity: 'success',
+                    summary: 'Subclasificación Eliminada',
+                    detail: `La subclasificación "${subcategory.name}" ha sido eliminada exitosamente.`,
+                    life: 3000
+                });
+            } catch (error) {
+                console.error('Error deleting subcategory:', error);
+                toast.add({
+                    severity: 'error',
+                    summary: 'Error al Eliminar',
+                    detail: 'No se pudo eliminar la subclasificación.',
+                    life: 3000
+                });
+            }
+        }
+    });
+};
+
+onMounted(() => {
+    loadClassifications();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Confirm Dialog -->
+        <ConfirmDialog></ConfirmDialog>
+
+        <!-- Page Heading -->
+        <div class="flex flex-wrap items-center justify-between gap-3">
+            <h1 class="text-2xl font-bold leading-tight tracking-tight text-surface-900 dark:text-white">
+                Administración de Clasificaciones
+            </h1>
+        </div>
+
+        <!-- Two-Panel Layout -->
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <!-- Left Panel (Category Tree) -->
+            <Card class="lg:col-span-1">
+                <template #content>
+                    <div class="flex flex-col gap-4">
+                        <!-- Add Category Button -->
+                        <Button
+                            label="Agregar Nueva Clasificación"
+                            icon="pi pi-plus"
+                            class="w-full"
+                            @click="addNewCategory"
+                        />
+
+                        <!-- Categories List -->
+                        <div v-if="loading" class="flex items-center justify-center py-8">
+                            <ProgressSpinner style="width: 50px; height: 50px" />
+                        </div>
+                        <div v-else-if="categories.length === 0" class="flex flex-col items-center justify-center py-8 text-center">
+                            <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                            <p class="text-sm text-surface-500 dark:text-surface-400">
+                                No hay clasificaciones creadas
+                            </p>
+                        </div>
+                        <div v-else class="flex flex-col gap-1">
+                            <div
+                                v-for="category in categories"
+                                :key="category.id"
+                                :class="[
+                                    'flex cursor-pointer items-center justify-between gap-4 rounded-lg px-4 py-3 transition-colors',
+                                    selectedCategory?.id === category.id
+                                        ? 'bg-primary/10 text-primary'
+                                        : 'hover:bg-surface-100 dark:hover:bg-surface-800'
+                                ]"
+                                @click="selectCategory(category)"
+                            >
+                                <div class="flex items-center gap-4">
+                                    <div
+                                        :class="[
+                                            'flex size-10 shrink-0 items-center justify-center rounded-lg',
+                                            selectedCategory?.id === category.id
+                                                ? 'bg-primary/20 text-primary'
+                                                : 'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-400'
+                                        ]"
+                                    >
+                                        <i class="pi pi-tag"></i>
+                                    </div>
+                                    <p
+                                        :class="[
+                                            'flex-1 truncate text-base',
+                                            selectedCategory?.id === category.id
+                                                ? 'font-semibold text-primary'
+                                                : 'font-normal text-surface-800 dark:text-surface-300'
+                                        ]"
+                                    >
+                                        {{ category.name }}
+                                    </p>
+                                </div>
+                                <div :class="selectedCategory?.id === category.id ? 'text-primary' : 'text-surface-400'">
+                                    <i class="pi pi-chevron-right"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+
+            <!-- Right Panel (Details View) -->
+            <Card v-if="!selectedCategory" class="lg:col-span-2">
+                <template #content>
+                    <div class="flex flex-col items-center justify-center py-16">
+                        <i class="pi pi-tag text-6xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                        <h3 class="text-xl font-semibold text-surface-700 dark:text-surface-300 mb-2">
+                            Selecciona una clasificación
+                        </h3>
+                        <p class="text-sm text-surface-500 dark:text-surface-400">
+                            Elige una clasificación de la lista para ver sus detalles y subclasificaciones
+                        </p>
+                    </div>
+                </template>
+            </Card>
+
+            <Card v-else class="lg:col-span-2">
+                <template #content>
+                    <div class="flex flex-col gap-6">
+                        <!-- Header -->
+                        <div class="flex flex-wrap items-start justify-between gap-4">
+                            <div>
+                                <p class="text-xs font-medium uppercase tracking-wider text-surface-500 dark:text-surface-400">
+                                    Detalles de la Clasificación
+                                </p>
+                                <h3 class="text-xl font-bold text-surface-900 dark:text-white">
+                                    {{ selectedCategory.name }}
+                                </h3>
+                                <p class="mt-1 text-sm text-surface-600 dark:text-surface-400">
+                                    {{ selectedCategory.description }}
+                                </p>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <Button
+                                    icon="pi pi-pencil"
+                                    outlined
+                                    rounded
+                                    @click="editCategory"
+                                />
+                                <Button
+                                    icon="pi pi-trash"
+                                    severity="danger"
+                                    outlined
+                                    rounded
+                                    @click="deleteCategory"
+                                />
+                            </div>
+                        </div>
+
+                        <!-- Subcategory Section -->
+                        <div class="flex flex-col">
+                            <div class="mb-4 flex items-center justify-between">
+                                <h4 class="font-semibold text-surface-800 dark:text-surface-200">
+                                    Subclasificaciones ({{ selectedCategory.subcategories.length }})
+                                </h4>
+                                <Button
+                                    label="Agregar Subclasificación"
+                                    icon="pi pi-plus"
+                                    size="small"
+                                    @click="addSubcategory"
+                                />
+                            </div>
+
+                            <!-- Subcategory Table -->
+                            <DataTable
+                                :value="selectedCategory.subcategories"
+                                stripedRows
+                                responsiveLayout="scroll"
+                            >
+                                <Column field="name" header="Nombre" sortable>
+                                    <template #body="slotProps">
+                                        <span class="font-medium text-surface-900 dark:text-white">
+                                            {{ slotProps.data.name }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column field="created_at" header="Fecha de Creación" sortable>
+                                    <template #body="slotProps">
+                                        <span class="text-surface-500 dark:text-surface-400">
+                                            {{ new Date(slotProps.data.created_at).toLocaleDateString('es-MX', { 
+                                                year: 'numeric', 
+                                                month: 'short', 
+                                                day: 'numeric',
+                                                hour: '2-digit',
+                                                minute: '2-digit'
+                                            }) }}
+                                        </span>
+                                    </template>
+                                </Column>
+
+                                <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right">
+                                    <template #body="slotProps">
+                                        <div class="flex items-center justify-end gap-2">
+                                            <Button
+                                                icon="pi pi-pencil"
+                                                text
+                                                rounded
+                                                size="small"
+                                                @click="editSubcategory(slotProps.data)"
+                                            />
+                                            <Button
+                                                icon="pi pi-trash"
+                                                text
+                                                rounded
+                                                size="small"
+                                                severity="danger"
+                                                @click="deleteSubcategory(slotProps.data)"
+                                            />
+                                        </div>
+                                    </template>
+                                </Column>
+
+                                <template #empty>
+                                    <div class="flex flex-col items-center justify-center py-8 text-center">
+                                        <i class="pi pi-inbox text-4xl text-surface-300 dark:text-surface-600 mb-4"></i>
+                                        <h3 class="text-lg font-semibold text-surface-900 dark:text-surface-0">
+                                            No hay subclasificaciones
+                                        </h3>
+                                        <p class="text-sm text-surface-500 dark:text-surface-400 mt-2">
+                                            Agrega subclasificaciones para organizar mejor esta categoría
+                                        </p>
+                                    </div>
+                                </template>
+                            </DataTable>
+                        </div>
+                    </div>
+                </template>
+            </Card>
+        </div>
+
+        <!-- Create/Edit Classification Modal -->
+        <Dialog
+            v-model:visible="showCreateModal"
+            modal
+            :header="isEditMode ? 'Editar Clasificación' : 'Crear Nueva Clasificación'"
+            :style="{ width: '500px' }"
+        >
+            <div class="flex flex-col gap-4 py-4">
+                <!-- Code -->
+                <div>
+                    <label for="code" class="block text-sm font-medium mb-2">
+                        Código <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                        id="code"
+                        v-model="formData.code"
+                        class="w-full"
+                        placeholder="Ej: GS-06"
+                    />
+                </div>
+
+                <!-- Name -->
+                <div>
+                    <label for="name" class="block text-sm font-medium mb-2">
+                        Nombre <span class="text-red-500">*</span>
+                    </label>
+                    <InputText
+                        id="name"
+                        v-model="formData.name"
+                        class="w-full"
+                        placeholder="Ej: PRINCIPAL"
+                    />
+                </div>
+
+                <!-- Description -->
+                <div>
+                    <label for="description" class="block text-sm font-medium mb-2">
+                        Descripción
+                    </label>
+                    <Textarea
+                        id="description"
+                        v-model="formData.description"
+                        rows="3"
+                        class="w-full"
+                        placeholder="Descripción opcional de la clasificación"
+                    />
+                </div>
+
+                <!-- Parent Category -->
+                <div>
+                    <label for="parent" class="block text-sm font-medium mb-2">
+                        Clasificación Padre (Opcional)
+                    </label>
+                    <Dropdown
+                        id="parent"
+                        v-model="formData.parent_id"
+                        :options="categories"
+                        optionLabel="name"
+                        optionValue="id"
+                        placeholder="Seleccionar clasificación padre..."
+                        class="w-full"
+                        showClear
+                    />
+                    <small class="text-surface-500 dark:text-surface-400">
+                        Deja vacío para crear una clasificación raíz
+                    </small>
+                </div>
+            </div>
+
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <Button
+                        label="Cancelar"
+                        severity="secondary"
+                        outlined
+                        @click="closeModal"
+                        :disabled="isSubmitting"
+                    />
+                    <Button
+                        :label="isEditMode ? 'Actualizar Clasificación' : 'Crear Clasificación'"
+                        @click="createClassification"
+                        :loading="isSubmitting"
+                        :disabled="!formData.code || !formData.name"
+                    />
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/modules/warehouse/components/WarehouseDetails.vue b/src/modules/warehouse/components/WarehouseDetails.vue
new file mode 100644
index 0000000..5761606
--- /dev/null
+++ b/src/modules/warehouse/components/WarehouseDetails.vue
@@ -0,0 +1,446 @@
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Breadcrumb -->
+        <Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
+
+        <!-- Page Header -->
+        <div class="flex flex-wrap items-center justify-between gap-4">
+            <div class="flex flex-col gap-2">
+                <h1
+                    class="text-surface-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    {{ warehouseData?.warehouse.name || 'Cargando...' }}
+                </h1>
+                <div class="flex flex-wrap items-center gap-3">
+                    <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400">
+                        <i class="pi pi-hash text-sm"></i>
+                        <span class="text-sm">{{ warehouseData?.warehouse.code || '-' }}</span>
+                    </div>
+                    <div class="size-1 bg-surface-300 dark:bg-surface-600 rounded-full"></div>
+                    <div class="flex items-center gap-2 text-surface-500 dark:text-surface-400"
+                        v-if="warehouseData?.warehouse.address">
+                        <i class="pi pi-map-marker text-sm"></i>
+                        <span class="text-sm">{{ warehouseData.warehouse.address }}</span>
+                    </div>
+                    <div class="size-1 bg-surface-300 dark:bg-surface-600 rounded-full"
+                        v-if="warehouseData?.warehouse.address"></div>
+                    <Tag :value="warehouseData?.warehouse.is_active ? 'Operacional' : 'Inactivo'"
+                        :severity="warehouseData?.warehouse.is_active ? 'success' : 'secondary'" />
+                </div>
+            </div>
+            <div class="flex gap-3">
+                <Button label="Entradas" icon="pi pi-plus" @click="openBatchAdd" />
+                <Button label="Salidas" icon="pi pi-minus" @click="openBatchRemove" />
+            </div>
+        </div>
+
+        <!-- Tabs & Main Content Table -->
+        <Card class="shadow-sm">
+            <template #content>
+                <TabView v-model:activeIndex="activeTab" class="w-full">
+                    <!-- Stock Actual Tab -->
+                    <TabPanel value="0">
+                        <template #header>
+                            <div class="flex items-center gap-2">
+                                <i class="pi pi-box"></i>
+                                <span>Stock Actual</span>
+                            </div>
+                        </template>
+
+                        <!-- Filters -->
+                        <div class="flex flex-wrap items-center justify-end gap-3 mb-4">
+                            <Select v-model="selectedCategory" :options="categoryOptions" optionLabel="label"
+                                optionValue="value" placeholder="Todas las Categorías" class="w-full md:w-48" />
+                            <Select v-model="selectedStockLevel" :options="stockLevelOptions" optionLabel="label"
+                                optionValue="value" placeholder="Todos los Niveles" class="w-full md:w-48" />
+                            <Button icon="pi pi-filter" outlined severity="secondary" />
+                        </div>
+
+                        <!-- Current Stock Table -->
+                        <DataTable :value="inventoryData" :paginator="true" :rows="10"
+                            :rowsPerPageOptions="[10, 25, 50]"
+                            paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                            currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} resultados"
+                            :loading="loading" stripedRows responsiveLayout="scroll" class="text-sm">
+                            <Column field="sku" header="SKU" sortable class="font-mono">
+                                <template #body="slotProps">
+                                    <span class="font-semibold">{{ slotProps.data.sku }}</span>
+                                </template>
+                            </Column>
+                            <Column field="product" header="Producto" sortable>
+                                <template #body="slotProps">
+                                    <div class="flex flex-col gap-1">
+                                        <span class="font-semibold">{{ slotProps.data.product }}</span>
+                                        <span class="text-xs text-surface-500">{{ slotProps.data.category }}</span>
+                                    </div>
+                                </template>
+                            </Column>
+                            <Column field="quantity" header="Cantidad" sortable>
+                                <template #body="slotProps">
+                                    <span class="font-bold tabular-nums">{{ slotProps.data.quantity.toLocaleString()
+                                    }}</span>
+                                </template>
+                            </Column>
+                            <Column field="unit" header="Unidad" sortable />
+                            <Column field="location" header="Ubicación" sortable>
+                                <template #body="slotProps">
+                                    <div class="flex items-center gap-2">
+                                        <i class="pi pi-map-marker text-surface-400 text-xs"></i>
+                                        <span>{{ slotProps.data.location }}</span>
+                                    </div>
+                                </template>
+                            </Column>
+                            <Column field="status" header="Estado" sortable>
+                                <template #body="slotProps">
+                                    <Tag :value="slotProps.data.status"
+                                        :severity="getStatusSeverity(slotProps.data.status)" />
+                                </template>
+                            </Column>
+                            <Column field="lastUpdate" header="Última Actualización" sortable>
+                                <template #body="slotProps">
+                                    <span class="text-xs text-surface-500">{{ slotProps.data.lastUpdate }}</span>
+                                </template>
+                            </Column>
+                            <Column header="Acciones" :exportable="false">
+                                <template #body="slotProps">
+                                    <div class="flex gap-2">
+                                        <Button icon="pi pi-eye" outlined rounded size="small" severity="secondary"
+                                            @click="viewItem(slotProps.data)" />
+                                        <Button icon="pi pi-pencil" outlined rounded size="small"
+                                            @click="editItem(slotProps.data)" />
+                                    </div>
+                                </template>
+                            </Column>
+                        </DataTable>
+                    </TabPanel>
+
+                    <!-- Historial de Movimientos Tab -->
+                    <TabPanel value="1">
+                        <template #header>
+                            <div class="flex items-center gap-2">
+                                <i class="pi pi-history"></i>
+                                <span>Historial de Movimientos</span>
+                            </div>
+                        </template>
+
+                        <!-- Movement History Table -->
+                        <DataTable :value="movementHistory" :paginator="true" :rows="10"
+                            :rowsPerPageOptions="[10, 25, 50]"
+                            paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                            currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} resultados"
+                            :loading="loadingMovements" stripedRows responsiveLayout="scroll" class="text-sm">
+                            <Column field="date" header="Fecha" sortable />
+                            <Column field="type" header="Tipo" sortable>
+                                <template #body="slotProps">
+                                    <Tag :value="slotProps.data.type"
+                                        :severity="getMovementTypeSeverity(slotProps.data.type)" />
+                                </template>
+                            </Column>
+                            <Column field="product" header="Producto" sortable />
+                            <Column field="quantity" header="Cantidad" sortable>
+                                <template #body="slotProps">
+                                    <span class="font-bold tabular-nums">{{ slotProps.data.quantity }}</span>
+                                </template>
+                            </Column>
+                            <Column field="user" header="Usuario" sortable />
+                            <Column field="reference" header="Referencia" sortable />
+                        </DataTable>
+                    </TabPanel>
+                </TabView>
+            </template>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import { warehouseService } from '../services/warehouseService';
+import { InventoryMovementsServices } from '../services/inventory-movements.services';
+import type { WarehouseDetailData } from '../types/warehouse';
+import type { InventoryMovement } from '../types/inventory-movements.interfaces';
+
+// PrimeVue Components
+import Toast from 'primevue/toast';
+import Breadcrumb from 'primevue/breadcrumb';
+import Card from 'primevue/card';
+import Button from 'primevue/button';
+import Tag from 'primevue/tag';
+import TabView from 'primevue/tabview';
+import TabPanel from 'primevue/tabpanel';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Select from 'primevue/select';
+
+const router = useRouter();
+const route = useRoute();
+const toast = useToast();
+
+// Services
+const inventoryMovementsService = new InventoryMovementsServices();
+
+// Reactive State
+const warehouseData = ref<WarehouseDetailData | null>(null);
+const loading = ref(false);
+const activeTab = ref(0);
+const selectedCategory = ref('all');
+const selectedStockLevel = ref('all');
+const loadingMovements = ref(false);
+
+// Breadcrumb
+const breadcrumbHome = ref({ icon: 'pi pi-home', to: '/' });
+const breadcrumbItems = computed(() => [
+    { label: 'Almacenes', to: '/warehouse' },
+    { label: warehouseData.value?.warehouse.name || 'Cargando...' }
+]);
+
+// Filter Options
+const categoryOptions = [
+    { label: 'Todas las Categorías', value: 'all' },
+    { label: 'Electrónica', value: 'electronics' },
+    { label: 'Maquinaria', value: 'machinery' },
+    { label: 'Textiles', value: 'textiles' },
+];
+
+const stockLevelOptions = [
+    { label: 'Todos los Niveles', value: 'all' },
+    { label: 'Stock Bajo', value: 'low' },
+    { label: 'En Stock', value: 'in_stock' },
+    { label: 'Sobrestock', value: 'overstock' },
+];
+
+// Inventory Data from API
+const inventoryData = ref<any[]>([]);
+
+// Movement History from API
+const movementHistory = ref<any[]>([]);
+// Methods
+const getStatusSeverity = (status: string) => {
+    const severityMap: Record<string, string> = {
+        'En Stock': 'success',
+        'Stock Bajo': 'warn',
+        'Stock Crítico': 'danger',
+        'Sin Stock': 'danger',
+        'Sobrestock': 'info',
+    };
+    return severityMap[status] || 'secondary';
+};
+
+const getMovementTypeSeverity = (type: string) => {
+    const severityMap: Record<string, string> = {
+        'Entrada': 'success',
+        'Salida': 'danger',
+        'Transferencia': 'info',
+        'Ajuste': 'warn',
+    };
+    return severityMap[type] || 'secondary';
+};
+
+const openBatchAdd = () => {
+    const warehouseId = route.params.id;
+    router.push({ 
+        name: 'WarehouseAddInventory',
+        query: { warehouse: warehouseId }
+    });
+};
+
+const openBatchRemove = () => {
+    const warehouseId = route.params.id;
+    router.push({ 
+        name: 'WarehouseOutOfStock',
+        query: { warehouse: warehouseId }
+    });
+};
+
+const viewItem = (item: any) => {
+    toast.add({
+        severity: 'info',
+        summary: 'Ver Item',
+        detail: `Visualizando: ${item.product}`,
+        life: 3000
+    });
+};
+
+const editItem = (item: any) => {
+    toast.add({
+        severity: 'info',
+        summary: 'Editar Item',
+        detail: `Editando: ${item.product}`,
+        life: 3000
+    });
+};
+
+// Helper function to get stock status
+const getStockStatus = (stock: number, stockMin: number | null) => {
+    if (stock === 0) return 'Sin Stock';
+    if (!stockMin) return 'En Stock';
+    if (stock < stockMin) return 'Stock Bajo';
+    if (stock < stockMin * 1.5) return 'Stock Crítico';
+    return 'En Stock';
+};
+
+// Helper function to format date
+const formatRelativeTime = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffDays > 0) return `Hace ${diffDays} día${diffDays > 1 ? 's' : ''}`;
+    if (diffHours > 0) return `Hace ${diffHours} hora${diffHours > 1 ? 's' : ''}`;
+    return 'Hace menos de 1 hora';
+};
+
+// Helper function to format date for movements
+const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleString('es-MX', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+};
+
+// Helper function to capitalize first letter
+const capitalizeFirstLetter = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+// Load inventory movements
+const loadInventoryMovements = async (warehouseId: number) => {
+    loadingMovements.value = true;
+    try {
+        const response = await inventoryMovementsService.getInventoryMovements(warehouseId);
+        
+        // Map API data to table format - flatten to show each product as a row
+        movementHistory.value = response.data.flatMap((movement: InventoryMovement) => {
+            const reference = movement.reference_document_id 
+                ? `${movement.reference_type || 'DOC'}-${movement.reference_document_id}`
+                : 'Sin referencia';
+            
+            // If no products, show basic movement info
+            if (!movement.products || movement.products.length === 0) {
+                return [{
+                    date: formatDate(movement.created_at),
+                    type: capitalizeFirstLetter(movement.type),
+                    product: 'Sin productos',
+                    quantity: '0',
+                    user: movement.user?.email || 'Sistema',
+                    reference: reference
+                }];
+            }
+            
+            // Create a row for each product in the movement
+            return movement.products.map((productItem) => {
+                const qty = typeof productItem.quantity === 'string' 
+                    ? parseFloat(productItem.quantity) 
+                    : productItem.quantity;
+                
+                const formattedQty = movement.type === 'entrada' 
+                    ? `+${qty}` 
+                    : `-${qty}`;
+                
+                return {
+                    date: formatDate(movement.created_at),
+                    type: capitalizeFirstLetter(movement.type),
+                    product: productItem.product.name,
+                    quantity: formattedQty,
+                    user: movement.user?.email || 'Sistema',
+                    reference: reference
+                };
+            });
+        });
+
+        toast.add({
+            severity: 'success',
+            summary: 'Movimientos Cargados',
+            detail: `${response.data.length} movimientos encontrados`,
+            life: 3000
+        });
+    } catch (error) {
+        console.error('Error al cargar movimientos:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'Error al cargar el historial de movimientos',
+            life: 3000
+        });
+    } finally {
+        loadingMovements.value = false;
+    }
+};
+
+// Lifecycle
+onMounted(async () => {
+    const warehouseId = route.params.id;
+
+    if (!warehouseId) {
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'ID de almacén no válido',
+            life: 3000
+        });
+        router.push({ name: 'Warehouses' });
+        return;
+    }
+
+    loading.value = true;
+
+    try {
+        const response = await warehouseService.getWarehouseById(Number(warehouseId));
+        warehouseData.value = response.data;
+
+        // Mapear stocks a formato de la tabla
+        inventoryData.value = response.data.stocks.map(stock => ({
+            sku: stock.product.sku,
+            product: stock.product.name,
+            category: stock.product.description || 'Sin categoría',
+            quantity: stock.stock,
+            unit: 'Unidades',
+            location: `Almacén ${response.data.warehouse.code}`,
+            status: getStockStatus(stock.stock, stock.stock_min),
+            lastUpdate: formatRelativeTime(stock.updated_at),
+            productId: stock.product_id,
+            stockMin: stock.stock_min,
+            stockMax: stock.stock_max,
+        }));
+
+        toast.add({
+            severity: 'success',
+            summary: 'Datos Cargados',
+            detail: `Almacén ${response.data.warehouse.name} cargado exitosamente`,
+            life: 3000
+        });
+
+        // Load inventory movements
+        await loadInventoryMovements(Number(warehouseId));
+    } catch (error) {
+        console.error('Error al cargar los datos del almacén:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'Error al cargar los datos del almacén',
+            life: 3000
+        });
+        router.push({ name: 'Warehouses' });
+    } finally {
+        loading.value = false;
+    }
+});
+
+
+
+</script>
+
+<style scoped>
+.tabular-nums {
+    font-variant-numeric: tabular-nums;
+}
+</style>
diff --git a/src/modules/warehouse/components/WarehouseForm.vue b/src/modules/warehouse/components/WarehouseForm.vue
new file mode 100644
index 0000000..5906bb4
--- /dev/null
+++ b/src/modules/warehouse/components/WarehouseForm.vue
@@ -0,0 +1,477 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import Breadcrumb from 'primevue/breadcrumb';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import InputText from 'primevue/inputtext';
+import InputSwitch from 'primevue/inputswitch';
+import Textarea from 'primevue/textarea';
+import Dropdown from 'primevue/dropdown';
+import Chip from 'primevue/chip';
+import Toast from 'primevue/toast';
+import { warehouseService } from '../services/warehouseService';
+import { useClassificationStore } from '../stores/classificationStore';
+
+const router = useRouter();
+const toast = useToast();
+const classificationStore = useClassificationStore();
+
+const breadcrumbItems = ref([
+    { label: 'Almacenes', route: '/warehouse' },
+    { label: 'Crear Almacén' }
+]);
+
+const home = ref({
+    icon: 'pi pi-home',
+    route: '/'
+});
+
+// Form data
+const formData = ref({
+    name: '',
+    code: '',
+    description: '',
+    address: '',
+    is_active: true,
+    phone: '',
+    email: ''
+});
+
+const isSubmitting = ref(false);
+
+// Categories from store
+const availableClassifications = computed(() => {
+    // Recursive function to ensure all children arrays are defined
+    const mapClassification = (cls: any): any => ({
+        id: cls.id,
+        name: cls.name,
+        code: cls.code,
+        parent_id: cls.parent_id,
+        children: (cls.children || []).map(mapClassification)
+    });
+    
+    return classificationStore.activeClassifications.map(mapClassification);
+});
+
+// Get root classifications (categories without parent)
+const rootClassifications = computed(() => 
+    availableClassifications.value.filter(c => c.parent_id === null)
+);
+
+// Categories
+const assignedCategories = ref<any[]>([]);
+
+// Get classification IDs from assigned categories
+const getClassificationIds = () => {
+    return assignedCategories.value.map(cat => cat.id);
+};
+
+const selectedParentCategory = ref(null);
+const selectedSubCategory = ref(null);
+
+// Get subcategories for selected parent
+const availableSubcategories = computed(() => {
+    if (!selectedParentCategory.value) return [];
+    const parent = availableClassifications.value.find(c => c.id === selectedParentCategory.value);
+    return parent?.children || [];
+});
+
+const addSelectedCategory = () => {
+    if (!selectedParentCategory.value) return;
+    
+    const parent = availableClassifications.value.find(c => c.id === selectedParentCategory.value);
+    if (!parent) return;
+    
+    let categoryToAdd = parent;
+    let categoryName = parent.name;
+    
+    // If subcategory is selected, use it instead
+    if (selectedSubCategory.value) {
+        const subcat = parent.children.find((c: any) => c.id === selectedSubCategory.value);
+        if (subcat) {
+            categoryToAdd = subcat;
+            categoryName = `${parent.name} > ${subcat.name}`;
+        }
+    }
+    
+    // Check if already added
+    if (assignedCategories.value.some((c: any) => c.id === categoryToAdd.id)) {
+        toast.add({
+            severity: 'warn',
+            summary: 'Categoría ya agregada',
+            detail: 'Esta categoría ya está asignada al almacén.',
+            life: 3000
+        });
+        return;
+    }
+    
+    assignedCategories.value.push({
+        id: categoryToAdd.id,
+        name: categoryName,
+        code: categoryToAdd.code,
+        parent_id: categoryToAdd.parent_id,
+        children: categoryToAdd.children || []
+    });
+    
+    // Reset selections
+    selectedParentCategory.value = null;
+    selectedSubCategory.value = null;
+};
+
+// Staff (unused, for future use)
+// const assignedStaff = ref([
+//     {
+//         id: 1,
+//         name: 'Jane Cooper',
+//         role: 'Gerente de Almacén',
+//         avatar: 'https://i.pravatar.cc/150?img=1'
+//     },
+//     {
+//         id: 2,
+//         name: 'Cody Fisher',
+//         role: 'Operador de Montacargas',
+//         avatar: 'https://i.pravatar.cc/150?img=2'
+//     },
+//     {
+//         id: 3,
+//         name: 'Esther Howard',
+//         role: 'Auxiliar de Recepción',
+//         avatar: 'https://i.pravatar.cc/150?img=3'
+//     }
+// ]);
+
+const saveDisabled = ref(false);
+
+const removeCategory = (id: number) => {
+    assignedCategories.value = assignedCategories.value.filter(cat => cat.id !== id);
+};
+
+// Unused staff methods (for future use)
+// const addStaff = () => {
+//     console.log('Add staff');
+// };
+
+// const editStaff = (id: number) => {
+//     console.log('Edit staff:', id);
+// };
+
+// const removeStaff = (id: number) => {
+//     assignedStaff.value = assignedStaff.value.filter(staff => staff.id !== id);
+// };
+
+const cancel = () => {
+    router.push('/warehouse');
+};
+
+const save = async () => {
+    try {
+        isSubmitting.value = true;
+        
+        const warehouseData = {
+            code: formData.value.code,
+            name: formData.value.name,
+            description: formData.value.description,
+            classifications: getClassificationIds()
+        };
+        
+        await warehouseService.createWarehouse(warehouseData);
+        
+        // Redirect to warehouse list with success message
+        router.push({ 
+            path: '/warehouse',
+            query: { 
+                created: 'true',
+                name: formData.value.name
+            }
+        });
+    } catch (error) {
+        console.error('Error creating warehouse:', error);
+        toast.add({
+            severity: 'error',
+            summary: 'Error',
+            detail: 'No se pudo crear el almacén. Por favor, intenta nuevamente.',
+            life: 3000
+        });
+    } finally {
+        isSubmitting.value = false;
+    }
+};
+
+onMounted(async () => {
+    await classificationStore.fetchClassifications();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Header con Breadcrumb y Acciones -->
+        <div class="flex flex-wrap items-center justify-between gap-4">
+            <div class="flex flex-col gap-2">
+                <!-- Breadcrumb -->
+                <Breadcrumb :home="home" :model="breadcrumbItems">
+                    <template #item="{ item }">
+                        <a 
+                            v-if="item.route" 
+                            :href="item.route"
+                            @click.prevent="router.push(item.route)"
+                            class="text-primary hover:underline"
+                        >
+                            {{ item.label }}
+                        </a>
+                        <span v-else class="text-surface-600 dark:text-surface-400">
+                            {{ item.label }}
+                        </span>
+                    </template>
+                </Breadcrumb>
+                
+                <!-- Title -->
+                <h1 class="text-3xl font-black leading-tight tracking-tight text-surface-900 dark:text-white">
+                    Crear Nuevo Almacén
+                </h1>
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="flex gap-3">
+                <Button
+                    label="Cancelar"
+                    outlined
+                    @click="cancel"
+                    :disabled="isSubmitting"
+                />
+                <Button
+                    label="Guardar Cambios"
+                    :disabled="saveDisabled || !formData.name || !formData.code"
+                    :loading="isSubmitting"
+                    @click="save"
+                />
+            </div>
+        </div>
+
+        <!-- Form Content -->
+        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+            <!-- Main Content - 2 columns -->
+            <div class="lg:col-span-2 space-y-6">
+                <!-- Warehouse Details Card -->
+                <Card>
+                    <template #title>Detalles del Almacén</template>
+                    <template #content>
+                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-6">
+                            <!-- Warehouse Name -->
+                            <div class="sm:col-span-4">
+                                <label for="name" class="block text-sm font-medium mb-2">
+                                    Nombre del Almacén
+                                </label>
+                                <InputText
+                                    id="name"
+                                    v-model="formData.name"
+                                    class="w-full"
+                                    placeholder="Ej: Centro de Distribución Norte"
+                                />
+                            </div>
+
+                            <!-- Warehouse Code -->
+                            <div class="sm:col-span-2">
+                                <label for="code" class="block text-sm font-medium mb-2">
+                                    Código de Almacén
+                                </label>
+                                <InputText
+                                    id="code"
+                                    v-model="formData.code"
+                                    class="w-full"
+                                    placeholder="WH-001"
+                                />
+                            </div>
+
+                            <!-- Description -->
+                            <div class="col-span-full">
+                                <label for="description" class="block text-sm font-medium mb-2">
+                                    Descripción
+                                </label>
+                                <Textarea
+                                    id="description"
+                                    v-model="formData.description"
+                                    rows="3"
+                                    class="w-full"
+                                    placeholder="Descripción general del almacén"
+                                />
+                            </div>
+
+                            <!-- Address -->
+                            <div class="col-span-full">
+                                <label for="address" class="block text-sm font-medium mb-2">
+                                    Ubicación / Dirección
+                                </label>
+                                <Textarea
+                                    id="address"
+                                    v-model="formData.address"
+                                    rows="3"
+                                    class="w-full"
+                                    placeholder="Dirección completa del almacén"
+                                />
+                            </div>
+
+                            <!-- Status -->
+                            <div class="sm:col-span-3">
+                                <label for="status" class="block text-sm font-medium mb-2">
+                                    Estado
+                                </label>
+                                <div class="flex items-center gap-3">
+                                    <InputSwitch
+                                        id="status"
+                                        v-model="formData.is_active"
+                                    />
+                                    <span class="text-sm font-medium">
+                                        {{ formData.is_active ? 'Activo' : 'Inactivo' }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </Card>
+
+                <!-- Warehouse Categories Card -->
+                <Card>
+                    <template #title>Categorías del Almacén</template>
+                    <template #content>
+                        <div class="space-y-6">
+                            <!-- Assigned Categories -->
+                            <div>
+                                <label class="block text-sm font-medium mb-2">
+                                    Categorías Asignadas
+                                </label>
+                                <div class="flex flex-wrap gap-2">
+                                    <Chip
+                                        v-for="category in assignedCategories"
+                                        :key="category.id"
+                                        :label="category.name"
+                                        removable
+                                        @remove="removeCategory(category.id)"
+                                    />
+                                    <span v-if="assignedCategories.length === 0" class="text-sm text-surface-500">
+                                        No hay categorías asignadas
+                                    </span>
+                                </div>
+                            </div>
+
+                            <!-- Select Categories -->
+                            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+                                <div>
+                                    <label for="parent-category" class="block text-sm font-medium mb-2">
+                                        Categoría
+                                    </label>
+                                    <Dropdown
+                                        id="parent-category"
+                                        v-model="selectedParentCategory"
+                                        :options="rootClassifications"
+                                        optionLabel="name"
+                                        optionValue="id"
+                                        placeholder="Selecciona una categoría..."
+                                        class="w-full"
+                                        showClear
+                                    />
+                                </div>
+
+                                <div>
+                                    <label for="sub-category" class="block text-sm font-medium mb-2">
+                                        Subcategoría (Opcional)
+                                    </label>
+                                    <Dropdown
+                                        id="sub-category"
+                                        v-model="selectedSubCategory"
+                                        :options="availableSubcategories"
+                                        optionLabel="name"
+                                        optionValue="id"
+                                        placeholder="Selecciona una subcategoría..."
+                                        class="w-full"
+                                        showClear
+                                        :disabled="!selectedParentCategory"
+                                    />
+                                </div>
+                            </div>
+
+                            <!-- Add Category Button -->
+                            <div>
+                                <Button
+                                    label="Agregar Categoría Seleccionada"
+                                    icon="pi pi-plus"
+                                    severity="secondary"
+                                    outlined
+                                    @click="addSelectedCategory"
+                                    :disabled="!selectedParentCategory"
+                                    class="w-full"
+                                />
+                            </div>
+                        </div>
+                    </template>
+                </Card>
+            </div>
+
+            <!-- Sidebar - 1 column -->
+           <!--  <div class="lg:col-span-1">
+               
+                <Card>
+                    <template #title>
+                        <div class="flex items-center justify-between">
+                            <span>Personal Asignado</span>
+                            <Button
+                                icon="pi pi-plus"
+                                label="Agregar"
+                                size="small"
+                                severity="secondary"
+                                outlined
+                                @click="addStaff"
+                            />
+                        </div>
+                    </template>
+                    <template #content>
+                        <div class="space-y-4">
+                            <div
+                                v-for="staff in assignedStaff"
+                                :key="staff.id"
+                                class="flex items-center gap-4"
+                            >
+                                <Avatar
+                                    :image="staff.avatar"
+                                    :label="staff.name.charAt(0)"
+                                    shape="circle"
+                                    size="large"
+                                />
+                                <div class="flex-1 min-w-0">
+                                    <p class="text-sm font-medium text-surface-900 dark:text-white truncate">
+                                        {{ staff.name }}
+                                    </p>
+                                    <p class="text-sm text-surface-500 dark:text-surface-400 truncate">
+                                        {{ staff.role }}
+                                    </p>
+                                </div>
+                                <div class="flex gap-1">
+                                    <Button
+                                        icon="pi pi-pencil"
+                                        text
+                                        rounded
+                                        size="small"
+                                        severity="secondary"
+                                        @click="editStaff(staff.id)"
+                                    />
+                                    <Button
+                                        icon="pi pi-trash"
+                                        text
+                                        rounded
+                                        size="small"
+                                        severity="danger"
+                                        @click="removeStaff(staff.id)"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </Card>
+            </div> -->
+        </div>
+    </div>
+</template>
diff --git a/src/modules/warehouse/components/WarehouseIndex.vue b/src/modules/warehouse/components/WarehouseIndex.vue
new file mode 100644
index 0000000..4fd9795
--- /dev/null
+++ b/src/modules/warehouse/components/WarehouseIndex.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import Toast from 'primevue/toast';
+import { useWarehouseStore } from '../../../stores/warehouseStore';
+
+const router = useRouter();
+const route = useRoute();
+const toast = useToast();
+const warehouseStore = useWarehouseStore();
+
+const searchQuery = ref('');
+const selectedStatus = ref('all');
+const selectedLocation = ref('all');
+
+// Usar el estado del store
+const warehouses = computed(() => warehouseStore.warehouses);
+const loading = computed(() => warehouseStore.loading);
+
+const statusOptions = [
+    { label: 'All', value: 'all' },
+    { label: 'Active', value: 'active' },
+    { label: 'Full', value: 'full' },
+    { label: 'Inactive', value: 'inactive' },
+    { label: 'Needs Attention', value: 'needs_attention' },
+];
+
+const locationOptions = [
+    { label: 'All', value: 'all' },
+    { label: 'Springfield, IL', value: 'springfield' },
+    { label: 'Riverside, CA', value: 'riverside' },
+    { label: 'Atlanta, GA', value: 'atlanta' },
+    { label: 'Columbus, OH', value: 'columbus' },
+    { label: 'Seattle, WA', value: 'seattle' },
+];
+
+const getStatusConfig = (isActive: boolean) => {
+    return isActive 
+        ? { label: 'Activo', severity: 'success' }
+        : { label: 'Inactivo', severity: 'secondary' };
+};
+
+const clearFilters = () => {
+    searchQuery.value = '';
+    selectedStatus.value = 'all';
+    selectedLocation.value = 'all';
+};
+
+const createWarehouse = () => {
+    router.push({ name: 'WarehouseCreate' });
+};
+
+const viewWarehouseDetails = (warehouse: any) => {
+    router.push({ 
+        name: 'WarehouseDetails', 
+        params: { id: warehouse.id } 
+    });
+};
+
+onMounted(async () => {
+    // Reload warehouses to show new data
+    await warehouseStore.refreshWarehouses();
+    
+    // Check if we just created a warehouse
+    if (route.query.created === 'true') {
+        const warehouseName = route.query.name as string || 'el almacén';
+        toast.add({
+            severity: 'success',
+            summary: 'Almacén Creado',
+            detail: `El almacén "${warehouseName}" ha sido creado exitosamente.`,
+            life: 4000
+        });
+        
+        // Clean up the query params
+        router.replace({ path: '/warehouse' });
+    }
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <!-- Toast Notifications -->
+        <Toast position="bottom-right" />
+
+        <!-- Header -->
+        <div class="flex flex-wrap justify-between gap-4 items-center">
+            <div class="flex min-w-72 flex-col gap-1">
+                <h1 class="text-surface-900 dark:text-white text-3xl md:text-4xl font-black leading-tight tracking-tight">
+                    Almacenes
+                </h1>
+                <p class="text-surface-500 dark:text-surface-400 text-base font-normal leading-normal">
+                    Administra, rastrea y organiza todos tus almacenes en un solo lugar.
+                </p>
+            </div>
+            
+            <Button
+                label="Crear Nuevo Almacén "
+                icon="pi pi-plus"
+                @click="createWarehouse"
+                class="min-w-[200px]"
+            />
+        </div>
+
+        <!-- Table Card -->
+        <Card class="shadow-sm">
+            <template #content>
+                <!-- Search and Filters -->
+                <div class="flex flex-col md:flex-row justify-between gap-4 mb-4">
+                    <div class="flex-1">
+                        <IconField iconPosition="left">
+                            <InputIcon class="pi pi-search" />
+                            <InputText
+                                v-model="searchQuery"
+                                placeholder="Search by name or location..."
+                                class="w-full"
+                            />
+                        </IconField>
+                    </div>
+                    <div class="flex gap-2 flex-wrap">
+                        <Dropdown
+                            v-model="selectedStatus"
+                            :options="statusOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Status: All"
+                            class="w-40"
+                        />
+                        <Dropdown
+                            v-model="selectedLocation"
+                            :options="locationOptions"
+                            optionLabel="label"
+                            optionValue="value"
+                            placeholder="Location: All"
+                            class="w-40"
+                        />
+                        <Button
+                            label="Clear"
+                            icon="pi pi-times"
+                            outlined
+                            @click="clearFilters"
+                        />
+                    </div>
+                </div>
+
+                <!-- Table -->
+                <DataTable
+                    :value="warehouses"
+                    :loading="loading"
+                    :paginator="true"
+                    :rows="5"
+                    :rowsPerPageOptions="[5, 10, 20]"
+                    stripedRows
+                    responsiveLayout="scroll"
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} results"
+                    class="cursor-pointer"
+                    @row-click="(event) => viewWarehouseDetails(event.data)"
+                >
+                    <Column field="code" header="Código" sortable>
+                        <template #body="slotProps">
+                            <span class="font-mono text-surface-700 dark:text-surface-300">
+                                {{ slotProps.data.code }}
+                            </span>
+                        </template>
+                    </Column>
+
+                    <Column field="name" header="Nombre" sortable>
+                        <template #body="slotProps">
+                            <div>
+                                <span class="font-medium text-surface-900 dark:text-white block">
+                                    {{ slotProps.data.name }}
+                                </span>
+                                <span class="text-xs text-surface-500 dark:text-surface-400">
+                                    {{ slotProps.data.description }}
+                                </span>
+                            </div>
+                        </template>
+                    </Column>
+                    
+                    <Column field="address" header="Ubicación" sortable>
+                        <template #body="slotProps">
+                            <span class="text-surface-500 dark:text-surface-400 text-sm">
+                                {{ slotProps.data.address }}
+                            </span>
+                        </template>
+                    </Column>
+                    
+                    <Column field="is_active" header="Estado" sortable>
+                        <template #body="slotProps">
+                            <Tag
+                                :value="getStatusConfig(slotProps.data.is_active).label"
+                                :severity="getStatusConfig(slotProps.data.is_active).severity"
+                            />
+                        </template>
+                    </Column>
+                    
+                    <Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right">
+                        <template #body="slotProps">
+                            <div class="flex gap-2 justify-end">
+                                <Button
+                                    icon="pi pi-eye"
+                                    text
+                                    size="small"
+                                    @click="(event) => { event.stopPropagation(); viewWarehouseDetails(slotProps.data); }"
+                                />
+                                <Button
+                                    icon="pi pi-ellipsis-v"
+                                    text
+                                    rounded
+                                    size="small"
+                                    @click="(event) => event.stopPropagation()"
+                                />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+    </div>
+</template>
diff --git a/src/modules/warehouse/components/WarehouseOutInventory.vue b/src/modules/warehouse/components/WarehouseOutInventory.vue
new file mode 100644
index 0000000..75e7f2d
--- /dev/null
+++ b/src/modules/warehouse/components/WarehouseOutInventory.vue
@@ -0,0 +1,552 @@
+<template>
+  <Toast position="top-right" />
+  <div class="p-8 max-w-7xl mx-auto w-full">
+    <div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-4">
+      <div>
+        <h2 class="text-3xl font-bold tracking-tight text-slate-900">Nueva Salida de Almacén</h2>
+        <p class="text-slate-500 mt-1 font-medium">Gestione la retirada de stock especificando motivos y destinos.</p>
+      </div>
+      <div class="flex gap-3">
+        <Button label="Cancelar" class="p-button-outlined p-button-sm" @click="handleCancel" :disabled="loading" />
+        <Button label="Confirmar Salida" icon="pi pi-check" class="p-button-primary p-button-sm" @click="handleConfirmarSalida" :loading="loading" />
+      </div>
+    </div>
+    <div class="space-y-8">
+      <!-- Información del Movimiento y Resumen -->
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <!-- Información del Movimiento -->
+        <div class="lg:col-span-2">
+          <div class="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
+            <h3 class="text-base font-bold text-slate-900 mb-6 flex items-center gap-2">
+              <span class="pi pi-info-circle text-primary"></span>
+              Información del Movimiento
+            </h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div class="space-y-1.5">
+                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Tipo de Salida</label>
+                <Dropdown v-model="tipoSalida" :options="tipoSalidaOptions" optionLabel="label" optionValue="value" placeholder="Seleccione motivo..." class="w-full" />
+              </div>
+              <div class="space-y-1.5">
+                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Almacén de Origen</label>
+                <Dropdown 
+                  v-model="almacenSeleccionado" 
+                  :options="almacenOptions" 
+                  optionLabel="label" 
+                  optionValue="value" 
+                  placeholder="Seleccione almacén..." 
+                  class="w-full"
+                  :disabled="warehouseFromQuery"
+                />
+              </div>
+              <div class="space-y-1.5">
+                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Fecha de Registro</label>
+                <Calendar v-model="fechaRegistro" dateFormat="yy-mm-dd" class="w-full" />
+              </div>
+              <div class="space-y-1.5">
+                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Referencia / Remisión</label>
+                <InputText v-model="referenciaDocumento" placeholder="Ej: 100" class="w-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Resumen de Salida -->
+        <div>
+          <div class="bg-primary/5 border border-primary/20 rounded-xl p-6 shadow-sm relative overflow-hidden h-full">
+            <h3 class="text-xs font-bold uppercase tracking-widest text-primary mb-5 flex items-center gap-2">
+              <span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
+              Resumen de Salida
+            </h3>
+            <div class="space-y-4 relative z-10">
+              <div class="flex justify-between items-center text-sm">
+                <span class="text-slate-500 font-medium">Total SKUs</span>
+                <span class="font-bold text-slate-900 bg-white px-2 py-0.5 rounded border border-slate-100 shadow-sm">{{ productos.length }}</span>
+              </div>
+              <div class="flex justify-between items-center text-sm">
+                <span class="text-slate-500 font-medium">Total Unidades</span>
+                <span class="font-bold text-slate-900 bg-white px-2 py-0.5 rounded border border-slate-100 shadow-sm">{{ totalUnidades }}</span>
+              </div>
+              <div class="flex justify-between items-center text-sm">
+                <span class="text-slate-500 font-medium">Serializados</span>
+                <span class="font-bold text-primary bg-primary/10 px-2 py-0.5 rounded border border-primary/20">{{ totalSerializados }}</span>
+              </div>
+              <div class="pt-4 mt-2 border-t border-primary/10">
+                <div class="flex items-start gap-3 p-3 bg-white/60 rounded-lg border border-primary/10">
+                  <span class="pi pi-info-circle text-primary text-[20px] mt-0.5"></span>
+                  <p class="text-[11px] text-slate-600 leading-relaxed">
+                    Requiere firma de transporte antes de la salida física de mercancía.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Productos a Retirar - Ancho Completo -->
+      <div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
+        <div class="p-6 border-b border-slate-100 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-50/30">
+          <h3 class="text-base font-bold text-slate-900 flex items-center gap-2">
+            <span class="pi pi-box text-primary"></span>
+            Productos a Retirar
+          </h3>
+          <div class="flex gap-2 w-full sm:w-auto">
+            <Button label="Añadir Producto" icon="pi pi-plus" class="p-button-primary" @click="openProductModal" />
+          </div>
+        </div>
+        <DataTable :value="productos" class="w-full" responsiveLayout="scroll" stripedRows>
+            <template #empty>
+              <div class="text-center py-6">
+                <i class="pi pi-inbox text-4xl text-slate-300 mb-3"></i>
+                <p class="text-slate-500">No hay productos agregados</p>
+                <p class="text-xs text-slate-400 mt-1">Haga clic en "Añadir Producto" para comenzar</p>
+              </div>
+            </template>
+            
+            <Column field="sku" header="SKU" style="min-width: 130px">
+              <template #body="{ data }">
+                <span class="font-semibold text-slate-700">{{ data.sku }}</span>
+              </template>
+            </Column>
+            
+            <Column field="nombre" header="Nombre del Producto" style="min-width: 250px">
+              <template #body="{ data }">
+                <div>
+                  <div class="font-semibold text-slate-900">{{ data.nombre }}</div>
+                  <div class="text-xs text-slate-500" v-if="data.variante !== 'Estándar'">{{ data.variante }}</div>
+                </div>
+              </template>
+            </Column>
+            
+            <Column header="Disponible" style="min-width: 120px">
+              <template #body="{ data }">
+                <Tag :value="`${data.stockDisponible} ${data.unidadMedida}`" severity="info" class="font-semibold" />
+              </template>
+            </Column>
+            
+            <Column header="Cantidad a Sacar" style="min-width: 150px">
+              <template #body="{ data }">
+                <InputNumber
+                  v-if="!data.serializado"
+                  v-model="data.cantidad"
+                  :min="1"
+                  :max="data.stockDisponible"
+                  showButtons
+                  buttonLayout="horizontal"
+                  :step="1"
+                  class="w-full"
+                  decrementButtonClass="p-button-danger"
+                  incrementButtonClass="p-button-success"
+                  incrementButtonIcon="pi pi-plus"
+                  decrementButtonIcon="pi pi-minus"
+                />
+                <div v-else class="flex align-items-center gap-2">
+                  <InputNumber
+                    v-model="data.cantidad"
+                    :min="0"
+                    :max="data.stockDisponible"
+                    disabled
+                    class="flex-1"
+                  />
+                  <Tag :severity="data.cantidad > 0 ? 'success' : 'secondary'" class="font-semibold">
+                    {{ data.cantidad }}
+                  </Tag>
+                </div>
+              </template>
+            </Column>
+            
+            <Column header="Números de Serie" style="min-width: 180px">
+              <template #body="{ data }">
+                <Button
+                  v-if="data.serializado"
+                  :label="data.seriesSeleccionadas?.length > 0 ? `${data.seriesSeleccionadas.length} serie(s)` : 'Seleccionar'"
+                  icon="pi pi-barcode"
+                  :severity="data.seriesSeleccionadas?.length > 0 ? 'success' : 'secondary'"
+                  outlined
+                  size="small"
+                  @click="openSerialModal(data)"
+                />
+                <span v-else class="text-slate-400 text-sm">N/A</span>
+              </template>
+            </Column>
+            
+            <Column header="Acción" style="width: 80px">
+              <template #body="{ data }">
+                <Button
+                  icon="pi pi-trash"
+                  severity="danger"
+                  text
+                  rounded
+                  @click="removeProduct(data.product_id)"
+                />
+              </template>
+            </Column>
+          </DataTable>
+          <div class="p-4 bg-slate-50 flex justify-center border-t border-slate-100">
+            <Button label="Añadir Producto Manualmente" icon="pi pi-plus" class="p-button-link text-xs font-bold text-primary uppercase tracking-widest" @click="openProductModal" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal de Selección de Productos desde Stock -->
+    <ModalStockProducts 
+      v-model:visible="showProductModal"
+      :warehouse-id="almacenSeleccionado || 0"
+      :warehouse-name="getWarehouseName()"
+      @confirm="handleProductsSelected"
+    />
+
+    <!-- Modal de Selección de Números de Serie -->
+    <Dialog
+      v-model:visible="showSerialModal"
+      modal
+      :header="`Seleccionar Números de Serie - ${currentProduct?.nombre || ''}`"
+      :style="{ width: '800px' }"
+    >
+      <div class="mb-4">
+        <Message severity="info" :closable="false">
+          Seleccione los números de serie que desea retirar del inventario.
+          Disponibles: {{ currentProduct?.seriesDisponibles?.length || 0 }}
+        </Message>
+      </div>
+
+      <DataTable
+        v-if="currentProduct"
+        v-model:selection="selectedSerials"
+        :value="currentProduct.seriesDisponibles"
+        dataKey="serial_number"
+        stripedRows
+        responsiveLayout="scroll"
+        class="p-datatable-sm"
+      >
+        <template #empty>
+          <div class="text-center py-4">
+            <p class="text-600">No hay números de serie disponibles</p>
+          </div>
+        </template>
+
+        <Column selectionMode="multiple" headerStyle="width: 3rem" />
+        
+        <Column field="serial_number" header="Número de Serie" style="min-width: 200px">
+          <template #body="{ data }">
+            <div class="flex align-items-center gap-2">
+              <i class="pi pi-barcode text-primary"></i>
+              <span class="font-semibold">{{ data.serial_number }}</span>
+            </div>
+          </template>
+        </Column>
+        
+        <Column field="acquisition_date" header="Fecha de Adquisición" style="min-width: 150px">
+          <template #body="{ data }">
+            <span class="text-sm">{{ formatDate(data.acquisition_date) }}</span>
+          </template>
+        </Column>
+      </DataTable>
+
+      <template #footer>
+        <div class="flex justify-content-between align-items-center">
+          <span class="text-600">
+            {{ selectedSerials.length }} serie(s) seleccionada(s)
+          </span>
+          <div class="flex gap-2">
+            <Button
+              label="Cancelar"
+              icon="pi pi-times"
+              text
+              @click="closeSerialModal"
+            />
+            <Button
+              label="Confirmar"
+              icon="pi pi-check"
+              :disabled="selectedSerials.length === 0"
+              @click="confirmSerialSelection"
+            />
+          </div>
+        </div>
+      </template>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+import Dropdown from 'primevue/dropdown';
+import Calendar from 'primevue/calendar';
+import InputText from 'primevue/inputtext';
+import InputNumber from 'primevue/inputnumber';
+import DataTable from 'primevue/datatable';
+import Column from 'primevue/column';
+import Toast from 'primevue/toast';
+import Dialog from 'primevue/dialog';
+import Tag from 'primevue/tag';
+import Message from 'primevue/message';
+import { InventoryWarehouseServices } from '../services/inventoryWarehouse.services';
+import type { OutInventoryRequestDTO } from '../types/warehouse-inventory.interfaces';
+import type { Stock, SerialNumber } from '../types/stock.interfaces';
+import ModalStockProducts from './ModalStockProducts.vue';
+import { useWarehouseStore } from '../../../stores/warehouseStore';
+
+const route = useRoute();
+const router = useRouter();
+const toast = useToast();
+const inventoryService = new InventoryWarehouseServices();
+const warehouseStore = useWarehouseStore();
+
+// Estado de carga
+const loading = ref(false);
+const showProductModal = ref(false);
+const showSerialModal = ref(false);
+
+// Opciones para dropdowns
+const tipoSalidaOptions = [
+  { label: 'Venta', value: 1 },
+  { label: 'Merma / Desperdicio', value: 2 },
+  { label: 'Devolución a Proveedor', value: 3 },
+  { label: 'Ajuste de Inventario', value: 4 },
+];
+
+const almacenOptions = computed(() => 
+  warehouseStore.activeWarehouses.map(w => ({
+    label: w.name,
+    value: w.id,
+  }))
+);
+
+// Form fields
+const tipoSalida = ref<number | null>(null);
+const almacenSeleccionado = ref<number | null>(null);
+const fechaRegistro = ref<Date>(new Date());
+const referenciaDocumento = ref<string>('');
+
+// Productos
+interface Producto {
+  product_id: number;
+  nombre: string;
+  sku: string;
+  variante: string;
+  stockDisponible: number;
+  unidadMedida: string;
+  cantidad: number;
+  serializado: boolean;
+  seriesDisponibles?: SerialNumber[];
+  seriesSeleccionadas?: SerialNumber[];
+}
+
+const productos = ref<Producto[]>([]);
+const currentProduct = ref<Producto | null>(null);
+const selectedSerials = ref<SerialNumber[]>([]);
+
+// Determinar si el almacén viene de query param (no editable)
+const warehouseFromQuery = computed(() => !!route.query.warehouse);
+
+const totalUnidades = computed(() => productos.value.reduce((acc, p) => acc + p.cantidad, 0));
+const totalSerializados = computed(() => productos.value.filter(p => p.serializado).reduce((acc, p) => acc + p.cantidad, 0));
+
+// Funciones
+const openProductModal = () => {
+  if (!almacenSeleccionado.value) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Validación',
+      detail: 'Primero seleccione un almacén de origen',
+      life: 3000,
+    });
+    return;
+  }
+  showProductModal.value = true;
+};
+
+const getWarehouseName = () => {
+  if (!almacenSeleccionado.value) return 'Almacén';
+  const warehouse = warehouseStore.activeWarehouses.find(w => w.id === almacenSeleccionado.value);
+  return warehouse?.name || 'Almacén';
+};
+
+const handleProductsSelected = (selectedStocks: Stock[]) => {
+  selectedStocks.forEach(stock => {
+    // Verificar si el producto ya está en la lista
+    const exists = productos.value.find(p => p.product_id === stock.product.id);
+    if (!exists) {
+      productos.value.push({
+        product_id: stock.product.id,
+        nombre: stock.product.name,
+        sku: stock.product.sku,
+        variante: stock.product.description || 'Estándar',
+        stockDisponible: stock.stock,
+        unidadMedida: stock.product.unit_of_measure.abbreviation,
+        cantidad: stock.product.is_serial ? 0 : 1,
+        serializado: stock.product.is_serial,
+        seriesDisponibles: stock.serial_numbers || [],
+        seriesSeleccionadas: [],
+      });
+    }
+  });
+  
+  toast.add({
+    severity: 'success',
+    summary: 'Productos Agregados',
+    detail: `Se agregaron ${selectedStocks.length} producto(s) del almacén`,
+    life: 3000,
+  });
+};
+
+const openSerialModal = (producto: Producto) => {
+  currentProduct.value = producto;
+  selectedSerials.value = [...(producto.seriesSeleccionadas || [])];
+  showSerialModal.value = true;
+};
+
+const closeSerialModal = () => {
+  showSerialModal.value = false;
+  currentProduct.value = null;
+  selectedSerials.value = [];
+};
+
+const confirmSerialSelection = () => {
+  if (currentProduct.value) {
+    const producto = productos.value.find(p => p.product_id === currentProduct.value!.product_id);
+    if (producto) {
+      producto.seriesSeleccionadas = [...selectedSerials.value];
+      producto.cantidad = selectedSerials.value.length;
+    }
+    
+    toast.add({
+      severity: 'success',
+      summary: 'Series Seleccionadas',
+      detail: `Se seleccionaron ${selectedSerials.value.length} número(s) de serie`,
+      life: 3000,
+    });
+  }
+  closeSerialModal();
+};
+
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('es-MX', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+};
+
+const removeProduct = (productId: number) => {
+  const index = productos.value.findIndex(p => p.product_id === productId);
+  if (index !== -1) {
+    productos.value.splice(index, 1);
+    toast.add({
+      severity: 'info',
+      summary: 'Producto Eliminado',
+      detail: 'El producto fue eliminado de la lista',
+      life: 2000,
+    });
+  }
+};
+
+const handleCancel = () => {
+  router.back();
+};
+
+const handleConfirmarSalida = async () => {
+  // Validaciones
+  if (!almacenSeleccionado.value) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Validación',
+      detail: 'Debe seleccionar un almacén de origen',
+      life: 3000,
+    });
+    return;
+  }
+
+  if (!productos.value.length) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Validación',
+      detail: 'Debe agregar al menos un producto',
+      life: 3000,
+    });
+    return;
+  }
+
+  // Validar productos serializados
+  const productosSinSeries = productos.value.filter(p => p.serializado && (!p.seriesSeleccionadas || p.seriesSeleccionadas.length === 0));
+  if (productosSinSeries.length > 0) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Validación',
+      detail: `Debe seleccionar números de serie para: ${productosSinSeries.map(p => p.nombre).join(', ')}`,
+      life: 5000,
+    });
+    return;
+  }
+
+  // Validar cantidades
+  const productosConCantidadCero = productos.value.filter(p => p.cantidad <= 0);
+  if (productosConCantidadCero.length > 0) {
+    toast.add({
+      severity: 'warn',
+      summary: 'Validación',
+      detail: 'Todos los productos deben tener cantidad mayor a 0',
+      life: 3000,
+    });
+    return;
+  }
+
+  // Construir el request
+  const request: OutInventoryRequestDTO = {
+    warehouse_id: almacenSeleccionado.value,
+    reference_type: tipoSalida.value,
+    reference_document_id: referenciaDocumento.value ? Number(referenciaDocumento.value) : null,
+    products: productos.value.map((p) => ({
+      product_id: p.product_id,
+      quantity: p.cantidad,
+      // Si es serializado, enviar los números de serie seleccionados
+      ...(p.serializado && p.seriesSeleccionadas && {
+        serial_numbers: p.seriesSeleccionadas.map(s => s.serial_number)
+      })
+    })),
+  };
+
+  loading.value = true;
+
+  try {
+    const response = await inventoryService.exitInventory(request);
+    
+    toast.add({
+      severity: 'success',
+      summary: 'Éxito',
+      detail: response.message || 'Salida de inventario realizada exitosamente',
+      life: 3000,
+    });
+
+    // Opcional: redirigir después de un breve delay
+    setTimeout(() => {
+      router.push({ name: 'WarehouseDetails', params: { id: almacenSeleccionado.value } });
+    }, 1500);
+  } catch (error: any) {
+    console.error('Error al confirmar salida:', error);
+    toast.add({
+      severity: 'error',
+      summary: 'Error',
+      detail: error?.response?.data?.message || 'Error al procesar la salida de inventario',
+      life: 5000,
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Lifecycle
+onMounted(async () => {
+  // Cargar almacenes
+  await warehouseStore.fetchWarehouses();
+  
+  // Si viene warehouse_id desde el query, pre-seleccionarlo
+  const warehouseId = route.query.warehouse;
+  if (warehouseId) {
+    almacenSeleccionado.value = Number(warehouseId);
+  }
+});
+</script>
\ No newline at end of file
diff --git a/src/modules/warehouse/services/inventory-movements.services.ts b/src/modules/warehouse/services/inventory-movements.services.ts
new file mode 100644
index 0000000..0b3a7d2
--- /dev/null
+++ b/src/modules/warehouse/services/inventory-movements.services.ts
@@ -0,0 +1,16 @@
+import api from "@/services/api";
+import type { InventoryMovementsPaginatedResponse } from "../types/inventory-movements.interfaces";
+
+export class InventoryMovementsServices {
+
+    async getInventoryMovements(warehouse: number): Promise<InventoryMovementsPaginatedResponse> {
+        try {
+            const response = await api.get(`/api/inventory-movements?warehouse=${warehouse}`);
+            console.log('📦 Inventory Movements response:', response.data);
+            return response.data;
+        } catch (error) {
+            console.error('❌ Error fetching inventory movements:', error);
+            throw error;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/modules/warehouse/services/inventoryWarehouse.services.ts b/src/modules/warehouse/services/inventoryWarehouse.services.ts
new file mode 100644
index 0000000..9337595
--- /dev/null
+++ b/src/modules/warehouse/services/inventoryWarehouse.services.ts
@@ -0,0 +1,30 @@
+import api from "../../../services/api";
+import type { OutInventoryRequestDTO, OutInventoryResponseDTO } from "../types/warehouse-inventory.interfaces";
+import type { CreateInventoryRequest, CreateInventoryResponse } from "../types/warehouse.inventory";
+
+export const inventoryWarehouseServices = {
+    async addInventory(data: CreateInventoryRequest): Promise<CreateInventoryResponse> {
+        try {
+            const response = await api.post('/api/inventory-warehouses', data);
+            console.log('📦 Add Inventory response:', response.data);
+            return response.data;
+        } catch (error) {
+            console.error('❌ Error adding inventory:', error);
+            throw error;
+        }
+    }
+
+}
+    
+export class InventoryWarehouseServices {
+    async exitInventory(data: OutInventoryRequestDTO): Promise<OutInventoryResponseDTO> {
+        try {
+            const response = await api.post('/api/inventory/exit', data);
+            console.log('📦 Exit Inventory response:', response.data);
+            return response.data;
+        } catch (error) {
+            console.error('❌ Error exiting inventory:', error);
+            throw error;
+        }
+    }
+}
diff --git a/src/modules/warehouse/services/stock.services.ts b/src/modules/warehouse/services/stock.services.ts
new file mode 100644
index 0000000..4ebeb95
--- /dev/null
+++ b/src/modules/warehouse/services/stock.services.ts
@@ -0,0 +1,15 @@
+import api from "@/services/api";
+import type { StocksResponse } from "../types/stock.interfaces";
+
+export class StockService {
+
+    async getStocks(warehouseId: number): Promise<StocksResponse> {
+        try {
+            const response = await api.get<StocksResponse>(`/api/product-warehouses/${warehouseId}`);
+            return response.data;
+        } catch (error) {
+            console.error("Error fetching stocks:", error);
+            throw error;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/modules/warehouse/services/warehouseClasificationService.ts b/src/modules/warehouse/services/warehouseClasificationService.ts
new file mode 100644
index 0000000..a2f1ed5
--- /dev/null
+++ b/src/modules/warehouse/services/warehouseClasificationService.ts
@@ -0,0 +1,51 @@
+import api from '../../../services/api';
+import type { 
+    CreateClassificationData, 
+    ClassificationsResponse 
+} from '../types/warehouse.clasification';
+
+export const warehouseClassificationService = {
+    async getClassifications() {
+        try {
+            const response = await api.get<ClassificationsResponse>('/api/catalogs/warehouse-classifications');
+            console.log('Classifications response:', response);
+            return response;
+        } catch (error) {
+            console.error('Error fetching classifications:', error);
+            throw error;
+        }
+    },
+
+    async createClassification(data: CreateClassificationData) {
+        try {
+            const response = await api.post('/api/catalogs/warehouse-classifications', data);
+            console.log('Classification created:', response);
+            return response;
+        } catch (error) {
+            console.error('Error creating classification:', error);
+            throw error;
+        }
+    },
+
+    async updateClassification(id: number, data: CreateClassificationData) {
+        try {
+            const response = await api.put(`/api/catalogs/warehouse-classifications/${id}`, data);
+            console.log('Classification updated:', response);
+            return response;
+        } catch (error) {
+            console.error('Error updating classification:', error);
+            throw error;
+        }
+    },
+
+    async deleteClassification(id: number) {
+        try {
+            const response = await api.delete(`/api/catalogs/warehouse-classifications/${id}`);
+            console.log('Classification deleted:', response);
+            return response;
+        } catch (error) {
+            console.error('Error deleting classification:', error);
+            throw error;
+        }
+    }
+};
diff --git a/src/modules/warehouse/services/warehouseService.ts b/src/modules/warehouse/services/warehouseService.ts
new file mode 100644
index 0000000..f18eccd
--- /dev/null
+++ b/src/modules/warehouse/services/warehouseService.ts
@@ -0,0 +1,37 @@
+import api from '../../../services/api';
+import type { WarehousesResponse, CreateWarehouseData, WarehouseDetailResponse } from '../types/warehouse';
+
+export const warehouseService = {
+    async getWarehouses() {
+        try {
+            const response = await api.get<WarehousesResponse>('/api/warehouses');
+            console.log('Warehouses response:', response);
+            return response;
+        } catch (error) {
+            console.error('Error fetching warehouses:', error);
+            throw error;
+        }
+    },
+
+    async createWarehouse(data: CreateWarehouseData) {
+        try {
+            const response = await api.post('/api/warehouses', data);
+            console.log('Warehouse created:', response);
+            return response;
+        } catch (error) {
+            console.error('Error creating warehouse:', error);
+            throw error;
+        }
+    },
+
+    async getWarehouseById(warehouseId: number) {
+        try {
+            const response = await api.get<WarehouseDetailResponse>(`/api/warehouses/${warehouseId}`);
+            console.log(`Warehouse with ID ${warehouseId} response:`, response.data);
+            return response.data;
+        } catch (error) {
+            console.error(`Error fetching warehouse with ID ${warehouseId}:`, error);
+            throw error;
+        }
+    }
+};
diff --git a/src/modules/warehouse/stores/classificationStore.ts b/src/modules/warehouse/stores/classificationStore.ts
new file mode 100644
index 0000000..94198bd
--- /dev/null
+++ b/src/modules/warehouse/stores/classificationStore.ts
@@ -0,0 +1,115 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { warehouseClassificationService } from '../services/warehouseClasificationService';
+import type { Classification } from '../types/warehouse.clasification';
+
+export const useClassificationStore = defineStore('warehouseClassifications', () => {
+    // State
+    const classifications = ref<Classification[]>([]);
+    const loading = ref(false);
+    const loaded = ref(false);
+    const error = ref<string | null>(null);
+
+    // Getters
+    const rootClassifications = computed(() => 
+        classifications.value.filter(c => c.parent_id === null)
+    );
+
+    const activeClassifications = computed(() => 
+        classifications.value.filter(c => c.is_active)
+    );
+
+    const getClassificationById = computed(() => {
+        return (id: number) => classifications.value.find(c => c.id === id);
+    });
+
+    const getChildrenOf = computed(() => {
+        return (parentId: number) => 
+            classifications.value.filter(c => c.parent_id === parentId);
+    });
+
+    // Actions
+    const fetchClassifications = async (force = false) => {
+        if (loaded.value && !force) {
+            return classifications.value;
+        }
+
+        try {
+            loading.value = true;
+            error.value = null;
+            const response = await warehouseClassificationService.getClassifications();
+            classifications.value = response.data.data.warehouse_classifications.data;
+            loaded.value = true;
+            return classifications.value;
+        } catch (err) {
+            error.value = 'Error al cargar las clasificaciones';
+            console.error('Error fetching classifications:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const refreshClassifications = async () => {
+        return fetchClassifications(true);
+    };
+
+    const clearClassifications = () => {
+        classifications.value = [];
+        loaded.value = false;
+        error.value = null;
+    };
+
+    const createClassification = async (data: any) => {
+        try {
+            const response = await warehouseClassificationService.createClassification(data);
+            await refreshClassifications();
+            return response;
+        } catch (err) {
+            error.value = 'Error al crear la clasificación';
+            throw err;
+        }
+    };
+
+    const updateClassification = async (id: number, data: any) => {
+        try {
+            const response = await warehouseClassificationService.updateClassification(id, data);
+            await refreshClassifications();
+            return response;
+        } catch (err) {
+            error.value = 'Error al actualizar la clasificación';
+            throw err;
+        }
+    };
+
+    const deleteClassification = async (id: number) => {
+        try {
+            const response = await warehouseClassificationService.deleteClassification(id);
+            await refreshClassifications();
+            return response;
+        } catch (err) {
+            error.value = 'Error al eliminar la clasificación';
+            throw err;
+        }
+    };
+
+    return {
+        // State
+        classifications,
+        loading,
+        loaded,
+        error,
+        // Getters
+        rootClassifications,
+        activeClassifications,
+        getClassificationById,
+        getChildrenOf,
+        // Actions
+        fetchClassifications,
+        refreshClassifications,
+        clearClassifications,
+        createClassification,
+        updateClassification,
+        deleteClassification
+    };
+});
diff --git a/src/modules/warehouse/types/inventory-movements.interfaces.ts b/src/modules/warehouse/types/inventory-movements.interfaces.ts
new file mode 100644
index 0000000..bd21d90
--- /dev/null
+++ b/src/modules/warehouse/types/inventory-movements.interfaces.ts
@@ -0,0 +1,102 @@
+export interface Warehouse {
+  id: number;
+  code: string;
+  name: string;
+  description: string;
+  address: string | null;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+}
+
+export interface User {
+  id: number;
+  email: string;
+  email_verified_at: string | null;
+  status: number;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  full_name: string;
+  last_name: string;
+  profile_photo_url: string;
+}
+
+export interface Product {
+  id: number;
+  code: string;
+  sku: string;
+  name: string;
+  barcode: string;
+  description: string;
+  unit_of_measure_id: number;
+  suggested_sale_price: number;
+  attributes: Record<string, any> | any[];
+  is_active: boolean;
+  is_serial: boolean;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  sat_code_product_id: number | null;
+}
+
+export interface MovementDetail {
+  id: number;
+  movement_id: number;
+  product_id: number;
+  quantity: number;
+  serial_number: string | null;
+  inventory_item_id: number;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  product: Product;
+}
+
+export interface MovementProduct {
+  product_id: number;
+  product: Product;
+  quantity: string | number;
+  serial_number: string | null;
+}
+
+export interface InventoryMovement {
+  id: number;
+  type: 'entrada' | 'salida';
+  reference_type: number | null;
+  reference_document_id: number | null;
+  from_warehouse_id: number | null;
+  to_warehouse_id: number | null;
+  user_id: number | null;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  from_warehouse: Warehouse | null;
+  to_warehouse: Warehouse | null;
+  user: User | null;
+  details?: MovementDetail[];
+  products: MovementProduct[];
+}
+
+export interface PaginationLink {
+  url: string | null;
+  label: string;
+  active: boolean;
+}
+
+export interface InventoryMovementsPaginatedResponse {
+  current_page: number;
+  data: InventoryMovement[];
+  first_page_url: string;
+  from: number;
+  last_page: number;
+  last_page_url: string;
+  links: PaginationLink[];
+  next_page_url: string | null;
+  path: string;
+  per_page: number;
+  prev_page_url: string | null;
+  to: number;
+  total: number;
+}
diff --git a/src/modules/warehouse/types/stock.interfaces.ts b/src/modules/warehouse/types/stock.interfaces.ts
new file mode 100644
index 0000000..f365ba5
--- /dev/null
+++ b/src/modules/warehouse/types/stock.interfaces.ts
@@ -0,0 +1,66 @@
+// Serial Number Interface
+export interface SerialNumber {
+  serial_number: string;
+  acquisition_date: string;
+  purchase_cost: number;
+  attributes: Record<string, string[]> | any[];
+}
+
+// Unit of Measure Interface
+export interface UnitOfMeasure {
+  id: number;
+  name: string;
+  abbreviation: string;
+  is_active: number;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  code_sat: number;
+}
+
+// Product Interface
+export interface Product {
+  id: number;
+  code: string;
+  sku: string;
+  name: string;
+  barcode: string;
+  description: string;
+  unit_of_measure_id: number;
+  suggested_sale_price: number;
+  attributes: Record<string, any> | any[];
+  is_active: boolean;
+  is_serial: boolean;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  sat_code_product_id: number | null;
+  unit_of_measure: UnitOfMeasure;
+}
+
+// Stock Interface
+export interface Stock {
+  id: number;
+  product_id: number;
+  warehouse_id: number;
+  stock: number;
+  stock_min: number | null;
+  stock_max: number | null;
+  reorder_point: number | null;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+  product: Product;
+  serial_numbers: SerialNumber[] | null;
+}
+
+// Stocks Data Interface
+export interface StocksData {
+  stocks: Stock[];
+}
+
+// API Response Interface
+export interface StocksResponse {
+  status: string;
+  data: StocksData;
+}
\ No newline at end of file
diff --git a/src/modules/warehouse/types/warehouse-inventory.interfaces.ts b/src/modules/warehouse/types/warehouse-inventory.interfaces.ts
new file mode 100644
index 0000000..b24ee24
--- /dev/null
+++ b/src/modules/warehouse/types/warehouse-inventory.interfaces.ts
@@ -0,0 +1,93 @@
+export interface InventoryProductItem {
+  product_id: number;
+  quantity?: number;
+  serial_number?: string;
+  serial_numbers?: string[];
+}
+
+export interface OutInventoryRequestDTO {
+  warehouse_id: number;
+  reference_type: number | null;
+  reference_document_id: number | null;
+  products: InventoryProductItem[];
+}
+
+export interface ProductAttributes {
+  [key: string]: any;
+}
+
+export interface MovementProduct {
+  id: number;
+  code: string;
+  sku: string;
+  name: string;
+  barcode: string;
+  description: string;
+  unit_of_measure_id: number;
+  suggested_sale_price: number;
+  attributes: ProductAttributes;
+  is_active: boolean;
+  is_serial: boolean;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  sat_code_product_id: number | null;
+}
+
+export interface MovementDetail {
+  id: number;
+  movement_id: number;
+  product_id: number;
+  quantity: number;
+  serial_number: string | null;
+  inventory_item_id: number;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+  product: MovementProduct;
+}
+
+export interface Warehouse {
+  id: number;
+  code: string;
+  name: string;
+  description: string;
+  address: string | null;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+}
+
+export interface InventoryMovement {
+  id: number;
+  type: string;
+  reference_type: number;
+  reference_document_id: number;
+  from_warehouse_id: number;
+  to_warehouse_id: number | null;
+  user_id: number;
+  created_at: string;
+  updated_at: string;
+  from_warehouse: Warehouse;
+  details: MovementDetail[];
+}
+
+export interface InventoryResult {
+  product_id: number;
+  previous_stock: number;
+  removed_quantity: number;
+  new_stock: number;
+  type: string;
+}
+
+export interface OutInventoryResponseDTO {
+  message: string;
+  data: {
+    movement: InventoryMovement;
+    results: InventoryResult[];
+  };
+  meta: {
+    total_items: number;
+  };
+}
diff --git a/src/modules/warehouse/types/warehouse.clasification.d.ts b/src/modules/warehouse/types/warehouse.clasification.d.ts
new file mode 100644
index 0000000..f290776
--- /dev/null
+++ b/src/modules/warehouse/types/warehouse.clasification.d.ts
@@ -0,0 +1,46 @@
+export interface CreateClassificationData {
+    code: string;
+    name: string;
+    description: string;
+    parent_id: number | null;
+}
+
+export interface Classification {
+    id: number;
+    code: string;
+    name: string;
+    description: string;
+    is_active: boolean;
+    parent_id: number | null;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+    children?: Classification[];
+}
+
+export interface ClassificationsPagination {
+    current_page: number;
+    data: Classification[];
+    first_page_url: string;
+    from: number | null;
+    last_page: number;
+    last_page_url: string;
+    links: {
+        url: string | null;
+        label: string;
+        active: boolean;
+    }[];
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number | null;
+    total: number;
+}
+
+export interface ClassificationsResponse {
+    status: string;
+    data: {
+        warehouse_classifications: ClassificationsPagination;
+    };
+}
diff --git a/src/modules/warehouse/types/warehouse.d.ts b/src/modules/warehouse/types/warehouse.d.ts
new file mode 100644
index 0000000..652dcfb
--- /dev/null
+++ b/src/modules/warehouse/types/warehouse.d.ts
@@ -0,0 +1,108 @@
+export interface Warehouse {
+    id: number;
+    code: string;
+    name: string;
+    description: string;
+    address: string;
+    is_active: boolean;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+    classifications: any[];
+}
+
+export interface CreateWarehouseData {
+    code: string;
+    name: string;
+    description: string;
+    classifications: number[];
+}
+
+export interface WarehousePagination {
+    current_page: number;
+    data: Warehouse[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: PaginationLink[];
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+export interface PaginationLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+export interface WarehousesResponse {
+    status: string;
+    data: {
+        warehouses: WarehousePagination;
+    };
+}
+
+export interface WarehouseProduct {
+    id: number;
+    code: string;
+    sku: string;
+    name: string;
+    barcode: string;
+    description: string;
+    unit_of_measure_id: number;
+    suggested_sale_price: number;
+    attributes: Record<string, any> | null;
+    is_active: boolean;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+}
+
+export interface WarehouseStock {
+    id: number;
+    product_id: number;
+    warehouse_id: number;
+    stock: number;
+    stock_min: number | null;
+    stock_max: number | null;
+    reorder_point: number | null;
+    is_active: number;
+    created_at: string;
+    updated_at: string;
+    product: WarehouseProduct;
+}
+
+export interface WarehouseInventoryItem {
+    id: number;
+    product_id: number;
+    warehouse_id: number;
+    quantity: string;
+    serial_number: string | null;
+    acquisition_date: string;
+    warehouse_number: string | null;
+    attributes: Record<string, any> | null;
+    purchase_cost: number;
+    warranty_days: number | null;
+    warranty_end_date: string | null;
+    expiration_date: string | null;
+    created_at: string;
+    updated_at: string;
+    deleted_at: string | null;
+    product: WarehouseProduct;
+}
+
+export interface WarehouseDetailData {
+    warehouse: Warehouse;
+    stocks: WarehouseStock[];
+    items: WarehouseInventoryItem[];
+}
+
+export interface WarehouseDetailResponse {
+    status: string;
+    data: WarehouseDetailData;
+}
diff --git a/src/modules/warehouse/types/warehouse.inventory.d.ts b/src/modules/warehouse/types/warehouse.inventory.d.ts
new file mode 100644
index 0000000..d2dc8c6
--- /dev/null
+++ b/src/modules/warehouse/types/warehouse.inventory.d.ts
@@ -0,0 +1,74 @@
+export interface InventoryProductItem {
+  product_id: number;
+  warehouse_id: number;
+  purchase_cost: number;
+  quantity?: number;
+  attributes?: Record<string, any>;
+  serial_number?: string;
+  serial_numbers?: string[];
+}
+
+export interface CreateInventoryRequest {
+  products: InventoryProductItem[];
+}
+
+export interface InventoryProduct {
+  id: number;
+  code: string;
+  sku: string;
+  name: string;
+  barcode: string;
+  description: string;
+  unit_of_measure_id: number;
+  suggested_sale_price: number;
+  attributes: Record<string, any> | null;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+}
+
+export interface InventoryWarehouse {
+  id: number;
+  code: string;
+  name: string;
+  description: string;
+  address: string | null;
+  is_active: boolean;
+  created_at: string;
+  updated_at: string;
+  deleted_at: string | null;
+}
+
+export interface InventoryItemDetail {
+  id: number;
+  product_id: number;
+  warehouse_id: number;
+  quantity: string;
+  serial_number: string | null;
+  attributes: Record<string, any> | null;
+  purchase_cost: number;
+  acquisition_date: string;
+  created_at: string;
+  updated_at: string;
+  product: InventoryProduct;
+  warehouse: InventoryWarehouse;
+}
+
+export interface InventoryGroupResult {
+  inventory_items: InventoryItemDetail[];
+  previous_stock: number;
+  added_quantity: number;
+  new_stock: number;
+  type: 'stock' | 'serialized';
+}
+
+export interface CreateInventoryResponseMeta {
+  total_items: number;
+}
+
+export interface CreateInventoryResponse {
+  message: string;
+  data: InventoryGroupResult[];
+  meta: CreateInventoryResponseMeta;
+}
diff --git a/src/pages/Admin/Activities/Index.vue b/src/pages/Admin/Activities/Index.vue
deleted file mode 100644
index d0556a4..0000000
--- a/src/pages/Admin/Activities/Index.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script setup>
-import { onMounted, reactive, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { hasPermission } from '@Plugins/RolePermission';
-import { useSearcher } from '@Services/Api';
-import { apiTo, transl } from './Module';
-
-import IconButton    from '@Holos/Button/Icon.vue'
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import Header        from '@Holos/PageHeader.vue';
-import Paginable     from '@Holos/Paginable.vue';
-import Item          from '@Holos/Timeline/Item.vue';
-import ShowView      from './Modals/Event.vue';
-
-/** Definidores */
-const vroute = useRoute();
-const router = useRouter();
-
-/** Propiedades */
-const models = ref([]);
-
-const filters = reactive({
-    search: '',
-    start_date: '',
-    end_date: '',
-    user: ''
-});
-
-/** Referencias */
-const showModal = ref(null);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    filters,
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-const clearFilters = () => {
-    filters.search = '';
-    filters.start_date = '';
-    filters.end_date = '';
-    
-    searcher.search();
-};
-
-const clearUser = () => {
-    router.replace({ query: {} });
-    filters.user = '';
-
-    searcher.search();
-};
-
-/** Ciclos */
-onMounted(() => {
-    if(vroute.query?.user) {
-        filters.user = vroute.query.user;
-    }
-    
-    searcher.search('');
-});
-
-</script>  
-
-<template>
-    <div>
-        <Header :title="transl('title')">
-            <RouterLink v-if="filters.user && hasPermission('users.index')" :to="$view({ name: 'admin.users.index' })">
-                <IconButton 
-                    class="text-white"
-                    icon="arrow_back"
-                    :title="$t('return')"
-                    filled
-                />
-            </RouterLink>
-        </Header>
-        <p class="mt-2 text-sm">{{ transl('description') }}</p>
-
-        <div id="filters" class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4">
-            <Input
-                v-model="filters.search"
-                title="event"
-                @keyup.enter="searcher.search()"
-            />
-            <Input
-                v-model="filters.start_date"
-                type="date"
-                title="dates.start"
-            />
-            <Input
-                v-model="filters.end_date"
-                title="dates.end"
-                type="date"
-            />
-            <div class="flex space-x-2 items-end">
-                <PrimaryButton
-                    class="!w-full h-12"
-                    @click="searcher.search()"
-                >
-                    {{ $t('search') }}
-                </PrimaryButton>
-                <PrimaryButton
-                    class="!w-full h-12"
-                    @click="clearFilters()"
-                >
-                    {{ $t('clear') }}
-                </PrimaryButton>
-                <PrimaryButton
-                    v-if="filters.user"
-                    class="!w-full h-12"
-                    @click="clearUser()"
-                >
-                    {{ $t('users.remove') }}
-                </PrimaryButton>
-            </div>
-        </div>
-
-        <div class="pb-4">
-            <Paginable
-                :items="models"
-                :processing="searcher.processing"
-                @send-pagination="(page) => searcher.pagination(page)"
-            >
-                <template #body="{ items }">
-                    <ol class="ml-4">
-                        <template v-for="event in items">
-                            <Item
-                                :event="event"
-                                @show="showModal.open(event)"
-                            />
-                        </template>
-                    </ol>
-                </template>
-            </Paginable>
-        </div>
-
-            <ShowView 
-                ref="showModal"
-            />
-    </div>
-</template>
-    
\ No newline at end of file
diff --git a/src/pages/Admin/Activities/Modals/Event.vue b/src/pages/Admin/Activities/Modals/Event.vue
deleted file mode 100644
index a962520..0000000
--- a/src/pages/Admin/Activities/Modals/Event.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { getDateTime } from '@Controllers/DateController';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-defineEmits([
-    'close', 
-]);
-
-/** Propiedades */
-const model = ref(null);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-
-    emit('close');
-}
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.event"
-            />
-            <div class="flex w-full p-4">
-                <GoogleIcon
-                    class="text-xl text-success"
-                    name="contact_mail"
-                />
-                <div class="pl-3 w-full">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <div class="text-sm">
-                        <h4 class="font-semibold">{{ $t('event') }}:</h4>
-                        <p>{{ model.event }}</p>
-                    </div>
-                    <div class="text-sm">
-                        <h4 class="font-semibold">{{ $t('description') }}:</h4>
-                        <p>{{ model.description }}</p>
-                    </div>
-                    <div class="flex w-full flex-col">
-                        <p class="font-semibold">
-                            {{ $t('changes') }}:
-                        </p>
-                        <div class="w-full text-xs p-2 border rounded-md">
-                            <pre>{{ model.data }}</pre>
-                        </div>
-                    </div>
-                    <div class="text-sm">
-                        <h4 class="font-semibold">{{ $t('created_at') }}:</h4>
-                        <p>{{ getDateTime(model.created_at) }}</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Activities/Module.js b/src/pages/Admin/Activities/Module.js
deleted file mode 100644
index 3d32a6e..0000000
--- a/src/pages/Admin/Activities/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`admin.activities.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.activities.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`admin.activity.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`activities.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Admin/Departments/Create.vue b/src/pages/Admin/Departments/Create.vue
deleted file mode 100644
index b0937f8..0000000
--- a/src/pages/Admin/Departments/Create.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import Input           from '@Holos/Form/Input.vue';
-import Selectable      from '@Holos/Form/Selectable.vue';
-import PageHeader      from '@Holos/PageHeader.vue';
-import Form            from './Form.vue'
-
-/** Definidores */
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    name: '',
-    description: '',
-});
-
-/** Métodos */
-function submit() {
-    form.post(apiTo('store'), {
-        onSuccess: () => {
-            Notify.success(Lang('register.create.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-</script>
-
-<template>
-    <PageHeader
-        :title="transl('create.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    <Form
-        action="create"
-        :form="form"
-        @submit="submit"
-    />
-</template>
diff --git a/src/pages/Admin/Departments/Edit.vue b/src/pages/Admin/Departments/Edit.vue
deleted file mode 100644
index 49d05a8..0000000
--- a/src/pages/Admin/Departments/Edit.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo , transl } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import Selectable      from '@Holos/Form/Selectable.vue';
-import Form            from './Form.vue'
-
-/** Definiciones */
-const vroute = useRoute();
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    id: null,
-    name: '',
-    description: '',
-});
-
-const departments = ref([]);
-
-/** Métodos */
-function submit() {
-    form.put(apiTo('update', { user: form.id }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        },
-    })
-}
-
-onMounted(() => {
-    api.get(apiTo('show', { user: vroute.params.id }), {
-        onSuccess: (r) => {
-            form.fill(r.user)
-        }
-    });
-})
-</script>
-
-<template>
-    <PageHeader :title="transl('edit.title')">
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    <Form
-        action="update"
-        :form="form"
-        @submit="submit"
-    />
-</template>
diff --git a/src/pages/Admin/Departments/Form.vue b/src/pages/Admin/Departments/Form.vue
deleted file mode 100644
index ffcf4fb..0000000
--- a/src/pages/Admin/Departments/Form.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-import { transl } from './Module';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import Textarea      from '@Holos/Form/Textarea.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Propiedades */
-defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object
-})
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-</script>
-
-<template>
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
-    </div>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <Input
-                v-model="form.name"
-                id="name"
-                :onError="form.errors.name"
-                autofocus
-                required
-            />
-            <textarea
-                v-model="form.description"
-                id="description"
-                :onError="form.errors.description"
-                rows="4"
-            />
-            <slot />
-            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
-                <PrimaryButton
-                    v-text="$t(action)"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                />
-            </div>
-        </form>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Departments/Index.vue b/src/pages/Admin/Departments/Index.vue
deleted file mode 100644
index c43dd0d..0000000
--- a/src/pages/Admin/Departments/Index.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useSearcher } from '@Services/Api';
-import { hasPermission } from '@Plugins/RolePermission';
-import { getDate } from '@Controllers/DateController';
-import { can, apiTo, viewTo, transl } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead from '@Holos/Searcher.vue';
-import Table from '@Holos/NewTable.vue';
-import ShowView from './Modals/Show.vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Searcher from '@Holos/Searcher.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-
-/** Propiedades */
-const models = ref([]);
-
-/** Referencias */
-const showModal = ref(false);
-const destroyModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-        <div>
-            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('users.title') }}</h1>
-            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('users.description') }}
-            </p>
-        </div>
-
-        <RouterLink :to="viewTo({ name: 'create' })">
-            <Adding text="Nuevo Empleado" />
-        </RouterLink>
-    </div>
-
-    <!-- Search Card -->
-    <div class="pt-2 w-full">
-        <Searcher @search="(x) => searcher.search(x)">
-        </Searcher>
-    </div>
-
-    <!-- List Card -->
-    <div class="pt-2 w-full">
-        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
-            <template #head>
-                <th v-text="$t('name')" />
-                <th class="w-32 text-center" v-text="$t('actions')" />
-            </template>
-
-            <template #body="{ items }">
-                <tr v-for="model in items" class="table-row">
-                    <td>{{ model.name }}</td>
-                    <td>
-                        <div class="table-actions">
-                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
-                                outline />
-                            <RouterLink class="h-fit"
-                                :to="viewTo({ name: 'edit', params: { id: model.id } })">
-                                <IconButton icon="edit" :title="$t('crud.edit')" outline />
-                            </RouterLink>
-                            <IconButton icon="delete" :title="$t('crud.destroy')"
-                                @click="destroyModal.open(model)" outline />
-                        </div>
-                    </td>
-                </tr>
-            </template>
-
-            <template #empty>
-                <td colspan="6" class="py-12 text-center">
-                    <div class="text-gray-500 dark:text-primary-dt/70">
-                        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                        <p class="text-lg font-medium">No se encontraron empleados</p>
-                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-                    </div>
-                </td>
-            </template>
-        </Table>
-
-        <ShowView ref="showModal" />
-
-        <DestroyView ref="destroyModal" subtitle="last_name"
-            :to="(department) => apiTo('destroy', { department })" @update="searcher.search()" />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Departments/Module.js b/src/pages/Admin/Departments/Module.js
deleted file mode 100644
index a4d4824..0000000
--- a/src/pages/Admin/Departments/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`admin.users.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`users.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`users.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Admin/Events/Index.vue b/src/pages/Admin/Events/Index.vue
deleted file mode 100644
index f63011f..0000000
--- a/src/pages/Admin/Events/Index.vue
+++ /dev/null
@@ -1,274 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { api } from '@Services/Api';
-import { apiTo } from './Module';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import VueApexCharts from 'vue3-apexcharts';
-
-// Datos del dashboard
-const dashboardData = ref({
-  totalBudget: 0,
-  justifiedExpenses: 0,
-  remainingBalance: 0,
-  expenseDistribution: []
-});
-
-// 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 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.totalBudget);
-});
-
-// Computed para el porcentaje de saldo restante
-const remainingPercentage = computed(() => {
-  return calculatePercentage(dashboardData.value.remainingBalance, dashboardData.value.totalBudget);
-});
-
-onMounted(() => {
-  api.get(apiTo('dashboard'), {
-    onSuccess: (r) => {
-      dashboardData.value = r.dashboard;
-    }
-  });
-});
-</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">Total</h3>
-            <p class="mt-2 text-3xl font-bold text-blue-600 dark:text-blue-400">
-              ${{ dashboardData.totalBudget }}
-            </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">
-              ${{ 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">
-              ${{ 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">
-          Gastos por Caja Chica
-        </h2>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">
-          Distribución de gastos por caja chica
-        </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 Caja Chica
-            </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">
-                  ${{ ((item.value / 100) * dashboardData.justifiedExpenses).toFixed(2) }}
-                </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">
-              Cajas Chicas
-            </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/Admin/Events/Justification.vue b/src/pages/Admin/Events/Justification.vue
deleted file mode 100644
index e5f2011..0000000
--- a/src/pages/Admin/Events/Justification.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, viewTo } from './Module';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import PageHeader from '@Holos/PageHeader.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-import Input from '@Holos/Form/Input.vue';
-import Selectable from '@Holos/Form/Selectable.vue';
-import Textarea from '@Holos/Form/Textarea.vue';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-
-/** Definiciones */
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-  event_name: '',
-  location: '',
-  description: '',
-  participants_count: '',
-  cost: '',
-  observations: '',
-  petty_cash_id: '',
-  files: null,
-});
-
-const pettyCashes = ref([]);
-const availableBudget = ref('');
-
-// Watch para actualizar el presupuesto disponible cuando cambie la caja chica
-watch(() => form.petty_cash_id, (newValue) => {
-  availableBudget.value = newValue?.available_budget ?? 0;
-}, { deep: true });
-
-
-// Función para manejar la subida de archivos
-const handleFileUpload = (event) => {
-  const file = event.target.files[0];
-  if (file) {
-    if (file.type === 'application/pdf') {
-      form.files = file;
-    } else {
-      Notify.error('Por favor, selecciona un archivo PDF válido');
-      event.target.value = '';
-    }
-  }
-};
-
-// Función para eliminar archivo
-const removeFile = () => {
-  form.files = null;
-  const fileInput = document.getElementById('justification-file');
-  if (fileInput) {
-    fileInput.value = '';
-  }
-};
-
-// Función para enviar justificación
-function submit() {
-  form.transform(data => ({
-    ...data,
-    petty_cash_id: data.petty_cash_id?.id
-  })).post(apiTo('store-expense-justification'), {
-    onSuccess: () => {
-      Notify.success('Justificación enviada correctamente');
-      router.push(viewTo({ name: 'reports' }));
-    }
-  });
-}
-
-/** Ciclos */
-onMounted(() => {
-  api.catalog({
-    'pettyCash:all': null
-  }, {
-    onSuccess: (r) => pettyCashes.value = r['pettyCash:all'] ?? []
-  });
-});
-</script>
-
-<template>
-  <PageHeader
-    title="Justificación de Gastos"
-  >
-    <RouterLink :to="viewTo({ name: 'index' })">
-      <IconButton
-        class="text-white"
-        icon="arrow_back"
-        :title="$t('return')"
-        filled
-      />
-    </RouterLink>
-  </PageHeader>
-  
-  <div class="w-full pb-2">
-    <p class="text-justify text-sm">Documenta y justifica los gastos realizados en eventos</p>
-  </div>
-
-  <!-- Card principal -->
-  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-    
-    <!-- Formulario -->
-    <form @submit.prevent="submit" class="space-y-6">
-      
-      <!-- Detalles del Evento -->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        
-        <Input
-          v-model="form.event_name"
-          id="event_name"
-          title="Nombre del Evento"
-          :onError="form.errors.event_name"
-          required
-        />
-
-        <Input
-          v-model="form.location"
-          id="location"
-          title="Lugar"
-          :onError="form.errors.location"
-          required
-        />
-
-      </div>
-
-      <Textarea
-        v-model="form.description"
-        id="description"
-        title="Descripción y Detalles"
-        :onError="form.errors.description"
-        required
-      />
-
-      <!-- Detalles Financieros y Participantes -->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        
-        <Input
-          v-model.number="form.participants_count"
-          id="participants_count"
-          title="Número de Participantes"
-          type="number"
-          min="1"
-          :onError="form.errors.participants_count"
-        />
-
-        <Input
-          v-model.number="form.cost"
-          id="cost"
-          title="Costo"
-          type="number"
-          min="0"
-          step="0.01"
-          :onError="form.errors.cost"
-        />
-
-      </div>
-
-      <!-- Caja Chica y Presupuesto Disponible -->
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        
-        <Selectable
-          v-model="form.petty_cash_id"
-          id="petty_cash_id"
-          title="Caja Chica"
-          :onError="form.errors.petty_cash_id"
-          :options="pettyCashes"
-          required
-        />
-
-        <Input
-          v-model="availableBudget"
-          type="number"
-          id="available_budget"
-          title="Presupuesto Disponible"
-          disabled
-        />
-
-      </div>
-
-      <!-- Observaciones -->
-      <Textarea
-        v-model="form.observations"
-        id="observations"
-        title="Observaciones"
-        :onError="form.errors.observations"
-      />
-
-        <!-- Subida de archivo -->
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-            Subir justificante (PDF) *
-          </label>
-          
-          <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-[#7c3aed] transition-colors dark:border-primary/20 dark:hover:border-[#7c3aed]">
-            <div class="space-y-1 text-center">
-              <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
-                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-              </svg>
-              <div class="flex text-sm text-gray-600 dark:text-primary-dt/70">
-                <label for="justification-file" class="relative cursor-pointer bg-white rounded-md font-medium text-[#7c3aed] hover:text-[#6d28d9] focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-[#7c3aed]">
-                  <span>Sube un archivo</span>
-                  <input
-                    id="justification-file"
-                    name="justification-file"
-                    type="file"
-                    accept=".pdf"
-                    class="sr-only"
-                    @change="handleFileUpload"
-                  >
-                </label>
-                <p class="pl-1">o arrastra y suelta</p>
-              </div>
-              <p class="text-xs text-gray-500 dark:text-primary-dt/50">
-                PDF hasta 10MB
-              </p>
-            </div>
-          </div>
-
-          <!-- Archivo seleccionado -->
-          <div v-if="form.files" class="mt-3 p-3 bg-green-50 border border-green-200 rounded-lg dark:bg-green-900/20 dark:border-green-800">
-            <div class="flex items-center justify-between">
-              <div class="flex items-center gap-2">
-                <GoogleIcon class="text-green-600 dark:text-green-400 text-xl" name="picture_as_pdf" />
-                <span class="text-sm font-medium text-green-800 dark:text-green-300">
-                  {{ form.files.name }}
-                </span>
-              </div>
-              <button
-                @click="removeFile"
-                type="button"
-                class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
-              >
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-
-      <!-- Botón de envío -->
-      <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
-        <PrimaryButton
-          type="submit"
-          :processing="form.processing"
-        >
-          <GoogleIcon class="text-white text-xl mr-2" name="send" />
-          Enviar Justificación
-        </PrimaryButton>
-      </div>
-
-    </form>
-
-  </section>
-</template>
diff --git a/src/pages/Admin/Events/Modals/Show.vue b/src/pages/Admin/Events/Modals/Show.vue
deleted file mode 100644
index 327261c..0000000
--- a/src/pages/Admin/Events/Modals/Show.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { getDateTime } from '@Controllers/DateController';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Propiedades */
-const model    = ref(null);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-
-    emit('close');
-}
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.event_name"
-                :subtitle="model.location"
-            >
-                <div class="flex w-full flex-col">
-                    <div class="flex w-full justify-center items-center">
-                        <GoogleIcon 
-                            class="text-6xl text-primary"
-                            name="event"
-                        />
-                    </div>
-                </div>
-            </Header>
-            <div class="flex w-full p-4">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="event"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <p>
-                        <b>{{ $t('event_name') }}: </b>
-                        {{ model.event_name }}
-                    </p>
-                    <p>
-                        <b>{{ $t('location') }}: </b>
-                        {{ model.location }}
-                    </p>
-                    <p v-if="model.description">
-                        <b>{{ $t('description') }}: </b>
-                        {{ model.description }}
-                    </p>
-                    <p>
-                        <b>{{ $t('participants_count') }}: </b>
-                        {{ model.participants_count ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('cost') }}: </b>
-                        ${{ model.cost ?? '0.00' }}
-                    </p>
-                    <p v-if="model.observations">
-                        <b>{{ $t('observations') }}: </b>
-                        {{ model.observations }}
-                    </p>
-                    <p>
-                        <b>{{ $t('company') }}: </b>
-                        {{ model.company?.name ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('petty_cash.title') }}: </b>
-                        {{ model.petty_cash?.name ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p>
-                        <b>{{ $t('updated_at') }}: </b>
-                        {{ getDateTime(model.updated_at) }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Events/Module.js b/src/pages/Admin/Events/Module.js
deleted file mode 100644
index 2549a75..0000000
--- a/src/pages/Admin/Events/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`admin.events.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.events.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`events.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`events.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Admin/Events/PettyCashes/Assignamment.vue b/src/pages/Admin/Events/PettyCashes/Assignamment.vue
deleted file mode 100644
index 7bff096..0000000
--- a/src/pages/Admin/Events/PettyCashes/Assignamment.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, viewTo } from './Module';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import PageHeader from '@Holos/PageHeader.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-import Input from '@Holos/Form/Input.vue';
-import Selectable from '@Holos/Form/Selectable.vue';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-
-/** Definiciones */
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-  petty_cash_id: '',
-  budget_items: [
-    {
-      id: 1,
-      concept: '',
-      amount: ''
-    }
-  ]
-});
-
-const pettyCashes = ref([]);
-let nextId = 2;
-
-// Computed para calcular el total
-const totalBudget = computed(() => {
-  return form.budget_items.reduce((total, item) => {
-    return total + (parseFloat(item.amount) || 0);
-  }, 0);
-});
-
-// Función para agregar nueva fila
-const addBudgetItem = () => {
-  form.budget_items.push({
-    id: nextId++,
-    concept: '',
-    amount: 0
-  });
-};
-
-// Función para eliminar fila
-const removeBudgetItem = (id) => {
-  if (form.budget_items.length > 1) {
-    form.budget_items = form.budget_items.filter(item => item.id !== id);
-  }
-};
-
-// Función para guardar presupuesto
-function submit() {
-  // Filtrar elementos vacíos
-  const validItems = form.budget_items.filter(item => 
-    item.concept.trim() !== '' && item.amount > 0
-  );
-
-  if (validItems.length === 0) {
-    Notify.error('Por favor, agrega al menos un elemento al presupuesto');
-    return;
-  }
-
-  form.transform(data => ({
-    ...data,
-    petty_cash_id: form.petty_cash_id?.id,
-    budget_items: validItems
-  })).post(apiTo('store-budget', { pettyCash: form.petty_cash_id }), {
-    onSuccess: () => {
-      Notify.success('Presupuesto guardado correctamente');
-      router.push(viewTo({ name: 'index' }));
-    }
-  });
-}
-
-
-/** Ciclos */
-onMounted(() => {
-  api.catalog({
-    'pettyCash:all': null
-  }, {
-    onSuccess: (r) => pettyCashes.value = r['pettyCash:all'] ?? []
-  });
-});
-</script>
-
-<template>
-  <PageHeader
-    title="Asignación de Presupuesto"
-  >
-    <RouterLink :to="viewTo({ name: 'index' })">
-      <IconButton
-        class="text-white"
-        icon="arrow_back"
-        :title="$t('return')"
-        filled
-      />
-    </RouterLink>
-  </PageHeader>
-  
-  <div class="w-full pb-2">
-    <p class="text-justify text-sm">Gestiona y asigna el presupuesto para una caja chica</p>
-  </div>
-
-  <!-- Card principal -->
-  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-    
-    <!-- Formulario de presupuesto -->
-    <form @submit.prevent="submit" class="space-y-6">
-      
-      <!-- Campos principales -->
-      <div class="grid grid-cols-1 gap-6">
-        <Selectable
-          v-model="form.petty_cash_id"
-          id="petty_cash_id"
-          title="Caja Chica"
-          :onError="form.errors.petty_cash_id"
-          :options="pettyCashes"
-          required
-        />
-      </div>
-      
-      <!-- Filas de presupuesto -->
-      <div class="space-y-4">
-        <h3 class="text-lg font-medium text-gray-900 dark:text-primary-dt">Elementos del Presupuesto</h3>
-        <div
-          v-for="(item, index) in form.budget_items"
-          :key="item.id"
-          class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end"
-        >
-          
-          <!-- Campo Concepto -->
-          <div class="md:col-span-5">
-            <Input
-              v-model="item.concept"
-              :id="`concept_${item.id}`"
-              title="Concepto"
-            />
-          </div>
-
-          <!-- Campo Monto -->
-          <div class="md:col-span-4">
-            <Input
-              v-model.number="item.amount"
-              :id="`amount_${item.id}`"
-              title="Monto"
-              type="number"
-              min="0"
-              step="0.01"
-            />
-          </div>
-
-          <!-- Botón de eliminar -->
-          <div class="md:col-span-3 flex justify-end">
-            <IconButton
-              v-if="form.budget_items.length > 1"
-              @click="removeBudgetItem(item.id)"
-              icon="delete"
-              class="text-red-500 hover:text-red-700"
-              :title="$t('delete')"
-            />
-          </div>
-
-        </div>
-      </div>
-
-      <!-- Resumen del presupuesto -->
-      <div class="mt-8 p-4 bg-gray-50 rounded-lg dark:bg-primary/5">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <GoogleIcon class="text-gray-600 dark:text-primary-dt text-xl" name="account_balance_wallet" />
-            <span class="text-lg font-medium text-gray-800 dark:text-primary-dt">Total del Presupuesto:</span>
-          </div>
-          <div class="text-2xl font-bold text-[#2563eb] dark:text-primary-dt">
-            ${{ totalBudget.toFixed(2) }}
-          </div>
-        </div>
-      </div>
-
-      <!-- Botones de acción -->
-      <div class="flex items-center justify-between pt-6 border-t border-gray-100 dark:border-primary/20">
-        
-        <!-- Botón Agregar más -->
-        <IconButton
-          @click="addBudgetItem"
-          icon="add"
-          class="bg-green-600 hover:bg-green-700 text-white"
-          :title="$t('add')"
-        >
-          + Agregar más
-        </IconButton>
-
-        <!-- Botón Guardar Presupuesto -->
-        <PrimaryButton
-          type="submit"
-          :processing="form.processing"
-        >
-          <GoogleIcon class="text-white text-xl mr-2" name="save" />
-          Guardar Presupuesto
-        </PrimaryButton>
-
-      </div>
-
-    </form>
-
-  </section>
-</template>
diff --git a/src/pages/Admin/Events/PettyCashes/Create.vue b/src/pages/Admin/Events/PettyCashes/Create.vue
deleted file mode 100644
index 267092f..0000000
--- a/src/pages/Admin/Events/PettyCashes/Create.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, viewTo, transl } from './Module';
-
-import PageHeader from '@Holos/PageHeader.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-import Form from './Form.vue';
-
-/** Definiciones */
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-  name: '',
-  description: '',
-});
-
-/** Métodos */
-function submit() {
-  form.post(apiTo('store'), {
-    onSuccess: () => {
-      Notify.success(Lang('register.create.onSuccess'))
-      router.push(viewTo({ name: 'index' }));
-    }
-  });
-}
-</script>
-
-<template>
-  <PageHeader
-    :title="transl('create.title')"
-  >
-    <RouterLink :to="viewTo({ name: 'index' })">
-      <IconButton
-        class="text-white"
-        icon="arrow_back"
-        :title="$t('return')"
-        filled
-      />
-    </RouterLink>
-  </PageHeader>
-  <Form
-    action="create"
-    :form="form"
-    @submit="submit"
-  />
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Events/PettyCashes/Edit.vue b/src/pages/Admin/Events/PettyCashes/Edit.vue
deleted file mode 100644
index 8c8d401..0000000
--- a/src/pages/Admin/Events/PettyCashes/Edit.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo, transl } from './Module';
-
-import IconButton from '@Holos/Button/Icon.vue'
-import PageHeader from '@Holos/PageHeader.vue';
-import Form from './Form.vue'
-
-/** Definiciones */
-const vroute = useRoute();
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    id: null,
-    name: '',
-    description: '',
-});
-
-/** Métodos */
-function submit() {
-    form.put(apiTo('update', { petty_cash: form.id }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        },
-    })
-}
-
-onMounted(() => {
-    api.get(apiTo('show', { petty_cash: vroute.params.id }), {
-        onSuccess: (r) => {
-            form.fill(r.petty_cash)
-        }
-    });
-})
-</script>
-
-<template>
-    <PageHeader :title="transl('edit.title')">
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    <Form
-        action="edit"
-        :form="form"
-        @submit="submit"
-    />
-</template>
diff --git a/src/pages/Admin/Events/PettyCashes/Form.vue b/src/pages/Admin/Events/PettyCashes/Form.vue
deleted file mode 100644
index 4cf1801..0000000
--- a/src/pages/Admin/Events/PettyCashes/Form.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup>
-import { transl } from './Module';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input from '@Holos/Form/Input.vue';
-import Textarea from '@Holos/Form/Textarea.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Propiedades */
-defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object,
-    companies: Array
-})
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-</script>
-
-<template>
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
-    </div>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="space-y-6">
-            
-            <!-- Campos del formulario -->
-            <Input
-                v-model="form.name"
-                id="name"
-                title="name"
-                :onError="form.errors.name"
-                required
-            />
-            
-            <Textarea
-                v-model="form.description"
-                id="description"
-                title="description"
-                :onError="form.errors.description"
-            />
-
-            <!-- Botón de Enviar -->
-            <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
-                <PrimaryButton
-                    v-text="$t(action)"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                    type="submit"
-                />
-            </div>
-        </form>
-    </div>
-</template>
diff --git a/src/pages/Admin/Events/PettyCashes/Index.vue b/src/pages/Admin/Events/PettyCashes/Index.vue
deleted file mode 100644
index 5f25d82..0000000
--- a/src/pages/Admin/Events/PettyCashes/Index.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useSearcher } from '@Services/Api';
-import { hasPermission } from '@Plugins/RolePermission';
-import { getDate } from '@Controllers/DateController';
-import { can, apiTo, viewTo, transl } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead from '@Holos/Searcher.vue';
-import Table from '@Holos/NewTable.vue';
-import ShowView from './Modals/Show.vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Searcher from '@Holos/Searcher.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-
-/** Propiedades */
-const models = ref([]);
-
-/** Referencias */
-const showModal = ref(false);
-const destroyModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-        <div>
-            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('petty_cash.title') }}</h1>
-            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('petty_cash.description') }}
-            </p>
-        </div>
-
-        <RouterLink :to="viewTo({ name: 'create' })">
-            <Adding text="Nueva Caja Chica" />
-        </RouterLink>
-    </div>
-
-    <!-- Search Card -->
-    <div class="pt-2 w-full">
-        <Searcher @search="(x) => searcher.search(x)">
-        </Searcher>
-    </div>
-
-    <!-- List Card -->
-    <div class="pt-2 w-full">
-        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
-            <template #head>
-                <th v-text="$t('name')" />
-                <th v-text="$t('description')" />
-                <th v-text="$t('available_budget')" />
-                <th class="w-32 text-center" v-text="$t('actions')" />
-            </template>
-
-            <template #body="{ items }">
-                <tr v-for="model in items" class="table-row">
-                    <td>{{ model.name }}</td>
-                    <td>{{ model.description ?? '-' }}</td>
-                    <td>${{ model.available_budget ?? 0 }}</td>
-                    <td>
-                        <div class="table-actions">
-                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
-                                outline />
-                            <RouterLink class="h-fit"
-                                :to="viewTo({ name: 'edit', params: { id: model.id } })">
-                                <IconButton icon="edit" :title="$t('crud.edit')" outline />
-                            </RouterLink>
-                            <IconButton icon="delete" :title="$t('crud.destroy')"
-                                @click="destroyModal.open(model)" outline />
-                        </div>
-                    </td>
-                </tr>
-            </template>
-
-            <template #empty>
-                <td colspan="5" class="py-12 text-center">
-                    <div class="text-gray-500 dark:text-primary-dt/70">
-                        <GoogleIcon name="account_balance_wallet" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                        <p class="text-lg font-medium">No se encontraron cajas chicas</p>
-                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-                    </div>
-                </td>
-            </template>
-        </Table>
-
-        <ShowView ref="showModal" />
-
-        <DestroyView ref="destroyModal" subtitle="name"
-            :to="(petty_cash) => apiTo('destroy', { petty_cash })" @update="searcher.search()" />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Events/PettyCashes/Modals/Show.vue b/src/pages/Admin/Events/PettyCashes/Modals/Show.vue
deleted file mode 100644
index 8462b67..0000000
--- a/src/pages/Admin/Events/PettyCashes/Modals/Show.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { getDateTime } from '@Controllers/DateController';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Propiedades */
-const model    = ref(null);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-
-    emit('close');
-}
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.name"
-                :subtitle="model.description"
-            />
-            <div class="flex w-full p-4">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="account_balance_wallet"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <p>
-                        <b>{{ $t('name') }}: </b>
-                        {{ model.name }}
-                    </p>
-                    <p>
-                        <b>{{ $t('description') }}: </b>
-                        {{ model.description }}
-                    </p>
-                    <p>
-                        <b>{{ $t('available_budget') }}: </b>
-                        ${{ model.available_budget ?? 0 }}
-                    </p>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p>
-                        <b>{{ $t('updated_at') }}: </b>
-                        {{ getDateTime(model.updated_at) }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Events/PettyCashes/Module.js b/src/pages/Admin/Events/PettyCashes/Module.js
deleted file mode 100644
index 822a055..0000000
--- a/src/pages/Admin/Events/PettyCashes/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`admin.petty-cashes.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.events.pettyCashes.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`pettyCashes.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`pettyCashes.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Admin/Events/Reports.vue b/src/pages/Admin/Events/Reports.vue
deleted file mode 100644
index 82c289c..0000000
--- a/src/pages/Admin/Events/Reports.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useSearcher } from '@Services/Api';
-import { hasPermission } from '@Plugins/RolePermission';
-import { getDate } from '@Controllers/DateController';
-import { can, apiTo, viewTo, transl } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead from '@Holos/Searcher.vue';
-import Table from '@Holos/NewTable.vue';
-import ShowView from './Modals/Show.vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Searcher from '@Holos/Searcher.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-
-/** Propiedades */
-const models = ref([]);
-
-/** Referencias */
-const showModal = ref(false);
-const destroyModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-        <div>
-            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('reports.title') }}</h1>
-            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('reports.description') }}
-            </p>
-        </div>
-    </div>
-
-    <!-- Search Card -->
-    <div class="pt-2 w-full">
-        <Searcher @search="(x) => searcher.search(x)">
-        </Searcher>
-    </div>
-
-    <!-- List Card -->
-    <div class="pt-2 w-full">
-        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
-            <template #head>
-                <th v-text="$t('created_at')" />
-                <th v-text="$t('event_name')" />
-                <th v-text="$t('cost')" />
-                <th v-text="$t('petty_cash.title')" />
-                <th class="w-32 text-center" v-text="$t('actions')" />
-            </template>
-
-            <template #body="{ items }">
-                <tr v-for="model in items" class="table-row">
-                    <td>{{ model.created_at ? getDate(model.created_at) : '-' }}</td>
-                    <td>{{ model.event_name }}</td>
-                    <td>
-                        <div class="text-lg font-bold text-[#2563eb] dark:text-primary-dt">
-                            ${{ model.cost }}
-                        </div>
-                    </td>
-                    <td>{{ model.petty_cash?.name }}</td>
-                    <td>
-                        <div class="table-actions">
-                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
-                                outline />
-                            <IconButton icon="delete" :title="$t('crud.destroy')"
-                                @click="destroyModal.open(model)" outline />
-                        </div>
-                    </td>
-                </tr>
-            </template>
-
-            <template #empty>
-                <td colspan="4" class="py-12 text-center">
-                    <div class="text-gray-500 dark:text-primary-dt/70">
-                        <GoogleIcon name="receipt_long" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                        <p class="text-lg font-medium">No se encontraron justificaciones</p>
-                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-                    </div>
-                </td>
-            </template>
-        </Table>
-
-        <ShowView ref="showModal" />
-
-        <DestroyView ref="destroyModal" subtitle="event_name"
-            :to="(expenseJustification) => apiTo('destroy-expense-justification', { expenseJustification })" @update="searcher.search()" />
-    </div>
-</template>
diff --git a/src/pages/Admin/Roles/Create.vue b/src/pages/Admin/Roles/Create.vue
deleted file mode 100644
index c2eaed2..0000000
--- a/src/pages/Admin/Roles/Create.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import { useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import Form            from './Form.vue'
-
-/** Definidores */
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    description: '',
-});
-
-/** Métodos */
-function submit() {
-    form.post(apiTo('store'), {
-        onSuccess: () => {
-            Notify.success(Lang('register.create.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-</script>
-
-<template>
-    <PageHeader :title="transl('create.title')">
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    <Form
-        action="create"
-        :form="form"
-        @submit="submit"
-    />
-</template>
diff --git a/src/pages/Admin/Roles/Edit.vue b/src/pages/Admin/Roles/Edit.vue
deleted file mode 100644
index c660f9e..0000000
--- a/src/pages/Admin/Roles/Edit.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup>
-import { onMounted } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo , transl } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import Form            from './Form.vue'
-
-/** Definiciones */
-const vroute = useRoute();
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    id: null,
-    description: '',
-});
-
-/** Métodos */
-function submit() {
-    form.put(apiTo('update', { role: form.id }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        },
-    })
-}
-
-onMounted(() => {
-    api.get(apiTo('show', { role: vroute.params.id }), {
-        onSuccess: (r) => form.fill(r.model)
-    });
-})
-</script>
-
-<template>
-    <PageHeader :title="transl('edit.title')">
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    <Form
-        action="update"
-        :form="form"
-        @submit="submit"
-    />
-</template>
diff --git a/src/pages/Admin/Roles/Form.vue b/src/pages/Admin/Roles/Form.vue
deleted file mode 100644
index 93ed745..0000000
--- a/src/pages/Admin/Roles/Form.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup>
-import { transl } from './Module';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Propiedades */
-defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object
-})
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-</script>
-
-<template>
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
-    </div>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1">
-            <Input
-                v-model="form.description"
-                id="name"
-                :onError="form.errors.description"
-                autofocus
-                required
-            />
-            <slot />
-            <div class="flex flex-col items-center justify-end space-y-4 mt-4">
-                <PrimaryButton
-                    v-text="$t(action)"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                />
-            </div>
-        </form>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Roles/Index.vue b/src/pages/Admin/Roles/Index.vue
deleted file mode 100644
index d2fa467..0000000
--- a/src/pages/Admin/Roles/Index.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { can, apiTo, viewTo, transl } from './Module'
-import { useSearcher } from '@Services/Api';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import DestroyView     from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead    from '@Holos/Searcher.vue';
-import Table           from '@Holos/Table.vue';
-import Permissions     from './Modals/Permissions.vue';
-
-/** Propiedades */
-const destroyModal = ref(null);
-const editModal    = ref(null);
-
-const models = ref([]);
-
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>  
-
-<template>
-    <div>
-        <SearcherHead
-            :title="transl('title')"
-            @search="(x) => searcher.search(x)"
-        >
-            <RouterLink
-                v-if="can('create')"
-                :to="viewTo({ name: 'create' })"
-            >
-                <IconButton
-                    class="text-white"
-                    icon="add"
-                    :title="$t('crud.create')"
-                    filled
-                />
-            </RouterLink>
-            <IconButton
-                icon="refresh"
-                :title="$t('refresh')"
-                @click="searcher.search()"
-            />
-        </SearcherHead>
-        <div class="pt-2 space-y-2 w-full">
-            <p class="text-sm">
-                {{ transl('description') }}
-            </p>
-            <Table 
-                :items="models"
-                @send-pagination="(page) => searcher.pagination(page)"
-                :processing="searcher.processing"
-            >
-                <template #head>
-                    <th v-text="$t('name')" />
-                    <th
-                        v-text="$t('actions')"
-                        class="w-32 text-center"
-                    />
-                </template>
-                <template #body="{items}">
-                    <tr v-for="model in items" class="table-row">
-                        <td class="table-cell border">
-                            {{ model.description }}
-                        </td>
-                        <td class="table-cell">
-                            <div class="table-actions">
-                                <IconButton
-                                    v-if="can('edit') && ![1,2].includes(model.id)"
-                                    icon="license"
-                                    :title="transl('permissions.title')"
-                                    @click="editModal.open(model)"
-                                    outline
-                                />
-                                <RouterLink
-                                    v-if="can('edit')"
-                                    class="h-fit"
-                                    :to="viewTo({ name: 'edit', params: { id: model.id } })"
-                                >
-                                    <IconButton
-                                        icon="edit"
-                                        :title="$t('crud.edit')"
-                                        outline
-                                    />
-                                </RouterLink>
-                                <IconButton
-                                    v-if="can('destroy') && ![1,2].includes(model.id)"
-                                    icon="delete"
-                                    :title="$t('crud.destroy')"
-                                    @click="destroyModal.open(model)"
-                                    outline
-                                />
-                            </div>
-                        </td>
-                    </tr>
-                </template>
-            </Table>
-        </div>
-        
-        <Permissions
-            v-if="can('index')"
-            ref="editModal"
-        />
-        <DestroyView
-            v-if="can('destroy')"
-            ref="destroyModal"
-            title="description"
-            subtitle=""
-            :to="(role) => apiTo('destroy', { role })"
-            @update="searcher.search()"
-        />
-    </div>
-</template>
-    
\ No newline at end of file
diff --git a/src/pages/Admin/Roles/Modals/Permissions.vue b/src/pages/Admin/Roles/Modals/Permissions.vue
deleted file mode 100644
index 8a6381e..0000000
--- a/src/pages/Admin/Roles/Modals/Permissions.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup>
-import { onUpdated, ref } from 'vue';
-import { api } from '@Services/Api';
-import { apiTo } from '../Module';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import EditModal  from '@Holos/Modal/Show.vue';
-import Checkbox   from '@Holos/Form/Checkbox.vue';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-]);
-
-/** Propiedades */
-const permissionTypes = ref([]);
-const permissions     = ref([]);
-const model           = ref(null);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    modalRef.value.close();
-    emit('close');
-}
-
-function update() {
-    api.put(apiTo('permissions', { role: model.value.id }), {
-        data: {
-            permissions: permissions.value
-        },
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            
-            close();
-        }
-    });
-}
-
-function getPermissions() {
-    api.get(route('permission-types.all-with-permissions'), {
-        onSuccess: (r) => permissionTypes.value = r.models
-    });
-
-    api.get(apiTo('permissions', { role: model.value.id }), {
-        onSuccess: (r) => {
-            if(r.permissions) {
-                permissions.value = r.permissions.map(p => p.id);
-            }
-        }
-    });
-}
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        getPermissions();
-        modalRef.value.open();
-    }
-});
-</script>
-<template>
-    <EditModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model"> 
-            <Header
-                :title="model.description"
-            />
-            <div class="p-4">
-                <div class="grid gap-4 grid-cols-2">
-                    <div v-for="permissionType in permissionTypes">
-                        <p class="font-bold">{{ permissionType.name}}</p>
-                        <ul class="space-y-0.5 list-none">
-                            <li v-for="permission in permissionType.permissions">
-                                <Checkbox
-                                    v-model="permissions"
-                                    :title="permission.description"
-                                    :value="permission.id"
-                                />
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <template #buttons>
-            <PrimaryButton
-                @click="update"
-            >
-                {{ $t('update') }}
-            </PrimaryButton>
-        </template>
-    </EditModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Roles/Module.js b/src/pages/Admin/Roles/Module.js
deleted file mode 100644
index 284870d..0000000
--- a/src/pages/Admin/Roles/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`admin.roles.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.roles.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`roles.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`roles.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/CreateCertification.vue b/src/pages/Admin/Users/Academic/CreateCertification.vue
deleted file mode 100644
index bccede7..0000000
--- a/src/pages/Admin/Users/Academic/CreateCertification.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup>
-import { useRouter, useRoute } from 'vue-router';
-import { useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import FormCertification from './FormCertification.vue';
-
-/** Definidores */
-const router = useRouter();
-const route = useRoute();
-
-/** Propiedades */
-const form = useForm({
-    name: '',
-    description: '',
-    institution: '',
-    date_obtained: '',
-    date_expiration: '',
-    number: '',
-    user_id: route.params.id || '',
-});
-
-/** Métodos */
-function submit() {
-    form.post(apiTo('store-certificate'), {
-        onSuccess: () => {
-            Notify.success(Lang('register.create.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-</script>
-
-<template>
-    <PageHeader
-        :title="transl('create.certification.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl('create.certification.description')" />
-    </div>
-    
-    <FormCertification
-        :form="form"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/CreateRecord.vue b/src/pages/Admin/Users/Academic/CreateRecord.vue
deleted file mode 100644
index f9110ee..0000000
--- a/src/pages/Admin/Users/Academic/CreateRecord.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import Selectable      from '@Holos/Form/Selectable.vue';
-import FormRecord      from './FormRecord.vue';
-
-/** Definidores */
-const router = useRouter();
-const route = useRoute();
-
-/** Propiedades */
-const form = useForm({
-    title: '',
-    institution: '',
-    date_obtained: '',
-    degree_type_ek: '',
-    user_id: route.params.id || '',
-    // file_path: null,
-});
-
-const degreeTypes = ref([]);
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        degree_type_ek: form.degree_type_ek?.id
-    })).post(apiTo('store-record'), {
-        onSuccess: () => {
-            Notify.success(Lang('register.create.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-
-/** Ciclos */
-onMounted(() => {
-    api.catalog({
-            'degreeType:all': null,
-        },
-        {
-           onSuccess: (r) => {
-            degreeTypes.value = r['degreeType:all'] ?? [];
-        } 
-    });
-})
-</script>
-
-<template>
-    <PageHeader
-        :title="transl('create.record.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl('create.record.description')" />
-    </div>
-    <FormRecord
-        :degreeTypes="degreeTypes"
-        :form="form"
-        @submit="submit"
-    >
-        <Selectable
-            v-model="form.degree_type_ek"
-            title="degreeType"
-            :options="degreeTypes"
-        />
-    </FormRecord>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/EditCertification.vue b/src/pages/Admin/Users/Academic/EditCertification.vue
deleted file mode 100644
index 5cc2039..0000000
--- a/src/pages/Admin/Users/Academic/EditCertification.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import FormCertification from './FormCertification.vue';
-
-/** Definidores */
-const router = useRouter();
-const vroute = useRoute();
-
-/** Propiedades */
-const form = useForm({
-    name: '',
-    description: '',
-    institution: '',
-    date_obtained: '',
-    date_expiration: '',
-    number: '',
-    user_id: vroute.params.id || '',
-});
-
-/** Métodos */
-function submit() {
-    form.put(apiTo('update-certificate', { certificate: vroute.params.certification }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-
-
-/** Ciclos */
-onMounted(() => {
-    api.get(apiTo('show-certificate', { certificate: vroute.params.certification }), {
-        onSuccess: (r) => {
-            form.fill(r.certificate)
-            if (r.certificate.date_obtained) {
-                form.date_obtained = new Date(r.certificate.date_obtained).toISOString().split('T')[0]
-            }
-            if (r.certificate.date_expiration) {
-                form.date_expiration = new Date(r.certificate.date_expiration).toISOString().split('T')[0]
-            }
-        }
-    });
-})
-</script>
-
-<template>
-    <PageHeader
-        :title="transl('edit.certification.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl('edit.certification.description')" />
-    </div>
-    <FormCertification
-        action="update"
-        :form="form"
-        @submit="submit"
-    />
-</template>
diff --git a/src/pages/Admin/Users/Academic/EditRecord.vue b/src/pages/Admin/Users/Academic/EditRecord.vue
deleted file mode 100644
index 2001ef3..0000000
--- a/src/pages/Admin/Users/Academic/EditRecord.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import Selectable      from '@Holos/Form/Selectable.vue';
-import FormRecord      from './FormRecord.vue';
-
-/** Definidores */
-const router = useRouter();
-const vroute = useRoute();
-
-/** Propiedades */
-const form = useForm({
-    title: '',
-    institution: '',
-    date_obtained: '',
-    degree_type_ek: '',
-    user_id: vroute.params.id || '',
-    // file_path: null,
-});
-
-const degreeTypes = ref([]);
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        degree_type_ek: form.degree_type_ek?.id
-    })).put(apiTo('update-record', { academicRecord: vroute.params.record }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-
-function fillForm() {
-    api.get(apiTo('show-record', { academicRecord: vroute.params.record }), {
-        onSuccess: (r) => {
-            form.fill(r.academic_record)
-            form.degree_type_ek = degreeTypes.value.find(type => type.name == form.degree_type_ek)
-            if (r.academic_record.date_obtained) {
-                form.date_obtained = new Date(r.academic_record.date_obtained).toISOString().split('T')[0]
-            }
-        }
-    });
-}
-
-/** Ciclos */
-onMounted(() => {
-    api.catalog({
-            'degreeType:all': null,
-        },
-        {
-           onSuccess: (r) => {
-            degreeTypes.value = r['degreeType:all'] ?? [];
-            // De esta manera se puede rellenar el form con el degree_type_ek del catalogo
-            fillForm();
-        } 
-    });
-})
-</script>
-
-<template>
-    <PageHeader
-        :title="transl('edit.record.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl('edit.record.description')" />
-    </div>
-    <FormRecord
-        :degreeTypes="degreeTypes"
-        :form="form"
-        @submit="submit"
-    >
-        <Selectable
-            action="update"
-            v-model="form.degree_type_ek"
-            title="degreeType"
-            :options="degreeTypes"
-        />
-    </FormRecord>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/FormCertification.vue b/src/pages/Admin/Users/Academic/FormCertification.vue
deleted file mode 100644
index 34f4efd..0000000
--- a/src/pages/Admin/Users/Academic/FormCertification.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup>
-import PrimaryButton   from '@Holos/Button/Primary.vue';
-import Input           from '@Holos/Form/Input.vue';
-import Textarea        from '@Holos/Form/Textarea.vue';
-
-const emit = defineEmits([
-    'submit'
-])
-
-defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object
-})
-
-const submit = () => {
-    emit('submit')
-}
-</script>
-
-<template>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <Input
-                v-model="form.name"
-                id="name"
-                :onError="form.errors.name"
-                autofocus
-                required
-            />
-            <Input
-                v-model="form.institution"
-                id="institution"
-                :onError="form.errors.institution"
-                required
-            />
-            <Input
-                v-model="form.number"
-                id="number"
-                :onError="form.errors.number"
-                required
-            />
-            <Input
-                v-model="form.date_obtained"
-                id="date_obtained"
-                :onError="form.errors.date_obtained"
-                type="date"
-                required
-            />
-            <Input
-                v-model="form.date_expiration"
-                id="date_expiration"
-                :onError="form.errors.date_expiration"
-                type="date"
-            />
-            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4">
-                <Textarea
-                    v-model="form.description"
-                    id="description"
-                    :onError="form.errors.description"
-                    rows="4"
-                />
-            </div>
-            
-            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
-                <PrimaryButton
-                    v-text="$t('create')"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                />
-            </div>
-        </form>
-    </div>
-</template>
diff --git a/src/pages/Admin/Users/Academic/FormRecord.vue b/src/pages/Admin/Users/Academic/FormRecord.vue
deleted file mode 100644
index ff1b382..0000000
--- a/src/pages/Admin/Users/Academic/FormRecord.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup>
-import PrimaryButton   from '@Holos/Button/Primary.vue';
-import Input           from '@Holos/Form/Input.vue';
-import SingleFile      from '@Holos/Form/SingleFile.vue';
-
-const emit = defineEmits([
-    'submit'
-])
-
-defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object
-})
-
-const submit = () => {
-    emit('submit')
-}
-</script>
-
-<template>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <Input
-                v-model="form.title"
-                id="title"
-                :onError="form.errors.title"
-                autofocus
-                required
-            />
-            <Input
-                v-model="form.institution"
-                id="institution"
-                :onError="form.errors.institution"
-                required
-            />
-            <Input
-                v-model="form.date_obtained"
-                id="date_obtained"
-                :onError="form.errors.date_obtained"
-                type="date"
-                required
-            />
-            <!-- <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4">
-                <SingleFile
-                    v-model="form.file_path"
-                    title="Archivo"
-                    accept="application/pdf,image/png,image/jpeg"
-                />
-            </div> -->
-            <slot />
-            
-            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
-                <PrimaryButton
-                    v-text="$t('create')"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                />
-            </div>
-        </form>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/Index.vue b/src/pages/Admin/Users/Academic/Index.vue
deleted file mode 100644
index 9fee826..0000000
--- a/src/pages/Admin/Users/Academic/Index.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useSearcher } from '@Services/Api';
-import { getDate } from '@Controllers/DateController';
-import { apiTo, viewTo } from './Module'
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Searcher from '@Holos/Searcher.vue';
-import AcademicRecords from '@Holos/Card/AcademicRecords.vue';
-import Certifications from '@Holos/Card/Certifications.vue';
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-
-/** Propiedades */
-const models = ref([]);
-
-/** Definidores */
-const router = useRouter();
-
-/** Referencias */
-const destroyRecordModal = ref(false);
-const destroyCertModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-function openDestroyRecord(record) {
-    destroyRecordModal.value.open(record);
-}
-
-function openDestroyCert(cert) {
-    destroyCertModal.value.open(cert);
-}
-
-function openEditRecord(record) {
-    router.push(viewTo({ name: 'editRecord', params: { id: record.user_id, record: record.id } }));
-}
-
-function openEditCert(cert) {
-    router.push(viewTo({ name: 'editCertification', params: { id: cert.user_id, certification: cert.id } }));
-}
-
-/** Ciclos */
-onMounted(() => {
-  searcher.search();
-});
-</script>
-
-<template>
-  <div>
-    <!-- Página: Header principal -->
-    <div class="flex items-start justify-between">
-      <div>
-        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-primary-dt">Historial Académico</h1>
-        <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de grados académicos y certificaciones profesionales</p>
-      </div>
-    </div>
-
-    <!-- Search Card -->
-    <div class="pt-2 w-full">
-      <Searcher @search="(x) => searcher.search(x)">
-      </Searcher>
-    </div>
-
-    <!-- Cards principales: una por usuario -->
-    <section 
-      v-for="user in models.data" 
-      :key="user.id"
-      class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
-    >
-      <!-- Perfil -->
-      <header class="flex items-start gap-4">
-        <div class="flex-shrink-0">
-          <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
-            <!-- icono usuario -->
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="school"
-            />
-          </div>
-        </div>
-
-        <div class="flex-1">
-          <h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">{{ user.full_name }}</h2>
-          <p class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">Información académica y certificaciones profesionales</p>
-        </div>
-      </header>
-
-      <!-- Secciones: Grados Académicos -->
-      <AcademicRecords 
-        :records="user.academic_records || []" 
-        @destroy="openDestroyRecord"
-        @edit="openEditRecord"
-      />
-
-      <!-- Secciones: Certificaciones -->
-      <Certifications 
-        :certifications="user.certificates || []" 
-        @destroy="openDestroyCert"
-        @edit="openEditCert"
-      />
-
-      <!-- Acciones al final de la tarjeta -->
-      <div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
-        <RouterLink :to="viewTo({ name: 'createRecord', params: { id: user.id } })" class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-          <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="add"
-            />
-          Agregar Grado
-        </RouterLink>
-
-        <RouterLink :to="viewTo({ name: 'createCertification', params: { id: user.id } })" class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-            <GoogleIcon 
-               class="text-black dark:text-primary-dt text-xl"
-               name="add"
-            />
-          Agregar Certificación
-        </RouterLink>
-      </div>
-    </section>
-
-    <!-- Estado vacío general -->
-    <div v-if="models.length === 0" class="mt-6 py-12 text-center">
-      <div class="text-gray-500 dark:text-primary-dt/70">
-        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-        <p class="text-lg font-medium">No se encontraron usuarios</p>
-        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-      </div>
-    </div>
-
-    <!-- Modales de eliminación -->
-    <DestroyView 
-      ref="destroyRecordModal" 
-      subtitle="title"
-      :to="(academicRecord) => apiTo('destroy-record', { academicRecord })" 
-      @update="searcher.search()" 
-    />
-    
-    <DestroyView 
-      ref="destroyCertModal" 
-      subtitle="name"
-      :to="(certificate) => apiTo('destroy-certificate', { certificate })" 
-      @update="searcher.search()" 
-    />
-  </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Academic/Module.js b/src/pages/Admin/Users/Academic/Module.js
deleted file mode 100644
index 86fb830..0000000
--- a/src/pages/Admin/Users/Academic/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`admin.users.academic.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.academic.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`users.academic.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`users.academic.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Additional.vue b/src/pages/Admin/Users/Additional.vue
deleted file mode 100644
index 4eb8299..0000000
--- a/src/pages/Admin/Users/Additional.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- 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>
-        <Adding text="Nueva Evaluación" />
-      </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/Admin/Users/Create.vue b/src/pages/Admin/Users/Create.vue
deleted file mode 100644
index 4cb89f2..0000000
--- a/src/pages/Admin/Users/Create.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import Input           from '@Holos/Form/Input.vue';
-import Selectable      from '@Holos/Form/Selectable.vue';
-import PageHeader      from '@Holos/PageHeader.vue';
-import Form            from './Form.vue'
-
-/** Definidores */
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    name: '',
-    paternal: '',
-    maternal: '',
-    email: '',
-    phone: '',
-    hire_date: '',
-    password: '',
-    roles: [],
-    department_id: '',
-});
-
-const roles = ref([]);
-const departments = ref([]);
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        roles: data.roles.map(role => role.id),
-        department_id: data.department_id?.id
-    })).post(apiTo('store'), {
-        onSuccess: () => {
-            Notify.success(Lang('register.create.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-
-/** Ciclos */
-onMounted(() => {
-    api.get(route('system.roles'), {
-        onSuccess: (r) => {
-            roles.value = r.roles;
-        }
-    });
-
-    api.catalog({
-            'department:all': null,
-        },
-        {
-           onSuccess: (r) => {
-            departments.value = r['department:all'] ?? [];
-        } 
-    });
-})
-</script>
-
-<template>
-    <PageHeader
-        :title="transl('create.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    <Form
-        action="create"
-        :form="form"
-        @submit="submit"
-    >
-        <Input
-            v-model="form.password"
-            class="col-span-2"
-            id="password"
-            type="password"
-            :onError="form.errors.password"
-            required
-        />
-        <Selectable
-            v-model="form.roles"
-            label="description"
-            title="Roles"
-            :options="roles"
-            multiple
-        />
-        <Selectable
-            v-model="form.department_id"
-            title="Departamento"
-            :options="departments"
-        />
-    </Form>
-</template>
diff --git a/src/pages/Admin/Users/Edit.vue b/src/pages/Admin/Users/Edit.vue
deleted file mode 100644
index d6f3bff..0000000
--- a/src/pages/Admin/Users/Edit.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo , transl } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import Selectable      from '@Holos/Form/Selectable.vue';
-import Form            from './Form.vue'
-
-/** Definiciones */
-const vroute = useRoute();
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    id: null,
-    name: '',
-    paternal: '',
-    maternal: '',
-    email: '',
-    hire_date: '',
-    phone: '',
-    department_id: '',
-});
-
-const departments = ref([]);
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        department_id: data.department_id?.id
-    })).put(apiTo('update', { user: form.id }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        },
-    })
-}
-
-onMounted(() => {
-    api.get(apiTo('show', { user: vroute.params.id }), {
-        onSuccess: (r) => {
-            form.fill(r.user)
-            form.department_id = r.user.department
-            if (r.user.hire_date) {
-                form.hire_date = new Date(r.user.hire_date).toISOString().split('T')[0]
-            }
-        }
-    });
-    
-    api.catalog({
-            'department:all': null,
-        },
-        {
-           onSuccess: (r) => {
-            departments.value = r['department:all'] ?? [];
-        } 
-        }
-    );
-})
-</script>
-
-<template>
-    <PageHeader :title="transl('edit.title')">
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    <Form
-        action="update"
-        :form="form"
-        @submit="submit"
-    >
-        <Selectable
-            v-model="form.department_id"
-            title="Departamento"
-            :options="departments"
-        />
-    </Form>
-</template>
diff --git a/src/pages/Admin/Users/Form.vue b/src/pages/Admin/Users/Form.vue
deleted file mode 100644
index 84f6cc2..0000000
--- a/src/pages/Admin/Users/Form.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup>
-import { transl } from './Module';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Propiedades */
-defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object
-})
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-</script>
-
-<template>
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
-    </div>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <Input
-                v-model="form.name"
-                id="name"
-                :onError="form.errors.name"
-                autofocus
-                required
-            />
-            <Input
-                v-model="form.paternal"
-                id="paternal"
-                :onError="form.errors.paternal"
-                required
-            />
-            <Input
-                v-model="form.maternal"
-                id="maternal"
-                :onError="form.errors.maternal"
-            />
-            <Input
-                v-model="form.phone"
-                id="phone"
-                :onError="form.errors.phone"
-                type="number"
-            />
-            <Input
-                v-model="form.email"
-                id="email.title"
-                type="email"
-                :onError="form.errors.email"
-                required
-            />
-            <Input
-                v-model="form.hire_date"
-                id="hire_date"
-                :onError="form.errors.hire_date"
-                type="date"
-                required
-            />
-            <slot />
-            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
-                <PrimaryButton
-                    v-text="$t(action)"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                />
-            </div>
-        </form>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Index.vue b/src/pages/Admin/Users/Index.vue
deleted file mode 100644
index c5933c8..0000000
--- a/src/pages/Admin/Users/Index.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useSearcher } from '@Services/Api';
-import { hasPermission } from '@Plugins/RolePermission';
-import { getDate } from '@Controllers/DateController';
-import { can, apiTo, viewTo, transl } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead from '@Holos/Searcher.vue';
-import Table from '@Holos/NewTable.vue';
-import ShowView from './Modals/Show.vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Searcher from '@Holos/Searcher.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-
-/** Propiedades */
-const models = ref([]);
-
-/** Referencias */
-const showModal = ref(false);
-const destroyModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-        <div>
-            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('users.title') }}</h1>
-            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('users.description') }}
-            </p>
-        </div>
-
-        <RouterLink :to="viewTo({ name: 'create' })">
-            <Adding text="Nuevo Empleado" />
-        </RouterLink>
-    </div>
-
-    <!-- Search Card -->
-    <div class="pt-2 w-full">
-        <Searcher @search="(x) => searcher.search(x)">
-        </Searcher>
-    </div>
-
-    <!-- List Card -->
-    <div class="pt-2 w-full">
-        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
-            <template #head>
-                <th v-text="$t('name')" />
-                <th v-text="$t('department')" />
-                <th v-text="$t('headquarter')" />
-                <th v-text="$t('hire_date')" />
-                <th v-text="$t('status')" />
-                <th class="w-32 text-center" v-text="$t('actions')" />
-            </template>
-
-            <template #body="{ items }">
-                <tr v-for="model in items" class="table-row">
-                    <td>{{ model.full_name }}</td>
-                    <td>{{ model.department?.name }}</td>
-                    <td>{{ model.headquarter }}</td>
-                    <td>{{ model.hire_date ? getDate(model.hire_date) : '-' }}</td>
-                    <td class="py-6">
-                        <span
-                            class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-700 dark:bg-success-d dark:text-success-dt">
-                            {{ model.status_ek }}
-                        </span>
-                    </td>
-                    <td>
-                        <div class="table-actions">
-                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
-                                outline />
-                            <RouterLink v-if="can('edit')" class="h-fit"
-                                :to="viewTo({ name: 'edit', params: { id: model.id } })">
-                                <IconButton icon="edit" :title="$t('crud.edit')" outline />
-                            </RouterLink>
-                            <IconButton v-if="can('destroy')" icon="delete" :title="$t('crud.destroy')"
-                                @click="destroyModal.open(model)" outline />
-                            <RouterLink v-if="can('settings')" class="h-fit"
-                                :to="viewTo({ name: 'settings', params: { id: model.id } })">
-                                <IconButton icon="settings" :title="$t('setting')" />
-                            </RouterLink>
-                            <RouterLink v-if="hasPermission('activities.index')" class="h-fit"
-                                :to="$view({ name: 'admin.activities.index', query: { user: model.id } })">
-                                <IconButton icon="timeline" :title="$t('activity')" />
-                            </RouterLink>
-                        </div>
-                    </td>
-                </tr>
-            </template>
-
-            <template #empty>
-                <td colspan="6" class="py-12 text-center">
-                    <div class="text-gray-500 dark:text-primary-dt/70">
-                        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                        <p class="text-lg font-medium">No se encontraron empleados</p>
-                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-                    </div>
-                </td>
-            </template>
-        </Table>
-
-        <ShowView ref="showModal" />
-
-        <DestroyView v-if="can('destroy')" ref="destroyModal" subtitle="last_name"
-            :to="(user) => apiTo('destroy', { user })" @update="searcher.search()" />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Modals/Show.vue b/src/pages/Admin/Users/Modals/Show.vue
deleted file mode 100644
index 455015e..0000000
--- a/src/pages/Admin/Users/Modals/Show.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { getDateTime } from '@Controllers/DateController';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Propiedades */
-const model    = ref(null);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-
-    emit('close');
-}
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.name"
-                :subtitle="model.last_name"
-            >
-                <div class="flex w-full flex-col">
-                    <div class="flex w-full justify-center items-center">
-                        <img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
-                    </div>
-                </div>
-            </Header>
-            <div class="flex w-full p-4">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="contact_mail"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <p>
-                        <b>{{ $t('name') }}: </b>
-                        {{ model.full_name }}
-                    </p>
-                    <p>
-                        <b>{{ $t('phone') }}: </b>
-                        <a :href="`tel:${model.phone}`" target="_blank" class="hover:text-danger">
-                            {{ model.phone ?? '-' }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('email.title') }}: </b>
-                        <a :href="`mailto:${model.email}`" target="_blank" class="hover:text-danger">
-                            {{ model.email }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p>
-                        <b>{{ $t('updated_at') }}: </b>
-                        {{ getDateTime(model.updated_at) }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Module.js b/src/pages/Admin/Users/Module.js
deleted file mode 100644
index a4d4824..0000000
--- a/src/pages/Admin/Users/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`admin.users.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`users.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`users.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Online.vue b/src/pages/Admin/Users/Online.vue
deleted file mode 100644
index 95cd0a2..0000000
--- a/src/pages/Admin/Users/Online.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { can, apiTo, viewTo, transl } from './Module'
-import { users } from '@Plugins/AuthUsers'
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import DestroyView     from '@Holos/Modal/Template/Destroy.vue';
-import Header          from '@Holos/PageHeader.vue';
-import Table           from '@Holos/TableSimple.vue';
-import ShowView        from './Modals/Show.vue';
-
-/** Propiedades */
-const destroyModal = ref(null);
-const showModal    = ref(null);
-
-</script>  
-
-<template>
-    <div>
-        <Header
-            :title="transl('online.title')"
-        >
-            <RouterLink
-                v-if="can('create')"
-                :to="viewTo({ name: 'create' })"
-            >
-                <IconButton
-                    class="text-white"
-                    icon="add"
-                    :title="$t('crud.create')"
-                    filled
-                />
-            </RouterLink>
-        </Header>
-        <p class="mt-2">{{ transl('online.description') }} {{ users.length - 1 }} {{ transl('online.count') }}</p>
-        <div class="w-full -mt-2">
-            <Table 
-                :items="users"
-            >
-                <template #head>
-                    <th v-text="$t('profile')" class="w-10" />
-                    <th v-text="$t('name')" />
-                    <th v-text="$t('contact')" />
-                    <th
-                        v-text="$t('actions')"
-                        class="w-32 text-center"
-                    />
-                </template>
-                <template #body="{items}">
-                    <template v-for="model in items">
-                        <tr v-if="model.id != 1">
-                            <td class="table-cell border">
-                                <img :src="model.profile_photo_url" alt="Profile photo" class="w-10 h-10 rounded-full">
-                            </td>
-                            <td class="table-cell border">
-                                {{ `${model.full_name}` }}
-                            </td>
-                            <td class="table-cell border">
-                                <p>
-                                    <a 
-                                        class="hover:underline"
-                                        target="_blank"
-                                        :href="`mailto:${model.email}`"
-                                    >
-                                        {{ model.email }}
-                                    </a>
-                                </p>
-                                <p v-if="model.phone" class="font-semibold text-xs">
-                                    <b>Teléfono: </b>
-                                    <a 
-                                        class="hover:underline"
-                                        target="_blank"
-                                        :href="`tel:${model.phone}`"
-                                    >
-                                        {{ model.phone }}
-                                    </a>
-                                </p>
-                            </td>
-                            <td class="table-cell">
-                                <div class="table-actions">
-                                    <IconButton
-                                        icon="visibility"
-                                        :title="$t('crud.show')"
-                                        @click="showModal.open(model)"
-                                        outline
-                                    />
-                                    <RouterLink
-                                        v-if="can('edit')"
-                                        class="h-fit"
-                                        :to="viewTo({ name: 'edit', params: { id: model.id } })"
-                                    >
-                                        <IconButton
-                                            icon="edit"
-                                            :title="$t('crud.edit')"
-                                            outline
-                                        />
-                                    </RouterLink>
-                                    <IconButton
-                                        v-if="can('destroy')"
-                                        icon="delete"
-                                        :title="$t('crud.destroy')"
-                                        @click="destroyModal.open(model)"
-                                        outline
-                                    />
-                                    <RouterLink
-                                        v-if="can('settings')"
-                                        class="h-fit"
-                                        :to="viewTo({ name: 'settings', params: { id: model.id } })"
-                                    >
-                                        <IconButton
-                                            icon="settings"
-                                            :title="$t('setting')"
-                                        />
-                                    </RouterLink>
-                                </div>
-                            </td>
-                        </tr>
-                    </template>
-                </template>
-            </Table>
-        </div>
-        
-        <ShowView 
-            ref="showModal"
-        />
-
-        <DestroyView
-            v-if="can('destroy')"
-            ref="destroyModal"
-            subtitle="last_name"
-            :to="(user) => apiTo('destroy', { user })"
-            @update="searcher.search()"
-        />
-    </div>
-</template>
-    
\ No newline at end of file
diff --git a/src/pages/Admin/Users/Payroll.vue b/src/pages/Admin/Users/Payroll.vue
deleted file mode 100644
index bbbc2b0..0000000
--- a/src/pages/Admin/Users/Payroll.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- 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>
-        <Adding text="Procesar Nómina" />
-      </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/Admin/Users/Roles.vue b/src/pages/Admin/Users/Roles.vue
deleted file mode 100644
index 838bea6..0000000
--- a/src/pages/Admin/Users/Roles.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl } from './Module';
-
-import PrimaryButton  from '@Holos/Button/Primary.vue';
-import FormSection    from '@Holos/FormSection.vue';
-import Selectable     from '@Holos/Form/Selectable.vue';
-
-/** Propiedades */
-const props = defineProps({
-    userId: String
-});
-
-const form = useForm({
-    roles: []
-});
-
-const roles = ref([]);
-
-/** Métodos */
-function updateProfileInformation() {
-    form.transform(data => ({
-        roles: data.roles.map(role => role.id)
-    })).put(apiTo('roles', { user: props.userId }), {
-        onSuccess: () => Notify.success(Lang('roles.edit.onSuccess')),
-        onError: () => Notify.error(Lang('roles.edit.onError'))
-    });
-};
-
-/** Ciclos */
-onMounted(() => {
-    api.get(route('system.roles'), {
-        onSuccess: (r) => roles.value = r.roles
-    });
-
-    api.get(apiTo('roles', { user: props.userId }), {
-        onSuccess: (r) => {
-            form.roles = r.roles
-        }
-    });
-});
-</script>
-
-<template>
-    <FormSection @submitted="updateProfileInformation">
-        <template #title>
-            {{ transl('roles.title') }}
-        </template>
-        <template #description>
-            {{ transl('roles.description') }}
-        </template>
-        <template #form>
-            <div class="col-span-6 sm:col-span-4 space-y-4">
-                <Selectable
-                    v-model="form.roles"
-                    label="description"
-                    title="roles.title"
-                    :options="roles"
-                    multiple
-                />
-            </div>
-        </template>
-        <template #actions>
-            <PrimaryButton
-                :class="{ 'opacity-25': form.processing }"
-                :disabled="form.processing"
-            >
-                {{ $t('update') }}
-            </PrimaryButton>
-        </template>
-    </FormSection>
-</template>
diff --git a/src/pages/Admin/Users/Security.vue b/src/pages/Admin/Users/Security.vue
deleted file mode 100644
index b66675b..0000000
--- a/src/pages/Admin/Users/Security.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-</script>
-
-<template>
-  <div class="p-6 max-w-auto mx-auto">
-    <!-- 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>
-        <Adding text="Agregar Información" />
-      </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/pages/Admin/Users/Settings.vue b/src/pages/Admin/Users/Settings.vue
deleted file mode 100644
index d1002ae..0000000
--- a/src/pages/Admin/Users/Settings.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { RouterLink, useRoute } from 'vue-router';
-import { api } from '@Services/Api';
-import { viewTo, apiTo, transl } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue';
-import PageHeader      from '@Holos/PageHeader.vue';
-import SectionBorder   from '@Holos/SectionBorder.vue';
-import Roles           from './Roles.vue';
-import UpdatePassword  from './UpdatePassword.vue';
-
-/** Definiciones */
-const vroute = useRoute();
-
-/** Propiedades */
-const user = ref();
-
-/** Ciclos */
-onMounted(() => {
-    api.get(apiTo('show', { user: vroute.params.id }), {
-        onSuccess: (r) => user.value = r.user
-    });
-})
-</script>
-
-<template>
-    <PageHeader :title="transl('settings')">
-      <RouterLink :to="viewTo({ name: 'index' })">
-          <IconButton
-            class="text-white"
-            icon="arrow_back"
-            :title="$t('return')"
-            outline
-          />
-      </RouterLink>
-    </PageHeader>
-    <div class="flex w-full">
-        <div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-sm">
-            <p class="pt-2 text-lg font-bold text-gray-50">
-                {{ user?.name }}
-            </p>
-            <p class="text-sm text-gray-100">
-                {{ user?.last_name }}
-            </p>
-        </div>
-    </div>
-    <div class="w-full mt-12 space-y-4">
-        <UpdatePassword
-            :userId="vroute.params.id"
-        />
-        <SectionBorder />
-        <Roles
-            :userId="vroute.params.id"
-        />
-        <SectionBorder />
-    </div>
-</template>
-    
\ No newline at end of file
diff --git a/src/pages/Admin/Users/UpdatePassword.vue b/src/pages/Admin/Users/UpdatePassword.vue
deleted file mode 100644
index 5feac65..0000000
--- a/src/pages/Admin/Users/UpdatePassword.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup>
-import { apiTo, transl } from './Module';
-import { useForm } from '@Services/Api';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import FormSection   from '@Holos/FormSection.vue';
-
-/** Propiedades */
-const props = defineProps({
-    userId: String
-});
-
-const form = useForm({
-    password: '',
-    password_confirmation: '',
-});
-
-/** Métodos */
-const updateProfileInformation = () => {
-    form.put(apiTo('password', { user: props.userId }), {
-        onSuccess: () => {
-            Notify.success(Lang('account.password.updated'));
-            form.reset();
-        },
-        onError: () => Notify.error(Lang('updateFail'))
-    });
-};
-</script>
-
-<template>
-    <FormSection @submitted="updateProfileInformation">
-        <template #title>
-            {{ transl('password.title') }}
-        </template>
-        <template #description>
-            {{ transl('password.description') }}
-        </template>
-        <template #form>
-            <div class="col-span-6 sm:col-span-4 space-y-4">
-                <Input
-                    v-model="form.password"
-                    id="password"
-                    title="account.password.new"
-                    type="password"
-                    :onError="form.errors.password"
-                    autocomplete="off"
-                    required
-                />
-                <Input
-                    v-model="form.password_confirmation"
-                    icon="password"
-                    id="passwordConfirmation"
-                    type="password"
-                    :onError="form.errors.password_confirmation"
-                    required
-                />
-            </div>
-        </template>
-        <template #actions>
-            <PrimaryButton
-                :class="{ 'opacity-25': form.processing }"
-                :disabled="form.processing"
-            >
-                {{ $t('update') }}
-            </PrimaryButton>
-        </template>
-    </FormSection>
-</template>
\ No newline at end of file
diff --git a/src/pages/Auth/ConfirmPassword.vue b/src/pages/Auth/ConfirmPassword.vue
deleted file mode 100644
index f498197..0000000
--- a/src/pages/Auth/ConfirmPassword.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useForm } from '@inertiajs/vue3';
-
-import Layout        from '@Holos/Layout/AuthLayout.vue';
-import Input         from '@Holos/Form/InputWithIcon.vue';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-
-const form = useForm({
-    password: '',
-});
-
-const passwordInput = ref(null);
-
-const submit = () => {
-    form.post(route('password.confirm'), {
-        onFinish: () => {
-            form.reset();
-
-            passwordInput.value.focus();
-        },
-    });
-};
-</script>
-
-<template>
-    <Layout :title="$t('auth.confirmPassword.title')">
-        <div class="mb-4 text-sm text-justify">
-            {{ $t('auth.confirmPassword.description') }}
-        </div>
-
-        <form @submit.prevent="submit">
-            <Input
-                icon="password"
-                id="password"
-                type="password"
-                v-model="form.password"
-                :onError="form.errors.password"
-                :placeholder="$t('password')"
-            />
-
-            <div class="flex justify-end mt-4">
-                <PrimaryButton
-                    class="!w-full"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    {{ $t('auth.confirmPassword.title') }}
-                </PrimaryButton>
-            </div>
-        </form>
-    </Layout>
-</template>
diff --git a/src/pages/Auth/ForgotPassword.vue b/src/pages/Auth/ForgotPassword.vue
deleted file mode 100644
index 02e72b1..0000000
--- a/src/pages/Auth/ForgotPassword.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import { useForm } from '@Services/Api';
-import { viewTo } from './Module';
-
-import Input         from '@Holos/Form/InputWithIcon.vue'
-import PrimaryButton from '@Holos/Button/Primary.vue'
-
-/** Definidores */
-const router = useRouter()
-
-/** Propiedades */
-defineProps({
-    status: String,
-});
-
-const form = useForm({
-    email: '',
-});
-
-/** Métodos */
-const submit = () => {
-    form.post(route('auth.forgot-password'), {
-        onSuccess: () => {
-            Notify.success(Lang('auth.forgotPassword.success'));
-            router.push(viewTo({ name: 'index' }));
-        },
-        onError: () => {
-            Notify.error(Lang('auth.forgotPassword.error'));
-            router.push(viewTo({ name: 'index' }));
-        }
-    });
-};
-</script>
-
-<template>
-    <div class="mb-4 text-sm text-justify">
-        {{ $t('auth.forgotPassword.description') }}
-    </div>
-    <div v-if="status" class="mb-4 font-medium text-sm text-green-600">
-        {{ status }}
-    </div>
-    <form @submit.prevent="submit">
-        <Input
-          icon="mail"
-          id="email"
-          type="email"
-          v-model="form.email"
-          :onError="form.errors.email"
-          :placeholder="$t('email.title')"
-        />
-        <div class="flex flex-col gap-2 items-center justify-end mt-4">
-            <PrimaryButton
-                class="!w-full"
-                :class="{ 'opacity-25': form.processing }"
-                type="submit"
-                :disabled="form.processing"
-            >
-                {{ $t('auth.forgotPassword.sendLink') }}
-            </PrimaryButton>
-            <PrimaryButton
-                class="!w-full"
-                type="button"
-                :class="{ 'opacity-25': form.processing }"
-                :disabled="form.processing"
-                @click="router.push($view({ name: 'index' }))"
-            >
-                {{ $t('auth.login') }}
-            </PrimaryButton>
-        </div>
-    </form>
-</template>
diff --git a/src/pages/Auth/Login.vue b/src/pages/Auth/Login.vue
deleted file mode 100644
index 0bf2be0..0000000
--- a/src/pages/Auth/Login.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup>
-import { onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { defineApiToken, defineCsrfToken, hasToken, useForm } from '@Services/Api.js'
-import { defineUser } from '@Services/Page';
-import { viewTo } from './Module.js';
-
-import PrimaryButton  from '@Holos/Button/Primary.vue'
-import Input          from '@Holos/Form/InputWithIcon.vue'
-
-/** Definidores */
-const router = useRouter();
-
-/** Propiedades */
-defineProps({
-    canResetPassword: Boolean,
-    status: String,
-});
-
-const form = useForm({
-    email: '',
-    password: ''
-});
-
-/** Métodos */
-const login = () => {
-    form.post(route('auth.login'), {
-        onSuccess: (res) => {
-          defineApiToken(res.token)
-          defineUser(res.user)
-          defineCsrfToken(res.csrf)
-
-          // 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 === 'coordinator')
-    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()) {
-    router.push({ name: 'dashboard.index' });
-  }
-})
-</script>
-
-<template>
-  <form @submit.prevent="login">
-    <Input
-      icon="mail"
-      id="email"
-      type="email"
-      v-model="form.email"
-      :onError="form.errors.email"
-      :placeholder="$t('email.title')"
-    />
-    <Input
-      v-model="form.password"
-      icon="password"
-      id="password"
-      type="password"
-      :onError="form.errors.password"
-      :placeholder="$t('password')"
-    />
-    <PrimaryButton class="!w-full">
-      {{ $t('auth.login') }}
-    </PrimaryButton>
-    <div class="flex justify-end mt-4">
-      <RouterLink
-          class="text-sm ml-2 hover:text-blue-200 cursor-pointer hover:-translate-y-1 duration-500 transition-all"
-          :to="viewTo({ name: 'forgot-password' })"
-      >
-          {{ $t('auth.forgotPassword.ask') }}
-      </RouterLink>
-    </div>
-  </form>
-</template>
diff --git a/src/pages/Auth/Module.js b/src/pages/Auth/Module.js
deleted file mode 100644
index 8c231e1..0000000
--- a/src/pages/Auth/Module.js
+++ /dev/null
@@ -1,17 +0,0 @@
-
-import { lang } from '@Lang/i18n';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`auth.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `auth.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`auth.${str}`)
-
-export {
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Auth/Register.vue b/src/pages/Auth/Register.vue
deleted file mode 100644
index c5fbdf2..0000000
--- a/src/pages/Auth/Register.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script setup>
-import { useForm } from '@Services/Api.js'
-
-import Checkbox      from '@Holos/Checkbox.vue';
-import InputLabel    from '@Holos/InputLabel.vue';
-import Error         from '@Holos/Form/Elements/Error.vue';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/InputWithIcon.vue'
-import Layout        from '@Holos/Layout/AuthLayout.vue'
-
-/** Propiedades */
-const form = useForm({
-    name: '',
-    paternal: '',
-    maternal: '',
-    phone: '',
-    email: '',
-    password: '',
-    password_confirmation: '',
-    terms: false,
-});
-
-/** Métodos */
-const submit = () => {
-    form.post(route('register'), {
-        onFinish: () => form.reset('password', 'password_confirmation'),
-    });
-};
-</script>
-
-<template>
-    <Layout :title="$t('auth.register.me')">
-        <form @submit.prevent="submit">
-            <Input
-                icon="people"
-                id="name"
-                type="text"
-                v-model="form.name"
-                :onError="form.errors.name"
-                :placeholder="$t('name')"
-            />
-            <Input
-                icon="people"
-                id="paternal"
-                type="text"
-                v-model="form.paternal"
-                :onError="form.errors.paternal"
-                :placeholder="$t('paternal')"
-            />
-            <Input
-                icon="people"
-                id="maternal"
-                type="text"
-                v-model="form.maternal"
-                :onError="form.errors.maternal"
-                :placeholder="$t('maternal')"
-            />
-            <Input
-                icon="phone"
-                id="phone"
-                type="number"
-                v-model="form.phone"
-                :onError="form.errors.phone"
-                :placeholder="$t('phone')"
-            />
-            <Input
-                icon="mail"
-                id="email"
-                type="email"
-                v-model="form.email"
-                :onError="form.errors.email"
-                :placeholder="$t('email.title')"
-            />
-            <Input
-                icon="password"
-                id="password"
-                type="password"
-                v-model="form.password"
-                :onError="form.errors.password"
-                :placeholder="$t('password')"
-            />
-            <Input
-                icon="password"
-                id="passwordConfirmation"
-                type="password"
-                v-model="form.password_confirmation"
-                :onError="form.errors.password_confirmation"
-                :placeholder="$t('passwordConfirmation')"
-            />
-
-
-            <div class="mt-4">
-                <InputLabel for="terms">
-                    <div class="flex items-center">
-                        <Checkbox id="terms" v-model:checked="form.terms" name="terms" required />
-
-                        <div class="ms-2 text-primary-t dark:text-primary-dt">
-                            I agree to the
-                            <a target="_blank" :href="route('terms.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                                {{ $t('terms.service') }}
-                            </a>
-                            and
-                            <a target="_blank" :href="route('policy.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                                {{ $t('policy.privacy') }}
-                            </a>
-                        </div>
-                    </div>
-                    <Error class="mt-2" :onError="form.errors.terms" />
-                </InputLabel>
-            </div>
-
-            <div class="flex items-center justify-end mt-4">
-                <Link :href="route('login')" class="underline text-sm bg-page-text hover:bg-page-background text-page-background hover:text-page-text rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                    {{ $t('auth.register.already') }}
-                </Link>
-
-                <PrimaryButton class="ms-4" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                    {{ $t('auth.register.me') }}
-                </PrimaryButton>
-            </div>
-        </form>
-    </Layout>
-</template>
diff --git a/src/pages/Auth/ResetPassword.vue b/src/pages/Auth/ResetPassword.vue
deleted file mode 100644
index c246b88..0000000
--- a/src/pages/Auth/ResetPassword.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useForm } from '@Services/Api.js'
-import { viewTo } from './Module';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/InputWithIcon.vue'
-
-/** Definidores */
-const vroute = useRoute();
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    token: '',
-    password: '',
-    password_confirmation: '',
-});
-
-const email = ref('');
-
-/** Métodos */
-const submit = () => {
-    form.post(route('auth.reset-password'), {
-        onSuccess: () => {
-            Notify.success(Lang('auth.reset.success'));
-            router.push(viewTo({ name: 'index' }));
-        },
-        onError: () => {
-            router.push(viewTo({ name: 'index' }));
-        }
-    });
-};
-
-onMounted(() => {
-    form.token = vroute.query.token;
-    email.value = vroute.query.email;
-})
-</script>
-
-<template>
-    <form @submit.prevent="submit">
-        <Input
-            icon="mail"
-            id="email"
-            type="email"
-            v-model="email"
-            disabled
-        />
-        <Input
-            icon="password"
-            id="password"
-            type="password"
-            v-model="form.password"
-            :onError="form.errors.password"
-            :placeholder="$t('password')"
-        />
-        <Input
-            icon="password"
-            id="passwordConfirmation"
-            type="password"
-            v-model="form.password_confirmation"
-            :onError="form.errors.password_confirmation"
-            :placeholder="$t('passwordConfirmation')"
-        />
-        <div class="flex items-center justify-end mt-4">
-            <PrimaryButton class="!w-full" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                {{ $t('account.password.update') }}
-            </PrimaryButton>
-        </div>
-    </form>
-</template>
diff --git a/src/pages/Auth/TwoFactorChallenge.vue b/src/pages/Auth/TwoFactorChallenge.vue
deleted file mode 100644
index 132772d..0000000
--- a/src/pages/Auth/TwoFactorChallenge.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup>
-import { nextTick, ref } from 'vue';
-import { useForm } from '@inertiajs/vue3';
-
-import PrimaryButton  from '@Holos/Button/Primary.vue'
-import Input          from '@Holos/Form/InputWithIcon.vue'
-import Layout         from '@Holos/Layout/AuthLayout.vue'
-
-const recovery = ref(false);
-
-const form = useForm({
-    code: '',
-    recovery_code: '',
-});
-
-const recoveryCodeInput = ref(null);
-const codeInput = ref(null);
-
-const toggleRecovery = async () => {
-    recovery.value ^= true;
-
-    await nextTick();
-
-    if (recovery.value) {
-        recoveryCodeInput.value.focus();
-        form.code = '';
-    } else {
-        codeInput.value.focus();
-        form.recovery_code = '';
-    }
-};
-
-const submit = () => {
-    form.post(route('two-factor.login'));
-};
-</script>
-
-<template>
-    <Layout :title="$t('account.twoFactor.title')">
-        <div class="mb-4 text-sm text-justify text-white">
-            <template v-if="! recovery">
-                {{ $t('account.twoFactor.login.onAuth')}}
-            </template>
-
-            <template v-else>
-                {{ $t('account.twoFactor.login.onRecovery')}}
-            </template>
-        </div>
-    
-        <form @submit.prevent="submit" class="text-white">
-            <div v-if="! recovery">
-                <Input
-                    ref="codeInput"
-                    icon="password"
-                    id="code"
-                    type="text"
-                    inputmode="numeric"
-                    autofocus
-                    autocomplete="one-time-code"
-                    v-model="form.code"
-                    :onError="form.errors.code"
-                />
-            </div>
-
-            <div v-else>
-                <Input
-                    ref="recoveryCodeInput"
-                    icon="password"
-                    autocomplete="one-time-code"
-                    id="recovery_code"
-                    v-model="form.recovery_code"
-                    :onError="form.errors.recovery_code"
-                />
-            </div>
-
-            <PrimaryButton
-                class="!w-full"
-                :class="{ 'opacity-25': form.processing }"
-                :disabled="form.processing"
-            >
-                {{ $t('auth.login') }}
-            </PrimaryButton>
-            <div class="flex  w-full items-center justify-end mt-4">
-                <button
-                    type="button"
-                    class="text-sm text-white underline cursor-pointer"
-                    @click.prevent="toggleRecovery"
-                >
-                    <template v-if="! recovery">
-                        {{ $t('account.twoFactor.recovery.useCode')}}
-                    </template>
-                    
-                    <template v-else>
-                        {{ $t('account.twoFactor.recovery.useAuth')}}
-                    </template>
-                </button>
-            </div>
-        </form>
-    </Layout>
-</template>
diff --git a/src/pages/Auth/VerifyEmail.vue b/src/pages/Auth/VerifyEmail.vue
deleted file mode 100644
index 323f7da..0000000
--- a/src/pages/Auth/VerifyEmail.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { Link, useForm } from '@inertiajs/vue3';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Layout        from '@Holos/Layout/AuthLayout.vue';
-
-/** Propiedades */
-const props = defineProps({
-    status: String,
-});
-
-const form = useForm({});
-
-/** Propiedades computadas */
-const verificationLinkSent = computed(() => props.status === 'verification-link-sent');
-
-/** Métodos */
-const submit = () => {
-    form.post(route('verification.send'));
-};
-
-</script>
-
-<template>
-    <Layout :title="$t('auth.verifyEmail.title')">
-        <div class="mb-4 text-sm text-justify">
-            {{ $t('auth.verifyEmail.beforeContinue') }}
-        </div>
-
-        <div v-if="verificationLinkSent" class="mb-4 font-medium text-sm text-green-600">
-            {{ $t('auth.verifyEmail.notifySendVerification') }}
-        </div>
-
-        <form @submit.prevent="submit">
-            <div class="mt-4 flex flex-col space-y-1 items-center justify-between">
-                <PrimaryButton class="!w-full" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                    {{ $t('auth.verifyEmail.sendLink') }}
-                </PrimaryButton>
-
-                <Link
-                    :href="route('profile.show')"
-                    class="btn btn-primary !w-full"
-                >
-                    {{ $t('profile') }}
-                </Link>
-
-                <Link
-                    :href="route('logout')"
-                    class="btn btn-primary !w-full"
-                    method="post"
-                >
-                    {{ $t('auth.logout') }}
-                </Link>
-            </div>
-        </form>
-    </Layout>
-</template>
diff --git a/src/pages/Changelogs/App.vue b/src/pages/Changelogs/App.vue
deleted file mode 100644
index 0303aaf..0000000
--- a/src/pages/Changelogs/App.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script setup>
-import Table from '@Holos/TableSimple.vue';
-
-const changelogs = [
-    {
-        version: '0.9.0',
-        details: [
-            'INIT: Commit inicial',
-            'ADD: Generación de plantilla',
-        ],
-        date: '2024-12-13'
-    },
-    {
-        version: '0.9.1',
-        details: [
-            'ADD: Script de instalación.',
-            'ADD: Versionado de la aplicación.',
-            'ADD: Logo administrado en en backend.'
-        ],
-        date: '2024-12-16'
-    },
-    {
-        version: '0.9.2',
-        details: [
-            'ADD: Asignación de roles a usuarios.',
-            'FIX: Correcciones visuales en Layout.'
-        ],
-        date: '2024-12-16'
-    },
-    {
-        version: '0.9.3',
-        details: [
-            'FIX: Creación de usuarios.',
-            'ADD: Notificaciones en tiempo real.',
-            'ADD: Usuarios conectados en tiempo real.'
-        ],
-        date: '2024-12-27'
-    },
-    {
-        version: '0.9.4',
-        details: [
-            'ADD: Creación de nuevos roles con permisos personalizados.',
-            'ADD: Recarga de permisos en tiempo real para usuarios en linea.',
-            'FIX: Tooltip de botones en tablas.'
-        ],
-        date: '2024-12-28'
-    },
-    {
-        version: '0.9.5',
-        details: [
-            'ADD: Historial de acciones general.',
-            'ADD: Historial de acciones por usuario.',
-            'FIX: Paginación con filtros.',
-            'UPDATE: La ruta / ahora redirige a /dashboard en caso de que se desarrolle un frontend publico.',
-            'UPDATE: Se agregaron los elementos administrados en /admin',
-            'UPDATE: Redirección a dashboard al iniciar sesión.'
-        ],
-        date: '2025-01-03'
-    },
-    {
-        version: '0.9.6',
-        details: [
-            'FIX: Historial de acciones, modo responsivo.',
-            'ADD: Recuperación de contraseña.'
-        ],
-        date: '2025-01-06'
-    },
-    {
-        version: '0.9.7',
-        details: [
-            'ADD: Visualización de historial de cambios del backend.',
-        ],
-        date: '2025-01-17'
-    },
-    {
-        version: '0.9.8',
-        details: [
-            'UPDATE: Actualización de dependencias.',
-            'UPDATE: TailwindCSS 3 => 4.',
-            'UPDATE: Actualización de Diseño, mejoras visuales.',
-        ],
-        date: '2025-03-04'
-    },
-    {
-        version: '0.9.9',
-        details: [
-            'FIX: Obtención de recursos de backend mediante `api.resource`.',
-            'FIX: Títulos de modal de eliminación ahora son editables.',
-            'UPDATE: Simplificación de las rutas de autenticación.',
-            'UPDATE: Traducciones modulares faltantes.',
-            'UPDATE: Ahora las plantillas se definen en el grupo de rutas, y se heredan en las rutas hijas.',
-            'ADD: Función creación de URL a backend fuera de VUEJS.',
-        ],
-        date: '2025-03-13'
-    },
-    {
-        version: '0.9.10',
-        details: [
-            'ADD: Se actualizo el método api.resource por api.catalog para obtener catálogos del backend.',
-            'UPDATE: Actualización de dependencias.'
-        ],
-        date: '2025-05-23'
-    },
-    {
-        version: '0.9.11',
-        details: [
-            'FIX: El useApi clonaba comportamientos en instancias de la misma página.',
-            'UPDATE: Actualización de dependencias.'
-        ],
-        date: '2025-05-23'
-    },
-    {
-        version: '0.9.12',
-        details: [
-            'FIX: Token de sesión ahora se almacena en localStorage para mantener la sesión activa en el frontend por el tiempo de vida del token.',
-            'UPDATE: Actualización de dependencias.',
-            'UPDATE: Funcionamiento de los modals.',
-            'ADD: Breadcrumbs.'
-        ],
-        date: '2025-07-14'
-    }
-]
-</script>
-
-<template>
-    <div>
-        <h1>{{ $t('changelogs.title') }}</h1>
-        <Table :items="changelogs.reverse()">
-            <template #head>
-                <th 
-                    v-text="$t('version')"
-                    class="w-10" 
-                />
-                <th 
-                    v-text="$t('date')"
-                    class="w-24" 
-                />
-                <th 
-                    v-text="$t('details')"
-                />
-            </template>
-            <template #body="{items}">
-                <template v-for="item in items">
-                    <tr>
-                        <td class="table-cell">
-                            <span v-text="item.version" />
-                        </td>
-                        <td class="table-cell">
-                            <span v-text="item.date" />
-                        </td>
-                        <td class="table-cell">
-                            <ul class="list-disc list-inside">
-                                <li v-for="detail in item.details.reverse()" v-text="detail" />
-                            </ul>
-                        </td>
-                    </tr>
-                </template>
-            </template>
-        </Table>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Changelogs/Core.vue b/src/pages/Changelogs/Core.vue
deleted file mode 100644
index 8532641..0000000
--- a/src/pages/Changelogs/Core.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { api } from '@Services/Api';
-
-import Table from '@Holos/TableSimple.vue';
-
-const changelogs = ref([]);
-
-onMounted(() => {
-    api.get(route('changelogs'), {
-        onSuccess: (response) => {
-            changelogs.value = response;
-        }
-    });
-});
-</script>
-
-<template>
-    <div>
-        <h1>{{ $t('changelogs.title') }}</h1>
-        <Table :items="changelogs">
-            <template #head>
-                <th 
-                    v-text="$t('version')"
-                    class="w-10" 
-                />
-                <th 
-                    v-text="$t('date')"
-                    class="w-24" 
-                />
-                <th 
-                    v-text="$t('details')"
-                />
-            </template>
-            <template #body="{items}">
-                <template v-for="item in items">
-                    <tr>
-                        <td class="table-cell">
-                            <span v-text="item.version" />
-                        </td>
-                        <td class="table-cell">
-                            <span v-text="item.date" />
-                        </td>
-                        <td class="table-cell">
-                            <ul class="list-disc list-inside">
-                                <li v-for="detail in item.changes" v-text="detail" />
-                            </ul>
-                        </td>
-                    </tr>
-                </template>
-            </template>
-        </Table>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Create.vue b/src/pages/ComercialClassifications/Create.vue
deleted file mode 100644
index 16c8c5c..0000000
--- a/src/pages/ComercialClassifications/Create.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute, RouterLink } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import GoogleIcon      from '@Shared/GoogleIcon.vue';
-import Form            from './Form.vue'
-
-/** Definidores */
-const router = useRouter();
-const route = useRoute();
-
-/** Propiedades */
-const form = useForm({
-    code: '',
-    name: '',
-    description: '',
-    parent_id: null
-});
-
-const parentInfo = ref(null);
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        parent_id: data.parent_id // Usar el parent_id del formulario
-    })).post(apiTo('store'), {
-        onSuccess: () => {
-            Notify.success(Lang('register.create.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-
-/** Ciclos */
-onMounted(() => {
-    // Verificar si se están pasando parámetros para crear subcategoría
-    if (route.query.parent_id) {
-        parentInfo.value = {
-            id: parseInt(route.query.parent_id),
-            name: route.query.parent_name,
-            code: route.query.parent_code
-        };
-        // Pre-llenar el parent_id en el formulario
-        form.parent_id = parseInt(route.query.parent_id);
-    }
-})
-</script>
-
-<template>
-    <PageHeader
-        :title="parentInfo ? `${transl('create.title')} - Subcategoría` : transl('create.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <!-- Mostrar información del padre si se está creando una subcategoría -->
-    <div v-if="parentInfo" class="mb-4 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg border border-blue-200 dark:border-blue-700">
-        <div class="flex items-center">
-            <GoogleIcon class="text-blue-600 text-xl mr-2" name="account_tree" />
-            <div>
-                <p class="text-sm font-medium text-blue-800 dark:text-blue-200">
-                    Creando subcategoría para:
-                </p>
-                <p class="text-lg font-semibold text-blue-900 dark:text-blue-100">
-                    <code class="bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded text-sm mr-2">{{ parentInfo.code }}</code>
-                    {{ parentInfo.name }}
-                </p>
-            </div>
-        </div>
-    </div>
-    
-    <Form
-        action="create"
-        :form="form"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Edit.vue b/src/pages/ComercialClassifications/Edit.vue
deleted file mode 100644
index 4527d2c..0000000
--- a/src/pages/ComercialClassifications/Edit.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo, transl } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import GoogleIcon      from '@Shared/GoogleIcon.vue';
-import Form            from './Form.vue'
-
-/** Definiciones */
-const vroute = useRoute();
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    id: null,
-    code: '',
-    name: '',
-    description: '',
-});
-
-const parentOptions = ref([]);
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-    })).put(apiTo('update', { comercial_classification: form.id }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        },
-    })
-}
-
-/** Función para obtener clasificaciones padre (excluyendo la actual y sus hijos) */
-function loadParentOptions() {
-    api.get(apiTo('index'), {
-        onSuccess: (r) => {
-            // Función para excluir la clasificación actual y sus descendientes
-            const excludeCurrentAndChildren = (items, excludeId) => {
-                return items.filter(item => {
-                    if (item.id === excludeId) return false;
-                    if (hasDescendant(item, excludeId)) return false;
-                    return true;
-                }).map(item => ({
-                    ...item,
-                    children: excludeCurrentAndChildren(item.children || [], excludeId)
-                }));
-            };
-
-            // Función para verificar si un item tiene como descendiente la clasificación actual
-            const hasDescendant = (item, targetId) => {
-                if (!item.children) return false;
-                return item.children.some(child => 
-                    child.id === targetId || hasDescendant(child, targetId)
-                );
-            };
-
-            // Aplanar la estructura jerárquica para el selector
-            const flattenOptions = (items, level = 0) => {
-                let options = [];
-                items.forEach(item => {
-                    options.push({
-                        ...item,
-                        name: '  '.repeat(level) + item.name, // Indentación visual
-                        level
-                    });
-                    if (item.children && item.children.length > 0) {
-                        options = options.concat(flattenOptions(item.children, level + 1));
-                    }
-                });
-                return options;
-            };
-
-            const dataSource = r.data?.comercial_classifications?.data || r.comercial_classifications || [];
-            const filteredData = excludeCurrentAndChildren(dataSource, form.id);
-            parentOptions.value = flattenOptions(filteredData);
-        }
-    });
-}
-
-onMounted(() => {
-    api.get(apiTo('show', { comercial_classification: vroute.params.id }), {
-        onSuccess: (r) => {
-            const classification = r.data || r.comercial_classification || r;
-            form.fill({
-                id: classification.id,
-                code: classification.code,
-                name: classification.name,
-                description: classification.description,
-                is_active: classification.is_active,
-                parent: classification.parent || null
-            });
-            
-            // Cargar opciones padre después de obtener los datos actuales
-            loadParentOptions();
-        }
-    });
-})
-</script>
-
-<template>
-    <PageHeader :title="`${transl('edit.title')}${form.parent ? ' - Subcategoría' : ''}`">
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <!-- Mostrar información del padre si es una subcategoría -->
-    <div v-if="form.parent" class="mb-4 p-4 bg-yellow-50 dark:bg-yellow-900 rounded-lg border border-yellow-200 dark:border-yellow-700">
-        <div class="flex items-center">
-            <GoogleIcon class="text-yellow-600 text-xl mr-2" name="account_tree" />
-            <div>
-                <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-                    Editando subcategoría de:
-                </p>
-                <p class="text-lg font-semibold text-yellow-900 dark:text-yellow-100">
-                    <code class="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded text-sm mr-2">{{ form.parent.code }}</code>
-                    {{ form.parent.name }}
-                </p>
-            </div>
-        </div>
-    </div>
-    
-    <Form
-        action="update"
-        :form="form"
-        :parent-options="parentOptions"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Form.vue b/src/pages/ComercialClassifications/Form.vue
deleted file mode 100644
index bf02116..0000000
--- a/src/pages/ComercialClassifications/Form.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup>
-import { transl } from './Module';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import Selectable    from '@Holos/Form/Selectable.vue';
-import Checkbox      from '@Holos/Checkbox.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Propiedades */
-defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object,
-    parentOptions: {
-        type: Array,
-        default: () => []
-    }
-})
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-</script>
-
-<template>
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
-    </div>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <Input
-                v-model="form.code"
-                id="code"
-                :onError="form.errors.code"
-                autofocus
-                required
-            />
-            <Input
-                v-model="form.name"
-                id="name"
-                :onError="form.errors.name"
-                required
-            />
-            <Input
-                v-model="form.description"
-                id="description"
-                :onError="form.errors.description"
-                class="md:col-span-2"
-            />
-            <slot />
-            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
-                <PrimaryButton
-                    v-text="$t(action)"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                />
-            </div>
-        </form>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Index.vue b/src/pages/ComercialClassifications/Index.vue
deleted file mode 100644
index 459b9ba..0000000
--- a/src/pages/ComercialClassifications/Index.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, RouterLink } from 'vue-router';
-import { useSearcher } from '@Services/Api';
-import { hasPermission } from '@Plugins/RolePermission';
-import { can, apiTo, viewTo, transl } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead from '@Holos/Searcher.vue';
-import Table from '@Holos/Table.vue';
-import ShowView from './Modals/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Button from '@Holos/Button/Button.vue';
-
-/** Propiedades */
-const models = ref([]);
-const router = useRouter();
-
-/** Referencias */
-const showModal = ref(null);
-const destroyModal = ref(null);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => {
-        console.log('Datos recibidos:', r);
-        // La API retorna los datos en r.data.comercial_classifications.data
-        const classificationsData = r.data?.comercial_classifications?.data || r.comercial_classifications || [];
-        models.value = classificationsData;
-    },
-    onError: () => {
-        models.value = [];
-    }
-});
-
-/** Función para renderizar estructura jerárquica */
-const renderHierarchicalRows = (items, level = 0) => {
-    const rows = [];
-    items.forEach(item => {
-        rows.push({ ...item, level });
-        if (item.children && item.children.length > 0) {
-            rows.push(...renderHierarchicalRows(item.children, level + 1));
-        }
-    });
-    return rows;
-};
-
-/** Función para crear subcategoría */
-const createSubcategory = (parentCategory) => {
-    // Redirigir a la vista de creación con el parent_id en query params
-    router.push(viewTo({ 
-        name: 'create', 
-        query: { 
-            parent_id: parentCategory.id,
-            parent_name: parentCategory.name,
-            parent_code: parentCategory.code
-        } 
-    }));
-};
-
-/** Función para eliminar con información contextual */
-const deleteItem = (item) => {
-    // Agregar información contextual al modal
-    const itemWithContext = {
-        ...item,
-        contextInfo: item.parent ? `Subcategoría de: ${item.parent.code} - ${item.parent.name}` : 'Categoría principal'
-    };
-    destroyModal.value.open(itemWithContext);
-};
-
-/** Función para mostrar detalles */
-const showItem = (item) => {
-    showModal.value.open(item);
-};
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <div class="space-y-6">
-        <div class="flex items-center justify-between">
-            <div>
-                <h1 className="text-3xl font-bold text-foreground">Clasificaciones Comerciales</h1>
-                <p className="text-muted-foreground">
-                    Gestión de categorías y subcategorías de productos
-                </p>
-            </div>
-            <RouterLink :to="viewTo({ name: 'create' })">
-                <Button color="info">Nueva Clasificación</Button>
-            </RouterLink>
-        </div>
-        <!-- <SearcherHead :title="transl('name')" @search="(x) => searcher.search(x)">
-            <RouterLink :to="viewTo({ name: 'create' })">
-               
-                <IconButton class="text-white" icon="add" :title="$t('crud.create')" filled />
-            </RouterLink>
-            <IconButton icon="refresh" :title="$t('refresh')" @click="searcher.search()" />
-        </SearcherHead> -->
-        <div class="pt-2 w-full">
-            <Table :items="models" :processing="searcher.processing"
-                @send-pagination="(page) => searcher.pagination(page)">
-                <template #head>
-                    <th v-text="$t('code')" />
-                    <th v-text="$t('name')" />
-                    <th v-text="$t('description')" />
-                    <th v-text="$t('status')" class="w-20 text-center" />
-                    <th v-text="$t('actions')" class="w-32 text-center" />
-                </template>
-                <template #body="{ items }">
-                    <tr v-for="model in items" :key="model.id" class="table-row"
-                        :class="{ 'bg-gray-50 dark:bg-gray-800': model.level > 0 }">
-                        <td class="table-cell">
-                            <div :style="{ paddingLeft: `${model.level * 24}px` }" class="flex items-center">
-                                <span v-if="model.level > 0" class="text-gray-400 mr-2">└─</span>
-                                <code class="font-mono text-sm" 
-                                      :class="model.level > 0 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-gray-100'">
-                                    {{ model.code }}
-                                </code>
-                                <span v-if="model.level > 0" class="ml-2 text-xs bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 px-2 py-1 rounded-full">
-                                    Subcategoría
-                                </span>
-                            </div>
-                        </td>
-                        <td class="table-cell">
-                            <span class="font-semibold">{{ model.name }}</span>
-                        </td>
-                        <td class="table-cell">
-                            <span class="text-sm text-gray-600 dark:text-gray-400">
-                                {{ model.description || '-' }}
-                            </span>
-                        </td>
-                        <td class="table-cell text-center">
-                            <span 
-                                class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
-                                :class="model.is_active 
-                                    ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' 
-                                    : 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100'"
-                            >
-                                {{ model.is_active ? $t('active') : $t('inactive') }}
-                            </span>
-                        </td>
-                        <td class="table-cell">
-                            <div class="table-actions">
-                                <IconButton
-                                    icon="add_circle"
-                                    :title="$t('Agregar subcategoría')"
-                                    @click="createSubcategory(model)"
-                                    outline
-                                />
-                                <IconButton
-                                    icon="visibility"
-                                    :title="$t('crud.show')"
-                                    @click="showItem(model)"
-                                    outline
-                                />
-                                <RouterLink
-                                    class="h-fit"
-                                    :to="viewTo({ name: 'edit', params: { id: model.id } })"
-                                >
-                                    <IconButton
-                                        icon="edit"
-                                        :title="$t('crud.edit')"
-                                        outline
-                                    />
-                                </RouterLink>
-                                <IconButton
-                                    icon="delete"
-                                    :title="$t('crud.destroy')"
-                                    @click="deleteItem(model)"
-                                    outline
-                                />
-                            </div>
-                        </td>
-                    </tr>
-                </template>
-                <template #empty>
-                    <td class="table-cell">
-                        <div class="flex items-center text-sm">
-                            <GoogleIcon name="folder_open" class="mr-2 text-gray-400" />
-                            <p class="font-semibold">
-                                {{ $t('registers.empty') }}
-                            </p>
-                        </div>
-                    </td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                </template>
-            </Table>
-        </div>
-
-        <ShowView ref="showModal" @reload="searcher.search()" />
-
-        <DestroyView ref="destroyModal" subtitle="name" :to="(id) => apiTo('destroy', { comercial_classification: id })"
-            @update="searcher.search()" />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Modals/Show.vue b/src/pages/ComercialClassifications/Modals/Show.vue
deleted file mode 100644
index 1d84775..0000000
--- a/src/pages/ComercialClassifications/Modals/Show.vue
+++ /dev/null
@@ -1,362 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { getDateTime } from '@Controllers/DateController';
-import { viewTo, apiTo } from '../Module';
-import ComercialClassificationsService from '../services/ComercialClassificationsService';
-import Notify from '@Plugins/Notify';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Button     from '@Holos/Button/Button.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Servicios */
-const classificationsService = new ComercialClassificationsService();
-const router = useRouter();
-
-/** Propiedades */
-const model    = ref(null);
-const loading  = ref(false);
-const deletingChildId = ref(null); // Para mostrar loading específico en subcategoría que se está eliminando
-
-/** Referencias */
-const modalRef = ref(null);
-const destroyModal = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-    emit('close');
-}
-
-/** Función para actualizar el estado de la clasificación */
-async function toggleStatus(item) {
-    if (loading.value) return;
-    
-    const newStatus = !item.is_active;
-    
-    try {
-        loading.value = true;
-        
-        // Usar el servicio para actualizar el estado
-        await classificationsService.updateStatus(item.id, newStatus);
-        
-        // Actualizar el modelo local
-        item.is_active = newStatus;
-        
-        // Notificación de éxito
-        const statusText = newStatus ? 'activada' : 'desactivada';
-        Notify.success(
-            `Clasificación "${item.code}" ${statusText} exitosamente`,
-            'Estado actualizado'
-        );
-        
-        // Emitir evento para recargar la lista principal si es necesario
-        emit('reload');
-        
-    } catch (error) {
-        console.error('Error actualizando estado:', error);
-        
-        // Manejo específico de errores según la estructura de tu API
-        let errorMessage = 'Error al actualizar el estado de la clasificación';
-        let errorTitle = 'Error';
-        
-        if (error?.response?.data) {
-            const errorData = error.response.data;
-            
-            // Caso 1: Error con estructura específica de tu API
-            if (errorData.status === 'error') {
-                if (errorData.errors) {
-                    // Errores de validación - extraer el primer error
-                    const firstField = Object.keys(errorData.errors)[0];
-                    const firstError = errorData.errors[firstField];
-                    errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
-                    errorTitle = 'Error de validación';
-                } else if (errorData.message) {
-                    // Mensaje general del error
-                    errorMessage = errorData.message;
-                    errorTitle = 'Error del servidor';
-                }
-            }
-            // Caso 2: Otros formatos de error
-            else if (errorData.message) {
-                errorMessage = errorData.message;
-            }
-        } else if (error?.message) {
-            // Error genérico de la petición (red, timeout, etc.)
-            errorMessage = `Error de conexión: ${error.message}`;
-            errorTitle = 'Error de red';
-        }
-        
-        // Notificación de error
-        Notify.error(errorMessage, errorTitle);
-    } finally {
-        loading.value = false;
-    }
-}
-
-/** Función para editar subcategoría */
-function editSubcategory(child) {
-    // Navegar a la vista de edición de la subcategoría
-    const editUrl = viewTo({ name: 'edit', params: { id: child.id } });
-    router.push(editUrl);
-    // Cerrar el modal actual
-    close();
-}
-
-/** Función para eliminar subcategoría */
-function deleteSubcategory(child) {
-    // Marcar cuál subcategoría se va a eliminar para mostrar loading
-    deletingChildId.value = child.id;
-    destroyModal.value.open(child);
-}
-
-/** Función para recargar después de eliminar - Mejorada */
-async function onSubcategoryDeleted() {
-    try {
-        // Mostrar que se está procesando
-        const deletedId = deletingChildId.value;
-        
-        // Recargar los datos de la clasificación actual para obtener subcategorías actualizadas
-        const response = await classificationsService.getById(model.value.id);
-        
-        // Actualizar el modelo local con los datos frescos
-        if (response && response.comercial_classification) {
-            model.value = response.comercial_classification;
-            
-            // Notificación de éxito con información específica
-            const deletedCount = model.value.children ? model.value.children.length : 0;
-            Notify.success(
-                `Subcategoría eliminada exitosamente. ${deletedCount} subcategorías restantes.`, 
-                'Eliminación exitosa'
-            );
-        }
-        
-        // Emitir evento para recargar la lista principal
-        emit('reload');
-        
-    } catch (error) {
-        console.error('Error recargando datos después de eliminar:', error);
-        
-        // En caso de error, cerrar modal y recargar lista principal
-        close();
-        emit('reload');
-        
-        // Notificación de error
-        Notify.error(
-            'Error al actualizar la vista. Los datos se han actualizado correctamente.',
-            'Error de actualización'
-        );
-    } finally {
-        // Limpiar el estado de eliminación
-        deletingChildId.value = null;
-    }
-}
-
-/** Función para cancelar eliminación */
-function onDeleteCancelled() {
-    // Limpiar el estado de eliminación si se cancela
-    deletingChildId.value = null;
-}
-
-/** Función para renderizar la jerarquía de hijos */
-const renderChildren = (children, level = 1) => {
-    if (!children || children.length === 0) return null;
-    return children.map(child => ({
-        ...child,
-        level,
-        children: renderChildren(child.children, level + 1)
-    }));
-};
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.code"
-                :subtitle="model.name"
-            >
-                <div class="flex w-full flex-col">
-                    <div class="flex w-full justify-center items-center">
-                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
-                            <GoogleIcon 
-                                class="text-white text-3xl"
-                                name="category"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Header>
-            <div class="flex w-full p-4 space-y-6">
-                <!-- Información básica -->
-                <div class="w-full">
-                    <div class="flex items-start">
-                        <GoogleIcon 
-                            class="text-xl text-success mt-1"
-                            name="info"
-                        />
-                        <div class="pl-3 w-full">
-                            <p class="font-bold text-lg leading-none pb-3">
-                                {{ $t('details') }}
-                            </p>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div>
-                                    <p>
-                                        <b>{{ $t('code') }}: </b>
-                                        <code class="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
-                                            {{ model.code }}
-                                        </code>
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>{{ $t('name') }}: </b>
-                                        {{ model.name }}
-                                    </p>
-                                    <p class="mt-2" v-if="model.description">
-                                        <b>{{ $t('description') }}: </b>
-                                        {{ model.description }}
-                                    </p>
-                                </div>
-                                <div>
-                                    <p>
-                                        <b>{{ $t('status') }}: </b>
-                                        <Button
-                                            :variant="'smooth'"
-                                            :color="model.is_active ? 'success' : 'danger'"
-                                            :size="'sm'"
-                                            :loading="loading"
-                                            @click="toggleStatus(model)"
-                                        >
-                                            {{ model.is_active ? $t('Activo') : $t('Inactivo') }}
-                                        </Button>
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>{{ $t('created_at') }}: </b>
-                                        {{ getDateTime(model.created_at) }}
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>{{ $t('updated_at') }}: </b>
-                                        {{ getDateTime(model.updated_at) }}
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Clasificaciones hijas -->
-                    <div v-if="model.children && model.children.length > 0" class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
-                        <div class="flex items-start">
-                            <GoogleIcon 
-                                class="text-xl text-primary mt-1"
-                                name="account_tree"
-                            />
-                            <div class="pl-3 w-full">
-                                <p class="font-bold text-lg leading-none pb-3">
-                                    {{ $t('Subclasificaciones') }}
-                                </p>
-                                <div class="space-y-2">
-                                    <div 
-                                        v-for="child in model.children" 
-                                        :key="child.id"
-                                        class="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg transition-all duration-300"
-                                        :class="{
-                                            'opacity-50 pointer-events-none': deletingChildId === child.id,
-                                            'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700': deletingChildId === child.id
-                                        }"
-                                    >
-                                        <div class="flex-1">
-                                            <div class="flex items-center">
-                                                <code class="font-mono text-sm bg-white dark:bg-gray-700 px-2 py-1 rounded mr-3">
-                                                    {{ child.code }}
-                                                </code>
-                                                <span class="font-semibold">{{ child.name }}</span>
-                                                <!-- Indicador de eliminación -->
-                                                <span v-if="deletingChildId === child.id" class="ml-2 text-xs bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100 px-2 py-1 rounded-full animate-pulse">
-                                                    Eliminando...
-                                                </span>
-                                            </div>
-                                            <p v-if="child.description" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                                                {{ child.description }}
-                                            </p>
-                                        </div>
-                                        
-                                        <!-- Botones de acción para subcategorías -->
-                                        <div class="flex items-center space-x-2 ml-4">
-                                            <!-- Botón de estado -->
-                                            <Button
-                                                :variant="'smooth'"
-                                                :color="child.is_active ? 'success' : 'danger'"
-                                                :size="'sm'"
-                                                :loading="loading && deletingChildId !== child.id"
-                                                :disabled="deletingChildId === child.id"
-                                                @click="toggleStatus(child)"
-                                            >
-                                                {{ child.is_active ? $t('Activo') : $t('Inactivo') }}
-                                            </Button>
-                                            
-                                            <!-- Botón editar -->
-                                            <IconButton
-                                                icon="edit"
-                                                :title="$t('crud.edit')"
-                                                :disabled="deletingChildId === child.id"
-                                                @click="editSubcategory(child)"
-                                                outline
-                                                size="sm"
-                                            />
-                                            
-                                            <!-- Botón eliminar -->
-                                            <IconButton
-                                                icon="delete"
-                                                :title="$t('crud.destroy')"
-                                                :loading="deletingChildId === child.id"
-                                                :disabled="deletingChildId && deletingChildId !== child.id"
-                                                @click="deleteSubcategory(child)"
-                                                outline
-                                                size="sm"
-                                            />
-                                        </div>
-                                    </div>
-                                    
-                                    <!-- Mensaje cuando no hay subcategorías (después de eliminar todas) -->
-                                    <div v-if="!model.children || model.children.length === 0" 
-                                         class="text-center p-4 text-gray-500 dark:text-gray-400">
-                                        <GoogleIcon class="text-2xl mb-2" name="folder_open" />
-                                        <p class="text-sm">No hay subcategorías</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Modal de eliminación para subcategorías -->
-        <DestroyView
-            ref="destroyModal"
-            subtitle="name"
-            :to="(id) => apiTo('destroy', { comercial_classification: id })"
-            @update="onSubcategoryDeleted"
-        />
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Module.js b/src/pages/ComercialClassifications/Module.js
deleted file mode 100644
index 24b9ccf..0000000
--- a/src/pages/ComercialClassifications/Module.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`comercial-classifications.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
-    name: `admin.comercial-classifications.${name}`, params, query 
-})
-    
-// Obtener traducción del componente
-const transl = (str) => lang(`admin.comercial_classifications.${str}`)
-
-// Control de permisos
-const can = (permission) => hasPermission(`admin.comercial-classifications.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/interfaces/comercial-classifications.interfaces.js b/src/pages/ComercialClassifications/interfaces/comercial-classifications.interfaces.js
deleted file mode 100644
index 8a68475..0000000
--- a/src/pages/ComercialClassifications/interfaces/comercial-classifications.interfaces.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Interfaces para Comercial Classifications
- * 
- * @author Sistema
- * @version 1.0.0
- */
-
-/**
- * @typedef {Object} ComercialClassification
- * @property {number} id - ID de la clasificación
- * @property {string} code - Código de la clasificación
- * @property {string} name - Nombre de la clasificación
- * @property {string|null} description - Descripción de la clasificación
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {number|null} parent_id - ID del padre
- * @property {string} created_at - Fecha de creación
- * @property {string} updated_at - Fecha de actualización
- * @property {string|null} deleted_at - Fecha de eliminación
- * @property {ComercialClassification|null} parent - Clasificación padre
- * @property {ComercialClassification[]} children - Clasificaciones hijas
- */
-
-/**
- * @typedef {Object} ComercialClassificationResponse
- * @property {string} status - Estado de la respuesta
- * @property {Object} data - Datos de la respuesta
- * @property {string} data.message - Mensaje de la respuesta
- * @property {ComercialClassification} data.comercial_classification - Clasificación comercial
- */
-
-/**
- * @typedef {Object} ComercialClassificationsListResponse
- * @property {string} status - Estado de la respuesta
- * @property {Object} data - Datos de la respuesta
- * @property {ComercialClassification[]} data.comercial_classifications - Lista de clasificaciones
- */
-
-/**
- * @typedef {Object} CreateComercialClassificationData
- * @property {string} code - Código de la clasificación
- * @property {string} name - Nombre de la clasificación
- * @property {string|null} description - Descripción de la clasificación
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {number|null} parent_id - ID del padre
- */
-
-/**
- * @typedef {Object} UpdateComercialClassificationData
- * @property {string} [code] - Código de la clasificación
- * @property {string} [name] - Nombre de la clasificación
- * @property {string|null} [description] - Descripción de la clasificación
- * @property {boolean} [is_active] - Estado activo/inactivo
- * @property {number|null} [parent_id] - ID del padre
- */
-
-export {
-    ComercialClassification,
-    ComercialClassificationResponse,
-    ComercialClassificationsListResponse,
-    CreateComercialClassificationData,
-    UpdateComercialClassificationData
-};
diff --git a/src/pages/ComercialClassifications/services/ComercialClassificationsService.js b/src/pages/ComercialClassifications/services/ComercialClassificationsService.js
deleted file mode 100644
index 129895b..0000000
--- a/src/pages/ComercialClassifications/services/ComercialClassificationsService.js
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * Servicio para Comercial Classifications
- * 
- * @author Sistema
- * @version 2.0.0
- */
-
-import { api, apiURL } from '@Services/Api';
-
-export default class ComercialClassificationsService {
-  
-  /**
-   * Obtener todas las clasificaciones comerciales
-   * @param {Object} params - Parámetros de la consulta
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getAll(params = {}) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('comercial-classifications'), {
-        params,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Obtener una clasificación comercial por ID
-   * @param {number} id - ID de la clasificación
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getById(id) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL(`comercial-classifications/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Crear una nueva clasificación comercial
-   * @param {Object} data - Datos de la clasificación
-   * @param {string} data.code - Código de la clasificación
-   * @param {string} data.name - Nombre de la clasificación
-   * @param {string} data.description - Descripción de la clasificación
-   * @param {number|null} data.parent_id - ID de la clasificación padre (null para raíz)
-   * @param {boolean} data.is_active - Estado activo/inactivo
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async create(data) {
-    return new Promise((resolve, reject) => {
-      api.post(apiURL('comercial-classifications'), {
-        data,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Actualizar una clasificación comercial existente
-   * @param {number} id - ID de la clasificación
-   * @param {Object} data - Datos actualizados
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async update(id, data) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`comercial-classifications/${id}`), {
-        data,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Eliminar una clasificación comercial
-   * @param {number} id - ID de la clasificación
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async delete(id) {
-    return new Promise((resolve, reject) => {
-      api.delete(apiURL(`comercial-classifications/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Actualizar solo el estado de una clasificación comercial
-   * @param {number} id - ID de la clasificación
-   * @param {boolean} is_active - Nuevo estado
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async updateStatus(id, is_active) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`comercial-classifications/${id}`), {
-        data: { is_active },
-        onSuccess: (response) => {
-          resolve(response);
-        },
-        onError: (error) => {
-          // Mejorar el manejo de errores
-          const enhancedError = {
-            ...error,
-            timestamp: new Date().toISOString(),
-            action: 'updateStatus',
-            id: id,
-            is_active: is_active
-          };
-          reject(enhancedError);
-        }
-      });
-    });
-  }
-
-  /**
-   * Obtener clasificaciones padre disponibles (para selects)
-   * @param {number|null} excludeId - ID a excluir de la lista (para evitar loops)
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getParentOptions(excludeId = null) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('comercial-classifications'), {
-        params: { exclude_children_of: excludeId },
-        onSuccess: (response) => {
-          // Aplanar la estructura jerárquica para el selector
-          const flattenOptions = (items, level = 0) => {
-            let options = [];
-            items.forEach(item => {
-              if (excludeId && (item.id === excludeId || this.hasDescendant(item, excludeId))) {
-                return; // Excluir item actual y sus descendientes
-              }
-              
-              options.push({
-                ...item,
-                name: '  '.repeat(level) + item.name, // Indentación visual
-                level
-              });
-              
-              if (item.children && item.children.length > 0) {
-                options = options.concat(flattenOptions(item.children, level + 1));
-              }
-            });
-            return options;
-          };
-
-          const flatOptions = flattenOptions(response.comercial_classifications?.data || response.data || []);
-          resolve(flatOptions);
-        },
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Función auxiliar para verificar si un item tiene como descendiente un ID específico
-   * @param {Object} item - Item a verificar
-   * @param {number} targetId - ID objetivo
-   * @returns {boolean} True si es descendiente
-   */
-  hasDescendant(item, targetId) {
-    if (!item.children) return false;
-    return item.children.some(child => 
-      child.id === targetId || this.hasDescendant(child, targetId)
-    );
-  }
-
-  /**
-   * Alternar el estado de una clasificación
-   * @param {Object} item - Objeto con la clasificación
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async toggleStatus(item) {
-    const newStatus = !item.is_active;
-    return this.updateStatus(item.id, newStatus);
-  }
-}
\ No newline at end of file
diff --git a/src/pages/Courses/Admin/Assignamment.vue b/src/pages/Courses/Admin/Assignamment.vue
deleted file mode 100644
index 1c9b298..0000000
--- a/src/pages/Courses/Admin/Assignamment.vue
+++ /dev/null
@@ -1,214 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, viewTo } from './Module';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Input from '@Holos/Form/Input.vue';
-import PageHeader from '@Holos/PageHeader.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-
-/** Definiciones */
-const router = useRouter();
-const vroute = useRoute();
-
-/** Propiedades */
-const form = useForm({
-  users: [],
-  start_date: '',
-  end_date: '',
-  exam_date: '',
-});
-
-const course = ref(null);
-const users = ref([]);
-
-// Computed para contar usuarios seleccionados
-const selectedUsersCount = computed(() => {
-  return users.value.filter(u => u.selected).length;
-});
-
-// Funciones
-const toggleUser = (user) => {
-  user.selected = !user.selected;
-};
-
-const selectAllUsers = () => {
-  const allSelected = users.value.every(u => u.selected);
-  users.value.forEach(u => u.selected = !allSelected);
-};
-
-// Función para calcular la fecha final del curso
-const calculateEndDate = () => {
-  if (form.start_date && course.value?.duration) {
-    const startDate = new Date(form.start_date);
-    const duration = parseInt(course.value.duration);
-    
-    // Agregar la duración en días a la fecha de inicio
-    const endDate = new Date(startDate);
-    endDate.setDate(startDate.getDate() + duration);
-    
-    // Formatear la fecha como YYYY-MM-DD para el input
-    const formattedDate = endDate.toISOString().split('T')[0];
-    form.end_date = formattedDate;
-  }
-};
-
-// Watcher para calcular automáticamente la fecha final cuando cambie la fecha de inicio
-watch(() => form.start_date, () => {
-  calculateEndDate();
-});
-
-const submit = () => {
-  form.transform(data => ({
-    ...data,
-    users: users.value.filter(u => u.selected).map(u => u.id)
-  })).post(apiTo('assign-course', { course: vroute.params.id }), {
-    onSuccess: () => {
-      Notify.success(Lang('register.assign.onSuccess'))
-      router.push(viewTo({ name: 'index' }));
-    }
-  });
-};
-
-/** Ciclos */
-onMounted(() => {
-  api.get(apiTo('show', { course: vroute.params.id }), {
-    onSuccess: (r) => {
-      course.value = r.course
-      users.value = r.course.users ?? []
-    }
-  });
-});
-</script>
-
-<template>
-  <PageHeader
-    title="Asignación de Cursos a Personal"
-  >
-    <RouterLink :to="viewTo({ name: 'index' })">
-      <IconButton
-        class="text-white"
-        icon="arrow_back"
-        :title="$t('return')"
-        filled
-      />
-    </RouterLink>
-  </PageHeader>
-  
-  <div class="w-full pb-2">
-    <p class="text-justify text-sm">Asigna cursos aprobados al personal seleccionado</p>
-  </div>
-
-  <!-- Card principal -->
-  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-    
-    <!-- Información del Curso -->
-    <div class="mb-6">
-      <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt mb-2">
-        Curso Seleccionado
-      </label>
-      
-      <div v-if="course" class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg dark:bg-primary-d dark:border-primary/20">
-        <div class="font-medium text-gray-900 dark:text-primary-dt">{{ course.name }}</div>
-        <div class="text-sm text-gray-500 dark:text-primary-dt/70">
-          {{ course.department?.name }} • {{ course.cost }} {{ course.cost_currency }}
-        </div>
-        <div v-if="course.description" class="text-sm text-gray-600 dark:text-primary-dt/80 mt-1">
-          {{ course.description }}
-        </div>
-      </div>
-      
-      <div v-else class="w-full px-4 py-3 bg-gray-50 border border-gray-300 rounded-lg dark:bg-primary-d dark:border-primary/20">
-        <div class="text-gray-500 dark:text-primary-dt/70">Cargando información del curso...</div>
-      </div>
-    </div>
-
-    <!-- Asignación de Usuarios -->
-    <div class="mb-6">
-      <div class="flex items-center justify-between mb-3">
-        <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
-          Asignar a usuarios
-        </label>
-        <button
-          type="button"
-          @click="selectAllUsers"
-          class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
-        >
-          {{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
-        </button>
-      </div>
-
-      <div class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
-        <div class="space-y-2">
-          <div
-            v-for="user in users"
-            :key="user.id"
-            @click="toggleUser(user)"
-            class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
-          >
-            <div class="flex items-center h-5">
-              <input
-                :checked="user.selected"
-                type="checkbox"
-                class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
-                @click.stop
-                @change="toggleUser(user)"
-              >
-            </div>
-            <div class="ml-3 text-sm">
-              <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
-                {{ user.name }} {{ user.paternal }} {{ user.maternal }}
-              </label>
-              <div class="text-xs text-gray-500 dark:text-primary-dt/70">
-                {{ user.email }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
-        {{ selectedUsersCount }} usuario(s) seleccionado(s)
-      </div>
-    </div>
-
-    <!-- Fechas -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-      <Input
-        v-model="form.start_date"
-        id="start_date"
-        title="dates.start"
-        type="date"
-        required
-      />
-      <Input
-        v-model="form.end_date"
-        id="end_date"
-        title="dates.end"
-        type="date"
-        required
-      />
-      <Input
-        v-model="form.exam_date"
-        id="exam_date"
-        title="exam_date"
-        type="date"
-      />
-    </div>
-
-    <!-- Botones de Acción -->
-    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100 dark:border-primary/20">
-
-      <button
-        @click="submit"
-        class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#7c3aed] hover:bg-[#6d28d9] text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-[#7c3aed] focus:ring-offset-2"
-      >
-        <GoogleIcon class="text-white text-xl" name="notifications" />
-        Notificar
-      </button>
-    </div>
-
-  </section>
-</template>
diff --git a/src/pages/Courses/Admin/Calendar.vue b/src/pages/Courses/Admin/Calendar.vue
deleted file mode 100644
index 0f149c3..0000000
--- a/src/pages/Courses/Admin/Calendar.vue
+++ /dev/null
@@ -1,411 +0,0 @@
-<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/Admin/Index.vue b/src/pages/Courses/Admin/Index.vue
deleted file mode 100644
index b8c53f6..0000000
--- a/src/pages/Courses/Admin/Index.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useSearcher } from '@Services/Api';
-import { apiTo, viewTo } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-import Table from '@Holos/NewTable.vue';
-import ShowView from './Modals/Show.vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Searcher from '@Holos/Searcher.vue';
-
-/** Propiedades */
-const models = ref([]);
-
-/** Referencias */
-const showModal = ref(false);
-const destroyModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-        <div>
-            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
-            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
-            </p>
-        </div>
-    </div>
-
-    <!-- Search Card -->
-    <div class="pt-2 w-full">
-        <Searcher @search="(x) => searcher.search(x)">
-        </Searcher>
-    </div>
-
-    <!-- List Card -->
-    <div class="pt-2 w-full">
-        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
-            <template #head>
-                <th v-text="$t('department')" />
-                <th v-text="$t('name')" />
-                <th v-text="$t('cost')" />
-                <th v-text="$t('url')" />
-                <th v-text="$t('status')" />
-                <th class="w-32 text-center" v-text="$t('actions')" />
-            </template>
-
-            <template #body="{ items }">
-                <tr v-for="model in items" class="table-row">
-                    <td>
-                        <span class="inline-block bg-blue-100 text-blue-800 text-sm py-1 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
-                            {{ model.department.name }}
-                        </span>
-                    </td>
-                    <td>{{ model.name }}</td>
-                    <td>{{ model.cost }} {{ model.cost_currency }}</td>
-                    <td>
-                        <a 
-                            v-if="model.url" 
-                            :href="model.url" 
-                            target="_blank"
-                            class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
-                        >
-                            Ver curso
-                        </a>
-                        <span v-else>-</span>
-                    </td>
-                    <td class="py-6">
-                        <span
-                            class="inline-block py-1 rounded-full text-xs font-semibold"
-                            :class="{
-                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
-                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
-                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
-                            }">
-                            {{ model.status_ek }}
-                        </span>
-                    </td>
-                    <td>
-                        <div class="table-actions">
-                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
-                                outline />
-                            <RouterLink class="h-fit"
-                                :to="viewTo({ name: 'assignamment', params: { id: model.id } })">
-                                <IconButton icon="task_alt" :title="$t('crud.approve')" outline />
-                            </RouterLink>
-                            <IconButton icon="delete" :title="$t('crud.destroy')"
-                                @click="destroyModal.open(model)" outline />
-                        </div>
-                    </td>
-                </tr>
-            </template>
-
-            <template #empty>
-                <td colspan="6" class="py-12 text-center">
-                    <div class="text-gray-500 dark:text-primary-dt/70">
-                        <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                        <p class="text-lg font-medium">No se encontraron cursos</p>
-                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-                    </div>
-                </td>
-            </template>
-        </Table>
-
-        <ShowView ref="showModal" />
-
-        <DestroyView ref="destroyModal" subtitle="certification_type"
-            :to="(course) => apiTo('destroy', { course })" @update="searcher.search()" />
-    </div>
-</template>
diff --git a/src/pages/Courses/Admin/Modals/Show.vue b/src/pages/Courses/Admin/Modals/Show.vue
deleted file mode 100644
index 720bb9a..0000000
--- a/src/pages/Courses/Admin/Modals/Show.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { getDateTime } from '@Controllers/DateController';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Propiedades */
-const model    = ref(null);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-
-    emit('close');
-}
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.name"
-                :subtitle="model.certification_type"
-            >
-            </Header>
-            <div class="flex w-full p-4">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="school"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <p>
-                        <b>{{ $t('name') }}: </b>
-                        {{ model.name }}
-                    </p>
-                    <p>
-                        <b>{{ $t('certification_type') }}: </b>
-                        {{ model.certification_type ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('cost') }}: </b>
-                        {{ model.cost }} {{ model.cost_currency }}
-                    </p>
-                    <p>
-                        <b>{{ $t('duration') }}: </b>
-                        {{ model.duration ?? '-' }} días
-                    </p>
-                    <p>
-                        <b>{{ $t('description') }}: </b>
-                        {{ model.description ?? '-' }}
-                    </p>
-                    <p v-if="model.url">
-                        <b>{{ $t('url') }}: </b>
-                        <a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
-                            {{ model.url }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('certification_name') }}: </b>
-                        {{ model.certification_name ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('status') }}: </b>
-                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
-                            :class="{
-                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
-                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
-                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
-                            }">
-                            {{ model.status_ek }}
-                        </span>
-                    </p>
-                    <p>
-                        <b>{{ $t('department') }}: </b>
-                        {{ model.department?.name ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p>
-                        <b>{{ $t('updated_at') }}: </b>
-                        {{ getDateTime(model.updated_at) }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/Courses/Admin/Module.js b/src/pages/Courses/Admin/Module.js
deleted file mode 100644
index 535f301..0000000
--- a/src/pages/Courses/Admin/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`courses.admin.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.courses.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`courses.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`courses.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Courses/Admin/Request.vue b/src/pages/Courses/Admin/Request.vue
deleted file mode 100644
index ff1c3ad..0000000
--- a/src/pages/Courses/Admin/Request.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, viewTo } from './Module';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import PageHeader from '@Holos/PageHeader.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-import Input from '@Holos/Form/Input.vue';
-import Textarea from '@Holos/Form/Textarea.vue';
-import Selectable from '@Holos/Form/Selectable.vue';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-
-/** Definiciones */
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-  name: '',
-  cost: '',
-  cost_currency: '',
-  description: '',
-  certification_name: '',
-  certification_type: '',
-  duration: '',
-  url: '',
-  department_id: '',
-  users: []
-});
-
-// Lista de departamentos y usuarios
-const departments = ref([]);
-const users = ref([]);
-const currencies = ref([]);
-
-// Computed para contar usuarios seleccionados
-const selectedUsersCount = computed(() => {
-  return users.value.filter(u => u.selected).length;
-});
-
-/** Métodos */
-function submit() {
-  form.transform(data => ({
-    ...data,
-    department_id: form.department_id?.id,
-    cost_currency: form.cost_currency?.id,
-    users: users.value.filter(u => u.selected).map(u => u.id)
-  })).post(apiTo('store'), {
-    onSuccess: () => {
-      Notify.success(Lang('register.create.onSuccess'))
-      router.push(viewTo({ name: 'index' }));
-    }
-  });
-}
-
-// Función para cargar usuarios cuando se seleccione un departamento
-const loadUsersByDepartment = () => {
-  api.catalog({
-    'user:byDepartment': form.department_id?.id
-  }, {
-    onSuccess: (r) => users.value = r['user:byDepartment'] ?? []
-  });
-};
-
-// Funciones para manejar selección de usuarios
-const toggleUser = (user) => {
-  user.selected = !user.selected;
-};
-
-const selectAllUsers = () => {
-  const allSelected = users.value.every(u => u.selected);
-  users.value.forEach(u => u.selected = !allSelected);
-};
-
-// Watcher para cargar usuarios automáticamente cuando cambie el departamento
-watch(() => form.department_id, () => {
-  loadUsersByDepartment();
-});
-
-/** Ciclos */
-onMounted(() => {
-  api.catalog({
-    'department:all': null,
-    'currency:all': null
-  }, {
-    onSuccess: (r) => {
-      departments.value = r['department:all'] ?? []
-      currencies.value = r['currency:all'] ?? []
-    }
-  });
-});
-</script>
-
-<template>
-  <PageHeader
-    title="Solicitud de Nuevo Curso"
-  >
-    <RouterLink :to="viewTo({ name: 'index' })">
-      <IconButton
-        class="text-white"
-        icon="arrow_back"
-        :title="$t('return')"
-        filled
-      />
-    </RouterLink>
-  </PageHeader>
-  
-  <div class="w-full pb-2">
-    <p class="text-justify text-sm">Completa la información para solicitar un nuevo curso de capacitación</p>
-  </div>
-
-  <!-- Card principal -->
-  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-    
-    <!-- Formulario -->
-    <form @submit.prevent="submit" class="space-y-6">
-      
-      <!-- Campos del formulario en dos columnas -->
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        
-        <!-- Columna izquierda -->
-        <div class="space-y-6">
-          <Input
-            v-model="form.name"
-            id="name"
-            title="name"
-            :onError="form.errors.name"
-            required
-          />
-          <Input
-            v-model="form.cost"
-            id="cost"
-            title="cost"
-            :onError="form.errors.cost"
-            type="number"
-            min="0"
-            step="0.01"
-            required
-          />
-          <Selectable
-            v-model="form.cost_currency"
-            id="cost_currency"
-            title="currency"
-            :onError="form.errors.cost_currency"
-            :options="currencies"
-          />
-          <Textarea
-            v-model="form.description"
-            id="description"
-            title="description"
-            :onError="form.errors.description"
-            required
-          />
-          <Input
-            v-model="form.certification_name"
-            id="certification_name"
-            title="certification_name"
-            :onError="form.errors.certification_name"
-          />
-        </div>
-
-         <!-- Columna derecha -->
-         <div class="space-y-6">
-           <Selectable
-             v-model="form.department_id"
-             id="department_id"
-             title="department"
-             :onError="form.errors.department_id"
-             :options="departments"
-             required
-           />
-           <Input
-             v-model="form.certification_type"
-             id="certification_type"
-             title="certification_type"
-             :onError="form.errors.certification_type"
-           />
-           <Input
-             v-model="form.duration"
-             id="duration"
-             title="duration"
-             :onError="form.errors.duration"
-             type="number"
-             min="1"
-             required
-           />
-           <Input
-             v-model="form.url"
-             id="url"
-             title="url"
-             :onError="form.errors.url"
-             type="url"
-           />
-         </div>
-      </div>
-
-       <!-- Sección de Personal a Capacitar -->
-       <div class="mt-8">
-         <div class="flex items-center justify-between mb-3">
-           <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
-             Personal a capacitar
-           </label>
-           <button
-             v-if="users.length > 0"
-             type="button"
-             @click="selectAllUsers"
-             class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
-           >
-             {{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
-           </button>
-         </div>
-
-         <div v-if="users.length > 0" class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
-           <div class="space-y-2">
-             <div
-               v-for="user in users"
-               :key="user.id"
-               @click="toggleUser(user)"
-               class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
-             >
-               <div class="flex items-center h-5">
-                 <input
-                   :checked="user.selected"
-                   type="checkbox"
-                   class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
-                   @click.stop
-                   @change="toggleUser(user)"
-                 >
-               </div>
-               <div class="ml-3 text-sm">
-                 <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
-                   {{ user.name }} {{ user.paternal }} {{ user.maternal }}
-                 </label>
-                 <div class="text-xs text-gray-500 dark:text-primary-dt/70">
-                   {{ user.email }}
-                 </div>
-               </div>
-             </div>
-           </div>
-         </div>
-
-         <div v-else class="border border-gray-300 rounded-lg p-4 dark:bg-primary-d dark:border-primary/20">
-           <div class="text-center text-gray-500 dark:text-primary-dt/70">
-             <GoogleIcon class="w-8 h-8 mx-auto mb-2 text-gray-400" name="people" />
-             <p>Selecciona un departamento para ver el personal disponible</p>
-           </div>
-         </div>
-
-         <div v-if="users.length > 0" class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
-           {{ selectedUsersCount }} usuario(s) seleccionado(s)
-         </div>
-       </div>
-
-      <!-- Botón de Enviar -->
-      <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
-        <PrimaryButton
-          type="submit"
-          :processing="form.processing"
-        >
-          Enviar Solicitud
-        </PrimaryButton>
-      </div>
-
-    </form>
-
-  </section>
-</template>
diff --git a/src/pages/Courses/Coordinator/Index.vue b/src/pages/Courses/Coordinator/Index.vue
deleted file mode 100644
index d2339cc..0000000
--- a/src/pages/Courses/Coordinator/Index.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useSearcher } from '@Services/Api';
-import { apiTo, viewTo } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import Table from '@Holos/NewTable.vue';
-import ShowView from './Modals/Show.vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Searcher from '@Holos/Searcher.vue';
-import Adding from '@Holos/Button/ButtonRh.vue';
-
-/** Propiedades */
-const models = ref([]);
-
-/** Referencias */
-const showModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-        <div>
-            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
-            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
-            </p>
-        </div>
-        <RouterLink :to="viewTo({ name: 'request' })">
-            <Adding text="Nuevo Curso" />
-        </RouterLink>
-    </div>
-
-    <!-- Search Card -->
-    <div class="pt-2 w-full">
-        <Searcher @search="(x) => searcher.search(x)">
-        </Searcher>
-    </div>
-
-    <!-- List Card -->
-    <div class="pt-2 w-full">
-        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
-            <template #head>
-                <th v-text="$t('name')" />
-                <th v-text="$t('cost')" />
-                <th v-text="$t('url')" />
-                <th v-text="$t('status')" />
-                <th class="w-32 text-center" v-text="$t('actions')" />
-            </template>
-
-            <template #body="{ items }">
-                <tr v-for="model in items" class="table-row">
-                    <td>{{ model.name }}</td>
-                    <td>{{ model.cost }} {{ model.cost_currency }}</td>
-                    <td>
-                        <a 
-                            v-if="model.url" 
-                            :href="model.url" 
-                            target="_blank"
-                            class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
-                        >
-                            Ver curso
-                        </a>
-                        <span v-else>-</span>
-                    </td>
-                    <td class="py-6">
-                        <span
-                            class="inline-block py-1 rounded-full text-xs font-semibold"
-                            :class="{
-                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
-                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
-                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
-                            }">
-                            {{ model.status_ek }}
-                        </span>
-                    </td>
-                    <td>
-                        <div class="table-actions">
-                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
-                                outline />
-                        </div>
-                    </td>
-                </tr>
-            </template>
-
-            <template #empty>
-                <td colspan="6" class="py-12 text-center">
-                    <div class="text-gray-500 dark:text-primary-dt/70">
-                        <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                        <p class="text-lg font-medium">No se encontraron cursos</p>
-                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-                    </div>
-                </td>
-            </template>
-        </Table>
-
-        <ShowView ref="showModal" />
-    </div>
-</template>
diff --git a/src/pages/Courses/Coordinator/Modals/Show.vue b/src/pages/Courses/Coordinator/Modals/Show.vue
deleted file mode 100644
index 720bb9a..0000000
--- a/src/pages/Courses/Coordinator/Modals/Show.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { getDateTime } from '@Controllers/DateController';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Propiedades */
-const model    = ref(null);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-
-    emit('close');
-}
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.name"
-                :subtitle="model.certification_type"
-            >
-            </Header>
-            <div class="flex w-full p-4">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="school"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <p>
-                        <b>{{ $t('name') }}: </b>
-                        {{ model.name }}
-                    </p>
-                    <p>
-                        <b>{{ $t('certification_type') }}: </b>
-                        {{ model.certification_type ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('cost') }}: </b>
-                        {{ model.cost }} {{ model.cost_currency }}
-                    </p>
-                    <p>
-                        <b>{{ $t('duration') }}: </b>
-                        {{ model.duration ?? '-' }} días
-                    </p>
-                    <p>
-                        <b>{{ $t('description') }}: </b>
-                        {{ model.description ?? '-' }}
-                    </p>
-                    <p v-if="model.url">
-                        <b>{{ $t('url') }}: </b>
-                        <a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
-                            {{ model.url }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('certification_name') }}: </b>
-                        {{ model.certification_name ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('status') }}: </b>
-                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
-                            :class="{
-                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
-                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
-                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
-                            }">
-                            {{ model.status_ek }}
-                        </span>
-                    </p>
-                    <p>
-                        <b>{{ $t('department') }}: </b>
-                        {{ model.department?.name ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p>
-                        <b>{{ $t('updated_at') }}: </b>
-                        {{ getDateTime(model.updated_at) }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/Courses/Coordinator/Module.js b/src/pages/Courses/Coordinator/Module.js
deleted file mode 100644
index d0c2ed5..0000000
--- a/src/pages/Courses/Coordinator/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`courses.coordinator.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `courses.coordinator.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`courses.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`courses.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Courses/Coordinator/Request.vue b/src/pages/Courses/Coordinator/Request.vue
deleted file mode 100644
index ff1c3ad..0000000
--- a/src/pages/Courses/Coordinator/Request.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, viewTo } from './Module';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import PageHeader from '@Holos/PageHeader.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-import Input from '@Holos/Form/Input.vue';
-import Textarea from '@Holos/Form/Textarea.vue';
-import Selectable from '@Holos/Form/Selectable.vue';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-
-/** Definiciones */
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-  name: '',
-  cost: '',
-  cost_currency: '',
-  description: '',
-  certification_name: '',
-  certification_type: '',
-  duration: '',
-  url: '',
-  department_id: '',
-  users: []
-});
-
-// Lista de departamentos y usuarios
-const departments = ref([]);
-const users = ref([]);
-const currencies = ref([]);
-
-// Computed para contar usuarios seleccionados
-const selectedUsersCount = computed(() => {
-  return users.value.filter(u => u.selected).length;
-});
-
-/** Métodos */
-function submit() {
-  form.transform(data => ({
-    ...data,
-    department_id: form.department_id?.id,
-    cost_currency: form.cost_currency?.id,
-    users: users.value.filter(u => u.selected).map(u => u.id)
-  })).post(apiTo('store'), {
-    onSuccess: () => {
-      Notify.success(Lang('register.create.onSuccess'))
-      router.push(viewTo({ name: 'index' }));
-    }
-  });
-}
-
-// Función para cargar usuarios cuando se seleccione un departamento
-const loadUsersByDepartment = () => {
-  api.catalog({
-    'user:byDepartment': form.department_id?.id
-  }, {
-    onSuccess: (r) => users.value = r['user:byDepartment'] ?? []
-  });
-};
-
-// Funciones para manejar selección de usuarios
-const toggleUser = (user) => {
-  user.selected = !user.selected;
-};
-
-const selectAllUsers = () => {
-  const allSelected = users.value.every(u => u.selected);
-  users.value.forEach(u => u.selected = !allSelected);
-};
-
-// Watcher para cargar usuarios automáticamente cuando cambie el departamento
-watch(() => form.department_id, () => {
-  loadUsersByDepartment();
-});
-
-/** Ciclos */
-onMounted(() => {
-  api.catalog({
-    'department:all': null,
-    'currency:all': null
-  }, {
-    onSuccess: (r) => {
-      departments.value = r['department:all'] ?? []
-      currencies.value = r['currency:all'] ?? []
-    }
-  });
-});
-</script>
-
-<template>
-  <PageHeader
-    title="Solicitud de Nuevo Curso"
-  >
-    <RouterLink :to="viewTo({ name: 'index' })">
-      <IconButton
-        class="text-white"
-        icon="arrow_back"
-        :title="$t('return')"
-        filled
-      />
-    </RouterLink>
-  </PageHeader>
-  
-  <div class="w-full pb-2">
-    <p class="text-justify text-sm">Completa la información para solicitar un nuevo curso de capacitación</p>
-  </div>
-
-  <!-- Card principal -->
-  <section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
-    
-    <!-- Formulario -->
-    <form @submit.prevent="submit" class="space-y-6">
-      
-      <!-- Campos del formulario en dos columnas -->
-      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        
-        <!-- Columna izquierda -->
-        <div class="space-y-6">
-          <Input
-            v-model="form.name"
-            id="name"
-            title="name"
-            :onError="form.errors.name"
-            required
-          />
-          <Input
-            v-model="form.cost"
-            id="cost"
-            title="cost"
-            :onError="form.errors.cost"
-            type="number"
-            min="0"
-            step="0.01"
-            required
-          />
-          <Selectable
-            v-model="form.cost_currency"
-            id="cost_currency"
-            title="currency"
-            :onError="form.errors.cost_currency"
-            :options="currencies"
-          />
-          <Textarea
-            v-model="form.description"
-            id="description"
-            title="description"
-            :onError="form.errors.description"
-            required
-          />
-          <Input
-            v-model="form.certification_name"
-            id="certification_name"
-            title="certification_name"
-            :onError="form.errors.certification_name"
-          />
-        </div>
-
-         <!-- Columna derecha -->
-         <div class="space-y-6">
-           <Selectable
-             v-model="form.department_id"
-             id="department_id"
-             title="department"
-             :onError="form.errors.department_id"
-             :options="departments"
-             required
-           />
-           <Input
-             v-model="form.certification_type"
-             id="certification_type"
-             title="certification_type"
-             :onError="form.errors.certification_type"
-           />
-           <Input
-             v-model="form.duration"
-             id="duration"
-             title="duration"
-             :onError="form.errors.duration"
-             type="number"
-             min="1"
-             required
-           />
-           <Input
-             v-model="form.url"
-             id="url"
-             title="url"
-             :onError="form.errors.url"
-             type="url"
-           />
-         </div>
-      </div>
-
-       <!-- Sección de Personal a Capacitar -->
-       <div class="mt-8">
-         <div class="flex items-center justify-between mb-3">
-           <label class="block text-sm font-medium text-gray-700 dark:text-primary-dt">
-             Personal a capacitar
-           </label>
-           <button
-             v-if="users.length > 0"
-             type="button"
-             @click="selectAllUsers"
-             class="text-sm text-[#2563eb] hover:text-[#1e40af] font-medium"
-           >
-             {{ users.every(u => u.selected) ? 'Deseleccionar todo' : 'Seleccionar todo' }}
-           </button>
-         </div>
-
-         <div v-if="users.length > 0" class="border border-gray-300 rounded-lg p-4 max-h-48 overflow-y-auto dark:bg-primary-d dark:border-primary/20">
-           <div class="space-y-2">
-             <div
-               v-for="user in users"
-               :key="user.id"
-               @click="toggleUser(user)"
-               class="flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
-             >
-               <div class="flex items-center h-5">
-                 <input
-                   :checked="user.selected"
-                   type="checkbox"
-                   class="w-4 h-4 text-[#2563eb] bg-gray-100 border-gray-300 rounded focus:ring-[#2563eb] dark:focus:ring-[#2563eb] dark:ring-offset-gray-800 focus:ring-2 dark:bg-primary-d dark:border-primary/20"
-                   @click.stop
-                   @change="toggleUser(user)"
-                 >
-               </div>
-               <div class="ml-3 text-sm">
-                 <label class="font-medium text-gray-900 dark:text-primary-dt cursor-pointer">
-                   {{ user.name }} {{ user.paternal }} {{ user.maternal }}
-                 </label>
-                 <div class="text-xs text-gray-500 dark:text-primary-dt/70">
-                   {{ user.email }}
-                 </div>
-               </div>
-             </div>
-           </div>
-         </div>
-
-         <div v-else class="border border-gray-300 rounded-lg p-4 dark:bg-primary-d dark:border-primary/20">
-           <div class="text-center text-gray-500 dark:text-primary-dt/70">
-             <GoogleIcon class="w-8 h-8 mx-auto mb-2 text-gray-400" name="people" />
-             <p>Selecciona un departamento para ver el personal disponible</p>
-           </div>
-         </div>
-
-         <div v-if="users.length > 0" class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
-           {{ selectedUsersCount }} usuario(s) seleccionado(s)
-         </div>
-       </div>
-
-      <!-- Botón de Enviar -->
-      <div class="flex justify-end pt-6 border-t border-gray-100 dark:border-primary/20">
-        <PrimaryButton
-          type="submit"
-          :processing="form.processing"
-        >
-          Enviar Solicitud
-        </PrimaryButton>
-      </div>
-
-    </form>
-
-  </section>
-</template>
diff --git a/src/pages/Courses/Employee/Index.vue b/src/pages/Courses/Employee/Index.vue
deleted file mode 100644
index 81731b6..0000000
--- a/src/pages/Courses/Employee/Index.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useSearcher } from '@Services/Api';
-import { apiTo } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import Table from '@Holos/NewTable.vue';
-import ShowView from './Modals/Show.vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Searcher from '@Holos/Searcher.vue';
-
-/** Propiedades */
-const models = ref([]);
-
-/** Referencias */
-const showModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <!-- Header -->
-    <div class="flex items-start justify-between gap-4">
-        <div>
-            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('courses.title') }}</h1>
-            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('courses.description') }}
-            </p>
-        </div>
-    </div>
-
-    <!-- Search Card -->
-    <div class="pt-2 w-full">
-        <Searcher @search="(x) => searcher.search(x)">
-        </Searcher>
-    </div>
-
-    <!-- List Card -->
-    <div class="pt-2 w-full">
-        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
-            <template #head>
-                <th v-text="$t('name')" />
-                <th v-text="$t('url')" />
-                <th class="w-32 text-center" v-text="$t('actions')" />
-            </template>
-
-            <template #body="{ items }">
-                <tr v-for="model in items" class="table-row">
-                    <td>{{ model.course.name }}</td>
-                    <td>
-                        <a 
-                            v-if="model.course.url" 
-                            :href="model.course.url" 
-                            target="_blank"
-                            class="text-blue-600 hover:text-blue-800 underline text-sm dark:text-blue-400 dark:hover:text-blue-300"
-                        >
-                            Ver curso
-                        </a>
-                        <span v-else>-</span>
-                    </td>
-                    <td>
-                        <div class="table-actions">
-                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model.course)"
-                                outline />
-                        </div>
-                    </td>
-                </tr>
-            </template>
-
-            <template #empty>
-                <td colspan="6" class="py-12 text-center">
-                    <div class="text-gray-500 dark:text-primary-dt/70">
-                        <GoogleIcon name="school" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                        <p class="text-lg font-medium">No se encontraron cursos</p>
-                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
-                    </div>
-                </td>
-            </template>
-        </Table>
-
-        <ShowView ref="showModal" />
-    </div>
-</template>
diff --git a/src/pages/Courses/Employee/Modals/Show.vue b/src/pages/Courses/Employee/Modals/Show.vue
deleted file mode 100644
index 720bb9a..0000000
--- a/src/pages/Courses/Employee/Modals/Show.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { getDateTime } from '@Controllers/DateController';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Propiedades */
-const model    = ref(null);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-
-    emit('close');
-}
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.name"
-                :subtitle="model.certification_type"
-            >
-            </Header>
-            <div class="flex w-full p-4">
-                <GoogleIcon 
-                    class="text-xl text-success"
-                    name="school"
-                />
-                <div class="pl-3">
-                    <p class="font-bold text-lg leading-none pb-2">
-                        {{ $t('details') }}
-                    </p>
-                    <p>
-                        <b>{{ $t('name') }}: </b>
-                        {{ model.name }}
-                    </p>
-                    <p>
-                        <b>{{ $t('certification_type') }}: </b>
-                        {{ model.certification_type ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('cost') }}: </b>
-                        {{ model.cost }} {{ model.cost_currency }}
-                    </p>
-                    <p>
-                        <b>{{ $t('duration') }}: </b>
-                        {{ model.duration ?? '-' }} días
-                    </p>
-                    <p>
-                        <b>{{ $t('description') }}: </b>
-                        {{ model.description ?? '-' }}
-                    </p>
-                    <p v-if="model.url">
-                        <b>{{ $t('url') }}: </b>
-                        <a :href="model.url" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
-                            {{ model.url }}
-                        </a>
-                    </p>
-                    <p>
-                        <b>{{ $t('certification_name') }}: </b>
-                        {{ model.certification_name ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('status') }}: </b>
-                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold"
-                            :class="{
-                                'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300': model.status_ek === 'Pendiente',
-                                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300': model.status_ek === 'Aprobado',
-                                'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300': model.status_ek === 'Rechazado'
-                            }">
-                            {{ model.status_ek }}
-                        </span>
-                    </p>
-                    <p>
-                        <b>{{ $t('department') }}: </b>
-                        {{ model.department?.name ?? '-' }}
-                    </p>
-                    <p>
-                        <b>{{ $t('created_at') }}: </b>
-                        {{ getDateTime(model.created_at) }}
-                    </p>
-                    <p>
-                        <b>{{ $t('updated_at') }}: </b>
-                        {{ getDateTime(model.updated_at) }}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/Courses/Employee/Module.js b/src/pages/Courses/Employee/Module.js
deleted file mode 100644
index f510f12..0000000
--- a/src/pages/Courses/Employee/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`courses.employee.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `courses.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`courses.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`courses.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Dashboard/Admin.vue b/src/pages/Dashboard/Admin.vue
deleted file mode 100644
index fb50a99..0000000
--- a/src/pages/Dashboard/Admin.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<script setup>
-import { computed, ref, onMounted } from 'vue';
-import { api } from '@Services/Api';
-import { apiTo } from './Module';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import VueApexCharts from 'vue3-apexcharts';
-
-// Propiedades
-const adminInfo       = ref({});
-const vacationsCharts = ref({});
-
-// Opciones para gráfica de solicitudes por mes (línea)
-const lineChartOptions = computed(() => ({
-    chart: {
-        type: 'line',
-        height: 350,
-        toolbar: {
-            show: true
-        },
-        zoom: {
-            enabled: true
-        }
-    },
-    colors: ['#3B82F6'],
-    stroke: {
-        curve: 'smooth',
-        width: 3
-    },
-    markers: {
-        size: 6,
-        hover: {
-            size: 8
-        }
-    },
-    xaxis: {
-        categories: vacationsCharts.value.requests_by_month?.map(item => item.month_name) || [],
-        title: {
-            text: 'Mes'
-        }
-    },
-    yaxis: {
-        title: {
-            text: 'Número de Solicitudes'
-        },
-        min: 0
-    },
-    tooltip: {
-        y: {
-            formatter: function (val) {
-                return val + " solicitudes"
-            }
-        }
-    },
-    grid: {
-        borderColor: '#f1f1f1'
-    }
-}));
-
-// Series para gráfica de solicitudes por mes
-const lineChartSeries = computed(() => [{
-    name: 'Solicitudes',
-    data: vacationsCharts.value.requests_by_month?.map(item => item.total_requests) || []
-}]);
-
-// Opciones para gráfica de solicitudes por departamento (donut)
-const donutChartOptions = computed(() => ({
-    chart: {
-        type: 'donut',
-        height: 350
-    },
-    colors: ['#3B82F6', '#8B5CF6', '#06B6D4', '#10B981', '#F59E0B', '#EF4444', '#EC4899', '#84CC16'],
-    labels: vacationsCharts.value.requests_by_department?.map(item => item.department_name) || [],
-    legend: {
-        position: 'bottom',
-        horizontalAlign: 'center'
-    },
-    plotOptions: {
-        pie: {
-            donut: {
-                size: '70%',
-                labels: {
-                    show: true,
-                    name: {
-                        show: true,
-                        fontSize: '14px',
-                        fontWeight: 600
-                    },
-                    value: {
-                        show: true,
-                        fontSize: '16px',
-                        fontWeight: 700,
-                        formatter: function (val) {
-                            return val + " solicitudes"
-                        }
-                    },
-                    total: {
-                        show: true,
-                        showAlways: false,
-                        label: 'Total',
-                        fontSize: '16px',
-                        fontWeight: 700,
-                        color: '#373d3f',
-                        formatter: function (w) {
-                            return w.globals.seriesTotals.reduce((a, b) => {
-                                return a + b
-                            }, 0) + " solicitudes"
-                        }
-                    }
-                }
-            }
-        }
-    },
-    tooltip: {
-        y: {
-            formatter: function (val) {
-                return val + " solicitudes"
-            }
-        }
-    },
-    responsive: [{
-        breakpoint: 480,
-        options: {
-            chart: {
-                width: 200
-            },
-            legend: {
-                position: 'bottom'
-            }
-        }
-    }]
-}));
-
-// Series para gráfica de solicitudes por departamento
-const donutChartSeries = computed(() => 
-    vacationsCharts.value.requests_by_department?.map(item => item.total_requests) || []
-);
-
-/** Ciclos */
-onMounted(() => {
-    api.get(apiTo('admin'), {
-        onSuccess: (r) => {
-            adminInfo.value = r.admin_info;
-            vacationsCharts.value = r.admin_info.charts;
-        }
-    });
-});
-</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="vacationsCharts.requests_by_month && vacationsCharts.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
deleted file mode 100644
index a96682e..0000000
--- a/src/pages/Dashboard/Coordinator.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { api } from '@Services/Api';
-import { apiTo } from './Module';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-// Propiedades
-const vacations = ref({});
-const vacationsRequests = ref([]);
-const coordinatorInfo = ref({});
-const lastVacationRequests = ref([]);
-const employeeStatusDepartment = ref([]);
-
-/** Ciclos */
-onMounted(() => {
-    api.get(apiTo('coordinator'), {
-        onSuccess: (r) => {
-            vacations.value = r.vacations;
-            vacationsRequests.value = r.vacation_requests;
-            coordinatorInfo.value = r.coordinator_info;
-            lastVacationRequests.value = r.coordinator_info?.last_vacation_requests;
-            employeeStatusDepartment.value = r.coordinator_info?.employee_status_department;
-        }
-    });
-});
-</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
deleted file mode 100644
index b4e1e4c..0000000
--- a/src/pages/Dashboard/Employee.vue
+++ /dev/null
@@ -1,251 +0,0 @@
-
-<script setup>
-import { onMounted, ref } from 'vue';
-import { api } from '@Services/Api';
-import { apiTo } from './Module';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-// Propiedades
-const vacations = ref({});
-const vacationsRequests = ref([]);
-
-/** Ciclos */
-onMounted(() => {
-    api.get(apiTo('employee'), {
-        onSuccess: (r) => {
-            vacations.value = r.vacations;
-            vacationsRequests.value = r.vacation_requests;
-        }
-    });
-});
-</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/Dashboard/Index.vue b/src/pages/Dashboard/Index.vue
deleted file mode 100644
index 6dfd144..0000000
--- a/src/pages/Dashboard/Index.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<script setup>
-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>
-  <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/Dashboard/Module.js b/src/pages/Dashboard/Module.js
deleted file mode 100644
index cd617bf..0000000
--- a/src/pages/Dashboard/Module.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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/Employees/Index.vue b/src/pages/Employees/Index.vue
deleted file mode 100644
index 27327bb..0000000
--- a/src/pages/Employees/Index.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<script setup>
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Searcher from '@Holos/Searcher.vue';
-import Adding from '@Holos/Button/ButtonRh.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>
-        <Adding text="Nuevo Empleado" />
-      </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/Errors/404.vue b/src/pages/Errors/404.vue
deleted file mode 100644
index da6ff89..0000000
--- a/src/pages/Errors/404.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-    <div class="relative flex items-top justify-center min-h-[calc(100vh-5rem)] sm:items-center sm:pt-0">
-    <div class="max-w-xl mx-auto sm:px-6 lg:px-8">
-        <div class="flex items-center pt-8 sm:justify-start sm:pt-0">
-            <div class="px-4 text-lg text-gray-500 border-r border-gray-400 tracking-wider">
-                404
-            </div>
-            <div class="ml-4 text-lg text-gray-500 uppercase tracking-wider">
-                Not Found
-            </div>
-        </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Errors/502.vue b/src/pages/Errors/502.vue
deleted file mode 100644
index f1b8dc8..0000000
--- a/src/pages/Errors/502.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-    <div class="relative flex items-top justify-center min-h-[calc(100vh-5rem)] sm:items-center sm:pt-0">
-    <div class="max-w-xl mx-auto sm:px-6 lg:px-8">
-        <div class="flex items-center pt-8 sm:justify-start sm:pt-0">
-            <div class="px-4 text-lg text-gray-500 border-r border-gray-400 tracking-wider">
-                502
-            </div>
-            <div class="ml-4 text-lg text-gray-500 uppercase tracking-wider">
-                Bad Gateway
-            </div>
-        </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Errors/503.vue b/src/pages/Errors/503.vue
deleted file mode 100644
index b582b0b..0000000
--- a/src/pages/Errors/503.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-    <div class="relative flex items-top justify-center min-h-[calc(100vh-5rem)] sm:items-center sm:pt-0">
-    <div class="max-w-xl mx-auto sm:px-6 lg:px-8">
-        <div class="flex items-center pt-8 sm:justify-start sm:pt-0">
-            <div class="px-4 text-lg text-gray-500 border-r border-gray-400 tracking-wider">
-                503
-            </div>
-            <div class="ml-4 text-lg text-gray-500 uppercase tracking-wider">
-                Service Unavailable
-            </div>
-        </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Examples/Index.vue b/src/pages/Examples/Index.vue
deleted file mode 100644
index 901f68f..0000000
--- a/src/pages/Examples/Index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <div class="p-2">
-        <h4>Rutas de ejemplo</h4>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Maquetador/Index.vue b/src/pages/Maquetador/Index.vue
deleted file mode 100644
index af51117..0000000
--- a/src/pages/Maquetador/Index.vue
+++ /dev/null
@@ -1,662 +0,0 @@
-<script setup>
-import { ref, onMounted, computed } from 'vue';
-import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
-import GoogleIcon from '@Shared/GoogleIcon.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: [] }]);
-const selectedElementId = ref(null);
-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 = [
-    {
-        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 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;
-        }
-    }
-};
-
-/** Paginación */
-const addPage = () => {
-    pageIdCounter.value++; // <-- Incrementar contador independiente
-    pages.value.push({
-        id: pageIdCounter.value,
-        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 con el tamaño de página seleccionado
-        const pdfDoc = await PDFDocument.create();
-        
-        // 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);
-
-        // 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;
-            }
-
-            // 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
-            });
-
-            // 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),
-                                });
-                            });
-                        }
-                        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 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 - 60,
-                                    width: 100 * scaleX,
-                                    height: 60 * scaleY,
-                                    borderColor: rgb(0.7, 0.7, 0.7),
-                                    borderWidth: 1,
-                                });
-
-                                currentPDFPage.drawText('[Imagen no disponible]', {
-                                    x: x + 5,
-                                    y: y - 35,
-                                    size: 10,
-                                    font: helveticaFont,
-                                    color: rgb(0.7, 0.7, 0.7),
-                                });
-                            }
-                        } else {
-                            // Placeholder para imagen vacía
-                            currentPDFPage.drawRectangle({
-                                x: x,
-                                y: y - 60,
-                                width: 100 * scaleX,
-                                height: 60 * scaleY,
-                                borderColor: rgb(0.7, 0.7, 0.7),
-                                borderWidth: 1,
-                                borderDashArray: [3, 3],
-                            });
-
-                            currentPDFPage.drawText('[Imagen]', {
-                                x: x + 25,
-                                y: y - 35,
-                                size: 10,
-                                font: helveticaFont,
-                                color: rgb(0.7, 0.7, 0.7),
-                            });
-                        }
-                        break;
-
-                    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;
-
-                            // 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,
-                            });
-
-                            // 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
-                                    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 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;
-
-                                    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),
-                                    });
-                                });
-                            });
-                        }
-                        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;
-        pageIdCounter.value = 1; // <-- Resetear también el contador de páginas
-        currentPage.value = 1;
-    }
-};
-
-/** 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 (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">
-                <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 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">
-                    <h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
-                        {{ documentTitle }}
-                    </h2>
-                </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>
-
-            <!-- TextFormatter como toolbar estático -->
-            <TextFormatter
-                :element="textFormatterElement"
-                :visible="showTextFormatter"
-                @update="updateElement"
-            />
-
-            <!-- 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"
-                @page-size-change="handlePageSizeChange"
-            >
-                <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/pages/Pos/Index.vue b/src/pages/Pos/Index.vue
deleted file mode 100644
index 04691b4..0000000
--- a/src/pages/Pos/Index.vue
+++ /dev/null
@@ -1,851 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import Button from '@Holos/Button/Button.vue';
-import MaterialIcon from '@Components/ui/Icons/MaterialIcon.vue';
-import Card from '@Holos/Card/Card.vue';
-import CardContent from '@Holos/Card/CardContent.vue';
-import CardHeader from '@Holos/Card/CardHeader.vue';
-import CardTitle from '@Holos/Card/CardTitle.vue';
-import Badge from '@Components/ui/Tags/Badge.vue';
-import ModalShow from '@Holos/Modal/Show.vue';
-import Input from '@Components/ui/Input.vue';
-
-import { useSearcher } from '@Services/Api';
-import { can, apiTo, viewTo, transl } from './Module'
-
-// Estado reactivo
-const cart = ref([]);
-const searchTerm = ref('');
-const models = ref([]);
-const paymentModalRef = ref(null);
-const paymentMethod = ref('cash'); // 'cash' | 'credit_card'
-const amountReceived = ref('');
-
-// Ventas y egresos
-const sales = ref([]);
-const expenses = ref([]);
-
-// Modal de corte de caja
-const cashCloseModalRef = ref(null);
-const cashCounted = ref('');
-
-// Modal de egresos
-const expenseModalRef = ref(null);
-const expenseDescription = ref('');
-const expenseAmount = ref('');
-
-// Productos filtrados desde el backend
-const filteredProducts = computed(() => {
-    if (!models.value || !models.value.data) return [];
-
-    return models.value.data.map(product => ({
-        id: product.id,
-        name: product.name,
-        sku: product.sku,
-        code: product.code,
-        barcode: product.barcode,
-        description: product.description,
-        price: 16, // TODO: Obtener precio desde inventory_items o price field
-        stock: 10, // TODO: Obtener stock desde inventory_items
-        category: product.classifications?.[0]?.name || 'Sin categoría',
-        attributes: product.attributes,
-        is_active: product.is_active
-    }));
-});
-
-// Computeds del carrito
-const cartItemsCount = computed(() => cart.value.length);
-
-const subtotal = computed(() =>
-    cart.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
-);
-
-const tax = computed(() => subtotal.value * 0.16); // 16% IVA
-
-const total = computed(() => subtotal.value + tax.value);
-
-// Computeds para corte de caja
-const totalSalesAmount = computed(() => 
-    sales.value.reduce((sum, sale) => sum + sale.total, 0)
-);
-
-const totalSalesCount = computed(() => sales.value.length);
-
-const totalCashSales = computed(() => 
-    sales.value.filter(s => s.paymentMethod === 'cash').reduce((sum, sale) => sum + sale.total, 0)
-);
-
-const totalCardSales = computed(() => 
-    sales.value.filter(s => s.paymentMethod === 'credit_card').reduce((sum, sale) => sum + sale.total, 0)
-);
-
-const totalExpenses = computed(() => 
-    expenses.value.reduce((sum, expense) => sum + expense.amount, 0)
-);
-
-const expectedCash = computed(() => totalCashSales.value - totalExpenses.value);
-
-const cashDifference = computed(() => {
-    if (!cashCounted.value) return 0;
-    return parseFloat(cashCounted.value) - expectedCash.value;
-});
-
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => {
-        models.value = r.products;
-        console.log('Productos cargados:', r.products);
-    },
-    onError: (error) => {
-        console.error('Error al cargar productos:', error);
-    }
-});
-
-// Métodos
-const addToCart = (product) => {
-    if (!product.is_active) {
-        console.warn('Producto inactivo');
-        return;
-    }
-
-    const existingItem = cart.value.find(item => item.id === product.id);
-
-    if (existingItem) {
-        if (existingItem.quantity >= product.stock) {
-            console.warn('Stock insuficiente');
-            return;
-        }
-        existingItem.quantity++;
-    } else {
-        cart.value.push({
-            id: product.id,
-            name: product.name,
-            sku: product.sku,
-            code: product.code,
-            price: product.price,
-            quantity: 1,
-            maxStock: product.stock,
-        });
-    }
-};
-
-const updateQuantity = (id, delta) => {
-    const item = cart.value.find(item => item.id === id);
-    if (!item) return;
-
-    const newQuantity = item.quantity + delta;
-
-    if (newQuantity > item.maxStock) {
-        console.warn('Stock insuficiente');
-        return;
-    }
-
-    if (newQuantity <= 0) {
-        removeFromCart(id);
-    } else {
-        item.quantity = newQuantity;
-    }
-};
-
-const removeFromCart = (id) => {
-    cart.value = cart.value.filter(item => item.id !== id);
-};
-
-const clearCart = () => {
-    cart.value = [];
-};
-
-// Abrir modal de pago
-const openPaymentModal = () => {
-  if (cart.value.length === 0) {
-    console.warn('El carrito está vacío');
-    return;
-  }
-  // Resetear valores del modal
-  paymentMethod.value = 'cash';
-  amountReceived.value = '';
-  paymentModalRef.value.open();
-};
-
-// Seleccionar método de pago
-const selectPaymentMethod = (method) => {
-  paymentMethod.value = method;
-  // Limpiar monto recibido al cambiar de método
-  if (method === 'credit_card') {
-    amountReceived.value = '';
-  }
-};
-
-// Calcular cambio
-const change = computed(() => {
-  if (paymentMethod.value === 'cash' && amountReceived.value) {
-    const received = parseFloat(amountReceived.value);
-    if (!isNaN(received) && received >= total.value) {
-      return received - total.value;
-    }
-  }
-  return 0;
-});
-
-// Procesar venta
-const processSale = () => {
-  // Validar pago en efectivo
-  if (paymentMethod.value === 'cash') {
-    const received = parseFloat(amountReceived.value);
-    if (!amountReceived.value || isNaN(received)) {
-      console.error('Ingresa el monto recibido');
-      // TODO: Agregar toast notification
-      return;
-    }
-    if (received < total.value) {
-      console.error(`Monto insuficiente. Faltan $${(total.value - received).toFixed(2)}`);
-      // TODO: Agregar toast notification
-      return;
-    }
-  }
-
-  // Crear registro de venta
-  const saleData = {
-    id: `SALE-${Date.now()}`,
-    timestamp: new Date(),
-    items: [...cart.value],
-    subtotal: subtotal.value,
-    tax: tax.value,
-    total: total.value,
-    paymentMethod: paymentMethod.value,
-    amountReceived: paymentMethod.value === 'cash' ? parseFloat(amountReceived.value) : undefined,
-    change: paymentMethod.value === 'cash' ? change.value : undefined,
-  };
-
-  // Guardar venta
-  sales.value.push(saleData);
-  
-  console.log('Venta procesada:', saleData);
-  console.log('Total de ventas:', sales.value.length);
-  
-  // TODO: Enviar a la API
-  // TODO: Agregar toast de éxito
-  
-  // Limpiar y cerrar
-  clearCart();
-  paymentModalRef.value.close();
-  paymentMethod.value = 'cash';
-  amountReceived.value = '';
-};
-
-// Abrir modal de corte de caja
-const openCashCloseModal = () => {
-  cashCounted.value = '';
-  cashCloseModalRef.value.open();
-};
-
-// Procesar corte de caja
-const handleCashClose = () => {
-  if (!cashCounted.value) {
-    console.error('Ingresa el efectivo contado');
-    // TODO: Agregar toast notification
-    return;
-  }
-
-  console.log('Corte de caja realizado');
-  console.log('Total ventas:', totalSalesAmount.value);
-  console.log('Diferencia:', cashDifference.value);
-  
-  // TODO: Enviar a la API
-  // TODO: Agregar toast de éxito
-  
-  // Reiniciar ventas y egresos después del corte
-  sales.value = [];
-  expenses.value = [];
-  cashCounted.value = '';
-  cashCloseModalRef.value.close();
-};
-
-// Abrir modal de egresos
-const openExpenseModal = () => {
-  expenseDescription.value = '';
-  expenseAmount.value = '';
-  expenseModalRef.value.open();
-};
-
-// Agregar egreso
-const addExpense = () => {
-  // Validar descripción
-  if (!expenseDescription.value.trim()) {
-    console.error('Ingresa una descripción del egreso');
-    // TODO: Agregar toast notification
-    return;
-  }
-
-  // Validar monto
-  const amount = parseFloat(expenseAmount.value);
-  if (!expenseAmount.value || isNaN(amount) || amount <= 0) {
-    console.error('Ingresa un monto válido');
-    // TODO: Agregar toast notification
-    return;
-  }
-
-  // Crear registro de egreso
-  const newExpense = {
-    id: `EXP-${Date.now()}`,
-    timestamp: new Date(),
-    description: expenseDescription.value.trim(),
-    amount: amount,
-  };
-
-  // Guardar egreso
-  expenses.value.push(newExpense);
-  
-  console.log('Egreso registrado:', newExpense);
-  console.log('Total de egresos:', expenses.value.length);
-  
-  // TODO: Enviar a la API
-  // TODO: Agregar toast de éxito
-  
-  // Limpiar y cerrar
-  expenseDescription.value = '';
-  expenseAmount.value = '';
-  expenseModalRef.value.close();
-};
-
-// Obtener color del badge según categoría
-const getCategoryColor = (category) => {
-    return 'blue';
-};
-
-// Formatear atributos para mostrar
-const formatAttributes = (attributes) => {
-    if (!attributes || typeof attributes !== 'object') return '';
-
-    return Object.entries(attributes)
-        .map(([key, value]) => {
-            if (Array.isArray(value)) {
-                return `${key}: ${value.join(', ')}`;
-            }
-            return `${key}: ${value}`;
-        })
-        .join(' | ');
-};
-
-onMounted(() => {
-    searcher.search();
-})
-
-</script>
-
-<template>
-    <div class="space-y-6">
-        <div class="flex justify-between items-start mt-4">
-            <div>
-                <h1 class="text-3xl font-bold tracking-tight">Punto de Venta</h1>
-                <p class="text-muted-foreground">Gestiona las ventas de productos</p>
-            </div>
-            <div class="flex gap-2">
-                <Button variant="outline" color="danger" @click="openExpenseModal">
-                    <MaterialIcon name="trending_down" class="mr-2" />
-                    Egreso
-                </Button>
-                <Button variant="outline" color="info" @click="openCashCloseModal">
-                    <MaterialIcon name="calculate" class="mr-2" />
-                    Corte de Caja
-                </Button>
-            </div>
-        </div>
-
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <!-- Sección de Productos -->
-            <Card class="lg:col-span-2">
-                <CardHeader>
-                    <CardTitle class="flex items-center gap-2">
-                        <MaterialIcon name="search" class="mr-2" />
-                        Productos
-                    </CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <!-- Loading state -->
-                    <div v-if="searcher.loading" class="text-center py-8">
-                        <p class="text-muted-foreground">Cargando productos...</p>
-                    </div>
-
-                    <!-- Empty state -->
-                    <div v-else-if="filteredProducts.length === 0" class="text-center py-8">
-                        <MaterialIcon name="inventory_2" class="mx-auto mb-2 opacity-50" />
-                        <p class="text-muted-foreground">No hay productos disponibles</p>
-                    </div>
-
-                    <!-- Products grid -->
-                    <div v-else class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                        <Card v-for="product in filteredProducts" :key="product.id"
-                            class="hover:border-primary transition-colors"
-                            :class="{ 'opacity-50': !product.is_active }">
-                            <CardContent class="p-4 m-4">
-                                <div class="space-y-3">
-                                    <div class="flex justify-between items-start">
-                                        <div class="space-y-1 flex-1">
-                                            <h3 class="font-semibold">{{ product.name }}</h3>
-                                            <p class="text-sm text-muted-foreground">{{ product.sku }}</p>
-
-                                        </div>
-                                        <div class="flex flex-col gap-1 ml-2">
-                                            <Badge :color="getCategoryColor(product.category)">
-                                                {{ product.category }}
-                                            </Badge>
-                                        </div>
-                                    </div>
-
-                                    <div class="flex items-center justify-between">
-                                        <div>
-                                            <p class="text-2xl font-bold text-primary">${{ product.price.toFixed(2) }}
-                                            </p>
-                                            <p class="text-xs text-muted-foreground">
-                                                Stock: {{ product.stock }} unidades
-                                            </p>
-                                        </div>
-                                        <Button variant="solid" size="sm" @click="addToCart(product)"
-                                            :disabled="product.stock === 0 || !product.is_active" color="info">
-                                            <MaterialIcon name="add_shopping_cart" class="mr-1" />
-                                            Agregar
-                                        </Button>
-                                    </div>
-                                </div>
-                            </CardContent>
-                        </Card>
-                    </div>
-                </CardContent>
-            </Card>
-
-            <!-- Sección del Carrito -->
-            <Card class="lg:sticky lg:top-6 h-fit">
-                <CardHeader>
-                    <CardTitle class="flex items-center justify-between">
-                        <div class="flex items-center gap-2">
-                            <MaterialIcon name="shopping_cart" class="mr-2" />
-                            Carrito
-                        </div>
-                        <Badge variant="secondary">{{ cartItemsCount }} productos</Badge>
-                    </CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <div class="space-y-4">
-                        <!-- Carrito vacío -->
-                        <div v-if="cart.length === 0" class="text-center py-8 text-muted-foreground">
-                            <MaterialIcon name="shopping_cart" class="mx-auto mb-2 opacity-50" />
-                            <p>El carrito está vacío</p>
-                        </div>
-
-                        <!-- Items del carrito -->
-                        <template v-else>
-                            <div class="space-y-3 max-h-[400px] overflow-y-auto pr-2">
-                                <Card v-for="item in cart" :key="item.id">
-                                    <CardContent class="p-3 m-3">
-                                        <div class="space-y-2">
-                                            <div class="flex justify-between items-start">
-                                                <div class="flex-1">
-                                                    <h4 class="font-medium text-sm">{{ item.name }}</h4>
-                                                    <p class="text-xs text-muted-foreground">{{ item.sku }}</p>
-                                                </div>
-                                                <Button variant="smooth" size="sm" color="danger" :iconOnly="true"
-                                                    @click="removeFromCart(item.id)">
-                                                    <MaterialIcon name="delete" />
-                                                </Button>
-                                            </div>
-
-                                            <div class="flex items-center justify-between">
-                                                <div class="flex items-center gap-2">
-                                                    <Button variant="outline" size="sm" :iconOnly="true" 
-                                                        @click="updateQuantity(item.id, -1)">
-                                                        <MaterialIcon name="remove" />
-                                                    </Button>
-                                                    <span class="text-sm font-medium w-8 text-center">
-                                                        {{ item.quantity }}
-                                                    </span>
-                                                    <Button variant="outline" size="sm" :iconOnly="true" 
-                                                        @click="updateQuantity(item.id, 1)"
-                                                        :disabled="item.quantity >= item.maxStock">
-                                                        <MaterialIcon name="add" />
-                                                    </Button>
-                                                </div>
-                                                <p class="font-semibold">
-                                                    ${{ (item.price * item.quantity).toFixed(2) }}
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </CardContent>
-                                </Card>
-                            </div>
-
-                            <!-- Separador -->
-                            <div class="border-t pt-4"></div>
-
-                            <!-- Totales -->
-                            <div class="space-y-2">
-                                <div class="flex justify-between text-sm">
-                                    <span class="text-muted-foreground">Subtotal</span>
-                                    <span class="font-medium">${{ subtotal.toFixed(2) }}</span>
-                                </div>
-                                <div class="flex justify-between text-sm">
-                                    <span class="text-muted-foreground">IVA (16%)</span>
-                                    <span class="font-medium">${{ tax.toFixed(2) }}</span>
-                                </div>
-                                <div class="border-t pt-2"></div>
-                                <div class="flex justify-between text-lg font-bold">
-                                    <span>Total</span>
-                                    <span class="text-primary">${{ total.toFixed(2) }}</span>
-                                </div>
-                            </div>
-
-                            <!-- Botones de acción -->
-                            <div class="space-y-2 pt-4">
-                                <Button class="w-full" size="lg" color="success" :disabled="cart.length === 0"
-                                    @click="openPaymentModal">
-                                    <MaterialIcon name="attach_money" class="mr-2" />
-                                    Procesar Venta
-                                </Button>
-                                <Button variant="outline" class="w-full" @click="clearCart">
-                                    Limpiar Carrito
-                                </Button>
-                            </div>
-                        </template>
-                    </div>
-                </CardContent>
-            </Card>
-        </div>
-
-        <!-- Modal de Pago -->
-        <ModalShow ref="paymentModalRef" title="Procesar Pago">
-            <div class="space-y-6 p-6">
-                <!-- Total a Pagar -->
-                <Card>
-                    <CardContent class="p-4 m-4">
-                        <div class="flex justify-between items-center">
-                            <span class="text-lg font-semibold">Total a Pagar</span>
-                            <span class="text-3xl font-bold text-primary">${{ total.toFixed(2) }}</span>
-                        </div>
-                    </CardContent>
-                </Card>
-
-                <!-- Método de Pago -->
-                <div class="space-y-3">
-                    <label class="text-sm font-medium">Método de Pago</label>
-                    <div class="grid grid-cols-2 gap-3">
-                        <!-- Efectivo -->
-                        <div 
-                            class="border rounded-lg p-4 cursor-pointer transition-all"
-                            :class="paymentMethod === 'cash' ? 'border-green-500 bg-green-50 dark:bg-green-950' : 'border-gray-200 hover:bg-gray-50'"
-                            @click="selectPaymentMethod('cash')"
-                        >
-                            <div class="flex items-center gap-3">
-                                <div 
-                                    class="w-5 h-5 rounded-full border-2 flex items-center justify-center"
-                                    :class="paymentMethod === 'cash' ? 'border-green-600' : 'border-gray-300'"
-                                >
-                                    <div 
-                                        v-if="paymentMethod === 'cash'"
-                                        class="w-3 h-3 rounded-full bg-green-600"
-                                    ></div>
-                                </div>
-                                <MaterialIcon name="payments" class="text-green-600" />
-                                <span class="font-medium">Efectivo</span>
-                            </div>
-                        </div>
-
-                        <!-- Tarjeta -->
-                        <div 
-                            class="border rounded-lg p-4 cursor-pointer transition-all"
-                            :class="paymentMethod === 'credit_card' ? 'border-blue-500 bg-blue-50 dark:bg-blue-950' : 'border-gray-200 hover:bg-gray-50'"
-                            @click="selectPaymentMethod('credit_card')"
-                        >
-                            <div class="flex items-center gap-3">
-                                <div 
-                                    class="w-5 h-5 rounded-full border-2 flex items-center justify-center"
-                                    :class="paymentMethod === 'credit_card' ? 'border-blue-600' : 'border-gray-300'"
-                                >
-                                    <div 
-                                        v-if="paymentMethod === 'credit_card'"
-                                        class="w-3 h-3 rounded-full bg-blue-600"
-                                    ></div>
-                                </div>
-                                <MaterialIcon name="credit_card" class="text-blue-600" />
-                                <span class="font-medium">Tarjeta</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Monto Recibido (Solo para Efectivo) -->
-                <div v-if="paymentMethod === 'cash'" class="space-y-2">
-                    <label for="amount-received" class="text-sm font-medium">Monto Recibido</label>
-                    <Input
-                        id="amount-received"
-                        v-model="amountReceived"
-                        type="number"
-                        step="0.01"
-                        placeholder="0.00"
-                        class="w-full"
-                    />
-                </div>
-
-                <!-- Cálculo de Cambio -->
-                <Card 
-                    v-if="paymentMethod === 'cash' && amountReceived && parseFloat(amountReceived) >= total"
-                    class="bg-green-50 dark:bg-green-950 border-green-200 dark:border-green-800"
-                >
-                    <CardContent class="p-4 m-4">
-                        <div class="flex justify-between items-center">
-                            <span class="font-semibold text-green-900 dark:text-green-100">Cambio</span>
-                            <span class="text-2xl font-bold text-green-700 dark:text-green-300">
-                                ${{ change.toFixed(2) }}
-                            </span>
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
-
-            <!-- Botones del Footer -->
-            <template #buttons>
-                <Button @click="processSale" color="success">
-                    <MaterialIcon name="check_circle" class="mr-2" />
-                    Confirmar Venta
-                </Button>
-            </template>
-        </ModalShow>
-
-        <!-- Modal de Corte de Caja -->
-        <ModalShow ref="cashCloseModalRef" title="Corte de Caja">
-            <div class="space-y-6 p-6">
-                <!-- Resumen de Ventas -->
-                <div class="space-y-4">
-                    <h3 class="font-semibold text-lg">Resumen de Ventas</h3>
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                        <Card>
-                            <CardContent class="p-4 m-4">
-                                <p class="text-sm text-muted-foreground">Total Ventas</p>
-                                <p class="text-2xl font-bold">{{ totalSalesCount }}</p>
-                            </CardContent>
-                        </Card>
-                        <Card>
-                            <CardContent class="p-4 m-4">
-                                <p class="text-sm text-muted-foreground">Ventas Efectivo</p>
-                                <p class="text-2xl font-bold text-green-600">${{ totalCashSales.toFixed(2) }}</p>
-                            </CardContent>
-                        </Card>
-                        <Card>
-                            <CardContent class="p-4 m-4">
-                                <p class="text-sm text-muted-foreground">Ventas Tarjeta</p>
-                                <p class="text-2xl font-bold text-blue-600">${{ totalCardSales.toFixed(2) }}</p>
-                            </CardContent>
-                        </Card>
-                        <Card>
-                            <CardContent class="p-4 m-4">
-                                <p class="text-sm text-muted-foreground">Total Egresos</p>
-                                <p class="text-2xl font-bold text-red-600">${{ totalExpenses.toFixed(2) }}</p>
-                            </CardContent>
-                        </Card>
-                    </div>
-                    <Card class="bg-blue-50 dark:bg-blue-950 border-blue-200">
-                        <CardContent class="p-4 m-4">
-                            <p class="text-sm text-muted-foreground">Efectivo Esperado en Caja</p>
-                            <p class="text-3xl font-bold text-blue-600">${{ expectedCash.toFixed(2) }}</p>
-                            <p class="text-xs text-muted-foreground mt-1">
-                                (Ventas en efectivo - Egresos)
-                            </p>
-                        </CardContent>
-                    </Card>
-                </div>
-
-                <!-- Detalle de Ventas -->
-                <div v-if="sales.length > 0" class="space-y-2">
-                    <h3 class="font-semibold text-lg">Detalle de Ventas</h3>
-                    <div class="border rounded-md p-4 max-h-[200px] overflow-y-auto">
-                        <div class="space-y-2">
-                            <div 
-                                v-for="sale in sales" 
-                                :key="sale.id" 
-                                class="flex justify-between items-center p-2 border-b last:border-b-0"
-                            >
-                                <div>
-                                    <p class="font-medium">{{ sale.id }}</p>
-                                    <p class="text-xs text-muted-foreground">
-                                        {{ sale.timestamp.toLocaleTimeString() }} - 
-                                        {{ sale.items.length }} items - 
-                                        {{ sale.paymentMethod === 'cash' ? 'Efectivo' : 'Tarjeta' }}
-                                    </p>
-                                </div>
-                                <p class="font-semibold">${{ sale.total.toFixed(2) }}</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Detalle de Egresos -->
-                <div v-if="expenses.length > 0" class="space-y-2">
-                    <h3 class="font-semibold text-lg">Detalle de Egresos</h3>
-                    <div class="border rounded-md p-4 max-h-[150px] overflow-y-auto">
-                        <div class="space-y-2">
-                            <div 
-                                v-for="expense in expenses" 
-                                :key="expense.id" 
-                                class="flex justify-between items-center p-2 border-b last:border-b-0"
-                            >
-                                <div>
-                                    <p class="font-medium">{{ expense.description }}</p>
-                                    <p class="text-xs text-muted-foreground">
-                                        {{ expense.timestamp.toLocaleTimeString() }}
-                                    </p>
-                                </div>
-                                <p class="font-semibold text-red-600">-${{ expense.amount.toFixed(2) }}</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Efectivo Contado -->
-                <div class="space-y-2">
-                    <label for="cash-counted" class="text-sm font-medium">Efectivo Contado</label>
-                    <Input
-                        id="cash-counted"
-                        v-model="cashCounted"
-                        type="number"
-                        step="0.01"
-                        placeholder="0.00"
-                        class="w-full"
-                    />
-                </div>
-
-                <!-- Diferencia -->
-                <Card 
-                    v-if="cashCounted"
-                    :class="{
-                        'bg-green-50 dark:bg-green-950 border-green-200': cashDifference === 0,
-                        'bg-red-50 dark:bg-red-950 border-red-200': cashDifference < 0,
-                        'bg-blue-50 dark:bg-blue-950 border-blue-200': cashDifference > 0
-                    }"
-                >
-                    <CardContent class="p-4 m-4">
-                        <div class="flex justify-between items-center">
-                            <span class="font-semibold">
-                                {{ cashDifference === 0 ? 'Cuadrado ✓' : cashDifference < 0 ? 'Faltante' : 'Sobrante' }}
-                            </span>
-                            <span class="text-xl font-bold">
-                                ${{ Math.abs(cashDifference).toFixed(2) }}
-                            </span>
-                        </div>
-                    </CardContent>
-                </Card>
-            </div>
-
-            <!-- Botones del Footer -->
-            <template #buttons>
-                <Button @click="handleCashClose" color="success">
-                    <MaterialIcon name="check_circle" class="mr-2" />
-                    Confirmar Corte
-                </Button>
-            </template>
-        </ModalShow>
-
-        <!-- Modal de Egresos -->
-        <ModalShow ref="expenseModalRef" title="Registrar Egreso">
-            <div class="space-y-6 p-6">
-                <div class="space-y-4">
-                    <!-- Descripción -->
-                    <div class="space-y-2">
-                        <label for="expense-description" class="text-sm font-medium">
-                            Descripción del Egreso
-                        </label>
-                        <Input
-                            id="expense-description"
-                            v-model="expenseDescription"
-                            type="text"
-                            placeholder="Ej: Compra de suministros, pago a proveedor, servicios..."
-                            class="w-full"
-                        />
-                        <p class="text-xs text-muted-foreground">
-                            Describe brevemente el motivo del egreso
-                        </p>
-                    </div>
-
-                    <!-- Monto -->
-                    <div class="space-y-2">
-                        <label for="expense-amount" class="text-sm font-medium">
-                            Monto
-                        </label>
-                        <div class="relative">
-                            <span class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-                                $
-                            </span>
-                            <Input
-                                id="expense-amount"
-                                v-model="expenseAmount"
-                                type="number"
-                                step="0.01"
-                                placeholder="0.00"
-                                class="w-full pl-7"
-                            />
-                        </div>
-                        <p class="text-xs text-muted-foreground">
-                            Ingresa el monto exacto del egreso
-                        </p>
-                    </div>
-
-                    <!-- Información adicional -->
-                    <Card class="bg-yellow-50 dark:bg-yellow-950 border-yellow-200">
-                        <CardContent class="p-4 m-4">
-                            <div class="flex items-start gap-3">
-                                <MaterialIcon name="info" class="text-yellow-600 mt-0.5" />
-                                <div class="text-sm">
-                                    <p class="font-semibold text-yellow-900 dark:text-yellow-100 mb-1">
-                                        Información Importante
-                                    </p>
-                                    <p class="text-yellow-800 dark:text-yellow-200">
-                                        Los egresos se descontarán del efectivo esperado en el corte de caja.
-                                        Asegúrate de ingresar la información correcta.
-                                    </p>
-                                </div>
-                            </div>
-                        </CardContent>
-                    </Card>
-
-                    <!-- Resumen actual -->
-                    <div v-if="expenses.length > 0" class="space-y-2">
-                        <h4 class="text-sm font-semibold">Egresos Registrados Hoy</h4>
-                        <div class="border rounded-md p-3 max-h-[150px] overflow-y-auto bg-gray-50 dark:bg-gray-900">
-                            <div class="space-y-2">
-                                <div 
-                                    v-for="expense in expenses" 
-                                    :key="expense.id"
-                                    class="flex justify-between items-start text-sm"
-                                >
-                                    <div class="flex-1">
-                                        <p class="font-medium">{{ expense.description }}</p>
-                                        <p class="text-xs text-muted-foreground">
-                                            {{ expense.timestamp.toLocaleTimeString() }}
-                                        </p>
-                                    </div>
-                                    <p class="font-semibold text-red-600 ml-2">
-                                        -${{ expense.amount.toFixed(2) }}
-                                    </p>
-                                </div>
-                            </div>
-                            <div class="border-t mt-2 pt-2 flex justify-between items-center font-bold">
-                                <span>Total Egresos:</span>
-                                <span class="text-red-600">-${{ totalExpenses.toFixed(2) }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Botones del Footer -->
-            <template #buttons>
-                <Button 
-                    @click="addExpense" 
-                    color="danger"
-                    :disabled="!expenseDescription.trim() || !expenseAmount || parseFloat(expenseAmount) <= 0"
-                >
-                    <MaterialIcon name="receipt_long" class="mr-2" />
-                    Registrar Egreso
-                </Button>
-            </template>
-        </ModalShow>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Pos/Module.js b/src/pages/Pos/Module.js
deleted file mode 100644
index 943a378..0000000
--- a/src/pages/Pos/Module.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`products.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
-    name: `admin.products.${name}`, params, query 
-})
-    
-// Obtener traducción del componente
-const transl = (str) => lang(`admin.products.${str}`)
-
-// Control de permisos
-const can = (permission) => hasPermission(`admin.products.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/PrivacyPolicy.vue b/src/pages/PrivacyPolicy.vue
deleted file mode 100644
index dce98ba..0000000
--- a/src/pages/PrivacyPolicy.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup>
-import Layout from '@Holos/Layout/TermsLayout.vue';
-
-/** Propiedades */
-defineProps({
-    policy: String,
-});
-</script>
-
-<template>
-    <Layout title="Terms of Service">
-        <div class="w-full overflow-hidden sm:rounded-lg prose" v-html="policy" />
-    </Layout>
-</template>
diff --git a/src/pages/Products/Create.vue b/src/pages/Products/Create.vue
deleted file mode 100644
index 85bdc08..0000000
--- a/src/pages/Products/Create.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton from '@Holos/Button/Icon.vue'
-import PageHeader from '@Holos/PageHeader.vue';
-import Form       from './Form.vue'
-
-/** Definidores */
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    code: '',
-    sku: '',
-    name: '',
-    description: '',
-    attributes: {},
-    is_active: true,
-    warehouse_classification_ids: [],
-    comercial_classification_ids: []
-});
-
-/** Métodos */
-function submit() {
-    form.post(apiTo('store'), {
-        onSuccess: () => {
-            Notify.success(Lang('register.create.onSuccess'));
-            router.push(viewTo({ name: 'index' }));
-        }
-    });
-}
-</script>
-
-<template>
-    <PageHeader :title="transl('create.title')">
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <Form
-        action="create"
-        :form="form"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/Products/Edit.vue b/src/pages/Products/Edit.vue
deleted file mode 100644
index 0e17d5c..0000000
--- a/src/pages/Products/Edit.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo, transl } from './Module';
-
-import IconButton from '@Holos/Button/Icon.vue'
-import PageHeader from '@Holos/PageHeader.vue';
-import Form       from './Form.vue'
-
-/** Definiciones */
-const vroute = useRoute();
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    id: null,
-    code: '',
-    sku: '',
-    name: '',
-    description: '',
-    attributes: {},
-    is_active: true,
-    warehouse_classification_ids: [],
-    comercial_classification_ids: []
-});
-
-/** Métodos */
-function submit() {
-    form.put(apiTo('update', { product: form.id }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'));
-            router.push(viewTo({ name: 'index' }));
-        },
-    });
-}
-
-/** Ciclos */
-onMounted(() => {
-    api.get(apiTo('show', { product: vroute.params.id }), {
-        onSuccess: (r) => {
-            const product = r.product || r.data?.product;
-            
-            // Extraer IDs de clasificaciones
-            const warehouseIds = product.warehouse_classifications?.map(c => c.id) || [];
-            const comercialIds = product.comercial_classifications?.map(c => c.id) || [];
-            
-            form.fill({
-                id: product.id,
-                code: product.code,
-                sku: product.sku,
-                name: product.name,
-                description: product.description,
-                attributes: product.attributes || {},
-                is_active: product.is_active,
-                warehouse_classification_ids: warehouseIds,
-                comercial_classification_ids: comercialIds
-            });
-        }
-    });
-});
-</script>
-
-<template>
-    <PageHeader :title="transl('edit.title')">
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <Form
-        action="update"
-        :form="form"
-        @submit="submit"
-    />
-</template>
diff --git a/src/pages/Products/Form.vue b/src/pages/Products/Form.vue
deleted file mode 100644
index a3decb0..0000000
--- a/src/pages/Products/Form.vue
+++ /dev/null
@@ -1,546 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { comercialTo, transl } from './Module';
-import ProductService from './services/ProductService';
-import { useSearcher } from '@Services/Api';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input from '@Holos/Form/Input.vue';
-import Textarea from '@Holos/Form/Textarea.vue';
-import Selectable from '@Holos/Form/Selectable.vue';
-import Switch from '@Holos/Form/Switch.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Button from '@Holos/Button/Button.vue';
-import Badge from '@Components/ui/Tags/Badge.vue';
-import Label from "@Holos/Form/Elements/Label.vue";
-
-/** Eventos */
-const emit = defineEmits(['submit']);
-
-/** Propiedades */
-const props = defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object
-});
-
-/** Referencias */
-const productService = new ProductService();
-const warehouseClassifications = ref([]);
-const comercialClassifications = ref([]);
-const loadingClassifications = ref(false);
-
-const newAttrKey = ref('');
-const newAttrValue = ref('');
-
-const availableClassifications = ref([]);
-const newClassification = ref('');
-const newSubclassification = ref('');
-const selectedParentForNew = ref(null);
-
-/** Métodos */
-function submit() {
-    emit('submit');
-}
-
-/** Agregar valor a un atributo */
-function addAttributeValue() {
-    const key = newAttrKey.value.trim();
-    const value = newAttrValue.value.trim();
-
-    if (!key || !value) {
-        window.Notify?.warning('El nombre del atributo y el valor son requeridos');
-        return;
-    }
-
-    if (!props.form.attributes) {
-        props.form.attributes = {};
-    }
-
-    // Si el atributo no existe, crear array vacío
-    if (!props.form.attributes[key]) {
-        props.form.attributes[key] = [];
-    }
-
-    // Evitar valores duplicados en el mismo atributo
-    if (props.form.attributes[key].includes(value)) {
-        window.Notify?.warning(`El valor "${value}" ya existe en "${key}"`);
-        return;
-    }
-
-    // Agregar el valor al atributo
-    props.form.attributes[key].push(value);
-
-    // Solo limpiar el valor, mantener el nombre para seguir agregando
-    newAttrValue.value = '';
-
-    window.Notify?.success(`"${value}" agregado a "${key}"`);
-}
-
-/** Remover un atributo completo */
-function removeAttributeKey(attrName) {
-    if (props.form.attributes && props.form.attributes[attrName]) {
-        delete props.form.attributes[attrName];
-        window.Notify?.success(`Atributo "${attrName}" eliminado`);
-    }
-}
-
-/** Remover un valor específico de un atributo */
-function removeAttributeValue(attrName, value) {
-    if (props.form.attributes && props.form.attributes[attrName]) {
-        props.form.attributes[attrName] = props.form.attributes[attrName].filter(v => v !== value);
-
-        // Si no quedan valores, eliminar el atributo completo
-        if (props.form.attributes[attrName].length === 0) {
-            delete props.form.attributes[attrName];
-        }
-    }
-}
-
-/** Métodos para clasificaciones comerciales */
-const handleAddClassification = (classificationId) => {
-    if (!props.form.comercial_classification_ids) {
-        props.form.comercial_classification_ids = [];
-    }
-    
-    if (!props.form.comercial_classification_ids.includes(classificationId)) {
-        props.form.comercial_classification_ids.push(classificationId);
-        window.Notify?.success('Clasificación agregada correctamente');
-    }
-};
-
-const handleRemoveClassification = (classificationId) => {
-    if (!props.form.comercial_classification_ids) return;
-    
-    const index = props.form.comercial_classification_ids.indexOf(classificationId);
-    if (index > -1) {
-        props.form.comercial_classification_ids.splice(index, 1);
-    }
-};
-
-const handleCreateNewClassification = () => {
-    if (!newClassification.value.trim()) {
-        window.Notify?.error('El nombre de la clasificación es requerido');
-        return;
-    }
-
-    const newId = Math.max(...availableClassifications.value.map(c => c.id)) + 1;
-    const newClass = {
-        id: newId,
-        name: newClassification.value,
-        children: []
-    };
-
-    availableClassifications.value.push(newClass);
-    
-    window.Notify?.success(`"${newClassification.value}" agregada al sistema`);
-    
-    newClassification.value = '';
-};
-
-const handleCreateNewSubclassification = (parentId) => {
-    if (!newSubclassification.value.trim()) {
-        window.Notify?.error('El nombre de la subclasificación es requerido');
-        return;
-    }
-
-    availableClassifications.value = availableClassifications.value.map(parent => {
-        if (parent.id === parentId) {
-            const newId = parent.children && parent.children.length > 0
-                ? Math.max(...parent.children.map(c => c.id)) + 1
-                : parentId * 10 + 1;
-            
-            const newChild = {
-                id: newId,
-                name: newSubclassification.value,
-                parent_id: parentId
-            };
-            
-            return {
-                ...parent,
-                children: [...(parent.children || []), newChild]
-            };
-        }
-        return parent;
-    });
-
-    window.Notify?.success(`"${newSubclassification.value}" agregada`);
-    
-    newSubclassification.value = '';
-    selectedParentForNew.value = null;
-};
-
-const getClassificationName = (id) => {
-    for (const parent of availableClassifications.value) {
-        if (parent.id === id) return parent.name;
-        if (parent.children) {
-            const child = parent.children.find(c => c.id === id);
-            if (child) return `${parent.name} > ${child.name}`;
-        }
-    }
-    return "Desconocida";
-};
-
-/** Cargar clasificaciones de almacén */
-async function loadClassifications() {
-    loadingClassifications.value = true;
-    try {
-        const warehouse = await productService.getWarehouseClassifications();
-        warehouseClassifications.value = warehouse || [];
-    } catch (error) {
-        console.error('Error cargando clasificaciones de almacén:', error);
-        window.Notify?.error('Error al cargar las clasificaciones de almacén');
-    } finally {
-        loadingClassifications.value = false;
-    }
-}
-
-/** Cargar atributos existentes al editar */
-function loadExistingAttributes() {
-    console.log('Atributos cargados:', props.form.attributes);
-}
-
-
-const searcherComercial = useSearcher({
-    url: comercialTo('index'),
-    onSuccess: (r) => {
-        console.log('🔍 Respuesta completa (r):', r);
-        console.log('🔍 r.comercial_classifications:', r.comercial_classifications);
-        console.log('🔍 r.comercial_classifications.data:', r.comercial_classifications?.data);
-        
-        // La respuesta viene en r.comercial_classifications.data
-        const classificationsData = r?.comercial_classifications?.data || [];
-        
-        console.log('✅ classificationsData extraído:', classificationsData);
-        console.log('✅ Es array?:', Array.isArray(classificationsData));
-        console.log('✅ Length:', classificationsData.length);
-        
-        comercialClassifications.value = classificationsData;
-        availableClassifications.value = classificationsData;
-        
-        console.log('✅ availableClassifications.value asignado:', availableClassifications.value);
-        console.log('✅ Total de clasificaciones:', availableClassifications.value.length);
-    },
-    onError: (error) => {
-        console.error('❌ Error cargando clasificaciones:', error);
-        comercialClassifications.value = [];
-        availableClassifications.value = [];
-    }
-});
-
-
-/** Ciclos */
-onMounted(() => {
-    loadClassifications();
-    searcherComercial.search(); // Cargar clasificaciones comerciales
-    
-    if (props.action === 'update') {
-        loadExistingAttributes();
-    }
-    
-    // Inicializar array de clasificaciones comerciales si no existe
-    if (!props.form.comercial_classification_ids) {
-        props.form.comercial_classification_ids = [];
-    }
-});
-</script>
-
-<template>
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
-    </div>
-
-    <div class="w-full">
-        <form @submit.prevent="submit" class="space-y-6">
-            <!-- Información básica -->
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                <div class="flex items-center mb-4">
-                    <GoogleIcon name="info" class="text-blue-500 text-2xl mr-2" />
-                    <h3 class="text-lg font-semibold">{{ $t('Información Básica') }}</h3>
-                </div>
-
-                <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-                    <Input v-model="form.code" id="code" :label="$t('codes')" :onError="form.errors.code" autofocus
-                        required />
-                    <Input v-model="form.sku" id="SKU" label="SKU" :onError="form.errors.sku" required />
-
-                    <Input v-model="form.name" id="name" :label="$t('name')" :onError="form.errors.name" required />
-
-                    <Input v-model="form.barcode" id="CÓDIGO DE BARRAS" :label="$t('CÓDIGO DE BARRAS')"
-                        :onError="form.errors.barcode" required />
-
-                    <div class="md:col-span-2 lg:col-span-3">
-                        <Textarea v-model="form.description" id="description" :label="$t('description')"
-                            :onError="form.errors.description" rows="3" />
-                    </div>
-
-                    <div class="flex items-center justify-between p-4 border rounded-lg">
-                        <div>
-                            <label for="">Estado del producto</label>
-                            <p class="text-sm text-muted-foreground">
-                                Activar o desactivar el producto en el catálogo
-                            </p>
-                        </div>
-
-                        <Switch v-model:checked="form.is_active" />
-
-                    </div>
-                </div>
-            </div>
-
-            <!-- Atributos dinámicos -->
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-                <div class="flex items-center mb-4">
-                    <GoogleIcon name="tune" class="text-green-500 text-2xl mr-2" />
-                    <h3 class="text-lg font-semibold">{{ $t('Atributos del Producto') }}</h3>
-                </div>
-
-                <div class="space-y-3 p-4 border rounded-lg bg-muted/20">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <Label class="text-base">Atributos del Producto</Label>
-                            <p class="text-sm text-muted-foreground">
-                                Define atributos (ej: Color) y agrega múltiples valores (Negro, Azul, Rojo)
-                            </p>
-                        </div>
-                    </div>
-
-                    <div class="space-y-2">
-                        <label class="text-sm font-medium">Agregar Atributo y Valores</label>
-                        <div class="flex gap-2">
-                            <div class="flex-1">
-                                <Input v-model="newAttrKey"
-                                    placeholder="Nombre del atributo (ej: Color, Procesador, RAM)" />
-                            </div>
-                            <div class="flex-1 flex gap-2">
-                                <Input v-model="newAttrValue"
-                                    placeholder="Valor (ej: Negro) - presiona Enter o + para agregar"
-                                    @keypress.enter.prevent="addAttributeValue" />
-                                <Button color="info" variant="solid" @click="addAttributeValue">
-                                    <GoogleIcon name="add" class="mr-1" />
-                                    {{ $t('Agregar') }}
-                                </Button>
-                            </div>
-                        </div>
-                        <p v-if="newAttrKey" class="text-xs text-muted-foreground ml-1">
-                            💡 Agregando valores al atributo: <span class="font-semibold">{{ newAttrKey }}</span>
-                        </p>
-                    </div>
-
-                    <!-- Mostrar atributos configurados -->
-                    <div v-if="form.attributes && Object.keys(form.attributes).length > 0"
-                        class="space-y-3 mt-4 pt-4 border-t">
-                        <label class="text-sm font-medium">Atributos Configurados</label>
-                        <div v-for="(values, attrName) in form.attributes" :key="attrName"
-                            class="space-y-2 p-3 border rounded-lg bg-background">
-                            <div class="flex items-center justify-between">
-                                <label class="text-sm font-semibold text-primary">{{ attrName }}</label>
-                                <button type="button" @click="removeAttributeKey(attrName)"
-                                    class="px-2 py-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors flex items-center gap-1">
-                                    <GoogleIcon name="delete" class="text-sm" />
-                                    Eliminar atributo
-                                </button>
-                            </div>
-                            <div class="flex flex-wrap gap-2">
-                                <Badge v-for="value in values" :key="value" color="default"
-                                    class="flex items-center gap-1">
-                                    {{ value }}
-                                    <GoogleIcon name="close" class="text-xs cursor-pointer hover:text-red-600"
-                                        @click="removeAttributeValue(attrName, value)" />
-                                </Badge>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Estado vacío -->
-                    <div v-else class="text-center py-8 text-gray-500">
-                        <GoogleIcon name="settings" class="text-4xl mb-2" />
-                        <p class="text-sm">No hay atributos personalizados</p>
-                        <p class="text-xs">Haz clic en "Agregar" para crear uno</p>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Clasificaciones -->
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
-
-                <div class="grid gap-4 grid-cols-1">
-
-                    <!-- Clasificaciones Comerciales con jerarquía -->
-                    <div class="space-y-4 p-4 border rounded-lg bg-muted/20">
-                        <div>
-                            <Label class="text-base">Clasificaciones Comerciales</Label>
-                            <p class="text-sm text-muted-foreground">
-                                Selecciona clasificaciones y subclasificaciones, o crea nuevas
-                            </p>
-                        </div>
-
-                        <!-- Estado de carga -->
-                        <div v-if="searcherComercial.loading" class="text-center py-8">
-                            <GoogleIcon name="sync" class="text-4xl text-blue-500 animate-spin mb-2" />
-                            <p class="text-sm text-muted-foreground">Cargando clasificaciones...</p>
-                        </div>
-
-                        <!-- Lista de clasificaciones disponibles con jerarquía -->
-                        <div v-else-if="availableClassifications.length > 0" class="space-y-3">
-                            <div v-for="parent in availableClassifications" :key="parent.id" 
-                                 class="space-y-2 p-3 border rounded-lg bg-background">
-                                
-                                <!-- Clasificación Principal -->
-                                <div class="flex items-center justify-between">
-                                    <Button
-                                        type="button"
-                                        :color="form.comercial_classification_ids?.includes(parent.id) ? 'success' :'info'"
-                                        :variant="form.comercial_classification_ids?.includes(parent.id) ? 'solid' : 'outline'"
-                                        size="sm"
-                                        @click="form.comercial_classification_ids?.includes(parent.id)
-                                            ? handleRemoveClassification(parent.id)
-                                            : handleAddClassification(parent.id)"
-                                        class="font-semibold"
-                                    >
-                                        {{ parent.name }}
-                                    </Button>
-                                    <Button
-                                        type="button"
-                                        variant="ghost"
-                                        size="sm"
-                                        @click="selectedParentForNew = selectedParentForNew === parent.id ? null : parent.id"
-                                    >
-                                        <GoogleIcon name="add" class="mr-1" />
-                                        Agregar subclasificación
-                                    </Button>
-                                </div>
-
-                                <!-- Subclasificaciones -->
-                                <div v-if="parent.children && parent.children.length > 0" 
-                                     class="flex flex-wrap gap-2 ml-4 pl-4 border-l-2">
-                                    <Button
-                                        v-for="child in parent.children"
-                                        :key="child.id"
-                                        type="button"
-                                        :color="form.comercial_classification_ids?.includes(child.id) ? 'success' :'warning'"
-                                        :variant="form.comercial_classification_ids?.includes(child.id) ? 'solid' : 'outline'"
-                                        size="sm"
-                                        @click="form.comercial_classification_ids?.includes(child.id)
-                                            ? handleRemoveClassification(child.id)
-                                            : handleAddClassification(child.id)"
-                                    >
-                                        {{ child.name }}
-                                        <GoogleIcon v-if="form.comercial_classification_ids?.includes(child.id)" 
-                                                    name="close" class="ml-2 text-xs" />
-                                    </Button>
-                                </div>
-
-                                <!-- Formulario para agregar subclasificación -->
-                                <div v-if="selectedParentForNew === parent.id" class="flex gap-2 ml-4 mt-2">
-                                    <Input
-                                        v-model="newSubclassification"
-                                        placeholder="Nombre de la subclasificación"
-                                        @keypress.enter.prevent="handleCreateNewSubclassification(parent.id)"
-                                        class="flex-1"
-                                    />
-                                    <Button 
-                                        type="button" 
-                                        @click="handleCreateNewSubclassification(parent.id)" 
-                                        size="sm"
-                                        color="primary"
-                                    >
-                                        <GoogleIcon name="add" />
-                                    </Button>
-                                    <Button 
-                                        type="button" 
-                                        @click="() => { selectedParentForNew = null; newSubclassification = ''; }" 
-                                        size="sm" 
-                                        variant="ghost"
-                                    >
-                                        <GoogleIcon name="close" />
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Estado vacío -->
-                        <div v-else class="text-center py-8 text-muted-foreground">
-                            <GoogleIcon name="category" class="text-4xl mb-2" />
-                            <p class="text-sm">No hay clasificaciones disponibles</p>
-                            <p class="text-xs mt-1">Crea una nueva clasificación para comenzar</p>
-                            <p class="text-xs mt-2 text-red-500">Debug: {{ availableClassifications.length }} items</p>
-                        </div>
-
-                        <!-- Crear nueva clasificación principal -->
-                        <div v-if="!searcherComercial.loading" class="flex gap-2 pt-2 border-t">
-                            <Input
-                                v-model="newClassification"
-                                placeholder="Nueva clasificación principal"
-                                @keypress.enter.prevent="handleCreateNewClassification"
-                            />
-                            <Button 
-                                type="button" 
-                                @click="handleCreateNewClassification" 
-                                size="sm" 
-                                color="info"
-
-                            >
-                                <GoogleIcon name="add" class="mr-2" />
-                                Crear
-                            </Button>
-                        </div>
-
-                        <!-- Clasificaciones seleccionadas -->
-                        <div v-if="form.comercial_classification_ids && form.comercial_classification_ids.length > 0" class="pt-3 border-t">
-                            <Label class="text-sm">Seleccionadas ({{ form.comercial_classification_ids.length }}):</Label>
-                            <div class="flex flex-wrap gap-2 mt-2">
-                                <Badge 
-                                    v-for="classId in form.comercial_classification_ids" 
-                                    :key="classId"
-                                    color="primary"
-                                    class="flex items-center gap-1"
-                                >
-                                    {{ getClassificationName(classId) }}
-                                    <GoogleIcon 
-                                        name="close" 
-                                        class="text-xs cursor-pointer hover:text-red-600"
-                                        @click="handleRemoveClassification(classId)" 
-                                    />
-                                </Badge>
-                            </div>
-                        </div>
-
-                        <!-- Mensaje cuando no hay seleccionadas -->
-                        <div v-else class="text-center py-6 text-muted-foreground text-sm">
-                            <GoogleIcon name="category" class="text-4xl mb-2" />
-                            <p>No hay clasificaciones seleccionadas</p>
-                            <p class="text-xs mt-1">Selecciona clasificaciones para organizar tu producto</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Slot para campos adicionales -->
-            <slot />
-
-            <!-- Botón de submit -->
-            <div class="flex justify-center">
-                <PrimaryButton v-text="$t(action)" :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing" class="px-8 py-3" />
-            </div>
-        </form>
-    </div>
-</template>
-
-<style scoped>
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.animate-spin {
-    animation: spin 1s linear infinite;
-}
-</style>
\ No newline at end of file
diff --git a/src/pages/Products/Index.vue b/src/pages/Products/Index.vue
deleted file mode 100644
index 9012552..0000000
--- a/src/pages/Products/Index.vue
+++ /dev/null
@@ -1,198 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useSearcher } from '@Services/Api';
-import { can, apiTo, viewTo, transl } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead from '@Holos/Searcher.vue';
-import Table from '@Components/ui/Table/Table.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import ShowView from './Modals/Show.vue';
-
-import Button from '@Holos/Button/Button.vue';
-import Card from '@Holos/Card/Card.vue';
-import CardContent from '@Holos/Card/CardContent.vue';
-import CardHeader from '@Holos/Card/CardHeader.vue';
-import CardTitle from '@Holos/Card/CardTitle.vue';
-import Badge from '@Components/ui/Tags/Badge.vue';
-import MaterialIcon from '@Components/ui/Icons/MaterialIcon.vue';
-
-/** Propiedades */
-const models = ref();
-const router = useRouter();
-/** Configuración de paginación */
-const pagination = ref({
-    currentPage: 1,
-    pageSize: 10,
-    totalItems: 0
-});
-
-/** Referencias */
-const showModal = ref(false);
-const destroyModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => {
-        // Si hay productos de la API, los usamos
-        models.value = r.products;
-        // Actualizar paginación con el total de items
-        pagination.value.totalItems = r.products?.data?.length || 0;
-    },
-    onError: (error) => {
-        console.error(error);
-        // En caso de error, usamos datos de prueba
-    }
-});
-
-/** Función para formatear atributos */
-const formatAttributes = (attributes) => {
-    if (!attributes) return '-';
-
-    const formatted = Object.entries(attributes).map(([key]) => {
-        return `${key}`;
-    }).join(' | ');
-
-    return formatted.length > 50 ? formatted.substring(0, 50) + '...' : formatted;
-};
-
-/** Configuración de columnas para la tabla */
-const columns = ref([
-    {
-        key: 'code',
-        label: 'Código',
-        sortable: true,
-        width: '120px'
-    },
-    {
-        key: 'sku',
-        label: 'SKU',
-        sortable: true,
-        width: '120px'
-    },
-    {
-        key: 'name',
-        label: 'Nombre',
-        sortable: true
-    },
-    {
-        key: 'description',
-        label: 'Descripción',
-        sortable: false
-    },
-    {
-        key: 'attributes',
-        label: 'Atributos',
-        sortable: false,
-        formatter: (value) => formatAttributes(value)
-    },
-    {
-        key: 'is_active',
-        label: 'Estado',
-        sortable: true,
-        width: '100px'
-    },
-    {
-        key: 'created_at',
-        label: 'Fecha Creación',
-        sortable: true,
-        width: '140px'
-    },
-    {
-        key: 'actions',
-        label: 'Acciones',
-        sortable: false,
-        width: '140px'
-    }
-]);
-
-
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-})
-
-</script>
-
-<template>
-    <div class="space-y-6">
-        <div class="flex items-center justify-between">
-            <div>
-                <h1 className="text-3xl font-bold text-foreground">Productos</h1>
-                <p className="text-muted-foreground">
-                    Gestión del catálogo de productos
-                </p>
-            </div>
-            <RouterLink
-                
-                :to="viewTo({ name: 'create' })"
-            >
-            <!-- v-if="can('create')" -->
-                <Button color="info">
-                    <MaterialIcon name="add" class="mr-2" />
-                    Nuevo producto
-                </Button>
-            </RouterLink>
-            
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <Card>
-                <CardContent class="p-4">
-                    <div class="flex items-center space-x-2">
-                        <MaterialIcon name="inventory_2" class="h-8 w-8" />
-                        <div>
-                            <p class="text-sm text-muted-foreground">3</p>
-                            <p class="text-sm text-muted-foreground">Total Productos</p>
-                        </div>
-                    </div>
-                </CardContent>
-            </Card>
-        </div>
-
-        <Card>
-            <CardHeader>
-                <CardTitle>Catálogo de Productos</CardTitle>
-            </CardHeader>
-            <CardContent>
-                <div class="flex items-center space-x-4 mb-6">
-                    <p>Buscador</p>
-                </div>
-
-                <Table v-if="models?.data" :columns="columns" :data="models?.data" :loading="false" :sortable="true"
-                    :pagination="pagination" emptyMessage="No hay productos disponibles">
-                    <template #cell-attributes="{ value }">
-                        <div class="flex gap-1 flex-wrap">
-                            <Badge v-for="(val, key) in value" :key="key" :dot="false">
-                                {{ key }}
-                            </Badge>
-                        </div>
-                    </template>
-                    <!-- Slot personalizado para la columna is_active -->
-                    <template #cell-is_active="{ value, row }">
-                        <Badge :color="value ? 'green' : 'red'">
-                            {{ value ? 'Activo' : 'Inactivo' }}
-                        </Badge>
-                    </template>
-                    <template #cell-actions="{ row }">
-                        <div class="flex space-x-2">
-                            <Button size="sm" color="info" variant="smooth" @click="showModal = true" :iconOnly="true">
-                                <MaterialIcon name="visibility" :size="16"/>
-                            </Button>
-                            <Button size="sm" color="warning" variant="smooth" @click="showModal = true" :iconOnly="true">
-                                <MaterialIcon name="edit" :size="16"/>
-                            </Button>
-                            <Button size="sm" color="danger" variant="smooth" @click="showModal = true" :iconOnly="true">
-                                <MaterialIcon name="delete" :size="16"/>
-                            </Button>
-                        </div>
-                    </template>
-                </Table>
-            </CardContent>
-        </Card>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Products/Modals/Show.vue b/src/pages/Products/Modals/Show.vue
deleted file mode 100644
index b4b163b..0000000
--- a/src/pages/Products/Modals/Show.vue
+++ /dev/null
@@ -1,342 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { getDateTime } from '@Controllers/DateController';
-import { viewTo, apiTo } from '../Module';
-import ProductService from '../services/ProductService';
-import Notify from '@Plugins/Notify';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Button     from '@Holos/Button/Button.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Servicios */
-const productService = new ProductService();
-const router = useRouter();
-
-/** Propiedades */
-const model    = ref(null);
-const loading  = ref(false);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-    emit('close');
-}
-
-/** Función para actualizar el estado del producto */
-async function toggleStatus(item) {
-    if (loading.value) return;
-    
-    const newStatus = !item.is_active;
-    
-    try {
-        loading.value = true;
-        
-        // Usar el servicio para actualizar el estado
-        await productService.updateStatus(item.id, newStatus);
-        
-        // Actualizar el modelo local
-        item.is_active = newStatus;
-        
-        // Notificación de éxito
-        const statusText = newStatus ? 'activado' : 'desactivado';
-        Notify.success(
-            `Producto "${item.code}" ${statusText} exitosamente`,
-            'Estado actualizado'
-        );
-        
-        // Emitir evento para recargar la lista principal si es necesario
-        emit('reload');
-        
-    } catch (error) {
-        console.error('Error actualizando estado:', error);
-        
-        // Manejo específico de errores según la estructura de tu API
-        let errorMessage = 'Error al actualizar el estado del producto';
-        let errorTitle = 'Error';
-        
-        if (error?.response?.data) {
-            const errorData = error.response.data;
-            
-            // Caso 1: Error con estructura específica de tu API
-            if (errorData.status === 'error') {
-                if (errorData.errors) {
-                    // Errores de validación - extraer el primer error
-                    const firstField = Object.keys(errorData.errors)[0];
-                    const firstError = errorData.errors[firstField];
-                    errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
-                    errorTitle = 'Error de validación';
-                } else if (errorData.message) {
-                    // Mensaje general del error
-                    errorMessage = errorData.message;
-                    errorTitle = 'Error del servidor';
-                }
-            }
-            // Caso 2: Otros formatos de error
-            else if (errorData.message) {
-                errorMessage = errorData.message;
-            }
-        } else if (error?.message) {
-            // Error genérico de la petición (red, timeout, etc.)
-            errorMessage = `Error de conexión: ${error.message}`;
-            errorTitle = 'Error de red';
-        }
-        
-        // Notificación de error
-        Notify.error(errorMessage, errorTitle);
-    } finally {
-        loading.value = false;
-    }
-}
-
-/** Función para editar producto */
-function editProduct() {
-    const editUrl = viewTo({ name: 'edit', params: { id: model.value.id } });
-    router.push(editUrl);
-    close();
-}
-
-/** Función para duplicar producto */
-async function duplicateProduct() {
-    if (loading.value) return;
-    
-    try {
-        loading.value = true;
-        
-        await productService.duplicate(model.value.id);
-        
-        Notify.success(
-            `Producto "${model.value.code}" duplicado exitosamente`,
-            'Producto duplicado'
-        );
-        
-        emit('reload');
-        close();
-        
-    } catch (error) {
-        console.error('Error duplicando producto:', error);
-        Notify.error('Error al duplicar el producto');
-    } finally {
-        loading.value = false;
-    }
-}
-
-/** Función para formatear atributos */
-const formatAttributesDisplay = (attributes) => {
-    if (!attributes || typeof attributes !== 'object') return [];
-    return Object.entries(attributes).map(([key, value]) => ({ key, value }));
-};
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.code"
-                :subtitle="model.name"
-            >
-                <div class="flex w-full flex-col">
-                    <div class="flex w-full justify-center items-center">
-                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
-                            <GoogleIcon 
-                                class="text-white text-3xl"
-                                name="inventory_2"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Header>
-            
-            <div class="flex w-full p-4 space-y-6">
-                <!-- Información básica -->
-                <div class="w-full space-y-6">
-                    <div class="flex items-start">
-                        <GoogleIcon 
-                            class="text-xl text-success mt-1"
-                            name="info"
-                        />
-                        <div class="pl-3 w-full">
-                            <p class="font-bold text-lg leading-none pb-3">
-                                {{ $t('details') }}
-                            </p>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div>
-                                    <p>
-                                        <b>{{ $t('code') }}: </b>
-                                        <code class="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
-                                            {{ model.code }}
-                                        </code>
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>SKU: </b>
-                                        <code class="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
-                                            {{ model.sku }}
-                                        </code>
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>{{ $t('name') }}: </b>
-                                        {{ model.name }}
-                                    </p>
-                                    <p class="mt-2" v-if="model.description">
-                                        <b>{{ $t('description') }}: </b>
-                                        {{ model.description }}
-                                    </p>
-                                </div>
-                                <div>
-                                    <p>
-                                        <b>{{ $t('status') }}: </b>
-                                        <Button
-                                            :variant="'smooth'"
-                                            :color="model.is_active ? 'success' : 'danger'"
-                                            :size="'sm'"
-                                            :loading="loading"
-                                            @click="toggleStatus(model)"
-                                        >
-                                            {{ model.is_active ? $t('Activo') : $t('Inactivo') }}
-                                        </Button>
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>{{ $t('created_at') }}: </b>
-                                        {{ getDateTime(model.created_at) }}
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>{{ $t('updated_at') }}: </b>
-                                        {{ getDateTime(model.updated_at) }}
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Atributos personalizados -->
-                    <div v-if="model.attributes && Object.keys(model.attributes).length > 0" class="pt-6 border-t border-gray-200 dark:border-gray-700">
-                        <div class="flex items-start">
-                            <GoogleIcon 
-                                class="text-xl text-warning mt-1"
-                                name="tune"
-                            />
-                            <div class="pl-3 w-full">
-                                <p class="font-bold text-lg leading-none pb-3">
-                                    {{ $t('Atributos Personalizados') }}
-                                </p>
-                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-                                    <div 
-                                        v-for="attr in formatAttributesDisplay(model.attributes)" 
-                                        :key="attr.key"
-                                        class="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"
-                                    >
-                                        <div class="flex-1">
-                                            <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">
-                                                {{ attr.key }}
-                                            </p>
-                                            <p class="font-semibold text-sm">
-                                                {{ attr.value }}
-                                            </p>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Clasificaciones -->
-                    <div v-if="(model.warehouse_classifications && model.warehouse_classifications.length > 0) || (model.comercial_classifications && model.comercial_classifications.length > 0)" class="pt-6 border-t border-gray-200 dark:border-gray-700">
-                        <div class="flex items-start">
-                            <GoogleIcon 
-                                class="text-xl text-primary mt-1"
-                                name="category"
-                            />
-                            <div class="pl-3 w-full">
-                                <p class="font-bold text-lg leading-none pb-3">
-                                    {{ $t('Clasificaciones') }}
-                                </p>
-                                
-                                <!-- Clasificaciones de Almacén -->
-                                <div v-if="model.warehouse_classifications && model.warehouse_classifications.length > 0" class="mb-4">
-                                    <p class="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-2">
-                                        Clasificaciones de Almacén
-                                    </p>
-                                    <div class="flex flex-wrap gap-2">
-                                        <span 
-                                            v-for="classification in model.warehouse_classifications" 
-                                            :key="'w-' + classification.id"
-                                            class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100"
-                                        >
-                                            <code class="mr-2 text-xs">{{ classification.code }}</code>
-                                            {{ classification.name }}
-                                        </span>
-                                    </div>
-                                </div>
-                                
-                                <!-- Clasificaciones Comerciales -->
-                                <div v-if="model.comercial_classifications && model.comercial_classifications.length > 0">
-                                    <p class="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-2">
-                                        Clasificaciones Comerciales
-                                    </p>
-                                    <div class="flex flex-wrap gap-2">
-                                        <span 
-                                            v-for="classification in model.comercial_classifications" 
-                                            :key="'c-' + classification.id"
-                                            class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100"
-                                        >
-                                            <code class="mr-2 text-xs">{{ classification.code }}</code>
-                                            {{ classification.name }}
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Acciones rápidas -->
-                    <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
-                        <div class="flex items-center justify-center gap-3">
-                            <Button
-                                :variant="'outline'"
-                                :color="'primary'"
-                                :loading="loading"
-                                @click="editProduct"
-                            >
-                                <GoogleIcon name="edit" class="mr-2" />
-                                {{ $t('crud.edit') }}
-                            </Button>
-                            
-                            <Button
-                                :variant="'outline'"
-                                :color="'info'"
-                                :loading="loading"
-                                @click="duplicateProduct"
-                            >
-                                <GoogleIcon name="content_copy" class="mr-2" />
-                                {{ $t('Duplicar') }}
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
diff --git a/src/pages/Products/Module.js b/src/pages/Products/Module.js
deleted file mode 100644
index d410ef1..0000000
--- a/src/pages/Products/Module.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`products.${name}`, params)
-const comercialTo = (name, params = {}) => route(`comercial-classifications.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
-    name: `admin.products.${name}`, params, query 
-})
-    
-// Obtener traducción del componente
-const transl = (str) => lang(`admin.products.${str}`)
-
-// Control de permisos
-const can = (permission) => hasPermission(`admin.products.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    comercialTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Products/a.jsx b/src/pages/Products/a.jsx
deleted file mode 100644
index 4bbb939..0000000
--- a/src/pages/Products/a.jsx
+++ /dev/null
@@ -1,300 +0,0 @@
-import { useState } from "react"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Badge } from "@/components/ui/badge"
-import { 
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { 
-  Plus, 
-  Search, 
-  Filter, 
-  Edit, 
-  Trash2,
-  Package,
-  MoreHorizontal
-} from "lucide-react"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-// Mock data
-const products = [
-  {
-    id: 1,
-    code: "PROD-001",
-    name: "Laptop Dell Inspiron 15",
-    description: "Laptop empresarial de alto rendimiento",
-    category: "Electrónicos > Computadoras",
-    brand: "Dell",
-    price: 15999.00,
-    stock: 45,
-    minStock: 10,
-    status: "active",
-    lastUpdated: "2024-01-15"
-  },
-  {
-    id: 2,
-    code: "PROD-002", 
-    name: "Mouse Inalámbrico Logitech",
-    description: "Mouse óptico inalámbrico con receptor USB",
-    category: "Electrónicos > Accesorios",
-    brand: "Logitech",
-    price: 599.00,
-    stock: 120,
-    minStock: 25,
-    status: "active",
-    lastUpdated: "2024-01-14"
-  },
-  {
-    id: 3,
-    code: "PROD-003",
-    name: "Monitor LG 24 pulgadas",
-    description: "Monitor LED Full HD con conexión HDMI",
-    category: "Electrónicos > Monitores",
-    brand: "LG",
-    price: 3299.00,
-    stock: 8,
-    minStock: 15,
-    status: "low-stock",
-    lastUpdated: "2024-01-13"
-  },
-  {
-    id: 4,
-    code: "PROD-004",
-    name: "Teclado Mecánico RGB",
-    description: "Teclado mecánico para gaming con iluminación RGB",
-    category: "Electrónicos > Accesorios",
-    brand: "Corsair",
-    price: 2199.00,
-    stock: 0,
-    minStock: 5,
-    status: "out-of-stock",
-    lastUpdated: "2024-01-12"
-  },
-  {
-    id: 5,
-    code: "PROD-005",
-    name: "Webcam HD Logitech",
-    description: "Cámara web HD para videoconferencias",
-    category: "Electrónicos > Accesorios",
-    brand: "Logitech",
-    price: 899.00,
-    stock: 32,
-    minStock: 10,
-    status: "active",
-    lastUpdated: "2024-01-11"
-  }
-]
-
-const getStatusBadge = (status: string, stock: number, minStock: number) => {
-  if (stock === 0) {
-    return <Badge variant="destructive">Sin Stock</Badge>
-  }
-  if (stock <= minStock) {
-    return <Badge className="bg-warning text-warning-foreground">Stock Bajo</Badge>
-  }
-  return <Badge className="bg-success text-success-foreground">Activo</Badge>
-}
-
-export default function Products() {
-  const [searchTerm, setSearchTerm] = useState("")
-  const [filteredProducts, setFilteredProducts] = useState(products)
-
-  const handleSearch = (term: string) => {
-    setSearchTerm(term)
-    const filtered = products.filter(product =>
-      product.name.toLowerCase().includes(term.toLowerCase()) ||
-      product.code.toLowerCase().includes(term.toLowerCase()) ||
-      product.brand.toLowerCase().includes(term.toLowerCase())
-    )
-    setFilteredProducts(filtered)
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-foreground">Productos</h1>
-          <p className="text-muted-foreground">
-            Gestión del catálogo de productos
-          </p>
-        </div>
-        <Button className="bg-primary hover:bg-primary-hover">
-          <Plus className="w-4 h-4 mr-2" />
-          Nuevo Producto
-        </Button>
-      </div>
-
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card>
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-2">
-              <Package className="w-8 h-8 text-primary" />
-              <div>
-                <p className="text-2xl font-bold text-metric-value">{products.length}</p>
-                <p className="text-sm text-muted-foreground">Total Productos</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center">
-                <span className="text-success-foreground font-bold text-sm">✓</span>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-success">
-                  {products.filter(p => p.status === "active").length}
-                </p>
-                <p className="text-sm text-muted-foreground">Activos</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 rounded-full bg-warning flex items-center justify-center">
-                <span className="text-warning-foreground font-bold text-sm">!</span>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-warning">
-                  {products.filter(p => p.status === "low-stock").length}
-                </p>
-                <p className="text-sm text-muted-foreground">Stock Bajo</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 rounded-full bg-destructive flex items-center justify-center">
-                <span className="text-destructive-foreground font-bold text-sm">×</span>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-destructive">
-                  {products.filter(p => p.status === "out-of-stock").length}
-                </p>
-                <p className="text-sm text-muted-foreground">Sin Stock</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Filters and Search */}
-      <Card>
-        <CardHeader>
-          <CardTitle>Catálogo de Productos</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-center space-x-4 mb-6">
-            <div className="relative flex-1 max-w-sm">
-              <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="Buscar productos..."
-                value={searchTerm}
-                onChange={(e) => handleSearch(e.target.value)}
-                className="pl-10"
-              />
-            </div>
-            <Button variant="outline">
-              <Filter className="w-4 h-4 mr-2" />
-              Filtros
-            </Button>
-          </div>
-
-          {/* Products Table */}
-          <div className="rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Código</TableHead>
-                  <TableHead>Producto</TableHead>
-                  <TableHead>Categoría</TableHead>
-                  <TableHead>Marca</TableHead>
-                  <TableHead>Precio</TableHead>
-                  <TableHead>Stock</TableHead>
-                  <TableHead>Estado</TableHead>
-                  <TableHead className="w-10"></TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredProducts.map((product) => (
-                  <TableRow key={product.id}>
-                    <TableCell className="font-mono text-sm">
-                      {product.code}
-                    </TableCell>
-                    <TableCell>
-                      <div>
-                        <p className="font-medium">{product.name}</p>
-                        <p className="text-sm text-muted-foreground">
-                          {product.description}
-                        </p>
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-sm">
-                      {product.category}
-                    </TableCell>
-                    <TableCell>{product.brand}</TableCell>
-                    <TableCell className="font-mono">
-                      ${product.price.toLocaleString('es-MX')}
-                    </TableCell>
-                    <TableCell>
-                      <div className="text-right">
-                        <p className="font-medium">{product.stock}</p>
-                        <p className="text-xs text-muted-foreground">
-                          Min: {product.minStock}
-                        </p>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      {getStatusBadge(product.status, product.stock, product.minStock)}
-                    </TableCell>
-                    <TableCell>
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="sm">
-                            <MoreHorizontal className="w-4 h-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem>
-                            <Edit className="w-4 h-4 mr-2" />
-                            Editar
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <Package className="w-4 h-4 mr-2" />
-                            Ver Stock
-                          </DropdownMenuItem>
-                          <DropdownMenuItem className="text-destructive">
-                            <Trash2 className="w-4 h-4 mr-2" />
-                            Eliminar
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/src/pages/Products/interfaces/products.interfaces.js b/src/pages/Products/interfaces/products.interfaces.js
deleted file mode 100644
index d8035c5..0000000
--- a/src/pages/Products/interfaces/products.interfaces.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Interfaces para Products
- * 
- * @author Sistema
- * @version 1.0.0
- */
-
-/**
- * @typedef {Object} Product
- * @property {number} id - ID del producto
- * @property {string} code - Código del producto
- * @property {string} sku - SKU del producto
- * @property {string} name - Nombre del producto
- * @property {string|null} description - Descripción del producto
- * @property {Object|null} attributes - Atributos dinámicos del producto (JSON)
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {string} created_at - Fecha de creación
- * @property {string} updated_at - Fecha de actualización
- * @property {string|null} deleted_at - Fecha de eliminación
- * @property {ProductClassification[]} classifications - Clasificaciones asociadas
- * @property {ProductClassification[]} warehouse_classifications - Clasificaciones de almacén
- * @property {ProductClassification[]} comercial_classifications - Clasificaciones comerciales
- */
-
-/**
- * @typedef {Object} ProductClassification
- * @property {number} id - ID de la clasificación
- * @property {string} code - Código de la clasificación
- * @property {string} name - Nombre de la clasificación
- * @property {string} type - Tipo de clasificación (warehouse/comercial)
- */
-
-/**
- * @typedef {Object} ProductResponse
- * @property {string} status - Estado de la respuesta
- * @property {Object} data - Datos de la respuesta
- * @property {string} data.message - Mensaje de la respuesta
- * @property {Product} data.product - Producto
- */
-
-/**
- * @typedef {Object} ProductsListResponse
- * @property {string} status - Estado de la respuesta
- * @property {Object} data - Datos de la respuesta
- * @property {Object} data.products - Lista de productos con paginación
- * @property {Product[]} data.products.data - Array de productos
- * @property {number} data.products.current_page - Página actual
- * @property {number} data.products.total - Total de productos
- */
-
-/**
- * @typedef {Object} CreateProductData
- * @property {string} code - Código del producto
- * @property {string} sku - SKU del producto
- * @property {string} name - Nombre del producto
- * @property {string|null} description - Descripción del producto
- * @property {Object|null} attributes - Atributos dinámicos (JSON)
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {number[]} warehouse_classification_ids - IDs de clasificaciones de almacén
- * @property {number[]} comercial_classification_ids - IDs de clasificaciones comerciales
- */
-
-/**
- * @typedef {Object} UpdateProductData
- * @property {string} [code] - Código del producto
- * @property {string} [sku] - SKU del producto
- * @property {string} [name] - Nombre del producto
- * @property {string|null} [description] - Descripción del producto
- * @property {Object|null} [attributes] - Atributos dinámicos (JSON)
- * @property {boolean} [is_active] - Estado activo/inactivo
- * @property {number[]} [warehouse_classification_ids] - IDs de clasificaciones de almacén
- * @property {number[]} [comercial_classification_ids] - IDs de clasificaciones comerciales
- */
-
-export {
-    Product,
-    ProductClassification,
-    ProductResponse,
-    ProductsListResponse,
-    CreateProductData,
-    UpdateProductData
-};
diff --git a/src/pages/Products/services/ProductService.js b/src/pages/Products/services/ProductService.js
deleted file mode 100644
index 4fb8c82..0000000
--- a/src/pages/Products/services/ProductService.js
+++ /dev/null
@@ -1,263 +0,0 @@
-/**
- * Servicio para Products
- * 
- * @author Sistema
- * @version 1.0.0
- */
-
-import { api, apiURL } from '@Services/Api';
-
-export default class ProductService {
-  
-  /**
-   * Obtener todos los productos
-   * @param {Object} params - Parámetros de la consulta
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getAll(params = {}) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('catalogs/products'), {
-        params,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Obtener un producto por ID
-   * @param {number} id - ID del producto
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getById(id) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL(`catalogs/products/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Crear un nuevo producto
-   * @param {Object} data - Datos del producto
-   * @param {string} data.code - Código del producto
-   * @param {string} data.sku - SKU del producto
-   * @param {string} data.name - Nombre del producto
-   * @param {string|null} data.description - Descripción del producto
-   * @param {Object|null} data.attributes - Atributos dinámicos
-   * @param {boolean} data.is_active - Estado activo/inactivo
-   * @param {number[]} data.warehouse_classification_ids - IDs de clasificaciones de almacén
-   * @param {number[]} data.comercial_classification_ids - IDs de clasificaciones comerciales
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async create(data) {
-    return new Promise((resolve, reject) => {
-      api.post(apiURL('catalogs/products'), {
-        data,
-        onSuccess: (response) => {
-          resolve(response);
-        },
-        onError: (error) => { reject(error); }
-      });
-    });
-  }
-
-  /**
-   * Actualizar un producto
-   * @param {number} id - ID del producto
-   * @param {Object} data - Datos a actualizar
-   * @param {string} [data.code] - Código del producto
-   * @param {string} [data.sku] - SKU del producto
-   * @param {string} [data.name] - Nombre del producto
-   * @param {string|null} [data.description] - Descripción del producto
-   * @param {Object|null} [data.attributes] - Atributos dinámicos
-   * @param {boolean} [data.is_active] - Estado activo/inactivo
-   * @param {number[]} [data.warehouse_classification_ids] - IDs de clasificaciones de almacén
-   * @param {number[]} [data.comercial_classification_ids] - IDs de clasificaciones comerciales
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async update(id, data) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`catalogs/products/${id}`), {
-        data,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Actualizar solo el estado de un producto
-   * @param {number} id - ID del producto
-   * @param {boolean} is_active - Nuevo estado
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async updateStatus(id, is_active) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`catalogs/products/${id}`), {
-        data: { is_active },
-        onSuccess: (response) => {
-          resolve(response);
-        },
-        onError: (error) => {
-          // Mejorar el manejo de errores
-          const enhancedError = {
-            ...error,
-            timestamp: new Date().toISOString(),
-            action: 'updateStatus',
-            id: id,
-            is_active: is_active
-          };
-          reject(enhancedError);
-        }
-      });
-    });
-  }
-
-  /**
-   * Eliminar un producto
-   * @param {number} id - ID del producto
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async delete(id) {
-    return new Promise((resolve, reject) => {
-      api.delete(apiURL(`catalogs/products/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Alternar el estado de un producto
-   * @param {Object} item - Objeto con el producto
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async toggleStatus(item) {
-    const newStatus = !item.is_active;
-    return this.updateStatus(item.id, newStatus);
-  }
-
-  /**
-   * Obtener clasificaciones disponibles para productos
-   * @param {string} type - Tipo de clasificación ('warehouse' o 'comercial')
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getClassifications(type = 'warehouse') {
-    return new Promise((resolve, reject) => {
-      const endpoint = type === 'warehouse' 
-        ? 'catalogs/warehouse-classifications' 
-        : 'comercial-classifications';
-      
-      api.get(apiURL(endpoint), {
-        onSuccess: (response) => {
-          // Aplanar la estructura jerárquica para selects
-          const flattenOptions = (items, level = 0) => {
-            let options = [];
-            items.forEach(item => {
-              options.push({
-                ...item,
-                label: '  '.repeat(level) + item.name,
-                value: item.id,
-                level
-              });
-              
-              if (item.children && item.children.length > 0) {
-                options = options.concat(flattenOptions(item.children, level + 1));
-              }
-            });
-            return options;
-          };
-
-          // Determinar la clave de datos según el tipo
-          const dataKey = type === 'warehouse' 
-            ? 'warehouse_classifications' 
-            : 'comercial_classifications';
-          
-          const data = response[dataKey]?.data || response.data || [];
-          const flatOptions = flattenOptions(data);
-          resolve(flatOptions);
-        },
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Obtener clasificaciones de almacén
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getWarehouseClassifications() {
-    return this.getClassifications('warehouse');
-  }
-
-  /**
-   * Obtener clasificaciones comerciales
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getComercialClassifications() {
-    return this.getClassifications('comercial');
-  }
-
-  /**
-   * Buscar productos con filtros avanzados
-   * @param {Object} filters - Filtros de búsqueda
-   * @param {string} [filters.search] - Búsqueda por nombre, código o SKU
-   * @param {boolean} [filters.is_active] - Filtrar por estado
-   * @param {number[]} [filters.warehouse_classification_ids] - Filtrar por clasificaciones de almacén
-   * @param {number[]} [filters.comercial_classification_ids] - Filtrar por clasificaciones comerciales
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async search(filters = {}) {
-    return this.getAll({ ...filters });
-  }
-
-  /**
-   * Exportar productos a formato específico
-   * @param {string} format - Formato de exportación (csv, excel, pdf)
-   * @param {Object} filters - Filtros aplicados
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async export(format = 'excel', filters = {}) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL(`catalogs/products/export/${format}`), {
-        params: filters,
-        responseType: 'blob',
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Duplicar un producto
-   * @param {number} id - ID del producto a duplicar
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async duplicate(id) {
-    return new Promise((resolve, reject) => {
-      api.post(apiURL(`catalogs/products/${id}/duplicate`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Validar si un código o SKU ya existe
-   * @param {string} field - Campo a validar ('code' o 'sku')
-   * @param {string} value - Valor a validar
-   * @param {number|null} excludeId - ID a excluir de la validación (para edición)
-   * @returns {Promise<boolean>} True si existe, false si no
-   */
-  async checkExists(field, value, excludeId = null) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('catalogs/products/check-exists'), {
-        params: { field, value, exclude_id: excludeId },
-        onSuccess: (response) => resolve(response.exists || false),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-}
diff --git a/src/pages/Profile/Notifications/Index.vue b/src/pages/Profile/Notifications/Index.vue
deleted file mode 100644
index fe38928..0000000
--- a/src/pages/Profile/Notifications/Index.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useSearcher } from '@Services/Api';
-
-import { getDateTime }    from '@Controllers/DateController.js';
-
-import SearcherHead from '@Holos/Searcher.vue';
-import Table        from '@Holos/Table.vue';
-import IconButton   from '@Holos/Button/Icon.vue';
-import DestroyModal from '@Holos/Modal/Template/Destroy.vue';
-import ShowModal    from '@Holos/Skeleton/Sidebar/Notification/Show.vue';
-
-/** Propiedades */
-const destroyModal = ref(null);
-const showModal    = ref(false);
-
-const models = ref([]);
-
-// Servicios
-const searcher = useSearcher({
-    url: route('system.notifications.all'),
-    onSuccess: (r) => models.value = r.models,
-    onError: () => models.value = []
-});
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>  
-
-<template>
-    <div>
-        <SearcherHead
-            :title="$t('notifications.title')"
-            @search="(x) => searcher.search(x)"
-        >
-            <IconButton
-                icon="refresh"
-                :title="$t('refresh')"
-                @click="searcher.search()"
-            />
-        </SearcherHead>
-        <div class="pt-2 w-full">
-            <Table 
-                :items="models"
-                @send-pagination="searcher.pagination"
-                :processing="searcher.processing"
-            >
-                <template #head>
-                    <th v-text="$t('title')" />
-                    <th v-text="$t('description')" />
-                    <th
-                        v-text="$t('date')"
-                        class="w-40 text-center"
-                    />
-                    <th
-                        v-text="$t('status')"
-                        class="w-32 text-center"
-                    />
-                    <th
-                        v-text="$t('actions')"
-                        class="w-32 text-center"
-                    />
-                </template>
-                <template #body="{items}">
-                    <tr v-for="model in items" class="table-row">
-                        <td class="table-cell border">
-                            {{ model.data.title }}
-                        </td>
-                        <td class="table-cell border">
-                            {{ model.data.description }}
-                        </td>
-                        <td class="table-cell border">
-                            {{ getDateTime(model.created_at) }}
-                        </td>
-                        <td class="table-cell border">
-                            <div class="flex items-center justify-center">
-                                <div class="w-2 h-2 rounded-full" :class="model.read_at ? 'bg-success' : 'bg-danger'"></div>
-                                <span class="ml-2">{{ model.read_at ? $t('readed') : (model.is_closed ? $t('omitted') : $t('unreaded')) }}</span>
-                            </div>
-                        </td>
-                        <td class="table-cell">
-                            <div class="table-actions">
-                                <IconButton
-                                    icon="visibility"
-                                    :title="$t('crud.show')"
-                                    @click="showModal.open(model)"
-                                    outline
-                                />
-                                <IconButton
-                                    icon="delete"
-                                    :title="$t('crud.destroy')"
-                                    @click="destroyModal.open(model)"
-                                    outline
-                                />
-                            </div>
-                        </td>
-                    </tr>
-                </template>
-                <template #empty>
-                    <td class="table-cell border">
-                        <div class="flex items-center text-sm">
-                            <p class="font-semibold">
-                                {{ $t('registers.empty') }}
-                            </p>
-                        </div>
-                    </td>
-                    <td class="table-cell border">-</td>
-                    <td class="table-cell border">-</td>
-                    <td class="table-cell border">-</td>
-                    <td class="table-cell border">-</td>
-                </template>
-            </Table>
-        </div>
-        
-        <ShowModal 
-            ref="showModal"
-            @reload="searcher.search()"
-        />
-        <DestroyModal
-            ref="destroyModal"
-            :to="(id) => route('system.notifications.destroy', { id })"
-            @update="searcher.search()"
-        />
-    </div>
-</template>
-    
\ No newline at end of file
diff --git a/src/pages/Profile/Notifications/Module.js b/src/pages/Profile/Notifications/Module.js
deleted file mode 100644
index 86268a9..0000000
--- a/src/pages/Profile/Notifications/Module.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`users.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.${name}`, params, query })
-
-// Obtener traducción del componente
-const transl = (str) => lang(`users.${str}`)
-
-// Determina si un usuario puede hacer algo no en base a los permisos
-const can = (permission) => hasPermission(`users.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Profile/Partials/DeleteUserForm.vue b/src/pages/Profile/Partials/DeleteUserForm.vue
deleted file mode 100644
index 2404f87..0000000
--- a/src/pages/Profile/Partials/DeleteUserForm.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script setup>
-import { ref }         from 'vue';
-import { useForm } from '@Services/Api';
-import { logout } from '@Services/Page';
-
-import ActionSection   from '@Holos/ActionSection.vue';
-import DangerButton    from '@Holos/Button/Danger.vue';
-import DialogModal     from '@Holos/Modal/Elements/Base.vue';
-import SecondaryButton from '@Holos/Button/Secondary.vue';
-import Input           from '@Holos/Form/Input.vue';
-
-const modalRef = ref(null);
-const passwordInput = ref(null);
-
-const form = useForm({
-    password: '',
-});
-
-const confirmUserDeletion = () => {
-    modalRef.value.open();
-
-    setTimeout(() => passwordInput.value.focus(), 250);
-};
-
-const deleteUser = () => {
-    form.delete(route('user.destroy'), {
-        preserveScroll: true,
-        onSuccess: () => {
-            modalRef.value.close();
-            logout();
-        },
-        onError: () => passwordInput.value.focus(),
-        onFinish: () => form.reset(),
-    });
-};
-
-const onCloseModal = () => {
-    form.reset();
-};
-</script>
-
-<template>
-    <ActionSection>
-        <template #title>
-            {{ $t('account.delete.title') }}
-        </template>
-
-        <template #description>
-            {{ $t('account.delete.description') }}
-        </template>
-
-        <template #content>
-            <div class="max-w-xl text-sm text-page-d/60 dark:text-page-dt/50">
-                {{ $t('account.delete.onDelete') }}
-            </div>
-
-            <div class="mt-5">
-                <DangerButton @click="confirmUserDeletion">
-                    {{ $t('account.delete.title') }}
-                </DangerButton>
-            </div>
-
-            <!-- Delete Account Confirmation Modal -->
-            <DialogModal
-                ref="modalRef"
-                @close="onCloseModal"
-            >
-                <template #title>
-                    {{ $t('account.delete.title') }}
-                </template>
-
-                <template #content>
-                    <div class="px-4 pb-2">
-                        <p>{{ $t('account.delete.confirm') }}</p>
-    
-                        <div class="mt-4">
-                            <Input
-                                ref="passwordInput"
-                                v-model="form.password"
-                                id="password"
-                                type="password"
-                                :onError="form.errors.password"
-                            />
-                        </div>
-
-                    </div>
-                </template>
-
-                <template #footer>
-                    <SecondaryButton @click="modalRef.close()">
-                        {{ $t('cancel') }}
-                    </SecondaryButton>
-
-                    <DangerButton
-                        class="ms-3"
-                        :class="{ 'opacity-25': form.processing }"
-                        :disabled="form.processing"
-                        @click="deleteUser"
-                    >
-                        {{ $t('account.delete.title') }}
-                    </DangerButton>
-                </template>
-            </DialogModal>
-        </template>
-    </ActionSection>
-</template>
diff --git a/src/pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/src/pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
deleted file mode 100644
index 04949b8..0000000
--- a/src/pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useForm } from '@Services/Api';
-
-import ActionSection   from '@Holos/ActionSection.vue';
-import DialogModal     from '@Holos/Modal/Elements/Base.vue';
-import PrimaryButton   from '@Holos/Button/Primary.vue';
-import SecondaryButton from '@Holos/Button/Secondary.vue';
-import Input           from '@Holos/Form/Input.vue';
-
-defineProps({
-    sessions: {
-        type: Array,
-        default: () => [],
-    },
-});
-
-const confirmingLogout = ref(false);
-const passwordInput = ref(null);
-
-const form = useForm({
-    password: '',
-});
-
-const confirmLogout = () => {
-    confirmingLogout.value = true;
-
-    setTimeout(() => passwordInput.value.focus(), 250);
-};
-
-const logoutOtherBrowserSessions = () => {
-    form.delete(route('other-browser-sessions.destroy'), {
-        preserveScroll: true,
-        onSuccess: () => {
-            form.reset();
-            Notify.success(Lang('account.sessions.done'));
-        },
-        onError: () => passwordInput.value.focus(),
-        onFinish: () => form.reset(),
-    });
-};
-
-const closeModal = () => {
-    confirmingLogout.value = false;
-
-    form.reset();
-};
-</script>
-
-<template>
-    <ActionSection>
-        <template #title>
-            {{ $t('account.sessions.title') }}
-        </template>
-
-        <template #description>
-            {{ $t('account.sessions.description') }}
-        </template>
-
-        <template #content>
-            <div class="max-w-xl text-sm text-page-d/60 dark:text-page-dt/50">
-                {{ $t('account.sessions.onLogout') }}
-            </div>
-
-            <!-- Other Browser Sessions -->
-            <div v-if="sessions.length > 0" class="mt-5 space-y-6">
-                <div v-for="(session, i) in sessions" :key="i" class="flex items-center">
-                    <div>
-                        <svg v-if="session.agent.is_desktop" class="w-8 h-8 text-primary-d dark:text-primary-dt" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
-                        </svg>
-
-                        <svg v-else class="w-8 h-8 text-primary-d dark:text-primary-dt" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
-                        </svg>
-                    </div>
-
-                    <div class="ms-3">
-                        <div class="text-sm text-page-d/60 dark:text-page-dt/50">
-                            {{ session.agent.platform ? session.agent.platform : $t('unknown') }} - {{ session.agent.browser ? session.agent.browser : $t('unknown') }}
-                        </div>
-
-                        <div>
-                            <div class="text-xs text-page-d/60 dark:text-page-dt/50">
-                                {{ session.ip_address }},
-
-                                <span v-if="session.is_current_device" class="text-success dark:text-success-d font-semibold">{{ $t('account.sessions.this') }}</span>
-                                <span v-else>{{ $t('account.sessions.last') }} {{ session.last_active }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex items-center mt-5">
-                <PrimaryButton @click="confirmLogout">
-                    {{ $t('account.sessions.logout') }}
-                </PrimaryButton>
-            </div>
-
-            <!-- Log Out Other Devices Confirmation Modal -->
-            <DialogModal :show="confirmingLogout" @close="closeModal">
-                <template #title>
-                    {{ $t('account.sessions.logout') }}
-                </template>
-
-                <template #content>
-                    {{ $t('account.sessions.confirm') }}
-
-                    <div class="mt-4">
-                        <Input
-                            ref="passwordInput"
-                            v-model="form.password"
-                            id="password"
-                            type="password"
-                            :onError="form.errors.password"
-                        />
-                    </div>
-                </template>
-
-                <template #footer>
-                    <SecondaryButton @click="closeModal">
-                        {{ $t('cancel') }}
-                    </SecondaryButton>
-
-                    <PrimaryButton
-                        class="ms-3"
-                        :class="{ 'opacity-25': form.processing }"
-                        :disabled="form.processing"
-                        @click="logoutOtherBrowserSessions"
-                    >
-                        {{ $t('account.sessions.logout') }}
-                    </PrimaryButton>
-                </template>
-            </DialogModal>
-        </template>
-    </ActionSection>
-</template>
diff --git a/src/pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/src/pages/Profile/Partials/TwoFactorAuthenticationForm.vue
deleted file mode 100644
index 6eeedeb..0000000
--- a/src/pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<script setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import { api, useForm } from '@Services/Api';
-
-import ActionSection    from '@Holos/ActionSection.vue';
-import ConfirmsPassword from '@Holos/ConfirmsPassword.vue';
-import DangerButton     from '@Holos/Button/Danger.vue';
-import PrimaryButton    from '@Holos/Button/Primary.vue';
-import SecondaryButton  from '@Holos/Button/Secondary.vue';
-import Input            from '@Holos/Form/Input.vue';
-
-const props = defineProps({
-    requiresConfirmation: {
-        type: Boolean,
-        default: false,
-    },
-});
-
-const enabling = ref(false);
-const confirming = ref(false);
-const disabling = ref(false);
-const qrCode = ref(null);
-const setupKey = ref(null);
-const recoveryCodes = ref([]);
-const user = ref(null);
-
-const confirmationForm = useForm({
-    code: '',
-});
-
-const twoFactorEnabled = computed(
-    () => ! enabling.value && user.value?.two_factor_secret,
-);
-
-watch(twoFactorEnabled, () => {
-    if (! twoFactorEnabled.value) {
-        confirmationForm.reset();
-    }
-});
-
-const enableTwoFactorAuthentication = () => {
-    enabling.value = true;
-
-    api.post(route('two-factor.enable'), {
-        onSuccess: () => Promise.all([
-            showQrCode(),
-            showSetupKey(),
-            showRecoveryCodes(),
-        ]),
-        onFinish: () => {
-            enabling.value = false;
-            confirming.value = props.requiresConfirmation;
-        },
-    });
-};
-
-const showQrCode = () => {
-    return axios.get(route('two-factor.qr-code')).then(response => {
-        qrCode.value = response.data.svg;
-    });
-};
-
-const showSetupKey = () => {
-    return axios.get(route('two-factor.secret-key')).then(response => {
-        setupKey.value = response.data.secretKey;
-    });
-}
-
-const showRecoveryCodes = () => {
-    return axios.get(route('two-factor.recovery-codes')).then(response => {
-        recoveryCodes.value = response.data;
-    });
-};
-
-const confirmTwoFactorAuthentication = () => {
-    confirmationForm.post(route('two-factor.confirm'), {
-        errorBag: "confirmTwoFactorAuthentication",
-        preserveScroll: true,
-        preserveState: true,
-        onSuccess: () => {
-            confirming.value = false;
-            qrCode.value = null;
-            setupKey.value = null;
-        },
-    });
-};
-
-const regenerateRecoveryCodes = () => {
-    axios
-        .post(route('two-factor.recovery-codes'))
-        .then(() => showRecoveryCodes());
-};
-
-const disableTwoFactorAuthentication = () => {
-    disabling.value = true;
-
-    api.delete(route('two-factor.disable'), {
-        preserveScroll: true,
-        onSuccess: () => {
-            disabling.value = false;
-            confirming.value = false;
-        },
-    });
-};
-
-onMounted(() => {
-    api.get(route('user.show'), {
-        onSuccess: (r) => {
-            user.value = r.user;
-        }
-    });
-});
-</script>
-
-<template>
-    <ActionSection>
-        <template #title>
-            {{ $t('account.twoFactor.title') }}
-        </template>
-
-        <template #description>
-            {{ $t('account.twoFactor.description') }}
-        </template>
-
-        <template #content>
-            <h3 v-if="twoFactorEnabled && ! confirming" class="text-lg font-medium">
-                {{ $t('account.twoFactor.isEnable') }}
-            </h3>
-
-            <h3 v-else-if="twoFactorEnabled && confirming" class="text-lg font-medium">
-                {{ $t('account.twoFactor.onFinish') }}
-            </h3>
-
-            <h3 v-else class="text-lg font-medium">
-                {{ $t('account.twoFactor.isNotEnable.title') }}
-            </h3>
-
-            <div class="mt-3 max-w-xl text-sm text-page-d/60 dark:text-page-dt/50">
-                <p>
-                    {{ $t('account.twoFactor.isNotEnable.description') }}
-                </p>
-            </div>
-
-            <div v-if="twoFactorEnabled">
-                <div v-if="qrCode">
-                    <div class="mt-4 max-w-xl text-sm text-page-d/60 dark:text-page-dt/50">
-                        <p v-if="confirming" class="font-semibold">
-                            {{ $t('account.twoFactor.qr.onConfirmed') }}
-                        </p>
-
-                        <p v-else>
-                            {{ $t('account.twoFactor.qr.isConfirmed') }}
-                        </p>
-                    </div>
-
-                    <div class="mt-4 p-2 inline-block bg-white" v-html="qrCode" />
-
-                    <div v-if="setupKey" class="mt-4 max-w-xl text-sm text-page-d/60 dark:text-page-dt/50">
-                        <p class="font-semibold">
-                            {{ $t('account.twoFactor.key') }}: <span v-html="setupKey"></span>
-                        </p>
-                    </div>
-
-                    <div v-if="confirming" class="mt-4">
-                        <Input
-                            v-model="confirmationForm.code"
-                            id="code"
-                            inputmode="numeric"
-                            :onError="confirmationForm.errors.code"
-                            @keyup.enter="confirmTwoFactorAuthentication"
-                        />
-                    </div>
-                </div>
-
-                <div v-if="recoveryCodes.length > 0 && ! confirming">
-                    <div class="mt-4 max-w-xl text-sm text-page-d/60 dark:text-page-dt/50">
-                        <p class="font-semibold">
-                            {{ $t('account.twoFactor.codes.store') }}
-                        </p>
-                    </div>
-
-                    <div class="grid gap-1 max-w-xl mt-4 px-4 py-4 font-mono text-sm bg-primary dark:bg-primary-d rounded-lg">
-                        <div v-for="code in recoveryCodes" :key="code">
-                            {{ code }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="mt-5">
-                <div v-if="! twoFactorEnabled">
-                    <ConfirmsPassword @confirmed="enableTwoFactorAuthentication">
-                        <PrimaryButton type="button" :class="{ 'opacity-25': enabling }" :disabled="enabling">
-                            {{ $t('enable') }}
-                        </PrimaryButton>
-                    </ConfirmsPassword>
-                </div>
-
-                <div v-else>
-                    <ConfirmsPassword @confirmed="confirmTwoFactorAuthentication">
-                        <PrimaryButton
-                            v-if="confirming"
-                            type="button"
-                            class="me-3"
-                            :class="{ 'opacity-25': enabling }"
-                            :disabled="enabling"
-                        >
-                            {{ $t('confirm') }}
-                        </PrimaryButton>
-                    </ConfirmsPassword>
-
-                    <ConfirmsPassword @confirmed="regenerateRecoveryCodes">
-                        <SecondaryButton
-                            v-if="recoveryCodes.length > 0 && ! confirming"
-                            class="me-3"
-                        >
-                            {{ $t('account.twoFactor.codes.regenerate') }}
-                        </SecondaryButton>
-                    </ConfirmsPassword>
-
-                    <ConfirmsPassword @confirmed="showRecoveryCodes">
-                        <SecondaryButton
-                            v-if="recoveryCodes.length === 0 && ! confirming"
-                            class="me-3"
-                        >
-                            {{ $t('account.twoFactor.codes.show') }}
-                        </SecondaryButton>
-                    </ConfirmsPassword>
-
-                    <ConfirmsPassword @confirmed="disableTwoFactorAuthentication">
-                        <SecondaryButton
-                            v-if="confirming"
-                            :class="{ 'opacity-25': disabling }"
-                            :disabled="disabling"
-                        >
-                            {{ $t('cancel') }}
-                        </SecondaryButton>
-                    </ConfirmsPassword>
-
-                    <ConfirmsPassword @confirmed="disableTwoFactorAuthentication">
-                        <DangerButton
-                            v-if="! confirming"
-                            :class="{ 'opacity-25': disabling }"
-                            :disabled="disabling"
-                        >
-                            {{ $t('disable') }}
-                        </DangerButton>
-                    </ConfirmsPassword>
-                </div>
-            </div>
-        </template>
-    </ActionSection>
-</template>
diff --git a/src/pages/Profile/Partials/UpdatePasswordForm.vue b/src/pages/Profile/Partials/UpdatePasswordForm.vue
deleted file mode 100644
index f763818..0000000
--- a/src/pages/Profile/Partials/UpdatePasswordForm.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useForm } from '@Services/Api';
-
-import FormSection   from '@Holos/FormSection.vue';
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-
-const passwordInput = ref(null);
-const currentPasswordInput = ref(null);
-
-const form = useForm({
-    current_password: '',
-    password: '',
-    password_confirmation: '',
-});
-
-const updatePassword = () => {
-    form.put(route('user.password'), {
-        onSuccess: () => {
-            form.reset();
-            Notify.success(Lang('account.password.updated'));
-        },
-        onError: (e) => {
-            if (form.errors.password) {
-                form.reset('password', 'password_confirmation');
-                passwordInput.value.focus();
-            }
-
-            if (form.errors.current_password) {
-                form.reset('current_password');
-                currentPasswordInput.value.focus();
-            }
-        },
-    });
-};
-</script>
-
-<template>
-    <FormSection @submitted="updatePassword">
-        <template #title>
-            {{ $t('account.password.update') }}
-        </template>
-
-        <template #description>
-            {{ $t('account.password.description') }}
-        </template>
-
-        <template #form>
-            <div class="col-span-6 sm:col-span-4">
-                <Input
-                    v-model="form.current_password"
-                    id="passwordCurrent"
-                    type="password"
-                    :onError="form.errors.current_password"
-                    required
-                />
-            </div>
-
-            <div class="col-span-6 sm:col-span-4">
-                <Input
-                    v-model="form.password"
-                    id="password"
-                    type="password"
-                    :onError="form.errors.password"
-                    required
-                />
-            </div>
-
-            <div class="col-span-6 sm:col-span-4">
-                <Input
-                    v-model="form.password_confirmation"
-                    id="passwordConfirmation"
-                    type="password"
-                    :onError="form.errors.password_confirmation"
-                    required
-                />
-            </div>
-        </template>
-
-        <template #actions>
-            <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                {{ $t('save') }}
-            </PrimaryButton>
-        </template>
-    </FormSection>
-</template>
diff --git a/src/pages/Profile/Partials/UpdateProfileInformationForm.vue b/src/pages/Profile/Partials/UpdateProfileInformationForm.vue
deleted file mode 100644
index dfe9514..0000000
--- a/src/pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { api, useForm } from '@Services/Api';
-import { reloadUser } from '@Services/Page';
-import FormSection     from '@Holos/FormSection.vue';
-import Input           from '@Holos/Form/Input.vue';
-import Error           from '@Holos/Form/Elements/Error.vue';
-import Label           from '@Holos/Form/Elements/Label.vue';
-import PrimaryButton   from '@Holos/Button/Primary.vue';
-import SecondaryButton from '@Holos/Button/Secondary.vue';
-
-/** Propiedades */
-const form = useForm({
-    _method: 'PUT',
-    name: '',
-    paternal: '',
-    maternal: '',
-    phone: '',
-    email: '',
-    photo: null,
-});
-
-const photoInput   = ref(null);
-const photoPreview = ref(null);
-
-/** Métodos */
-const updateProfileInformation = () => {
-    if (photoInput.value) {
-        form.photo = photoInput.value.files[0];
-    }
-
-   form.post(route('user.update'), {
-        onFinish: () => {
-            reloadUser();
-            clearPhotoFileInput();
-        }
-    });
-
-    Notify.success(Lang('account.profile.updated'));
-};
-
-const selectNewPhoto = () => {
-    photoInput.value.click();
-};
-
-const updatePhotoPreview = () => {
-    const photo = photoInput.value.files[0];
-
-    if (! photo) return;
-
-    const reader = new FileReader();
-
-    reader.onload = (e) => {
-        photoPreview.value = e.target.result;
-    };
-
-    reader.readAsDataURL(photo);
-};
-
-const deletePhoto = () => {
-    api.delete(route('user.photo'), {
-        onFinish: () => {
-            photoPreview.value = null;
-            reloadUser();
-            clearPhotoFileInput();
-        }
-    });
-};
-
-const clearPhotoFileInput = () => {
-    if (photoInput.value?.value) {
-        photoInput.value.value = null;
-    }
-};
-
-onMounted(() => {
-    api.get(route('user.show'), {
-        onSuccess: (r) => {
-            form.fill(r.user);
-        }
-    });
-});
-</script>
-
-<template>
-    <FormSection @submitted="updateProfileInformation">
-        <template #title>
-            {{ $t('account.profile.title') }}
-        </template>
-
-        <template #description>
-            {{ $t('account.profile.description') }}
-        </template>
-
-        <template #form>
-            <!-- Profile Photo -->
-            <div v-if="$page.user" class="col-span-6 sm:col-span-4">
-                <!-- Profile Photo File Input -->
-                <input
-                    id="photo"
-                    ref="photoInput"
-                    type="file"
-                    class="hidden"
-                    @change="updatePhotoPreview"
-                >
-
-                <Label
-                    id="photo"
-                    title="photo.title"
-                />
-
-                <!-- Current Profile Photo -->
-                <div v-show="! photoPreview" class="mt-2">
-                    <img :src="$page.user.profile_photo_url" :alt="$page.user.name" class="rounded-full h-20 w-20 object-cover">
-                </div>
-
-                <!-- New Profile Photo Preview -->
-                <div v-show="photoPreview" class="mt-2">
-                    <span
-                        class="block rounded-full w-20 h-20 bg-cover bg-no-repeat bg-center"
-                        :style="'background-image: url(\'' + photoPreview + '\');'"
-                    />
-                </div>
-
-                <SecondaryButton class="mt-2 me-2" type="button" @click.prevent="selectNewPhoto">
-                    {{ $t('photo.new') }}
-                </SecondaryButton>
-
-                <SecondaryButton
-                    v-if="$page.user.profile_photo_path"
-                    type="button"
-                    class="mt-2"
-                    @click.prevent="deletePhoto"
-                >
-                    {{ $t('photo.remove') }}
-                </SecondaryButton>
-
-                <Error :onError="form.errors.photo" class="mt-2" />
-            </div>
-
-            <!-- Name -->
-            <div class="col-span-6 sm:col-span-4">
-                <Input
-                    v-model="form.name"
-                    id="name"
-                    :onError="form.errors.name"
-                    required
-                />
-            </div>
-            <div class="col-span-6 sm:col-span-4">
-                <Input
-                    v-model="form.paternal"
-                    id="paternal"
-                    :onError="form.errors.paternal"
-                    required
-                />
-            </div>
-            <div class="col-span-6 sm:col-span-4">
-                <Input
-                    v-model="form.maternal"
-                    id="maternal"
-                    :onError="form.errors.maternal"
-                />
-            </div>
-            <div class="col-span-6 sm:col-span-4">
-                <Input
-                    v-model="form.phone"
-                    id="phone"
-                    :onError="form.errors.phone"
-                />
-            </div>
-
-            <!-- Email -->
-            <div class="col-span-6 sm:col-span-4">
-                <Input
-                    v-model="form.email"
-                    id="email"
-                    title="email.title"
-                    type="email"
-                    :onError="form.errors.email"
-                    required
-                />
-            </div>
-        </template>
-
-        <template #actions>
-            <PrimaryButton :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
-                {{ $t('save') }}
-            </PrimaryButton>
-        </template>
-    </FormSection>
-</template>
diff --git a/src/pages/Profile/Show.vue b/src/pages/Profile/Show.vue
deleted file mode 100644
index fdaedd3..0000000
--- a/src/pages/Profile/Show.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup>
-import SectionBorder                  from '@Holos/SectionBorder.vue';
-import DeleteUserForm                 from '@Pages/Profile/Partials/DeleteUserForm.vue';
-import TwoFactorAuthenticationForm    from '@Pages/Profile/Partials/TwoFactorAuthenticationForm.vue';
-import UpdatePasswordForm             from '@Pages/Profile/Partials/UpdatePasswordForm.vue';
-import UpdateProfileInformationForm   from '@Pages/Profile/Partials/UpdateProfileInformationForm.vue';
-import LogoutOtherBrowserSessionsForm from '@Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue';
-import PageHeader                     from '@Holos/PageHeader.vue';
-
-defineProps({
-    confirmsTwoFactorAuthentication: Boolean,
-    sessions: Array,
-});
-</script>
-
-<template>
-    <PageHeader :title="$t('profile')" />
-    <div>
-        <div>
-            <UpdateProfileInformationForm :user="$page.user" />
-            <SectionBorder />
-        </div>
-        <div>
-            <UpdatePasswordForm class="mt-10 sm:mt-0" />
-            <SectionBorder />
-        </div>
-        <!-- <div>
-            <TwoFactorAuthenticationForm
-                :requires-confirmation="confirmsTwoFactorAuthentication"
-                class="mt-10 sm:mt-0"
-            />
-            <SectionBorder />
-        </div> -->
-        <!-- <LogoutOtherBrowserSessionsForm :sessions="sessions" class="mt-10 sm:mt-0" /> -->
-        <SectionBorder />
-        <DeleteUserForm class="mt-10 sm:mt-0" />
-    </div>
-</template>
diff --git a/src/pages/Render.vue b/src/pages/Render.vue
deleted file mode 100644
index a0039dd..0000000
--- a/src/pages/Render.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-    <span class="font-google-icon-outlined">home</span>
-    <span class="font-google-icon-outlined-fill">home</span>
-    <span class="font-google-icon-rounded">home</span>
-    <span class="font-google-icon-rounded-fill">home</span>
-    <span class="font-google-icon-sharp">home</span>
-    <span class="font-google-icon-sharp-fill w-64">home</span>
-    <p class="hover:bg-primary/70 w-12"></p>
-    <p class="bg-secondary"></p>
-    <p class="hover:bg-primary/80 dark:hover:bg-primary-d/80"></p>
-    <p class="bg-secondary-d"></p>
-    <p class="bg-danger border-danger"></p>
-</template>
\ No newline at end of file
diff --git a/src/pages/TermsOfService.vue b/src/pages/TermsOfService.vue
deleted file mode 100644
index 2b7b6c8..0000000
--- a/src/pages/TermsOfService.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup>
-import Layout from '@Holos/Layout/TermsLayout.vue';
-
-/** Propiedades */
-defineProps({
-    terms: String,
-});
-</script>
-
-<template>
-    <Layout title="Terms of Service">
-        <div class="w-full overflow-hidden sm:rounded-lg prose" v-html="terms" />
-    </Layout>
-</template>
diff --git a/src/pages/UnitsMeasure/Create.vue b/src/pages/UnitsMeasure/Create.vue
deleted file mode 100644
index 5c0a6ba..0000000
--- a/src/pages/UnitsMeasure/Create.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute, RouterLink } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import GoogleIcon      from '@Shared/GoogleIcon.vue';
-import Form            from './Form.vue'
-
-/** Definidores */
-const router = useRouter();
-const route = useRoute();
-
-/** Propiedades */
-const form = useForm({
-    code: '',
-    name: '',
-    abbreviation: '',
-    type: 4, // Unidad por defecto
-    is_active: true
-});
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        type: data.type?.value || data.type, // Extraer solo el value si es objeto, sino usar tal como está
-        is_active: data.is_active ? 1 : 0 // Convertir boolean a número
-    })).post(apiTo('store'), {
-        onSuccess: () => {
-            Notify.success('Unidad de medida creada con éxito')
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-
-/** Ciclos */
-onMounted(() => {
-    // Inicialización si es necesaria
-});
-</script>
-<template>
-    <PageHeader
-        :title="transl('create.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <Form
-        action="create"
-        :form="form"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/UnitsMeasure/Edit.vue b/src/pages/UnitsMeasure/Edit.vue
deleted file mode 100644
index d18fd41..0000000
--- a/src/pages/UnitsMeasure/Edit.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo, transl } from './Module';
-import UnitsMeasureService from './services/UnitsMeasureService';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import GoogleIcon      from '@Shared/GoogleIcon.vue';
-import Form            from './Form.vue'
-
-/** Definiciones */
-const vroute = useRoute();
-const router = useRouter();
-const unitsService = new UnitsMeasureService();
-
-/** Propiedades */
-const form = useForm({
-    id: null,
-    code: '',
-    name: '',
-    abbreviation: '',
-    type: 4,
-    is_active: true
-});
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        type: data.type?.value || data.type, // Extraer solo el value si es objeto, sino usar tal como está
-        is_active: data.is_active ? 1 : 0 // Convertir boolean a número
-    })).put(apiTo('update', { units_of_measure: form.id }), {
-        onSuccess: () => {
-            Notify.success(lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        },
-    })
-}
-
-function loadData() {
-    api.get(apiTo('show', { units_of_measure: vroute.params.id }), {
-        onSuccess: async (r) => {
-            const data = r.data || r.units_of_measure || r;
-
-            console.log(data);
-            
-            // Cargar los tipos para convertir el número a objeto
-            try {
-                const typeOptions = await unitsService.getUnitTypes();
-                const selectedType = typeOptions.find(option => option.id == data.type) || { value: data.type, label: data.name };
-                console.log('Tipos disponibles:', selectedType);
-                
-                form.fill({
-                    id: data.units.id,
-                    code: data.units.code,
-                    name: data.units.name,
-                    abbreviation: data.units.abbreviation,
-                    type: selectedType, // Convertir a objeto {value, label}
-                    is_active: Boolean(data.is_active)
-                });
-            } catch (error) {
-                console.error('Error cargando tipos:', error);
-                // Fallback: usar solo el valor numérico
-                form.fill({
-                    id: data.units.id,
-                    code: data.units.code,
-                    name: data.units.name,
-                    abbreviation: data.units.abbreviation,
-                    type: data.type,
-                    is_active: Boolean(data.is_active)
-                });
-            }
-        }
-    })
-}
-
-/** Ciclos */
-onMounted(() => {
-    loadData();
-});
-</script>
-
-<template>
-    <PageHeader
-        :title="transl('update.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <Form
-        action="update"
-        :form="form"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/UnitsMeasure/Form.vue b/src/pages/UnitsMeasure/Form.vue
deleted file mode 100644
index 7e3f0bb..0000000
--- a/src/pages/UnitsMeasure/Form.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup>
-import { ref, onMounted } from 'vue';
-import { transl } from './Module';
-import UnitsMeasureService from './services/UnitsMeasureService';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import Selectable    from '@Holos/Form/Selectable.vue';
-import Checkbox      from '@Holos/Checkbox.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Servicios */
-const unitsService = new UnitsMeasureService();
-
-/** Propiedades reactivas */
-const typeOptions = ref([]);
-const loadingTypes = ref(true);
-
-/** Propiedades */
-defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object
-})
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-
-/** Cargar tipos de medida desde la API */
-async function loadUnitTypes() {
-    try {
-        loadingTypes.value = true;
-        typeOptions.value = await unitsService.getUnitTypes();
-    } catch (error) {
-        console.error('Error cargando tipos de medida:', error);
-        // Usar tipos por defecto en caso de error
-        const fallbackTypes = unitsService.getTypes().map(type => ({
-            value: type.id,
-            label: type.name
-        }));
-        typeOptions.value = fallbackTypes;
-    } finally {
-        loadingTypes.value = false;
-    }
-}
-
-/** Ciclo de vida */
-onMounted(() => {
-    loadUnitTypes();
-});
-</script>
-
-<template>
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl(`form.${action}.description`)" />
-    </div>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <Input
-                v-model="form.code"
-                id="code"
-                :onError="form.errors.code"
-                autofocus
-                required
-            />
-            <Input
-                v-model="form.name"
-                id="name"
-                :onError="form.errors.name"
-                required
-            />
-            <Input
-                v-model="form.abbreviation"
-                id="Abreviación"
-                :onError="form.errors.abbreviation"
-                required
-            />
-
-            <Selectable
-                v-model="form.type"
-                id="type"
-                title="Tipo de medida"
-                label="label"
-                :onError="form.errors.type"
-                :options="typeOptions"
-                :disabled="loadingTypes"
-                required
-            />
-           
-            <div class="md:col-span-2 lg:col-span-3 xl:col-span-4">
-                <PrimaryButton
-                    :loading="form.processing"
-                    :disabled="form.processing"
-                >
-                    Crear unidad de medida
-                </PrimaryButton>
-            </div>
-        </form>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/UnitsMeasure/Index.vue b/src/pages/UnitsMeasure/Index.vue
deleted file mode 100644
index 0d66f19..0000000
--- a/src/pages/UnitsMeasure/Index.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, RouterLink } from 'vue-router';
-import { useSearcher } from '@Services/Api';
-import { hasPermission } from '@Plugins/RolePermission';
-import { can, apiTo, viewTo, transl } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead from '@Holos/Searcher.vue';
-import Table from '@Holos/Table.vue';
-import ShowView from './Modals/Show.vue';
-
-/** Propiedades */
-const models = ref([]);
-const router = useRouter();
-
-/** Referencias */
-const showModal = ref(null);
-const destroyModal = ref(null);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.units_of_measure,
-    onError: () => models.value = []
-});
-
-/** Función para eliminar */
-const deleteItem = (item) => {
-    destroyModal.value.open(item);
-};
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <div>
-        <SearcherHead :title="transl('name')" @search="(x) => searcher.search(x)">
-            <RouterLink :to="viewTo({ name: 'create' })">
-                <!-- v-if="can('create')" -->
-                <IconButton class="text-white" icon="add" :title="$t('crud.create')" filled />
-            </RouterLink>
-            <IconButton icon="refresh" :title="$t('refresh')" @click="searcher.search()" />
-        </SearcherHead>
-        <div class="pt-2 w-full">
-            <Table :items="models" :processing="searcher.processing"
-                @send-pagination="(page) => searcher.pagination(page)">
-                <template #head>
-                    <th v-text="$t('code')" />
-                    <th v-text="$t('Abreviatura')" />
-                    <th v-text="$t('Unidad de medida')" />
-
-                    <th v-text="$t('Tipo de unidad')" />
-                    <th v-text="$t('Estado')" class="w-20 text-center" />
-                    <th v-text="$t('Acciones')" class="w-64 text-center" />
-                </template>
-                <template #body="{ items }">
-                    <tr v-for="model in items" :key="model.id" class="table-row">
-                        <td class="table-cell">
-                            <code class="font-mono text-sm text-gray-900 dark:text-gray-100">
-                                {{ model.code }}
-                            </code>
-                        </td>
-
-                        <td class="table-cell">
-                            <span
-                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
-                                {{ model.abbreviation }}
-                            </span>
-                        </td>
-                        <td class="table-cell">
-                            <span class="font-semibold">{{ model.name }}</span>
-                        </td>
-                        <td class="table-cell">
-                            <span class="text-sm text-gray-600 dark:text-gray-400">
-                                {{ model.type_name || '-' }}
-                            </span>
-                        </td>
-                        <td class="table-cell">
-                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium" :class="model.is_active
-                                ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100'
-                                : 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100'">
-                                {{ model.is_active ? $t('active') : $t('inactive') }}
-                            </span>
-                        </td>
-                        <td class="table-cell">
-                            <div class="table-actions">
-                                <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
-                                    outline />
-                                <RouterLink class="h-fit" :to="viewTo({ name: 'edit', params: { id: model.id } })">
-                                    <IconButton icon="edit" :title="$t('crud.edit')" outline />
-                                </RouterLink>
-                                <IconButton icon="delete" :title="$t('crud.destroy')" @click="deleteItem(model)"
-                                    outline />
-                            </div>
-                        </td>
-                    </tr>
-                </template>
-                <template #empty>
-                    <td class="table-cell">
-                        <div class="flex items-center text-sm">
-                            <p class="font-semibold">
-                                {{ $t('registers.empty') }}
-                            </p>
-                        </div>
-                    </td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                </template>
-            </Table>
-        </div>
-
-        <ShowView ref="showModal" @reload="searcher.search()" />
-
-        <DestroyView ref="destroyModal" subtitle="name" :to="(id) => apiTo('destroy', { units_of_measure: id })"
-            @update="searcher.search()" />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/UnitsMeasure/Modals/Show.vue b/src/pages/UnitsMeasure/Modals/Show.vue
deleted file mode 100644
index e025418..0000000
--- a/src/pages/UnitsMeasure/Modals/Show.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { getDateTime } from '@Controllers/DateController';
-import { viewTo, apiTo, transl } from '../Module';
-import UnitsMeasureService from '../services/UnitsMeasureService';
-import Notify from '@Plugins/Notify';
-
-import Header from '@Holos/Modal/Elements/Header.vue';
-import ShowModal from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Button from '@Holos/Button/Button.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close',
-    'reload'
-]);
-
-/** Servicios */
-const unitsService = new UnitsMeasureService();
-const router = useRouter();
-
-/** Propiedades */
-const model = ref(null);
-const loading = ref(false);
-
-/** Referencias */
-const modalRef = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-    emit('close');
-}
-
-/** Función para alternar estado */
-async function toggleStatus(item) {
-    if (loading.value) return;
-    
-    const newStatus = !item.is_active;
-
-    try {
-        loading.value = true;
-
-        // Usar el servicio para actualizar el estado
-        await unitsService.updateStatus(item.id, newStatus);
-
-        // Actualizar el modelo local
-        item.is_active = newStatus;
-
-        // Notificación de éxito
-        const statusText = newStatus ? 'activada' : 'desactivada';
-        Notify.success(
-            `Unidad "${item.code}" ${statusText} exitosamente`,
-            'Estado actualizado'
-        );
-
-        // Emitir evento para recargar la lista principal si es necesario
-        emit('reload');
-
-    } catch (error) {
-        console.error('Error actualizando estado:', error);
-
-        // Manejo de errores
-        let errorMessage = 'Error al actualizar el estado de la unidad de medida';
-        let errorTitle = 'Error';
-
-        if (error?.response?.data) {
-            const errorData = error.response.data;
-
-            if (errorData.status === 'error') {
-                if (errorData.errors) {
-                    const firstField = Object.keys(errorData.errors)[0];
-                    const firstError = errorData.errors[firstField];
-                    errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
-                    errorTitle = 'Error de validación';
-                } else if (errorData.message) {
-                    errorMessage = errorData.message;
-                    errorTitle = 'Error del servidor';
-                }
-            } else if (errorData.message) {
-                errorMessage = errorData.message;
-            }
-        } else if (error?.message) {
-            errorMessage = `Error de conexión: ${error.message}`;
-            errorTitle = 'Error de red';
-        }
-
-        Notify.error(errorMessage, errorTitle);
-
-    } finally {
-        loading.value = false;
-    }
-}
-
-/** Exposer métodos públicos */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    },
-    close
-});
-</script>
-
-<template>
-    <ShowModal ref="modalRef" @close="close">
-        <div v-if="model">
-            <Header :title="model.code" :subtitle="model.name">
-                <div class="flex w-full flex-col">
-                    <div class="flex w-full justify-center items-center">
-                        <div
-                            class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
-                            <GoogleIcon class="text-white text-3xl" name="straighten" />
-                        </div>
-                    </div>
-                </div>
-            </Header>
-
-            <div class="flex w-full p-4 space-y-6">
-                <div class="w-full space-y-6">
-                    <!-- Información Principal -->
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <!-- Código y Estado -->
-                        <div class="space-y-4">
-                            <div>
-                                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                                    {{ $t('code') }}
-                                </label>
-                                <div class="mt-1">
-                                    <code
-                                        class="font-mono text-lg bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded-lg block">
-                                        {{ model.code }}
-                                    </code>
-                                </div>
-                            </div>
-
-                            <div>
-                                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                                    {{ $t('Estado') }}
-                                </label>
-                                <div class="mt-2">
-                                    <Button :variant="'smooth'" :color="model.is_active ? 'success' : 'danger'"
-                                        :size="'sm'" :loading="loading" @click="toggleStatus(model)">
-                                        {{ model.is_active ? $t('Activo') : $t('Inactivo') }}
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Nombre y Abreviación -->
-                        <div class="space-y-4">
-                            <div>
-                                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                                    {{ $t('Unidad de medida') }}
-                                </label>
-                                <p class="mt-1 text-lg font-semibold">{{ model.name }}</p>
-                            </div>
-
-                            <div>
-                                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                                    {{ $t('Abreviación') }}
-                                </label>
-                                <div class="mt-1">
-                                    <span
-                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
-                                        {{ model.abbreviation }}
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Tipo de Medida -->
-                    <div>
-                        <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                            {{ $t('Tipo de unidad') }}
-                        </label>
-                        <div class="mt-1 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                            <div class="flex items-center">
-                                <GoogleIcon class="text-2xl mr-3 text-indigo-500" name="straighten" />
-                                <div>
-                                    <p class="font-semibold">{{ model.type_name }}</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Información de Fechas -->
-                    <div class="border-t pt-6">
-                        <h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-4">
-                            Información del Sistema
-                        </h4>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-                            <div>
-                                <span class="font-medium text-gray-600 dark:text-gray-400">Creado:</span>
-                                <p class="mt-1">{{ getDateTime(model.created_at) }}</p>
-                            </div>
-                            <div>
-                                <span class="font-medium text-gray-600 dark:text-gray-400">Actualizado:</span>
-                                <p class="mt-1">{{ getDateTime(model.updated_at) }}</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/UnitsMeasure/Module.js b/src/pages/UnitsMeasure/Module.js
deleted file mode 100644
index 2130417..0000000
--- a/src/pages/UnitsMeasure/Module.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`units-of-measure.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
-    name: `admin.units-measure.${name}`, params, query 
-})
-    
-// Obtener traducción del componente
-const transl = (str) => lang(`admin.units_measure.${str}`)
-
-// Control de permisos
-const can = (permission) => hasPermission(`admin.units-measure.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/UnitsMeasure/services/UnitsMeasureService.js b/src/pages/UnitsMeasure/services/UnitsMeasureService.js
deleted file mode 100644
index fc0f3a6..0000000
--- a/src/pages/UnitsMeasure/services/UnitsMeasureService.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/**
- * Servicio para Units of Measure
- * 
- * @author Sistema
- * @version 1.0.0
- */
-
-import { api, apiURL } from '@Services/Api';
-
-export default class UnitsMeasureService {
-  
-  /**
-   * Obtener todas las unidades de medida
-   * @param {Object} params - Parámetros de la consulta
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getAll(params = {}) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('catalogs/units-of-measure'), {
-        params,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Obtener una unidad de medida por ID
-   * @param {number} id - ID de la unidad de medida
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getById(id) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL(`catalogs/units-of-measure/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Crear una nueva unidad de medida
-   * @param {Object} data - Datos de la unidad de medida
-   * @param {string} data.code - Código de la unidad
-   * @param {string} data.name - Nombre de la unidad
-   * @param {string} data.abbreviation - Abreviación de la unidad
-   * @param {number} data.type - Tipo de medida (1-7)
-   * @param {boolean} data.is_active - Estado activo/inactivo
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async create(data) {
-    return new Promise((resolve, reject) => {
-      api.post(apiURL('catalogs/units-of-measure'), data, {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Actualizar una unidad de medida existente
-   * @param {number} id - ID de la unidad de medida
-   * @param {Object} data - Datos actualizados
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async update(id, data) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`catalogs/units-of-measure/${id}`), data, {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Eliminar una unidad de medida
-   * @param {number} id - ID de la unidad de medida
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async delete(id) {
-    return new Promise((resolve, reject) => {
-      api.delete(apiURL(`catalogs/units-of-measure/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Actualizar el estado de una unidad de medida
-   * @param {number} id - ID de la unidad de medida
-   * @param {boolean} isActive - Nuevo estado
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async updateStatus(id, isActive) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`catalogs/units-of-measure/${id}`), {
-        data: { is_active: isActive },
-        onSuccess: (response) => {
-          resolve(response);
-        },
-        onError: (error) => {
-          // Mejorar el manejo de errores
-          const enhancedError = {
-            ...error,
-            timestamp: new Date().toISOString(),
-            action: 'updateStatus',
-            id: id,
-            is_active: isActive
-          };
-          reject(enhancedError);
-        }
-      });
-    });
-  }
-
-  /**
-   * Obtener tipos de medida disponibles desde la API
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getUnitTypes() {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('catalogs/unit-types'), {
-        onSuccess: (response) => {
-          // Extraer los tipos de la respuesta y formatearlos para el Selectable
-          const unitTypes = response.data?.unit_types || response.unit_types || [];
-          const formattedTypes = unitTypes.map(type => ({
-            value: type.id,
-            label: type.name
-          }));
-          resolve(formattedTypes);
-        },
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Obtener tipos de medida como objetos completos (para mapping)
-   * @returns {Promise} Promesa con los tipos completos
-   */
-  async getUnitTypesMap() {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('catalogs/unit-types'), {
-        onSuccess: (response) => {
-          const unitTypes = response.data?.unit_types || response.unit_types || [];
-          // Crear un mapa para acceso rápido por ID
-          const typesMap = {};
-          unitTypes.forEach(type => {
-            typesMap[type.id] = type;
-          });
-          resolve(typesMap);
-        },
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Obtener tipos de medida disponibles (método legacy - mantener por compatibilidad)
-   * @returns {Array} Array con los tipos de medida
-   */
-  getTypes() {
-    return [
-      { id: 1, name: 'Distancia', description: 'Medidas de longitud (metros, kilómetros, etc.)' },
-      { id: 2, name: 'Peso', description: 'Medidas de masa (kilogramos, gramos, etc.)' },
-      { id: 3, name: 'Temperatura', description: 'Medidas de temperatura (grados Celsius, etc.)' },
-      { id: 4, name: 'Unidad', description: 'Unidades discretas (piezas, unidades, etc.)' },
-      { id: 5, name: 'Volumen', description: 'Medidas de volumen (litros, mililitros, etc.)' }
-    ];
-  }
-
-  /**
-   * Obtener unidades de medida activas
-   * @returns {Promise} Promesa con las unidades activas
-   */
-  async getActive() {
-    return new Promise((resolve, reject) => {
-      this.getAll({ is_active: true })
-        .then(response => {
-          const activeUnits = response.data?.units_of_measure?.data || [];
-          resolve(activeUnits.filter(unit => unit.is_active));
-        })
-        .catch(error => reject(error));
-    });
-  }
-
-  /**
-   * Buscar unidades de medida por término
-   * @param {string} term - Término de búsqueda
-   * @returns {Promise} Promesa con los resultados
-   */
-  async search(term) {
-    return new Promise((resolve, reject) => {
-      this.getAll({ search: term })
-        .then(response => resolve(response))
-        .catch(error => reject(error));
-    });
-  }
-
-  /**
-   * Validar datos antes de enviar
-   * @param {Object} data - Datos a validar
-   * @returns {Object} Objeto con errores si los hay
-   */
-  validate(data) {
-    const errors = {};
-
-    if (!data.code || data.code.trim() === '') {
-      errors.code = 'El código es requerido';
-    }
-
-    if (!data.name || data.name.trim() === '') {
-      errors.name = 'El nombre es requerido';
-    }
-
-    if (!data.abbreviation || data.abbreviation.trim() === '') {
-      errors.abbreviation = 'La abreviación es requerida';
-    }
-
-    if (!data.type || ![1, 2, 3, 4, 5, 6, 7].includes(data.type)) {
-      errors.type = 'El tipo de medida es requerido y debe ser válido';
-    }
-
-    return errors;
-  }
-}
\ No newline at end of file
diff --git a/src/pages/Vacations/Admin/Index.vue b/src/pages/Vacations/Admin/Index.vue
deleted file mode 100644
index 0636614..0000000
--- a/src/pages/Vacations/Admin/Index.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<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
deleted file mode 100644
index f13dddb..0000000
--- a/src/pages/Vacations/Admin/Module.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index c1692d9..0000000
--- a/src/pages/Vacations/Coordinator/Create.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<script setup>
-import { onMounted, ref, computed } from 'vue';
-import { useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, viewTo } from './Module'
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Form from './Form.vue';
-
-/** Definidores */
-const router = useRouter();
-
-const form = useForm({
-    periods: [
-        {
-            start_date: '',
-            end_date: '',
-            number_of_days: 0,
-        }
-    ],
-    comments: ''
-});
-
-const availableDays = ref(0);
-const formRef = ref(null);
-
-// Calcular días restantes
-const remainingDays = computed(() => {
-    if (!formRef.value) return availableDays.value;
-    return availableDays.value - formRef.value.totalSelectedDays;
-});
-
-// Calcular total de días seleccionados
-const totalSelectedDays = computed(() => {
-    if (!formRef.value) return 0;
-    return formRef.value.totalSelectedDays;
-});
-
-// Obtener períodos con datos
-const periodsWithData = computed(() => {
-    return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
-});
-
-/** Métodos */
-function submit() {
-    form.post(apiTo('store'), {
-        onSuccess: (res) => {
-            Notify.success(Lang('created'));
-            router.push(viewTo({ name: 'index' }));
-        }
-    });
-}
-
-/** Ciclos */
-onMounted(() => {
-    api.get(route('resources.available-days'), {
-        onSuccess: (res) => {
-            availableDays.value = res.available_days;
-        }
-    });
-});
-</script>
-
-<template>
-    <div>
-        <!-- Header -->
-        <div class="mb-8">
-            <div class="flex items-center gap-4 mb-4">
-            <RouterLink :to="viewTo({ name: 'index' })">
-                    <button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
-                        <GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
-                    </button>
-            </RouterLink>
-                <div>
-                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
-                    <p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
-                </div>
-            </div>
-        </div>
-
-        <!-- Layout de dos columnas -->
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- Formulario - Columna izquierda (2/3) -->
-            <div class="lg:col-span-2">
-                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
-                    <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
-
-                    <Form 
-                        ref="formRef"
-                        :form="form"
-                        @submit="submit"
-                    />
-                </div>
-            </div>
-
-            <!-- Resumen - Columna derecha (1/3) -->
-            <div class="lg:col-span-1">
-                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
-                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
-
-                    <!-- Días disponibles -->
-                    <div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
-                        <div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
-                        <div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
-                    </div>
-
-                    <!-- Detalles de períodos -->
-                    <div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
-                        <div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
-                            <h4 class="font-medium text-slate-900 dark:text-slate-100">
-                                Período {{ index + 1 }}:
-                            </h4>
-                            <div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
-                                <div>Inicio: {{ period.start_date }}</div>
-                                <div>Fin: {{ period.end_date }}</div>
-                                <div class="flex items-center gap-2">
-                                    <span>Días en período {{ index + 1 }}:</span>
-                                    <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
-                                        {{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Resumen de días -->
-                    <div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
-                        <div class="flex items-center justify-between">
-                            <span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
-                            <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
-                                {{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
-                            </span>
-                        </div>
-                        <div class="flex items-center justify-between">
-                            <span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
-                            <span class="px-2 py-1 rounded-full text-xs font-medium"
-                                  :class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
-                                {{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
-                            </span>
-                        </div>
-                    </div>
-
-                    <!-- Advertencia si se excede el límite -->
-                    <div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
-                        <div class="flex items-center gap-2">
-                            <GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
-                            <span class="text-sm text-red-600 dark:text-red-400 font-medium">
-                                Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
-                            </span>
-                        </div>
-                    </div>
-
-                    <!-- Recordatorios -->
-                    <div class="space-y-3">
-                        <h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
-                        <div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Las solicitudes deben hacerse con 15 días de anticipación</span>
-                            </div>
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Tu coordinador revisará y aprobará la solicitud</span>
-                            </div>
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Recibirás una notificación con la decisión</span>
-                            </div>
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Los días se descontarán una vez aprobados</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Vacations/Coordinator/Form.vue b/src/pages/Vacations/Coordinator/Form.vue
deleted file mode 100644
index 4ac48cb..0000000
--- a/src/pages/Vacations/Coordinator/Form.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<script setup>
-import { ref, watch, computed } from 'vue';
-import VueDatePicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import Textarea         from '@Holos/Form/Textarea.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Propiedades */
-const props = defineProps({
-    form: Object
-})
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-
-function addPeriod() {
-    props.form.periods.push({
-        start_date: '',
-        end_date: '',
-        number_of_days: 0,
-    });
-}
-
-function removePeriod(index) {
-    if (props.form.periods.length > 1) {
-        props.form.periods.splice(index, 1);
-    }
-}
-
-function calculateDays(startDate, endDate) {
-    if (!startDate || !endDate) return 0;
-    
-    const start = new Date(startDate);
-    const end = new Date(endDate);
-    
-    // Validar que la fecha de inicio no sea posterior a la de fin
-    if (start > end) return 0;
-    
-    // Calcular la diferencia en días (incluyendo ambos días)
-    const timeDiff = end.getTime() - start.getTime();
-    const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)) + 1;
-    
-    return daysDiff;
-}
-
-function updatePeriodDays(index) {
-    const period = props.form.periods[index];
-    if (period.start_date && period.end_date) {
-        period.number_of_days = calculateDays(period.start_date, period.end_date);
-    } else {
-        period.number_of_days = 0;
-    }
-}
-
-function getMinDate() {
-    const today = new Date();
-    let daysToAdd = 15;
-    let currentDate = new Date(today);
-    
-    while (daysToAdd > 0) {
-        currentDate.setDate(currentDate.getDate() + 1);
-        // Si no es domingo (0), contar el día
-        if (currentDate.getDay() !== 0) {
-            daysToAdd--;
-        }
-    }
-    
-    return currentDate.toISOString().split('T')[0];
-}
-
-// Función para desactivar domingos
-function isDisabled(date) {
-    return date.getDay() === 0; // 0 = domingo
-}
-
-// Función para formatear fecha a Y-m-d
-function formatDate(date) {
-    if (!date) return '';
-    
-    // Si la fecha ya es un string en formato correcto, devolverla
-    if (typeof date === 'string' && date.match(/^\d{4}-\d{2}-\d{2}$/)) {
-        return date;
-    }
-    
-    let d;
-    if (date instanceof Date) {
-        d = date;
-    } else {
-        d = new Date(date);
-    }
-    
-    // Verificar que la fecha es válida
-    if (isNaN(d.getTime())) {
-        console.warn('Fecha inválida recibida:', date);
-        return '';
-    }
-    
-    const year = d.getFullYear();
-    const month = String(d.getMonth() + 1).padStart(2, '0');
-    const day = String(d.getDate()).padStart(2, '0');
-    return `${year}-${month}-${day}`;
-}
-
-// Watcher para detectar cambios en las fechas
-watch(() => props.form.periods, (newPeriods) => {
-    newPeriods.forEach((period, index) => {
-        if (period.start_date && period.end_date) {
-            updatePeriodDays(index);
-        }
-    });
-}, { deep: true });
-
-// Calcular total de días seleccionados
-const totalSelectedDays = computed(() => {
-    return props.form.periods.reduce((total, period) => {
-        return total + (period.number_of_days || 0);
-    }, 0);
-});
-
-// Exponer el total para el componente padre
-defineExpose({
-    totalSelectedDays
-});
-</script>
-
-<template>
-    <form @submit.prevent="submit" class="space-y-6">
-        <!-- Períodos de vacaciones -->
-        <div class="space-y-4">
-            <div v-for="(period, index) in form.periods" :key="index" class="space-y-4">
-                <div class="flex items-center justify-between">
-                    <h4 class="text-sm font-medium text-slate-700 dark:text-slate-300">
-                        Período {{ index + 1 }}
-                    </h4>
-                    <button
-                        v-if="form.periods.length > 1"
-                        type="button"
-                        @click="removePeriod(index)"
-                        class="flex items-center gap-1 px-2 py-1 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-md with-transition dark:text-red-400 dark:hover:bg-red-500/10"
-                    >
-                        <GoogleIcon name="delete" class="w-4 h-4" />
-                        Eliminar
-                    </button>
-                </div>
-                
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <div class="relative">
-                            <VueDatePicker
-                                v-model="period.start_date"
-                                class="w-full"
-                                placeholder="Fecha de inicio"
-                                format="dd/MM/yyyy"
-                                locale="es"
-                                :min-date="getMinDate()"
-                                :disabled-dates="isDisabled"
-                                :enable-time-picker="false"
-                                :auto-apply="true"
-                                :close-on-auto-apply="true"
-                                @update:model-value="(date) => { 
-                                    console.log('Fecha seleccionada (inicio):', date);
-                                    period.start_date = formatDate(date); 
-                                    console.log('Fecha formateada (inicio):', period.start_date);
-                                    updatePeriodDays(index); 
-                                }"
-                            />
-                        </div>
-                    </div>
-                    <div>
-                        <div class="relative">
-                            <VueDatePicker
-                                v-model="period.end_date"
-                                class="w-full"
-                                placeholder="Fecha de fin"
-                                format="dd/MM/yyyy"
-                                locale="es"
-                                :min-date="getMinDate()"
-                                :disabled-dates="isDisabled"
-                                :enable-time-picker="false"
-                                :auto-apply="true"
-                                :close-on-auto-apply="true"
-                                @update:model-value="(date) => { 
-                                    console.log('Fecha seleccionada (fin):', date);
-                                    period.end_date = formatDate(date); 
-                                    console.log('Fecha formateada (fin):', period.end_date);
-                                    updatePeriodDays(index); 
-                                }"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Botón añadir período -->
-            <button
-                type="button"
-                @click="addPeriod"
-                class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded-lg with-transition dark:text-blue-400 dark:hover:bg-blue-500/10"
-            >
-                <GoogleIcon name="add" />
-                Añadir período
-            </button>
-        </div>
-
-        <!-- Comentarios -->
-        <div>
-            <Textarea
-                v-model="form.comments"
-                id="comments"
-                rows="4"
-                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
-                placeholder="Agrega cualquier información adicional sobre tu solicitud..."
-                :onError="form.errors.comments"
-            />
-        </div>
-
-        <!-- Botón de envío -->
-        <div class="col-span-1 md:col-span-2 flex justify-center">
-            <PrimaryButton
-                v-text="$t('request')"
-                :class="{ 'opacity-25': form.processing }"
-                :disabled="form.processing"
-            />
-        </div>
-    </form>
-</template>
\ No newline at end of file
diff --git a/src/pages/Vacations/Coordinator/Index.vue b/src/pages/Vacations/Coordinator/Index.vue
deleted file mode 100644
index cb35224..0000000
--- a/src/pages/Vacations/Coordinator/Index.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<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 -->
-        <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 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
deleted file mode 100644
index b4bb8b3..0000000
--- a/src/pages/Vacations/Coordinator/Module.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index c1692d9..0000000
--- a/src/pages/Vacations/Employee/Create.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<script setup>
-import { onMounted, ref, computed } from 'vue';
-import { useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, viewTo } from './Module'
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Form from './Form.vue';
-
-/** Definidores */
-const router = useRouter();
-
-const form = useForm({
-    periods: [
-        {
-            start_date: '',
-            end_date: '',
-            number_of_days: 0,
-        }
-    ],
-    comments: ''
-});
-
-const availableDays = ref(0);
-const formRef = ref(null);
-
-// Calcular días restantes
-const remainingDays = computed(() => {
-    if (!formRef.value) return availableDays.value;
-    return availableDays.value - formRef.value.totalSelectedDays;
-});
-
-// Calcular total de días seleccionados
-const totalSelectedDays = computed(() => {
-    if (!formRef.value) return 0;
-    return formRef.value.totalSelectedDays;
-});
-
-// Obtener períodos con datos
-const periodsWithData = computed(() => {
-    return form.periods.filter(period => period.start_date && period.end_date && period.number_of_days > 0);
-});
-
-/** Métodos */
-function submit() {
-    form.post(apiTo('store'), {
-        onSuccess: (res) => {
-            Notify.success(Lang('created'));
-            router.push(viewTo({ name: 'index' }));
-        }
-    });
-}
-
-/** Ciclos */
-onMounted(() => {
-    api.get(route('resources.available-days'), {
-        onSuccess: (res) => {
-            availableDays.value = res.available_days;
-        }
-    });
-});
-</script>
-
-<template>
-    <div>
-        <!-- Header -->
-        <div class="mb-8">
-            <div class="flex items-center gap-4 mb-4">
-            <RouterLink :to="viewTo({ name: 'index' })">
-                    <button class="flex items-center justify-center w-10 h-10 rounded-lg bg-slate-100 hover:bg-slate-200 with-transition dark:bg-slate-800 dark:hover:bg-slate-700">
-                        <GoogleIcon name="arrow_back" class="text-slate-600 dark:text-slate-300" />
-                    </button>
-            </RouterLink>
-                <div>
-                    <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Solicitar Vacaciones</h1>
-                    <p class="text-slate-600 dark:text-slate-400">Completa el formulario para solicitar tus días de vacaciones.</p>
-                </div>
-            </div>
-        </div>
-
-        <!-- Layout de dos columnas -->
-        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            <!-- Formulario - Columna izquierda (2/3) -->
-            <div class="lg:col-span-2">
-                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
-                    <h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">Detalles de la Solicitud</h2>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Selecciona las fechas y proporciona información adicional.</p>
-
-                    <Form 
-                        ref="formRef"
-                        :form="form"
-                        @submit="submit"
-                    />
-                </div>
-            </div>
-
-            <!-- Resumen - Columna derecha (1/3) -->
-            <div class="lg:col-span-1">
-                <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 dark:bg-slate-800 dark:border-slate-700">
-                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-4">Resumen de Solicitud</h3>
-                    <p class="text-sm text-slate-600 dark:text-slate-400 mb-6">Revisa los detalles antes de enviar.</p>
-
-                    <!-- Días disponibles -->
-                    <div class="text-center mb-6 p-4 bg-slate-50 rounded-lg dark:bg-slate-700/50">
-                        <div class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ availableDays }}</div>
-                        <div class="text-sm text-slate-600 dark:text-slate-400">Días Disponibles</div>
-                    </div>
-
-                    <!-- Detalles de períodos -->
-                    <div v-if="periodsWithData.length > 0" class="space-y-4 mb-6">
-                        <div v-for="(period, index) in periodsWithData" :key="index" class="space-y-2">
-                            <h4 class="font-medium text-slate-900 dark:text-slate-100">
-                                Período {{ index + 1 }}:
-                            </h4>
-                            <div class="space-y-1 text-sm text-slate-600 dark:text-slate-400">
-                                <div>Inicio: {{ period.start_date }}</div>
-                                <div>Fin: {{ period.end_date }}</div>
-                                <div class="flex items-center gap-2">
-                                    <span>Días en período {{ index + 1 }}:</span>
-                                    <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
-                                        {{ period.number_of_days }} día{{ period.number_of_days > 1 ? 's' : '' }}
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Resumen de días -->
-                    <div v-if="totalSelectedDays > 0" class="space-y-3 mb-6">
-                        <div class="flex items-center justify-between">
-                            <span class="text-sm text-slate-600 dark:text-slate-400">Total de días:</span>
-                            <span class="px-2 py-1 bg-slate-100 text-slate-700 rounded-full text-xs font-medium dark:bg-slate-600 dark:text-slate-300">
-                                {{ totalSelectedDays }} día{{ totalSelectedDays > 1 ? 's' : '' }}
-                            </span>
-                        </div>
-                        <div class="flex items-center justify-between">
-                            <span class="text-sm text-slate-600 dark:text-slate-400">Días restantes:</span>
-                            <span class="px-2 py-1 rounded-full text-xs font-medium"
-                                  :class="remainingDays < 0 ? 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' : 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400'">
-                                {{ remainingDays }} día{{ remainingDays !== 1 ? 's' : '' }}
-                            </span>
-                        </div>
-                    </div>
-
-                    <!-- Advertencia si se excede el límite -->
-                    <div v-if="remainingDays < 0" class="mb-6 p-3 bg-red-50 border border-red-200 rounded-lg dark:bg-red-500/10 dark:border-red-500/20">
-                        <div class="flex items-center gap-2">
-                            <GoogleIcon name="warning" class="w-4 h-4 text-red-600 dark:text-red-400" />
-                            <span class="text-sm text-red-600 dark:text-red-400 font-medium">
-                                Excedes tus días disponibles por {{ Math.abs(remainingDays) }} día{{ Math.abs(remainingDays) > 1 ? 's' : '' }}
-                            </span>
-                        </div>
-                    </div>
-
-                    <!-- Recordatorios -->
-                    <div class="space-y-3">
-                        <h4 class="font-medium text-slate-900 dark:text-slate-100">Recordatorios:</h4>
-                        <div class="space-y-2 text-sm text-slate-600 dark:text-slate-400">
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Las solicitudes deben hacerse con 15 días de anticipación</span>
-                            </div>
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Tu coordinador revisará y aprobará la solicitud</span>
-                            </div>
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Recibirás una notificación con la decisión</span>
-                            </div>
-                            <div class="flex items-start gap-2">
-                                <div class="w-1.5 h-1.5 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
-                                <span>Los días se descontarán una vez aprobados</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Vacations/Employee/Form.vue b/src/pages/Vacations/Employee/Form.vue
deleted file mode 100644
index 4cc976e..0000000
--- a/src/pages/Vacations/Employee/Form.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<script setup>
-import { ref, watch, computed } from 'vue';
-
-import VueDatePicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import 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
deleted file mode 100644
index b0bb3c3..0000000
--- a/src/pages/Vacations/Employee/Index.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<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
deleted file mode 100644
index 43eb3d3..0000000
--- a/src/pages/Vacations/Employee/Module.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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/pages/WarehouseClassifications/Create.vue b/src/pages/WarehouseClassifications/Create.vue
deleted file mode 100644
index 4b08382..0000000
--- a/src/pages/WarehouseClassifications/Create.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import GoogleIcon      from '@Shared/GoogleIcon.vue';
-import Form            from './Form.vue'
-
-/** Definidores */
-const router = useRouter();
-const route = useRoute();
-
-/** Propiedades */
-const form = useForm({
-    code: '',
-    name: '',
-    description: '',
-    parent_id: null
-});
-
-const parentInfo = ref(null);
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        parent_id: data.parent_id // Usar el parent_id del formulario
-    })).post(apiTo('store'), {
-        onSuccess: () => {
-            Notify.success(Lang('register.create.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-
-/** Ciclos */
-onMounted(() => {
-    // Verificar si se están pasando parámetros para crear subcategoría
-    if (route.query.parent_id) {
-        parentInfo.value = {
-            id: parseInt(route.query.parent_id),
-            name: route.query.parent_name,
-            code: route.query.parent_code
-        };
-        // Pre-llenar el parent_id en el formulario
-        form.parent_id = parseInt(route.query.parent_id);
-    }
-})
-</script>
-
-<template>
-    <PageHeader
-        :title="parentInfo ? `${transl('create.title')} - Subcategoría` : transl('create.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <!-- Mostrar información del padre si se está creando una subcategoría -->
-    <div v-if="parentInfo" class="mb-4 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg border border-blue-200 dark:border-blue-700">
-        <div class="flex items-center">
-            <GoogleIcon class="text-blue-600 text-xl mr-2" name="account_tree" />
-            <div>
-                <p class="text-sm font-medium text-blue-800 dark:text-blue-200">
-                    Creando subcategoría para:
-                </p>
-                <p class="text-lg font-semibold text-blue-900 dark:text-blue-100">
-                    <code class="bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded text-sm mr-2">{{ parentInfo.code }}</code>
-                    {{ parentInfo.name }}
-                </p>
-            </div>
-        </div>
-    </div>
-    
-    <Form
-        action="create"
-        :form="form"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/WarehouseClassifications/Edit.vue b/src/pages/WarehouseClassifications/Edit.vue
deleted file mode 100644
index b165782..0000000
--- a/src/pages/WarehouseClassifications/Edit.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo , transl } from './Module';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import GoogleIcon      from '@Shared/GoogleIcon.vue';
-import Form            from './Form.vue'
-
-/** Definiciones */
-const vroute = useRoute();
-const router = useRouter();
-
-/** Propiedades */
-const form = useForm({
-    id: null,
-    code: '',
-    name: '',
-    description: '',
-    is_active: true,
-    parent: null
-});
-
-const parentOptions = ref([]);
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        parent_id: data.parent?.id || null
-    })).put(apiTo('update', { warehouse_classification: form.id }), {
-        onSuccess: () => {
-            Notify.success(Lang('register.edit.onSuccess'))
-            router.push(viewTo({ name: 'index' }));
-        },
-    })
-}
-
-/** Función para obtener clasificaciones padre (excluyendo la actual y sus hijos) */
-function loadParentOptions() {
-    api.get(apiTo('index'), {
-        onSuccess: (r) => {
-            // Función para excluir la clasificación actual y sus descendientes
-            const excludeCurrentAndChildren = (items, excludeId) => {
-                return items.filter(item => {
-                    if (item.id === excludeId) return false;
-                    if (hasDescendant(item, excludeId)) return false;
-                    return true;
-                }).map(item => ({
-                    ...item,
-                    children: excludeCurrentAndChildren(item.children || [], excludeId)
-                }));
-            };
-
-            // Función para verificar si un item tiene como descendiente la clasificación actual
-            const hasDescendant = (item, targetId) => {
-                if (!item.children) return false;
-                return item.children.some(child => 
-                    child.id === targetId || hasDescendant(child, targetId)
-                );
-            };
-
-            // Aplanar la estructura jerárquica para el selector
-            const flattenOptions = (items, level = 0) => {
-                let options = [];
-                items.forEach(item => {
-                    options.push({
-                        ...item,
-                        name: '  '.repeat(level) + item.name, // Indentación visual
-                        level
-                    });
-                    if (item.children && item.children.length > 0) {
-                        options = options.concat(flattenOptions(item.children, level + 1));
-                    }
-                });
-                return options;
-            };
-
-            const filteredData = excludeCurrentAndChildren(r.warehouse_classifications.data, form.id);
-            parentOptions.value = flattenOptions(filteredData);
-        }
-    });
-}
-
-onMounted(() => {
-    api.get(apiTo('show', { warehouse_classification: vroute.params.id }), {
-        onSuccess: (r) => {
-            const classification = r.warehouse_classification;
-            form.fill({
-                id: classification.id,
-                code: classification.code,
-                name: classification.name,
-                description: classification.description,
-                is_active: classification.is_active,
-                parent: classification.parent || null
-            });
-            
-            // Cargar opciones padre después de obtener los datos actuales
-            loadParentOptions();
-        }
-    });
-})
-</script>
-
-<template>
-    <PageHeader :title="`${transl('edit.title')}${form.parent ? ' - Subcategoría' : ''}`">
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <!-- Mostrar información del padre si es una subcategoría -->
-    <div v-if="form.parent" class="mb-4 p-4 bg-yellow-50 dark:bg-yellow-900 rounded-lg border border-yellow-200 dark:border-yellow-700">
-        <div class="flex items-center">
-            <GoogleIcon class="text-yellow-600 text-xl mr-2" name="account_tree" />
-            <div>
-                <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-                    Editando subcategoría de:
-                </p>
-                <p class="text-lg font-semibold text-yellow-900 dark:text-yellow-100">
-                    <code class="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded text-sm mr-2">{{ form.parent.code }}</code>
-                    {{ form.parent.name }}
-                </p>
-            </div>
-        </div>
-    </div>
-    
-    <Form
-        action="update"
-        :form="form"
-        :parent-options="parentOptions"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/WarehouseClassifications/Form.vue b/src/pages/WarehouseClassifications/Form.vue
deleted file mode 100644
index bf02116..0000000
--- a/src/pages/WarehouseClassifications/Form.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup>
-import { transl } from './Module';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import Selectable    from '@Holos/Form/Selectable.vue';
-import Checkbox      from '@Holos/Checkbox.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Propiedades */
-defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object,
-    parentOptions: {
-        type: Array,
-        default: () => []
-    }
-})
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-</script>
-
-<template>
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
-    </div>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <Input
-                v-model="form.code"
-                id="code"
-                :onError="form.errors.code"
-                autofocus
-                required
-            />
-            <Input
-                v-model="form.name"
-                id="name"
-                :onError="form.errors.name"
-                required
-            />
-            <Input
-                v-model="form.description"
-                id="description"
-                :onError="form.errors.description"
-                class="md:col-span-2"
-            />
-            <slot />
-            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
-                <PrimaryButton
-                    v-text="$t(action)"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                />
-            </div>
-        </form>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/WarehouseClassifications/Index.vue b/src/pages/WarehouseClassifications/Index.vue
deleted file mode 100644
index 1b4aab2..0000000
--- a/src/pages/WarehouseClassifications/Index.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useSearcher } from '@Services/Api';
-import { hasPermission } from '@Plugins/RolePermission';
-import { can, apiTo, viewTo, transl } from './Module'
-
-import IconButton   from '@Holos/Button/Icon.vue'
-import DestroyView  from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead from '@Holos/Searcher.vue';
-import Table        from '@Holos/Table.vue';
-import ShowView     from './Modals/Show.vue';
-
-/** Propiedades */
-const models = ref([]);
-const router = useRouter();
-
-/** Referencias */
-const showModal    = ref(false);
-const destroyModal = ref(false);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => models.value = r.warehouse_classifications,
-    onError: () => models.value = []
-});
-
-/** Función para renderizar estructura jerárquica */
-const renderHierarchicalRows = (items, level = 0) => {
-    const rows = [];
-    items.forEach(item => {
-        rows.push({ ...item, level });
-        if (item.children && item.children.length > 0) {
-            rows.push(...renderHierarchicalRows(item.children, level + 1));
-        }
-    });
-    return rows;
-};
-
-/** Función para crear subcategoría */
-const createSubcategory = (parentCategory) => {
-    // Redirigir a la vista de creación con el parent_id en query params
-    router.push(viewTo({ 
-        name: 'create', 
-        query: { 
-            parent_id: parentCategory.id,
-            parent_name: parentCategory.name,
-            parent_code: parentCategory.code
-        } 
-    }));
-};
-
-/** Función para eliminar con información contextual */
-const deleteItem = (item) => {
-    // Agregar información contextual al modal
-    const itemWithContext = {
-        ...item,
-        contextInfo: item.parent ? `Subcategoría de: ${item.parent.code} - ${item.parent.name}` : 'Categoría principal'
-    };
-    destroyModal.value.open(itemWithContext);
-};
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-</script>
-
-<template>
-    <div>
-        <SearcherHead
-            :title="transl('name')"
-            @search="(x) => searcher.search(x)"
-        >
-            <RouterLink
-                
-                :to="viewTo({ name: 'create' })"
-            >
-            <!-- v-if="can('create')" -->
-                <IconButton
-                    class="text-white"
-                    icon="add"
-                    :title="$t('crud.create')"
-                    filled
-                />
-            </RouterLink>
-            <IconButton
-                icon="refresh"
-                :title="$t('refresh')"
-                @click="searcher.search()"
-            />
-        </SearcherHead>
-        <div class="pt-2 w-full">
-            <Table 
-                :items="models"
-                :processing="searcher.processing"
-                @send-pagination="(page) => searcher.pagination(page)"
-            >
-                <template #head>
-                    <th v-text="$t('code')" />
-                    <th v-text="$t('name')" />
-                    <th v-text="$t('description')" />
-                    <th v-text="$t('status')" class="w-20 text-center" />
-                    <th
-                        v-text="$t('actions')"
-                        class="w-32 text-center"
-                    />
-                </template>
-                <template #body="{items}">
-                    <tr
-                        v-for="model in items"
-                        :key="model.id"
-                        class="table-row"
-                        :class="{ 'bg-gray-50 dark:bg-gray-800': model.level > 0 }"
-                    >
-                        <td class="table-cell">
-                            <div :style="{ paddingLeft: `${model.level * 24}px` }" class="flex items-center">
-                                <span v-if="model.level > 0" class="text-gray-400 mr-2">└─</span>
-                                <code class="font-mono text-sm" 
-                                      :class="model.level > 0 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-gray-100'">
-                                    {{ model.code }}
-                                </code>
-                                <span v-if="model.level > 0" class="ml-2 text-xs bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 px-2 py-1 rounded-full">
-                                    Subcategoría
-                                </span>
-                            </div>
-                        </td>
-                        <td class="table-cell">
-                            <span class="font-semibold">{{ model.name }}</span>
-                        </td>
-                        <td class="table-cell">
-                            <span class="text-sm text-gray-600 dark:text-gray-400">
-                                {{ model.description || '-' }}
-                            </span>
-                        </td>
-                        <td class="table-cell text-center">
-                            <span 
-                                class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
-                                :class="model.is_active 
-                                    ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' 
-                                    : 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100'"
-                            >
-                                {{ model.is_active ? $t('active') : $t('inactive') }}
-                            </span>
-                        </td>
-                        <td class="table-cell">
-                            <div class="table-actions">
-                                <IconButton
-                                    
-                                    icon="add_circle"
-                                    :title="$t('Agregar subcategoría')"
-                                    @click="createSubcategory(model)"
-                                    outline
-                                />
-                                <IconButton
-                                   
-                                    icon="visibility"
-                                    :title="$t('crud.show')"
-                                    @click="showModal.open(model)"
-                                    outline
-                                />
-                                <RouterLink
-                                   
-                                    class="h-fit"
-                                    :to="viewTo({ name: 'edit', params: { id: model.id } })"
-                                >
-                                    <IconButton
-                                        icon="edit"
-                                        :title="$t('crud.edit')"
-                                        outline
-                                    />
-                                </RouterLink>
-                                <IconButton
-                                    
-                                    icon="delete"
-                                    :title="$t('crud.destroy')"
-                                    @click="deleteItem(model)"
-                                    outline
-                                />
-                            </div>
-                        </td>
-                    </tr>
-                </template>
-                <template #empty>
-                    <td class="table-cell">
-                        <div class="flex items-center text-sm">
-                            <p class="font-semibold">
-                                {{ $t('registers.empty') }}
-                            </p>
-                        </div>
-                    </td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                    <td class="table-cell">-</td>
-                </template>
-            </Table>
-        </div>
-        
-        <ShowView 
-            ref="showModal"
-        />
-
-        <DestroyView
-            ref="destroyModal"
-            subtitle="name"
-            :to="(id) => apiTo('destroy', { warehouse_classification: id })"
-            @update="searcher.search()"
-        />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/WarehouseClassifications/Modals/Show.vue b/src/pages/WarehouseClassifications/Modals/Show.vue
deleted file mode 100644
index 9e33a2f..0000000
--- a/src/pages/WarehouseClassifications/Modals/Show.vue
+++ /dev/null
@@ -1,362 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { getDateTime } from '@Controllers/DateController';
-import { viewTo, apiTo } from '../Module';
-import WarehouseClassificationService from '../services/WarehouseClassificationService';
-import Notify from '@Plugins/Notify';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Button     from '@Holos/Button/Button.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Servicios */
-const warehouseService = new WarehouseClassificationService();
-const router = useRouter();
-
-/** Propiedades */
-const model    = ref(null);
-const loading  = ref(false);
-const deletingChildId = ref(null); // Para mostrar loading específico en subcategoría que se está eliminando
-
-/** Referencias */
-const modalRef = ref(null);
-const destroyModal = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-    emit('close');
-}
-
-/** Función para actualizar el estado de la clasificación */
-async function toggleStatus(item) {
-    if (loading.value) return;
-    
-    const newStatus = !item.is_active;
-    
-    try {
-        loading.value = true;
-        
-        // Usar el servicio para actualizar el estado
-        await warehouseService.updateStatus(item.id, newStatus);
-        
-        // Actualizar el modelo local
-        item.is_active = newStatus;
-        
-        // Notificación de éxito
-        const statusText = newStatus ? 'activada' : 'desactivada';
-        Notify.success(
-            `Clasificación "${item.code}" ${statusText} exitosamente`,
-            'Estado actualizado'
-        );
-        
-        // Emitir evento para recargar la lista principal si es necesario
-        emit('reload');
-        
-    } catch (error) {
-        console.error('Error actualizando estado:', error);
-        
-        // Manejo específico de errores según la estructura de tu API
-        let errorMessage = 'Error al actualizar el estado de la clasificación';
-        let errorTitle = 'Error';
-        
-        if (error?.response?.data) {
-            const errorData = error.response.data;
-            
-            // Caso 1: Error con estructura específica de tu API
-            if (errorData.status === 'error') {
-                if (errorData.errors) {
-                    // Errores de validación - extraer el primer error
-                    const firstField = Object.keys(errorData.errors)[0];
-                    const firstError = errorData.errors[firstField];
-                    errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
-                    errorTitle = 'Error de validación';
-                } else if (errorData.message) {
-                    // Mensaje general del error
-                    errorMessage = errorData.message;
-                    errorTitle = 'Error del servidor';
-                }
-            }
-            // Caso 2: Otros formatos de error
-            else if (errorData.message) {
-                errorMessage = errorData.message;
-            }
-        } else if (error?.message) {
-            // Error genérico de la petición (red, timeout, etc.)
-            errorMessage = `Error de conexión: ${error.message}`;
-            errorTitle = 'Error de red';
-        }
-        
-        // Notificación de error
-        Notify.error(errorMessage, errorTitle);
-    } finally {
-        loading.value = false;
-    }
-}
-
-/** Función para editar subcategoría */
-function editSubcategory(child) {
-    // Navegar a la vista de edición de la subcategoría
-    const editUrl = viewTo({ name: 'edit', params: { id: child.id } });
-    router.push(editUrl);
-    // Cerrar el modal actual
-    close();
-}
-
-/** Función para eliminar subcategoría */
-function deleteSubcategory(child) {
-    // Marcar cuál subcategoría se va a eliminar para mostrar loading
-    deletingChildId.value = child.id;
-    destroyModal.value.open(child);
-}
-
-/** Función para recargar después de eliminar - Mejorada */
-async function onSubcategoryDeleted() {
-    try {
-        // Mostrar que se está procesando
-        const deletedId = deletingChildId.value;
-        
-        // Recargar los datos de la clasificación actual para obtener subcategorías actualizadas
-        const response = await warehouseService.getById(model.value.id);
-        
-        // Actualizar el modelo local con los datos frescos
-        if (response && response.warehouse_classification) {
-            model.value = response.warehouse_classification;
-            
-            // Notificación de éxito con información específica
-            const deletedCount = model.value.children ? model.value.children.length : 0;
-            Notify.success(
-                `Subcategoría eliminada exitosamente. ${deletedCount} subcategorías restantes.`, 
-                'Eliminación exitosa'
-            );
-        }
-        
-        // Emitir evento para recargar la lista principal
-        emit('reload');
-        
-    } catch (error) {
-        console.error('Error recargando datos después de eliminar:', error);
-        
-        // En caso de error, cerrar modal y recargar lista principal
-        close();
-        emit('reload');
-        
-        // Notificación de error
-        Notify.error(
-            'Error al actualizar la vista. Los datos se han actualizado correctamente.',
-            'Error de actualización'
-        );
-    } finally {
-        // Limpiar el estado de eliminación
-        deletingChildId.value = null;
-    }
-}
-
-/** Función para cancelar eliminación */
-function onDeleteCancelled() {
-    // Limpiar el estado de eliminación si se cancela
-    deletingChildId.value = null;
-}
-
-/** Función para renderizar la jerarquía de hijos */
-const renderChildren = (children, level = 1) => {
-    if (!children || children.length === 0) return null;
-    return children.map(child => ({
-        ...child,
-        level,
-        children: renderChildren(child.children, level + 1)
-    }));
-};
-
-/** Exposiciones */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    }
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.code"
-                :subtitle="model.name"
-            >
-                <div class="flex w-full flex-col">
-                    <div class="flex w-full justify-center items-center">
-                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
-                            <GoogleIcon 
-                                class="text-white text-3xl"
-                                name="category"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Header>
-            <div class="flex w-full p-4 space-y-6">
-                <!-- Información básica -->
-                <div class="w-full">
-                    <div class="flex items-start">
-                        <GoogleIcon 
-                            class="text-xl text-success mt-1"
-                            name="info"
-                        />
-                        <div class="pl-3 w-full">
-                            <p class="font-bold text-lg leading-none pb-3">
-                                {{ $t('details') }}
-                            </p>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div>
-                                    <p>
-                                        <b>{{ $t('code') }}: </b>
-                                        <code class="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
-                                            {{ model.code }}
-                                        </code>
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>{{ $t('name') }}: </b>
-                                        {{ model.name }}
-                                    </p>
-                                    <p class="mt-2" v-if="model.description">
-                                        <b>{{ $t('description') }}: </b>
-                                        {{ model.description }}
-                                    </p>
-                                </div>
-                                <div>
-                                    <p>
-                                        <b>{{ $t('status') }}: </b>
-                                        <Button
-                                            :variant="'smooth'"
-                                            :color="model.is_active ? 'success' : 'danger'"
-                                            :size="'sm'"
-                                            :loading="loading"
-                                            @click="toggleStatus(model)"
-                                        >
-                                            {{ model.is_active ? $t('Activo') : $t('Inactivo') }}
-                                        </Button>
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>{{ $t('created_at') }}: </b>
-                                        {{ getDateTime(model.created_at) }}
-                                    </p>
-                                    <p class="mt-2">
-                                        <b>{{ $t('updated_at') }}: </b>
-                                        {{ getDateTime(model.updated_at) }}
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Clasificaciones hijas -->
-                    <div v-if="model.children && model.children.length > 0" class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
-                        <div class="flex items-start">
-                            <GoogleIcon 
-                                class="text-xl text-primary mt-1"
-                                name="account_tree"
-                            />
-                            <div class="pl-3 w-full">
-                                <p class="font-bold text-lg leading-none pb-3">
-                                    {{ $t('Subclasificaciones') }}
-                                </p>
-                                <div class="space-y-2">
-                                    <div 
-                                        v-for="child in model.children" 
-                                        :key="child.id"
-                                        class="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg transition-all duration-300"
-                                        :class="{
-                                            'opacity-50 pointer-events-none': deletingChildId === child.id,
-                                            'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700': deletingChildId === child.id
-                                        }"
-                                    >
-                                        <div class="flex-1">
-                                            <div class="flex items-center">
-                                                <code class="font-mono text-sm bg-white dark:bg-gray-700 px-2 py-1 rounded mr-3">
-                                                    {{ child.code }}
-                                                </code>
-                                                <span class="font-semibold">{{ child.name }}</span>
-                                                <!-- Indicador de eliminación -->
-                                                <span v-if="deletingChildId === child.id" class="ml-2 text-xs bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100 px-2 py-1 rounded-full animate-pulse">
-                                                    Eliminando...
-                                                </span>
-                                            </div>
-                                            <p v-if="child.description" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                                                {{ child.description }}
-                                            </p>
-                                        </div>
-                                        
-                                        <!-- Botones de acción para subcategorías -->
-                                        <div class="flex items-center space-x-2 ml-4">
-                                            <!-- Botón de estado -->
-                                            <Button
-                                                :variant="'smooth'"
-                                                :color="child.is_active ? 'success' : 'danger'"
-                                                :size="'sm'"
-                                                :loading="loading && deletingChildId !== child.id"
-                                                :disabled="deletingChildId === child.id"
-                                                @click="toggleStatus(child)"
-                                            >
-                                                {{ child.is_active ? $t('Activo') : $t('Inactivo') }}
-                                            </Button>
-                                            
-                                            <!-- Botón editar -->
-                                            <IconButton
-                                                icon="edit"
-                                                :title="$t('crud.edit')"
-                                                :disabled="deletingChildId === child.id"
-                                                @click="editSubcategory(child)"
-                                                outline
-                                                size="sm"
-                                            />
-                                            
-                                            <!-- Botón eliminar -->
-                                            <IconButton
-                                                icon="delete"
-                                                :title="$t('crud.destroy')"
-                                                :loading="deletingChildId === child.id"
-                                                :disabled="deletingChildId && deletingChildId !== child.id"
-                                                @click="deleteSubcategory(child)"
-                                                outline
-                                                size="sm"
-                                            />
-                                        </div>
-                                    </div>
-                                    
-                                    <!-- Mensaje cuando no hay subcategorías (después de eliminar todas) -->
-                                    <div v-if="!model.children || model.children.length === 0" 
-                                         class="text-center p-4 text-gray-500 dark:text-gray-400">
-                                        <GoogleIcon class="text-2xl mb-2" name="folder_open" />
-                                        <p class="text-sm">No hay subcategorías</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Modal de eliminación para subcategorías -->
-        <DestroyView
-            ref="destroyModal"
-            subtitle="name"
-            :to="(id) => apiTo('destroy', { warehouse_classification: id })"
-            @update="onSubcategoryDeleted"
-        />
-    </ShowModal>
-</template>
\ No newline at end of file
diff --git a/src/pages/WarehouseClassifications/Module.js b/src/pages/WarehouseClassifications/Module.js
deleted file mode 100644
index f7caf91..0000000
--- a/src/pages/WarehouseClassifications/Module.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`warehouse-classifications.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
-    name: `admin.warehouse-classifications.${name}`, params, query 
-})
-
-// Obtener traducción del componente
-const transl = (str) => lang(`admin.warehouse_classifications.${str}`)
-
-// Control de permisos
-const can = (permission) => hasPermission(`admin.warehouse-classifications.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/WarehouseClassifications/interfaces/warehouse-classifications.interfaces.js b/src/pages/WarehouseClassifications/interfaces/warehouse-classifications.interfaces.js
deleted file mode 100644
index 767608b..0000000
--- a/src/pages/WarehouseClassifications/interfaces/warehouse-classifications.interfaces.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Interfaces para Warehouse Classifications
- * 
- * @author Sistema
- * @version 1.0.0
- */
-
-/**
- * @typedef {Object} WarehouseClassification
- * @property {number} id - ID de la clasificación
- * @property {string} code - Código de la clasificación
- * @property {string} name - Nombre de la clasificación
- * @property {string|null} description - Descripción de la clasificación
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {number|null} parent_id - ID del padre
- * @property {string} created_at - Fecha de creación
- * @property {string} updated_at - Fecha de actualización
- * @property {string|null} deleted_at - Fecha de eliminación
- * @property {WarehouseClassification|null} parent - Clasificación padre
- * @property {WarehouseClassification[]} children - Clasificaciones hijas
- */
-
-/**
- * @typedef {Object} WarehouseClassificationResponse
- * @property {string} status - Estado de la respuesta
- * @property {Object} data - Datos de la respuesta
- * @property {string} data.message - Mensaje de la respuesta
- * @property {WarehouseClassification} data.warehouse_classification - Clasificación de almacén
- */
-
-/**
- * @typedef {Object} WarehouseClassificationsListResponse
- * @property {string} status - Estado de la respuesta
- * @property {Object} data - Datos de la respuesta
- * @property {WarehouseClassification[]} data.warehouse_classifications - Lista de clasificaciones
- */
-
-/**
- * @typedef {Object} CreateWarehouseClassificationData
- * @property {string} code - Código de la clasificación
- * @property {string} name - Nombre de la clasificación
- * @property {string|null} description - Descripción de la clasificación
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {number|null} parent_id - ID del padre
- */
-
-/**
- * @typedef {Object} UpdateWarehouseClassificationData
- * @property {string} [code] - Código de la clasificación
- * @property {string} [name] - Nombre de la clasificación
- * @property {string|null} [description] - Descripción de la clasificación
- * @property {boolean} [is_active] - Estado activo/inactivo
- * @property {number|null} [parent_id] - ID del padre
- */
-
-export {
-    WarehouseClassification,
-    WarehouseClassificationResponse,
-    WarehouseClassificationsListResponse,
-    CreateWarehouseClassificationData,
-    UpdateWarehouseClassificationData
-};
\ No newline at end of file
diff --git a/src/pages/WarehouseClassifications/services/WarehouseClassificationService.js b/src/pages/WarehouseClassifications/services/WarehouseClassificationService.js
deleted file mode 100644
index f92f8fd..0000000
--- a/src/pages/WarehouseClassifications/services/WarehouseClassificationService.js
+++ /dev/null
@@ -1,187 +0,0 @@
-/**
- * Servicio para Warehouse Classifications
- * 
- * @author Sistema
- * @version 1.0.0
- */
-
-import { api, apiURL } from '@Services/Api';
-
-export default class WarehouseClassificationService {
-  
-  /**
-   * Obtener todas las clasificaciones de almacén
-   * @param {Object} params - Parámetros de la consulta
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getAll(params = {}) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('catalogs/warehouse-classifications'), {
-        params,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Obtener una clasificación de almacén por ID
-   * @param {number} id - ID de la clasificación
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getById(id) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL(`catalogs/warehouse-classifications/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Crear una nueva clasificación de almacén
-   * @param {Object} data - Datos de la clasificación
-   * @param {string} data.code - Código de la clasificación
-   * @param {string} data.name - Nombre de la clasificación
-   * @param {string|null} data.description - Descripción de la clasificación
-   * @param {boolean} data.is_active - Estado activo/inactivo
-   * @param {number|null} data.parent_id - ID del padre
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async create(data) {
-    return new Promise((resolve, reject) => {
-      api.post(apiURL('catalogs/warehouse-classifications'), {
-        data,
-        onSuccess: (response) => {
-          resolve(response);
-        },
-        onError: (error) => { reject(error); }
-      });
-    });
-  }
-
-  /**
-   * Actualizar una clasificación de almacén
-   * @param {number} id - ID de la clasificación
-   * @param {Object} data - Datos a actualizar
-   * @param {string} [data.code] - Código de la clasificación
-   * @param {string} [data.name] - Nombre de la clasificación
-   * @param {string|null} [data.description] - Descripción de la clasificación
-   * @param {boolean} [data.is_active] - Estado activo/inactivo
-   * @param {number|null} [data.parent_id] - ID del padre
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async update(id, data) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`catalogs/warehouse-classifications/${id}`), {
-        data,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Actualizar solo el estado de una clasificación de almacén
-   * @param {number} id - ID de la clasificación
-   * @param {boolean} is_active - Nuevo estado
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async updateStatus(id, is_active) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`catalogs/warehouse-classifications/${id}`), {
-        data: { is_active },
-        onSuccess: (response) => {
-          resolve(response);
-        },
-        onError: (error) => {
-          // Mejorar el manejo de errores
-          const enhancedError = {
-            ...error,
-            timestamp: new Date().toISOString(),
-            action: 'updateStatus',
-            id: id,
-            is_active: is_active
-          };
-          reject(enhancedError);
-        }
-      });
-    });
-  }
-
-  /**
-   * Eliminar una clasificación de almacén
-   * @param {number} id - ID de la clasificación
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async delete(id) {
-    return new Promise((resolve, reject) => {
-      api.delete(apiURL(`catalogs/warehouse-classifications/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Obtener clasificaciones padre disponibles (para selects)
-   * @param {number|null} excludeId - ID a excluir de la lista (para evitar loops)
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getParentOptions(excludeId = null) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('catalogs/warehouse-classifications'), {
-        params: { exclude_children_of: excludeId },
-        onSuccess: (response) => {
-          // Aplanar la estructura jerárquica para el selector
-          const flattenOptions = (items, level = 0) => {
-            let options = [];
-            items.forEach(item => {
-              if (excludeId && (item.id === excludeId || this.hasDescendant(item, excludeId))) {
-                return; // Excluir item actual y sus descendientes
-              }
-              
-              options.push({
-                ...item,
-                name: '  '.repeat(level) + item.name, // Indentación visual
-                level
-              });
-              
-              if (item.children && item.children.length > 0) {
-                options = options.concat(flattenOptions(item.children, level + 1));
-              }
-            });
-            return options;
-          };
-
-          const flatOptions = flattenOptions(response.warehouse_classifications?.data || response.data || []);
-          resolve(flatOptions);
-        },
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Función auxiliar para verificar si un item tiene como descendiente un ID específico
-   * @param {Object} item - Item a verificar
-   * @param {number} targetId - ID objetivo
-   * @returns {boolean} True si es descendiente
-   */
-  hasDescendant(item, targetId) {
-    if (!item.children) return false;
-    return item.children.some(child => 
-      child.id === targetId || this.hasDescendant(child, targetId)
-    );
-  }
-
-  /**
-   * Alternar el estado de una clasificación
-   * @param {Object} item - Objeto con la clasificación
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async toggleStatus(item) {
-    const newStatus = !item.is_active;
-    return this.updateStatus(item.id, newStatus);
-  }
-}
\ No newline at end of file
diff --git a/src/pages/Warehouses/Create.vue b/src/pages/Warehouses/Create.vue
deleted file mode 100644
index e719482..0000000
--- a/src/pages/Warehouses/Create.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, useRoute, RouterLink } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { apiTo, transl, viewTo } from './Module';
-import WarehouseService from './services/WarehouseService';
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import GoogleIcon      from '@Shared/GoogleIcon.vue';
-import Form            from './Form.vue'
-
-/** Definidores */
-const router = useRouter();
-const route = useRoute();
-const warehouseService = new WarehouseService();
-
-/** Propiedades */
-const form = useForm({
-    code: '',
-    name: '',
-    description: '',
-    address: '',
-    classifications: [], // Array de objetos {value, label}
-    is_active: true
-});
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        classifications: warehouseService.processClassificationsForSubmit(data.classifications)
-    })).post(apiTo('store'), {
-        onSuccess: () => {
-            Notify.success('Almacén creado con éxito')
-            router.push(viewTo({ name: 'index' }));
-        }
-    })
-}
-
-/** Ciclos */
-onMounted(() => {
-    // Inicialización si es necesaria
-});
-</script>
-
-<template>
-    <PageHeader
-        :title="transl('create.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <Form
-        action="create"
-        :form="form"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/Warehouses/Details.vue b/src/pages/Warehouses/Details.vue
deleted file mode 100644
index 981b96c..0000000
--- a/src/pages/Warehouses/Details.vue
+++ /dev/null
@@ -1,444 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRoute, useRouter, RouterLink } from 'vue-router';
-import { api } from '@Services/Api';
-import { apiTo, viewTo, transl } from './Module';
-import WarehouseService from './services/WarehouseService';
-
-import Card from '@Holos/Card/Card.vue';
-import CardHeader from '@Holos/Card/CardHeader.vue';
-import CardTitle from '@Holos/Card/CardTitle.vue';
-import CardDescription from '@Holos/Card/CardDescription.vue';
-import CardContent from '@Holos/Card/CardContent.vue';
-import PageHeader from '@Holos/PageHeader.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-import Button from '@Holos/Button/Button.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-import Badge from '@Components/ui/Tags/Badge.vue';
-/** Definiciones */
-const route = useRoute();
-const router = useRouter();
-const warehouseService = new WarehouseService();
-
-/** Estado reactivo */
-const warehouse = ref(null);
-const loading = ref(true);
-const error = ref(null);
-
-// Mock data para el dashboard (adaptado del JSX)
-const totalInventoryValue = ref(2400000);
-const totalProducts = ref(145);
-const inventoryMovements = ref([
-    {
-        id: 1,
-        date: "2024-01-15T10:30:00",
-        type: "entrada",
-        product: "Laptop Dell Inspiron 15",
-        code: "PROD-001",
-        quantity: 10,
-        warehouse: "Almacén Principal",
-        reference: "PO-2024-001",
-        user: "Ana García",
-        status: "completed"
-    },
-    {
-        id: 2,
-        date: "2024-01-15T09:15:00",
-        type: "salida",
-        product: "Mouse Inalámbrico Logitech",
-        code: "PROD-002",
-        quantity: 25,
-        warehouse: "Almacén Norte",
-        reference: "SO-2024-045",
-        user: "Carlos López",
-        status: "completed"
-    }
-]);
-
-const stockByWarehouse = ref([
-    {
-        warehouse: "Almacén Principal",
-        products: [
-            { code: "PROD-001", name: "Laptop Dell Inspiron 15", stock: 45, value: 719955 },
-            { code: "PROD-002", name: "Mouse Inalámbrico Logitech", stock: 85, value: 50915 },
-            { code: "PROD-003", name: "Monitor LG 24 pulgadas", stock: 8, value: 26392 },
-            { code: "PROD-004", name: "Teclado Mecánico RGB", stock: 15, value: 32985 },
-        ]
-    }
-]);
-
-/** Métodos */
-async function loadWarehouse() {
-    try {
-        loading.value = true;
-        error.value = null;
-
-        const response = await api.get(apiTo('show', { warehouse: route.params.id }), {
-            onSuccess: (r) => {
-                warehouse.value = r.warehouse;
-                console.log('Warehouse data:', r.warehouse);
-            },
-            onError: (err) => {
-                error.value = 'Error cargando el almacén';
-            }
-        });
-
-    } catch (err) {
-        error.value = 'Error de conexión';
-    } finally {
-        loading.value = false;
-    }
-}
-
-/** Función para navegar a editar */
-const editWarehouse = () => {
-    router.push(viewTo({ name: 'edit', params: { id: warehouse.value.id } }));
-};
-
-/** Función para formatear fecha */
-const formatDate = (dateString) => {
-    if (!dateString) return 'N/A';
-    return new Date(dateString).toLocaleDateString('es-ES', {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
-    });
-};
-
-/** Función para formatear moneda */
-const formatCurrency = (amount) => {
-    return new Intl.NumberFormat('es-MX', {
-        style: 'currency',
-        currency: 'MXN'
-    }).format(amount);
-};
-
-/** Función para obtener icono de movimiento */
-const getMovementIcon = (type) => {
-    switch (type) {
-        case 'entrada': return 'arrow_downward';
-        case 'salida': return 'arrow_upward';
-        case 'transferencia': return 'swap_horiz';
-        case 'ajuste': return 'tune';
-        default: return 'inventory';
-    }
-};
-
-/** Función para obtener clase de badge de movimiento */
-const getMovementBadgeClass = (type) => {
-    switch (type) {
-        case 'entrada':
-            return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
-        case 'salida':
-            return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-        case 'transferencia':
-            return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
-        case 'ajuste':
-            return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-        default:
-            return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
-    }
-};
-
-const getAllChildren = (classifications) => {
-    let children = [];
-    const extractChildren = (items) => {
-        items.forEach(item => {
-            if (item.children && item.children.length > 0) {
-                children = children.concat(item.children);
-                extractChildren(item.children);
-            }
-        });
-    };
-    extractChildren(classifications);
-    return children;
-};
-
-/** Función para obtener clase de estado */
-const getStatusBadgeClass = (status) => {
-    switch (status) {
-        case 'completed':
-            return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
-        case 'pending':
-            return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-        case 'cancelled':
-            return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-        default:
-            return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200';
-    }
-};
-
-/** Ciclo de vida */
-onMounted(() => {
-    loadWarehouse();
-});
-</script>
-
-<template>
-    <div>
-        <!-- Header con navegación -->
-        <PageHeader :title="warehouse?.name || 'Cargando...'" :subtitle="`Código: ${warehouse?.code || 'N/A'}`">
-            <RouterLink :to="viewTo({ name: 'index' })">
-                <IconButton class="text-white" icon="arrow_back" :title="$t('return')" filled />
-            </RouterLink>
-        </PageHeader>
-
-        <!-- Estado de carga -->
-        <div v-if="loading" class="flex items-center justify-center py-12">
-            <div class="text-center">
-                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
-                <p class="text-gray-600">Cargando información del almacén...</p>
-            </div>
-        </div>
-
-        <!-- Estado de error -->
-        <div v-else-if="error" class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
-            <GoogleIcon class="w-12 h-12 text-red-400 mx-auto mb-4" name="error" />
-            <h3 class="text-lg font-medium text-red-800 mb-2">Error al cargar</h3>
-            <p class="text-red-600 mb-4">{{ error }}</p>
-            <Button @click="loadWarehouse()" color="danger" variant="outline">
-                Reintentar
-            </Button>
-        </div>
-
-        <!-- Contenido principal -->
-        <div v-else-if="warehouse" class="space-y-6">
-
-            <!-- Información básica -->
-            <Card>
-                <CardHeader>
-                    <CardTitle class="flex items-center justify-between">
-                        <div class="flex items-center space-x-3">
-                            <GoogleIcon class="w-6 h-6" name="warehouse" />
-                            <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">{{ warehouse.name
-                            }}</span>
-                        </div>
-
-                        <div class="flex items-center justify-between gap-3">
-                            <Button @click="editWarehouse" color="warning" variant="smooth" size="sm">
-                                <GoogleIcon class="w-4 h-4 mr-2" name="edit" />
-                                Editar Almacén
-                            </Button>
-                            <Button variant="smooth" color="info" size="sm">
-                                <GoogleIcon class="w-4 h-4 mr-2" name="settings" />
-                                Configuración
-                            </Button>
-                        </div>
-
-
-
-                    </CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6">
-
-                        <!-- Columna Izquierda -->
-                        <div class="space-y-6">
-                            <!-- Código -->
-                            <div class="space-y-1">
-                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Código</p>
-                                <p class="font-mono text-base font-semibold text-gray-900 dark:text-gray-100">
-                                    {{ warehouse.code }}
-                                </p>
-                            </div>
-
-                            <!-- Ubicación -->
-                            <div class="space-y-1">
-                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Ubicación</p>
-                                <p class="text-base text-gray-900 dark:text-gray-100">
-                                    {{ warehouse.address || 'Sin dirección' }}
-                                </p>
-                            </div>
-
-                            <!-- Categoría -->
-                            <div class="space-y-2" v-if="warehouse.classifications && warehouse.classifications.length">
-                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Clasificaciones</p>
-                                <div class="flex flex-wrap gap-2">
-                                    <span v-for="classification in warehouse.classifications" :key="classification.id"
-                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
-                                        {{ classification.name }}
-                                    </span>
-                                </div>
-                            </div>
-
-                            <div class="space-y-2" v-if="warehouse.classifications && warehouse.classifications.length">
-                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Subclasificaciones</p>
-                                <div class="flex flex-wrap gap-2">
-                                    <span v-for="child in getAllChildren(warehouse.classifications)" :key="child.id"
-                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
-                                        {{ child.name }}
-                                    </span>
-                                </div>
-                            </div>
-
-                            <!-- Estado -->
-                            <div class="space-y-2">
-                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Estado</p>
-                                <Badge :color="warehouse.is_active ? 'green' : 'red'">
-                                    {{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
-                                </Badge>
-                            </div>
-                        </div>
-
-                        <!-- Columna Derecha -->
-                        <div class="space-y-6">
-                            <!-- Responsable -->
-                            <div class="space-y-1">
-                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Responsable</p>
-                                <p class="text-base text-gray-900 dark:text-gray-100">
-                                    {{ warehouse.manager || 'Sin usuario responsable' }}
-                                </p>
-                            </div>
-
-                            <!-- Teléfono -->
-                            <div class="space-y-1">
-                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Teléfono</p>
-                                <p class="text-base text-gray-900 dark:text-gray-100">
-                                    {{ warehouse.phone || 'Sin número de teléfono' }}
-                                </p>
-                            </div>
-
-
-                            <div class="space-y-1">
-                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Fecha de creación</p>
-                                <p class="text-base text-gray-900 dark:text-gray-100">
-                                    {{ formatDate(warehouse.created_at) }}
-                                </p>
-                            </div>
-
-
-                            <div class="space-y-1">
-                                <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Ultima actualización</p>
-                                <p class="text-base text-gray-900 dark:text-gray-100">
-                                    {{ formatDate(warehouse.updated_at) }}
-                                </p>
-                            </div>
-                        </div>
-
-                    </div>
-                </CardContent>
-            </Card>
-
-             <!-- Stock by Products -->
-            <Card>
-                <CardHeader>
-                    <CardTitle class="flex items-center space-x-2">
-                        <GoogleIcon class="w-6 h-6 text-primary" name="inventory" />
-                        <span>Stock por Productos</span>
-                    </CardTitle>
-                    <CardDescription>
-                        Inventario actual de productos en este almacén
-                    </CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <div v-for="warehouseStock in stockByWarehouse" :key="warehouseStock.warehouse" class="space-y-4">
-                        <h4
-                            class="font-semibold text-gray-900 dark:text-gray-100 border-b border-gray-200 dark:border-gray-700 pb-2">
-                            {{ warehouseStock.warehouse }}
-                        </h4>
-
-                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-                            <div v-for="product in warehouseStock.products" :key="product.code"
-                                class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-
-                                <div class="flex items-center justify-between mb-2">
-                                    <span
-                                        class="text-xs font-mono text-gray-500 bg-white dark:bg-gray-900 px-2 py-1 rounded">
-                                        {{ product.code }}
-                                    </span>
-                                    <span class="text-sm font-bold text-gray-900 dark:text-gray-100">
-                                        {{ product.stock }} unidades
-                                    </span>
-                                </div>
-
-                                <h5 class="font-medium text-gray-900 dark:text-gray-100 mb-2 text-sm">
-                                    {{ product.name }}
-                                </h5>
-
-                                <div class="flex items-center justify-between">
-                                    <span class="text-xs text-gray-600 dark:text-gray-400">Valor total:</span>
-                                    <span class="text-sm font-semibold text-green-600 dark:text-green-400">
-                                        {{ formatCurrency(product.value) }}
-                                    </span>
-                                </div>
-
-                            </div>
-                        </div>
-                    </div>
-                </CardContent>
-            </Card>
-
-            <!-- Recent Movements -->
-            <Card>
-                <CardHeader>
-                    <CardTitle class="flex items-center space-x-2">
-                        <GoogleIcon class="w-6 h-6 text-primary" name="history" />
-                        <span>Movimientos Recientes</span>
-                    </CardTitle>
-                    <CardDescription>
-                        Últimos movimientos de inventario en este almacén
-                    </CardDescription>
-                </CardHeader>
-                <CardContent>
-                    <div class="space-y-4">
-                        <div v-for="movement in inventoryMovements" :key="movement.id"
-                            class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-
-                            <div class="flex items-center space-x-4">
-                                <div class="h-10 w-10 rounded-lg flex items-center justify-center" :class="movement.type === 'entrada' ? 'bg-green-100 dark:bg-green-900' :
-                                    movement.type === 'salida' ? 'bg-red-100 dark:bg-red-900' :
-                                        movement.type === 'transferencia' ? 'bg-blue-100 dark:bg-blue-900' :
-                                            'bg-yellow-100 dark:bg-yellow-900'">
-                                    <GoogleIcon class="w-5 h-5" :class="movement.type === 'entrada' ? 'text-green-600 dark:text-green-400' :
-                                        movement.type === 'salida' ? 'text-red-600 dark:text-red-400' :
-                                            movement.type === 'transferencia' ? 'text-blue-600 dark:text-blue-400' :
-                                                'text-yellow-600 dark:text-yellow-400'"
-                                        :name="getMovementIcon(movement.type)" />
-                                </div>
-
-                                <div>
-                                    <p class="font-medium text-gray-900 dark:text-gray-100">{{ movement.product }}</p>
-                                    <p class="text-sm text-gray-600 dark:text-gray-400">
-                                        {{ movement.code }} • {{ movement.reference }}
-                                    </p>
-                                </div>
-                            </div>
-
-                            <div class="flex items-center space-x-4">
-                                <div class="text-right">
-                                    <span
-                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize"
-                                        :class="getMovementBadgeClass(movement.type)">
-                                        {{ movement.type }}
-                                    </span>
-                                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-                                        Cantidad: {{ movement.quantity }}
-                                    </p>
-                                </div>
-
-                                <div class="text-right">
-                                    <p class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ movement.user }}
-                                    </p>
-                                    <p class="text-xs text-gray-500">{{ formatDate(movement.date) }}</p>
-                                </div>
-
-                                <span
-                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium capitalize"
-                                    :class="getStatusBadgeClass(movement.status)">
-                                    {{ movement.status === 'completed' ? 'Completado' :
-                                        movement.status === 'pending' ? 'Pendiente' : 'Cancelado' }}
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </CardContent>
-            </Card>
-
-           
-
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Warehouses/Edit.vue b/src/pages/Warehouses/Edit.vue
deleted file mode 100644
index 1adc8dd..0000000
--- a/src/pages/Warehouses/Edit.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { RouterLink, useRoute, useRouter } from 'vue-router';
-import { api, useForm } from '@Services/Api';
-import { viewTo, apiTo, transl } from './Module';
-import WarehouseService from './services/WarehouseService';
-
-
-import IconButton      from '@Holos/Button/Icon.vue'
-import PageHeader      from '@Holos/PageHeader.vue';
-import Form            from './Form.vue'
-
-/** Definiciones */
-const vroute = useRoute();
-const router = useRouter();
-const warehouseService = new WarehouseService();
-/** Propiedades */
-const form = useForm({
-    id: null,
-    code: '',
-    name: '',
-    description: '',
-    address: '',
-    classifications: [], // Array de objetos {value, label}
-    is_active: true
-});
-
-/** Métodos */
-function submit() {
-    form.transform(data => ({
-        ...data,
-        classifications: warehouseService.processClassificationsForSubmit(data.classifications)
-    })).put(apiTo('update', { warehouse: form.id }), {
-        onSuccess: () => {
-            Notify.success(transl('update.success'))
-            router.push(viewTo({ name: 'index' }));
-        },
-    })
-}
-
-function loadData() {
-    api.get(apiTo('show', { warehouse: vroute.params.id }), {
-        onSuccess: async (r) => {
-            const data = r.warehouse;
-            console.log('Datos del warehouse:', data);
-
-            try {
-                // Cargar las clasificaciones disponibles
-                const availableClassifications = await warehouseService.getAvailableClassifications();
-               
-                // Procesar las clasificaciones del warehouse para el formulario
-                const warehouseClassifications = data.classifications || [];
-                const formattedClassifications = [];
-
-                warehouseClassifications.forEach(classification => {
-                    // Agregar la clasificación padre
-                    formattedClassifications.push({
-                        value: classification.id,
-                        label: classification.name,
-                        id: classification.id,
-                        name: classification.name
-                    });
-
-                    // Agregar los hijos si existen
-                    if (classification.children && classification.children.length > 0) {
-                        classification.children.forEach(child => {
-                            formattedClassifications.push({
-                                value: child.id,
-                                label: child.name,
-                                id: child.id,
-                                name: child.name
-                            });
-                        });
-                    }
-                });
-
-                form.fill({
-                    id: data.id,
-                    code: data.code,
-                    name: data.name,
-                    description: data.description || '',
-                    address: data.address || '',
-                    classifications: formattedClassifications,
-                    is_active: Boolean(data.is_active)
-                });
-
-            } catch (error) {
-                console.error('Error cargando clasificaciones:', error);
-                // Fallback: llenar sin formatear las clasificaciones
-                form.fill({
-                    id: data.id,
-                    code: data.code,
-                    name: data.name,
-                    description: data.description || '',
-                    address: data.address || '',
-                    classifications: [],
-                    is_active: Boolean(data.is_active)
-                });
-            }
-        }
-    })
-}
-
-/** Ciclos */
-onMounted(() => {
-    loadData();
-});
-</script>
-
-<template>
-    <PageHeader
-        :title="transl('update.title')"
-    >
-        <RouterLink :to="viewTo({ name: 'index' })">
-            <IconButton
-                class="text-white"
-                icon="arrow_back"
-                :title="$t('return')"
-                filled
-            />
-        </RouterLink>
-    </PageHeader>
-    
-    <Form
-        action="update"
-        :form="form"
-        @submit="submit"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/Warehouses/Form.vue b/src/pages/Warehouses/Form.vue
deleted file mode 100644
index 15f8ba6..0000000
--- a/src/pages/Warehouses/Form.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<script setup>
-import { ref, onMounted, computed, watch } from 'vue';
-import { transl } from './Module';
-import WarehouseService from './services/WarehouseService';
-
-import PrimaryButton from '@Holos/Button/Primary.vue';
-import Input         from '@Holos/Form/Input.vue';
-import Textarea      from '@Holos/Form/Textarea.vue';
-import Selectable    from '@Holos/Form/Selectable.vue';
-import Checkbox      from '@Holos/Checkbox.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'submit'
-])
-
-/** Servicios */
-const warehouseService = new WarehouseService();
-
-/** Propiedades reactivas */
-const allClassifications = ref([]);
-const loadingClassifications = ref(true);
-const selectedParentClassifications = ref([]);
-
-/** Propiedades */
-const props = defineProps({
-    action: {
-        default: 'create',
-        type: String
-    },
-    form: Object
-})
-
-/** Computadas */
-// Obtener solo las clasificaciones padre (sin parent_id)
-const parentClassifications = computed(() => {
-    return allClassifications.value.filter(classification => !classification.parent_id);
-});
-
-// Obtener subclasificaciones de los padres seleccionados
-const availableSubclassifications = computed(() => {
-    if (selectedParentClassifications.value.length === 0) {
-        return [];
-    }
-    
-    return allClassifications.value.filter(classification => 
-        classification.parent_id && 
-        selectedParentClassifications.value.includes(classification.parent_id)
-    );
-});
-
-/** Métodos */
-function submit() {
-    emit('submit')
-}
-
-/** Manejar selección de clasificación padre */
-function handleParentClassificationChange(parentId, isSelected) {
-    if (isSelected) {
-        if (!selectedParentClassifications.value.includes(parentId)) {
-            selectedParentClassifications.value.push(parentId);
-            // Agregar la clasificación padre al form.classifications
-            const parentClassification = allClassifications.value.find(c => c.id === parentId);
-            if (parentClassification) {
-                props.form.classifications.push({
-                    value: parentClassification.id,
-                    label: parentClassification.name,
-                    id: parentClassification.id,
-                    name: parentClassification.name
-                });
-            }
-        }
-    } else {
-        selectedParentClassifications.value = selectedParentClassifications.value.filter(id => id !== parentId);
-        
-        // Remover la clasificación padre del form.classifications
-        props.form.classifications = props.form.classifications.filter(classification => {
-            const classificationId = classification.value || classification.id || classification;
-            return classificationId !== parentId;
-        });
-        
-        // Remover también las subclasificaciones de este padre
-        if (props.form.classifications) {
-            props.form.classifications = props.form.classifications.filter(classification => {
-                const classificationId = classification.value || classification.id || classification;
-                const subClass = allClassifications.value.find(c => c.id === classificationId);
-                return !subClass || subClass.parent_id !== parentId;
-            });
-        }
-    }
-}
-
-/** Cargar clasificaciones desde la API */
-async function loadClassifications() {
-    try {
-        loadingClassifications.value = true;
-        const response = await warehouseService.getAvailableClassifications();
-        
-        // La respuesta viene en el formato { data: { warehouse_classifications: { data: [...] } } }
-        const classificationsData = response.data?.warehouse_classifications?.data || response.warehouse_classifications?.data || response.data || [];
-        
-        // Aplanar la estructura jerárquica para tener todos los elementos en un solo array
-        const flattenClassifications = (items) => {
-            let flattened = [];
-            items.forEach(item => {
-                // Agregar el item padre
-                flattened.push(item);
-                // Agregar los hijos si existen
-                if (item.children && item.children.length > 0) {
-                    flattened.push(...item.children);
-                }
-            });
-            return flattened;
-        };
-        
-        allClassifications.value = flattenClassifications(classificationsData);
-        console.log('Clasificaciones cargadas:', allClassifications.value);
-    } catch (error) {
-        console.error('Error cargando clasificaciones:', error);
-        allClassifications.value = [];
-    } finally {
-        loadingClassifications.value = false;
-    }
-}
-
-/** Watch para sincronizar con form.classifications existentes */
-watch(() => props.form?.classifications, (newClassifications) => {
-    console.log('Watch form.classifications triggered:', newClassifications);
-    if (newClassifications && newClassifications.length > 0 && allClassifications.value.length > 0) {
-        // Extraer padres de las clasificaciones ya seleccionadas
-        const parentIds = new Set();
-        newClassifications.forEach(classification => {
-            const classificationId = classification.value || classification.id || classification;
-            console.log('Processing classification ID:', classificationId);
-            const fullClassification = allClassifications.value.find(c => c.id === classificationId);
-            console.log('Found full classification:', fullClassification);
-            
-            if (fullClassification) {
-                if (fullClassification.parent_id) {
-                    // Es una subclasificación, agregar su padre
-                    console.log('Adding parent ID:', fullClassification.parent_id);
-                    parentIds.add(fullClassification.parent_id);
-                } else {
-                    // Es una clasificación padre, agregarla directamente
-                    console.log('Adding parent classification ID:', fullClassification.id);
-                    parentIds.add(fullClassification.id);
-                }
-            }
-        });
-        console.log('Final parent IDs:', Array.from(parentIds));
-        selectedParentClassifications.value = Array.from(parentIds);
-    }
-}, { deep: true, immediate: true });
-
-/** Watch adicional para cuando se cargan las clasificaciones */
-watch(() => allClassifications.value, () => {
-    console.log('Watch allClassifications triggered, length:', allClassifications.value.length);
-    if (props.form?.classifications && allClassifications.value.length > 0) {
-        console.log('Re-processing form.classifications:', props.form.classifications);
-        // Re-ejecutar la lógica de sincronización cuando se cargan las clasificaciones
-        const parentIds = new Set();
-        props.form.classifications.forEach(classification => {
-            const classificationId = classification.value || classification.id || classification;
-            console.log('Re-processing classification ID:', classificationId);
-            const fullClassification = allClassifications.value.find(c => c.id === classificationId);
-            
-            if (fullClassification) {
-                if (fullClassification.parent_id) {
-                    // Es una subclasificación, agregar su padre
-                    console.log('Re-adding parent ID:', fullClassification.parent_id);
-                    parentIds.add(fullClassification.parent_id);
-                } else {
-                    // Es una clasificación padre, agregarla directamente
-                    console.log('Re-adding parent classification ID:', fullClassification.id);
-                    parentIds.add(fullClassification.id);
-                }
-            }
-        });
-        console.log('Re-processed parent IDs:', Array.from(parentIds));
-        selectedParentClassifications.value = Array.from(parentIds);
-    }
-});
-
-/** Ciclo de vida */
-onMounted(() => {
-    loadClassifications();
-});
-</script>
-
-<template>
-    <div class="w-full pb-2">
-        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
-    </div>
-    <div class="w-full">
-        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            <!-- Código del almacén -->
-            <Input
-                v-model="props.form.code"
-                id="code"
-                title="Código"
-                :onError="props.form.errors.code"
-                placeholder="Ej: WH001"
-                autofocus
-                required
-            />
-            
-            <!-- Nombre del almacén -->
-            <Input
-                v-model="props.form.name"
-                id="name"
-                title="Nombre"
-                :onError="props.form.errors.name"
-                placeholder="Ej: Almacén Central"
-                required
-            />
-            
-            <!-- Descripción -->
-            <Textarea
-                v-model="props.form.description"
-                id="description"
-                title="Descripción"
-                :onError="props.form.errors.description"
-                placeholder="Descripción del almacén..."
-                class="md:col-span-2"
-                rows="3"
-            />
-            
-            <!-- Dirección -->
-            <Textarea
-                v-model="props.form.address"
-                id="address"
-                title="Dirección"
-                :onError="props.form.errors.address"
-                placeholder="Dirección física del almacén..."
-                class="md:col-span-2"
-                rows="2"
-            />
-            
-            <!-- Clasificaciones Jerárquicas -->
-            <div class="md:col-span-2 lg:col-span-3 xl:col-span-4">
-                <div class="space-y-4">
-                    <!-- Titulo de Clasificaciones -->
-                    <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">
-                        Clasificaciones
-                    </h3>
-                    
-                    <!-- Mensaje de carga -->
-                    <div v-if="loadingClassifications" class="text-sm text-gray-500">
-                        Cargando clasificaciones...
-                    </div>
-                    
-                    
-                    <!-- Clasificaciones Padre -->
-                    <div v-if="parentClassifications.length > 0" class="space-y-3">
-                        <h4 class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                            Clasificaciones
-                        </h4>
-                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-                            <div 
-                                v-for="parent in parentClassifications" 
-                                :key="parent.id"
-                                class="flex items-center space-x-2"
-                            >
-            
-                                <Checkbox
-                                    :id="`parent-${parent.id}`"
-                                    :checked="selectedParentClassifications.includes(parent.id)"
-                                    @update:checked="(value) => handleParentClassificationChange(parent.id, value)"
-                                />
-    
-                                <label 
-                                    :for="`parent-${parent.id}`" 
-                                    class="text-sm font-medium text-gray-700 dark:text-gray-300 cursor-pointer"
-                                >
-                                    {{ parent.name }}
-                                </label>
-                            </div>
-                        </div>
-                        
-                        <!-- Tags de clasificaciones seleccionadas -->
-                        <div v-if="selectedParentClassifications.length > 0" class="flex flex-wrap gap-2 mt-2">
-                            <span 
-                                v-for="parentId in selectedParentClassifications" 
-                                :key="parentId"
-                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
-                            >
-                                {{ parentClassifications.find(p => p.id === parentId)?.name }}
-                            </span>
-                        </div>
-                    </div>
-                    
-                    <!-- Subclasificaciones -->
-                    <div v-if="availableSubclassifications.length > 0" class="space-y-3 pt-4 border-t border-gray-200 dark:border-gray-700">
-                        <h4 class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                            Subclasificaciones
-                        </h4>
-                        <Selectable
-                            v-model="props.form.classifications"
-                            id="subclassifications"
-                            label="name"
-                            value="id"
-                            :onError="props.form.errors.classifications"
-                            :options="availableSubclassifications.map(sub => ({ 
-                                value: sub.id, 
-                                label: sub.name,
-                                name: sub.name,
-                                id: sub.id
-                            }))"
-                            placeholder="Seleccionar subclasificaciones"
-                            multiple
-                        />
-                    </div>
-                    
-                    <!-- Mensaje cuando no hay clasificaciones padre seleccionadas -->
-                    <div v-else-if="!loadingClassifications && selectedParentClassifications.length === 0" class="text-sm text-gray-500 italic">
-                        Selecciona al menos una clasificación para ver las subclasificaciones disponibles
-                    </div>
-                    
-                    <!-- Error de clasificaciones -->
-                    <div v-if="props.form.errors.classifications" class="text-sm text-red-600 dark:text-red-400">
-                        {{ props.form.errors.classifications }}
-                    </div>
-                </div>
-            </div>
-            
-            
-            <!-- Botón de envío -->
-            <div class="md:col-span-2 lg:col-span-3 xl:col-span-4">
-                <PrimaryButton
-                    :loading="props.form.processing"
-                    :disabled="props.form.processing"
-                >
-                    {{ transl(`${props.action}.button`) }}
-                </PrimaryButton>
-            </div>
-        </form>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Warehouses/Index.vue b/src/pages/Warehouses/Index.vue
deleted file mode 100644
index f4bfea2..0000000
--- a/src/pages/Warehouses/Index.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { useRouter, RouterLink } from 'vue-router';
-import { useSearcher } from '@Services/Api';
-import { hasPermission } from '@Plugins/RolePermission';
-import { can, apiTo, viewTo, transl } from './Module'
-
-import IconButton from '@Holos/Button/Icon.vue'
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-import SearcherHead from '@Holos/Searcher.vue';
-import Table from '@Holos/Table.vue';
-import ShowView from './Modals/Show.vue';
-
-import Card from '@Holos/Card/Card.vue';
-import CardHeader from '@Holos/Card/CardHeader.vue';
-import CardTitle from '@Holos/Card/CardTitle.vue';
-import CardDescription from '@Holos/Card/CardDescription.vue';
-import CardContent from '@Holos/Card/CardContent.vue';
-//import Button from '@Holos/Button/Button.vue';
-
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-
-/** Propiedades */
-const models = ref([]);
-const router = useRouter();
-
-/** Referencias */
-const showModal = ref(null);
-const destroyModal = ref(null);
-
-/** Métodos */
-const searcher = useSearcher({
-    url: apiTo('index'),
-    onSuccess: (r) => {
-        console.log('Datos recibidos:', r);
-        console.log('Warehouses:', r.warehouses);
-        if (r.warehouses && r.warehouses.length > 0) {
-            console.log('Primer warehouse:', r.warehouses[0]);
-        }
-        models.value = r.warehouses;
-    },
-    onError: () => models.value = []
-});
-
-/** Función para eliminar */
-const deleteItem = (item) => {
-    destroyModal.value.open(item);
-};
-
-/** Función de debug para navegación */
-const debugNavigation = (warehouse) => {
-    console.log('Debug navigation:', warehouse);
-    console.log('viewTo result:', viewTo({ name: 'edit', params: { id: warehouse.id } }));
-    router.push(viewTo({ name: 'edit', params: { id: warehouse.id } }));
-};
-
-/** Ciclos */
-onMounted(() => {
-    searcher.search();
-});
-
-import Button from "primevue/button"
-</script>
-
-<template>
-    <div>
-        <div className="flex items-center justify-between">
-            <div>
-                <h1 className="text-3xl font-bold text-foreground">Inventario</h1>
-                <p className="text-muted-foreground">
-                    Control de stock y movimientos por almacén
-                    
-                </p>
-            </div>
-        </div>
-        <SearcherHead :title="transl('name')" @search="(x) => searcher.search(x)">
-            <RouterLink :to="viewTo({ name: 'create' })">
-                <IconButton class="text-white" icon="add" :title="$t('crud.create')" filled />
-            </RouterLink>
-            <IconButton icon="refresh" :title="$t('refresh')" @click="searcher.search()" />
-        </SearcherHead>
-
-        <div>
-            <CardHeader>
-                <CardTitle>Gestión de Almacenes</CardTitle>
-                <CardDescription>
-                    Gestiona los almacenes donde se almacenan los productos. Puedes crear, editar y eliminar almacenes
-                    según sea necesario.
-                </CardDescription>
-            </CardHeader>
-            <CardContent>
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-
-                    <Card v-for="warehouse in models.data" :key="warehouse.id" class="relative overflow-hidden">
-                        <CardContent class="pt-4 pb-4 px-4">
-                            <div class="flex items-start justify-between mb-3">
-                                <div class="flex items-center space-x-2">
-                                    <GoogleIcon class="w-6 h-6 text-primary" name="warehouse" />
-                                    <div>
-                                        <h3 class="font-semibold text-sm">{{ warehouse.name }}</h3>
-                                        <p class="text-xs text-muted-foreground font-mono">
-                                            {{ warehouse.code }}
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="flex items-center space-x-2">
-                                    {{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
-                                </div>
-                            </div>
-
-                            <div class="flex items-center space-x-1 text-xs text-muted-foreground mb-2">
-                                <GoogleIcon class="w-6 h-6" name="distance" />
-                                <p>{{ warehouse.address ? warehouse.address : 'Sin dirección' }}</p>
-                            </div>
-
-                            <div className="flex items-center space-x-1 text-xs text-muted-foreground mb-3">
-
-                                <span v-for="classification in warehouse.classifications" :key="classification.id"
-                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
-                                    {{ classification.code }}
-                                </span>
-                                <span v-if="warehouse.classifications.length > 3"
-                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
-                                    +{{ warehouse.classifications.length - 3 }}
-                                </span>
-                                <span v-if="warehouse.classifications.length === 0" class="text-xs text-gray-400">
-                                    Sin clasificaciones
-                                </span>
-
-                            </div>
-
-                            <div class="flex justify-end mt-3 pt-2 border-t border-border gap-3">
-
-                                <RouterLink class="h-fit" :to="viewTo({ name: 'details', params: { id: warehouse.id } })">
-                                    <Button severity="info" label="Ver detalles" />
-                                </RouterLink>
-
-                                <Button severity="primary" label="Ver detalles" />
-
-                                <!-- Opción 1: RouterLink + asLink -->
-                                <RouterLink class="h-fit" :to="viewTo({ name: 'edit', params: { id: warehouse.id } })">
-                                    <Button severity="warn" label="Editar" />
-                                </RouterLink>
-
-                                <Button severity="danger" label="Eliminar" @click="deleteItem(warehouse)"/>
-
-                            </div>
-
-                        </CardContent>
-                    </Card>
-
-                </div>
-
-            </CardContent>
-        </div>
-
-        <ShowView ref="showModal" @reload="searcher.search()" />
-
-        <DestroyView ref="destroyModal" subtitle="name" :to="(id) => apiTo('destroy', { warehouse: id })"
-            @update="searcher.search()" />
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/pages/Warehouses/Modals/Show.vue b/src/pages/Warehouses/Modals/Show.vue
deleted file mode 100644
index 248fd8b..0000000
--- a/src/pages/Warehouses/Modals/Show.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { getDateTime } from '@Controllers/DateController';
-import { viewTo, apiTo, transl } from '../Module';
-import WarehouseService from '../services/WarehouseService';
-import Notify from '@Plugins/Notify';
-
-import Header     from '@Holos/Modal/Elements/Header.vue';
-import ShowModal  from '@Holos/Modal/Show.vue';
-import GoogleIcon from '@Shared/GoogleIcon.vue';
-import Button     from '@Holos/Button/Button.vue';
-import IconButton from '@Holos/Button/Icon.vue';
-import DestroyView from '@Holos/Modal/Template/Destroy.vue';
-
-/** Eventos */
-const emit = defineEmits([
-    'close', 
-    'reload'
-]);
-
-/** Servicios */
-const warehouseService = new WarehouseService();
-const router = useRouter();
-
-/** Propiedades */
-const model    = ref(null);
-const loading  = ref(false);
-
-/** Referencias */
-const modalRef = ref(null);
-const destroyModal = ref(null);
-
-/** Métodos */
-function close() {
-    model.value = null;
-    emit('close');
-}
-
-/** Función para actualizar el estado del almacén */
-async function toggleStatus(item) {
-    if (loading.value) return;
-    
-    const newStatus = !item.is_active;
-    
-    try {
-        loading.value = true;
-        
-        // Usar el servicio para actualizar el estado
-        await warehouseService.updateStatus(item.id, newStatus);
-        
-        // Actualizar el modelo local
-        item.is_active = newStatus;
-        
-        // Notificación de éxito
-        const statusText = newStatus ? 'activado' : 'desactivado';
-        Notify.success(
-            `Almacén "${item.code}" ${statusText} exitosamente`,
-            'Estado actualizado'
-        );
-        
-        // Emitir evento para recargar la lista principal si es necesario
-        emit('reload');
-        
-    } catch (error) {
-        console.error('Error actualizando estado:', error);
-        
-        // Manejo específico de errores según la estructura de tu API
-        let errorMessage = 'Error al actualizar el estado del almacén';
-        let errorTitle = 'Error';
-        
-        if (error?.response?.data) {
-            const errorData = error.response.data;
-            
-            // Caso 1: Error con estructura específica de tu API
-            if (errorData.status === 'error') {
-                if (errorData.errors) {
-                    // Errores de validación - extraer el primer error
-                    const firstField = Object.keys(errorData.errors)[0];
-                    const firstError = errorData.errors[firstField];
-                    errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
-                    errorTitle = 'Error de validación';
-                } else if (errorData.message) {
-                    // Mensaje general del error
-                    errorMessage = errorData.message;
-                    errorTitle = 'Error del servidor';
-                }
-            }
-            // Caso 2: Otros formatos de error
-            else if (errorData.message) {
-                errorMessage = errorData.message;
-            }
-        } else if (error?.message) {
-            // Error genérico de la petición (red, timeout, etc.)
-            errorMessage = `Error de conexión: ${error.message}`;
-            errorTitle = 'Error de red';
-        }
-        
-        // Notificación de error
-        Notify.error(errorMessage, errorTitle);
-        
-    } finally {
-        loading.value = false;
-    }
-}
-
-/** Función para editar almacén */
-function editWarehouse() {
-    // Navegar a la vista de edición del almacén
-    const editUrl = viewTo({ name: 'edit', params: { id: model.value.id } });
-    router.push(editUrl);
-    // Cerrar el modal actual
-    close();
-}
-
-/** Función para eliminar almacén */
-function deleteWarehouse() {
-    destroyModal.value.open(model.value);
-}
-
-/** Función para recargar después de eliminar */
-function onWarehouseDeleted() {
-    close();
-    emit('reload');
-    
-    Notify.success(
-        'Almacén eliminado exitosamente',
-        'Eliminación exitosa'
-    );
-}
-
-/** Función para cancelar eliminación */
-function onDeleteCancelled() {
-    // No es necesario hacer nada especial
-}
-
-/** Exposer métodos públicos */
-defineExpose({
-    open: (data) => {
-        model.value = data;
-        modalRef.value.open();
-    },
-    close
-});
-</script>
-
-<template>
-    <ShowModal
-        ref="modalRef"
-        @close="close"
-    >
-        <div v-if="model">
-            <Header
-                :title="model.code"
-                :subtitle="model.name"
-            >
-                <div class="flex w-full flex-col">
-                    <div class="flex w-full justify-center items-center">
-                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center">
-                            <GoogleIcon 
-                                class="text-white text-3xl"
-                                name="warehouse"
-                            />
-                        </div>
-                    </div>
-                </div>
-            </Header>
-            
-            <div class="flex w-full p-4 space-y-6">
-                <div class="w-full space-y-6">
-                    <!-- Información Principal -->
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <!-- Código y Estado -->
-                        <div class="space-y-4">
-                            <div>
-                                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                                    {{ transl('code') }}
-                                </label>
-                                <div class="mt-1">
-                                    <code class="font-mono text-lg bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded-lg block">
-                                        {{ model.code }}
-                                    </code>
-                                </div>
-                            </div>
-                            
-                            <div>
-                                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                                    {{ transl('is_active') }}
-                                </label>
-                                <div class="mt-2">
-                                    <Button
-                                        :variant="'smooth'"
-                                        :color="model.is_active ? 'success' : 'danger'"
-                                        :size="'sm'"
-                                        :loading="loading"
-                                        @click="toggleStatus(model)"
-                                    >
-                                        {{ model.is_active ? $t('Activo') : $t('Inactivo') }}
-                                    </Button>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Nombre y Dirección -->
-                        <div class="space-y-4">
-                            <div>
-                                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                                    {{ transl('name') }}
-                                </label>
-                                <p class="mt-1 text-lg font-semibold">{{ model.name }}</p>
-                            </div>
-                            
-                            <div v-if="model.address">
-                                <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                                    {{ transl('address') }}
-                                </label>
-                                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ model.address }}</p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Descripción -->
-                    <div v-if="model.description">
-                        <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                            {{ transl('description') }}
-                        </label>
-                        <div class="mt-1 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                            <p class="text-sm">{{ model.description }}</p>
-                        </div>
-                    </div>
-
-                    <!-- Clasificaciones -->
-                    <div>
-                        <label class="text-sm font-medium text-gray-600 dark:text-gray-400">
-                            {{ transl('classifications') }}
-                        </label>
-                        <div class="mt-2">
-                            <div v-if="model.classifications && model.classifications.length > 0" class="flex flex-wrap gap-2">
-                                <span 
-                                    v-for="classification in model.classifications" 
-                                    :key="classification.id"
-                                    class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200"
-                                >
-                                    <GoogleIcon class="w-4 h-4 mr-2" name="category" />
-                                    {{ classification.code }} - {{ classification.name }}
-                                </span>
-                            </div>
-                            <div v-else class="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                                <GoogleIcon class="w-5 h-5 mr-2 text-gray-400" name="info" />
-                                <p class="text-sm text-gray-500">Sin clasificaciones asignadas</p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Información de Fechas -->
-                    <div class="border-t pt-6">
-                        <h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-4">
-                            Información del Sistema
-                        </h4>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-                            <div>
-                                <span class="font-medium text-gray-600 dark:text-gray-400">Creado:</span>
-                                <p class="mt-1">{{ getDateTime(model.created_at) }}</p>
-                            </div>
-                            <div>
-                                <span class="font-medium text-gray-600 dark:text-gray-400">Actualizado:</span>
-                                <p class="mt-1">{{ getDateTime(model.updated_at) }}</p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Botones de acción -->
-                    <div class="flex justify-between space-x-3 pt-4 border-t">
-                        <div class="flex space-x-2">
-                            <Button
-                                variant="outline"
-                                @click="editWarehouse"
-                            >
-                                <GoogleIcon class="w-4 h-4 mr-2" name="edit" />
-                                {{ $t('crud.edit') }}
-                            </Button>
-                            <Button
-                                variant="outline"
-                                color="danger"
-                                @click="deleteWarehouse"
-                            >
-                                <GoogleIcon class="w-4 h-4 mr-2" name="delete" />
-                                {{ $t('crud.destroy') }}
-                            </Button>
-                        </div>
-                        <Button
-                            variant="ghost"
-                            @click="close"
-                        >
-                            {{ $t('crud.close') }}
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </ShowModal>
-
-    <!-- Modal de confirmación para eliminar -->
-    <DestroyView 
-        ref="destroyModal"
-        subtitle="name"
-        :to="(id) => apiTo('destroy', { warehouse: id })"
-        @update="onWarehouseDeleted"
-        @cancel="onDeleteCancelled"
-    />
-</template>
\ No newline at end of file
diff --git a/src/pages/Warehouses/Module.js b/src/pages/Warehouses/Module.js
deleted file mode 100644
index 2945957..0000000
--- a/src/pages/Warehouses/Module.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { lang } from '@Lang/i18n';
-import { hasPermission } from '@Plugins/RolePermission.js';
-
-// Ruta API
-const apiTo = (name, params = {}) => route(`warehouses.${name}`, params)
-
-// Ruta visual
-const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
-    name: `admin.warehouses.${name}`, params, query 
-})
-    
-// Obtener traducción del componente
-const transl = (str) => lang(`admin.warehouses.${str}`)
-
-// Control de permisos
-const can = (permission) => hasPermission(`admin.warehouses.${permission}`)
-
-export {
-    can,
-    viewTo,
-    apiTo,
-    transl
-}
\ No newline at end of file
diff --git a/src/pages/Warehouses/e.jsx b/src/pages/Warehouses/e.jsx
deleted file mode 100644
index 56fb530..0000000
--- a/src/pages/Warehouses/e.jsx
+++ /dev/null
@@ -1,1125 +0,0 @@
-import { useState } from "react"
-import { useNavigate } from "react-router-dom"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { Badge } from "@/components/ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
-import { Checkbox } from "@/components/ui/checkbox"
-import { 
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table"
-import { 
-  Warehouse, 
-  Search, 
-  ArrowUpRight,
-  ArrowDownLeft,
-  RefreshCw,
-  Plus,
-  Minus,
-  TrendingUp,
-  MapPin,
-  Filter,
-  Eye,
-  Settings as SettingsIcon
-} from "lucide-react"
-
-// Mock data
-const warehouseCategories = [
-  { id: "general", name: "General", subcategories: ["electronica", "oficina", "herramientas"] },
-  { id: "cold", name: "Refrigerado", subcategories: ["alimentos", "medicamentos", "quimicos"] },
-  { id: "hazmat", name: "Materiales Peligrosos", subcategories: ["inflamables", "toxicos", "corrosivos"] },
-  { id: "bulk", name: "Granel", subcategories: ["liquidos", "solidos", "granulados"] }
-]
-
-const warehouses = [
-  {
-    id: 1,
-    code: "WH-001",
-    name: "Almacén Principal",
-    location: "Ciudad de México, Centro",
-    type: "general",
-    category: "general",
-    subcategory: "electronica",
-    totalProducts: 145,
-    totalValue: 2400000,
-    capacity: "80%",
-    status: "active",
-    manager: "Ana García",
-    phone: "+52 55 1234-5678",
-    email: "ana.garcia@empresa.com",
-    area: "2500 m²",
-    temperature: "18-24°C",
-    humidity: "45-60%"
-  },
-  {
-    id: 2,
-    code: "WH-002", 
-    name: "Almacén Norte",
-    location: "Guadalajara, Zona Industrial",
-    type: "general",
-    category: "general",
-    subcategory: "oficina",
-    totalProducts: 89,
-    totalValue: 1200000,
-    capacity: "45%",
-    status: "active",
-    manager: "Carlos López",
-    phone: "+52 33 9876-5432",
-    email: "carlos.lopez@empresa.com",
-    area: "1800 m²",
-    temperature: "20-25°C",
-    humidity: "40-55%"
-  },
-  {
-    id: 3,
-    code: "WH-003",
-    name: "Almacén Refrigerado",
-    location: "Monterrey, Zona Logística",
-    type: "cold",
-    category: "cold",
-    subcategory: "alimentos",
-    totalProducts: 65,
-    totalValue: 890000,
-    capacity: "90%",
-    status: "full",
-    manager: "María Rodríguez",
-    phone: "+52 81 5555-0123",
-    email: "maria.rodriguez@empresa.com",
-    area: "1200 m²",
-    temperature: "2-8°C",
-    humidity: "85-90%"
-  },
-  {
-    id: 4,
-    code: "WH-004",
-    name: "Almacén Sur",
-    location: "Puebla, Zona Centro",
-    type: "general",
-    category: "general",
-    subcategory: "herramientas",
-    totalProducts: 45,
-    totalValue: 650000,
-    capacity: "30%",
-    status: "inactive",
-    manager: "Jorge Martínez",
-    phone: "+52 222 1111-2222",
-    email: "jorge.martinez@empresa.com",
-    area: "1000 m²",
-    temperature: "15-30°C",
-    humidity: "35-65%"
-  }
-]
-
-const inventoryMovements = [
-  {
-    id: 1,
-    date: "2024-01-15T10:30:00",
-    type: "entrada",
-    product: "Laptop Dell Inspiron 15",
-    code: "PROD-001",
-    quantity: 10,
-    warehouse: "Almacén Principal",
-    reference: "PO-2024-001",
-    user: "Ana García",
-    status: "completed"
-  },
-  {
-    id: 2,
-    date: "2024-01-15T09:15:00",
-    type: "salida",
-    product: "Mouse Inalámbrico Logitech",
-    code: "PROD-002", 
-    quantity: 25,
-    warehouse: "Almacén Norte",
-    reference: "SO-2024-045",
-    user: "Carlos López",
-    status: "completed"
-  },
-  {
-    id: 3,
-    date: "2024-01-14T16:45:00",
-    type: "transferencia",
-    product: "Monitor LG 24 pulgadas",
-    code: "PROD-003",
-    quantity: 5,
-    warehouse: "Principal → Norte",
-    reference: "TR-2024-012",
-    user: "María Rodríguez",
-    status: "pending"
-  },
-  {
-    id: 4,
-    date: "2024-01-14T14:20:00",
-    type: "entrada",
-    product: "Teclado Mecánico RGB",
-    code: "PROD-004",
-    quantity: 15,
-    warehouse: "Almacén Principal",
-    reference: "PO-2024-002",
-    user: "Ana García",
-    status: "completed"
-  },
-  {
-    id: 5,
-    date: "2024-01-14T11:30:00",
-    type: "ajuste",
-    product: "Webcam HD Logitech", 
-    code: "PROD-005",
-    quantity: -2,
-    warehouse: "Almacén Norte",
-    reference: "ADJ-2024-003",
-    user: "Carlos López",
-    status: "completed"
-  }
-]
-
-const stockByWarehouse = [
-  {
-    warehouse: "Almacén Principal",
-    products: [
-      { code: "PROD-001", name: "Laptop Dell Inspiron 15", stock: 45, value: 719955 },
-      { code: "PROD-002", name: "Mouse Inalámbrico Logitech", stock: 85, value: 50915 },
-      { code: "PROD-003", name: "Monitor LG 24 pulgadas", stock: 8, value: 26392 },
-      { code: "PROD-004", name: "Teclado Mecánico RGB", stock: 15, value: 32985 },
-    ]
-  },
-  {
-    warehouse: "Almacén Norte",
-    products: [
-      { code: "PROD-002", name: "Mouse Inalámbrico Logitech", stock: 35, value: 20965 },
-      { code: "PROD-005", name: "Webcam HD Logitech", stock: 32, value: 28768 },
-    ]
-  }
-]
-
-const getMovementIcon = (type: string) => {
-  switch (type) {
-    case "entrada":
-      return <ArrowDownLeft className="w-4 h-4 text-success" />
-    case "salida":
-      return <ArrowUpRight className="w-4 h-4 text-destructive" />
-    case "transferencia":
-      return <RefreshCw className="w-4 h-4 text-warning" />
-    case "ajuste":
-      return <TrendingUp className="w-4 h-4 text-primary" />
-    default:
-      return <RefreshCw className="w-4 h-4" />
-  }
-}
-
-const getMovementBadge = (type: string) => {
-  const variants = {
-    entrada: "default",
-    salida: "destructive", 
-    transferencia: "secondary",
-    ajuste: "outline"
-  }
-  return (
-    <Badge variant={variants[type as keyof typeof variants] as any} className="capitalize">
-      {type}
-    </Badge>
-  )
-}
-
-export default function Inventory() {
-  const navigate = useNavigate()
-  const [searchTerm, setSearchTerm] = useState("")
-  const [categoryFilter, setCategoryFilter] = useState<string>("")
-  const [subcategoryFilter, setSubcategoryFilter] = useState<string>("")
-  const [statusFilter, setStatusFilter] = useState<string>("")
-  const [selectedWarehouse, setSelectedWarehouse] = useState<number | null>(null)
-  
-  // Warehouse form state
-  const [isWarehouseModalOpen, setIsWarehouseModalOpen] = useState(false)
-  const [editingWarehouse, setEditingWarehouse] = useState<any>(null)
-  const [warehouseForm, setWarehouseForm] = useState({
-    code: "",
-    name: "",
-    description: "",
-    classificationIds: [] as string[],
-    subclassificationIds: [] as string[]
-  })
-
-  const resetWarehouseForm = () => {
-    setWarehouseForm({ 
-      code: "", 
-      name: "", 
-      description: "",
-      classificationIds: [],
-      subclassificationIds: []
-    })
-    setEditingWarehouse(null)
-  }
-
-  const handleCreateWarehouse = () => {
-    resetWarehouseForm()
-    setIsWarehouseModalOpen(true)
-  }
-
-  const handleEditWarehouse = (warehouse: any) => {
-    setWarehouseForm({
-      code: warehouse.code,
-      name: warehouse.name,
-      description: warehouse.description || "",
-      classificationIds: warehouse.classificationIds || [warehouse.category],
-      subclassificationIds: warehouse.subclassificationIds || [warehouse.subcategory]
-    })
-    setEditingWarehouse(warehouse)
-    setIsWarehouseModalOpen(true)
-  }
-
-  const handleSaveWarehouse = () => {
-    // Here you would normally save to your backend
-    const warehouseData = {
-      ...warehouseForm,
-      // Send arrays of IDs to backend
-      classificationIds: warehouseForm.classificationIds,
-      subclassificationIds: warehouseForm.subclassificationIds
-    }
-    console.log("Saving warehouse:", warehouseData)
-    setIsWarehouseModalOpen(false)
-    resetWarehouseForm()
-  }
-
-  const toggleClassification = (classificationId: string) => {
-    setWarehouseForm(prev => ({
-      ...prev,
-      classificationIds: prev.classificationIds.includes(classificationId)
-        ? prev.classificationIds.filter(id => id !== classificationId)
-        : [...prev.classificationIds, classificationId]
-    }))
-  }
-
-  const toggleSubclassification = (subclassificationId: string) => {
-    setWarehouseForm(prev => ({
-      ...prev,
-      subclassificationIds: prev.subclassificationIds.includes(subclassificationId)
-        ? prev.subclassificationIds.filter(id => id !== subclassificationId)
-        : [...prev.subclassificationIds, subclassificationId]
-    }))
-  }
-
-  // Get all available subclassifications from selected classifications
-  const getAvailableSubclassifications = () => {
-    const availableSubs: string[] = []
-    warehouseForm.classificationIds.forEach(classId => {
-      const classification = warehouseCategories.find(cat => cat.id === classId)
-      if (classification) {
-        availableSubs.push(...classification.subcategories)
-      }
-    })
-    return [...new Set(availableSubs)] // Remove duplicates
-  }
-
-  const totalInventoryValue = warehouses.reduce((sum, wh) => sum + wh.totalValue, 0)
-  const totalProducts = warehouses.reduce((sum, wh) => sum + wh.totalProducts, 0)
-
-  // Filter warehouses based on search criteria
-  const filteredWarehouses = warehouses.filter(warehouse => {
-    const matchesSearch = warehouse.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         warehouse.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         warehouse.location.toLowerCase().includes(searchTerm.toLowerCase())
-    const matchesCategory = !categoryFilter || warehouse.category === categoryFilter
-    const matchesSubcategory = !subcategoryFilter || warehouse.subcategory === subcategoryFilter
-    const matchesStatus = !statusFilter || warehouse.status === statusFilter
-    
-    return matchesSearch && matchesCategory && matchesSubcategory && matchesStatus
-  })
-
-  // Get subcategories for selected category
-  const availableSubcategories = categoryFilter 
-    ? warehouseCategories.find(cat => cat.id === categoryFilter)?.subcategories || []
-    : []
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-foreground">Inventario</h1>
-          <p className="text-muted-foreground">
-            Control de stock y movimientos por almacén
-          </p>
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button variant="outline" onClick={handleCreateWarehouse}>
-            <Plus className="w-4 h-4 mr-2" />
-            Crear Almacén
-          </Button>
-          <Button variant="outline">
-            <Plus className="w-4 h-4 mr-2" />
-            Entrada
-          </Button>
-          <Button variant="outline">
-            <Minus className="w-4 h-4 mr-2" />
-            Salida
-          </Button>
-          <Button className="bg-primary hover:bg-primary-hover">
-            <RefreshCw className="w-4 h-4 mr-2" />
-            Transferencia
-          </Button>
-        </div>
-      </div>
-
-      {/* Summary Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <Card>
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-2">
-              <Warehouse className="w-8 h-8 text-primary" />
-              <div>
-                <p className="text-2xl font-bold text-metric-value">{warehouses.length}</p>
-                <p className="text-sm text-muted-foreground">Almacenes</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center">
-                <span className="text-success-foreground font-bold text-sm">#</span>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-success">{totalProducts}</p>
-                <p className="text-sm text-muted-foreground">Total Productos</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 rounded-full bg-warning flex items-center justify-center">
-                <span className="text-warning-foreground font-bold text-sm">$</span>
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-warning">
-                  ${(totalInventoryValue / 1000000).toFixed(1)}M
-                </p>
-                <p className="text-sm text-muted-foreground">Valor Total</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="p-4">
-            <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
-                <RefreshCw className="w-4 h-4 text-primary-foreground" />
-              </div>
-              <div>
-                <p className="text-2xl font-bold text-primary">{inventoryMovements.length}</p>
-                <p className="text-sm text-muted-foreground">Movimientos Hoy</p>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      <Tabs defaultValue="warehouses" className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="warehouses">Almacenes</TabsTrigger>
-          <TabsTrigger value="details">Detalles Individuales</TabsTrigger>
-          <TabsTrigger value="movements">Movimientos</TabsTrigger>
-          <TabsTrigger value="stock">Stock por Almacén</TabsTrigger>
-        </TabsList>
-
-        {/* Warehouses Tab */}
-        <TabsContent value="warehouses">
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center justify-between">
-                <span>Almacenes</span>
-                <div className="flex items-center space-x-2">
-                  <Filter className="w-4 h-4 text-muted-foreground" />
-                  <span className="text-sm text-muted-foreground">
-                    {filteredWarehouses.length} de {warehouses.length}
-                  </span>
-                </div>
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              {/* Search and Filters */}
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
-                <div className="relative">
-                  <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                  <Input
-                    placeholder="Buscar almacenes..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    className="pl-10"
-                  />
-                </div>
-                
-                <Select
-                  value={categoryFilter}
-                  onValueChange={(value) => {
-                    setCategoryFilter(value === "all" ? "" : value)
-                    setSubcategoryFilter("") // Reset subcategory when category changes
-                  }}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Categoría" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">Todas las categorías</SelectItem>
-                    {warehouseCategories.map((category) => (
-                      <SelectItem key={category.id} value={category.id}>
-                        {category.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-
-                <Select
-                  value={subcategoryFilter || "all"}
-                  onValueChange={(value) => setSubcategoryFilter(value === "all" ? "" : value)}
-                  disabled={!categoryFilter}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Subcategoría" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">Todas las subcategorías</SelectItem>
-                    {availableSubcategories.map((subcategory) => (
-                      <SelectItem key={subcategory} value={subcategory}>
-                        {subcategory.charAt(0).toUpperCase() + subcategory.slice(1)}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-
-                <Select
-                  value={statusFilter || "all"}
-                  onValueChange={(value) => setStatusFilter(value === "all" ? "" : value)}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Estado" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">Todos los estados</SelectItem>
-                    <SelectItem value="active">Activo</SelectItem>
-                    <SelectItem value="inactive">Inactivo</SelectItem>
-                    <SelectItem value="full">Lleno</SelectItem>
-                  </SelectContent>
-                </Select>
-
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setSearchTerm("")
-                    setCategoryFilter("")
-                    setSubcategoryFilter("")
-                    setStatusFilter("")
-                  }}
-                  className="w-full"
-                >
-                  Limpiar Filtros
-                </Button>
-              </div>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                {filteredWarehouses.map((warehouse) => (
-                  <Card key={warehouse.id} className="relative overflow-hidden">
-                    <CardContent className="p-4">
-                      <div className="flex items-start justify-between mb-3">
-                        <div className="flex items-center space-x-2">
-                          <Warehouse className="w-6 h-6 text-primary" />
-                          <div>
-                            <h3 className="font-semibold text-sm">{warehouse.name}</h3>
-                            <p className="text-xs text-muted-foreground font-mono">
-                              {warehouse.code}
-                            </p>
-                          </div>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <Badge 
-                            variant={
-                              warehouse.status === "active" ? "default" : 
-                              warehouse.status === "inactive" ? "secondary" : "destructive"
-                            }
-                            className="capitalize"
-                          >
-                            {warehouse.status === "active" ? "Activo" : 
-                             warehouse.status === "inactive" ? "Inactivo" : "Lleno"}
-                          </Badge>
-                        </div>
-                      </div>
-                      
-                      <div className="flex items-center space-x-1 text-xs text-muted-foreground mb-2">
-                        <MapPin className="w-3 h-3" />
-                        <span>{warehouse.location}</span>
-                      </div>
-
-                      <div className="flex items-center space-x-1 text-xs text-muted-foreground mb-3">
-                        <Badge variant="outline" className="text-xs">
-                          {warehouse.category} - {warehouse.subcategory}
-                        </Badge>
-                      </div>
-
-                      <div className="space-y-2">
-                        <div className="flex justify-between items-center">
-                          <span className="text-sm text-muted-foreground">Productos:</span>
-                          <span className="font-medium">{warehouse.totalProducts}</span>
-                        </div>
-                        <div className="flex justify-between items-center">
-                          <span className="text-sm text-muted-foreground">Valor:</span>
-                          <span className="font-medium">
-                            ${(warehouse.totalValue / 1000000).toFixed(1)}M
-                          </span>
-                        </div>
-                        <div className="flex justify-between items-center">
-                          <span className="text-sm text-muted-foreground">Capacidad:</span>
-                          <span className={`font-medium ${
-                            parseInt(warehouse.capacity) > 80 ? 'text-destructive' : 
-                            parseInt(warehouse.capacity) > 60 ? 'text-warning' : 'text-success'
-                          }`}>
-                            {warehouse.capacity}
-                          </span>
-                        </div>
-                        
-                        {/* Capacity Bar */}
-                        <div className="w-full bg-muted rounded-full h-2 mt-2">
-                          <div 
-                            className={`h-2 rounded-full transition-all ${
-                              parseInt(warehouse.capacity) > 80 ? 'bg-destructive' : 
-                              parseInt(warehouse.capacity) > 60 ? 'bg-warning' : 'bg-success'
-                            }`}
-                            style={{ width: warehouse.capacity }}
-                          />
-                        </div>
-
-                        {/* Actions */}
-                        <div className="flex justify-end space-x-2 mt-3 pt-3 border-t border-border">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => navigate(`/warehouse/${warehouse.id}/settings`)}
-                          >
-                            <SettingsIcon className="w-4 h-4 mr-1" />
-                            Configurar
-                          </Button>
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => handleEditWarehouse(warehouse)}
-                          >
-                            <Eye className="w-4 h-4 mr-1" />
-                            Editar
-                          </Button>
-                        </div>
-                      </div>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-
-              {filteredWarehouses.length === 0 && (
-                <div className="text-center py-8">
-                  <Warehouse className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
-                  <p className="text-muted-foreground">No se encontraron almacenes con los filtros aplicados</p>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* Individual Warehouse Details Tab */}
-        <TabsContent value="details">
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            {/* Warehouse Selection */}
-            <Card className="lg:col-span-1">
-              <CardHeader>
-                <CardTitle className="flex items-center space-x-2">
-                  <Warehouse className="w-5 h-5 text-primary" />
-                  <span>Seleccionar Almacén</span>
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-3">
-                {warehouses.map((warehouse) => (
-                  <div
-                    key={warehouse.id}
-                    className={`p-3 rounded-lg border cursor-pointer transition-all hover:bg-accent ${
-                      selectedWarehouse === warehouse.id ? 'border-primary bg-primary/5' : 'border-border'
-                    }`}
-                    onClick={() => setSelectedWarehouse(warehouse.id)}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <h4 className="font-medium text-sm">{warehouse.name}</h4>
-                        <p className="text-xs font-mono text-muted-foreground">{warehouse.code}</p>
-                        <p className="text-xs text-muted-foreground">{warehouse.location}</p>
-                      </div>
-                      <Badge
-                        variant={
-                          warehouse.status === "active" ? "default" : 
-                          warehouse.status === "inactive" ? "secondary" : "destructive"
-                        }
-                        className="text-xs"
-                      >
-                        {warehouse.status === "active" ? "Activo" : 
-                         warehouse.status === "inactive" ? "Inactivo" : "Lleno"}
-                      </Badge>
-                    </div>
-                  </div>
-                ))}
-              </CardContent>
-            </Card>
-
-            {/* Warehouse Details */}
-            <div className="lg:col-span-2">
-              {selectedWarehouse ? (
-                (() => {
-                  const warehouse = warehouses.find(w => w.id === selectedWarehouse)
-                  if (!warehouse) return null
-                  
-                  return (
-                    <div className="space-y-6">
-                      {/* Basic Info Card */}
-                      <Card>
-                        <CardHeader>
-                          <CardTitle className="flex items-center justify-between">
-                            <div className="flex items-center space-x-2">
-                              <Warehouse className="w-5 h-5 text-primary" />
-                              <span>{warehouse.name}</span>
-                            </div>
-                            <Button variant="outline" size="sm">
-                              <Eye className="w-4 h-4 mr-2" />
-                              Ver Detalles
-                            </Button>
-                          </CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                            <div className="space-y-3">
-                              <div>
-                                <p className="text-sm font-medium text-muted-foreground">Código</p>
-                                <p className="font-mono">{warehouse.code}</p>
-                              </div>
-                              <div>
-                                <p className="text-sm font-medium text-muted-foreground">Ubicación</p>
-                                <p className="text-sm">{warehouse.location}</p>
-                              </div>
-                              <div>
-                                <p className="text-sm font-medium text-muted-foreground">Categoría</p>
-                                <div className="flex items-center space-x-2">
-                                  <Badge variant="outline">
-                                    {warehouseCategories.find(c => c.id === warehouse.category)?.name}
-                                  </Badge>
-                                  <Badge variant="secondary" className="text-xs">
-                                    {warehouse.subcategory}
-                                  </Badge>
-                                </div>
-                              </div>
-                              <div>
-                                <p className="text-sm font-medium text-muted-foreground">Estado</p>
-                                <Badge
-                                  variant={
-                                    warehouse.status === "active" ? "default" : 
-                                    warehouse.status === "inactive" ? "secondary" : "destructive"
-                                  }
-                                >
-                                  {warehouse.status === "active" ? "Activo" : 
-                                   warehouse.status === "inactive" ? "Inactivo" : "Lleno"}
-                                </Badge>
-                              </div>
-                            </div>
-                            <div className="space-y-3">
-                              <div>
-                                <p className="text-sm font-medium text-muted-foreground">Responsable</p>
-                                <p className="text-sm">{warehouse.manager}</p>
-                              </div>
-                              <div>
-                                <p className="text-sm font-medium text-muted-foreground">Teléfono</p>
-                                <p className="text-sm font-mono">{warehouse.phone}</p>
-                              </div>
-                              <div>
-                                <p className="text-sm font-medium text-muted-foreground">Email</p>
-                                <p className="text-sm">{warehouse.email}</p>
-                              </div>
-                              <div>
-                                <p className="text-sm font-medium text-muted-foreground">Área</p>
-                                <p className="text-sm font-mono">{warehouse.area}</p>
-                              </div>
-                            </div>
-                          </div>
-                        </CardContent>
-                      </Card>
-
-                      {/* Metrics Cards */}
-                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                        <Card>
-                          <CardContent className="p-4">
-                            <div className="flex items-center space-x-2">
-                              <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
-                                <span className="text-primary-foreground font-bold text-sm">#</span>
-                              </div>
-                              <div>
-                                <p className="text-2xl font-bold text-primary">{warehouse.totalProducts}</p>
-                                <p className="text-sm text-muted-foreground">Productos</p>
-                              </div>
-                            </div>
-                          </CardContent>
-                        </Card>
-                        <Card>
-                          <CardContent className="p-4">
-                            <div className="flex items-center space-x-2">
-                              <div className="w-8 h-8 rounded-full bg-success flex items-center justify-center">
-                                <span className="text-success-foreground font-bold text-sm">$</span>
-                              </div>
-                              <div>
-                                <p className="text-2xl font-bold text-success">
-                                  ${(warehouse.totalValue / 1000000).toFixed(1)}M
-                                </p>
-                                <p className="text-sm text-muted-foreground">Valor Total</p>
-                              </div>
-                            </div>
-                          </CardContent>
-                        </Card>
-                        <Card>
-                          <CardContent className="p-4">
-                            <div className="flex items-center space-x-2">
-                              <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
-                                parseInt(warehouse.capacity) > 80 ? 'bg-destructive' : 
-                                parseInt(warehouse.capacity) > 60 ? 'bg-warning' : 'bg-success'
-                              }`}>
-                                <span className={`font-bold text-sm ${
-                                  parseInt(warehouse.capacity) > 80 ? 'text-destructive-foreground' : 
-                                  parseInt(warehouse.capacity) > 60 ? 'text-warning-foreground' : 'text-success-foreground'
-                                }`}>%</span>
-                              </div>
-                              <div>
-                                <p className={`text-2xl font-bold ${
-                                  parseInt(warehouse.capacity) > 80 ? 'text-destructive' : 
-                                  parseInt(warehouse.capacity) > 60 ? 'text-warning' : 'text-success'
-                                }`}>
-                                  {warehouse.capacity}
-                                </p>
-                                <p className="text-sm text-muted-foreground">Capacidad</p>
-                              </div>
-                            </div>
-                          </CardContent>
-                        </Card>
-                      </div>
-
-                      {/* Environmental Conditions */}
-                      <Card>
-                        <CardHeader>
-                          <CardTitle>Condiciones Ambientales</CardTitle>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <div>
-                              <p className="text-sm font-medium text-muted-foreground mb-2">Temperatura</p>
-                              <div className="flex items-center space-x-2">
-                                <div className="w-4 h-4 rounded-full bg-blue-500"></div>
-                                <span className="font-mono text-lg">{warehouse.temperature}</span>
-                              </div>
-                            </div>
-                            <div>
-                              <p className="text-sm font-medium text-muted-foreground mb-2">Humedad</p>
-                              <div className="flex items-center space-x-2">
-                                <div className="w-4 h-4 rounded-full bg-cyan-500"></div>
-                                <span className="font-mono text-lg">{warehouse.humidity}</span>
-                              </div>
-                            </div>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    </div>
-                  )
-                })()
-              ) : (
-                <Card>
-                  <CardContent className="p-8 text-center">
-                    <Warehouse className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
-                    <h3 className="text-lg font-semibold text-muted-foreground mb-2">
-                      Selecciona un Almacén
-                    </h3>
-                    <p className="text-muted-foreground">
-                      Elige un almacén de la lista para ver su información detallada
-                    </p>
-                  </CardContent>
-                </Card>
-              )}
-            </div>
-          </div>
-        </TabsContent>
-
-        {/* Movements Tab */}
-        <TabsContent value="movements">
-          <Card>
-            <CardHeader>
-              <CardTitle>Historial de Movimientos</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <div className="flex items-center space-x-4 mb-6">
-                <div className="relative flex-1 max-w-sm">
-                  <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                  <Input
-                    placeholder="Buscar movimientos..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    className="pl-10"
-                  />
-                </div>
-              </div>
-
-              <div className="rounded-md border">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Fecha</TableHead>
-                      <TableHead>Tipo</TableHead>
-                      <TableHead>Producto</TableHead>
-                      <TableHead>Cantidad</TableHead>
-                      <TableHead>Almacén</TableHead>
-                      <TableHead>Usuario</TableHead>
-                      <TableHead>Estado</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {inventoryMovements.map((movement) => (
-                      <TableRow key={movement.id}>
-                        <TableCell className="text-sm">
-                          {new Date(movement.date).toLocaleString('es-MX')}
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex items-center space-x-2">
-                            {getMovementIcon(movement.type)}
-                            {getMovementBadge(movement.type)}
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <div>
-                            <p className="font-medium text-sm">{movement.product}</p>
-                            <p className="text-xs text-muted-foreground font-mono">
-                              {movement.code}
-                            </p>
-                          </div>
-                        </TableCell>
-                        <TableCell className="font-mono">
-                          <span className={movement.quantity > 0 ? "text-success" : "text-destructive"}>
-                            {movement.quantity > 0 ? "+" : ""}{movement.quantity}
-                          </span>
-                        </TableCell>
-                        <TableCell className="text-sm">
-                          {movement.warehouse}
-                        </TableCell>
-                        <TableCell className="text-sm">
-                          {movement.user}
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant={movement.status === "completed" ? "default" : "secondary"}>
-                            {movement.status === "completed" ? "Completado" : "Pendiente"}
-                          </Badge>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        {/* Stock by Warehouse Tab */}
-        <TabsContent value="stock">
-          <div className="space-y-4">
-            {stockByWarehouse.map((warehouse, index) => (
-              <Card key={index}>
-                <CardHeader>
-                  <CardTitle className="flex items-center space-x-2">
-                    <Warehouse className="w-5 h-5 text-primary" />
-                    <span>{warehouse.warehouse}</span>
-                  </CardTitle>
-                </CardHeader>
-                <CardContent>
-                  <div className="rounded-md border">
-                    <Table>
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead>Código</TableHead>
-                          <TableHead>Producto</TableHead>
-                          <TableHead>Stock</TableHead>
-                          <TableHead>Valor</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {warehouse.products.map((product, prodIndex) => (
-                          <TableRow key={prodIndex}>
-                            <TableCell className="font-mono text-sm">
-                              {product.code}
-                            </TableCell>
-                            <TableCell className="font-medium">
-                              {product.name}
-                            </TableCell>
-                            <TableCell className="font-mono">
-                              {product.stock} uds
-                            </TableCell>
-                            <TableCell className="font-mono">
-                              ${product.value.toLocaleString('es-MX')}
-                            </TableCell>
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        </TabsContent>
-      </Tabs>
-
-      {/* Warehouse Form Modal */}
-      <Dialog open={isWarehouseModalOpen} onOpenChange={(open) => {
-        setIsWarehouseModalOpen(open)
-        if (!open) resetWarehouseForm()
-      }}>
-        <DialogContent className="sm:max-w-[600px] max-h-[80vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>
-              {editingWarehouse ? "Editar Almacén" : "Crear Nuevo Almacén"}
-            </DialogTitle>
-            <DialogDescription>
-              {editingWarehouse 
-                ? "Modifica los datos del almacén seleccionado."
-                : "Completa la información para crear un nuevo almacén."
-              }
-            </DialogDescription>
-          </DialogHeader>
-          
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <Label htmlFor="warehouse-code">Código</Label>
-              <Input
-                id="warehouse-code"
-                placeholder="WH-001"
-                value={warehouseForm.code}
-                onChange={(e) => setWarehouseForm(prev => ({ ...prev, code: e.target.value }))}
-              />
-            </div>
-            
-            <div className="space-y-2">
-              <Label htmlFor="warehouse-name">Nombre</Label>
-              <Input
-                id="warehouse-name"
-                placeholder="Almacén Principal"
-                value={warehouseForm.name}
-                onChange={(e) => setWarehouseForm(prev => ({ ...prev, name: e.target.value }))}
-              />
-            </div>
-            
-            <div className="space-y-2">
-              <Label htmlFor="warehouse-description">Descripción</Label>
-              <Textarea
-                id="warehouse-description"
-                placeholder="Descripción del almacén..."
-                value={warehouseForm.description}
-                onChange={(e) => setWarehouseForm(prev => ({ ...prev, description: e.target.value }))}
-                rows={3}
-              />
-            </div>
-
-            {/* Classifications Section */}
-            <div className="space-y-2">
-              <Label>Clasificaciones</Label>
-              <div className="space-y-2 max-h-32 overflow-y-auto border rounded-md p-2">
-                {warehouseCategories.map((category) => (
-                  <div key={category.id} className="flex items-center space-x-2">
-                    <Checkbox
-                      id={`classification-${category.id}`}
-                      checked={warehouseForm.classificationIds.includes(category.id)}
-                      onCheckedChange={() => toggleClassification(category.id)}
-                    />
-                    <Label 
-                      htmlFor={`classification-${category.id}`}
-                      className="text-sm font-normal cursor-pointer"
-                    >
-                      {category.name}
-                    </Label>
-                  </div>
-                ))}
-              </div>
-              {warehouseForm.classificationIds.length > 0 && (
-                <div className="flex flex-wrap gap-1 mt-2">
-                  {warehouseForm.classificationIds.map(id => {
-                    const category = warehouseCategories.find(cat => cat.id === id)
-                    return category ? (
-                      <Badge key={id} variant="secondary" className="text-xs">
-                        {category.name}
-                      </Badge>
-                    ) : null
-                  })}
-                </div>
-              )}
-            </div>
-
-            {/* Subclassifications Section */}
-            <div className="space-y-2">
-              <Label>Subclasificaciones</Label>
-              <div className="space-y-2 max-h-32 overflow-y-auto border rounded-md p-2">
-                {getAvailableSubclassifications().map((subcategory) => (
-                  <div key={subcategory} className="flex items-center space-x-2">
-                    <Checkbox
-                      id={`subclassification-${subcategory}`}
-                      checked={warehouseForm.subclassificationIds.includes(subcategory)}
-                      onCheckedChange={() => toggleSubclassification(subcategory)}
-                    />
-                    <Label 
-                      htmlFor={`subclassification-${subcategory}`}
-                      className="text-sm font-normal cursor-pointer capitalize"
-                    >
-                      {subcategory}
-                    </Label>
-                  </div>
-                ))}
-              </div>
-              {warehouseForm.subclassificationIds.length > 0 && (
-                <div className="flex flex-wrap gap-1 mt-2">
-                  {warehouseForm.subclassificationIds.map(id => (
-                    <Badge key={id} variant="outline" className="text-xs capitalize">
-                      {id}
-                    </Badge>
-                  ))}
-                </div>
-              )}
-              {warehouseForm.classificationIds.length === 0 && (
-                <p className="text-xs text-muted-foreground">
-                  Selecciona al menos una clasificación para ver las subclasificaciones disponibles
-                </p>
-              )}
-            </div>
-          </div>
-          
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setIsWarehouseModalOpen(false)}
-            >
-              Cancelar
-            </Button>
-            <Button
-              onClick={handleSaveWarehouse}
-              disabled={!warehouseForm.code.trim() || !warehouseForm.name.trim()}
-            >
-              {editingWarehouse ? "Actualizar" : "Crear"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/src/pages/Warehouses/interfaces/warehouses.interfaces.js b/src/pages/Warehouses/interfaces/warehouses.interfaces.js
deleted file mode 100644
index 6fda88f..0000000
--- a/src/pages/Warehouses/interfaces/warehouses.interfaces.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * Interfaces para Warehouses
- * 
- * @author Sistema
- * @version 1.0.0
- */
-
-/**
- * @typedef {Object} WarehouseClassification
- * @property {number} id - ID de la clasificación
- * @property {string} code - Código de la clasificación
- * @property {string} name - Nombre de la clasificación
- * @property {string|null} description - Descripción de la clasificación
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {number|null} parent_id - ID del padre
- * @property {string} created_at - Fecha de creación
- * @property {string} updated_at - Fecha de actualización
- * @property {string|null} deleted_at - Fecha de eliminación
- * @property {Object} pivot - Relación many-to-many
- * @property {number} pivot.warehouse_id - ID del almacén
- * @property {number} pivot.classification_id - ID de la clasificación
- */
-
-/**
- * @typedef {Object} Warehouse
- * @property {number} id - ID del almacén
- * @property {string} code - Código del almacén
- * @property {string} name - Nombre del almacén
- * @property {string|null} description - Descripción del almacén
- * @property {string|null} address - Dirección del almacén
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {string} created_at - Fecha de creación
- * @property {string} updated_at - Fecha de actualización
- * @property {string|null} deleted_at - Fecha de eliminación
- * @property {WarehouseClassification[]} classifications - Clasificaciones asociadas
- */
-
-/**
- * @typedef {Object} WarehousePaginatedResponse
- * @property {number} current_page - Página actual
- * @property {Warehouse[]} data - Array de almacenes
- * @property {string} first_page_url - URL de la primera página
- * @property {number} from - Registro inicial
- * @property {number} last_page - Última página
- * @property {string} last_page_url - URL de la última página
- * @property {Object[]} links - Enlaces de paginación
- * @property {string|null} next_page_url - URL de la siguiente página
- * @property {string} path - Path base de la API
- * @property {number} per_page - Registros por página
- * @property {string|null} prev_page_url - URL de la página anterior
- * @property {number} to - Registro final
- * @property {number} total - Total de registros
- */
-
-/**
- * @typedef {Object} WarehouseResponse
- * @property {string} status - Estado de la respuesta
- * @property {Object} data - Datos de la respuesta
- * @property {WarehousePaginatedResponse} data.warehouses - Datos paginados de almacenes
- */
-
-/**
- * @typedef {Object} SingleWarehouseResponse
- * @property {string} status - Estado de la respuesta
- * @property {Object} data - Datos de la respuesta
- * @property {string} data.message - Mensaje de la respuesta
- * @property {Warehouse} data.warehouse - Almacén individual
- */
-
-/**
- * @typedef {Object} WarehouseCreateRequest
- * @property {string} code - Código del almacén
- * @property {string} name - Nombre del almacén
- * @property {string|null} description - Descripción del almacén
- * @property {string|null} address - Dirección del almacén
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {number[]} classifications - Array de IDs de clasificaciones
- */
-
-/**
- * @typedef {Object} WarehouseUpdateRequest
- * @property {string} code - Código del almacén
- * @property {string} name - Nombre del almacén
- * @property {string|null} description - Descripción del almacén
- * @property {string|null} address - Dirección del almacén
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {number[]} classifications - Array de IDs de clasificaciones
- */
-
-/**
- * @typedef {Object} WarehouseFormData
- * @property {number|null} id - ID del almacén (para edición)
- * @property {string} code - Código del almacén
- * @property {string} name - Nombre del almacén
- * @property {string} description - Descripción del almacén
- * @property {string} address - Dirección del almacén
- * @property {boolean} is_active - Estado activo/inactivo
- * @property {Object[]} classifications - Clasificaciones seleccionadas en formato {value, label}
- */
-
-/**
- * @typedef {Object} ClassificationSelectOption
- * @property {number} value - ID de la clasificación
- * @property {string} label - Nombre de la clasificación con indentación
- * @property {string} code - Código de la clasificación
- * @property {string|null} description - Descripción de la clasificación
- * @property {number} level - Nivel jerárquico (para indentación)
- */
-
-/**
- * @typedef {Object} WarehouseSearchFilters
- * @property {string|null} search - Término de búsqueda
- * @property {string|null} status - Estado del filtro (active/inactive)
- * @property {number} page - Número de página
- * @property {number} per_page - Elementos por página
- */
-
-/**
- * @typedef {Object} WarehouseValidationErrors
- * @property {string[]} code - Errores del campo código
- * @property {string[]} name - Errores del campo nombre
- * @property {string[]} description - Errores del campo descripción
- * @property {string[]} address - Errores del campo dirección
- * @property {string[]} classifications - Errores del campo clasificaciones
- */
\ No newline at end of file
diff --git a/src/pages/Warehouses/services/WarehouseService.js b/src/pages/Warehouses/services/WarehouseService.js
deleted file mode 100644
index ae3c1d1..0000000
--- a/src/pages/Warehouses/services/WarehouseService.js
+++ /dev/null
@@ -1,239 +0,0 @@
-/**
- * Servicio para Warehouses
- * 
- * @author Sistema
- * @version 1.0.0
- */
-
-import { api, apiURL } from '@Services/Api';
-
-export default class WarehouseService {
-  
-  /**
-   * Obtener todos los almacenes
-   * @param {Object} params - Parámetros de la consulta
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getAll(params = {}) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('warehouses'), {
-        params,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Obtener un almacén por ID
-   * @param {number} id - ID del almacén
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async getById(id) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL(`warehouses/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Crear un nuevo almacén
-   * @param {Object} data - Datos del almacén
-   * @param {string} data.code - Código del almacén
-   * @param {string} data.name - Nombre del almacén
-   * @param {string|null} data.description - Descripción del almacén
-   * @param {string|null} data.address - Dirección del almacén
-   * @param {boolean} data.is_active - Estado activo/inactivo
-   * @param {number[]} data.classifications - Array de IDs de clasificaciones
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async create(data) {
-    return new Promise((resolve, reject) => {
-      api.post(apiURL('warehouses'), data, {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Actualizar un almacén existente
-   * @param {number} id - ID del almacén
-   * @param {Object} data - Datos actualizados
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async update(id, data) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`warehouses/${id}`), data, {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Eliminar un almacén
-   * @param {number} id - ID del almacén
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async delete(id) {
-    return new Promise((resolve, reject) => {
-      api.delete(apiURL(`warehouses/${id}`), {
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Actualizar el estado de un almacén
-   * @param {number} id - ID del almacén
-   * @param {boolean} isActive - Nuevo estado
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async updateStatus(id, isActive) {
-    return new Promise((resolve, reject) => {
-      api.put(apiURL(`warehouses/${id}`), {
-        data: { is_active: isActive },
-        onSuccess: (response) => {
-          resolve(response);
-        },
-        onError: (error) => {
-          // Mejorar el manejo de errores
-          const enhancedError = {
-            ...error,
-            timestamp: new Date().toISOString(),
-            action: 'updateStatus',
-            id: id,
-            is_active: isActive
-          };
-          reject(enhancedError);
-        }
-      });
-    });
-  }
-
-  /**
-   * Buscar almacenes con filtros
-   * @param {Object} filters - Filtros de búsqueda
-   * @param {string} filters.search - Término de búsqueda
-   * @param {string} filters.status - Estado (active/inactive)
-   * @param {number} filters.page - Página
-   * @returns {Promise} Promesa con la respuesta
-   */
-  async search(filters = {}) {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('warehouses'), {
-        params: filters,
-        onSuccess: (response) => resolve(response),
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Validar datos del almacén
-   * @param {Object} data - Datos a validar
-   * @returns {Object} Objeto con errores de validación si los hay
-   */
-  validate(data) {
-    const errors = {};
-
-    if (!data.code || data.code.trim() === '') {
-      errors.code = 'El código es requerido';
-    }
-
-    if (!data.name || data.name.trim() === '') {
-      errors.name = 'El nombre es requerido';
-    }
-
-    return errors;
-  }
-
-  /**
-   * Obtener clasificaciones disponibles para asignar a almacenes
-   * @returns {Promise} Promesa con las clasificaciones
-   */
-  async getAvailableClassifications() {
-    return new Promise((resolve, reject) => {
-      api.get(apiURL('catalogs/warehouse-classifications'), {
-        onSuccess: (response) => {
-          // Retornar la respuesta completa tal como viene de la API
-          resolve(response);
-        },
-        onError: (error) => reject(error)
-      });
-    });
-  }
-
-  /**
-   * Formatear clasificaciones jerárquicas para uso en Selectable
-   * @param {Array} classifications - Array de clasificaciones
-   * @param {number} level - Nivel de indentación
-   * @returns {Array} Clasificaciones formateadas
-   */
-  formatClassificationsForSelect(classifications, level = 0) {
-    const formatted = [];
-    
-    classifications.forEach(classification => {
-      formatted.push({
-        value: classification.id,
-        label: '  '.repeat(level) + classification.name,
-        code: classification.code,
-        description: classification.description,
-        level: level
-      });
-      
-      // Agregar hijos recursivamente
-      if (classification.children && classification.children.length > 0) {
-        formatted.push(...this.formatClassificationsForSelect(classification.children, level + 1));
-      }
-    });
-    
-    return formatted;
-  }
-
-  /**
-   * Procesar clasificaciones seleccionadas para envío al backend
-   * Incluye tanto clasificaciones padre como subclasificaciones
-   * @param {Array} selectedClassifications - Clasificaciones seleccionadas del formulario
-   * @returns {Array} Array de IDs de clasificaciones (padres + hijos)
-   */
-  processClassificationsForSubmit(selectedClassifications) {
-    if (!Array.isArray(selectedClassifications)) {
-      return [];
-    }
-    
-    const classificationIds = selectedClassifications.map(classification => {
-      return typeof classification === 'object' ? 
-        (classification.value || classification.id) : 
-        classification;
-    });
-    
-    // Remover duplicados y retornar
-    return [...new Set(classificationIds)];
-  }
-
-  /**
-   * Procesar clasificaciones del backend para mostrar en formulario
-   * @param {Array} classifications - Clasificaciones del backend
-   * @param {Array} availableClassifications - Todas las clasificaciones disponibles
-   * @returns {Array} Clasificaciones formateadas para el formulario
-   */
-  processClassificationsForForm(classifications, availableClassifications) {
-    if (!Array.isArray(classifications) || !Array.isArray(availableClassifications)) {
-      return [];
-    }
-    
-    return classifications.map(classification => {
-      const found = availableClassifications.find(available => available.value === classification.id);
-      return found || {
-        value: classification.id,
-        label: classification.name,
-        code: classification.code
-      };
-    });
-  }
-}
\ No newline at end of file
diff --git a/src/plugins/AuthUsers.js b/src/plugins/AuthUsers.js
deleted file mode 100644
index 6aee26e..0000000
--- a/src/plugins/AuthUsers.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Usuarios autenticados
- */
-
-import { ref } from 'vue';
-
-const users = ref([]);
-
-function boot(x) {
-    users.value = x;
-}
-
-function addUser(user) {
-    users.value.push(user);
-}
-
-function removeUser(user) {
-    users.value = users.value.filter(u => u.id !== user.id);
-}
-
-export {
-    users,
-    boot,
-    addUser,
-    removeUser
-};
\ No newline at end of file
diff --git a/src/plugins/Notify.js b/src/plugins/Notify.js
deleted file mode 100644
index 7e27263..0000000
--- a/src/plugins/Notify.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import toastr from 'toastr';
-
-class Notify {
-  constructor() {}
-
-  flash({message = 'Successful registration', type = 'success', timeout = 5, title= Lang('notification')}) {
-
-    toastr.options = {
-        "closeButton": true,
-        "debug": false,
-        "newestOnTop": false,
-        "progressBar": true,
-        "positionClass": "toast-bottom-right",
-        "preventDuplicates": false,
-        "onclick": null,
-        "showDuration": "300",
-        "hideDuration": "1000",
-        "timeOut": timeout * 1000,
-        "extendedTimeOut": "1000",
-        "showEasing": "swing",
-        "hideEasing": "linear",
-        "showMethod": "fadeIn",
-        "hideMethod": "fadeOut"
-    }
-
-    toastr[type](message, title);
-  }
-
-  success(message, title, timeout) {
-    this.flash({
-      message,
-      title,
-      timeout
-    });
-  }
-
-  error(message, title, timeout) {
-    this.flash({
-      message, 
-      type:'error',
-      timeout,
-      title
-    });
-  }
-  
-  info(message, title, timeout) {
-    this.flash({
-      message, 
-      type:'info',
-      timeout,
-      title
-    });
-  }
-
-  warning(message, title, timeout) {
-    this.flash({
-      message, 
-      type:'warning',
-      timeout,
-      title
-    });
-  }
-}
-
-export default Notify;
diff --git a/src/plugins/RolePermission.js b/src/plugins/RolePermission.js
deleted file mode 100644
index b1da1ce..0000000
--- a/src/plugins/RolePermission.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import { ref } from 'vue';
-import { api } from '@Services/Api';
-
-const permissionsInit = ref(false)
-const allPermissions  = ref([])
-const rolesInit = ref(false)
-const allRoles = ref([])
-const allRolesIds = ref([])
-
-/**
- * Permite consultar si un usuario tiene un permiso especifico
- */
-const hasPermission = (can) => {
-    let verifyPermissions = can.split('|');
-
-    for (let permision in verifyPermissions) {
-        if(allPermissions.value.indexOf(verifyPermissions[permision]) != -1) {
-            return true;
-        }
-    }
-    
-    return false;
-}
-
-const hasRole = (role) => {
-    let verifyRoles = role.split('|');
-
-    for (let role in verifyRoles) {
-        if(allRoles.value.indexOf(verifyRoles[role]) != -1) {
-            return true;
-        }
-    }
-
-    return false;
-}
-
-const bootPermissions = () => {
-    return new Promise((resolve, reject) => {
-        if (!permissionsInit.value) {
-            api.get(route('user.permissions'), {
-                onSuccess: (res) => {
-                    loadPermissions(res.permissions)
-
-                    resolve(true)
-                },
-                onFinish: () => {
-                    permissionsInit.value = true;
-                },
-                onError: () => {
-                    reject(false)
-                }
-            })
-        }
-    })
-}
-
-const bootRoles = () => {
-    return new Promise((resolve, reject) => {
-        if (!rolesInit.value) {
-            api.get(route('user.roles'), {
-                onSuccess: (res) => {
-                    loadRoles(res.roles)
-
-                    resolve(true)
-                },
-                onFinish: () => {
-                    rolesInit.value = true;
-                },
-                onError: () => {
-                    reject(false)
-                }
-            })
-        }
-    })
-}
-
-const reloadPermissions = () => {
-    permissionsInit.value = false;
-
-    bootPermissions()
-}
-
-const reloadRoles = () => {
-    rolesInit.value = false;
-
-    bootRoles()
-}
-
-const resetPermissions = () => {
-    allPermissions.value = [];
-    permissionsInit.value = false;
-}
-
-const resetRoles = () => {
-    allRoles.value = [];
-    rolesInit.value = false;
-}
-
-const loadPermissions = (permissionList = []) => {
-    // Permisos cargados
-    let currentPermissions = [];
-
-    if (permissionList.length > 0) {
-        permissionList.forEach(element => {
-            currentPermissions.push(element.name)
-        });
-    }
-
-    allPermissions.value = currentPermissions;
-}
-
-const loadRoles = (roleList = []) => {
-    if (roleList.length > 0) {
-        roleList.forEach(element => {
-            allRoles.value.push(element.name)
-            allRolesIds.value.push(element.id)
-        });
-    }
-}
-
-const getAllPermissions = () => {
-    return allPermissions.value;
-}
-
-const getAllRoles = () => {
-    return allRoles.value;
-}
-
-const getAllRolesIds = () => {
-    return allRolesIds.value;
-}
-
-export {
-    bootPermissions,
-    bootRoles,
-    hasPermission,
-    hasRole,
-    reloadPermissions,
-    reloadRoles,
-    resetPermissions,
-    resetRoles,
-    getAllPermissions,
-    getAllRoles,
-    getAllRolesIds
-};
\ No newline at end of file
diff --git a/src/plugins/TailwindScreen.js b/src/plugins/TailwindScreen.js
deleted file mode 100644
index b53f189..0000000
--- a/src/plugins/TailwindScreen.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Calcula u obtiene el tamaño de pantalla del dispositivo actual
- */
-class TailwindScreen {
-    constructor(){}
-
-    isXs = () => (screen.width < 640) ? true : false;
-
-    isSm = () => (screen.width >= 640 && screen.width < 768) ? true : false;
-
-    isMd = () => (screen.width >= 768 && screen.width < 1024) ? true : false;
-
-    isLg = () => (screen.width >= 1024 && screen.width < 1280) ? true : false;
-
-    isXl = () => (screen.width >= 1280 && screen.width < 1536) ? true : false;
-    
-    is2Xl = () => (screen.width >= 1536) ? true : false;
-
-    /**
-     * Obtiene el tamaño de pantalla que usa tailwind
-     */
-    getScreen = () => {
-        if(this.isXs()) {
-            return 'xs';
-        }
-        
-        if(this.isSm()) {
-            return 'sm';
-        }
-
-        if(this.isMd()) {
-            return 'md';
-        }
-
-        if(this.isLg()) {
-            return 'lg';
-        }
-
-        if(this.isXl()) {
-            return 'xl';
-        }
-
-        if(this.is2Xl()) {
-            return '2xl';
-        }
-    }
-
-    /**
-     * Pregunta si es un tipo de dispositivo
-     * 
-     * @param {*} device Tipo de dispositivo 
-     */
-    isDevice(device) {
-        switch (device) {
-            case 'phone':
-                if(this.isXs() || this.isSm()) {
-                    return true;
-                }
-                break;
-            case 'tablet':
-                if(this.isMd()) {
-                    return true;
-                }
-                break;
-            case 'pc':
-                if(this.isLg() || this.isXl() || this.is2Xl()) {
-                    return true;
-                }
-                break;
-        
-            default:
-                break;
-        }
-            
-        return false;
-    }
-
-    /**
-     * Obtiene el tipo de dispositivo y la variante
-     */
-    getDevice() {
-        if(this.isXs() || this.isSm()) {
-            return 'phone';
-        }
-        
-        if(this.isMd()) {
-            return 'tablet';
-        }
-
-        if(this.isLg()) {
-            return 'pc-sm';
-        }
-
-        if(this.isXl()) {
-            return 'pc-md';
-        }
-
-        if(this.is2Xl()) {
-            return 'pc-lg';
-        }
-    }
-}
-
-export default TailwindScreen
\ No newline at end of file
diff --git a/src/router/Examples.js b/src/router/Examples.js
deleted file mode 100644
index 6ef8581..0000000
--- a/src/router/Examples.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Archivo de rutas de ejemplos.
- * 
- * En producción se debe eliminar o comentar. Las vistas de ejemplo opcionalmente pueden ser eliminadas o
- * dejadas como referencia.
- */
-
-export default [
-    {
-        path: '/examples',
-        name: 'examples.index',
-        component: () => import('@Pages/Examples/Index.vue')
-    }
-]
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
deleted file mode 100644
index a8fa196..0000000
--- a/src/router/Index.js
+++ /dev/null
@@ -1,696 +0,0 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-import { hasPermission } from '@Plugins/RolePermission';
-
-import examples from './Examples';
-
-function can(next, can) {
-    if (!hasPermission(can)) {
-        next({ name: '404' });
-    } else {
-        next();
-    }
-}
-
-const router = createRouter({
-    history: createWebHashHistory(import.meta.env.BASE_URL),
-    routes: [
-        {
-            path: '/',
-            component: () => import('@Layouts/AppLayout.vue'),
-            name: 'root',
-            meta: {
-                title: 'Inicio',
-                icon: 'home',
-            },
-            redirect: '/dashboard',
-            children: [
-                {
-                    path: '',
-                    name: 'index',
-                    redirect: '/dashboard'
-                },
-                {
-                    path: 'dashboard',
-                    name: 'dashboard.index',
-                    component: () => import('@Pages/Dashboard/Employee.vue'),
-                    meta: {
-                        title: 'Dashboard',
-                        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: 'courses',
-                    name: 'courses.index',
-                    meta: {
-                        title: 'Cursos',
-                        icon: 'info',
-                    },
-                    component: () => import('@Pages/Courses/Employee/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',
-                    }
-                },
-            ],
-        },
-        {
-            path: '/coordinator',
-            name: 'coordinator',
-            component: () => import('@Layouts/CoordinatorLayout.vue'),
-            meta: {
-                title: 'Inicio',
-                icon: 'home',
-            },
-            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: 'vacations',
-                    name: 'vacations.coordinator.index',
-                    meta: {
-                        title: 'Vacaciones',
-                        icon: 'calendar_month',
-                    },
-                    component: () => import('@Pages/Vacations/Coordinator/Index.vue'),
-                },
-                {
-                    path: 'courses',
-                    name: 'courses.coordinator',
-                    meta: {
-                        title: 'Capacitaciones',
-                        icon: 'info',
-                    },
-                    children: [
-                        {
-                            path: '',
-                            name: 'courses.coordinator.index',
-                            component: () => import('@Pages/Courses/Coordinator/Index.vue'),
-                        },
-                        {
-                            path: 'request',
-                            name: 'courses.coordinator.request',
-                            component: () => import('@Pages/Courses/Coordinator/Request.vue'),
-                        }
-                    ],
-                }
-            ]
-        },
-        {
-            path: '/admin',
-            name: 'admin',
-            component: () => import('@Layouts/AdminLayout.vue'),
-            meta: {
-                title: 'Inicio',
-                icon: 'home',
-            },
-            redirect: '/admin/dashboard',
-            children: [
-                {
-                    path: 'dashboard',
-                    name: 'admin.dashboard.index',
-                    meta: {
-                        title: 'Dashboard',
-                        icon: 'grid_view',
-                    },
-                    component: () => import('@Pages/Dashboard/Admin.vue'),
-                },
-                {
-                    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',
-                    meta: {
-                        title: 'Capacitaciones',
-                        icon: 'info',
-                    },
-                    redirect: '/admin/courses',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.courses.index',
-                            component: () => import('@Pages/Courses/Admin/Index.vue'),
-                        },
-                        {
-                            path: 'request',
-                            name: 'admin.courses.request',
-                            component: () => import('@Pages/Courses/Admin/Request.vue'),
-                        },
-                        {
-                            path: ':id/assignamment',
-                            name: 'admin.courses.assignamment',
-                            component: () => import('@Pages/Courses/Admin/Assignamment.vue'),
-                        },
-                        {
-                            path: 'calendar',
-                            name: 'admin.courses.calendar',
-                            component: () => import('@Pages/Courses/Admin/Calendar.vue'),
-                        },
-                    ]
-                },
-                {
-                    path: 'events',
-                    name: 'admin.events',
-                    meta: {
-                        title: 'Eventos',
-                        icon: 'info',
-                    },
-                    redirect: '/admin/events',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.events.index',
-                            component: () => import('@Pages/Admin/Events/Index.vue'),
-                        },
-                        {
-                            path: 'pettyCashes',
-                            name: 'admin.events.pettyCashes',
-                            redirect: '/admin/events/pettyCashes',
-                            children: [
-                                {
-                                    path: '',
-                                    name: 'admin.events.pettyCashes.index',
-                                    component: () => import('@Pages/Admin/Events/PettyCashes/Index.vue'),
-                                },
-                                {
-                                    path: 'create',
-                                    name: 'admin.events.pettyCashes.create',
-                                    component: () => import('@Pages/Admin/Events/PettyCashes/Create.vue'),
-                                },
-                                {
-                                    path: 'assignamment',
-                                    name: 'admin.events.pettyCashes.assignamment',
-                                    component: () => import('@Pages/Admin/Events/PettyCashes/Assignamment.vue'),
-                                },
-                                {
-                                    path: ':id/edit',
-                                    name: 'admin.events.pettyCashes.edit',
-                                    component: () => import('@Pages/Admin/Events/PettyCashes/Edit.vue'),
-                                },
-                            ]
-                        },
-                        // {
-                        //     path: 'expense',
-                        //     name: 'admin.events.expense',
-                        //     redirect: '/admin/events/expense',
-                        //     children: [
-                        //         {
-                        //             path: '',
-                        //             name: 'admin.events.expense.index',
-                        //             component: () => import('@Pages/Admin/Events/ExpenseJustifications/Index.vue'),
-                        //         },
-                        //     ]
-                        // },
-                        {
-                            path: 'justification',
-                            name: 'admin.events.justification',
-                            component: () => import('@Pages/Admin/Events/Justification.vue'),
-                        },
-                        {
-                            path: 'reports',
-                            name: 'admin.events.reports',
-                            component: () => import('@Pages/Admin/Events/Reports.vue'),
-                        },
-                    ]
-                },
-                {
-                    path: 'users',
-                    name: 'admin.users',
-                    meta: {
-                        title: 'Usuarios',
-                        icon: 'people',
-                    },
-                    redirect: '/admin/users',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.users.index',
-                            component: () => import('@Pages/Admin/Users/Index.vue'),
-                        },
-                        {
-                            path: 'online',
-                            name: 'admin.users.online',
-                            component: () => import('@Pages/Admin/Users/Online.vue')
-                        },
-                        {
-                            path: 'create',
-                            name: 'admin.users.create',
-                            meta: {
-                                title: 'Crear',
-                                icon: 'add',
-                            },
-                            component: () => import('@Pages/Admin/Users/Create.vue')
-                        }, {
-                            path: ':id/edit',
-                            name: 'admin.users.edit',
-                            meta: {
-                                title: 'Editar',
-                                icon: 'edit',
-                            },
-                            component: () => import('@Pages/Admin/Users/Edit.vue')
-                        }, {
-                            path: ':id/settings',
-                            name: 'admin.users.settings',
-                            component: () => import('@Pages/Admin/Users/Settings.vue'),
-                            meta: {
-                                title: 'Configuración',
-                                icon: 'settings',
-                            },
-                        },
-                        {
-                            path: 'academic',
-                            name: 'admin.users.academic',
-                            redirect: '/admin/users/academic',
-                            children: [
-                                {
-                                    path: '',
-                                    name: 'admin.users.academic.index',
-                                    component: () => import('@Pages/Admin/Users/Academic/Index.vue'),
-                                },
-                                {
-                                    path: ':id/create-record',
-                                    name: 'admin.users.academic.createRecord',
-                                    component: () => import('@Pages/Admin/Users/Academic/CreateRecord.vue'),
-                                },
-                                {
-                                    path: ':id/create-certification',
-                                    name: 'admin.users.academic.createCertification',
-                                    component: () => import('@Pages/Admin/Users/Academic/CreateCertification.vue'),
-                                },
-                                {
-                                    path: ':id/edit-record/:record',
-                                    name: 'admin.users.academic.editRecord',
-                                    component: () => import('@Pages/Admin/Users/Academic/EditRecord.vue'),
-                                },
-                                {
-                                    path: ':id/edit-certification/:certification',
-                                    name: 'admin.users.academic.editCertification',
-                                    component: () => import('@Pages/Admin/Users/Academic/EditCertification.vue'),
-                                },
-                            ]
-                        },
-                        {
-                            path: 'security',
-                            name: 'admin.users.security',
-                            component: () => import('@Pages/Admin/Users/Security.vue'),
-                        },
-                        {
-                            path: 'additional',
-                            name: 'admin.users.additional',
-                            component: () => import('@Pages/Admin/Users/Additional.vue'),
-                        },
-                    ]
-                },
-                {
-                    path: 'warehouses',
-                    name: 'admin.warehouses',
-                    meta: {
-                        title: 'Bodegas',
-                        icon: 'inventory_2',
-                    },
-                    redirect: '/admin/warehouses',
-                    children: [
-                        {
-                            path: ':id',
-                            name: 'admin.warehouses.details',
-                            component: () => import('@Pages/Warehouses/Details.vue'),
-                            meta: {
-                                title: 'Detalles',
-                                icon: 'info',
-                            },
-                        },
-                        {
-                            path: '',
-                            name: 'admin.warehouses.index',
-                            component: () => import('@Pages/Warehouses/Index.vue'),
-
-                        },
-                        {
-                            path: 'create',
-                            name: 'admin.warehouses.create',
-                            component: () => import('@Pages/Warehouses/Create.vue'),
-
-                            meta: {
-                                title: 'Crear',
-                                icon: 'add',
-                            },
-                        },
-                        {
-                            path: ':id/edit',
-                            name: 'admin.warehouses.edit',
-                            component: () => import('@Pages/Warehouses/Edit.vue'),
-
-                            meta: {
-                                title: 'Editar',
-                                icon: 'edit',
-                            },
-                        }
-                    ]
-                },
-                {
-                    path: 'units-measure',
-                    name: 'admin.units-measure',
-                    meta: {
-                        title: 'Unidades de Medida',
-                        icon: 'straighten',
-                    },
-                    redirect: '/admin/units-measure',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.units-measure.index',
-                            component: () => import('@Pages/UnitsMeasure/Index.vue'),
-                        },
-                    ]
-                },
-                {
-                    path: 'warehouse-classifications',
-                    name: 'admin.warehouse-classifications',
-                    meta: {
-                        title: 'Clasificaciones de Bodegas',
-                        icon: 'category',
-                    },
-                    redirect: '/admin/warehouse-classifications',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.warehouse-classifications.index',
-                            component: () => import('@Pages/WarehouseClassifications/Index.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'admin.warehouse-classifications.create',
-                            component: () => import('@Pages/WarehouseClassifications/Create.vue'),
-                            meta: {
-                                title: 'Crear',
-                                icon: 'add',
-                            },
-                        },
-                        {
-                            path: ':id/edit',
-                            name: 'admin.warehouse-classifications.edit',
-                            component: () => import('@Pages/WarehouseClassifications/Edit.vue'),
-                            meta: {
-                                title: 'Editar',
-                                icon: 'edit',
-                            },
-                        }
-                    ]
-                },
-                {
-                    path: 'units-measure',
-                    name: 'admin.units-measure',
-                    meta: {
-                        title: 'Unidades de Medida',
-                        icon: 'straighten',
-                    },
-                    redirect: '/admin/units-measure',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.units-measure.index',
-                            component: () => import('@Pages/UnitsMeasure/Index.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'admin.units-measure.create',
-                            component: () => import('@Pages/UnitsMeasure/Create.vue'),
-                            meta: {
-                                title: 'Crear',
-                                icon: 'add',
-                            },
-                        },
-                        {
-                            path: ':id/edit',
-                            name: 'admin.units-measure.edit',
-                            component: () => import('@Pages/UnitsMeasure/Edit.vue'),
-                            meta: {
-                                title: 'Editar',
-                                icon: 'edit',
-                            },
-                        }
-                    ]
-                },
-                {
-                    path: 'comercial-classifications',
-                    name: 'admin.comercial-classifications',
-                    meta: {
-                        title: 'Clasificaciones Comerciales',
-                        icon: 'category',
-                    },
-                    redirect: '/admin/comercial-classifications',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.comercial-classifications.index',
-                            component: () => import('@Pages/ComercialClassifications/Index.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'admin.comercial-classifications.create',
-                           component: () => import('@Pages/ComercialClassifications/Create.vue'),
-                            meta: {
-                                title: 'Crear',
-                                icon: 'add',
-                            },
-                        },
-                        {
-                            path: ':id/edit',
-                            name: 'admin.comercial-classifications.edit',
-                           component: () => import('@Pages/ComercialClassifications/Edit.vue'),
-                            meta: {
-                                title: 'Editar',
-                                icon: 'edit',
-                            },
-                        }
-                    ]
-                },
-                {
-                    path: 'products',
-                    name: 'admin.products',
-                    meta: {
-                        title: 'Productos',
-                        icon: 'inventory',
-                    },
-                    redirect: '/admin/products',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.products.index',
-                            component: () => import('@Pages/Products/Index.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'admin.products.create',
-                            component: () => import('@Pages/Products/Create.vue'),
-                            meta: {
-                                title: 'Crear',
-                                icon: 'add',
-                            }
-                        }
-                        /*
-                        {
-                            path: ':id/edit',
-                            name: 'admin.products.edit',
-                            component: () => import('@Pages/Products/Edit.vue'),
-                            meta: {
-                                title: 'Editar',
-                                icon: 'edit',
-                            },
-                        } */
-                    ]
-                },
-                {
-                    path: 'pos',
-                    name: 'admin.pos',
-                    meta: {
-                        title: 'Punto de Venta',
-                        icon: 'point_of_sale',
-                    },
-                    redirect: '/admin/pos',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.pos.index',
-                            component: () => import('@Pages/Pos/Index.vue'),
-                        },
-                    ]
-                },
-                {
-                    path: 'roles',
-                    name: 'admin.roles',
-                    meta: {
-                        title: 'Roles',
-                        icon: 'license',
-                    },
-                    redirect: '/admin/roles',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.roles.index',
-                            component: () => import('@Pages/Admin/Roles/Index.vue'),
-                        },
-                        {
-                            path: 'create',
-                            name: 'admin.roles.create',
-                            component: () => import('@Pages/Admin/Roles/Create.vue'),
-                            meta: {
-                                title: 'Crear',
-                                icon: 'add',
-                            },
-                        }, {
-                            path: ':id/edit',
-                            name: 'admin.roles.edit',
-                            component: () => import('@Pages/Admin/Roles/Edit.vue'),
-                            meta: {
-                                title: 'Editar',
-                                icon: 'edit',
-                            },
-                        }
-                    ]
-                },
-                {
-                    path: 'activities',
-                    name: 'admin.activities',
-                    meta: {
-                        title: 'Historial de acciones',
-                        icon: 'event',
-                    },
-                    redirect: '/admin/activities',
-                    children: [
-                        {
-                            path: '',
-                            name: 'admin.activities.index',
-                            beforeEnter: (to, from, next) => can(next, 'activities.index'),
-                            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'),
-                        },
-                    ]
-                },
-            ]
-        },
-        {
-            path: '/changelogs',
-            component: () => import('@Layouts/AppLayout.vue'),
-            children: [
-                {
-                    path: '',
-                    name: 'changelogs.app',
-                    component: () => import('@Pages/Changelogs/App.vue')
-                },
-                {
-                    path: 'core',
-                    name: 'changelogs.core',
-                    component: () => import('@Pages/Changelogs/Core.vue')
-                }
-            ]
-        },
-        {
-            path: '/auth',
-            component: () => import('@Holos/Layout/Auth.vue'),
-            children: [
-                {
-                    path: '',
-                    name: 'auth.index',
-                    component: () => import('@Pages/Auth/Login.vue')
-                },
-                {
-                    path: 'forgot-password',
-                    name: 'auth.forgot-password',
-                    component: () => import('@Pages/Auth/ForgotPassword.vue')
-                },
-                {
-                    path: 'reset-password',
-                    name: 'auth.reset-password',
-                    component: () => import('@Pages/Auth/ResetPassword.vue')
-                }
-            ]
-        },
-        {
-            path: '/:pathMatch(.*)*',
-            name: '404',
-            component: () => import('@Pages/Errors/404.vue')
-        },
-        ...examples,
-    ]
-})
-
-export default router
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..5e593ee
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,408 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
+import { useAuth } from '../modules/auth/composables/useAuth';
+
+// Importar vistas
+import Login from '../modules/auth/components/Login.vue';
+import MainLayout from '../MainLayout.vue';
+import WarehouseIndex from '../modules/warehouse/components/WarehouseIndex.vue';
+import WarehouseForm from '../modules/warehouse/components/WarehouseForm.vue';
+import WarehouseDetails from '../modules/warehouse/components/WarehouseDetails.vue';
+import WarehouseClassification from '../modules/warehouse/components/WarehouseClassification.vue';
+import Units from '../modules/catalog/components/units/Units.vue';
+import ProductsIndex from '../modules/products/components/ProductsIndex.vue';
+import ProductForm from '../modules/products/components/ProductForm.vue';
+import StoresIndex from '../modules/stores/components/StoresIndex.vue';
+
+import RolesIndex from '../modules/users/components/RoleIndex.vue';
+import RoleForm from '../modules/users/components/RoleForm.vue';
+import UserIndex from '../modules/users/components/UserIndex.vue';
+import StoreDetails from '../modules/stores/components/StoreDetails.vue';
+import Positions from '../modules/rh/components/positions/Positions.vue';
+import Departments from '../modules/rh/components/departments/Departments.vue';
+
+import '../modules/catalog/components/suppliers/Suppliers.vue';
+import Suppliers from '../modules/catalog/components/suppliers/Suppliers.vue';
+import Purchases from '../modules/purchases/components/Purchases.vue';
+import PurchaseDetails from '../modules/purchases/components/PurchaseDetails.vue';
+import PurchaseForm from '../modules/purchases/components/PurchaseForm.vue';
+import WarehouseAddInventory from '../modules/warehouse/components/WarehouseAddInventory.vue';
+import ModelDocuments from '../modules/catalog/components/ModelDocuments.vue';
+import Requisitions from '../modules/requisitions/Requisitions.vue';
+import CreateRequisition from '../modules/requisitions/CreateRequisition.vue';
+import ClassificationsComercial from '../modules/catalog/components/comercial-classification/ClassificationsComercial.vue';
+import WarehouseOutInventory from '../modules/warehouse/components/WarehouseOutInventory.vue';
+
+const routes: RouteRecordRaw[] = [
+    {
+        path: '/login',
+        name: 'Login',
+        component: Login,
+        meta: {
+            requiresAuth: false,
+            title: 'Iniciar Sesión'
+        }
+    },
+    {
+        path: '/',
+        component: MainLayout,
+        meta: {
+            requiresAuth: true
+        },
+        children: [
+            {
+                path: '',
+                name: 'Dashboard',
+                component: WarehouseIndex,
+                meta: {
+                    title: 'Dashboard',
+                    requiresAuth: true
+                }
+            },
+            {
+                path: 'warehouse',
+                name: 'Warehouse',
+                meta: {
+                    title: 'Almacén',
+                    requiresAuth: true
+                },
+                children: [
+                    {
+                        path: '',
+                        name: 'WarehouseHome',
+                        component: WarehouseIndex,
+                        meta: {
+                            title: 'Almacén - Dashboard',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'create',
+                        name: 'WarehouseCreate',
+                        component: WarehouseForm,
+                        meta: {
+                            title: 'Crear Almacén',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: ':id',
+                        name: 'WarehouseDetails',
+                        component: WarehouseDetails,
+                        meta: {
+                            title: 'Detalles del Almacén',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'classifications',
+                        name: 'WarehouseClassifications',
+                        component: WarehouseClassification,
+                        meta: {
+                            title: 'Clasificaciones de Almacén',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'batch-add',
+                        name: 'WarehouseAddInventory',
+                        component: WarehouseAddInventory,
+                        meta: {
+                            title: 'Agregar Items al Inventario',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'out-of-stock',
+                        name: 'WarehouseOutOfStock',
+                        component: WarehouseOutInventory,
+                        meta: {
+                            title: 'Salida de Inventario',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'inventory',
+                        name: 'WarehouseInventory',
+                        component: WarehouseIndex,
+                        meta: {
+                            title: 'Inventario - Almacén',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'movements',
+                        name: 'WarehouseMovements',
+                        component: WarehouseIndex,
+                        meta: {
+                            title: 'Movimientos - Almacén',
+                            requiresAuth: true
+                        }
+                    }
+                ]
+            },
+            {
+                path: 'catalog',
+                name: 'Catalog',
+                meta: {
+                    title: 'Catálogo',
+                    requiresAuth: true
+                },
+                children: [
+                    {
+                        path: 'units-of-measure',
+                        name: 'UnitsOfMeasure',
+                        component: Units,
+                        meta: {
+                            title: 'Unidades de Medida',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'classifications-comercial',
+                        name: 'ClassificationsComercial',
+                        component: ClassificationsComercial,
+                        meta: {
+                            title: 'Clasificaciones Comerciales',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'suppliers',
+                        name: 'Suppliers',
+                        component: Suppliers,
+                        meta: {
+                            title: 'Proveedores',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'model-documents',
+                        name: 'ModelDocuments',
+                        component: ModelDocuments,
+                        meta: {
+                            title: 'Documentos del Modelo',
+                            requiresAuth: true
+                        }
+                    }
+                ]
+            },
+            {
+                path: 'purchases',
+                name: 'Purchases',
+                meta: {
+                    title: 'Compras',
+                    requiresAuth: true
+                },
+                children: [
+                    {
+                        path: 'requests',
+                        name: 'PurchaseRequests',
+                        component: Purchases,
+                    },
+                    {
+                        path: ':id',
+                        name: 'PurchaseDetails',
+                        component: PurchaseDetails,
+                    },
+                    {
+                        path: 'create',
+                        name: 'PurchaseCreate',
+                        component: PurchaseForm,
+                    },
+                ]
+            },
+            {
+                path: 'products',
+                name: 'Products',
+                component: ProductsIndex,
+                meta: {
+                    title: 'Productos',
+                    requiresAuth: true
+                },
+                children: [
+                    {
+                        path: 'create',
+                        name: 'ProductCreate',
+                        component: ProductForm,
+                        meta: {
+                            title: 'Crear Producto',
+                            requiresAuth: true
+                        }
+                    },
+                ]
+            },
+            {
+                path: 'stores',
+                name: 'Stores',
+                component: StoresIndex,
+                meta: {
+                    title: 'Tiendas',
+                    requiresAuth: true
+                }
+            },
+            {
+                path: 'stores/:id',
+                name: 'StoreDetails',
+                component: StoreDetails,
+                meta: {
+                    title: 'Detalles de la Tienda',
+                    requiresAuth: true
+                }
+            },
+            {
+                path: 'users',
+                name: 'Usuarios',
+                
+                meta: {
+                    title: 'Roles',
+                    requiresAuth: true
+                },
+                children: [
+                    {
+                        path: '',
+                        name: 'UserIndex',
+                        component: UserIndex,
+                    },
+                ]
+            },
+            {
+                path: 'roles',
+                name: 'Roles',
+                
+                meta: {
+                    title: 'Roles',
+                    requiresAuth: true
+                },
+                children: [
+                    {
+                        path: '',
+                        name: 'RoleIndex',
+                        component: RolesIndex,
+                        meta: {
+                            title: 'Roles',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'permissions/:id',
+                        name: 'RolePermissions',
+                        component: RoleForm,
+                        meta: {
+                            title: 'Administrar Permisos',
+                            requiresAuth: true
+                        }
+                    },
+                ]
+            },
+            {
+                path: 'rh',
+                name: 'RH',
+                meta: {
+                    title: 'Recursos Humanos',
+                    requiresAuth: true
+                },
+                children: [
+                    {
+                        path: 'departments',
+                        name: 'Departments',
+                        component: Departments,
+                        meta: {
+                            title: 'Gestión de Departamentos',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'positions',
+                        name: 'Positions',
+                        component: Positions,
+                        meta: {
+                            title: 'Gestión de Puestos',
+                            requiresAuth: true
+                        }
+                    },
+                ]
+            },
+            {
+                path: 'requisitions',
+                name: 'RequisitionsModule',
+                meta: { 
+                    title: 'Requisiciones',
+                    requiresAuth: true
+                },
+                children: [
+                    {
+                        path: '',
+                        name: 'Requisitions',
+                        component: Requisitions,
+                        meta: { 
+                            title: 'Gestión de Requisiciones',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'create',
+                        name: 'RequisitionCreate',
+                        component: CreateRequisition,
+                        meta: { 
+                            title: 'Crear Requisición',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: 'edit/:id',
+                        name: 'RequisitionEdit',
+                        component: CreateRequisition,
+                        meta: { 
+                            title: 'Editar Requisición',
+                            requiresAuth: true
+                        }
+                    },
+                    {
+                        path: ':id',
+                        name: 'RequisitionView',
+                        component: CreateRequisition,
+                        meta: { 
+                            title: 'Ver Requisición',
+                            requiresAuth: true
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        redirect: '/'
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+});
+
+// Navigation Guard
+router.beforeEach((to, _from, next) => {
+    const { isAuthenticated } = useAuth();
+
+    // Actualizar título de la página
+    document.title = to.meta.title
+        ? `${to.meta.title} - GOLS Control`
+        : 'GOLS Control';
+
+    // Verificar si la ruta requiere autenticación
+    if (to.meta.requiresAuth && !isAuthenticated.value) {
+        // Redirigir al login si no está autenticado
+        next({
+            name: 'Login',
+            query: { redirect: to.fullPath } // Guardar ruta para redireccionar después del login
+        });
+    } else if (to.name === 'Login' && isAuthenticated.value) {
+        // Si ya está autenticado y va al login, redirigir al dashboard
+        next({ name: 'Dashboard' });
+    } else {
+        next();
+    }
+});
+
+export default router;
diff --git a/src/services/Api.js b/src/services/Api.js
deleted file mode 100644
index c62b3f9..0000000
--- a/src/services/Api.js
+++ /dev/null
@@ -1,586 +0,0 @@
-/**
- * Servicio de comunicación API
- * 
- * @author Moisés Cortés C. <moises.cortes@notsoweb.com>
- * @version 1.0.0
- */
-
-import axios from 'axios';
-import { reactive, ref } from 'vue';
-
-axios.defaults.withXSRFToken = true;
-axios.defaults.withCredentials = true;
-
-/**
- * Códigos de falla
- */
-const failCodes = [
-    400,
-    409,
-    422
-];
-
-/**
- * Servidor a utilizar
- */
-const token     = ref(localStorage.token);
-const csrfToken = ref(localStorage.csrfToken);
-
-/**
- * Define el token de la api
- */
-const defineApiToken = (x) => {
-    token.value = x;
-    localStorage.token = x;
-}
-
-/**
- * Define CSRF token
- */
-const defineCsrfToken = (x) => {
-    csrfToken.value = x;
-    localStorage.csrfToken = x;
-}
-
-/**
- * Define el token de la api
- */
-const resetApiToken = () => {
-    token.value = undefined;
-    localStorage.removeItem('token');
-}
-
-/**
- * Reset CSRF token
- */
-const resetCsrfToken = () => {
-    csrfToken.value = undefined;
-    localStorage.removeItem('csrfToken');
-}
-
-/**
- * Determina si el token tiene algo o no
- */
-const hasToken = () => {
-    return token.value !== undefined;
-}
-
-/**
- * Fuerza el cierre de la sesión
- */
-const closeSession = () => {
-    resetApiToken()
-    resetCsrfToken()
-
-    Notify.info(Lang('session.closed'))
-
-    location.replace('/')
-}
-
-/**
- * Composición de llaves
- * 
- * Utilizado para transformar llaves en FormData
- */
-function composeKey(parent, key) {
-  return parent ? parent + '[' + key + ']' : key
-}
-
-/**
- * URL API
- */
-const apiURL = (path) => {
-    return import.meta.env.VITE_API_URL + '/api/' + path
-}
-
-/**
- * Instancia de la API de uso directo
- */
-const api = {
-    errors: {},
-    hasErrors: false,
-    processing: false,
-    wasSuccessful: false,
-    async load({
-        method,
-        url,
-        apiToken = token.value,
-        options = { 
-            data:{},
-            params:{}
-        }
-    }) {
-        this.errors        = {};
-        this.hasErrors     = false;
-        this.processing    = true;
-        this.wasSuccessful = false;
-
-        try {
-            if(options.hasOwnProperty('onStart')) {
-                options.onStart();
-            }
-
-            let { data } = await axios({
-                method: method,
-                url,
-                data: options.data,
-                params: options.params,
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Accept': 'application/json',
-                    'Authorization': `Bearer ${apiToken}`
-                }
-            });
-
-            if(data.status == 'success') {
-                this.wasSuccessful = true;
-
-                if(options.hasOwnProperty('onSuccess')) {
-                    options.onSuccess(data.data, data);
-                }
-            } else if(data.status == 'fail') {
-                if(options.hasOwnProperty('onFail')) {
-                    options.onFail(data.data);
-                }
-            }
-
-            if(options.hasOwnProperty('onFinish')) {
-                options.onFinish(data.data);
-            }
-        } catch (error) {
-            console.error(error)
-
-            this.hasErrors = true;
-
-            let { response } = error
-
-            // Código de sesión invalida
-            if(response.status === 401 && response.data?.message == 'Unauthenticated.') {
-                Notify.error(Lang('session.expired'));
-
-                closeSession();
-
-                return
-            }
-
-            // Fallas
-            if(failCodes.includes(response.status)) {
-                options.hasOwnProperty('onFail')
-                    ? options.onFail(response.data.data)
-                    : Notify.warning(response.data.data.message);
-
-                return
-            }
-
-            if(options.hasOwnProperty('onError')) {
-                options.onError(response.data);
-            }
-
-            if(response.data != null) {
-                this.errors = response.data.errors;
-            }
-        }
-
-        this.processing = false;
-    },
-    get(url, options) {
-        this.load({
-            method: 'get',
-            url,
-            options
-        })
-    },
-    post(url, options) {
-        this.load({
-            method: 'post',
-            url,
-            options
-        })
-    },
-    put(url, options) {
-        this.load({
-            method: 'put',
-            url,
-            options
-        })
-    },
-    patch(url, options) {
-        this.load('patch', {
-            method: 'patch',
-            url,
-            options
-        })
-    },
-    delete(url, options) {
-        this.load({
-            method: 'delete',
-            url,
-            options
-        })
-    },
-    catalog(resources, options) {
-        this.post(apiURL('catalogs/get'), {
-            ...options,
-            data: resources
-        })
-    },
-    download(url, file, params = {}) {
-        axios({
-            url: url,
-            params: params,
-            method: 'GET',
-            responseType: 'blob',
-            headers: {
-                'Authorization': `Bearer ${token.value}`
-            }
-        }).then((res) => {
-            const href = URL.createObjectURL(res.data);
-            const link = document.createElement('a');
-
-            link.href = href;
-            link.setAttribute('download', file);
-            document.body.appendChild(link);
-            link.click();
-        
-            document.body.removeChild(link);
-
-            URL.revokeObjectURL(href);
-        });
-    },
-}
-
-/**
- * Instancia de la API
- */
-const useApi = () => reactive({...api});
-
-/**
- * Instancia de la API para formularios
- */
-const useForm = (form = {}) =>  {
-    // Permite agregar datos mediante una transformación
-    let transform = (data) => data
-
-    // Contador de archivos
-    let filesCounter = 0
-
-    // Procesar elementos del formulario
-    const append = (formData, key, value) => {
-        if(Array.isArray(value)) {
-            return Array.from(value.keys()).forEach((index) => append(formData, composeKey(key, index), value[index]));
-        } else if(value instanceof Date) {
-            return formData.append(key, value.toISOString())
-        } else if(value instanceof File) {
-            filesCounter++
-            return formData.append(key, value, value.name)
-        } else if (value instanceof Blob) {
-            return formData.append(key, value)
-        } else if(typeof value === 'boolean') {
-            return formData.append(key, value ? '1' : '0')
-        } else if (typeof value === 'string') {
-            return formData.append(key, value)
-        } else if (typeof value === 'number') {
-            return formData.append(key, `${value}`)
-        } else if(value === null || value === undefined) {
-            return formData.append(key, '')
-        } else if (typeof value === 'object') {
-            objectToFormData(formData, key, value);
-        }
-    }
-
-     // Convertir objeto a elemento de FormData
-    const objectToFormData = (formData, parentKey = null, value) => {
-        value = value || {}
-        for (const key in value) {
-          if (Object.prototype.hasOwnProperty.call(value, key)) {
-            append(formData, composeKey(parentKey, key), value[key])
-          }
-        }
-
-        return formData
-    }
-
-    // Transforma todos los datos
-    const prepareData = (data) => {
-        let formData = new FormData();
-
-        for (let i in data) {
-            append(formData, i, data[i]);
-        }
-
-        return formData;
-    }
-
-    return reactive({
-        ...form,
-        errors: {},
-        hasErrors: false,
-        processing: false,
-        wasSuccessful: false,
-        _inputs: Object.keys(form),
-        _original: {
-            ...form
-        },
-        reset() {
-            for(let i in this._original) {
-                this[i] = this._original[i]
-            }
-        },
-        data() {
-            let data = {};
-
-            for (let i in this) {
-                if(typeof this[i] !== 'function' && this._inputs.includes(i)){
-                    data[i] = this[i]
-                }
-            }
-
-            return data;
-        },
-        transform(callback) {
-            transform = callback
-
-            return this
-        },
-        async load({
-            method,
-            url,
-            apiToken = token.value,
-            options = { 
-                data:{},
-                params:{}
-            }
-        }) {
-            this.errors        = {};
-            this.hasErrors     = false;
-            this.processing    = true;
-            this.wasSuccessful = false;
-
-            try {
-                if(options.hasOwnProperty('onStart')) {
-                    options.onStart(options);
-                }
-
-                let { data } = await axios({
-                    method: method,
-                    url,
-                    data: prepareData(transform(this.data())),
-                    headers: {
-                        'Content-Type': (filesCounter > 0)
-                            ? 'multipart/form-data  boundary='
-                            : 'application/json',
-                        'Accept': 'application/json',
-                        'Authorization': `Bearer ${apiToken}`,
-                        'X-CSRF-TOKEN': csrfToken.value
-                    }
-                });
-
-                if(data.status == 'success') {
-                    this.wasSuccessful = true;
-
-                    if(options.hasOwnProperty('onSuccess')) {
-                        options.onSuccess(data?.data);
-                    }
-                } else if(data.status == 'fail') {
-                    if(options.hasOwnProperty('onFail')) {
-                        options.onFail(data?.data);
-                    }
-                }
-
-                if(options.hasOwnProperty('onFinish')) {
-                    options.onFinish(data?.data);
-                }
-            } catch (error) {
-                console.error(error);
-
-                this.hasErrors = true;
-
-                let { response } = error
-                
-                if(options.hasOwnProperty('onError')) {
-                    options.onError(response);
-                }
-
-                if(response.data?.errors != null) {
-                    this.errors = response.data.errors;
-
-                    for(let e in this.errors) {
-                        Notify.error(this.errors[e])
-                    }
-                }
-            }
-
-            this.processing = false;
-        },
-        fill(model) {
-            this._inputs.forEach(element => {
-                this[element] = (element == 'is_active')
-                    ? (model[element] == 1)
-                    : model[element] ?? this[element]
-            });
-        },
-        get(url, options) {
-            this.load({
-                method: 'get',
-                url,
-                options
-            })
-        },
-        post(url, options) {
-            this.load({
-                method: 'post',
-                url,
-                options
-            })
-        },
-        put(url, options) {
-            this.load({
-                method: 'put',
-                url,
-                options
-            })
-        },
-        patch(url, options) {
-            this.load('patch', {
-                method: 'patch',
-                url,
-                options
-            })
-        },
-        delete(url, options) {
-            this.load({
-                method: 'delete',
-                url,
-                options
-            })
-        },
-    })
-}
-
-/**
- * Instancia de a API para buscador
- */
-const useSearcher = (options = {
-    url: '',
-    filters: ''
-}) => reactive({
-    query: '',
-    errors: {},
-    hasErrors: false,
-    processing: false,
-    wasSuccessful: false,
-    async load({
-        url,
-        apiToken = token.value,
-        filters,
-    }) {
-        this.errors = {};
-        this.processing = true;
-        this.hasErrors = false;
-        this.wasSuccessful = false;
-
-        try {
-            if(options.hasOwnProperty('onStart')) {
-                options.onStart();
-            }
-
-            let { data } = await axios({
-                method: 'get',
-                url,
-                params: {
-                    q: this.query,
-                    ...filters
-                },
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Accept': 'application/json',
-                    'Authorization': `Bearer ${apiToken}`
-                }
-            });
-
-            if(data.status == 'success') {
-                this.wasSuccessful = true;
-
-                if(options.hasOwnProperty('onSuccess')) {
-                    options.onSuccess(data.data);
-                }
-            } else if(data.status == 'fail') {
-                if(options.hasOwnProperty('onFail')) {
-                    options.onFail(data.data);
-                }
-            }
-
-            if(options.hasOwnProperty('onFinish')) {
-                options.onFinish(data.data);
-            }
-        } catch (error) {
-            console.error(error);
-
-            this.hasErrors = true;
-
-            let { response } = error
-
-            // Código de sesión invalida
-            if(response.status === 401 && response.data.message == 'Unauthenticated.') {
-                Notify.error(Lang('session.expired'));
-                closeSession();
-                return
-            }
-            
-            if(options.hasOwnProperty('onError')) {
-                options.onError(response);
-            }
-
-            if(response.data?.errors != null) {
-                this.errors = response.data.errors;
-                for(let e in this.errors) {
-                    Notify.error(this.errors[e])
-                }
-            }
-        }
-
-        this.processing = false;
-    },
-    pagination(url, filter = {}) {
-        this.load({
-            url,
-            filters : {
-                ...options.filters,
-                ...filter,
-            }
-        })
-    },
-    search(q = '', filter = {}) {
-        this.query = q
-        this.load({
-            url: options.url,
-            filters : {
-                ...options.filters,
-                ...filter,
-            }
-        })
-    },
-    refresh(filter = {}) {
-        this.load({
-            url: options.url,
-            filters : {
-                ...options.filters,
-                ...filter,
-            }
-        })
-    }
-})
-
-export {
-    api,
-    token,
-    apiURL,
-    closeSession,
-    defineCsrfToken,
-    defineApiToken,
-    hasToken,
-    resetApiToken,
-    useApi,
-    useForm,
-    useSearcher
-}
\ No newline at end of file
diff --git a/src/services/Broadcast.js b/src/services/Broadcast.js
deleted file mode 100644
index 081e921..0000000
--- a/src/services/Broadcast.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Echo from 'laravel-echo';
-import Pusher from 'pusher-js';
-import { token } from '@Services/Api';
-
-window.Pusher = Pusher;
-
-window.Echo = new Echo({
-    broadcaster: 'reverb',
-    authorizer: (channel, options) => {
-        return {
-            authorize: async (socketId, callback) => {
-                try {
-                    let { data } = await axios({
-                        method: 'post',
-                        url: import.meta.env.VITE_REVERB_SCHEME + '://' + import.meta.env.VITE_REVERB_HOST + '/broadcasting/auth',
-                        data: {
-                            socket_id: socketId,
-                            channel_name: channel.name,
-                        },
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'Accept': 'application/json',
-                            'Authorization': `Bearer ${token.value}`
-                        }
-                    });
-
-                    callback(null, data);
-                } catch (err) {
-                    callback(err);
-                }
-            }
-        };
-    },
-    key: import.meta.env.VITE_REVERB_APP_KEY,
-    wsHost: import.meta.env.VITE_REVERB_HOST,
-    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
-    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
-    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
-    enabledTransports: ['ws', 'wss'],
-});
diff --git a/src/services/Page.js b/src/services/Page.js
deleted file mode 100644
index a0ec9ff..0000000
--- a/src/services/Page.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import { reactive } from "vue";
-import { api, closeSession } from '@Services/Api';
-import { resetPermissions } from '@Plugins/RolePermission';
-
-/**
- * Cache
- * 
- * Permite cargar los datos una vez para la sesión actual. Se mantienen mientras
- * no se recargue la página.
- */
-const page = reactive({
-    lang: 'es',
-    app: {},
-    user: {
-        id: 0,
-        name: 'public'
-    }
-})
-
-/**
- * Recarga datos en cache
- */
-const reloadApp = () => {
-    const user = localStorage.user
-    const app = localStorage.app
-
-    if(user) {
-        page.user = JSON.parse(user);
-    }
-
-    if(app) {
-        page.app = JSON.parse(app);
-    }
-}
-
-/**
- * Limpiar sesión de usuario
- */
-const resetPage = () => {
-    localStorage.removeItem('user');
-}
-
-/**
- * Permite buscar una opcionalmente
- */
-const view = ({
-    name = '',
-    params = {},
-    query = {},
-}) => ({
-    name: name,
-    params,
-    query,
-})
-
-/**
- * Almacenar datos usuario
- */
-const defineUser = (user) => {
-    localStorage.user = JSON.stringify({
-        id: user.id,
-        name: user.name,
-        lastname: `${user.paternal} ${user?.maternal ?? ''}`,
-        email: user.email,
-        phone: user.phone,
-        profile_photo_url: user.profile_photo_url,
-        profile_photo_path: user.profile_photo_path,
-    });
-}
-
-/**
- * Definir datos de la aplicación
- */
-const defineApp = (app) => {
-    localStorage.app = JSON.stringify(app);
-}
-
-/**
- * Instalar el componente de forma nativa
- */
-const pagePlugin = {
-    install: (app, options) => {
-        app.config.globalProperties.$page = page;
-        app.config.globalProperties.$view = view;
-    }
-}
-
-/**
- * Reload user
- */
-const reloadUser = () => {
-    return api.get(route('user.show'), {
-        onSuccess: (r) => {
-            defineUser(r.user)
-            reloadApp()
-
-            return r.user;
-        }
-    });
-}
-
-/**
- * Cerrar sesión
- */
-const logout = () => {
-    resetPermissions()
-    resetPage()
-  
-    api.post(route('auth.logout'), {
-      onSuccess: (r) => {
-        if(r.is_revoked === true) {
-          closeSession()
-
-          location.replace('/')
-        }
-      }
-    });
-};
-
-export {
-    pagePlugin,
-    page,
-    defineApp,
-    defineUser,
-    reloadApp,
-    reloadUser,
-    resetPage,
-    logout,
-    view
-}
\ No newline at end of file
diff --git a/src/services/api.ts b/src/services/api.ts
new file mode 100644
index 0000000..97fe9d6
--- /dev/null
+++ b/src/services/api.ts
@@ -0,0 +1,45 @@
+import axios from 'axios';
+import type { InternalAxiosRequestConfig } from 'axios';
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:3000',
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Interceptor para agregar el Bearer Token a cada petición
+api.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    const token = localStorage.getItem('auth_token'); // Ajusta según dónde guardes el token
+    if (token && config.headers) {
+      config.headers['Authorization'] = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Interceptor para manejar errores de forma global
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response) {
+      // El servidor respondió con un código de estado fuera del rango 2xx
+      console.error(error.response.data);
+      
+      // Manejar error 401 (no autorizado) - redirigir al login
+      if (error.response.status === 401) {
+        localStorage.removeItem('auth_token');
+        localStorage.removeItem('auth_user');
+        window.location.href = '/login';
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;
\ No newline at end of file
diff --git a/src/stores/DarkMode.js b/src/stores/DarkMode.js
deleted file mode 100644
index 7efb6fd..0000000
--- a/src/stores/DarkMode.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { defineStore } from 'pinia'
-
-// Identificador de la página
-const page = document.getElementById('main-page');
-
-// Almacén del modo oscuro
-const useDarkMode = defineStore('dark-mode', {
-    state: () => ({
-        isActive: true
-    }),
-    getters: {
-        getTheme(state) {
-            return state.isActive
-                ? 'dark'
-                : 'light';
-        },
-        isDark(state) {
-            return state.isActive === true;
-        },
-        isLight(state) {
-            return state.isActive === false;
-        }
-    },
-    actions: {
-        boot() {
-            this.apply((localStorage.darkMode == 'true'));
-        },
-        applyDark() {
-            this.apply(true);
-        },
-        applyLight() {
-            this.apply(false);
-        },
-        apply(state) {
-            this.isActive = state;
-            localStorage.darkMode = state
-
-            if(state) {
-                page.classList.add('dark');
-            } else {
-                page.classList.remove('dark');
-            }
-        }
-    },
-})
-
-export default useDarkMode
\ No newline at end of file
diff --git a/src/stores/LeftSidebar.js b/src/stores/LeftSidebar.js
deleted file mode 100644
index 298b878..0000000
--- a/src/stores/LeftSidebar.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import { defineStore } from 'pinia'
-
-// Almacenar estado de la barra lateral derecha
-const useLeftSidebar = defineStore('left-sidebar', {
-    state: () => ({
-        isActive: true
-    }),
-    getters: {
-        isOpened(state) {
-            return state.isActive === true;
-        },
-        isClosed(state) {
-            return state.isActive === false;
-        }
-    },
-    actions: {
-        boot() {
-            this.apply(localStorage.leftSidebar == 'true');
-        },
-        open() {
-            this.apply(true);
-        },
-        close() {
-            this.apply(false);
-        },
-        toggle() {
-            this.apply(!this.isActive)
-        },
-        apply(state) {
-            this.isActive = state
-            localStorage.leftSidebar = state
-        }
-    }
-})
-
-export default useLeftSidebar
\ No newline at end of file
diff --git a/src/stores/Loader.js b/src/stores/Loader.js
deleted file mode 100644
index dd0c23b..0000000
--- a/src/stores/Loader.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import axios from 'axios';
-import { defineStore } from 'pinia'
-
-// Almacén del modo oscuro
-const useLoader = defineStore('loader', {
-    state: () => ({
-        processing: false
-    }),
-    getters: {
-        isProcessing(state) {
-            return state.processing
-        }
-    },
-    actions: {
-        boot() {
-            axios.interceptors.request.use((config) => {
-                this.processing = true
-                return config;
-            }, (error) => {
-                this.processing = false
-                return Promise.reject(error);
-            });
-            
-            axios.interceptors.response.use((response) => {
-                this.processing = false
-                return response;
-            }, (error) => {
-                this.processing = false
-                return Promise.reject(error);
-            });
-        }
-    },
-})
-
-export default useLoader
\ No newline at end of file
diff --git a/src/stores/NotificationSidebar.js b/src/stores/NotificationSidebar.js
deleted file mode 100644
index d9e0bf4..0000000
--- a/src/stores/NotificationSidebar.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { defineStore } from 'pinia'
-
-// Almacenar estado de la barra lateral derecha
-const useNotificationSidebar = defineStore('notification-sidebar', {
-    state: () => ({
-        isActive: false
-    }),
-    getters: {
-        isOpened(state) {
-            return state.isActive === true;
-        },
-        isClosed(state) {
-            return state.isActive === false;
-        }
-    },
-    actions: {
-        open() {
-            this.apply(true);
-        },
-        close() {
-            this.apply(false);
-        },
-        toggle() {
-            this.apply(!this.isActive)
-        },
-        apply(state) {
-            this.isActive = state
-            localStorage.rightSidebar = state
-        }
-    },
-})
-
-export default useNotificationSidebar
\ No newline at end of file
diff --git a/src/stores/Notifications.js b/src/stores/Notifications.js
deleted file mode 100644
index 92590e4..0000000
--- a/src/stores/Notifications.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import { defineStore } from 'pinia'
-import { v4 as uuidv4 } from 'uuid';
-
-// Almacenar estado de las notificaciones
-const useNotification = defineStore('notifications', {
-    state: () => ({
-        notifications: [],
-    }),
-    getters: {
-        getNotifications(state) {
-            return state.notifications
-        }
-    },
-    actions: {
-        boot() {
-            let local = localStorage.getItem('notifications')
-
-            if(local) {
-                this.notifications = JSON.parse(localStorage.getItem('notifications'))
-            }
-        },
-        add({
-            title = '',
-            message = '',
-            type = 'info',
-            preserve = false
-        }) {
-            this.notifications.push({
-                uuid: uuidv4(),
-                title,
-                message,
-                type,
-                preserve
-            })
-
-            this.save()
-        },
-        delete(uuid) {
-            this.notifications = this.notifications.filter(x => {
-                return x.uuid != uuid
-            })
-            
-            this.save()
-        },
-        save() {
-            localStorage.setItem('notifications', JSON.stringify(this.notifications.filter(x => {
-                return x.preserve == true
-            } )))
-        }
-    },
-})
-
-export default useNotification
\ No newline at end of file
diff --git a/src/stores/Notifier.js b/src/stores/Notifier.js
deleted file mode 100644
index 09d0cfd..0000000
--- a/src/stores/Notifier.js
+++ /dev/null
@@ -1,134 +0,0 @@
-import { defineStore } from 'pinia'
-import { api } from '@Services/Api'
-import { page } from '@Services/Page'
-import { hasPermission, reloadPermissions, getAllRolesIds } from '@Plugins/RolePermission'
-import { boot as bootAuthUsers, addUser, removeUser } from '@Plugins/AuthUsers'
-
-// Almacenar estado de la barra lateral derecha
-const useNotifier = defineStore('notifier', {
-    state: () => ({
-        counter: 0,
-        unreadClosedCounter: 0,
-        notifications: [],
-        isStarted: false,
-        isEnabled: import.meta.env.VITE_REVERB_ACTIVE === 'true',
-        user_id: 0,
-    }),
-    actions: {
-        // Iniciar instancia
-        boot() {
-            if(!this.isStarted && this.isEnabled) {
-                this.user_id = page.user.id;
-
-                this.subscribeGLobalNotifications();
-                this.subscribeUserNotifications();
-                this.suscribeAuthUsers();
-                this.suscribeRoles();
-                this.isStarted = true;
-
-                this.getUpdates();
-            }
-        },
-        // Detener instancia
-        stop() {
-            if(this.isStarted) {
-              this.unsubscribeUserNotification();
-              this.unsubscribeGlobalNotification();
-        
-              this.started.value = false;
-            }
-        },
-        // Notificaciones Globales
-        subscribeGLobalNotifications() {
-            Echo.private('Global')
-                .listen('Notification', e => {
-                    Notify[e.type](e.message, e.title, e.timeout)
-                    this.getUpdates()
-                });
-
-        },
-        unsubscribeGlobalNotifications() {
-            Echo.leave('Global');
-        },
-        // Usuarios logueados
-        suscribeAuthUsers() {
-            if(hasPermission('users.index')) {
-                Echo.join('online')
-                .here((users) => {
-                    bootAuthUsers(users);
-                })
-                .joining((user) => {
-                    addUser(user);
-                })
-                .leaving((user) => {
-                    removeUser(user);
-                });
-            } else {
-                Echo.join('online');
-            }
-        },
-        suscribeRoles() {
-            const roles = getAllRolesIds();
-
-            roles.forEach(role => {
-                Echo.private(`App.Models.Role.${role}`)
-                    .listen('UpdateRoleUser', e => {
-                        reloadPermissions();
-
-                        Notify.success(`Actualizando permisos de ${e.role.description}`)
-                    });
-            });
-        },
-        // Notificaciones del usuario
-        subscribeUserNotifications() {
-            Echo.private(`App.Models.User.${this.user_id}`)
-                .notification(x => {
-                    Notify[x.typeNotification](x.description, x.title, x.timeout)
-                    this.getUpdates()
-                })
-        },
-        unsubscribeUserNotification() {
-            Echo.leave(`App.Models.User.${this.user_id}`);
-        },
-        readNotification(id) {
-            api.post(route('system.notifications.read'), {
-                data: {
-                    id
-                },
-                onSuccess: res => {
-                    this.getUpdates();
-                },
-                onFailed: res => {
-                    this.getUpdates();
-                }
-            })
-        },
-        closeNotification(id) {
-            api.post(route('system.notifications.close'), {
-                data: {
-                    id
-                },
-                onSuccess: res => {
-                    this.getUpdates();
-                },
-                onFailed: res => {
-                    this.getUpdates();
-                }
-            })
-        },
-        getUpdates() {
-            api.get(route('system.notifications.all-unread'), {
-                onSuccess: res => {
-                    this.counter = res.total;
-                    this.unreadClosedCounter = res.unread_closed;
-                    this.notifications = res.notifications;
-                },
-                onFailed: res => {
-                    console.log('error', res)
-                }
-            })
-        }
-    }
-})
-
-export default useNotifier
\ No newline at end of file
diff --git a/src/stores/RightSidebar.js b/src/stores/RightSidebar.js
deleted file mode 100644
index d205ed4..0000000
--- a/src/stores/RightSidebar.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { defineStore } from 'pinia'
-
-// Almacenar estado de la barra lateral derecha
-const useRightSidebar = defineStore('right-sidebar', {
-    state: () => ({
-        isActive: false
-    }),
-    getters: {
-        isOpened(state) {
-            return state.isActive === true;
-        },
-        isClosed(state) {
-            return state.isActive === false;
-        }
-    },
-    actions: {
-        open() {
-            this.apply(true);
-        },
-        close() {
-            this.apply(false);
-        },
-        toggle() {
-            this.apply(!this.isActive)
-        },
-        apply(state) {
-            this.isActive = state
-            localStorage.rightSidebar = state
-        }
-    },
-})
-
-export default useRightSidebar
\ No newline at end of file
diff --git a/src/stores/WarehouseClassifications.js b/src/stores/WarehouseClassifications.js
deleted file mode 100644
index efc57ee..0000000
--- a/src/stores/WarehouseClassifications.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import { defineStore } from 'pinia'
-import { api } from '../services/Api'
-
-// Store para las clasificaciones de almacén
-const useWarehouseClassifications = defineStore('warehouseClassifications', {
-    state: () => ({
-        classifications: [],
-        loading: false,
-        error: null
-    }),
-    
-    getters: {
-        // Obtener todas las clasificaciones
-        allClassifications(state) {
-            return state.classifications
-        },
-        
-        // Obtener solo las clasificaciones principales (sin padre)
-        mainClassifications(state) {
-            return state.classifications.filter(c => !c.parent_id)
-        },
-        
-        // Obtener clasificaciones por estado
-        activeClassifications(state) {
-            return state.classifications.filter(c => c.is_active)
-        },
-        
-        // Obtener subcategorías de una clasificación específica
-        getSubcategoriesByParentId: (state) => (parentId) => {
-            return state.classifications.filter(c => c.parent_id === parentId)
-        },
-        
-        // Obtener una clasificación por ID
-        getClassificationById: (state) => (id) => {
-            return state.classifications.find(c => c.id === id)
-        },
-        
-        // Verificar si está cargando
-        isLoading(state) {
-            return state.loading
-        },
-        
-        // Obtener error actual
-        currentError(state) {
-            return state.error
-        }
-    },
-    
-    actions: {
-        // Cargar todas las clasificaciones
-        async fetchClassifications() {
-            this.loading = true
-            this.error = null
-            
-            try {
-                const response = await api.get('/warehouse-classifications')
-                this.classifications = response.data.data || response.data
-                return response.data
-            } catch (error) {
-                this.error = error.message || 'Error al cargar las clasificaciones'
-                console.error('Error fetching classifications:', error)
-                throw error
-            } finally {
-                this.loading = false
-            }
-        },
-        
-        // Crear nueva clasificación
-        async createClassification(data) {
-            this.loading = true
-            this.error = null
-            
-            try {
-                const response = await api.post('/warehouse-classifications', data)
-                const newClassification = response.data.data || response.data
-                
-                // Agregar la nueva clasificación al estado
-                this.classifications.push(newClassification)
-                
-                // Si tiene parent_id, actualizar la lista de children del padre
-                if (newClassification.parent_id) {
-                    const parent = this.getClassificationById(newClassification.parent_id)
-                    if (parent) {
-                        if (!parent.children) {
-                            parent.children = []
-                        }
-                        parent.children.push(newClassification)
-                    }
-                }
-                
-                return response.data
-            } catch (error) {
-                this.error = error.message || 'Error al crear la clasificación'
-                console.error('Error creating classification:', error)
-                throw error
-            } finally {
-                this.loading = false
-            }
-        },
-        
-        // Actualizar clasificación
-        async updateClassification(id, data) {
-            this.loading = true
-            this.error = null
-            
-            try {
-                const response = await api.put(`/warehouse-classifications/${id}`, data)
-                const updatedClassification = response.data.data || response.data
-                
-                // Actualizar en el estado local
-                const index = this.classifications.findIndex(c => c.id === id)
-                if (index !== -1) {
-                    this.classifications[index] = { ...this.classifications[index], ...updatedClassification }
-                }
-                
-                // También actualizar en children si existe
-                this.classifications.forEach(classification => {
-                    if (classification.children) {
-                        const childIndex = classification.children.findIndex(c => c.id === id)
-                        if (childIndex !== -1) {
-                            classification.children[childIndex] = { ...classification.children[childIndex], ...updatedClassification }
-                        }
-                    }
-                })
-                
-                return response.data
-            } catch (error) {
-                this.error = error.message || 'Error al actualizar la clasificación'
-                console.error('Error updating classification:', error)
-                throw error
-            } finally {
-                this.loading = false
-            }
-        },
-        
-        // Eliminar clasificación
-        async deleteClassification(id) {
-            this.loading = true
-            this.error = null
-            
-            try {
-                await api.delete(`/warehouse-classifications/${id}`)
-                
-                // Remover del estado local
-                this.classifications = this.classifications.filter(c => c.id !== id)
-                
-                // También remover de children si existe
-                this.classifications.forEach(classification => {
-                    if (classification.children) {
-                        classification.children = classification.children.filter(c => c.id !== id)
-                    }
-                })
-                
-                return true
-            } catch (error) {
-                this.error = error.message || 'Error al eliminar la clasificación'
-                console.error('Error deleting classification:', error)
-                throw error
-            } finally {
-                this.loading = false
-            }
-        },
-        
-        // Cambiar estado de una clasificación
-        async toggleClassificationStatus(classification) {
-            this.loading = true
-            this.error = null
-            
-            try {
-                const newStatus = !classification.is_active
-                const response = await api.put(`/warehouse-classifications/${classification.id}`, {
-                    ...classification,
-                    is_active: newStatus
-                })
-                
-                const updatedClassification = response.data.data || response.data
-                
-                // Actualizar en el estado local
-                const index = this.classifications.findIndex(c => c.id === classification.id)
-                if (index !== -1) {
-                    this.classifications[index].is_active = newStatus
-                }
-                
-                // También actualizar en children si existe
-                this.classifications.forEach(parentClassification => {
-                    if (parentClassification.children) {
-                        const childIndex = parentClassification.children.findIndex(c => c.id === classification.id)
-                        if (childIndex !== -1) {
-                            parentClassification.children[childIndex].is_active = newStatus
-                        }
-                    }
-                })
-                
-                return response.data
-            } catch (error) {
-                this.error = error.message || 'Error al cambiar el estado'
-                console.error('Error toggling status:', error)
-                throw error
-            } finally {
-                this.loading = false
-            }
-        },
-        
-        // Limpiar errores
-        clearError() {
-            this.error = null
-        },
-        
-        // Reset del store
-        $reset() {
-            this.classifications = []
-            this.loading = false
-            this.error = null
-        }
-    }
-})
-
-export { useWarehouseClassifications }
\ No newline at end of file
diff --git a/src/stores/warehouseStore.ts b/src/stores/warehouseStore.ts
new file mode 100644
index 0000000..2e5ca09
--- /dev/null
+++ b/src/stores/warehouseStore.ts
@@ -0,0 +1,85 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import { warehouseService } from '../modules/warehouse/services/warehouseService';
+import type { Warehouse } from '../modules/warehouse/types/warehouse';
+
+export const useWarehouseStore = defineStore('warehouse', () => {
+    // State
+    const warehouses = ref<Warehouse[]>([]);
+    const loading = ref(false);
+    const loaded = ref(false);
+    const error = ref<string | null>(null);
+
+    // Getters
+    const activeWarehouses = computed(() => 
+        warehouses.value.filter(w => w.is_active)
+    );
+
+    const inactiveWarehouses = computed(() => 
+        warehouses.value.filter(w => !w.is_active)
+    );
+
+    const warehouseCount = computed(() => warehouses.value.length);
+
+    const getWarehouseById = computed(() => {
+        return (id: number) => warehouses.value.find(w => w.id === id);
+    });
+
+    const getWarehouseByCode = computed(() => {
+        return (code: string) => warehouses.value.find(w => w.code === code);
+    });
+
+    // Actions
+    const fetchWarehouses = async (force = false) => {
+        // Si ya están cargados y no se fuerza la recarga, no hacer nada
+        if (loaded.value && !force) {
+            console.log('Warehouses already loaded from store');
+            return;
+        }
+
+        try {
+            loading.value = true;
+            error.value = null;
+            
+            const response = await warehouseService.getWarehouses();
+            warehouses.value = response.data.data.warehouses.data;
+            loaded.value = true;
+            
+            console.log('Warehouses loaded into store:', warehouses.value.length);
+        } catch (err) {
+            error.value = err instanceof Error ? err.message : 'Error loading warehouses';
+            console.error('Error in warehouse store:', err);
+            throw err;
+        } finally {
+            loading.value = false;
+        }
+    };
+
+    const refreshWarehouses = () => {
+        return fetchWarehouses(true);
+    };
+
+    const clearWarehouses = () => {
+        warehouses.value = [];
+        loaded.value = false;
+        error.value = null;
+    };
+
+    return {
+        // State
+        warehouses,
+        loading,
+        loaded,
+        error,
+        // Getters
+        activeWarehouses,
+        inactiveWarehouses,
+        warehouseCount,
+        getWarehouseById,
+        getWarehouseByCode,
+        // Actions
+        fetchWarehouses,
+        refreshWarehouses,
+        clearWarehouses,
+    };
+});
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
new file mode 100644
index 0000000..972452c
--- /dev/null
+++ b/src/types/global.d.ts
@@ -0,0 +1,39 @@
+// Tipos globales de la aplicación
+
+export interface ApiResponse<T> {
+    data: T;
+    message?: string;
+    success: boolean;
+}
+
+export interface PaginatedResponse<T> {
+    data: T[];
+    total: number;
+    page: number;
+    pageSize: number;
+}
+
+export interface User {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+}
+
+export interface TableColumn {
+    field: string;
+    header: string;
+    sortable?: boolean;
+    filterable?: boolean;
+}
+
+export type SortOrder = 'asc' | 'desc';
+
+export interface SortOptions {
+    field: string;
+    order: SortOrder;
+}
+
+export interface FilterOptions {
+    [key: string]: any;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 9c7debf..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,82 +0,0 @@
-// tailwind.config.js
-import { defineConfig } from 'tailwindcss';
-
-export default defineConfig({
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          100: '#dbeafe',
-          200: '#bfdbfe',
-          300: '#93c5fd',
-          400: '#60a5fa',
-          500: '#3b82f6',
-          600: '#2563eb',
-          700: '#1d4ed8',
-          800: '#1e40af',
-          900: '#1e3a8a',
-        },
-        secondary: {
-          100: '#dbeafe',
-          200: '#bfdbfe',
-          300: '#93c5fd',
-          400: '#60a5fa',
-          500: '#3b82f6',
-          600: '#2563eb',
-          700: '#1d4ed8',
-          800: '#1e40af',
-          900: '#1e3a8a',
-          DEFAULT: '#3b82f6',
-        },
-        info: {
-          100: '#cffafe',
-          200: '#a5f3fc',
-          300: '#67e8f9',
-          400: '#22d3ee',
-          500: '#06b6d4',
-          600: '#0891b2',
-          700: '#0e7490',
-          800: '#155e75',
-          900: '#164e63',
-          DEFAULT: '#06b6d4',
-        },
-        success: {
-          100: '#dcfce7',
-          200: '#bbf7d0',
-          300: '#86efac',
-          400: '#4ade80',
-          500: '#22c55e',
-          600: '#16a34a',
-          700: '#15803d',
-          800: '#166534',
-          900: '#14532d',
-          DEFAULT: '#22c55e',
-        },
-        danger: {
-          100: '#fee2e2',
-          200: '#fecaca',
-          300: '#fca5a5',
-          400: '#f87171',
-          500: '#ef4444',
-          600: '#dc2626',
-          700: '#b91c1c',
-          800: '#991b1b',
-          900: '#7f1d1d',
-          DEFAULT: '#ef4444',
-        },
-        warning: {
-          100: '#fef9c3',
-          200: '#fef08a',
-          300: '#fde047',
-          400: '#facc15',
-          500: '#eab308',
-          600: '#ca8a04',
-          700: '#a16207',
-          800: '#854d0e',
-          900: '#713f12',
-          DEFAULT: '#eab308',
-        },
-      },
-    },
-  },
-});
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..44b0bf6
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,20 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..8a67f62
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.js b/vite.config.js
deleted file mode 100644
index d570e01..0000000
--- a/vite.config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { fileURLToPath, URL } from 'node:url'
-
-import { defineConfig } from 'vite'
-import tailwindcss from "@tailwindcss/vite";
-import vue from '@vitejs/plugin-vue'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [vue(), tailwindcss()],
-  server: {
-    allowedHosts: true,
-  },
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-      '@Components': fileURLToPath(new URL('./src/components', import.meta.url)),
-      '@Controllers': fileURLToPath(new URL('./src/controllers', import.meta.url)),
-      '@Holos': fileURLToPath(new URL('./src/components/Holos', import.meta.url)),
-      '@Layouts': fileURLToPath(new URL('./src/layouts', import.meta.url)),
-      '@Lang': fileURLToPath(new URL('./src/lang', import.meta.url)),
-      '@Router': fileURLToPath(new URL('./src/router', import.meta.url)),
-      '@Pages': fileURLToPath(new URL('./src/pages', import.meta.url)),
-      '@Plugins': fileURLToPath(new URL('./src/plugins', import.meta.url)),
-      '@Shared': fileURLToPath(new URL('./src/components/Shared', import.meta.url)),
-      '@Services': fileURLToPath(new URL('./src/services', import.meta.url)),
-      '@Stores': fileURLToPath(new URL('./src/stores', import.meta.url)),
-    }
-  }
-})
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..e1b5a74
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+import Components from 'unplugin-vue-components/vite';
+import { PrimeVueResolver } from '@primevue/auto-import-resolver';
+import { fileURLToPath, URL } from 'node:url';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    tailwindcss(),
+    Components({
+      resolvers: [
+        PrimeVueResolver()
+      ]
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+});
\ No newline at end of file