padelclub_backend/shop/templates/admin/shop/dashboard.html

{% extends "admin/base_site.html" %}
{% load admin_urls %}

{% block title %}Shop Dashboard{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">Home</a>
    &rsaquo; <a href="{% url 'admin:app_list' app_label='shop' %}">Shop</a>
    &rsaquo; Dashboard
</div>
{% endblock %}

{% block content %}
<div class="dashboard">
    <div class="dashboard-stats" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 20px 0;">

        <!-- Order Status Cards -->
        <div class="stat-card" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px;">
            <h3 style="margin: 0 0 15px 0; color: #495057;">Orders by Status</h3>
            <div class="status-list">
                {% for status_data in order_status_data %}
                <div class="status-item" style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #e9ecef;">
                    <span style="font-weight: 500; color: #495057;">{{ status_data.label }}</span>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span class="count" style="background: #007bff; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: bold;">
                            {{ status_data.count }}
                        </span>
                        <span class="total" style="color: #28a745; font-weight: 500;">
                            €{{ status_data.total_amount|floatformat:2 }}
                        </span>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Total Summary Card -->
        <div class="stat-card" style="background: linear-gradient(135deg, #007bff, #0056b3); color: white; border-radius: 8px; padding: 20px;">
            <h3 style="margin: 0 0 15px 0;">Total Summary</h3>
            <div class="summary-stats">
                <div style="margin-bottom: 10px;">
                    <div style="font-size: 24px; font-weight: bold;">{{ total_orders }}</div>
                    <div style="opacity: 0.9;">Total Orders</div>
                </div>
                <div>
                    <div style="font-size: 24px; font-weight: bold;">€{{ total_revenue|floatformat:2 }}</div>
                    <div style="opacity: 0.9;">Total Revenue</div>
                </div>
            </div>
        </div>

        <!-- Recent Activity Card -->
        <div class="stat-card" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px;">
            <h3 style="margin: 0 0 15px 0; color: #495057;">Recent Activity</h3>
            <div class="recent-stats">
                <div style="margin-bottom: 10px;">
                    <div style="font-size: 18px; font-weight: bold; color: #28a745;">{{ orders_today }}</div>
                    <div style="color: #6c757d; font-size: 14px;">Orders Today</div>
                </div>
                <div style="margin-bottom: 10px;">
                    <div style="font-size: 18px; font-weight: bold; color: #ffc107;">{{ orders_this_week }}</div>
                    <div style="color: #6c757d; font-size: 14px;">Orders This Week</div>
                </div>
                <div>
                    <div style="font-size: 18px; font-weight: bold; color: #17a2b8;">{{ orders_this_month }}</div>
                    <div style="color: #6c757d; font-size: 14px;">Orders This Month</div>
                </div>
            </div>
        </div>

        <!-- Quick Actions Card -->
        <div class="stat-card" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px;">
            <h3 style="margin: 0 0 15px 0; color: #495057;">Quick Actions</h3>
            <div class="quick-actions">
                <a href="{% url 'admin:shop_order_changelist' %}"
                   style="display: block; padding: 8px 12px; margin-bottom: 8px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; text-align: center;">
                    View All Orders
                </a>
                <a href="{% url 'admin:shop_order_changelist' %}?show_preparation=1"
                   style="display: block; padding: 8px 12px; margin-bottom: 8px; background: #28a745; color: white; text-decoration: none; border-radius: 4px; text-align: center;">
                    Orders to Prepare ({{ orders_to_prepare }})
                </a>
                <a href="{% url 'admin:shop_product_changelist' %}"
                   style="display: block; padding: 8px 12px; margin-bottom: 8px; background: #6c757d; color: white; text-decoration: none; border-radius: 4px; text-align: center;">
                    Manage Products
                </a>
                <a href="{% url 'admin:shop_coupon_changelist' %}"
                   style="display: block; padding: 8px 12px; background: #ffc107; color: #212529; text-decoration: none; border-radius: 4px; text-align: center;">
                    Manage Coupons
                </a>
            </div>
        </div>
    </div>

    <!-- Detailed Status Breakdown -->
    <div class="detailed-breakdown" style="background: white; border: 1px solid #dee2e6; border-radius: 8px; padding: 20px; margin-top: 20px;">
        <h3 style="margin: 0 0 20px 0; color: #495057;">Status Breakdown</h3>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #f8f9fa;">
                        <th style="padding: 12px; text-align: left; border-bottom: 2px solid #dee2e6;">Status</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid #dee2e6;">Count</th>
                        <th style="padding: 12px; text-align: center; border-bottom: 2px solid #dee2e6;">Percentage</th>
                        <th style="padding: 12px; text-align: right; border-bottom: 2px solid #dee2e6;">Total Value</th>
                        <th style="padding: 12px; text-align: right; border-bottom: 2px solid #dee2e6;">Avg Order Value</th>
                    </tr>
                </thead>
                <tbody>
                    {% for status_data in order_status_data %}
                    <tr style="border-bottom: 1px solid #dee2e6;">
                        <td style="padding: 12px; font-weight: 500;">{{ status_data.label }}</td>
                        <td style="padding: 12px; text-align: center;">
                            <span style="background: #007bff; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px;">
                                {{ status_data.count }}
                            </span>
                        </td>
                        <td style="padding: 12px; text-align: center;">{{ status_data.percentage|floatformat:1 }}%</td>
                        <td style="padding: 12px; text-align: right; color: #28a745; font-weight: 500;">
                            €{{ status_data.total_amount|floatformat:2 }}
                        </td>
                        <td style="padding: 12px; text-align: right;">
                            {% if status_data.count > 0 %}
                                €{{ status_data.avg_order_value|floatformat:2 }}
                            {% else %}
                                €0.00
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
.dashboard {
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.quick-actions a:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .dashboard-stats {
        grid-template-columns: 1fr !important;
    }
}
</style>
{% endblock %}