saufen/templates/orders/index.twig

{% extends 'layout.twig' %}

{% block title %}Orders - {{ parent() }}{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col">
            <h2>Orders</h2>
        </div>
        <div class="col-auto">
            <div class="btn-group" role="group">
                <a href="/orders/create" class="btn btn-success">
                    <i class="fas fa-plus"></i> Create Order
                </a>
                <a href="/orders/create-from-stock" class="btn btn-primary">
                    <i class="fas fa-magic"></i> Create from Stock Levels
                </a>
            </div>
        </div>
    </div>

    {% if orders is empty %}
        <div class="alert alert-info">
            No orders found. Click one of the buttons above to create your first order.
        </div>
    {% else %}
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col">
                        <h5 class="card-title mb-0">Order List</h5>
                    </div>
                    <div class="col-auto">
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="filterDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                Filter
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="filterDropdown">
                                <li><a class="dropdown-item" href="/orders">All Orders</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><h6 class="dropdown-header">By Status</h6></li>
                                <li><a class="dropdown-item" href="/orders?status=pending">Pending</a></li>
                                <li><a class="dropdown-item" href="/orders?status=completed">Completed</a></li>
                                <li><a class="dropdown-item" href="/orders?status=cancelled">Cancelled</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Date</th>
                                <th>Items</th>
                                <th>Total Quantity</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in orders %}
                                <tr>
                                    <td>{{ order.id }}</td>
                                    <td>{{ order.createdAt|date('Y-m-d H:i:s') }}</td>
                                    <td>{{ order.orderItems|length }}</td>
                                    <td>
                                        {% set totalQuantity = 0 %}
                                        {% for item in order.orderItems %}
                                            {% set totalQuantity = totalQuantity + item.quantity %}
                                        {% endfor %}
                                        {{ totalQuantity }}
                                    </td>
                                    <td>
                                        {% if order.status == 'pending' %}
                                            <span class="badge bg-warning">Pending</span>
                                        {% elseif order.status == 'completed' %}
                                            <span class="badge bg-success">Completed</span>
                                        {% elseif order.status == 'cancelled' %}
                                            <span class="badge bg-danger">Cancelled</span>
                                        {% else %}
                                            <span class="badge bg-secondary">{{ order.status }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="/orders/{{ order.id }}" class="btn btn-outline-info">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            {% if order.status == 'pending' %}
                                                <form action="/orders/{{ order.id }}/status" method="post" class="d-inline">
                                                    <input type="hidden" name="status" value="completed">
                                                    <button type="submit" class="btn btn-outline-success" title="Mark as Completed">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                </form>
                                                <form action="/orders/{{ order.id }}/status" method="post" class="d-inline">
                                                    <input type="hidden" name="status" value="cancelled">
                                                    <button type="submit" class="btn btn-outline-danger" title="Cancel Order">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </form>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <small class="text-muted">Showing {{ orders|length }} orders</small>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Order Statistics</h5>
                    </div>
                    <div class="card-body">
                        {% set pendingCount = 0 %}
                        {% set completedCount = 0 %}
                        {% set cancelledCount = 0 %}
                        
                        {% for order in orders %}
                            {% if order.status == 'pending' %}
                                {% set pendingCount = pendingCount + 1 %}
                            {% elseif order.status == 'completed' %}
                                {% set completedCount = completedCount + 1 %}
                            {% elseif order.status == 'cancelled' %}
                                {% set cancelledCount = cancelledCount + 1 %}
                            {% endif %}
                        {% endfor %}
                        
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span>Pending Orders:</span>
                                <span class="text-warning">{{ pendingCount }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span>Completed Orders:</span>
                                <span class="text-success">{{ completedCount }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <span>Cancelled Orders:</span>
                                <span class="text-danger">{{ cancelledCount }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">Quick Actions</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="/orders/create" class="btn btn-success">
                                <i class="fas fa-plus"></i> Create New Order
                            </a>
                            <a href="/orders/create-from-stock" class="btn btn-primary">
                                <i class="fas fa-magic"></i> Create Order from Stock Levels
                            </a>
                            <a href="/inventory" class="btn btn-info">
                                <i class="fas fa-boxes"></i> View Inventory
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}