From c95d40787d7c0b3d8d6a77b311db7236a30efd17 Mon Sep 17 00:00:00 2001
From: "edgar.mendez" <edgar.mendez@golsystems.com.mx>
Date: Tue, 23 Sep 2025 16:18:45 -0600
Subject: [PATCH 1/3] WIP

---
 .env.example                   |   7 +-
 docker-compose.yml             |   1 +
 src/layouts/AdminLayout.vue    |   8 +
 src/pages/Warehouses/Index.vue | 386 +++++++++++++++++++++++++++++++++
 src/pages/Warehouses/Module.js |  16 ++
 src/router/Index.js            |  37 ++++
 6 files changed, 452 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/Warehouses/Index.vue
 create mode 100644 src/pages/Warehouses/Module.js

diff --git a/.env.example b/.env.example
index 94a2f7d..37712f0 100644
--- a/.env.example
+++ b/.env.example
@@ -1,12 +1,13 @@
-VITE_API_URL=http://backend.holos.test:8080
-VITE_BASE_URL=http://frontend.holos.test
+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="backend.holos.test"
+VITE_REVERB_HOST="localhost"
 VITE_REVERB_PORT=8080
 VITE_REVERB_SCHEME=http
 VITE_REVERB_ACTIVE=false
 
 APP_PORT=3000
+
diff --git a/docker-compose.yml b/docker-compose.yml
index 050a3c6..25c89cd 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -10,6 +10,7 @@ services:
       - frontend-v1:/var/www/gols-frontend-v1/node_modules
     networks:
       - gols-network
