.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
+

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.

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

src/components/Holos/Button/Button.vue

@@ -0,0 +1,147 @@
+<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;
+  asLink?: boolean;  // Nueva prop para comportamiento de link
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'solid',
+  color: 'primary',
+  size: 'md',
+  type: 'button',
+  disabled: false,
+  loading: false,
+  fullWidth: false,
+  iconOnly: false,
+  asLink: true,  // Por defecto no es link
+});
+
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+
+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;
+  
+}
+
+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>

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>

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>

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>

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>

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>

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>

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>
+

src/layouts/AdminLayout.vue

@@ -81,6 +81,24 @@ onMounted(() => {
                     to="admin.vacations.index"
                 />
             </Section>
+
+            <Section name="Almacén">
+                <Link
+                    icon="grid_view"
+                    name="Almacén" 
+                    to="admin.warehouses.index"
+                />
+                <Link
+                    icon="tag"
+                    name="Clasificaciones de almacenes" 
+                    to="admin.warehouse-classifications.index"
+                />
+                <Link
+                    icon="straighten"
+                    name="Unidades de medida" 
+                    to="admin.units-measure.index"
+                />
+            </Section>
             <Section name="Capacitaciones">
                 <DropDown
                     icon="grid_view"

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>

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>

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>

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>

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>

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
+}

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;
+  }
+}

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>

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>

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>

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>

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>

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
+}

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
+};

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);
+  }
+}

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>

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>

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>

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>

src/pages/Warehouses/Index.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, RouterLink } from 'vue-router';
+import { useSearcher } from '@Services/Api';
+import { hasPermission } from '@Plugins/RolePermission';
+import { can, apiTo, viewTo, transl } from './Module'
+
+import IconButton from '@Holos/Button/Icon.vue'
+import DestroyView from '@Holos/Modal/Template/Destroy.vue';
+import SearcherHead from '@Holos/Searcher.vue';
+import Table from '@Holos/Table.vue';
+import ShowView from './Modals/Show.vue';
+
+import Card from '@Holos/Card/Card.vue';
+import CardHeader from '@Holos/Card/CardHeader.vue';
+import CardTitle from '@Holos/Card/CardTitle.vue';
+import CardDescription from '@Holos/Card/CardDescription.vue';
+import CardContent from '@Holos/Card/CardContent.vue';
+import Button from '@Holos/Button/Button.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Propiedades */
+const models = ref([]);
+const router = useRouter();
+
+/** Referencias */
+const showModal = ref(null);
+const destroyModal = ref(null);
+
+/** Métodos */
+const searcher = useSearcher({
+    url: apiTo('index'),
+    onSuccess: (r) => {
+        console.log('Datos recibidos:', r);
+        console.log('Warehouses:', r.warehouses);
+        if (r.warehouses && r.warehouses.length > 0) {
+            console.log('Primer warehouse:', r.warehouses[0]);
+        }
+        models.value = r.warehouses;
+    },
+    onError: () => models.value = []
+});
+
+/** Función para eliminar */
+const deleteItem = (item) => {
+    destroyModal.value.open(item);
+};
+
+/** Función de debug para navegación */
+const debugNavigation = (warehouse) => {
+    console.log('Debug navigation:', warehouse);
+    console.log('viewTo result:', viewTo({ name: 'edit', params: { id: warehouse.id } }));
+    router.push(viewTo({ name: 'edit', params: { id: warehouse.id } }));
+};
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <div>
+        <div className="flex items-center justify-between">
+            <div>
+                <h1 className="text-3xl font-bold text-foreground">Inventario</h1>
+                <p className="text-muted-foreground">
+                    Control de stock y movimientos por almacén
+                </p>
+            </div>
+        </div>
+        <SearcherHead :title="transl('name')" @search="(x) => searcher.search(x)">
+            <RouterLink :to="viewTo({ name: 'create' })">
+                <IconButton class="text-white" icon="add" :title="$t('crud.create')" filled />
+            </RouterLink>
+            <IconButton icon="refresh" :title="$t('refresh')" @click="searcher.search()" />
+        </SearcherHead>
+
+        <div>
+            <CardHeader>
+                <CardTitle>Gestión de Almacenes</CardTitle>
+                <CardDescription>
+                    Gestiona los almacenes donde se almacenan los productos. Puedes crear, editar y eliminar almacenes
+                    según sea necesario.
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+
+                    <Card v-for="warehouse in models.data" :key="warehouse.id" class="relative overflow-hidden">
+                        <CardContent class="pt-4 pb-4 px-4">
+                            <div class="flex items-start justify-between mb-3">
+                                <div class="flex items-center space-x-2">
+                                    <GoogleIcon class="w-6 h-6 text-primary" name="warehouse" />
+                                    <div>
+                                        <h3 class="font-semibold text-sm">{{ warehouse.name }}</h3>
+                                        <p class="text-xs text-muted-foreground font-mono">
+                                            {{ warehouse.code }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    {{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
+                                </div>
+                            </div>
+
+                            <div class="flex items-center space-x-1 text-xs text-muted-foreground mb-2">
+                                <GoogleIcon class="w-6 h-6" name="distance" />
+                                <p>{{ warehouse.address ? warehouse.address : 'Sin dirección' }}</p>
+                            </div>
+
+                            <div className="flex items-center space-x-1 text-xs text-muted-foreground mb-3">
+
+                                <span v-for="classification in warehouse.classifications" :key="classification.id"
+                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
+                                    {{ classification.code }}
+                                </span>
+                                <span v-if="warehouse.classifications.length > 3"
+                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
+                                    +{{ warehouse.classifications.length - 3 }}
+                                </span>
+                                <span v-if="warehouse.classifications.length === 0" class="text-xs text-gray-400">
+                                    Sin clasificaciones
+                                </span>
+
+                            </div>
+
+                            <div class="flex justify-end mt-3 pt-2 border-t border-border gap-3">
+
+                                <RouterLink class="h-fit" :to="viewTo({ name: 'details', params: { id: warehouse.id } })">
+                                    <Button 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>
+
+            </CardContent>
+        </div>
+
+        <ShowView ref="showModal" @reload="searcher.search()" />
+
+        <DestroyView ref="destroyModal" subtitle="name" :to="(id) => apiTo('destroy', { warehouse: id })"
+            @update="searcher.search()" />
+    </div>
+</template>

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>

src/pages/Warehouses/Module.js

@@ -0,0 +1,23 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`warehouses.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
+    name: `admin.warehouses.${name}`, params, query 
+})
+    
+// Obtener traducción del componente
+const transl = (str) => lang(`admin.warehouses.${str}`)
+
+// Control de permisos
+const can = (permission) => hasPermission(`admin.warehouses.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}

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
+ */

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
+      };
+    });
+  }
+}

