Gecko [ fastearnlimited.com ]

Name	Size	Permission	Date
admin	[ DIR ]	drwxr-xr-x	2025-09-15 01:48
ads	[ DIR ]	drwxr-xr-x	2025-09-15 01:31
layouts	[ DIR ]	drwxr-xr-x	2025-09-15 01:48
referrals	[ DIR ]	drwxr-xr-x	2025-09-15 01:32
dashboard.blade.php	14.3 KB	-rw-r--r--	2025-09-15 01:30

Rename

@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="container mx-auto px-4 py-6 max-w-6xl">
    
    <div class="mb-8">
        <div class="bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-800 rounded-2xl p-6 text-white relative overflow-hidden">
            
            <div class="absolute inset-0 bg-black bg-opacity-10"></div>
            <div class="absolute -top-4 -right-4 w-24 h-24 bg-white bg-opacity-10 rounded-full"></div>
            <div class="absolute -bottom-4 -left-4 w-32 h-32 bg-white bg-opacity-5 rounded-full"></div>
            
            <div class="relative z-10">
                <h1 class="text-2xl font-bold mb-2">Welcome back, {{ auth()->user()->name }}!</h1>
                <p class="text-indigo-100 mb-4">Ready to earn some money today?</p>
                
                
                <div class="grid grid-cols-2 gap-4">
                    <div class="bg-white bg-opacity-20 rounded-xl p-4 backdrop-blur-sm">
                        <div class="text-2xl font-bold" x-data="{ balance: {{ auth()->user()->balance }} }" x-text="formatCurrency(balance)">
                            ${{ number_format(auth()->user()->balance, 2) }}
                        </div>
                        <div class="text-sm text-indigo-100">Current Balance</div>
                    </div>
                    <div class="bg-white bg-opacity-20 rounded-xl p-4 backdrop-blur-sm">
                        <div class="text-2xl font-bold" x-data="{ earnings: {{ auth()->user()->getTotalEarningsToday() }} }" x-text="formatCurrency(earnings)">
                            ${{ number_format(auth()->user()->getTotalEarningsToday(), 2) }}
                        </div>
                        <div class="text-sm text-indigo-100">Today's Earnings</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        
        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">Ads Watched</p>
                    <p class="text-2xl font-bold text-gray-900" x-data="{ count: {{ auth()->user()->adViews()->today()->rewarded()->count() }} }" x-text="count">
                        {{ auth()->user()->adViews()->today()->rewarded()->count() }}
                    </p>
                    <p class="text-xs text-gray-500">Today</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
                    </svg>
                </div>
            </div>
        </div>

<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">Referrals</p>
                    <p class="text-2xl font-bold text-gray-900" x-data="{ count: {{ auth()->user()->referrals()->count() }} }" x-text="count">
                        {{ auth()->user()->referrals()->count() }}
                    </p>
                    <p class="text-xs text-gray-500">Friends</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"></path>
                    </svg>
                </div>
            </div>
        </div>

<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">Total Earned</p>
                    <p class="text-2xl font-bold text-gray-900" x-data="{ total: {{ auth()->user()->transactions()->where('type', 'credit')->sum('amount') }} }" x-text="formatCurrency(total)">
                        ${{ number_format(auth()->user()->transactions()->where('type', 'credit')->sum('amount'), 2) }}
                    </p>
                    <p class="text-xs text-gray-500">All time</p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"></path>
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"></path>
                    </svg>
                </div>
            </div>
        </div>

<div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600 mb-1">Available</p>
                    <p class="text-2xl font-bold text-gray-900" x-data="{ available: 5 }" x-text="available">5</p>
                    <p class="text-xs text-gray-500">Ads left</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                    <svg class="w-6 h-6 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        
        <div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 card-hover">
            <div class="flex items-center space-x-4 mb-4">
                <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Watch Ads</h3>
                    <p class="text-sm text-gray-600">Earn $0.05 - $0.15 per ad</p>
                </div>
            </div>
            <p class="text-gray-600 mb-4">Watch short video ads and earn money instantly. New ads are added daily!</p>
            <a href="{{ route('ads.index') }}" 
               class="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl py-3 px-4 font-medium text-center block hover:from-blue-700 hover:to-blue-800 transition-all duration-200 hover:shadow-lg">
                Start Watching
            </a>
        </div>

<div class="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 card-hover">
            <div class="flex items-center space-x-4 mb-4">
                <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-xl flex items-center justify-center">
                    <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"></path>
                    </svg>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Invite Friends</h3>
                    <p class="text-sm text-gray-600">Earn 20% commission</p>
                </div>
            </div>
            <p class="text-gray-600 mb-4">Invite your friends and earn 20% commission on their earnings forever!</p>
            <a href="{{ route('referrals.index') }}" 
               class="w-full bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl py-3 px-4 font-medium text-center block hover:from-green-700 hover:to-green-800 transition-all duration-200 hover:shadow-lg">
                Share Link
            </a>
        </div>
    </div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100">
        <div class="p-6 border-b border-gray-100">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-semibold text-gray-900">Recent Activity</h2>
                <a href="{{ route('wallet.transactions') }}" class="text-indigo-600 hover:text-indigo-700 text-sm font-medium">
                    View All
                </a>
            </div>
        </div>
        
        <div class="p-6">
            
            <div class="space-y-4" x-data="{ transactions: [] }" x-init="
                transactions = [
                    { type: 'credit', source: 'ad_watch', amount: 0.05, time: '2 minutes ago', icon: '🎬' },
                    { type: 'credit', source: 'referral', amount: 0.02, time: '1 hour ago', icon: '👥' },
                    { type: 'credit', source: 'ad_watch', amount: 0.08, time: '3 hours ago', icon: '🎬' },
                    { type: 'debit', source: 'withdraw', amount: 5.00, time: 'Yesterday', icon: '💳' }
                ]
            ">
                <template x-for="transaction in transactions" :key="transaction.time">
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors duration-200">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-lg shadow-sm" x-text="transaction.icon"></div>
                            <div>
                                <p class="font-medium text-gray-900" x-text="
                                    transaction.source === 'ad_watch' ? 'Ad Watch Reward' :
                                    transaction.source === 'referral' ? 'Referral Commission' :
                                    transaction.source === 'withdraw' ? 'Withdrawal' : 'Transaction'
                                "></p>
                                <p class="text-sm text-gray-500" x-text="transaction.time"></p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="font-semibold" 
                               :class="transaction.type === 'credit' ? 'text-green-600' : 'text-red-600'"
                               x-text="(transaction.type === 'credit' ? '+' : '-') + formatCurrency(transaction.amount)"></p>
                        </div>
                    </div>
                </template>
            </div>

<div class="text-center py-8 hidden" id="empty-activity">
                <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">No Recent Activity</h3>
                <p class="text-gray-600 mb-4">Start watching ads to see your earnings here!</p>
                <a href="{{ route('ads.index') }}" 
                   class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors duration-200">
                    Watch Your First Ad
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Real-time balance updates (if using WebSockets or polling)
    document.addEventListener('DOMContentLoaded', function() {
        // Example: Update balance every 30 seconds
        setInterval(async function() {
            try {
                const response = await fetch('/api/user/balance');
                const data = await response.json();
                
                if (data.success) {
                    // Update balance displays
                    document.querySelectorAll('[x-data*="balance"]').forEach(el => {
                        if (el._x_dataStack) {
                            el._x_dataStack[0].balance = data.balance;
                        }
                    });
                }
            } catch (error) {
                console.log('Balance update failed:', error);
            }
        }, 30000);
    });
</script>
@endsection