padelclub_backend/tournaments/templates/admin/tournaments/dashboard.html

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

{% block title %}Tournament Dashboard{% endblock %}

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

{% block content %}
<div class="tournament-dashboard">
    <h1>🏆 Tournament Dashboard</h1>

    <!-- Summary Statistics Cards -->
    <div class="dashboard-stats" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 20px 0;">

        <!-- Running Tournaments Card -->
        <div class="stat-card" style="background: linear-gradient(135deg, #28a745, #20c997); color: white; border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <h3 style="margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px;">
                🎾 Starting Tournaments
            </h3>
            <div class="tournament-stats">
                <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                    <div>
                        <div style="font-size: 28px; font-weight: bold;">{{ tournaments_today_total }}</div>
                        <div style="opacity: 0.9; font-size: 14px;">Today</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-size: 16px;">{{ tournaments_today_private }}/{{ tournaments_today_public }}</div>
                        <div style="opacity: 0.9; font-size: 12px;">Private/Public</div>
                    </div>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                    <div>
                        <div style="font-size: 24px; font-weight: bold;">{{ tournaments_week_total }}</div>
                        <div style="opacity: 0.9; font-size: 14px;">This Week</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-size: 16px;">{{ tournaments_week_private }}/{{ tournaments_week_public }}</div>
                        <div style="opacity: 0.9; font-size: 12px;">Private/Public</div>
                    </div>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <div>
                        <div style="font-size: 24px; font-weight: bold;">{{ tournaments_month_total }}</div>
                        <div style="opacity: 0.9; font-size: 14px;">This Month</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-size: 16px;">{{ tournaments_month_private }}/{{ tournaments_month_public }}</div>
                        <div style="opacity: 0.9; font-size: 12px;">Private/Public</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Ended Tournaments Card -->
        <div class="stat-card" style="background: linear-gradient(135deg, #dc3545, #e74c3c); color: white; border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <h3 style="margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px;">
                🏁 Ended Tournaments
            </h3>
            <div class="tournament-stats">
                <div style="margin-bottom: 15px;">
                    <div style="font-size: 28px; font-weight: bold;">{{ tournaments_ended_today }}</div>
                    <div style="opacity: 0.9; font-size: 14px;">Today</div>
                </div>
                <div style="margin-bottom: 15px;">
                    <div style="font-size: 24px; font-weight: bold;">{{ tournaments_ended_week }}</div>
                    <div style="opacity: 0.9; font-size: 14px;">This Week</div>
                </div>
                <div style="margin-bottom: 15px;">
                    <div style="font-size: 24px; font-weight: bold;">{{ tournaments_ended_month }}</div>
                    <div style="opacity: 0.9; font-size: 14px;">This Month</div>
                </div>
                <div>
                    <div style="font-size: 20px; font-weight: bold;">{{ tournaments_ended_all }}</div>
                    <div style="opacity: 0.9; font-size: 14px;">All Time</div>
                </div>
            </div>
        </div>

        <!-- Participants Card -->
        <div class="stat-card" style="background: linear-gradient(135deg, #007bff, #0056b3); color: white; border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <h3 style="margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px;">
                👥 Participants
            </h3>
            <div class="participant-stats">
                <div style="margin-bottom: 20px;">
                    <div style="font-size: 32px; font-weight: bold;">{{ total_teams }}</div>
                    <div style="opacity: 0.9; font-size: 16px;">Total Teams</div>
                </div>
                <div style="margin-bottom: 20px;">
                    <div style="font-size: 32px; font-weight: bold;">{{ total_players }}</div>
                    <div style="opacity: 0.9; font-size: 16px;">Total Players</div>
                </div>
                <div>
                    <div style="font-size: 20px; font-weight: bold;">{{ avg_teams_per_tournament }}</div>
                    <div style="opacity: 0.9; font-size: 14px;">Avg Teams/Tournament</div>
                </div>
            </div>
        </div>

        <!-- Matches Card -->
        <div class="stat-card" style="background: linear-gradient(135deg, #fd7e14, #e55e2b); color: white; border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <h3 style="margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px;">
                🏓 Matches
            </h3>
            <div class="match-stats">
                <div style="margin-bottom: 20px;">
                    <div style="font-size: 32px; font-weight: bold;">{{ total_matches }}</div>
                    <div style="opacity: 0.9; font-size: 16px;">Total Matches</div>
                </div>
                <div style="margin-bottom: 20px;">
                    <div style="font-size: 28px; font-weight: bold; color: #90EE90;">{{ matches_played }}</div>
                    <div style="opacity: 0.9; font-size: 14px;">Played</div>
                </div>
                <div>
                    <div style="font-size: 24px; font-weight: bold; color: #FFB6C1;">{{ matches_pending }}</div>
                    <div style="opacity: 0.9; font-size: 14px;">Pending</div>
                </div>
            </div>
        </div>
    </div>

    <!-- New User Statistics -->
    <div class="user-section" style="background: white; border: 1px solid #dee2e6; border-radius: 12px; padding: 25px; margin: 20px 0;">
        <h3 style="margin: 0 0 20px 0; color: #495057; display: flex; align-items: center; gap: 10px;">
            👤 User Statistics
        </h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
            <!-- User Counts by Origin -->
            <div style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
                <h4 style="margin: 0 0 15px 0;">Total Users: {{ total_users }}</h4>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>Admin:</span>
                    <strong>{{ users_admin }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <span>Site:</span>
                    <strong>{{ users_site }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span>App:</span>
                    <strong>{{ users_app }}</strong>
                </div>
                <div style="margin-top: 15px;">
                    <div style="height: 20px; background: #e9ecef; border-radius: 10px; overflow: hidden; display: flex;">
                        {% if total_users > 0 %}
                            <div style="width: {{ users_admin|floatformat:0 }}%; height: 100%; background: #6c757d;" title="Admin: {{ users_admin }}"></div>
                            <div style="width: {{ users_site|floatformat:0 }}%; height: 100%; background: #28a745;" title="Site: {{ users_site }}"></div>
                            <div style="width: {{ users_app|floatformat:0 }}%; height: 100%; background: #007bff;" title="App: {{ users_app }}"></div>
                        {% endif %}
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px;">
                        <span>Admin</span>
                        <span>Site</span>
                        <span>App</span>
                    </div>
                </div>
            </div>

            <!-- New User Registrations -->
            <div style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
                <h4 style="margin: 0 0 15px 0;">New Registrations</h4>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <span>Today:</span>
                    <div style="padding: 4px 12px; background: #007bff; color: white; border-radius: 15px; font-weight: bold;">{{ users_today }}</div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <span>This Week:</span>
                    <div style="padding: 4px 12px; background: #28a745; color: white; border-radius: 15px; font-weight: bold;">{{ users_this_week }}</div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span>This Month:</span>
                    <div style="padding: 4px 12px; background: #fd7e14; color: white; border-radius: 15px; font-weight: bold;">{{ users_this_month }}</div>
                </div>
            </div>

            <!-- Recent Users -->
            <div style="background: #f8f9fa; border-radius: 8px; padding: 20px; grid-column: span 2;">
                <h4 style="margin: 0 0 15px 0; display: flex; justify-content: space-between; align-items: center;">
                    <span>Recently Registered Users</span>
                    <a href="{% url 'admin:tournaments_customuser_changelist' %}" style="font-size: 14px; text-decoration: none; color: #007bff; display: flex; align-items: center;">
                        View All Users <span style="margin-left: 5px; font-size: 16px;">→</span>
                    </a>
                </h4>
                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr style="border-bottom: 2px solid #dee2e6;">
                                <th style="padding: 8px 12px; text-align: left;">Name</th>
                                <th style="padding: 8px 12px; text-align: left;">Email</th>
                                <th style="padding: 8px 12px; text-align: left;">Origin</th>
                                <th style="padding: 8px 12px; text-align: left;">Date Joined</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for user in recent_users %}
                            <tr style="border-bottom: 1px solid #dee2e6;">
                                <td style="padding: 8px 12px;">{{ user.first_name }} {{ user.last_name }}</td>
                                <td style="padding: 8px 12px;">{{ user.email }}</td>
                                <td style="padding: 8px 12px;">
                                    {% if user.origin == 0 %}
                                        <span style="padding: 2px 6px; background: #6c757d; color: white; border-radius: 4px; font-size: 12px;">Admin</span>
                                    {% elif user.origin == 1 %}
                                        <span style="padding: 2px 6px; background: #28a745; color: white; border-radius: 4px; font-size: 12px;">Site</span>
                                    {% elif user.origin == 2 %}
                                        <span style="padding: 2px 6px; background: #007bff; color: white; border-radius: 4px; font-size: 12px;">App</span>
                                    {% else %}
                                        <span style="padding: 2px 6px; background: #6c757d; color: white; border-radius: 4px; font-size: 12px;">Unknown</span>
                                    {% endif %}
                                </td>
                                <td style="padding: 8px 12px;">{{ user.date_joined|date:"M d, Y H:i" }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" style="padding: 12px; text-align: center;">No recent users found.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Purchase Statistics -->
    <div class="purchase-section" style="background: white; border: 1px solid #dee2e6; border-radius: 12px; padding: 25px; margin: 20px 0;">
        <h3 style="margin: 0 0 20px 0; color: #495057; display: flex; align-items: center; gap: 10px;">
            💰 Purchase Statistics
        </h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
            <!-- Purchase Counts -->
            <div style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
                <h4 style="margin: 0 0 15px 0;">Total Purchases: {{ total_purchases }}</h4>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <span>Today:</span>
                    <div style="padding: 4px 12px; background: #007bff; color: white; border-radius: 15px; font-weight: bold;">{{ purchases_today }}</div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                    <span>This Week:</span>
                    <div style="padding: 4px 12px; background: #28a745; color: white; border-radius: 15px; font-weight: bold;">{{ purchases_this_week }}</div>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span>This Month:</span>
                    <div style="padding: 4px 12px; background: #fd7e14; color: white; border-radius: 15px; font-weight: bold;">{{ purchases_this_month }}</div>
                </div>
            </div>

            <!-- Recent Purchases -->
            <div style="background: #f8f9fa; border-radius: 8px; padding: 20px; grid-column: span 3;">
                <h4 style="margin: 0 0 15px 0;">Recent Purchases</h4>
                <div style="overflow-x: auto;">
                    <table style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr style="border-bottom: 2px solid #dee2e6;">
                                <th style="padding: 8px 12px; text-align: left;">ID</th>
                                <th style="padding: 8px 12px; text-align: left;">User</th>
                                <th style="padding: 8px 12px; text-align: left;">Product</th>
                                <th style="padding: 8px 12px; text-align: left;">Quantity</th>
                                <th style="padding: 8px 12px; text-align: left;">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for purchase in recent_purchases %}
                            <tr style="border-bottom: 1px solid #dee2e6;">
                                <td style="padding: 8px 12px;">{{ purchase.id }}</td>
                                <td style="padding: 8px 12px;">{{ purchase.user.email }}</td>
                                <td style="padding: 8px 12px;">{{ purchase.product_id }}</td>
                                <td style="padding: 8px 12px;">{{ purchase.quantity }}</td>
                                <td style="padding: 8px 12px;">{{ purchase.purchase_date|date:"M d, Y H:i" }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" style="padding: 12px; text-align: center;">No recent purchases found.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- All Time Overview -->
    <div class="all-time-section" style="background: white; border: 1px solid #dee2e6; border-radius: 12px; padding: 25px; margin: 20px 0;">
        <h3 style="margin: 0 0 20px 0; color: #495057; display: flex; align-items: center; gap: 10px;">
            📊 All Time Overview
        </h3>
        <div class="overview-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
            <div class="overview-item" style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                <div style="font-size: 24px; font-weight: bold; color: #28a745;">{{ tournaments_all_total }}</div>
                <div style="color: #6c757d; margin-top: 5px;">Total Tournaments</div>
                <div style="font-size: 12px; color: #6c757d; margin-top: 5px;">
                    {{ tournaments_all_private }} Private | {{ tournaments_all_public }} Public
                </div>
            </div>
            <div class="overview-item" style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                <div style="font-size: 24px; font-weight: bold; color: #007bff;">{{ tournaments_with_online_reg }}</div>
                <div style="color: #6c757d; margin-top: 5px;">Online Registration</div>
            </div>
            <div class="overview-item" style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                <div style="font-size: 24px; font-weight: bold; color: #ffc107;">{{ tournaments_with_payment }}</div>
                <div style="color: #6c757d; margin-top: 5px;">Online Payment</div>
            </div>
            <div class="overview-item" style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                <div style="font-size: 24px; font-weight: bold; color: #17a2b8;">€{{ avg_entry_fee }}</div>
                <div style="color: #6c757d; margin-top: 5px;">Avg Entry Fee</div>
            </div>
        </div>
    </div>

    <!-- Detailed Breakdown Table -->
    <div class="detailed-breakdown" style="background: white; border: 1px solid #dee2e6; border-radius: 12px; padding: 25px; margin-top: 20px;">
        <h3 style="margin: 0 0 20px 0; color: #495057;">📈 Tournament Breakdown</h3>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #f8f9fa;">
                        <th style="padding: 15px; text-align: left; border-bottom: 2px solid #dee2e6;">Period</th>
                        <th style="padding: 15px; text-align: center; border-bottom: 2px solid #dee2e6;">Running</th>
                        <th style="padding: 15px; text-align: center; border-bottom: 2px solid #dee2e6;">Private</th>
                        <th style="padding: 15px; text-align: center; border-bottom: 2px solid #dee2e6;">Public</th>
                        <th style="padding: 15px; text-align: center; border-bottom: 2px solid #dee2e6;">Ended</th>
                    </tr>
                </thead>
                <tbody>
                    <tr style="border-bottom: 1px solid #dee2e6;">
                        <td style="padding: 15px; font-weight: 500;">Today</td>
                        <td style="padding: 15px; text-align: center;">
                            <span style="background: #28a745; color: white; padding: 6px 12px; border-radius: 15px; font-weight: bold;">
                                {{ tournaments_today_total }}
                            </span>
                        </td>
                        <td style="padding: 15px; text-align: center; color: #6c757d;">{{ tournaments_today_private }}</td>
                        <td style="padding: 15px; text-align: center; color: #6c757d;">{{ tournaments_today_public }}</td>
                        <td style="padding: 15px; text-align: center; color: #dc3545; font-weight: 500;">{{ tournaments_ended_today }}</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #dee2e6;">
                        <td style="padding: 15px; font-weight: 500;">This Week</td>
                        <td style="padding: 15px; text-align: center;">
                            <span style="background: #28a745; color: white; padding: 6px 12px; border-radius: 15px; font-weight: bold;">
                                {{ tournaments_week_total }}
                            </span>
                        </td>
                        <td style="padding: 15px; text-align: center; color: #6c757d;">{{ tournaments_week_private }}</td>
                        <td style="padding: 15px; text-align: center; color: #6c757d;">{{ tournaments_week_public }}</td>
                        <td style="padding: 15px; text-align: center; color: #dc3545; font-weight: 500;">{{ tournaments_ended_week }}</td>
                    </tr>
                    <tr style="border-bottom: 1px solid #dee2e6;">
                        <td style="padding: 15px; font-weight: 500;">This Month</td>
                        <td style="padding: 15px; text-align: center;">
                            <span style="background: #28a745; color: white; padding: 6px 12px; border-radius: 15px; font-weight: bold;">
                                {{ tournaments_month_total }}
                            </span>
                        </td>
                        <td style="padding: 15px; text-align: center; color: #6c757d;">{{ tournaments_month_private }}</td>
                        <td style="padding: 15px; text-align: center; color: #6c757d;">{{ tournaments_month_public }}</td>
                        <td style="padding: 15px; text-align: center; color: #dc3545; font-weight: 500;">{{ tournaments_ended_month }}</td>
                    </tr>
                    <tr>
                        <td style="padding: 15px; font-weight: 500;">All Time</td>
                        <td style="padding: 15px; text-align: center;">
                            <span style="background: #007bff; color: white; padding: 6px 12px; border-radius: 15px; font-weight: bold;">
                                {{ tournaments_all_total }}
                            </span>
                        </td>
                        <td style="padding: 15px; text-align: center; color: #6c757d;">{{ tournaments_all_private }}</td>
                        <td style="padding: 15px; text-align: center; color: #6c757d;">{{ tournaments_all_public }}</td>
                        <td style="padding: 15px; text-align: center; color: #dc3545; font-weight: 500;">{{ tournaments_ended_all }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions" style="background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 12px; padding: 25px; margin-top: 20px;">
        <h3 style="margin: 0 0 20px 0; color: #495057;">🚀 Quick Actions</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
            <a href="{% url 'admin:tournaments_tournament_changelist' %}"
               style="display: block; padding: 12px 15px; background: #007bff; color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: 500;">
                View All Tournaments
            </a>
            <a href="{% url 'admin:tournaments_teamregistration_changelist' %}"
               style="display: block; padding: 12px 15px; background: #28a745; color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: 500;">
                Manage Teams
            </a>
            <a href="{% url 'admin:tournaments_playerregistration_changelist' %}"
               style="display: block; padding: 12px 15px; background: #6c757d; color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: 500;">
                Manage Players
            </a>
            <a href="{% url 'admin:tournaments_match_changelist' %}"
               style="display: block; padding: 12px 15px; background: #fd7e14; color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: 500;">
                View Matches
            </a>
            <a href="{% url 'admin:tournaments_event_changelist' %}"
               style="display: block; padding: 12px 15px; background: #17a2b8; color: white; text-decoration: none; border-radius: 8px; text-align: center; font-weight: 500;">
                Manage Events
            </a>
            <a href="{% url 'admin:tournaments_club_changelist' %}"
               style="display: block; padding: 12px 15px; background: #ffc107; color: #212529; text-decoration: none; border-radius: 8px; text-align: center; font-weight: 500;">
                Manage Clubs
            </a>
        </div>
    </div>
</div>

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

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

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.quick-actions a:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .dashboard-stats {
        grid-template-columns: 1fr !important;
    }

    .overview-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .quick-actions > div {
        grid-template-columns: 1fr !important;
    }
}
</style>
{% endblock %}