Skip to main content

​
Overview

The order management system allows customers to view their order history, track order status, and see detailed information about each order including items, pricing, and delivery status.
Orders are accessible at /pedidos for the list view and /pedido-detalle/{id} for individual order details.

​
Key Features

Order History

View all past and current orders in chronological order

Status Tracking

Real-time order status updates from receipt to delivery

Order Details

Detailed breakdown of items, quantities, and pricing

Status Timeline

Visual timeline showing order progress through fulfillment stages

​
Route Configuration

​
Order List Route

The order list is defined in routes/web.php:25-27: 
Route::get('/pedidos', function () {
    return view('pedidos.pedido');
})->name('pedidos');

​
Order Detail Route

Individual order details accept an order ID parameter (routes/web.php:29-31): 
Route::get('/pedido-detalle/{id}', function ($id) {
    return view('pedidos.pedido-detalle', ['id' => $id]);
})->name('pedido-detalle');

​
Order List View

The order list page displays all customer orders at resources/views/pedidos/pedido.blade.php:1-2: 
@extends('layouts.app')
@section('content')
<div class="orders-page">
    <!-- Orders content -->
</div>
@endsection

​
Page Header

The orders page includes navigation and branding (resources/views/pedidos/pedido.blade.php:29-32): 
<div class="page-header">
    <h1 class="page-title">Historial de Pedidos</h1>
    <p class="page-subtitle">Consulta el estado de tus pedidos</p>
</div>

​
Order Status Types

Orders can have one of the following statuses:

Enviado

Order has been shipped and is in transit

Surtido

Order has been fulfilled and prepared for shipping

Entregado

Order has been successfully delivered to the customer

Cancelado

Order has been cancelled and will not be fulfilled

​
Order Card Layout

Each order is displayed as a clickable card (resources/views/pedidos/pedido.blade.php:37-50): 
<a href="{{ route('pedido-detalle', ['id' => 'ORD-2026-001']) }}" class="order-card">
    <div class="order-icon">
        <i class="fas fa-cube"></i>
    </div>
    <div class="order-info">
        <h3 class="order-number">ORD-2026-001</h3>
        <p class="order-date">27 de enero de 2026 • 3 artículos</p>
    </div>
    <div class="order-right">
        <span class="order-price">$1,705</span>
        <span class="order-status status-enviado">Enviado</span>
    </div>
    <i class="fas fa-chevron-right order-arrow"></i>
</a>
Clicking on any order card navigates to the detailed view for that specific order.

​
Example Order List

The order history displays multiple orders with varying statuses:
Order NumberDateItemsTotalStatus
ORD-2026-00127 de enero de 20263$1,705Enviado
ORD-2026-00224 de enero de 20262$2,340Surtido
ORD-2026-00310 de enero de 20261$89Entregado
ORD-2026-00414 de enero de 20264$3,200Cancelado
ORD-2026-0058 de enero de 20262$1,450Entregado

​
Order Detail View

The detailed order view is located at resources/views/pedidos/pedido-detalle.blade.php and provides comprehensive information about a single order.

​
Order Header

The detail page header displays the order number and download option (resources/views/pedidos/pedido-detalle.blade.php:30-39): 
<div class="order-detail-header">
    <div class="order-title-section">
        <span class="order-label">Pedido</span>
        <h1 class="order-title">ORD-2026-001</h1>
        <span class="order-year">2026</span>
    </div>
    <button class="btn-download">
        <i class="fas fa-download"></i> Descargar
    </button>
</div>

​
Status Timeline

