raham12/taskmaster-pro-client-earnings-tracker

1 2// Main application script3document.addEventListener('DOMContentLoaded', () => {4    // Check auth state5    firebase.auth().onAuthStateChanged((user) => {6        const app = document.getElementById('app');7        8        if (user) {9            // User is logged in10            loadDashboard(user);11        } else {12            // Show auth modal13            app.innerHTML = `<custom-auth-modal></custom-auth-modal>`;14            setupAuthListeners();15        }16    });17});18 19// Setup auth event listeners20function setupAuthListeners() {21    document.addEventListener('login-attempt', (e) => {22        handleLogin(e.detail.email, e.detail.password);23    });24 25    document.addEventListener('logout', () => {26        handleLogout();27    });28}29 30// Load appropriate dashboard based on user role31async function loadDashboard(user) {32    const app = document.getElementById('app');33    const isAdmin = user.email === 'admin@taskmaster.com'; 34    35    if (isAdmin) {36        app.innerHTML = `37            <custom-navbar></custom-navbar>38            <div class="flex flex-1">39                <custom-admin-sidebar></custom-admin-sidebar>40                <main class="flex-1 p-6 bg-gray-100">41                    <h1 class="text-2xl font-bold mb-6">Admin Dashboard</h1>42                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="adminContent"></div>43                </main>44            </div>45        `;46        loadAdminDashboard();47    } else {48        app.innerHTML = `49            <custom-navbar></custom-navbar>50            <div class="flex flex-1">51                <custom-user-sidebar></custom-user-sidebar>52                <main class="flex-1 p-6 bg-gray-100">53                    <h1 class="text-2xl font-bold mb-6">My Dashboard</h1>54                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="userContent"></div>55                    <custom-activity-log></custom-activity-log>56                </main>57            </div>58        `;59        loadUserDashboard();60    }61    62    setupNavbarListeners();63    setupTaskListeners();64}65 66// Load admin dashboard components67function loadAdminDashboard() {68    const adminContent = document.getElementById('adminContent');69    70    // Stats cards71    adminContent.innerHTML = `72        <div class="bg-white p-6 rounded-lg shadow border border-gray-200">73            <h3 class="text-lg font-medium text-gray-900 mb-2">Active Users</h3>74            <p class="text-3xl font-bold text-indigo-600">42</p>75        </div>76        <div class="bg-white p-6 rounded-lg shadow border border-gray-200">77            <h3 class="text-lg font-medium text-gray-900 mb-2">Pending Tasks</h3>78            <p class="text-3xl font-bold text-amber-600">18</p>79        </div>80        <div class="bg-white p-6 rounded-lg shadow border border-gray-200">81            <h3 class="text-lg font-medium text-gray-900 mb-2">Total Earnings</h3>82            <p class="text-3xl font-bold text-green-600">$1,284</p>83        </div>84    `;85}86 87// Load user dashboard components88function loadUserDashboard() {89    const userContent = document.getElementById('userContent');90    91    // User stats92    userContent.innerHTML = `93        <div class="bg-white p-6 rounded-lg shadow border border-gray-200">94            <h3 class="text-lg font-medium text-gray-900 mb-2">Your Balance</h3>95            <p class="text-3xl font-bold text-indigo-600">$42.50</p>96            <button class="mt-4 w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition">97                Request Payout98            </button>99        </div>100        <div class="bg-white p-6 rounded-lg shadow border border-gray-200">101            <h3 class="text-lg font-medium text-gray-900 mb-2">Available Tasks</h3>102            <p class="text-3xl font-bold text-green-600">5</p>103            <button class="mt-4 w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition">104                View Tasks105            </button>106        </div>107    `;108    109    // Sample tasks110    const mainContent = document.querySelector('main');111    const tasksSection = document.createElement('div');112    tasksSection.className = 'mt-8';113    tasksSection.innerHTML = `114        <h2 class="text-xl font-semibold mb-4">Your Recent Tasks</h2>115        <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="userTasks"></div>116    `;117    mainContent.appendChild(tasksSection);118    119    // Add sample tasks120    const tasks = [121        { id: 1, title: "Social Media Engagement", description: "Like and comment on 3 posts", reward: "2.50", status: "completed" },122        { id: 2, title: "Website Testing", description: "Test checkout flow on mobile", reward: "5.00", status: "pending" },123        { id: 3, title: "Survey Completion", description: "Complete customer satisfaction survey", reward: "3.50", status: "rejected" }124    ];125    126    const tasksContainer = document.getElementById('userTasks');127    tasks.forEach(task => {128        const taskCard = document.createElement('custom-task-card');129        taskCard.setAttribute('task-id', task.id);130        taskCard.setAttribute('title', task.title);131        taskCard.setAttribute('description', task.description);132        taskCard.setAttribute('reward', task.reward);133        taskCard.setAttribute('status', task.status);134        tasksContainer.appendChild(taskCard);135    });136}137 138// Setup navbar event listeners139function setupNavbarListeners() {140    document.addEventListener('click', (e) => {141        if (e.target.id === 'logoutBtn') {142            handleLogout();143        }144    });145}146 147// Setup task event listeners148function setupTaskListeners() {149    document.addEventListener('complete-task', (e) => {150        const taskId = e.detail.taskId;151        alert(`Task ${taskId} marked as complete!`);152        // In real app, would update task status in database153    });154    155    document.addEventListener('resubmit-task', (e) => {156        const taskId = e.detail.taskId;157        alert(`Task ${taskId} resubmitted for review!`);158        // In real app, would update task status in database159    });160}161 162// Auth functions163function handleLogin(email, password) {164    firebase.auth().signInWithEmailAndPassword(email, password)165        .then((userCredential) => {166            logActivity(userCredential.user.uid, 'login', 'User logged in');167        })168        .catch((error) => {169            alert(`Login failed: ${error.message}`);170        });171}172 173function handleLogout() {174    const user = firebase.auth().currentUser;175    176    if (user) {177        logActivity(user.uid, 'logout', 'User logged out');178    }179    180    firebase.auth().signOut()181        .then(() => {182            window.location.reload(); // Refresh to show login screen183        })184        .catch((error) => {185            console.error('Logout error:', error);186        });187}188 189// Activity logging190function logActivity(userId, action, details) {191    const timestamp = new Date().toISOString();192    console.log(`[${timestamp}] User ${userId} - ${action}: ${details}`);193    // In real app, would send to backend to store in database194}195 196// Initialize Google Sheets API197function initGoogleSheets() {198    gapi.load('client:auth2', () => {199        gapi.client.init({200            apiKey: 'YOUR_API_KEY',201            clientId: 'YOUR_CLIENT_ID',202            discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],203            scope: "https://www.googleapis.com/auth/spreadsheets"204        }).then(() => {205            console.log('Google Sheets API initialized');206        });207    });208}209