add: implementar filtros de fecha para reportes de productos más vendidos y sin movimiento
This commit is contained in:
Juan Felipe Zapata Moreno
parent
0c98dc0bb1
commit
62cf6afc42
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { ref, onMounted, computed, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import reportService from '@Services/reportService';
|
||||
import useCashRegister from '@Stores/cashRegister';
|
||||
@ -13,7 +13,13 @@ const topProduct = ref(null);
|
||||
const stagnantProducts = ref([]);
|
||||
const loadingTopProduct = ref(true);
|
||||
const loadingStagnantProducts = ref(true);
|
||||
const daysThreshold = ref(30);
|
||||
const today = new Date();
|
||||
const daysThreshold = new Date();
|
||||
daysThreshold.setDate(today.getDate() - 30);
|
||||
const filters = ref({
|
||||
from_date: daysThreshold.toISOString().split('T')[0],
|
||||
to_date: today.toISOString().split('T')[0],
|
||||
});
|
||||
|
||||
// Methods
|
||||
const cashRegisterStore = useCashRegister();
|
||||
@ -25,7 +31,10 @@ const isCashRegisterOpen = computed(() => cashRegisterStore.hasOpenRegister);
|
||||
const fetchTopProduct = async () => {
|
||||
loadingTopProduct.value = true;
|
||||
try {
|
||||
const data = await reportService.getTopSellingProduct();
|
||||
const data = await reportService.getTopSellingProduct(
|
||||
filters.value.from_date,
|
||||
filters.value.to_date
|
||||
);
|
||||
topProduct.value = data.product;
|
||||
} catch (error) {
|
||||
window.Notify.error('Error al cargar el producto más vendido.');
|
||||
@ -35,9 +44,18 @@ const fetchTopProduct = async () => {
|
||||
};
|
||||
|
||||
const fetchStagnantProducts = async () => {
|
||||
if (!filters.value.from_date || !filters.value.to_date) {
|
||||
window.Notify.warning('Por favor selecciona ambas fechas para consultar el reporte.');
|
||||
return;
|
||||
}
|
||||
|
||||
loadingStagnantProducts.value = true;
|
||||
try {
|
||||
const data = await reportService.getProductsWithoutMovement(daysThreshold.value);
|
||||
const data = await reportService.getProductsWithoutMovement(
|
||||
filters.value.from_date,
|
||||
filters.value.to_date,
|
||||
true
|
||||
);
|
||||
stagnantProducts.value = data.products;
|
||||
} catch (error) {
|
||||
window.Notify.error('Error al cargar productos sin movimiento.');
|
||||
@ -66,6 +84,12 @@ const handleOpenCashRegister = async (initialCash) => {
|
||||
}
|
||||
};
|
||||
|
||||
watch(filters, () => {
|
||||
fetchTopProduct();
|
||||
fetchStagnantProducts();
|
||||
}, { deep: true });
|
||||
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
fetchTopProduct();
|
||||
@ -97,7 +121,7 @@ onMounted(() => {
|
||||
<GoogleIcon name="star" class="text-2xl text-yellow-500" />
|
||||
Producto Estrella
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">El producto más vendido de todo el histórico.</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">El producto más vendido.</p>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
@ -142,7 +166,23 @@ onMounted(() => {
|
||||
<GoogleIcon name="inventory_2" class="text-2xl text-orange-500" />
|
||||
Inventario sin Rotación
|
||||
</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Productos que no se han vendido en los últimos {{ daysThreshold }} días.</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Productos sin movimiento en el rango de fechas seleccionado.</p>
|
||||
<div class="pt-2 space-x-4 flex items-center">
|
||||
<label class="text-sm font-medium text-gray-700">Fecha de inicio:</label>
|
||||
<input
|
||||
type="date"
|
||||
v-model="filters.from_date"
|
||||
@change="fetchStagnantProducts()"
|
||||
class="px-2 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
<label class="text-sm font-medium text-gray-700">Fecha de fin:</label>
|
||||
<input
|
||||
type="date"
|
||||
v-model="filters.to_date"
|
||||
@change="fetchStagnantProducts()"
|
||||
class="px-2 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
@ -165,7 +205,6 @@ onMounted(() => {
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Producto</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Stock</th>
|
||||
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Días sin Venta</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Valor Inventario</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@ -180,11 +219,6 @@ onMounted(() => {
|
||||
{{ product.stock }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-center">
|
||||
<span class="text-sm font-semibold text-red-600 dark:text-red-400">
|
||||
{{ product.days_without_movement }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||
{{ formatCurrency(product.inventory_value) }}
|
||||
|
||||
@ -19,7 +19,7 @@ const reportService = {
|
||||
resolve(response);
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Error fetching top selling product:', error);
|
||||
console.error('Error al cargar el producto más vendido:', error);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
@ -28,25 +28,25 @@ const reportService = {
|
||||
|
||||
/**
|
||||
* Fetches products without movement.
|
||||
* @param {number} daysThreshold - The threshold in days.
|
||||
* @param {boolean} includeStockValue - Flag to include the inventory value in the response.
|
||||
* @returns {Promise<Object>}
|
||||
*/
|
||||
async getProductsWithoutMovement(daysThreshold = 30, includeStockValue = true) {
|
||||
async getProductsWithoutMovement(fromDate = null, toDate = null, includeStockValue = true) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const params = {
|
||||
days_threshold: daysThreshold,
|
||||
// Convert boolean to 1 or 0 for Laravel validation
|
||||
include_stock_value: includeStockValue ? 1 : 0
|
||||
};
|
||||
|
||||
if(fromDate) params.from_date = fromDate;
|
||||
if(toDate) params.to_date = toDate;
|
||||
|
||||
api.get(apiURL('reports/products-without-movement'), {
|
||||
params,
|
||||
onSuccess: (response) => {
|
||||
resolve(response);
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Error fetching products without movement:', error);
|
||||
console.error('Error al cargar los productos sin movimiento:', error);
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
|
||||
@ -10,21 +10,11 @@ const ticketService = {
|
||||
* Detectar ubicación del usuario (ciudad y estado)
|
||||
*/
|
||||
async getUserLocation() {
|
||||
try {
|
||||
const response = await fetch('https://ipapi.co/json/');
|
||||
const data = await response.json();
|
||||
return {
|
||||
city: data.city || 'Ciudad de México',
|
||||
state: data.region || 'CDMX',
|
||||
country: data.country_name || 'México'
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
city: 'Ciudad de México',
|
||||
state: 'CDMX',
|
||||
country: 'México'
|
||||
};
|
||||
}
|
||||
return {
|
||||
city: import.meta.env.VITE_BUSINESS_CITY || 'Villahermosa',
|
||||
state: import.meta.env.VITE_BUSINESS_STATE || 'Tabasco',
|
||||
country: import.meta.env.VITE_BUSINESS_COUNTRY || 'México'
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
@ -41,7 +31,7 @@ const ticketService = {
|
||||
// Detectar ubicación del usuario
|
||||
const location = await this.getUserLocation();
|
||||
const businessAddress = `${location.city}, ${location.state}`;
|
||||
const businessPhone = 'Tel: (55) 1234-5678';
|
||||
const businessPhone = 'Tel: (52) 0000-0000';
|
||||
|
||||
// Crear documento PDF - Ticket térmico 80mm de ancho
|
||||
const doc = new jsPDF({
|
||||
@ -211,7 +201,7 @@ const ticketService = {
|
||||
yPosition += 5;
|
||||
|
||||
// IVA
|
||||
doc.text('IVA (16%):', leftMargin, yPosition);
|
||||
doc.text('IVA:', leftMargin, yPosition);
|
||||
doc.text(`$${formatMoney(saleData.tax)}`, rightMargin, yPosition, { align: 'right' });
|
||||
yPosition += 6;
|
||||
|
||||
@ -226,7 +216,29 @@ const ticketService = {
|
||||
doc.setTextColor(...blackColor);
|
||||
doc.text('TOTAL:', leftMargin, yPosition);
|
||||
doc.text(`$${formatMoney(saleData.total)}`, rightMargin, yPosition, { align: 'right' });
|
||||
yPosition += 8;
|
||||
yPosition += 6;
|
||||
|
||||
// Si es pago en efectivo, mostrar monto pagado y cambio
|
||||
if (saleData.payment_method === 'cash' || saleData.payment_method === 'efectivo') {
|
||||
if (saleData.cash_received) {
|
||||
doc.setFontSize(9);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.setTextColor(...darkGrayColor);
|
||||
|
||||
doc.text('Pagó con:', leftMargin, yPosition);
|
||||
doc.text(`$${formatMoney(saleData.cash_received)}`, rightMargin, yPosition, { align: 'right' });
|
||||
yPosition += 5;
|
||||
|
||||
if (saleData.change && parseFloat(saleData.change) > 0) {
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.setTextColor(...blackColor);
|
||||
doc.text('Cambio:', leftMargin, yPosition);
|
||||
doc.text(`$${formatMoney(saleData.change)}`, rightMargin, yPosition, { align: 'right' });
|
||||
yPosition += 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
yPosition += 3;
|
||||
|
||||
// Línea decorativa doble
|
||||
doc.setLineWidth(0.3);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user