+    mem_limit: 512m
 volumes:
   frontend-v1:
     driver: local
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 0b5a612..09880a8 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -81,6 +81,14 @@ onMounted(() => {
                     to="admin.vacations.index"
                 />
             </Section>
+
+            <Section name="Almacén">
+                <Link
+                    icon="grid_view"
+                    name="Almacén" 
+                    to="admin.warehouses.index"
+                />
+            </Section>
             <Section name="Capacitaciones">
                 <DropDown
                     icon="grid_view"
diff --git a/src/pages/Warehouses/Index.vue b/src/pages/Warehouses/Index.vue
new file mode 100644
index 0000000..8fba40c
--- /dev/null
+++ b/src/pages/Warehouses/Index.vue
@@ -0,0 +1,386 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import GoogleIcon from '@Shared/GoogleIcon.vue'
+import Searcher from '@Holos/Searcher.vue'
+import Adding from '@Holos/Button/ButtonRh.vue'
+import { api } from '@Services/Api'
+import { apiTo } from './Module'
+
+// Reactive state
+const warehouses = ref([])
+const loading = ref(false)
+const error = ref('')
+const inventoryMovements = ref([
+    // kept mock movements for demo; in real app these would come from API
+    {
+        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([])
+
+// UI state
+const activeTab = ref('warehouses')
+const searchTerm = ref('')
+
+const fetchWarehousesFromApi = (q = '') => {
+    loading.value = true
+    error.value = ''
+
+    api.get(apiTo('index'), {
+        params: { q },
+        onStart: () => {
+            loading.value = true
+        },
+        onSuccess: (data, fullPayload) => {
+            const payload = Array.isArray(data) ? data : (fullPayload && Array.isArray(fullPayload.data) ? fullPayload.data : [])
+
+            warehouses.value = payload.map((w) => ({
+                id: w.id,
+                code: w.code ?? `WH-${String(w.id).padStart(3, '0')}`,
+                name: w.name,
+                location: w.address ?? '',
+                type: w.type ?? '',
+                totalProducts: (w.classifications && Array.isArray(w.classifications)) ? w.classifications.length : 0,
+                totalValue: w.total_value ?? 0,
+                capacity: w.capacity ?? '0%',
+                status: w.is_active ? 'active' : 'inactive',
+                classifications: w.classifications ?? []
+            }))
+        },
+        onFail: (data) => {
+            error.value = data?.message || 'Error al obtener almacenes'
+        },
+        onError: (err) => {
+            console.error('API Error:', err)
+            try {
+                error.value = err?.message || err?.data?.message || 'Error desconocido'
+            } catch (e) {
+                error.value = 'Error desconocido'
+            }
+        },
+        onFinish: () => {
+            loading.value = false
+        }
+    })
+}
+
+onMounted(() => {
+    fetchWarehousesFromApi()
+})
+
+// Computed totals
+const totalInventoryValue = computed(() => warehouses.value.reduce((sum, wh) => sum + (wh.totalValue || 0), 0))
+const totalProducts = computed(() => warehouses.value.reduce((sum, wh) => sum + (wh.totalProducts || 0), 0))
+
+// Filtered movements by searchTerm
+const filteredMovements = computed(() => {
+    const q = searchTerm.value.trim().toLowerCase()
+    if (!q) return inventoryMovements.value
+    return inventoryMovements.value.filter(m => {
+        return [m.product, m.code, m.warehouse, m.user, m.reference]
+            .filter(Boolean)
+            .some(f => f.toLowerCase().includes(q))
+    })
+})
+
+// Helpers
+const parseCapacity = (cap) => {
+    if (typeof cap === 'string') return parseInt(cap.replace('%', ''), 10) || 0
+    if (typeof cap === 'number') return Math.round(cap)
+    return 0
+}
+
+const getMovementIconClass = (type) => {
+    switch (type) {
+        case 'entrada':
+            return 'icon-arrow-down-left text-success'
+        case 'salida':
+            return 'icon-arrow-up-right text-destructive'
+        case 'transferencia':
+            return 'icon-refresh text-warning'
+        case 'ajuste':
+            return 'icon-trending-up text-primary'
+        default:
+            return 'icon-refresh'
+    }
+}
+
+const movementVariant = (type) => {
+    const map = { entrada: 'default', salida: 'destructive', transferencia: 'secondary', ajuste: 'outline' }
+    return map[type] || 'default'
+}
+
+const formatCurrency = (value) => {
+    try {
+        return new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(value)
+    } catch (e) {
+        return `$${value}`
+    }
+}
+</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">Inventario</h1>
+                <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Control de stock y movimientos por almacén
+                </p>
+            </div>
+
+            <div>
+                <Adding text="Nuevo Almacén" />
+            </div>
+        </div>
+
+        <!-- Searcher for warehouses -->
+        <div class="mt-6">
+            <Searcher title="Buscar Almacenes" placeholder="Buscar por nombre o ubicación..."
+                @search="fetchWarehousesFromApi" />
+
+            <!-- Loading / Error -->
+            <div class="mt-2">
+                <div v-if="loading" class="text-sm text-muted-foreground">Cargando almacenes...</div>
+                <div v-if="error" class="mt-2 text-sm text-destructive">{{ error }}</div>
+            </div>
+        </div>
+
+        <!-- Quick actions -->
+        <div class="flex items-center space-x-2 mt-4">
+            <button class="btn btn-outline" aria-label="Entrada">
+                <span class="icon">+</span> Entrada
+            </button>
+            <button class="btn btn-outline" aria-label="Salida">
+                <span class="icon">-</span> Salida
+            </button>
+            <button class="bg-primary text-white" aria-label="Transferencia">Transferencia</button>
+        </div>
+
+        <!-- Summary Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-6">
+            <div class="card">
+                <div class="card-body p-4 flex items-center space-x-2">
+                    <span class="icon text-primary">W</span>
+                    <div>
+                        <p class="text-2xl font-bold">{{ warehouses.length }}</p>
+                        <p class="text-sm text-muted-foreground">Almacenes</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-body p-4 flex items-center space-x-2">
+                    <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center">
+                        <span class="text-success-foreground font-bold text-sm">#</span>
+                    </div>
+                    <div>
+                        <p class="text-2xl font-bold text-success">{{ totalProducts }}</p>
+                        <p class="text-sm text-muted-foreground">Total Productos</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-body p-4 flex items-center space-x-2">
+                    <div class="w-8 h-8 rounded-full bg-warning flex items-center justify-center">
+                        <span class="text-warning-foreground font-bold text-sm">$</span>
+                    </div>
+                    <div>
+                        <p class="text-2xl font-bold text-warning">{{ (totalInventoryValue / 1000000).toFixed(1) }}M</p>
+                        <p class="text-sm text-muted-foreground">Valor Total</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-body p-4 flex items-center space-x-2">
+                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
+                        <span class="text-primary-foreground">R</span>
+                    </div>
+                    <div>
+                        <p class="text-2xl font-bold text-primary">{{ inventoryMovements.length }}</p>
+                        <p class="text-sm text-muted-foreground">Movimientos Hoy</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Tabs -->
+        <div class="mt-6">
+            <div class="tabs">
+                <button :class="['tab', { 'active': activeTab === 'warehouses' }]"
+                    @click="activeTab = 'warehouses'">Almacenes</button>
+                <button :class="['tab', { 'active': activeTab === 'movements' }]"
+                    @click="activeTab = 'movements'">Movimientos</button>
+                <button :class="['tab', { 'active': activeTab === 'stock' }]" @click="activeTab = 'stock'">Stock por
+                    Almacén</button>
+            </div>
+
+            <!-- Warehouses Tab -->
+            <div v-if="activeTab === 'warehouses'" class="mt-4">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <div v-for="wh in warehouses" :key="wh.id" class="card overflow-hidden">
+                        <div class="card-body p-4">
+                            <div class="flex items-start justify-between mb-3">
+                                <div class="flex items-center space-x-2">
+                                    <span class="icon">W</span>
+                                    <div>
+                                        <h3 class="font-semibold text-sm">{{ wh.name }}</h3>
+                                        <p class="text-xs text-muted-foreground font-mono">{{ wh.code }}</p>
+                                    </div>
+                                </div>
+                                <span
+                                    :class="['badge', wh.status === 'active' ? 'badge-default' : 'badge-destructive']">{{
+                                        wh.status === 'active' ? 'Activo' : 'Lleno' }}</span>
+                            </div>
+
+                            <div class="flex items-center space-x-1 text-xs text-muted-foreground mb-3">
+                                <span class="icon">📍</span>
+                                <span>{{ wh.location }}</span>
+                            </div>
+
+                            <div class="space-y-2">
+                                <div class="flex justify-between items-center">
+                                    <span class="text-sm text-muted-foreground">Productos:</span>
+                                    <span class="font-medium">{{ wh.totalProducts }}</span>
+                                </div>
+                                <div class="flex justify-between items-center">
+                                    <span class="text-sm text-muted-foreground">Valor:</span>
+                                    <span class="font-medium">{{ (wh.totalValue / 1000000).toFixed(1) }}M</span>
+                                </div>
+                                <div class="flex justify-between items-center">
+                                    <span class="text-sm text-muted-foreground">Capacidad:</span>
+                                    <span
+                                        :class="['font-medium', parseCapacity(wh.capacity) > 80 ? 'text-destructive' : parseCapacity(wh.capacity) > 60 ? 'text-warning' : 'text-success']">{{
+                                            wh.capacity }}</span>
+                                </div>
+
+                                <div class="w-full bg-muted rounded-full h-2 mt-2">
+                                    <div :class="['h-2 rounded-full transition-all', parseCapacity(wh.capacity) > 80 ? 'bg-destructive' : parseCapacity(wh.capacity) > 60 ? 'bg-warning' : 'bg-success']"
+                                        :style="{ width: wh.capacity }" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Movements Tab -->
+            <div v-if="activeTab === 'movements'" class="mt-4">
+                <div class="card">
+                    <div class="card-body p-4">
+                        <div class="flex items-center space-x-4 mb-6">
+                            <div class="relative flex-1 max-w-sm">
+                                <Searcher title="Buscar movimientos..." placeholder="Buscar movimientos..."
+                                    @search="val => searchTerm = val" />
+                                <input class="hidden" />
+                            </div>
+                        </div>
+
+                        <div class="rounded-md border">
+                            <table class="w-full">
+                                <thead>
+                                    <tr>
+                                        <th>Fecha</th>
+                                        <th>Tipo</th>
+                                        <th>Producto</th>
+                                        <th>Cantidad</th>
+                                        <th>Almacén</th>
+                                        <th>Usuario</th>
+                                        <th>Estado</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="movement in filteredMovements" :key="movement.id">
+                                        <td class="text-sm">{{ new Date(movement.date).toLocaleString('es-MX') }}</td>
+                                        <td>
+                                            <div class="flex items-center space-x-2">
+                                                <span :class="getMovementIconClass(movement.type)"></span>
+                                                <span class="badge" :data-variant="movementVariant(movement.type)">{{
+                                                    movement.type }}</span>
+                                            </div>
+                                        </td>
+                                        <td>
+                                            <div>
+                                                <p class="font-medium text-sm">{{ movement.product }}</p>
+                                                <p class="text-xs text-muted-foreground font-mono">{{ movement.code }}
+                                                </p>
+                                            </div>
+                                        </td>
+                                        <td class="font-mono">
+                                            <span
+                                                :class="movement.quantity > 0 ? 'text-success' : 'text-destructive'">{{
+                                                    movement.quantity > 0 ? '+' : '' }}{{ movement.quantity }}</span>
+                                        </td>
+                                        <td class="text-sm">{{ movement.warehouse }}</td>
+                                        <td class="text-sm">{{ movement.user }}</td>
+                                        <td>
+                                            <span class="badge"
+                                                :data-variant="movement.status === 'completed' ? 'default' : 'secondary'">{{
+                                                    movement.status === 'completed' ? 'Completado' : 'Pendiente' }}</span>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Stock by Warehouse Tab -->
+            <div v-if="activeTab === 'stock'" class="mt-4 space-y-4">
+                <div v-for="(wh, index) in stockByWarehouse" :key="index" class="card">
+                    <div class="card-body">
+                        <div class="flex items-center space-x-2 mb-2">
+                            <span class="icon">W</span>
+                            <h4 class="font-semibold">{{ wh.warehouse }}</h4>
+                        </div>
+                        <div class="rounded-md border">
+                            <table class="w-full">
+                                <thead>
+                                    <tr>
+                                        <th>Código</th>
+                                        <th>Producto</th>
+                                        <th>Stock</th>
+                                        <th>Valor</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="product in wh.products" :key="product.code">
+                                        <td class="font-mono text-sm">{{ product.code }}</td>
+                                        <td class="font-medium">{{ product.name }}</td>
+                                        <td class="font-mono">{{ product.stock }} uds</td>
+                                        <td class="font-mono">{{ formatCurrency(product.value) }}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Warehouses/Module.js b/src/pages/Warehouses/Module.js
new file mode 100644
index 0000000..9630d8d
--- /dev/null
+++ b/src/pages/Warehouses/Module.js
@@ -0,0 +1,16 @@
+import { lang } from '@Lang/i18n';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`warehouses.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `warehouses.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`warehouses.${str}`)
+
+export {
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index 99cac92..79ba040 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -306,6 +306,43 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    path: 'warehouses',
+                    name: 'admin.warehouses',
+                    meta: {
+                        title: 'Bodegas',
+                        icon: 'inventory_2',
+                    },
+                    redirect: '/admin/warehouses',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.warehouses.index',
+                            component: () => import('@Pages/Warehouses/Index.vue'),
+                        
+                        },
+                        {
+                            path: 'create',
+                            name: 'admin.warehouses.create',
+                            component: () => import('@Pages/Admin/Roles/Index.vue'),
+                        
+                            meta: {
+                                title: 'Crear',
+                                icon: 'add',
+                            },
+                        },
+                        {
+                            path: ':id/edit',
+                            name: 'admin.warehouses.edit',
+                            component: () => import('@Pages/Admin/Roles/Index.vue'),
+                        
+                            meta: {
+                                title: 'Editar',
+                                icon: 'edit',
+                            },
+                        }
+                    ]
+                },
                 {
                     path: 'roles',
                     name: 'admin.roles',

From efcad3fe1daeb90d037ac8ec451452fd2393cc6c Mon Sep 17 00:00:00 2001
From: "edgar.mendez" <edgar.mendez@golsystems.com.mx>
Date: Thu, 25 Sep 2025 15:44:54 -0600
Subject: [PATCH 2/3] =?UTF-8?q?Add:=20M=C3=B3dulo=20catalogo=20de=20clasif?=
 =?UTF-8?q?icaciones=20de=20almacenes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 agent.md                                      | 200 ++++++++
 src/components/Holos/Button/Button.vue        | 138 ++++++
 src/components/Holos/Card/Card.vue            |  42 ++
 src/components/Holos/Card/CardContent.vue     |  22 +
 src/components/Holos/Card/CardDescription.vue |  23 +
 src/components/Holos/Card/CardFooter.vue      |  24 +
 src/components/Holos/Card/CardHeader.vue      |  24 +
 src/components/Holos/Card/CardTitle.vue       |  24 +
 src/components/Holos/SectionTitle.vue         |   5 +-
 src/layouts/AdminLayout.vue                   |   5 +
 src/pages/WarehouseClassifications/Create.vue |  89 ++++
 src/pages/WarehouseClassifications/Edit.vue   | 141 ++++++
 src/pages/WarehouseClassifications/Form.vue   |  68 +++
 src/pages/WarehouseClassifications/Index.vue  | 212 ++++++++
 .../WarehouseClassifications/Modals/Show.vue  | 362 ++++++++++++++
 src/pages/WarehouseClassifications/Module.js  |  23 +
 .../warehouse-classifications.interfaces.js   |  62 +++
 .../WarehouseClassificationService.js         | 187 +++++++
 src/pages/Warehouses/Index.vue                | 461 ++++--------------
 src/router/Index.js                           |  34 ++
 src/stores/WarehouseClassifications.js        | 218 +++++++++
 tailwind.config.js                            |  82 ++++
 22 files changed, 2087 insertions(+), 359 deletions(-)
 create mode 100644 agent.md
 create mode 100644 src/components/Holos/Button/Button.vue
 create mode 100644 src/components/Holos/Card/Card.vue
 create mode 100644 src/components/Holos/Card/CardContent.vue
 create mode 100644 src/components/Holos/Card/CardDescription.vue
 create mode 100644 src/components/Holos/Card/CardFooter.vue
 create mode 100644 src/components/Holos/Card/CardHeader.vue
 create mode 100644 src/components/Holos/Card/CardTitle.vue
 create mode 100644 src/pages/WarehouseClassifications/Create.vue
 create mode 100644 src/pages/WarehouseClassifications/Edit.vue
 create mode 100644 src/pages/WarehouseClassifications/Form.vue
 create mode 100644 src/pages/WarehouseClassifications/Index.vue
 create mode 100644 src/pages/WarehouseClassifications/Modals/Show.vue
 create mode 100644 src/pages/WarehouseClassifications/Module.js
 create mode 100644 src/pages/WarehouseClassifications/interfaces/warehouse-classifications.interfaces.js
 create mode 100644 src/pages/WarehouseClassifications/services/WarehouseClassificationService.js
 create mode 100644 src/stores/WarehouseClassifications.js
 create mode 100644 tailwind.config.js

diff --git a/agent.md b/agent.md
new file mode 100644
index 0000000..9b02518
--- /dev/null
+++ b/agent.md
@@ -0,0 +1,200 @@
+# 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/src/components/Holos/Button/Button.vue b/src/components/Holos/Button/Button.vue
new file mode 100644
index 0000000..128be0b
--- /dev/null
+++ b/src/components/Holos/Button/Button.vue
@@ -0,0 +1,138 @@
+<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', '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/Card/Card.vue b/src/components/Holos/Card/Card.vue
new file mode 100644
index 0000000..6dd6b64
--- /dev/null
+++ b/src/components/Holos/Card/Card.vue
@@ -0,0 +1,42 @@
+<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
new file mode 100644
index 0000000..151396d
--- /dev/null
+++ b/src/components/Holos/Card/CardContent.vue
@@ -0,0 +1,22 @@
+<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
new file mode 100644
index 0000000..db4bbad
--- /dev/null
+++ b/src/components/Holos/Card/CardDescription.vue
@@ -0,0 +1,23 @@
+<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
new file mode 100644
index 0000000..4cc1605
--- /dev/null
+++ b/src/components/Holos/Card/CardFooter.vue
@@ -0,0 +1,24 @@
+<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
new file mode 100644
index 0000000..a3081c3
--- /dev/null
+++ b/src/components/Holos/Card/CardHeader.vue
@@ -0,0 +1,24 @@
+<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
new file mode 100644
index 0000000..e855a2f
--- /dev/null
+++ b/src/components/Holos/Card/CardTitle.vue
@@ -0,0 +1,24 @@
+<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/SectionTitle.vue b/src/components/Holos/SectionTitle.vue
index 1b0b91e..afff327 100644
--- a/src/components/Holos/SectionTitle.vue
+++ b/src/components/Holos/SectionTitle.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="md:col-span-1 flex justify-between">
         <div class="px-4 sm:px-0">
-            <h3 class="text-lg font-medium text-gray-900 dark:text-white">
+            <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-600 dark:text-white/50">
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">
                 <slot name="description" />
             </p>
         </div>
@@ -15,3 +15,4 @@
         </div>
     </div>
 </template>
+
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 09880a8..58fc3a2 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -88,6 +88,11 @@ onMounted(() => {
                     name="Almacén" 
                     to="admin.warehouses.index"
                 />
+                <Link
+                    icon="tag"
+                    name="Clasificaciones de almacenes" 
+                    to="admin.warehouse-classifications.index"
+                />
             </Section>
             <Section name="Capacitaciones">
                 <DropDown
diff --git a/src/pages/WarehouseClassifications/Create.vue b/src/pages/WarehouseClassifications/Create.vue
new file mode 100644
index 0000000..4b08382
--- /dev/null
+++ b/src/pages/WarehouseClassifications/Create.vue
@@ -0,0 +1,89 @@
+<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
new file mode 100644
index 0000000..b165782
--- /dev/null
+++ b/src/pages/WarehouseClassifications/Edit.vue
@@ -0,0 +1,141 @@
+<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
new file mode 100644
index 0000000..bf02116
--- /dev/null
+++ b/src/pages/WarehouseClassifications/Form.vue
@@ -0,0 +1,68 @@
+<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
new file mode 100644
index 0000000..1b4aab2
--- /dev/null
+++ b/src/pages/WarehouseClassifications/Index.vue
@@ -0,0 +1,212 @@
+<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
new file mode 100644
index 0000000..9e33a2f
--- /dev/null
+++ b/src/pages/WarehouseClassifications/Modals/Show.vue
@@ -0,0 +1,362 @@
+<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
new file mode 100644
index 0000000..f7caf91
--- /dev/null
+++ b/src/pages/WarehouseClassifications/Module.js
@@ -0,0 +1,23 @@
+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
new file mode 100644
index 0000000..767608b
--- /dev/null
+++ b/src/pages/WarehouseClassifications/interfaces/warehouse-classifications.interfaces.js
@@ -0,0 +1,62 @@
+/**
+ * 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
new file mode 100644
index 0000000..f92f8fd
--- /dev/null
+++ b/src/pages/WarehouseClassifications/services/WarehouseClassificationService.js
@@ -0,0 +1,187 @@
+/**
+ * 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/Index.vue b/src/pages/Warehouses/Index.vue
index 8fba40c..0d3051b 100644
--- a/src/pages/Warehouses/Index.vue
+++ b/src/pages/Warehouses/Index.vue
@@ -1,386 +1,133 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import GoogleIcon from '@Shared/GoogleIcon.vue'
-import Searcher from '@Holos/Searcher.vue'
-import Adding from '@Holos/Button/ButtonRh.vue'
+import { ref, onMounted, computed } from 'vue'
+import Table from '@/components/Holos/Table.vue'
+import SectionTitle from '@/components/Holos/SectionTitle.vue'
+import Button from '@/components/Holos/Button/Button.vue'
+import Card from '@/components/Holos/Card/Card.vue'
+import CardHeader from '@/components/Holos/Card/CardHeader.vue'
+import CardTitle from '@/components/Holos/Card/CardTitle.vue'
+import CardDescription from '@/components/Holos/Card/CardDescription.vue'
+import Searcher from '@/components/Holos/Searcher.vue'
+import SimpleCard from '@/components/Holos/Card/Simple.vue'
+import Selectable from '@/components/Holos/Form/Selectable.vue'
 import { api } from '@Services/Api'
 import { apiTo } from './Module'
+import CardContent from '../../components/Holos/Card/CardContent.vue'
 
-// Reactive state
-const warehouses = ref([])
-const loading = ref(false)
-const error = ref('')
-const inventoryMovements = ref([
-    // kept mock movements for demo; in real app these would come from API
-    {
-        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 warehouses = ref({});
+const processing = ref(false);
+const selectedStatus = ref('');
+
+const statusOptions = [
+    { id: '', name: 'Todos los estados' },
+    { id: 'active', name: 'Activos' },
+    { id: 'inactive', name: 'Inactivos' }
+];
+
+const filteredWarehouses = computed(() => {
+    if (!selectedStatus.value || selectedStatus.value === '') {
+        return warehouses.value;
     }
-])
 
-const stockByWarehouse = ref([])
+    const filtered = {
+        ...warehouses.value,
+        data: warehouses.value.data?.filter(warehouse => {
+            if (selectedStatus.value === 'active') return warehouse.is_active;
+            if (selectedStatus.value === 'inactive') return !warehouse.is_active;
+            return true;
+        }) || []
+    };
 
-// UI state
-const activeTab = ref('warehouses')
-const searchTerm = ref('')
+    return filtered;
+});
 
-const fetchWarehousesFromApi = (q = '') => {
-    loading.value = true
-    error.value = ''
-
-    api.get(apiTo('index'), {
-        params: { q },
-        onStart: () => {
-            loading.value = true
+function fetchWarehouses(url = null) {
+    processing.value = true;
+    api.get(url || apiTo('index'), {
+        onSuccess: (r) => {
+            warehouses.value = r.warehouses;
+            processing.value = false;
         },
-        onSuccess: (data, fullPayload) => {
-            const payload = Array.isArray(data) ? data : (fullPayload && Array.isArray(fullPayload.data) ? fullPayload.data : [])
-
-            warehouses.value = payload.map((w) => ({
-                id: w.id,
-                code: w.code ?? `WH-${String(w.id).padStart(3, '0')}`,
-                name: w.name,
-                location: w.address ?? '',
-                type: w.type ?? '',
-                totalProducts: (w.classifications && Array.isArray(w.classifications)) ? w.classifications.length : 0,
-                totalValue: w.total_value ?? 0,
-                capacity: w.capacity ?? '0%',
-                status: w.is_active ? 'active' : 'inactive',
-                classifications: w.classifications ?? []
-            }))
-        },
-        onFail: (data) => {
-            error.value = data?.message || 'Error al obtener almacenes'
-        },
-        onError: (err) => {
-            console.error('API Error:', err)
-            try {
-                error.value = err?.message || err?.data?.message || 'Error desconocido'
-            } catch (e) {
-                error.value = 'Error desconocido'
-            }
-        },
-        onFinish: () => {
-            loading.value = false
+        onError: () => {
+            processing.value = false;
         }
-    })
+    });
 }
 
 onMounted(() => {
-    fetchWarehousesFromApi()
-})
-
-// Computed totals
-const totalInventoryValue = computed(() => warehouses.value.reduce((sum, wh) => sum + (wh.totalValue || 0), 0))
-const totalProducts = computed(() => warehouses.value.reduce((sum, wh) => sum + (wh.totalProducts || 0), 0))
-
-// Filtered movements by searchTerm
-const filteredMovements = computed(() => {
-    const q = searchTerm.value.trim().toLowerCase()
-    if (!q) return inventoryMovements.value
-    return inventoryMovements.value.filter(m => {
-        return [m.product, m.code, m.warehouse, m.user, m.reference]
-            .filter(Boolean)
-            .some(f => f.toLowerCase().includes(q))
-    })
-})
-
-// Helpers
-const parseCapacity = (cap) => {
-    if (typeof cap === 'string') return parseInt(cap.replace('%', ''), 10) || 0
-    if (typeof cap === 'number') return Math.round(cap)
-    return 0
-}
-
-const getMovementIconClass = (type) => {
-    switch (type) {
-        case 'entrada':
-            return 'icon-arrow-down-left text-success'
-        case 'salida':
-            return 'icon-arrow-up-right text-destructive'
-        case 'transferencia':
-            return 'icon-refresh text-warning'
-        case 'ajuste':
-            return 'icon-trending-up text-primary'
-        default:
-            return 'icon-refresh'
-    }
-}
-
-const movementVariant = (type) => {
-    const map = { entrada: 'default', salida: 'destructive', transferencia: 'secondary', ajuste: 'outline' }
-    return map[type] || 'default'
-}
-
-const formatCurrency = (value) => {
-    try {
-        return new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(value)
-    } catch (e) {
-        return `$${value}`
-    }
-}
+    fetchWarehouses();
+});
 </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">Inventario</h1>
-                <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Control de stock y movimientos por almacén
-                </p>
-            </div>
+    <div class="space-y-6">
+        <SectionTitle>
+            <template #title>Almacenes</template>
+            <template #description>Listado de almacenes registrados en el sistema.</template>
+            <template #aside>
+                <Button color="success" variant="smooth" size="md">
+                    Nuevo almacén
+                </Button>
+            </template>
+        </SectionTitle>
 
-            <div>
-                <Adding text="Nuevo Almacén" />
-            </div>
-        </div>
+        <!-- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+            <SimpleCard icon="warehouse" :title="`Total: ${filteredWarehouses.total || 0}`" />
+            <SimpleCard icon="check_circle"
+                :title="`Activos: ${filteredWarehouses.data?.filter(w => w.is_active)?.length || 0}`" />
+            <SimpleCard icon="cancel"
+                :title="`Inactivos: ${filteredWarehouses.data?.filter(w => !w.is_active)?.length || 0}`" />
+            <SimpleCard icon="category"
+                :title="`Con clasificaciones: ${filteredWarehouses.data?.filter(w => w.classifications?.length > 0)?.length || 0}`" />
+        </div> -->
 
-        <!-- Searcher for warehouses -->
-        <div class="mt-6">
-            <Searcher title="Buscar Almacenes" placeholder="Buscar por nombre o ubicación..."
-                @search="fetchWarehousesFromApi" />
-
-            <!-- Loading / Error -->
-            <div class="mt-2">
-                <div v-if="loading" class="text-sm text-muted-foreground">Cargando almacenes...</div>
-                <div v-if="error" class="mt-2 text-sm text-destructive">{{ error }}</div>
-            </div>
-        </div>
-
-        <!-- Quick actions -->
-        <div class="flex items-center space-x-2 mt-4">
-            <button class="btn btn-outline" aria-label="Entrada">
-                <span class="icon">+</span> Entrada
-            </button>
-            <button class="btn btn-outline" aria-label="Salida">
-                <span class="icon">-</span> Salida
-            </button>
-            <button class="bg-primary text-white" aria-label="Transferencia">Transferencia</button>
-        </div>
-
-        <!-- Summary Cards -->
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-6">
-            <div class="card">
-                <div class="card-body p-4 flex items-center space-x-2">
-                    <span class="icon text-primary">W</span>
-                    <div>
-                        <p class="text-2xl font-bold">{{ warehouses.length }}</p>
-                        <p class="text-sm text-muted-foreground">Almacenes</p>
+        <Card>
+            <CardHeader>
+                <CardTitle class="flex items-center justify-between">
+                    <span>Almacenes</span>
+                    <div class="flex items-center space-x-2">
+                        <span class="text-sm text-muted-foreground">Total de almacenes: {{
+                            filteredWarehouses.data?.length || 0
+                            }}</span>
                     </div>
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                    <Selectable v-model="selectedStatus" :options="statusOptions" title="Filtrar por estado"
+                        placeholder="Seleccionar estado..." label="name" trackBy="id" />
                 </div>
-            </div>
+                <Table :items="filteredWarehouses" :processing="processing" @send-pagination="fetchWarehouses">
+                    <template #head>
+                        <th class="text-left">Código</th>
+                        <th class="text-left">Nombre</th>
+                        <th class="text-left">Descripción</th>
+                        <th class="text-left">Estado</th>
+                    </template>
+                    <template #body="{ items }">
+                        <tr v-for="warehouse in items" :key="warehouse.id">
+                            <td>{{ warehouse.code }}</td>
+                            <td>{{ warehouse.name }}</td>
+                            <td>{{ warehouse.description }}</td>
+                            <td>
+                                <span :class="warehouse.is_active ? 'text-green-600' : 'text-red-600'">
+                                    {{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
+                                </span>
+                            </td>
+                        </tr>
 
-            <div class="card">
-                <div class="card-body p-4 flex items-center space-x-2">
-                    <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center">
-                        <span class="text-success-foreground font-bold text-sm">#</span>
-                    </div>
-                    <div>
-                        <p class="text-2xl font-bold text-success">{{ totalProducts }}</p>
-                        <p class="text-sm text-muted-foreground">Total Productos</p>
-                    </div>
-                </div>
-            </div>
 
-            <div class="card">
-                <div class="card-body p-4 flex items-center space-x-2">
-                    <div class="w-8 h-8 rounded-full bg-warning flex items-center justify-center">
-                        <span class="text-warning-foreground font-bold text-sm">$</span>
-                    </div>
-                    <div>
-                        <p class="text-2xl font-bold text-warning">{{ (totalInventoryValue / 1000000).toFixed(1) }}M</p>
-                        <p class="text-sm text-muted-foreground">Valor Total</p>
-                    </div>
-                </div>
-            </div>
+                    </template>
+                    <template #empty>
+                        <td colspan="4" class="text-center py-4">No hay almacenes registrados.</td>
+                    </template>
+                </Table>
+            </CardContent>
 
-            <div class="card">
-                <div class="card-body p-4 flex items-center space-x-2">
-                    <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center">
-                        <span class="text-primary-foreground">R</span>
-                    </div>
-                    <div>
-                        <p class="text-2xl font-bold text-primary">{{ inventoryMovements.length }}</p>
-                        <p class="text-sm text-muted-foreground">Movimientos Hoy</p>
-                    </div>
-                </div>
-            </div>
-        </div>
+        </Card>
 
-        <!-- Tabs -->
-        <div class="mt-6">
-            <div class="tabs">
-                <button :class="['tab', { 'active': activeTab === 'warehouses' }]"
-                    @click="activeTab = 'warehouses'">Almacenes</button>
-                <button :class="['tab', { 'active': activeTab === 'movements' }]"
-                    @click="activeTab = 'movements'">Movimientos</button>
-                <button :class="['tab', { 'active': activeTab === 'stock' }]" @click="activeTab = 'stock'">Stock por
-                    Almacén</button>
-            </div>
 
-            <!-- Warehouses Tab -->
-            <div v-if="activeTab === 'warehouses'" class="mt-4">
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                    <div v-for="wh in warehouses" :key="wh.id" class="card overflow-hidden">
-                        <div class="card-body p-4">
-                            <div class="flex items-start justify-between mb-3">
-                                <div class="flex items-center space-x-2">
-                                    <span class="icon">W</span>
-                                    <div>
-                                        <h3 class="font-semibold text-sm">{{ wh.name }}</h3>
-                                        <p class="text-xs text-muted-foreground font-mono">{{ wh.code }}</p>
-                                    </div>
-                                </div>
-                                <span
-                                    :class="['badge', wh.status === 'active' ? 'badge-default' : 'badge-destructive']">{{
-                                        wh.status === 'active' ? 'Activo' : 'Lleno' }}</span>
-                            </div>
 
-                            <div class="flex items-center space-x-1 text-xs text-muted-foreground mb-3">
-                                <span class="icon">📍</span>
-                                <span>{{ wh.location }}</span>
-                            </div>
 
-                            <div class="space-y-2">
-                                <div class="flex justify-between items-center">
-                                    <span class="text-sm text-muted-foreground">Productos:</span>
-                                    <span class="font-medium">{{ wh.totalProducts }}</span>
-                                </div>
-                                <div class="flex justify-between items-center">
-                                    <span class="text-sm text-muted-foreground">Valor:</span>
-                                    <span class="font-medium">{{ (wh.totalValue / 1000000).toFixed(1) }}M</span>
-                                </div>
-                                <div class="flex justify-between items-center">
-                                    <span class="text-sm text-muted-foreground">Capacidad:</span>
-                                    <span
-                                        :class="['font-medium', parseCapacity(wh.capacity) > 80 ? 'text-destructive' : parseCapacity(wh.capacity) > 60 ? 'text-warning' : 'text-success']">{{
-                                            wh.capacity }}</span>
-                                </div>
-
-                                <div class="w-full bg-muted rounded-full h-2 mt-2">
-                                    <div :class="['h-2 rounded-full transition-all', parseCapacity(wh.capacity) > 80 ? 'bg-destructive' : parseCapacity(wh.capacity) > 60 ? 'bg-warning' : 'bg-success']"
-                                        :style="{ width: wh.capacity }" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Movements Tab -->
-            <div v-if="activeTab === 'movements'" class="mt-4">
-                <div class="card">
-                    <div class="card-body p-4">
-                        <div class="flex items-center space-x-4 mb-6">
-                            <div class="relative flex-1 max-w-sm">
-                                <Searcher title="Buscar movimientos..." placeholder="Buscar movimientos..."
-                                    @search="val => searchTerm = val" />
-                                <input class="hidden" />
-                            </div>
-                        </div>
-
-                        <div class="rounded-md border">
-                            <table class="w-full">
-                                <thead>
-                                    <tr>
-                                        <th>Fecha</th>
-                                        <th>Tipo</th>
-                                        <th>Producto</th>
-                                        <th>Cantidad</th>
-                                        <th>Almacén</th>
-                                        <th>Usuario</th>
-                                        <th>Estado</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr v-for="movement in filteredMovements" :key="movement.id">
-                                        <td class="text-sm">{{ new Date(movement.date).toLocaleString('es-MX') }}</td>
-                                        <td>
-                                            <div class="flex items-center space-x-2">
-                                                <span :class="getMovementIconClass(movement.type)"></span>
-                                                <span class="badge" :data-variant="movementVariant(movement.type)">{{
-                                                    movement.type }}</span>
-                                            </div>
-                                        </td>
-                                        <td>
-                                            <div>
-                                                <p class="font-medium text-sm">{{ movement.product }}</p>
-                                                <p class="text-xs text-muted-foreground font-mono">{{ movement.code }}
-                                                </p>
-                                            </div>
-                                        </td>
-                                        <td class="font-mono">
-                                            <span
-                                                :class="movement.quantity > 0 ? 'text-success' : 'text-destructive'">{{
-                                                    movement.quantity > 0 ? '+' : '' }}{{ movement.quantity }}</span>
-                                        </td>
-                                        <td class="text-sm">{{ movement.warehouse }}</td>
-                                        <td class="text-sm">{{ movement.user }}</td>
-                                        <td>
-                                            <span class="badge"
-                                                :data-variant="movement.status === 'completed' ? 'default' : 'secondary'">{{
-                                                    movement.status === 'completed' ? 'Completado' : 'Pendiente' }}</span>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Stock by Warehouse Tab -->
-            <div v-if="activeTab === 'stock'" class="mt-4 space-y-4">
-                <div v-for="(wh, index) in stockByWarehouse" :key="index" class="card">
-                    <div class="card-body">
-                        <div class="flex items-center space-x-2 mb-2">
-                            <span class="icon">W</span>
-                            <h4 class="font-semibold">{{ wh.warehouse }}</h4>
-                        </div>
-                        <div class="rounded-md border">
-                            <table class="w-full">
-                                <thead>
-                                    <tr>
-                                        <th>Código</th>
-                                        <th>Producto</th>
-                                        <th>Stock</th>
-                                        <th>Valor</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr v-for="product in wh.products" :key="product.code">
-                                        <td class="font-mono text-sm">{{ product.code }}</td>
-                                        <td class="font-medium">{{ product.name }}</td>
-                                        <td class="font-mono">{{ product.stock }} uds</td>
-                                        <td class="font-mono">{{ formatCurrency(product.value) }}</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index 79ba040..4b9db26 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -343,6 +343,40 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    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: 'roles',
                     name: 'admin.roles',
diff --git a/src/stores/WarehouseClassifications.js b/src/stores/WarehouseClassifications.js
new file mode 100644
index 0000000..efc57ee
--- /dev/null
+++ b/src/stores/WarehouseClassifications.js
@@ -0,0 +1,218 @@
+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/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..9c7debf
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,82 @@
+// 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

From 6b7f80d53a11c3c38e538b08605be1632c7ad747 Mon Sep 17 00:00:00 2001
From: "edgar.mendez" <edgar.mendez@golsystems.com.mx>
Date: Tue, 30 Sep 2025 10:28:36 -0600
Subject: [PATCH 3/3] Add: Feature warehouse

---
 src/components/Holos/Button/Button.vue        |   11 +-
 src/layouts/AdminLayout.vue                   |    5 +
 src/pages/UnitsMeasure/Create.vue             |   63 +
 src/pages/UnitsMeasure/Edit.vue               |  104 ++
 src/pages/UnitsMeasure/Form.vue               |  108 ++
 src/pages/UnitsMeasure/Index.vue              |  124 ++
 src/pages/UnitsMeasure/Modals/Show.vue        |  210 +++
 src/pages/UnitsMeasure/Module.js              |   23 +
 .../services/UnitsMeasureService.js           |  227 ++++
 src/pages/Warehouses/Create.vue               |   66 +
 src/pages/Warehouses/Details.vue              |  457 +++++++
 src/pages/Warehouses/Edit.vue                 |  129 ++
 src/pages/Warehouses/Form.vue                 |  338 +++++
 src/pages/Warehouses/Index.vue                |  241 ++--
 src/pages/Warehouses/Modals/Show.vue          |  311 +++++
 src/pages/Warehouses/Module.js                |   13 +-
 src/pages/Warehouses/e.jsx                    | 1125 +++++++++++++++++
 .../interfaces/warehouses.interfaces.js       |  125 ++
 .../Warehouses/services/WarehouseService.js   |  239 ++++
 src/router/Index.js                           |   69 +-
 20 files changed, 3873 insertions(+), 115 deletions(-)
 create mode 100644 src/pages/UnitsMeasure/Create.vue
 create mode 100644 src/pages/UnitsMeasure/Edit.vue
 create mode 100644 src/pages/UnitsMeasure/Form.vue
 create mode 100644 src/pages/UnitsMeasure/Index.vue
 create mode 100644 src/pages/UnitsMeasure/Modals/Show.vue
 create mode 100644 src/pages/UnitsMeasure/Module.js
 create mode 100644 src/pages/UnitsMeasure/services/UnitsMeasureService.js
 create mode 100644 src/pages/Warehouses/Create.vue
 create mode 100644 src/pages/Warehouses/Details.vue
 create mode 100644 src/pages/Warehouses/Edit.vue
 create mode 100644 src/pages/Warehouses/Form.vue
 create mode 100644 src/pages/Warehouses/Modals/Show.vue
 create mode 100644 src/pages/Warehouses/e.jsx
 create mode 100644 src/pages/Warehouses/interfaces/warehouses.interfaces.js
 create mode 100644 src/pages/Warehouses/services/WarehouseService.js

diff --git a/src/components/Holos/Button/Button.vue b/src/components/Holos/Button/Button.vue
index 128be0b..362eba4 100644
--- a/src/components/Holos/Button/Button.vue
+++ b/src/components/Holos/Button/Button.vue
@@ -23,6 +23,7 @@ interface Props {
   loading?: boolean;
   fullWidth?: boolean;
   iconOnly?: boolean;
+  asLink?: boolean;  // Nueva prop para comportamiento de link
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,6 +35,7 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   fullWidth: false,
   iconOnly: false,
+  asLink: true,  // Por defecto no es link
 });
 
 
@@ -42,8 +44,15 @@ const emit = defineEmits<{
 }>();
 
 function handleClick(event: MouseEvent) {
+  // Si es usado como link, no bloquear la navegación
+  if (props.asLink) {
+    emit('click', event);
+    return;
+  }
+  
+  // Para botones normales, validar estados
   if (props.disabled || props.loading) return;
-  emit('click', event);
+  
 }
 
 const buttonClasses = computed(() => {
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 58fc3a2..2b26cc4 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -93,6 +93,11 @@ onMounted(() => {
                     name="Clasificaciones de almacenes" 
                     to="admin.warehouse-classifications.index"
                 />
+                <Link
+                    icon="straighten"
+                    name="Unidades de medida" 
+                    to="admin.units-measure.index"
+                />
             </Section>
             <Section name="Capacitaciones">
                 <DropDown
diff --git a/src/pages/UnitsMeasure/Create.vue b/src/pages/UnitsMeasure/Create.vue
new file mode 100644
index 0000000..5c0a6ba
--- /dev/null
+++ b/src/pages/UnitsMeasure/Create.vue
@@ -0,0 +1,63 @@
+<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
new file mode 100644
index 0000000..d18fd41
--- /dev/null
+++ b/src/pages/UnitsMeasure/Edit.vue
@@ -0,0 +1,104 @@
+<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
new file mode 100644
index 0000000..7e3f0bb
--- /dev/null
+++ b/src/pages/UnitsMeasure/Form.vue
@@ -0,0 +1,108 @@
+<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
new file mode 100644
index 0000000..0d66f19
--- /dev/null
+++ b/src/pages/UnitsMeasure/Index.vue
@@ -0,0 +1,124 @@
+<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
new file mode 100644
index 0000000..e025418
--- /dev/null
+++ b/src/pages/UnitsMeasure/Modals/Show.vue
@@ -0,0 +1,210 @@
+<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
new file mode 100644
index 0000000..2130417
--- /dev/null
+++ b/src/pages/UnitsMeasure/Module.js
@@ -0,0 +1,23 @@
+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
new file mode 100644
index 0000000..fc0f3a6
--- /dev/null
+++ b/src/pages/UnitsMeasure/services/UnitsMeasureService.js
@@ -0,0 +1,227 @@
+/**
+ * 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/Warehouses/Create.vue b/src/pages/Warehouses/Create.vue
new file mode 100644
index 0000000..e719482
--- /dev/null
+++ b/src/pages/Warehouses/Create.vue
@@ -0,0 +1,66 @@
+<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
new file mode 100644
index 0000000..910e705
--- /dev/null
+++ b/src/pages/Warehouses/Details.vue
@@ -0,0 +1,457 @@
+<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';
+
+/** 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;
+            },
+            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 || 'Guadalajara, Zona Industrial' }}
+                                </p>
+                            </div>
+
+                            <!-- Categoría -->
+                            <div class="space-y-2">
+                                <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">
+                                <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>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
+                                    :class="warehouse.is_active
+                                        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+                                        : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'">
+                                    {{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
+                                </span>
+                            </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>
+
+            <!-- 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>
+
+            <!-- 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>
+
+                                <!-- Progress bar for stock level -->
+                                <div class="mt-3">
+                                    <div
+                                        class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400 mb-1">
+                                        <span>Stock</span>
+                                        <span>{{ Math.round((product.stock / 100) * 100) }}%</span>
+                                    </div>
+                                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+                                        <div class="h-2 rounded-full transition-all duration-300" :class="product.stock > 50 ? 'bg-green-500' :
+                                            product.stock > 20 ? 'bg-yellow-500' : 'bg-red-500'"
+                                            :style="`width: ${Math.min(100, (product.stock / 100) * 100)}%`">
+                                        </div>
+                                    </div>
+                                </div>
+                            </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
new file mode 100644
index 0000000..1adc8dd
--- /dev/null
+++ b/src/pages/Warehouses/Edit.vue
@@ -0,0 +1,129 @@
+<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
new file mode 100644
index 0000000..15f8ba6
--- /dev/null
+++ b/src/pages/Warehouses/Form.vue
@@ -0,0 +1,338 @@
+<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
index 0d3051b..6b7a7f0 100644
--- a/src/pages/Warehouses/Index.vue
+++ b/src/pages/Warehouses/Index.vue
@@ -1,133 +1,162 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue'
-import Table from '@/components/Holos/Table.vue'
-import SectionTitle from '@/components/Holos/SectionTitle.vue'
-import Button from '@/components/Holos/Button/Button.vue'
-import Card from '@/components/Holos/Card/Card.vue'
-import CardHeader from '@/components/Holos/Card/CardHeader.vue'
-import CardTitle from '@/components/Holos/Card/CardTitle.vue'
-import CardDescription from '@/components/Holos/Card/CardDescription.vue'
-import Searcher from '@/components/Holos/Searcher.vue'
-import SimpleCard from '@/components/Holos/Card/Simple.vue'
-import Selectable from '@/components/Holos/Form/Selectable.vue'
-import { api } from '@Services/Api'
-import { apiTo } from './Module'
-import CardContent from '../../components/Holos/Card/CardContent.vue'
+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'
 
-const warehouses = ref({});
-const processing = ref(false);
-const selectedStatus = ref('');
+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';
 
-const statusOptions = [
-    { id: '', name: 'Todos los estados' },
-    { id: 'active', name: 'Activos' },
-    { id: 'inactive', name: 'Inactivos' }
-];
+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';
 
-const filteredWarehouses = computed(() => {
-    if (!selectedStatus.value || selectedStatus.value === '') {
-        return warehouses.value;
-    }
+import GoogleIcon from '@Shared/GoogleIcon.vue';
 
-    const filtered = {
-        ...warehouses.value,
-        data: warehouses.value.data?.filter(warehouse => {
-            if (selectedStatus.value === 'active') return warehouse.is_active;
-            if (selectedStatus.value === 'inactive') return !warehouse.is_active;
-            return true;
-        }) || []
-    };
+/** Propiedades */
+const models = ref([]);
+const router = useRouter();
 
-    return filtered;
+/** 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 = []
 });
 
-function fetchWarehouses(url = null) {
-    processing.value = true;
-    api.get(url || apiTo('index'), {
-        onSuccess: (r) => {
-            warehouses.value = r.warehouses;
-            processing.value = false;
-        },
-        onError: () => {
-            processing.value = false;
-        }
-    });
-}
+/** 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(() => {
-    fetchWarehouses();
+    searcher.search();
 });
 </script>
 
 <template>
-    <div class="space-y-6">
-        <SectionTitle>
-            <template #title>Almacenes</template>
-            <template #description>Listado de almacenes registrados en el sistema.</template>
-            <template #aside>
-                <Button color="success" variant="smooth" size="md">
-                    Nuevo almacén
-                </Button>
-            </template>
-        </SectionTitle>
+    <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 class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-            <SimpleCard icon="warehouse" :title="`Total: ${filteredWarehouses.total || 0}`" />
-            <SimpleCard icon="check_circle"
-                :title="`Activos: ${filteredWarehouses.data?.filter(w => w.is_active)?.length || 0}`" />
-            <SimpleCard icon="cancel"
-                :title="`Inactivos: ${filteredWarehouses.data?.filter(w => !w.is_active)?.length || 0}`" />
-            <SimpleCard icon="category"
-                :title="`Con clasificaciones: ${filteredWarehouses.data?.filter(w => w.classifications?.length > 0)?.length || 0}`" />
-        </div> -->
-
-        <Card>
+        <div>
             <CardHeader>
-                <CardTitle class="flex items-center justify-between">
-                    <span>Almacenes</span>
-                    <div class="flex items-center space-x-2">
-                        <span class="text-sm text-muted-foreground">Total de almacenes: {{
-                            filteredWarehouses.data?.length || 0
-                            }}</span>
-                    </div>
-                </CardTitle>
+                <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-3 gap-4 mb-6">
-                    <Selectable v-model="selectedStatus" :options="statusOptions" title="Filtrar por estado"
-                        placeholder="Seleccionar estado..." label="name" trackBy="id" />
-                </div>
-                <Table :items="filteredWarehouses" :processing="processing" @send-pagination="fetchWarehouses">
-                    <template #head>
-                        <th class="text-left">Código</th>
-                        <th class="text-left">Nombre</th>
-                        <th class="text-left">Descripción</th>
-                        <th class="text-left">Estado</th>
-                    </template>
-                    <template #body="{ items }">
-                        <tr v-for="warehouse in items" :key="warehouse.id">
-                            <td>{{ warehouse.code }}</td>
-                            <td>{{ warehouse.name }}</td>
-                            <td>{{ warehouse.description }}</td>
-                            <td>
-                                <span :class="warehouse.is_active ? 'text-green-600' : 'text-red-600'">
+                <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>
-                            </td>
-                        </tr>
 
+                            </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 size="sm" variant="solid" color="info" asLink>
+                                        Ver Detalles
+                                    </Button>
+                                </RouterLink>
+
+                                <!-- Opción 1: RouterLink + asLink -->
+                                <RouterLink class="h-fit" :to="viewTo({ name: 'edit', params: { id: warehouse.id } })">
+                                    <Button size="sm" variant="solid" color="warning" asLink>
+                                        Editar
+                                    </Button>
+                                </RouterLink>
+
+                                <Button size="sm" variant="solid" @click="deleteItem(warehouse)" color="danger">
+                                    Eliminar
+                                </Button>
+                            </div>
+
+                        </CardContent>
+                    </Card>
+
+                </div>
 
-                    </template>
-                    <template #empty>
-                        <td colspan="4" class="text-center py-4">No hay almacenes registrados.</td>
-                    </template>
-                </Table>
             </CardContent>
+        </div>
 
-        </Card>
-
-
-
+        <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
new file mode 100644
index 0000000..248fd8b
--- /dev/null
+++ b/src/pages/Warehouses/Modals/Show.vue
@@ -0,0 +1,311 @@
+<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
index 9630d8d..2945957 100644
--- a/src/pages/Warehouses/Module.js
+++ b/src/pages/Warehouses/Module.js
@@ -1,15 +1,22 @@
 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: `warehouses.${name}`, params, query })
-
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
+    name: `admin.warehouses.${name}`, params, query 
+})
+    
 // Obtener traducción del componente
-const transl = (str) => lang(`warehouses.${str}`)
+const transl = (str) => lang(`admin.warehouses.${str}`)
+
+// Control de permisos
+const can = (permission) => hasPermission(`admin.warehouses.${permission}`)
 
 export {
+    can,
     viewTo,
     apiTo,
     transl
diff --git a/src/pages/Warehouses/e.jsx b/src/pages/Warehouses/e.jsx
new file mode 100644
index 0000000..56fb530
--- /dev/null
+++ b/src/pages/Warehouses/e.jsx
@@ -0,0 +1,1125 @@
+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
new file mode 100644
index 0000000..6fda88f
--- /dev/null
+++ b/src/pages/Warehouses/interfaces/warehouses.interfaces.js
@@ -0,0 +1,125 @@
+/**
+ * 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
new file mode 100644
index 0000000..ae3c1d1
--- /dev/null
+++ b/src/pages/Warehouses/services/WarehouseService.js
@@ -0,0 +1,239 @@
+/**
+ * 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/router/Index.js b/src/router/Index.js
index 4b9db26..a2e8076 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -315,17 +315,26 @@ const router = createRouter({
                     },
                     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/Admin/Roles/Index.vue'),
-                        
+                            component: () => import('@Pages/Warehouses/Create.vue'),
+
                             meta: {
                                 title: 'Crear',
                                 icon: 'add',
@@ -334,8 +343,8 @@ const router = createRouter({
                         {
                             path: ':id/edit',
                             name: 'admin.warehouses.edit',
-                            component: () => import('@Pages/Admin/Roles/Index.vue'),
-                        
+                            component: () => import('@Pages/Warehouses/Edit.vue'),
+
                             meta: {
                                 title: 'Editar',
                                 icon: 'edit',
@@ -343,6 +352,22 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    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',
@@ -377,6 +402,40 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    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: 'roles',
                     name: 'admin.roles',