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 usandogetOrderById(id)
.handleOrderStatus(status)
→ cambia el estado del pedido víaupdateOrderStatus
.renderActionButton()
→ muestra el botón apropiado según rol y estado del pedido.formatDistance(meters)
→ convierte metros akm
om
.
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
: funcionesgetOrders
,getOrderById
,updateOrderStatus
OrderCard
,Button
(componentes)lucide-react
: íconosreact-router-dom
: navegación y parámetros (useNavigate
,useParams
)Leaflet
: renderizado del mapa de entrega