From 2c7d2f20019a7fde02c5260e6415671c7bfc8eba Mon Sep 17 00:00:00 2001
From: Juan Felipe Zapata Moreno <juan.zapata@golsystems.com.mx>
Date: Fri, 6 Feb 2026 00:01:45 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20componentes=20de=20gesti?=
 =?UTF-8?q?=C3=B3n=20de=20almacenes=20y=20movimientos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implementar vistas CRUD para administración de almacenes (Index, Create, Edit, Delete).
- Añadir  para realizar traspasos de productos entre almacenes.
- Configurar lógica de rutas y API (Module.js) para almacenes y movimientos.
---
 src/lang/es.js                            |  12 +-
 src/layouts/AppLayout.vue                 |  12 +
 src/pages/POS/Inventory/CreateModal.vue   |  16 --
 src/pages/POS/Inventory/EditModal.vue     |  17 --
 src/pages/POS/Movements/DetailModal.vue   | 184 +++++++++++++
 src/pages/POS/Movements/EntryModal.vue    | 207 +++++++++++++++
 src/pages/POS/Movements/ExitModal.vue     | 193 ++++++++++++++
 src/pages/POS/Movements/Index.vue         | 304 ++++++++++++++++++++++
 src/pages/POS/Movements/Module.js         |  16 ++
 src/pages/POS/Movements/TransferModal.vue | 223 ++++++++++++++++
 src/pages/POS/Warehouses/Create.vue       | 144 ++++++++++
 src/pages/POS/Warehouses/Delete.vue       | 104 ++++++++
 src/pages/POS/Warehouses/Edit.vue         | 155 +++++++++++
 src/pages/POS/Warehouses/Index.vue        | 211 +++++++++++++++
 src/pages/POS/Warehouses/Module.js        |  16 ++
 src/router/Index.js                       |  12 +
 16 files changed, 1792 insertions(+), 34 deletions(-)
 create mode 100644 src/pages/POS/Movements/DetailModal.vue
 create mode 100644 src/pages/POS/Movements/EntryModal.vue
 create mode 100644 src/pages/POS/Movements/ExitModal.vue
 create mode 100644 src/pages/POS/Movements/Index.vue
 create mode 100644 src/pages/POS/Movements/Module.js
 create mode 100644 src/pages/POS/Movements/TransferModal.vue
 create mode 100644 src/pages/POS/Warehouses/Create.vue
 create mode 100644 src/pages/POS/Warehouses/Delete.vue
 create mode 100644 src/pages/POS/Warehouses/Edit.vue
 create mode 100644 src/pages/POS/Warehouses/Index.vue
 create mode 100644 src/pages/POS/Warehouses/Module.js

