Saltar a contenido

Documentación de Órdenes (Orders)

Este módulo contiene dos componentes principales para la gestión de órdenes de la aplicación: vista general de órdenes y detalle de cada orden.

order.jsx - Vista de Órdenes

Descripción

Renderiza la página principal donde el usuario puede ver todas sus órdenes, separadas en actuales y pasadas. Utiliza pestañas (tabs) y componentes OrderCard para representar cada orden.

Estado y lógica

Variable Tipo Descripción
activeTab string Determina qué pestaña está activa (current / past)
orders array Arreglo de órdenes obtenidas de la API
currentOrders, pastOrders array Separación de órdenes según estado (pending, delivered, etc.)

Comportamiento

  • Usa getOrders() para obtener todas las órdenes del usuario.
  • Se separan automáticamente en dos listas: activas y pasadas.
  • Usa OrderCard para mostrar cada una.
  • Permite cambiar entre pestañas.
  • Muestra contadores de cada tipo de orden.

OrderDetail.jsx - Detalle de una Orden

Descripción

Muestra el detalle completo de una orden seleccionada, incluyendo:

  • Datos del pedido (ETA, estado, productos, etc.)
  • Información del comprador y vendedor
  • Mapa con ruta de entrega (via Leaflet)
  • Primeros pasos de la ruta (para vendedores)
  • Botón de acción para cambiar estado (cancelar, entregar, etc.)

Hooks y Estado

Variable Tipo Descripción
orderData object Datos completos de la orden
mapRef ref Referencia al contenedor del mapa Leaflet
mapLoaded boolean Indica si Leaflet fue cargado
isSeller boolean Determina si el usuario es vendedor
loading boolean Cargando la orden

Funciones clave

  • fetchOrder() → carga la orden usando getOrderById(id).
  • handleOrderStatus(status) → cambia el estado del pedido vía updateOrderStatus.
  • renderActionButton() → muestra el botón apropiado según rol y estado del pedido.
  • formatDistance(meters) → convierte metros a km o m.

Mapa de ruta

  • Carga Leaflet dinámicamente (CSS + JS).
  • Dibuja la ruta con polyline de OpenStreetMap.
  • Muestra marcador de origen (vendedor) y destino (comprador).
  • Solo visible si la orden tiene ruta.

Componentes visuales

  • Estado y ETA: tarjetas con íconos y color temático.
  • Ruta: mapa de Leaflet con marcadores.
  • Productos: lista de productos con nombre, ID y precio.
  • Resumen: sección con datos del pedido y pasos de entrega.

Ejemplo de flujo de estado

  • pending → (comprador) puede cancelar, (vendedor) puede enviar.
  • in_progress → (comprador) puede marcar como entregado.
  • completed / cancelled → botón deshabilitado.

Dependencias Comunes

  • OrderService: funciones getOrders, getOrderById, updateOrderStatus
  • OrderCard, Button (componentes)
  • lucide-react: íconos
  • react-router-dom: navegación y parámetros (useNavigate, useParams)
  • Leaflet: renderizado del mapa de entrega