# Análisis y Mejoras — Ecommerce Mayorista ## 1. Análisis del Sistema Actual ### 1.1 Lo que YA existe y funciona | Componente | Estado | Ubicación | |---|---|---| | **Listas de Precios** | ✅ Completo | `lista-precios.service.ts` — prioridad, por cliente/zona/canal, precio_min/max, descuento/recargo %, cuotas | | **Motor de Ofertas** | ✅ Completo | `ofertas.service.ts` — tipos: descuento_%, descuento_monto, precio_especial. Aplica a: todos/producto/categoría/marca. Acumulable con lista precios. Evaluación en batch | | **Hook useOfertasCarrito** | ✅ Completo | `useOfertasCarrito.js` — evalúa ofertas con debounce, devuelve descuento por item | | **Control de Crédito** | ✅ Completo | `clientes.service.ts` — límite, saldo_pendiente, bloqueado_credito, verificarCredito(), getCreditInfo() | | **Cálculos SIFEN** | ✅ Completo | `invoiceCalculations.js` — IVA por item (NT13), subtotales, descuento por item (% y monto), afectación IVA, base gravada | | **Pedidos Backend** | ✅ Completo | `pedidos.service.ts` — CRUD, items con precio lista vs negociado, presentaciones, recálculo, historial, estados | | **Pedidos Frontend (v1)** | ⚠️ Básico | `PedidosMayoristas.jsx` — selector cliente, catálogo grid, carrito con edición inline | | **API Clientes** | ✅ Completo | `clientes.service.js` — search, getCreditInfo, verificarCredito | | **API Ofertas** | ✅ Completo | `ofertas.service.js` — getOfertasActivas, evaluarOfertas | ### 1.2 Brechas Detectadas | Brecha | Impacto | Prioridad | |---|---|---| | No se evalúan ofertas al agregar items al pedido | El vendedor no ve promociones activas durante negociación | **CRÍTICA** | | No hay descuento global (% o monto sobre total pedido) | Limita la negociación: solo descuento por item | **ALTA** | | No se muestra info del cliente (crédito, historial, condiciones) | El vendedor negocia a ciegas | **ALTA** | | No hay catálogo inteligente (frecuentes, más vendidos, destacados) | El vendedor busca todo manualmente | **ALTA** | | No hay vista de detalle del producto antes de agregar | El vendedor no ve toda la info disponible | **MEDIA** | | No se muestra moneda/cotización en la negociación | Dificulta ventas en USD/BRL | **MEDIA** | | No hay promociones por volumen (comprar N → descuento) | No incentiva compras grandes | **MEDIA** | | Los cálculos del pedido no usan `invoiceCalculations.js` | Inconsistencia con facturación SIFEN | **ALTA** | --- ## 2. Propuestas de Mejora ### 2.1 Backend — Endpoint de Contexto de Negociación **Nuevo endpoint**: `GET /pedidos/contexto-negociacion/:clienteId` Devuelve en una sola llamada todo lo que el vendedor necesita: - Info de crédito (límite, saldo disponible, % uso, bloqueado) - Productos frecuentes del cliente (top 20 por cantidad de compras) - Productos más vendidos de la empresa (top 20) - Últimas compras del cliente (últimos 5 pedidos) - Condiciones comerciales (lista de precios asignada, condición de pago, moneda) - Ofertas activas vigentes - Direcciones del cliente ### 2.2 Backend — Integrar Ofertas en Pedidos Al agregar un item al pedido, evaluar automáticamente ofertas activas y: - Calcular el mejor precio (lista vs oferta vs negociado) - Guardar `oferta_id` y `nombre_oferta` en el detalle - Mostrar al vendedor el origen del precio ### 2.3 Backend — Descuento Global en Pedidos Agregar campos al modelo `pedidos`: - `descuento_global_porcentaje` — % sobre subtotal - `descuento_global_monto` — monto fijo - Recalcular distribuyendo proporcionalmente por item (como hace facturación SIFEN: `ddescgloitem`) ### 2.4 Frontend — Panel de Info del Cliente (ClienteInfoPanel) Panel colapsable que muestra durante toda la negociación: - **Crédito**: barra visual de uso, saldo disponible, estado - **Condiciones**: lista de precios, condición de pago, moneda - **Historial**: últimas 5 compras con totales - **Direcciones**: para despacho ### 2.5 Frontend — Catálogo Inteligente (Enhanced CatalogPanel) Reemplazar búsqueda simple por catálogo con secciones: - **Frecuentes del cliente**: productos que más compra este cliente - **Más vendidos**: top productos de la empresa - **Búsqueda**: mantener la búsqueda actual - **Cards enriquecidas**: imagen, precio base, precio con descuento, % descuento, badge de oferta/promoción, stock ### 2.6 Frontend — Modal de Detalle de Producto Click en un producto abre modal con: - Imagen grande, todas las presentaciones con precios - Stock por depósito - Historial de precios del cliente - Ofertas aplicables - Botón claro "Agregar al pedido" con selector de cantidad y presentación ### 2.7 Frontend — CartPanel Mejorado - Descuento por item: tipo (% o monto) editable - Descuento global: campo en el footer del carrito - Badges de oferta en cada item que tiene oferta aplicada - Cálculos consistentes con SIFEN - Selector de moneda y condición de pago --- ## 3. Mejoras de UX | Mejora | Descripción | |---|---| | **Atajos de teclado** | F2: buscar producto, F4: confirmar, Esc: cancelar, +/-: ajustar cantidad | | **Arrastrar para reordenar** | Items del carrito reordenables | | **Indicadores visuales de negociación** | Barra que muestra margen restante (precio mínimo vs actual) | | **Auto-suggest cantidad** | Basado en compras anteriores del cliente para ese producto | | **Totales en tiempo real** | Con animación al cambiar valores | | **Modo oscuro optimizado** | Ya soportado por theme, verificar contraste de badges | --- ## 4. Mejoras Técnicas y de Arquitectura | Mejora | Descripción | |---|---| | **React Query para pedidos** | Reemplazar useState por useQuery/useMutation para cache y sincronización | | **Reutilizar invoiceCalculations.js** | Calcular IVA y descuentos con la misma lógica de facturación | | **Debounce en edición de precios** | Evitar llamadas excesivas al backend al editar | | **Optimistic updates** | Actualizar UI inmediatamente y revertir si falla | | **Lazy loading de secciones del catálogo** | Cargar frecuentes al inicio, más vendidos bajo demanda | | **WebSocket para stock real** | Actualizar stock en tiempo real durante negociación (futuro) | --- ## 5. Orden de Implementación 1. **Backend**: Endpoint contexto-negociación + descuento global en pedidos 2. **Frontend**: ClienteInfoPanel con datos reales 3. **Frontend**: CatalogPanel mejorado con secciones inteligentes y cards enriquecidas 4. **Frontend**: ProductDetailModal 5. **Frontend**: CartPanel mejorado con descuentos (item + global) y ofertas 6. **Frontend**: Polish (atajos, animaciones, responsive)