diff --git a/src/lang/es.js b/src/lang/es.js
index 3ebd51d..e474a50 100644
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -461,7 +461,9 @@ export default {
         returns: 'Devoluciones',
         clients: 'Clientes',
         clientTiers: 'Niveles de Clientes',
-        billingRequests: 'Solicitudes de Facturación'
+        billingRequests: 'Solicitudes de Facturación',
+        warehouses: 'Almacenes',
+        movements: 'Movimientos'
     },
     cashRegister: {
         title: 'Caja Registradora',
@@ -571,5 +573,13 @@ export default {
     clientTiers: {
         title: 'Niveles de Clientes',
         description: 'Gestión de niveles de clientes',
+    },
+    warehouses: {
+        title: 'Almacenes',
+        description: 'Gestión de almacenes',
+    },
+    movements: {
+        title: 'Movimientos de Inventario',
+        description: 'Historial de entradas, salidas y traspasos de productos',
     }
 }
\ No newline at end of file
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 1f80dd0..93318a6 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -47,6 +47,18 @@ onMounted(() => {
                     name="pos.inventory"
                     to="pos.inventory.index"
                 />
+                <Link
+                    v-if="hasPermission('warehouses.index')"
+                    icon="warehouse"
+                    name="pos.warehouses"
+                    to="pos.warehouses.index"
+                />
+                <Link
+                    v-if="hasPermission('movements.index')"
+                    icon="swap_horiz"
+                    name="pos.movements"
+                    to="pos.movements.index"
+                />
                 <Link
                     icon="point_of_sale"
                     name="pos.cashRegister"
diff --git a/src/pages/POS/Inventory/CreateModal.vue b/src/pages/POS/Inventory/CreateModal.vue
index f9d3492..f8198a3 100644
--- a/src/pages/POS/Inventory/CreateModal.vue
+++ b/src/pages/POS/Inventory/CreateModal.vue
@@ -23,7 +23,6 @@ const form = useForm({
     sku: '',
     barcode: '',
     category_id: '',
-    stock: 0,
     cost: 0,
     retail_price: 0,
     tax: 16
@@ -158,21 +157,6 @@ watch(() => props.show, (newValue) => {
                         <FormError :message="form.errors?.category_id" />
                     </div>
 
-                    <!-- Stock Inicial -->
-                    <div>
-                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
-                            STOCK INICIAL
-                        </label>
-                        <FormInput
-                            v-model.number="form.stock"
-                            type="number"
-                            min="0"
-                            placeholder="0"
-                            required
-                        />
-                        <FormError :message="form.errors?.stock" />
-                    </div>
-
                     <!-- Costo -->
                     <div>
                         <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
diff --git a/src/pages/POS/Inventory/EditModal.vue b/src/pages/POS/Inventory/EditModal.vue
index 3a0433c..4b96990 100644
--- a/src/pages/POS/Inventory/EditModal.vue
+++ b/src/pages/POS/Inventory/EditModal.vue
@@ -28,7 +28,6 @@ const form = useForm({
     sku: '',
     barcode: '',
     category_id: '',
-    stock: 0,
     cost: 0,
     retail_price: 0,
     tax: 16
@@ -82,7 +81,6 @@ watch(() => props.product, (newProduct) => {
         form.sku = newProduct.sku || '';
         form.barcode = newProduct.barcode || '';
         form.category_id = newProduct.category_id || '';
-        form.stock = newProduct.stock || 0;
         form.cost = parseFloat(newProduct.price?.cost || 0);
         form.retail_price = parseFloat(newProduct.price?.retail_price || 0);
         form.tax = parseFloat(newProduct.price?.tax || 16);
@@ -181,21 +179,6 @@ watch(() => props.show, (newValue) => {
                         <FormError :message="form.errors?.category_id" />
                     </div>
 
-                    <!-- Stock -->
-                    <div>
-                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
-                            STOCK
-                        </label>
-                        <FormInput
-                            v-model.number="form.stock"
-                            type="number"
-                            min="0"
-                            placeholder="0"
-                            required
-                        />
-                        <FormError :message="form.errors?.stock" />
-                    </div>
-
                     <!-- Costo -->
                     <div>
                         <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
diff --git a/src/pages/POS/Movements/DetailModal.vue b/src/pages/POS/Movements/DetailModal.vue
new file mode 100644
index 0000000..9c41611
--- /dev/null
+++ b/src/pages/POS/Movements/DetailModal.vue
@@ -0,0 +1,184 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useApi, apiURL } from '@Services/Api';
+import { formatDate } from '@/utils/formatters';
+
+import Modal from '@Holos/Modal.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Loader from '@Shared/Loader.vue';
+
+/** Propiedades */
+const props = defineProps({
+    show: Boolean,
+    movementId: Number
+});
+
+/** Eventos */
+const emit = defineEmits(['close']);
+
+/** Estado */
+const movement = ref(null);
+const loading = ref(false);
+
+const api = useApi();
+
+/** Métodos */
+const fetchDetail = () => {
+    if (!props.movementId) return;
+
+    loading.value = true;
+    movement.value = null;
+
+    api.get(apiURL(`movimientos/${props.movementId}`), {
+        onSuccess: (data) => {
+            movement.value = data.movement || data;
+        },
+        onError: () => {
+            window.Notify.error('Error al cargar el detalle del movimiento');
+        },
+        onFinish: () => {
+            loading.value = false;
+        }
+    });
+};
+
+const handleClose = () => {
+    emit('close');
+};
+
+const getTypeBadge = (type) => {
+    const badges = {
+        entry: { label: 'Entrada', class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300', icon: 'add_circle' },
+        exit: { label: 'Salida', class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300', icon: 'remove_circle' },
+        transfer: { label: 'Traspaso', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300', icon: 'swap_horiz' },
+        sale: { label: 'Venta', class: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300', icon: 'point_of_sale' },
+        return: { label: 'Devolución', class: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300', icon: 'undo' },
+    };
+    return badges[type] || { label: type, class: 'bg-gray-100 text-gray-800', icon: 'help' };
+};
+
+/** Watchers */
+watch(() => props.show, (isShown) => {
+    if (isShown && props.movementId) {
+        fetchDetail();
+    }
+});
+</script>
+
+<template>
+    <Modal :show="show" max-width="lg" @close="handleClose">
+        <div class="p-6">
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-6">
+                <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                    Detalle del Movimiento
+                </h3>
+                <button
+                    @click="handleClose"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Loading -->
+            <div v-if="loading" class="flex justify-center py-12">
+                <Loader />
+            </div>
+
+            <!-- Content -->
+            <div v-else-if="movement" class="space-y-5">
+                <!-- Tipo badge -->
+                <div class="flex items-center gap-3">
+                    <span :class="['inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold', getTypeBadge(movement.movement_type).class]">
+                        <GoogleIcon :name="getTypeBadge(movement.movement_type).icon" class="text-lg" />
+                        {{ getTypeBadge(movement.movement_type).label }}
+                    </span>
+                    <span class="text-sm text-gray-500 dark:text-gray-400">
+                        #{{ movement.id }}
+                    </span>
+                </div>
+
+                <!-- Producto -->
+                <div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-xl p-5 border border-gray-200 dark:border-gray-700">
+                    <div class="flex items-center gap-2 mb-3">
+                        <GoogleIcon name="inventory_2" class="text-lg text-gray-600 dark:text-gray-400" />
+                        <h4 class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase">Producto</h4>
+                    </div>
+                    <div class="grid grid-cols-2 gap-3 text-sm">
+                        <div>
+                            <span class="text-gray-500 dark:text-gray-400">Nombre:</span>
+                            <p class="font-semibold text-gray-900 dark:text-gray-100">{{ movement.inventory?.name || 'N/A' }}</p>
+                        </div>
+                        <div>
+                            <span class="text-gray-500 dark:text-gray-400">SKU:</span>
+                            <p class="font-mono font-semibold text-gray-900 dark:text-gray-100">{{ movement.inventory?.sku || 'N/A' }}</p>
+                        </div>
+                        <div>
+                            <span class="text-gray-500 dark:text-gray-400">Cantidad:</span>
+                            <p class="font-bold text-lg text-gray-900 dark:text-gray-100">{{ movement.quantity }}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Almacenes -->
+                <div class="grid grid-cols-2 gap-4">
+                    <!-- Origen -->
+                    <div v-if="movement.warehouse_from" class="bg-red-50 dark:bg-red-900/10 rounded-xl p-4 border border-red-200 dark:border-red-800">
+                        <div class="flex items-center gap-2 mb-2">
+                            <GoogleIcon name="logout" class="text-lg text-red-600 dark:text-red-400" />
+                            <h4 class="text-xs font-bold text-red-700 dark:text-red-300 uppercase">Origen</h4>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ movement.warehouse_from.name }}</p>
+                        <p class="text-xs font-mono text-gray-500 dark:text-gray-400">{{ movement.warehouse_from.code }}</p>
+                    </div>
+
+                    <!-- Destino -->
+                    <div v-if="movement.warehouse_to" class="bg-green-50 dark:bg-green-900/10 rounded-xl p-4 border border-green-200 dark:border-green-800">
+                        <div class="flex items-center gap-2 mb-2">
+                            <GoogleIcon name="login" class="text-lg text-green-600 dark:text-green-400" />
+                            <h4 class="text-xs font-bold text-green-700 dark:text-green-300 uppercase">Destino</h4>
+                        </div>
+                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ movement.warehouse_to.name }}</p>
+                        <p class="text-xs font-mono text-gray-500 dark:text-gray-400">{{ movement.warehouse_to.code }}</p>
+                    </div>
+                </div>
+
+                <!-- Info adicional -->
+                <div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-xl p-5 border border-gray-200 dark:border-gray-700">
+                    <div class="grid grid-cols-2 gap-3 text-sm">
+                        <div>
+                            <span class="text-gray-500 dark:text-gray-400">Usuario:</span>
+                            <p class="font-semibold text-gray-900 dark:text-gray-100">{{ movement.user?.name || 'N/A' }}</p>
+                        </div>
+                        <div>
+                            <span class="text-gray-500 dark:text-gray-400">Fecha:</span>
+                            <p class="font-semibold text-gray-900 dark:text-gray-100">{{ formatDate(movement.created_at) }}</p>
+                        </div>
+                        <div v-if="movement.invoice_reference" class="col-span-2">
+                            <span class="text-gray-500 dark:text-gray-400">Referencia factura:</span>
+                            <p class="font-mono font-semibold text-gray-900 dark:text-gray-100">{{ movement.invoice_reference }}</p>
+                        </div>
+                        <div v-if="movement.notes" class="col-span-2">
+                            <span class="text-gray-500 dark:text-gray-400">Notas:</span>
+                            <p class="text-gray-900 dark:text-gray-100 italic">{{ movement.notes }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="flex items-center justify-end mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
+                <button
+                    type="button"
+                    @click="handleClose"
+                    class="px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                >
+                    Cerrar
+                </button>
+            </div>
+        </div>
+    </Modal>
+</template>
diff --git a/src/pages/POS/Movements/EntryModal.vue b/src/pages/POS/Movements/EntryModal.vue
new file mode 100644
index 0000000..85315ec
--- /dev/null
+++ b/src/pages/POS/Movements/EntryModal.vue
@@ -0,0 +1,207 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useForm, useApi, apiURL } from '@Services/Api';
+
+import Modal from '@Holos/Modal.vue';
+import FormInput from '@Holos/Form/Input.vue';
+import FormError from '@Holos/Form/Elements/Error.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Eventos */
+const emit = defineEmits(['close', 'created']);
+
+/** Propiedades */
+const props = defineProps({
+    show: Boolean
+});
+
+/** Estado */
+const products = ref([]);
+const warehouses = ref([]);
+const loading = ref(false);
+
+const api = useApi();
+
+/** Formulario */
+const form = useForm({
+    inventory_id: '',
+    warehouse_id: '',
+    quantity: '',
+    invoice_reference: '',
+    notes: '',
+});
+
+/** Métodos */
+const loadData = () => {
+    loading.value = true;
+
+    api.get(apiURL('inventario'), {
+        onSuccess: (data) => {
+            products.value = data.products?.data || data.products || [];
+        }
+    });
+
+    api.get(apiURL('almacenes'), {
+        onSuccess: (data) => {
+            warehouses.value = data.warehouses?.data || data.data || [];
+        },
+        onFinish: () => {
+            loading.value = false;
+        }
+    });
+};
+
+const createEntry = () => {
+    form.post(apiURL('movimientos/entrada'), {
+        onSuccess: () => {
+            window.Notify.success('Entrada registrada correctamente');
+            emit('created');
+            closeModal();
+        },
+        onFail: (data) => {
+            window.Notify.error(data.message || 'Error al registrar la entrada');
+        },
+        onError: () => {
+            window.Notify.error('Error al registrar la entrada');
+        }
+    });
+};
+
+const closeModal = () => {
+    form.reset();
+    emit('close');
+};
+
+/** Watchers */
+watch(() => props.show, (isShown) => {
+    if (isShown) {
+        loadData();
+    }
+});
+</script>
+
+<template>
+    <Modal :show="show" max-width="lg" @close="closeModal">
+        <div class="p-6">
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-6">
+                <div class="flex items-center gap-3">
+                    <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-100 dark:bg-green-900/30">
+                        <GoogleIcon name="add_circle" class="text-xl text-green-600 dark:text-green-400" />
+                    </div>
+                    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                        Registrar Entrada
+                    </h3>
+                </div>
+                <button
+                    @click="closeModal"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Formulario -->
+            <form @submit.prevent="createEntry" class="space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <!-- Producto -->
+                    <div class="col-span-2">
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            PRODUCTO
+                        </label>
+                        <select
+                            v-model="form.inventory_id"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        >
+                            <option value="">Seleccionar producto...</option>
+                            <option v-for="product in products" :key="product.id" :value="product.id">
+                                {{ product.name }} ({{ product.sku }})
+                            </option>
+                        </select>
+                        <FormError :message="form.errors?.inventory_id" />
+                    </div>
+
+                    <!-- Almacén destino -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            ALMACÉN DESTINO
+                        </label>
+                        <select
+                            v-model="form.warehouse_id"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        >
+                            <option value="">Seleccionar almacén...</option>
+                            <option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
+                                {{ wh.name }} ({{ wh.code }})
+                            </option>
+                        </select>
+                        <FormError :message="form.errors?.warehouse_id" />
+                    </div>
+
+                    <!-- Cantidad -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            CANTIDAD
+                        </label>
+                        <FormInput
+                            v-model="form.quantity"
+                            type="number"
+                            min="1"
+                            placeholder="0"
+                        />
+                        <FormError :message="form.errors?.quantity" />
+                    </div>
+
+                    <!-- Referencia de factura -->
+                    <div class="col-span-2">
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            REFERENCIA DE FACTURA <span class="text-gray-400 text-xs normal-case">(opcional)</span>
+                        </label>
+                        <FormInput
+                            v-model="form.invoice_reference"
+                            type="text"
+                            placeholder="Ej: FAC-2026-001"
+                        />
+                        <FormError :message="form.errors?.invoice_reference" />
+                    </div>
+
+                    <!-- Notas -->
+                    <div class="col-span-2">
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            NOTAS <span class="text-gray-400 text-xs normal-case">(opcional)</span>
+                        </label>
+                        <textarea
+                            v-model="form.notes"
+                            rows="2"
+                            placeholder="Ej: Compra de proveedor X"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
+                        ></textarea>
+                        <FormError :message="form.errors?.notes" />
+                    </div>
+                </div>
+
+                <!-- Botones -->
+                <div class="flex items-center justify-end gap-3 mt-6">
+                    <button
+                        type="button"
+                        @click="closeModal"
+                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
+                    >
+                        Cancelar
+                    </button>
+                    <button
+                        type="submit"
+                        :disabled="form.processing"
+                        class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-green-600 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                        <GoogleIcon name="add_circle" class="text-lg" />
+                        <span v-if="form.processing">Registrando...</span>
+                        <span v-else>Registrar Entrada</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </Modal>
+</template>
diff --git a/src/pages/POS/Movements/ExitModal.vue b/src/pages/POS/Movements/ExitModal.vue
new file mode 100644
index 0000000..8063b0f
--- /dev/null
+++ b/src/pages/POS/Movements/ExitModal.vue
@@ -0,0 +1,193 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useForm, useApi, apiURL } from '@Services/Api';
+
+import Modal from '@Holos/Modal.vue';
+import FormInput from '@Holos/Form/Input.vue';
+import FormError from '@Holos/Form/Elements/Error.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Eventos */
+const emit = defineEmits(['close', 'created']);
+
+/** Propiedades */
+const props = defineProps({
+    show: Boolean
+});
+
+/** Estado */
+const products = ref([]);
+const warehouses = ref([]);
+const loading = ref(false);
+
+const api = useApi();
+
+/** Formulario */
+const form = useForm({
+    inventory_id: '',
+    warehouse_id: '',
+    quantity: '',
+    notes: '',
+});
+
+/** Métodos */
+const loadData = () => {
+    loading.value = true;
+
+    api.get(apiURL('inventario'), {
+        onSuccess: (data) => {
+            products.value = data.products?.data || data.products || [];
+        }
+    });
+
+    api.get(apiURL('almacenes'), {
+        onSuccess: (data) => {
+            warehouses.value = data.warehouses?.data || data.data || [];
+        },
+        onFinish: () => {
+            loading.value = false;
+        }
+    });
+};
+
+const createExit = () => {
+    form.post(apiURL('movimientos/salida'), {
+        onSuccess: () => {
+            window.Notify.success('Salida registrada correctamente');
+            emit('created');
+            closeModal();
+        },
+        onFail: (data) => {
+            window.Notify.error(data.message || 'Error al registrar la salida');
+        },
+        onError: () => {
+            window.Notify.error('Error al registrar la salida');
+        }
+    });
+};
+
+const closeModal = () => {
+    form.reset();
+    emit('close');
+};
+
+/** Watchers */
+watch(() => props.show, (isShown) => {
+    if (isShown) {
+        loadData();
+    }
+});
+</script>
+
+<template>
+    <Modal :show="show" max-width="lg" @close="closeModal">
+        <div class="p-6">
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-6">
+                <div class="flex items-center gap-3">
+                    <div class="flex items-center justify-center w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30">
+                        <GoogleIcon name="remove_circle" class="text-xl text-red-600 dark:text-red-400" />
+                    </div>
+                    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                        Registrar Salida
+                    </h3>
+                </div>
+                <button
+                    @click="closeModal"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Formulario -->
+            <form @submit.prevent="createExit" class="space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <!-- Producto -->
+                    <div class="col-span-2">
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            PRODUCTO
+                        </label>
+                        <select
+                            v-model="form.inventory_id"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        >
+                            <option value="">Seleccionar producto...</option>
+                            <option v-for="product in products" :key="product.id" :value="product.id">
+                                {{ product.name }} ({{ product.sku }})
+                            </option>
+                        </select>
+                        <FormError :message="form.errors?.inventory_id" />
+                    </div>
+
+                    <!-- Almacén origen -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            ALMACÉN ORIGEN
+                        </label>
+                        <select
+                            v-model="form.warehouse_id"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        >
+                            <option value="">Seleccionar almacén...</option>
+                            <option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
+                                {{ wh.name }} ({{ wh.code }})
+                            </option>
+                        </select>
+                        <FormError :message="form.errors?.warehouse_id" />
+                    </div>
+
+                    <!-- Cantidad -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            CANTIDAD
+                        </label>
+                        <FormInput
+                            v-model="form.quantity"
+                            type="number"
+                            min="1"
+                            placeholder="0"
+                        />
+                        <FormError :message="form.errors?.quantity" />
+                    </div>
+
+                    <!-- Notas -->
+                    <div class="col-span-2">
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            NOTAS <span class="text-gray-400 text-xs normal-case">(opcional)</span>
+                        </label>
+                        <textarea
+                            v-model="form.notes"
+                            rows="2"
+                            placeholder="Ej: Producto dañado"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
+                        ></textarea>
+                        <FormError :message="form.errors?.notes" />
+                    </div>
+                </div>
+
+                <!-- Botones -->
+                <div class="flex items-center justify-end gap-3 mt-6">
+                    <button
+                        type="button"
+                        @click="closeModal"
+                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
+                    >
+                        Cancelar
+                    </button>
+                    <button
+                        type="submit"
+                        :disabled="form.processing"
+                        class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                        <GoogleIcon name="remove_circle" class="text-lg" />
+                        <span v-if="form.processing">Registrando...</span>
+                        <span v-else>Registrar Salida</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </Modal>
+</template>
diff --git a/src/pages/POS/Movements/Index.vue b/src/pages/POS/Movements/Index.vue
new file mode 100644
index 0000000..49e74dc
--- /dev/null
+++ b/src/pages/POS/Movements/Index.vue
@@ -0,0 +1,304 @@
+<script setup>
+import { onMounted, ref, computed } from 'vue';
+import { useSearcher, apiURL } from '@Services/Api';
+import { can } from './Module.js';
+import { formatDate } from '@/utils/formatters';
+
+import SearcherHead from '@Holos/Searcher.vue';
+import Table from '@Holos/Table.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import EntryModal from './EntryModal.vue';
+import ExitModal from './ExitModal.vue';
+import TransferModal from './TransferModal.vue';
+import DetailModal from './DetailModal.vue';
+
+/** Estado */
+const movements = ref({});
+const selectedType = ref('');
+const selectedWarehouse = ref('');
+const fromDate = ref('');
+const toDate = ref('');
+const warehouses = ref([]);
+
+const showEntryModal = ref(false);
+const showExitModal = ref(false);
+const showTransferModal = ref(false);
+const showDetailModal = ref(false);
+const selectedMovementId = ref(null);
+
+/** Filtros computados */
+const filters = computed(() => {
+    const f = {};
+    if (selectedType.value) f.movement_type = selectedType.value;
+    if (selectedWarehouse.value) f.warehouse_id = selectedWarehouse.value;
+    if (fromDate.value) f.from_date = fromDate.value;
+    if (toDate.value) f.to_date = toDate.value;
+    return f;
+});
+
+/** Tipos de movimiento */
+const movementTypes = [
+    { value: '', label: 'Todos', icon: 'list', active: 'bg-gray-600 text-white shadow-sm', inactive: 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-900/50' },
+    { value: 'entry', label: 'Entradas', icon: 'add_circle', active: 'bg-green-600 text-white shadow-sm', inactive: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-900/50' },
+    { value: 'exit', label: 'Salidas', icon: 'remove_circle', active: 'bg-red-600 text-white shadow-sm', inactive: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-900/50' },
+    { value: 'transfer', label: 'Traspasos', icon: 'swap_horiz', active: 'bg-blue-600 text-white shadow-sm', inactive: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-900/50' },
+ /*    { value: 'sale', label: 'Ventas', icon: 'point_of_sale', active: 'bg-purple-600 text-white shadow-sm', inactive: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-900/50' },
+    { value: 'return', label: 'Devoluciones', icon: 'undo', active: 'bg-amber-600 text-white shadow-sm', inactive: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300 hover:bg-amber-200 dark:hover:bg-amber-900/50' },
+ */];
+
+const getTypeBadge = (type) => {
+    const badges = {
+        entry: { label: 'Entrada', class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' },
+        exit: { label: 'Salida', class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300' },
+        transfer: { label: 'Traspaso', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' },
+/*         sale: { label: 'Venta', class: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300' },
+        return: { label: 'Devolución', class: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300' }, */
+    };
+    return badges[type] || { label: type, class: 'bg-gray-100 text-gray-800' };
+};
+
+/** Searcher */
+const searcher = useSearcher({
+    url: apiURL('movimientos'),
+    onSuccess: (r) => {
+        movements.value = r.movements || r;
+    },
+    onError: () => movements.value = {}
+});
+
+/** Métodos */
+const loadWarehouses = async () => {
+    try {
+        const response = await fetch(apiURL('almacenes'), {
+            headers: {
+                'Authorization': `Bearer ${sessionStorage.token}`,
+                'Accept': 'application/json'
+            }
+        });
+        const result = await response.json();
+        if (result.data) {
+            warehouses.value = result.data.warehouses?.data || result.data.data || [];
+        }
+    } catch (error) {
+        console.error('Error loading warehouses:', error);
+    }
+};
+
+const applyFilters = () => {
+    searcher.search('', filters.value);
+};
+
+const selectType = (type) => {
+    selectedType.value = type;
+    applyFilters();
+};
+
+const openDetail = (movement) => {
+    selectedMovementId.value = movement.id;
+    showDetailModal.value = true;
+};
+
+const closeDetailModal = () => {
+    showDetailModal.value = false;
+    selectedMovementId.value = null;
+};
+
+const onMovementCreated = () => {
+    applyFilters();
+};
+
+/** Ciclo de vida */
+onMounted(() => {
+    searcher.search();
+    loadWarehouses();
+});
+</script>
+
+<template>
+    <div>
+        <SearcherHead
+            :title="$t('movements.title')"
+            placeholder="Buscar movimientos..."
+            @search="(x) => searcher.search(x, filters)"
+        >
+            <div class="flex items-center gap-2">
+                <button
+                    v-if="can('create')"
+                    class="flex items-center gap-1.5 px-3 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
+                    @click="showEntryModal = true"
+                >
+                    <GoogleIcon name="add_circle" class="text-lg" />
+                    Entrada
+                </button>
+                <button
+                    v-if="can('create')"
+                    class="flex items-center gap-1.5 px-3 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
+                    @click="showExitModal = true"
+                >
+                    <GoogleIcon name="remove_circle" class="text-lg" />
+                    Salida
+                </button>
+                <button
+                    v-if="can('create')"
+                    class="flex items-center gap-1.5 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
+                    @click="showTransferModal = true"
+                >
+                    <GoogleIcon name="swap_horiz" class="text-lg" />
+                    Traspaso
+                </button>
+            </div>
+        </SearcherHead>
+
+        <!-- Filtros -->
+        <div class="mb-4 space-y-3">
+            <!-- Chips de tipo -->
+            <div class="flex flex-wrap gap-2">
+                <button
+                    v-for="type in movementTypes"
+                    :key="type.value"
+                    @click="selectType(type.value)"
+                    :class="[
+                        'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold transition-all',
+                        selectedType === type.value ? type.active : type.inactive
+                    ]"
+                >
+                    <GoogleIcon :name="type.icon" class="text-sm" />
+                    {{ type.label }}
+                </button>
+            </div>
+
+            <!-- Filtros adicionales -->
+            <div class="flex flex-wrap items-end gap-3">
+                <div>
+                    <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">Almacén</label>
+                    <select
+                        v-model="selectedWarehouse"
+                        @change="applyFilters"
+                        class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500"
+                    >
+                        <option value="">Todos</option>
+                        <option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
+                            {{ wh.name }}
+                        </option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">Desde</label>
+                    <input
+                        v-model="fromDate"
+                        @change="applyFilters"
+                        type="date"
+                        class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500"
+                    />
+                </div>
+                <div>
+                    <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase mb-1">Hasta</label>
+                    <input
+                        v-model="toDate"
+                        @change="applyFilters"
+                        type="date"
+                        class="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500"
+                    />
+                </div>
+                <button
+                    v-if="selectedWarehouse || fromDate || toDate"
+                    @click="selectedWarehouse = ''; fromDate = ''; toDate = ''; selectedType = ''; applyFilters();"
+                    class="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+                >
+                    Limpiar filtros
+                </button>
+            </div>
+        </div>
+
+        <!-- Tabla -->
+        <div class="pt-2 w-full">
+            <Table
+                :items="movements"
+                @send-pagination="(page) => searcher.pagination(page, filters)"
+            >
+                <template #head>
+                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">PRODUCTO</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">TIPO</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">CANTIDAD</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">ORIGEN</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">DESTINO</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">USUARIO</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">FECHA</th>
+                </template>
+                <template #body="{items}">
+                    <tr
+                        v-for="movement in items"
+                        :key="movement.id"
+                        class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
+                        @click="openDetail(movement)"
+                    >
+                        <td class="px-6 py-4 text-left">
+                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ movement.inventory?.name || 'N/A' }}</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 font-mono">{{ movement.inventory?.sku || '' }}</p>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <span :class="['inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium', getTypeBadge(movement.movement_type).class]">
+                                {{ getTypeBadge(movement.movement_type).label }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <p class="text-sm font-bold text-gray-900 dark:text-gray-100">{{ movement.quantity }}</p>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <p v-if="movement.warehouse_from" class="text-sm text-gray-700 dark:text-gray-300">{{ movement.warehouse_from.name }}</p>
+                            <span v-else class="text-sm text-gray-400 dark:text-gray-500">—</span>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <p v-if="movement.warehouse_to" class="text-sm text-gray-700 dark:text-gray-300">{{ movement.warehouse_to.name }}</p>
+                            <span v-else class="text-sm text-gray-400 dark:text-gray-500">—</span>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <p class="text-sm text-gray-700 dark:text-gray-300">{{ movement.user?.name || 'N/A' }}</p>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <p class="text-sm text-gray-700 dark:text-gray-300">{{ formatDate(movement.created_at) }}</p>
+                        </td>
+                    </tr>
+                </template>
+                <template #empty>
+                    <td colspan="7" class="table-cell text-center">
+                        <div class="flex flex-col items-center justify-center py-8 text-gray-500">
+                            <GoogleIcon
+                                name="swap_horiz"
+                                class="text-6xl mb-2 opacity-50"
+                            />
+                            <p class="font-semibold">
+                                {{ $t('registers.empty') }}
+                            </p>
+                        </div>
+                    </td>
+                </template>
+            </Table>
+        </div>
+
+        <!-- Modales -->
+        <EntryModal
+            v-if="can('create')"
+            :show="showEntryModal"
+            @close="showEntryModal = false"
+            @created="onMovementCreated"
+        />
+        <ExitModal
+            v-if="can('create')"
+            :show="showExitModal"
+            @close="showExitModal = false"
+            @created="onMovementCreated"
+        />
+        <TransferModal
+            v-if="can('create')"
+            :show="showTransferModal"
+            @close="showTransferModal = false"
+            @created="onMovementCreated"
+        />
+        <DetailModal
+            :show="showDetailModal"
+            :movement-id="selectedMovementId"
+            @close="closeDetailModal"
+        />
+    </div>
+</template>
diff --git a/src/pages/POS/Movements/Module.js b/src/pages/POS/Movements/Module.js
new file mode 100644
index 0000000..be9688a
--- /dev/null
+++ b/src/pages/POS/Movements/Module.js
@@ -0,0 +1,16 @@
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`movements.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => ({ name: `pos.movements.${name}`, params, query })
+
+// Determina si un usuario puede hacer algo en base a los permisos
+const can = (permission) => hasPermission(`movements.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo
+}
diff --git a/src/pages/POS/Movements/TransferModal.vue b/src/pages/POS/Movements/TransferModal.vue
new file mode 100644
index 0000000..012e7d5
--- /dev/null
+++ b/src/pages/POS/Movements/TransferModal.vue
@@ -0,0 +1,223 @@
+<script setup>
+import { ref, watch, computed } from 'vue';
+import { useForm, useApi, apiURL } from '@Services/Api';
+
+import Modal from '@Holos/Modal.vue';
+import FormInput from '@Holos/Form/Input.vue';
+import FormError from '@Holos/Form/Elements/Error.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Eventos */
+const emit = defineEmits(['close', 'created']);
+
+/** Propiedades */
+const props = defineProps({
+    show: Boolean
+});
+
+/** Estado */
+const products = ref([]);
+const warehouses = ref([]);
+const loading = ref(false);
+
+const api = useApi();
+
+/** Formulario */
+const form = useForm({
+    inventory_id: '',
+    warehouse_from_id: '',
+    warehouse_to_id: '',
+    quantity: '',
+    notes: '',
+});
+
+/** Computed */
+const availableDestinations = computed(() => {
+    return warehouses.value.filter(wh => wh.id !== Number(form.warehouse_from_id));
+});
+
+/** Métodos */
+const loadData = () => {
+    loading.value = true;
+
+    api.get(apiURL('inventario'), {
+        onSuccess: (data) => {
+            products.value = data.products?.data || data.products || [];
+        }
+    });
+
+    api.get(apiURL('almacenes'), {
+        onSuccess: (data) => {
+            warehouses.value = data.warehouses?.data || data.data || [];
+        },
+        onFinish: () => {
+            loading.value = false;
+        }
+    });
+};
+
+const createTransfer = () => {
+    form.post(apiURL('movimientos/traspaso'), {
+        onSuccess: () => {
+            window.Notify.success('Traspaso registrado correctamente');
+            emit('created');
+            closeModal();
+        },
+        onFail: (data) => {
+            window.Notify.error(data.message || 'Error al registrar el traspaso');
+        },
+        onError: () => {
+            window.Notify.error('Error al registrar el traspaso');
+        }
+    });
+};
+
+const closeModal = () => {
+    form.reset();
+    emit('close');
+};
+
+/** Watchers */
+watch(() => props.show, (isShown) => {
+    if (isShown) {
+        loadData();
+    }
+});
+
+// Limpiar destino si cambia el origen
+watch(() => form.warehouse_from_id, () => {
+    if (form.warehouse_to_id && Number(form.warehouse_to_id) === Number(form.warehouse_from_id)) {
+        form.warehouse_to_id = '';
+    }
+});
+</script>
+
+<template>
+    <Modal :show="show" max-width="lg" @close="closeModal">
+        <div class="p-6">
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-6">
+                <div class="flex items-center gap-3">
+                    <div class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/30">
+                        <GoogleIcon name="swap_horiz" class="text-xl text-blue-600 dark:text-blue-400" />
+                    </div>
+                    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                        Registrar Traspaso
+                    </h3>
+                </div>
+                <button
+                    @click="closeModal"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Formulario -->
+            <form @submit.prevent="createTransfer" class="space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <!-- Producto -->
+                    <div class="col-span-2">
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            PRODUCTO
+                        </label>
+                        <select
+                            v-model="form.inventory_id"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        >
+                            <option value="">Seleccionar producto...</option>
+                            <option v-for="product in products" :key="product.id" :value="product.id">
+                                {{ product.name }} ({{ product.sku }})
+                            </option>
+                        </select>
+                        <FormError :message="form.errors?.inventory_id" />
+                    </div>
+
+                    <!-- Almacén origen -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            ALMACÉN ORIGEN
+                        </label>
+                        <select
+                            v-model="form.warehouse_from_id"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        >
+                            <option value="">Seleccionar origen...</option>
+                            <option v-for="wh in warehouses" :key="wh.id" :value="wh.id">
+                                {{ wh.name }} ({{ wh.code }})
+                            </option>
+                        </select>
+                        <FormError :message="form.errors?.warehouse_from_id" />
+                    </div>
+
+                    <!-- Almacén destino -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            ALMACÉN DESTINO
+                        </label>
+                        <select
+                            v-model="form.warehouse_to_id"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        >
+                            <option value="">Seleccionar destino...</option>
+                            <option v-for="wh in availableDestinations" :key="wh.id" :value="wh.id">
+                                {{ wh.name }} ({{ wh.code }})
+                            </option>
+                        </select>
+                        <FormError :message="form.errors?.warehouse_to_id" />
+                    </div>
+
+                    <!-- Cantidad -->
+                    <div class="col-span-2">
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            CANTIDAD
+                        </label>
+                        <FormInput
+                            v-model="form.quantity"
+                            type="number"
+                            min="1"
+                            placeholder="0"
+                        />
+                        <FormError :message="form.errors?.quantity" />
+                    </div>
+
+                    <!-- Notas -->
+                    <div class="col-span-2">
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            NOTAS <span class="text-gray-400 text-xs normal-case">(opcional)</span>
+                        </label>
+                        <textarea
+                            v-model="form.notes"
+                            rows="2"
+                            placeholder="Ej: Traspaso a bodega"
+                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"
+                        ></textarea>
+                        <FormError :message="form.errors?.notes" />
+                    </div>
+                </div>
+
+                <!-- Botones -->
+                <div class="flex items-center justify-end gap-3 mt-6">
+                    <button
+                        type="button"
+                        @click="closeModal"
+                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
+                    >
+                        Cancelar
+                    </button>
+                    <button
+                        type="submit"
+                        :disabled="form.processing"
+                        class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                        <GoogleIcon name="swap_horiz" class="text-lg" />
+                        <span v-if="form.processing">Registrando...</span>
+                        <span v-else>Registrar Traspaso</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </Modal>
+</template>
diff --git a/src/pages/POS/Warehouses/Create.vue b/src/pages/POS/Warehouses/Create.vue
new file mode 100644
index 0000000..ba9ff6c
--- /dev/null
+++ b/src/pages/POS/Warehouses/Create.vue
@@ -0,0 +1,144 @@
+<script setup>
+import { useForm, apiURL } from '@Services/Api';
+
+import Modal from '@Holos/Modal.vue';
+import FormInput from '@Holos/Form/Input.vue';
+import FormError from '@Holos/Form/Elements/Error.vue';
+
+/** Eventos */
+const emit = defineEmits(['close', 'created']);
+
+/** Propiedades */
+const props = defineProps({
+    show: Boolean
+});
+
+/** Formulario */
+const form = useForm({
+    code: '',
+    name: '',
+    is_active: true,
+    is_main: false,
+});
+
+/** Métodos */
+const createWarehouse = () => {
+    form.post(apiURL('almacenes'), {
+        onSuccess: () => {
+            window.Notify.success('Almacén creado exitosamente');
+            emit('created');
+            closeModal();
+        },
+        onError: () => {
+            window.Notify.error('Error al crear el almacén');
+        }
+    });
+};
+
+const closeModal = () => {
+    form.reset();
+    emit('close');
+};
+
+</script>
+
+<template>
+    <Modal :show="show" max-width="md" @close="closeModal">
+        <div class="p-6">
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-6">
+                <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                    Crear Almacén
+                </h3>
+                <button
+                    @click="closeModal"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Formulario -->
+            <form @submit.prevent="createWarehouse" class="space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <!-- Código -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            CÓDIGO
+                        </label>
+                        <FormInput
+                            v-model="form.code"
+                            type="text"
+                            placeholder="Ej: TIENDA-01"
+                        />
+                        <FormError :message="form.errors?.code" />
+                    </div>
+
+                    <!-- Nombre -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            NOMBRE
+                        </label>
+                        <FormInput
+                            v-model="form.name"
+                            type="text"
+                            placeholder="Nombre del almacén"
+                        />
+                        <FormError :message="form.errors?.name" />
+                    </div>
+
+                    <!-- Almacén Principal -->
+                    <div class="col-span-2">
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input
+                                v-model="form.is_main"
+                                type="checkbox"
+                                class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                            />
+                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                                Almacén principal
+                            </span>
+                        </label>
+                        <FormError :message="form.errors?.is_main" />
+                    </div>
+
+                    <!-- Estado -->
+                    <div class="col-span-2">
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input
+                                v-model="form.is_active"
+                                type="checkbox"
+                                class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                            />
+                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                                Activar almacén inmediatamente
+                            </span>
+                        </label>
+                        <FormError :message="form.errors?.is_active" />
+                    </div>
+                </div>
+
+                <!-- Botones -->
+                <div class="flex items-center justify-end gap-3 mt-6">
+                    <button
+                        type="button"
+                        @click="closeModal"
+                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
+                    >
+                        Cancelar
+                    </button>
+                    <button
+                        type="submit"
+                        :disabled="form.processing"
+                        class="px-4 py-2 text-sm font-semibold text-white bg-gray-900 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                        <span v-if="form.processing">Guardando...</span>
+                        <span v-else>Guardar</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </Modal>
+</template>
diff --git a/src/pages/POS/Warehouses/Delete.vue b/src/pages/POS/Warehouses/Delete.vue
new file mode 100644
index 0000000..5bfa18f
--- /dev/null
+++ b/src/pages/POS/Warehouses/Delete.vue
@@ -0,0 +1,104 @@
+<script setup>
+import Modal from '@Holos/Modal.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+
+/** Props */
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false
+    },
+    warehouse: {
+        type: Object,
+        default: null
+    }
+});
+
+/** Emits */
+const emit = defineEmits(['close', 'confirm']);
+
+/** Métodos */
+const handleConfirm = () => {
+    emit('confirm', props.warehouse.id);
+};
+
+const handleClose = () => {
+    emit('close');
+};
+</script>
+
+<template>
+    <Modal :show="show" max-width="md" @close="handleClose">
+        <div class="p-6">
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-6">
+                <div class="flex items-center gap-3">
+                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30">
+                        <GoogleIcon name="delete_forever" class="text-2xl text-red-600 dark:text-red-400" />
+                    </div>
+                    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                        Eliminar Almacén
+                    </h3>
+                </div>
+                <button
+                    @click="handleClose"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Content -->
+            <div class="space-y-5">
+                <p class="text-gray-700 dark:text-gray-300 text-base">
+                    ¿Estás seguro de que deseas eliminar este almacén?
+                </p>
+
+                <div v-if="warehouse" class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl p-5 space-y-3">
+                    <div class="flex items-start justify-between">
+                        <div class="flex-1">
+                            <p class="text-base font-bold text-gray-900 dark:text-gray-100 mb-1">
+                                {{ warehouse.name }}
+                            </p>
+                            <div class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                                <p>Código: <span class="font-mono font-semibold">{{ warehouse.code }}</span></p>
+                                <p>Estado: {{ warehouse.is_active ? 'Activo' : 'Inactivo' }}</p>
+                                <p v-if="warehouse.is_main" class="font-semibold text-amber-600 dark:text-amber-400">
+                                    Almacén principal
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex items-start gap-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+                    <GoogleIcon name="info" class="text-red-600 dark:text-red-400 text-xl flex-shrink-0 mt-0.5" />
+                    <p class="text-sm text-red-800 dark:text-red-300 font-medium">
+                        Esta acción es permanente y no se puede deshacer. No se puede eliminar un almacén que tenga stock.
+                    </p>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
+                <button
+                    type="button"
+                    @click="handleClose"
+                    class="px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors"
+                >
+                    Cancelar
+                </button>
+                <button
+                    type="button"
+                    @click="handleConfirm"
+                    class="flex items-center gap-2 px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 shadow-lg shadow-red-600/30 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-600"
+                >
+                    <GoogleIcon name="delete" class="text-xl" />
+                    Eliminar Almacén
+                </button>
+            </div>
+        </div>
+    </Modal>
+</template>
diff --git a/src/pages/POS/Warehouses/Edit.vue b/src/pages/POS/Warehouses/Edit.vue
new file mode 100644
index 0000000..8bb5bf2
--- /dev/null
+++ b/src/pages/POS/Warehouses/Edit.vue
@@ -0,0 +1,155 @@
+<script setup>
+import { watch } from 'vue';
+import { useForm, apiURL } from '@Services/Api';
+
+import Modal from '@Holos/Modal.vue';
+import FormInput from '@Holos/Form/Input.vue';
+import FormError from '@Holos/Form/Elements/Error.vue';
+
+/** Eventos */
+const emit = defineEmits(['close', 'updated']);
+
+/** Propiedades */
+const props = defineProps({
+    show: Boolean,
+    warehouse: Object
+});
+
+/** Formulario */
+const form = useForm({
+    code: '',
+    name: '',
+    is_active: true,
+    is_main: false,
+});
+
+/** Métodos */
+const updateWarehouse = () => {
+    form.put(apiURL(`almacenes/${props.warehouse.id}`), {
+        onSuccess: () => {
+            window.Notify.success('Almacén actualizado exitosamente');
+            emit('updated');
+            closeModal();
+        },
+        onError: () => {
+            window.Notify.error('Error al actualizar el almacén');
+        }
+    });
+};
+
+const closeModal = () => {
+    form.reset();
+    emit('close');
+};
+
+/** Observadores */
+watch(() => props.warehouse, (newWarehouse) => {
+    if (newWarehouse) {
+        form.code = newWarehouse.code || '';
+        form.name = newWarehouse.name || '';
+        form.is_active = newWarehouse.is_active ?? true;
+        form.is_main = newWarehouse.is_main ?? false;
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <Modal :show="show" max-width="md" @close="closeModal">
+        <div class="p-6">
+            <!-- Header -->
+            <div class="flex items-center justify-between mb-6">
+                <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">
+                    Editar Almacén
+                </h3>
+                <button
+                    @click="closeModal"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                >
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Formulario -->
+            <form @submit.prevent="updateWarehouse" class="space-y-4">
+                <div class="grid grid-cols-2 gap-4">
+                    <!-- Código -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            CÓDIGO
+                        </label>
+                        <FormInput
+                            v-model="form.code"
+                            type="text"
+                            placeholder="Ej: TIENDA-01"
+                        />
+                        <FormError :message="form.errors?.code" />
+                    </div>
+
+                    <!-- Nombre -->
+                    <div>
+                        <label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
+                            NOMBRE
+                        </label>
+                        <FormInput
+                            v-model="form.name"
+                            type="text"
+                            placeholder="Nombre del almacén"
+                        />
+                        <FormError :message="form.errors?.name" />
+                    </div>
+
+                    <!-- Almacén Principal -->
+                    <div class="col-span-2">
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input
+                                v-model="form.is_main"
+                                type="checkbox"
+                                class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                            />
+                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                                Almacén principal
+                            </span>
+                        </label>
+                        <FormError :message="form.errors?.is_main" />
+                    </div>
+
+                    <!-- Estado -->
+                    <div class="col-span-2">
+                        <label class="flex items-center gap-2 cursor-pointer">
+                            <input
+                                v-model="form.is_active"
+                                type="checkbox"
+                                class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                            />
+                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                                Almacén activo
+                            </span>
+                        </label>
+                        <FormError :message="form.errors?.is_active" />
+                    </div>
+                </div>
+
+                <!-- Botones -->
+                <div class="flex items-center justify-end gap-3 mt-6">
+                    <button
+                        type="button"
+                        @click="closeModal"
+                        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
+                    >
+                        Cancelar
+                    </button>
+                    <button
+                        type="submit"
+                        :disabled="form.processing"
+                        class="px-4 py-2 text-sm font-semibold text-white bg-gray-900 rounded-lg hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                        <span v-if="form.processing">Actualizando...</span>
+                        <span v-else>Actualizar</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </Modal>
+</template>
diff --git a/src/pages/POS/Warehouses/Index.vue b/src/pages/POS/Warehouses/Index.vue
new file mode 100644
index 0000000..35695f5
--- /dev/null
+++ b/src/pages/POS/Warehouses/Index.vue
@@ -0,0 +1,211 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { api, useSearcher, apiURL } from '@Services/Api';
+import { can } from './Module.js';
+
+import SearcherHead from '@Holos/Searcher.vue';
+import Table from '@Holos/Table.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import CreateModal from './Create.vue';
+import EditModal from './Edit.vue';
+import DeleteModal from './Delete.vue';
+
+/** Estado */
+const warehouses = ref([]);
+const showCreateModal = ref(false);
+const showEditModal = ref(false);
+const showDeleteModal = ref(false);
+const editingWarehouse = ref(null);
+const deletingWarehouse = ref(null);
+
+/** Métodos */
+const searcher = useSearcher({
+    url: apiURL('almacenes'),
+    onSuccess: (r) => {
+        warehouses.value = r.data || r.warehouses || r;
+    },
+    onError: () => warehouses.value = []
+});
+
+const confirmDelete = (id) => {
+    api.delete(apiURL(`almacenes/${id}`), {
+        onSuccess: () => {
+            window.Notify.success('Almacén eliminado exitosamente');
+            closeDeleteModal();
+            searcher.search();
+        },
+        onFail: (data) => {
+            window.Notify.error(data.message || 'No se puede eliminar el almacén porque tiene stock');
+        },
+        onError: () => {
+            window.Notify.error('Error de conexión al eliminar el almacén');
+        }
+    });
+};
+
+const openCreateModal = () => {
+    showCreateModal.value = true;
+};
+
+const closeCreateModal = () => {
+    showCreateModal.value = false;
+};
+
+const openEditModal = (warehouse) => {
+    editingWarehouse.value = warehouse;
+    showEditModal.value = true;
+};
+
+const closeEditModal = () => {
+    showEditModal.value = false;
+    editingWarehouse.value = null;
+};
+
+const openDeleteModal = (warehouse) => {
+    deletingWarehouse.value = warehouse;
+    showDeleteModal.value = true;
+};
+
+const closeDeleteModal = () => {
+    showDeleteModal.value = false;
+    deletingWarehouse.value = null;
+};
+
+const onWarehouseSaved = () => {
+    searcher.search();
+};
+
+/** Ciclo de vida */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <div>
+        <SearcherHead
+            :title="$t('warehouses.title')"
+            placeholder="Buscar por nombre o código..."
+            @search="(x) => searcher.search(x)"
+        >
+            <button
+                v-if="can('create')"
+                class="flex items-center gap-2 px-3 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
+                @click="openCreateModal"
+            >
+                <GoogleIcon name="add" class="text-xl" />
+                Nuevo Almacén
+            </button>
+        </SearcherHead>
+        <div class="pt-2 w-full">
+
+            <Table
+                :items="warehouses"
+                @send-pagination="(page) => searcher.pagination(page)"
+            >
+                <template #head>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">CÓDIGO</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">NOMBRE</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">PRINCIPAL</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">ESTADO</th>
+                    <th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">ACCIONES</th>
+                </template>
+                <template #body="{items}">
+                    <tr
+                        v-for="warehouse in items"
+                        :key="warehouse.id"
+                        class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                    >
+                        <td class="px-6 py-4 text-center">
+                            <p class="text-sm font-mono font-semibold text-gray-900 dark:text-gray-100">{{ warehouse.code }}</p>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ warehouse.name }}</p>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <span
+                                v-if="warehouse.is_main"
+                                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"
+                            >
+                                <GoogleIcon name="star" class="text-sm mr-1" />
+                                Principal
+                            </span>
+                            <span v-else class="text-sm text-gray-400 dark:text-gray-500">—</span>
+                        </td>
+                        <td class="px-6 py-4 text-center">
+                            <span
+                                :class="[
+                                    'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium',
+                                    warehouse.is_active
+                                        ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                                        : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+                                ]"
+                            >
+                                {{ warehouse.is_active ? 'Activo' : 'Inactivo' }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-center">
+                            <div class="flex items-center justify-center gap-2">
+                                <button
+                                    v-if="can('edit')"
+                                    @click.stop="openEditModal(warehouse)"
+                                    class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
+                                    title="Editar almacén"
+                                >
+                                    <GoogleIcon name="edit" class="text-xl" />
+                                </button>
+                                <button
+                                    v-if="can('destroy')"
+                                    @click.stop="openDeleteModal(warehouse)"
+                                    class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 transition-colors"
+                                    title="Eliminar almacén"
+                                >
+                                    <GoogleIcon name="delete" class="text-xl" />
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+                <template #empty>
+                    <td colspan="5" class="table-cell text-center">
+                        <div class="flex flex-col items-center justify-center py-8 text-gray-500">
+                            <GoogleIcon
+                                name="warehouse"
+                                class="text-6xl mb-2 opacity-50"
+                            />
+                            <p class="font-semibold">
+                                {{ $t('registers.empty') }}
+                            </p>
+                        </div>
+                    </td>
+                </template>
+            </Table>
+        </div>
+
+        <!-- Modal de Crear Almacén -->
+        <CreateModal
+            v-if="can('create')"
+            :show="showCreateModal"
+            @close="closeCreateModal"
+            @created="onWarehouseSaved"
+        />
+
+        <!-- Modal de Editar Almacén -->
+        <EditModal
+            v-if="can('edit')"
+            :show="showEditModal"
+            :warehouse="editingWarehouse"
+            @close="closeEditModal"
+            @updated="onWarehouseSaved"
+        />
+
+        <!-- Modal de Eliminar Almacén -->
+        <DeleteModal
+            v-if="can('destroy')"
+            :show="showDeleteModal"
+            :warehouse="deletingWarehouse"
+            @close="closeDeleteModal"
+            @confirm="confirmDelete"
+        />
+    </div>
+</template>
diff --git a/src/pages/POS/Warehouses/Module.js b/src/pages/POS/Warehouses/Module.js
new file mode 100644
index 0000000..1b1b5a5
--- /dev/null
+++ b/src/pages/POS/Warehouses/Module.js
@@ -0,0 +1,16 @@
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`warehouses.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => ({ name: `pos.warehouses.${name}`, params, query })
+
+// Determina si un usuario puede hacer algo en base a los permisos
+const can = (permission) => hasPermission(`warehouses.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo
+}
diff --git a/src/router/Index.js b/src/router/Index.js
index 746c61a..45b1fa9 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -95,6 +95,18 @@ const router = createRouter({
                             beforeEnter: (to, from, next) => can(next, 'client-tiers.index'),
                             component: () => import('@Pages/POS/Tiers/Index.vue')
                         },
+                        {
+                            path: 'warehouses',
+                            name: 'pos.warehouses.index',
+                            beforeEnter: (to, from, next) => can(next, 'warehouses.index'),
+                            component: () => import('@Pages/POS/Warehouses/Index.vue')
+                        },
+                        {
+                            path: 'movements',
+                            name: 'pos.movements.index',
+                            beforeEnter: (to, from, next) => can(next, 'movements.index'),
+                            component: () => import('@Pages/POS/Movements/Index.vue')
+                        },
                         {
                             path: 'billing-requests',
                             name: 'pos.billingRequests.index',