app/templates/admin/transactions.html

{% extends "admin/base.html" %}

{% block title %}Toutes les Transactions{% endblock %}
{% block page_title %}Historique des Transactions{% endblock %}

{% block content %}
<!-- Header with Filters -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
    <div>
        <h1 class="text-2xl font-bold text-white">
            <i class="fas fa-exchange-alt mr-3</div> text-yellow-400"></i>
            Historique des Transactions
        </h1>
        <p class="text-gray-400 text-sm mt-1">
            {{ transactions.total }} transaction(s) au total
        </p>
    </div>

    <!-- Filter Buttons -->
    <div class="flex items-center space-x-2 flex-wrap gap-2">
        <a href="{{ url_for('admin_panel.transactions') }}"
           class="px-4 py-2 rounded-lg font-medium transition-colors {% if not request.args.get('type') %}bg-yellow-600 text-white{% else %}bg-gray-700 text-gray-300 hover:bg-gray-600{% endif %}">
            Tous
        </a>
        <a href="{{ url_for('admin_panel.transactions', type='deposit') }}"
           class="px-4 py-2 rounded-lg font-medium transition-colors {% if request.args.get('type') == 'deposit' %}bg-green-600 text-white{% else %}bg-gray-700 text-gray-300 hover:bg-gray-600{% endif %}">
            <i class="fas fa-arrow-down mr-1"></i> Dépôts
        </a>
        <a href="{{ url_for('admin_panel.transactions', type='withdrawal') }}"
           class="px-4 py-2 rounded-lg font-medium transition-colors {% if request.args.get('type') == 'withdrawal' %}bg-red-600 text-white{% else %}bg-gray-700 text-gray-300 hover:bg-gray-600{% endif %}">
            <i class="fas fa-arrow-up mr-1"></i> Retraits
        </a>
        <a href="{{ url_for('admin_panel.transactions', type='purchase') }}"
           class="px-4 py-2 rounded-lg font-medium transition-colors {% if request.args.get('type') == 'purchase' %}bg-blue-600 text-white{% else %}bg-gray-700 text-gray-300 hover:bg-gray-600{% endif %}">
            <i class="fas fa-shopping-cart mr-1"></i> Achats
        </a>
        <a href="{{ url_for('admin_panel.transactions', type='bonus') }}"
           class="px-4 py-2 rounded-lg font-medium transition-colors {% if request.args.get('type') == 'bonus' %}bg-purple-600 text-white{% else %}bg-gray-700 text-gray-300 hover:bg-gray-600{% endif %}">
            <i class="fas fa-gift mr-1"></i> Bonus
        </a>
    </div>
</div>