Orders include a visual timeline showing progress through fulfillment stages (resources/views/pedidos/pedido-detalle.blade.php:42-73): 
<div class="order-status-card">
    <h3 class="card-title">Estado del Pedido</h3>
    <div class="status-timeline">
        <div class="timeline-step completed">
            <div class="step-icon">
                <i class="fas fa-check"></i>
            </div>
            <span class="step-label">Recibido</span>
        </div>
        <div class="timeline-line completed"></div>
        <div class="timeline-step completed">
            <div class="step-icon">
                <i class="fas fa-check"></i>
            </div>
            <span class="step-label">Surtido</span>
        </div>
        <div class="timeline-line completed"></div>
        <div class="timeline-step completed">
            <div class="step-icon">
                <i class="fas fa-check"></i>
            </div>
            <span class="step-label">Enviado</span>
        </div>
        <div class="timeline-line pending"></div>
        <div class="timeline-step pending">
            <div class="step-icon">
                <span>4</span>
            </div>
            <span class="step-label">Entregado</span>
        </div>
    </div>
</div>

​
Timeline Stages

The order fulfillment timeline includes four stages:
  1. Recibido - Order received and confirmed
  2. Surtido - Order fulfilled and items prepared
  3. Enviado - Order shipped and in transit
  4. Entregado - Order delivered to customer
Completed stages display a checkmark icon, while pending stages show a numbered indicator.

​
Order Items List

The detail view lists all items in the order (resources/views/pedidos/pedido-detalle.blade.php:76-121): 
<div class="order-items-card">
    <h3 class="card-title">Artículos del Pedido</h3>
    <div class="order-items-list">
        <div class="order-item">
            <div class="item-icon">
                <i class="fas fa-cube"></i>
            </div>
            <div class="item-details">
                <h4 class="item-name">Filtro de Aceite</h4>
                <p class="item-quantity">Cantidad: 2</p>
            </div>
            <div class="item-price-section">
                <span class="item-total">$30</span>
                <span class="item-unit">$15 c/u</span>
            </div>
        </div>
    </div>
</div>

​
Example Order Details

For order ORD-2026-001, the items include:
ItemQuantityUnit PriceTotal
Filtro de Aceite2$15$30
Pastillas de Freno1$89$89
Filtro de Aire1$28$28

​
Order Summary

The detail view includes a complete financial summary (resources/views/pedidos/pedido-detalle.blade.php:124-143): 
<div class="order-summary-card">
    <h3 class="card-title">Resumen del Pedido</h3>
    <div class="summary-rows">
        <div class="summary-row">
            <span class="summary-label">Subtotal</span>
            <span class="summary-value">$1,470</span>
        </div>
        <div class="summary-row">
            <span class="summary-label">IVA (16%)</span>
            <span class="summary-value">$235.20</span>
        </div>
        <div class="summary-row total">
            <span class="summary-label">Total</span>
            <span class="summary-value total-price">$1,705.20</span>
        </div>
    </div>
    <div class="shipping-address">
        <h4 class="address-title">Dirección de Envío</h4>
        <p class="address-text">Av. Principal #123, Col. Centro, Ciudad de México, CP 06000</p>
    </div>
</div>

​
Shipping Information

Each order displays the shipping address for delivery: 
<div class="shipping-address">
    <h4 class="address-title">Dirección de Envío</h4>
    <p class="address-text">Av. Principal #123, Col. Centro, Ciudad de México, CP 06000</p>
</div>
The shipping address is displayed at the bottom of the order summary card for easy reference.

​
User Journey

​
Viewing Order History

  1. Customer clicks “Mis Pedidos” in the header navigation
  2. Navigate to /pedidos to see the complete order list
  3. View order numbers, dates, item counts, totals, and status at a glance
  4. Orders are sorted with most recent at the top

​
Viewing Order Details

  1. Click on any order card from the order list
  2. Navigate to /pedido-detalle/{id} with the specific order ID
  3. View the order status timeline to track fulfillment progress
  4. Review all items in the order with quantities and pricing
  5. See the complete order summary including tax and total
  6. View the shipping address for delivery
  7. Download order documentation using the download button
The order views include contextual navigation:
  • Order List - “Volver al Catálogo” link returns to /catalogo
  • Order Detail - “Volver a Pedidos” link returns to /pedidos
The order detail view provides a download button to export order information, though the backend implementation would need to be added.

Build docs developers (and LLMs) love

Get started for freeTalk to us