src/router/Index.js

@@ -306,6 +306,136 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    path: 'warehouses',
+                    name: 'admin.warehouses',
+                    meta: {
+                        title: 'Bodegas',
+                        icon: 'inventory_2',
+                    },
+                    redirect: '/admin/warehouses',
+                    children: [
+                        {
+                            path: ':id',
+                            name: 'admin.warehouses.details',
+                            component: () => import('@Pages/Warehouses/Details.vue'),
+                            meta: {
+                                title: 'Detalles',
+                                icon: 'info',
+                            },
+                        },
+                        {
+                            path: '',
+                            name: 'admin.warehouses.index',
+                            component: () => import('@Pages/Warehouses/Index.vue'),
+
+                        },
+                        {
+                            path: 'create',
+                            name: 'admin.warehouses.create',
+                            component: () => import('@Pages/Warehouses/Create.vue'),
+
+                            meta: {
+                                title: 'Crear',
+                                icon: 'add',
+                            },
+                        },
+                        {
+                            path: ':id/edit',
+                            name: 'admin.warehouses.edit',
+                            component: () => import('@Pages/Warehouses/Edit.vue'),
+
+                            meta: {
+                                title: 'Editar',
+                                icon: 'edit',
+                            },
+                        }
+                    ]
+                },
+                {
+                    path: 'units-measure',
+                    name: 'admin.units-measure',
+                    meta: {
+                        title: 'Unidades de Medida',
+                        icon: 'straighten',
+                    },
+                    redirect: '/admin/units-measure',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.units-measure.index',
+                            component: () => import('@Pages/UnitsMeasure/Index.vue'),
+                        },
+                    ]
+                },
+                {
+                    path: 'warehouse-classifications',
+                    name: 'admin.warehouse-classifications',
+                    meta: {
+                        title: 'Clasificaciones de Bodegas',
+                        icon: 'category',
+                    },
+                    redirect: '/admin/warehouse-classifications',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.warehouse-classifications.index',
+                            component: () => import('@Pages/WarehouseClassifications/Index.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'admin.warehouse-classifications.create',
+                            component: () => import('@Pages/WarehouseClassifications/Create.vue'),
+                            meta: {
+                                title: 'Crear',
+                                icon: 'add',
+                            },
+                        },
+                        {
+                            path: ':id/edit',
+                            name: 'admin.warehouse-classifications.edit',
+                            component: () => import('@Pages/WarehouseClassifications/Edit.vue'),
+                            meta: {
+                                title: 'Editar',
+                                icon: 'edit',
+                            },
+                        }
+                    ]
+                },
+                {
+                    path: 'units-measure',
+                    name: 'admin.units-measure',
+                    meta: {
+                        title: 'Unidades de Medida',
+                        icon: 'straighten',
+                    },
+                    redirect: '/admin/units-measure',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.units-measure.index',
+                            component: () => import('@Pages/UnitsMeasure/Index.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'admin.units-measure.create',
+                            component: () => import('@Pages/UnitsMeasure/Create.vue'),
+                            meta: {
+                                title: 'Crear',
+                                icon: 'add',
+                            },
+                        },
+                        {
+                            path: ':id/edit',
+                            name: 'admin.units-measure.edit',
+                            component: () => import('@Pages/UnitsMeasure/Edit.vue'),
+                            meta: {
+                                title: 'Editar',
+                                icon: 'edit',
+                            },
+                        }
+                    ]
+                },
                 {
                     path: 'roles',
                     name: 'admin.roles',

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 }

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',
+        },
+      },
+    },
+  },
+});