Dashboard - Gedex Admin


<!-- Dashboard Header -->
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-800">Crypto Staking Dashboard</h1>
    <p class="mt-2 text-gray-600">Welcome back! Here's your platform overview.</p>
</div>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Total Users Card -->
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">Total Users</p>
                <p class="text-3xl font-bold text-gray-800 mt-1">12,458</p>
            </div>
            <div class="w-14 h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="fas fa-users text-white text-2xl"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
            <span class="text-green-500 font-medium"><i class="fas fa-arrow-up mr-1"></i>12.5%</span>
            <span class="text-gray-500 ml-2">this month</span>
        </div>
    </div>
    
    <!-- Today's Transactions Card -->
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">Today's Transactions</p>
                <p class="text-3xl font-bold text-gray-800 mt-1">$45,230</p>
            </div>
            <div class="w-14 h-14 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="fas fa-exchange-alt text-white text-2xl"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
            <span class="text-green-500 font-medium"><i class="fas fa-arrow-up mr-1"></i>8.2%</span>
            <span class="text-gray-500 ml-2">vs yesterday</span>
        </div>
    </div>
    
    <!-- Today's Withdrawals Card -->
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">Today's Withdrawals</p>
                <p class="text-3xl font-bold text-red-600 mt-1">$12,450</p>
            </div>
            <div class="w-14 h-14 bg-gradient-to-br from-red-400 to-red-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="fas fa-arrow-down text-white text-2xl"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
            <span class="text-red-500 font-medium"><i class="fas fa-arrow-up mr-1"></i>3.1%</span>
            <span class="text-gray-500 ml-2">vs yesterday</span>
        </div>
    </div>
    
    <!-- Today's Transfers Card -->
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">Today's Transfers</p>
                <p class="text-3xl font-bold text-green-600 mt-1">$28,780</p>
            </div>
            <div class="w-14 h-14 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                <i class="fas fa-paper-plane text-white text-2xl"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center text-sm">
            <span class="text-green-500 font-medium"><i class="fas fa-arrow-up mr-1"></i>15.3%</span>
            <span class="text-gray-500 ml-2">vs yesterday</span>
        </div>
    </div>
</div>

<!-- Additional Stats Row -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Total Staked Card -->
    <div class="bg-gradient-to-br from-indigo-500 to-indigo-700 rounded-xl shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-indigo-200">Total Staked</p>
                <p class="text-2xl font-bold mt-1">$2.5M</p>
            </div>
            <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center">
                <i class="fas fa-coins text-xl"></i>
            </div>
        </div>
        <div class="mt-4 text-sm text-indigo-200">
            <span class="text-white font-medium">+18.5%</span> this week
        </div>
    </div>
    
    <!-- Active Stakers Card -->
    <div class="bg-gradient-to-br from-orange-500 to-orange-700 rounded-xl shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-orange-200">Active Stakers</p>
                <p class="text-2xl font-bold mt-1">8,245</p>
            </div>
            <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center">
                <i class="fas fa-user-check text-xl"></i>
            </div>
        </div>
        <div class="mt-4 text-sm text-orange-200">
            <span class="text-white font-medium">+5.2%</span> this week
        </div>
    </div>
    
    <!-- Total Rewards Card -->
    <div class="bg-gradient-to-br from-teal-500 to-teal-700 rounded-xl shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-teal-200">Total Rewards</p>
                <p class="text-2xl font-bold mt-1">$485K</p>
            </div>
            <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center">
                <i class="fas fa-gift text-xl"></i>
            </div>
        </div>
        <div class="mt-4 text-sm text-teal-200">
            <span class="text-white font-medium">+22.8%</span> this week
        </div>
    </div>
    
    <!-- Pending Transactions Card -->
    <div class="bg-gradient-to-br from-pink-500 to-pink-700 rounded-xl shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-pink-200">Pending Transactions</p>
                <p class="text-2xl font-bold mt-1">127</p>
            </div>
            <div class="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center">
                <i class="fas fa-clock text-xl"></i>
            </div>
        </div>
        <div class="mt-4 text-sm text-pink-200">
            <span class="text-white font-medium">23</span> awaiting approval
        </div>
    </div>
</div>

<!-- Recent Activity Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">Recent Transactions</h2>
        <div class="space-y-4">
            <div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-arrow-up text-green-600"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-800">Deposit from 0x7a2...f3b</p>
                    <p class="text-xs text-gray-500">2 minutes ago</p>
                </div>
                <span class="text-green-600 font-medium">+$2,500</span>
            </div>
            <div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
                <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-arrow-down text-red-600"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-800">Withdrawal to 0x9c4...d2e</p>
                    <p class="text-xs text-gray-500">15 minutes ago</p>
                </div>
                <span class="text-red-600 font-medium">-$1,200</span>
            </div>
            <div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-paper-plane text-blue-600"></i>
                </div>
                <div class="flex-1">
                    <p class="text-sm font-medium text-gray-800">Transfer to 0x3f8...a1c</p>
                    <p class="text-xs text-gray-500">1 hour ago</p>
                </div>
                <span class="text-blue-600 font-medium">-$500</span>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h2>
        <div class="grid grid-cols-2 gap-4">
            <a href="/admin/users" class="flex flex-col items-center justify-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition duration-200">
                <i class="fas fa-users text-blue-600 text-2xl mb-2"></i>
                <span class="text-sm font-medium text-blue-800">Manage Users</span>
            </a>
            <a href="/admin/transactions" class="flex flex-col items-center justify-center p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition duration-200">
                <i class="fas fa-list text-purple-600 text-2xl mb-2"></i>
                <span class="text-sm font-medium text-purple-800">Transactions</span>
            </a>
            <a href="/admin/withdrawals" class="flex flex-col items-center justify-center p-4 bg-red-50 rounded-lg hover:bg-red-100 transition duration-200">
                <i class="fas fa-arrow-down text-red-600 text-2xl mb-2"></i>
                <span class="text-sm font-medium text-red-800">Withdrawals</span>
            </a>
            <a href="/admin/staking" class="flex flex-col items-center justify-center p-4 bg-green-50 rounded-lg hover:bg-green-100 transition duration-200">
                <i class="fas fa-coins text-green-600 text-2xl mb-2"></i>
                <span class="text-sm font-medium text-green-800">Staking</span>
            </a>
        </div>
    </div>
</div>