feat: agregar componentes de gestión de almacenes y movimientos
- 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.
This commit is contained in:
parent
7c27200290
commit
2c7d2f2001
@ -461,7 +461,9 @@ export default {
|
|||||||
returns: 'Devoluciones',
|
returns: 'Devoluciones',
|
||||||
clients: 'Clientes',
|
clients: 'Clientes',
|
||||||
clientTiers: 'Niveles de Clientes',
|
clientTiers: 'Niveles de Clientes',
|
||||||
billingRequests: 'Solicitudes de Facturación'
|
billingRequests: 'Solicitudes de Facturación',
|
||||||
|
warehouses: 'Almacenes',
|
||||||
|
movements: 'Movimientos'
|
||||||
},
|
},
|
||||||
cashRegister: {
|
cashRegister: {
|
||||||
title: 'Caja Registradora',
|
title: 'Caja Registradora',
|
||||||
@ -571,5 +573,13 @@ export default {
|
|||||||
clientTiers: {
|
clientTiers: {
|
||||||
title: 'Niveles de Clientes',
|
title: 'Niveles de Clientes',
|
||||||
description: 'Gestión de 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',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -47,6 +47,18 @@ onMounted(() => {
|
|||||||
name="pos.inventory"
|
name="pos.inventory"
|
||||||
to="pos.inventory.index"
|
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
|
<Link
|
||||||
icon="point_of_sale"
|
icon="point_of_sale"
|
||||||
name="pos.cashRegister"
|
name="pos.cashRegister"
|
||||||
|
|||||||
@ -23,7 +23,6 @@ const form = useForm({
|
|||||||
sku: '',
|
sku: '',
|
||||||
barcode: '',
|
barcode: '',
|
||||||
category_id: '',
|
category_id: '',
|
||||||
stock: 0,
|
|
||||||
cost: 0,
|
cost: 0,
|
||||||
retail_price: 0,
|
retail_price: 0,
|
||||||
tax: 16
|
tax: 16
|
||||||
@ -158,21 +157,6 @@ watch(() => props.show, (newValue) => {
|
|||||||
<FormError :message="form.errors?.category_id" />
|
<FormError :message="form.errors?.category_id" />
|
||||||
</div>
|
</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 -->
|
<!-- Costo -->
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||||
|
|||||||
@ -28,7 +28,6 @@ const form = useForm({
|
|||||||
sku: '',
|
sku: '',
|
||||||
barcode: '',
|
barcode: '',
|
||||||
category_id: '',
|
category_id: '',
|
||||||
stock: 0,
|
|
||||||
cost: 0,
|
cost: 0,
|
||||||
retail_price: 0,
|
retail_price: 0,
|
||||||
tax: 16
|
tax: 16
|
||||||
@ -82,7 +81,6 @@ watch(() => props.product, (newProduct) => {
|
|||||||
form.sku = newProduct.sku || '';
|
form.sku = newProduct.sku || '';
|
||||||
form.barcode = newProduct.barcode || '';
|
form.barcode = newProduct.barcode || '';
|
||||||
form.category_id = newProduct.category_id || '';
|
form.category_id = newProduct.category_id || '';
|
||||||
form.stock = newProduct.stock || 0;
|
|
||||||
form.cost = parseFloat(newProduct.price?.cost || 0);
|
form.cost = parseFloat(newProduct.price?.cost || 0);
|
||||||
form.retail_price = parseFloat(newProduct.price?.retail_price || 0);
|
form.retail_price = parseFloat(newProduct.price?.retail_price || 0);
|
||||||
form.tax = parseFloat(newProduct.price?.tax || 16);
|
form.tax = parseFloat(newProduct.price?.tax || 16);
|
||||||
@ -181,21 +179,6 @@ watch(() => props.show, (newValue) => {
|
|||||||
<FormError :message="form.errors?.category_id" />
|
<FormError :message="form.errors?.category_id" />
|
||||||
</div>
|
</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 -->
|
<!-- Costo -->
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
<label class="block text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase mb-1.5">
|
||||||
|
|||||||
184
src/pages/POS/Movements/DetailModal.vue
Normal file
184
src/pages/POS/Movements/DetailModal.vue
Normal file
@ -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>
|
||||||
207
src/pages/POS/Movements/EntryModal.vue
Normal file
207
src/pages/POS/Movements/EntryModal.vue
Normal file
@ -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>
|
||||||
193
src/pages/POS/Movements/ExitModal.vue
Normal file
193
src/pages/POS/Movements/ExitModal.vue
Normal file
@ -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>
|
||||||
304
src/pages/POS/Movements/Index.vue
Normal file
304
src/pages/POS/Movements/Index.vue
Normal file
@ -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>
|
||||||
16
src/pages/POS/Movements/Module.js
Normal file
16
src/pages/POS/Movements/Module.js
Normal file
@ -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
|
||||||
|
}
|
||||||
223
src/pages/POS/Movements/TransferModal.vue
Normal file
223
src/pages/POS/Movements/TransferModal.vue
Normal file
@ -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>
|
||||||
144
src/pages/POS/Warehouses/Create.vue
Normal file
144
src/pages/POS/Warehouses/Create.vue
Normal file
@ -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>
|
||||||
104
src/pages/POS/Warehouses/Delete.vue
Normal file
104
src/pages/POS/Warehouses/Delete.vue
Normal file
@ -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>
|
||||||
155
src/pages/POS/Warehouses/Edit.vue
Normal file
155
src/pages/POS/Warehouses/Edit.vue
Normal file
@ -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>
|
||||||
211
src/pages/POS/Warehouses/Index.vue
Normal file
211
src/pages/POS/Warehouses/Index.vue
Normal file
@ -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>
|
||||||
16
src/pages/POS/Warehouses/Module.js
Normal file
16
src/pages/POS/Warehouses/Module.js
Normal file
@ -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
|
||||||
|
}
|
||||||
@ -95,6 +95,18 @@ const router = createRouter({
|
|||||||
beforeEnter: (to, from, next) => can(next, 'client-tiers.index'),
|
beforeEnter: (to, from, next) => can(next, 'client-tiers.index'),
|
||||||
component: () => import('@Pages/POS/Tiers/Index.vue')
|
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',
|
path: 'billing-requests',
|
||||||
name: 'pos.billingRequests.index',
|
name: 'pos.billingRequests.index',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user