add: implementar filtros de fecha para reportes de productos más vendidos y sin movimiento

src/pages/Dashboard/Index.vue

@@ -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) }}

src/services/reportService.js

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

src/services/ticketService.js

@@ -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',
+            city: import.meta.env.VITE_BUSINESS_CITY || 'Villahermosa',
-                state: data.region || 'CDMX',
+            state: import.meta.env.VITE_BUSINESS_STATE || 'Tabasco',
-                country: data.country_name || 'México'
+            country: import.meta.env.VITE_BUSINESS_COUNTRY || 'México'
         };
-        } catch (error) {
-            return {
-                city: 'Ciudad de México',
-                state: 'CDMX',
-                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);