<!-- Transactions Table -->
<div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-900/50">
                <tr>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">ID</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Utilisateur</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Type</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Montant</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Description</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Statut</th>
                    <th class="px-6 py-4 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-700">
                {% for transaction in transactions.items %}
                <tr class="hover:bg-gray-700/50 transition-colors">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">
                        #{{ transaction.id }}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if transaction.user %}
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center">
                                <span class="text-white font-bold text-xs">{{ transaction.user.name[0].upper() if transaction.user.name else '?' }}</span>
                            </div>
                            <div class="ml-3">
                                <p class="text-white text-sm font-medium">{{ transaction.user.name }}</p>
                                <p class="text-xs text-gray-400">{{ transaction.user.phone }}</p>
                            </div>
                        </div>
                        {% else %}
                        <span class="text-gray-500">N/A</span>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {% if transaction.type == 'deposit' %}bg-green-500/20 text-green-400
                            {% elif transaction.type == 'withdrawal' %}bg-red-500/20 text-red-400
                            {% elif transaction.type == 'purchase' %}bg-blue-500/20 text-blue-400
                            {% elif transaction.type == 'bonus' %}bg-purple-500/20 text-purple-400
                            {% elif transaction.type == 'adjustment' %}bg-yellow-500/20 text-yellow-400
                            {% else %}bg-gray-500/20 text-gray-400{% endif %}">
                            {% if transaction.type == 'deposit' %}
                                <i class="fas fa-arrow-down mr-1"></i> Dépôt
                            {% elif transaction.type == 'withdrawal' %}
                                <i class="fas fa-arrow-up mr-1"></i> Retrait
                            {% elif transaction.type == 'purchase' %}
                                <i class="fas fa-shopping-cart mr-1"></i> Achat
                            {% elif transaction.type == 'bonus' %}
                                <i class="fas fa-gift mr-1"></i> Bonus
                            {% elif transaction.type == 'adjustment' %}
                                <i class="fas fa-sliders-h mr-1"></i> Ajustement
                            {% else %}
                                {{ transaction.type }}
                            {% endif %}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="font-medium text-lg {% if transaction.type == 'withdrawal' %}text-red-400{% elif transaction.type in ['deposit', 'bonus', 'purchase'] %}text-green-400{% else %}text-white{% endif %}">
                            {% if transaction.type == 'withdrawal' %}-{% elif transaction.amount > 0 %}+{% endif %}{{ "{:,.0f}".format(transaction.amount) }} <span class="text-sm font-normal text-gray-400">FCFA</span>
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <p class="text-sm text-gray-300 max-w-xs truncate" title="{{ transaction.description }}">
                            {{ transaction.description or '-' }}
                        </p>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {% if transaction.status == 'completed' %}bg-green-500/20 text-green-400
                            {% elif transaction.status == 'pending' %}bg-yellow-500/20 text-yellow-400
                            {% elif transaction.status == 'approved' %}bg-blue-500/20 text-blue-400
                            {% elif transaction.status == 'rejected' %}bg-red-500/20 text-red-400
                            {% else %}bg-gray-500/20 text-gray-400{% endif %}">
                            {% if transaction.status == 'completed' %}
                                <i class="fas fa-check-circle mr-1"></i> Complété
                            {% elif transaction.status == 'pending' %}
                                <i class="fas fa-clock mr-1"></i> En attente
                            {% elif transaction.status == 'approved' %}
                                <i class="fas fa-check mr-1"></i> Approuvé
                            {% elif transaction.status == 'rejected' %}
                                <i class="fas fa-times mr-1"></i> Rejeté
                            {% else %}
                                {{ transaction.status }}
                            {% endif %}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-300">{{ transaction.created_at.strftime('%d/%m/%Y') }}</div>
                        <div class="text-xs text-gray-500">{{ transaction.created_at.strftime('%H:%M:%S') }}</div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                        <i class="fas fa-inbox text-4xl mb-3"></i>
                        <p class="text-lg">Aucune transaction trouvée</p>
                        {% if request.args.get('type') %}
                        <p class="text-sm mt-1">Aucune transaction de type "{{ request.args.get('type') }}"</p>
                        <a href="{{ url_for('admin_panel.transactions') }}" class="text-yellow-400 hover:text-yellow-300 text-sm mt-2 inline-block">
                            Voir toutes les transactions
                        </a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    {% if transactions.pages > 1 %}
    <div class="px-6 py-4 border-t border-gray-700 flex items-center justify-between">
        <div class="text-sm text-gray-400">
            Affichage de {{ transactions.items|length }} sur {{ transactions.total }} transactions
        </div>
        <div class="flex items-center space-x-2">
            {% if transactions.has_prev %}
            <a href="{{ url_for('admin_panel.transactions', page=transactions.prev_num, type=request.args.get('type', '')) }}"
               class="px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors">
                <i class="fas fa-chevron-left mr-1"></i> Précédent
            </a>
            {% endif %}

            <div class="flex items-center space-x-1">
                {% for page_num in transactions.iter_pages(left_edge=1, left_current=1, right_current=2, right_edge=1) %}
                    {% if page_num %}
                        {% if page_num == transactions.page %}
                        <span class="px-3 py-2 bg-yellow-600 text-white rounded-lg font-medium">{{ page_num }}</span>
                        {% else %}
                        <a href="{{ url_for('admin_panel.transactions', page=page_num, type=request.args.get('type', '')) }}"
                           class="px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors">{{ page_num }}</a>
                        {% endif %}
                    {% else %}
                        <span class="px-2 text-gray-500">...</span>
                    {% endif %}
                {% endfor %}
            </div>

            {% if transactions.has_next %}
            <a href="{{ url_for('admin_panel.transactions', page=transactions.next_num, type=request.args.get('type', '')) }}"
               class="px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors">
                Suivant <i class="fas fa-chevron-right ml-1"></i>
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}