0x1998 - MANAGER
DΓΌzenlenen Dosya: dashboard.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard β Nexlance</title> <link rel="stylesheet" href="dashboard.css"> <link rel="stylesheet" href="app.css"> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Firebase SDK --> <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-auth-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore-compat.js"></script> </head> <body> <div class="container"> <!-- Sidebar --> <aside class="sidebar"> <h2 class="logo">Nexlance</h2> <ul class="nav"> <li class="active"><a href="dashboard.html">π Dashboard</a></li> <li><a href="clients.html">π₯ Clients</a></li> <li><a href="team.html">π§βπΌ Team</a></li> <li><a href="projects.html">π Projects</a></li> <li><a href="invoices.html">π§Ύ Invoices</a></li> <li><a href="services.html">π Services</a></li> <li><a href="access-roles.html">π Access / Roles</a></li> <hr style="border:none;border-top:1px solid #c9bfff;margin:12px 0 8px;"> <li><a href="developer-info.html">π¨βπ» Support Info</a></li> <hr style="border:none;border-top:1px solid #c9bfff;margin:12px 0 8px;"> <li style="margin-top:auto;"><button id="logoutBtn" style="background:none;border:none;color:#999;cursor:pointer;font-size:0.95rem;padding:8px 0;width:100%;text-align:left;transition:color 0.2s;" title="Logout" onmouseover="this.style.color='#e74c3c'" onmouseout="this.style.color='#999'">πͺ Logout</button></li> </ul> </aside> <!-- Main Content --> <main class="main"> <!-- Top Bar --> <div class="topbar"> <input type="text" placeholder="Search dashboards, clients, projects..."> <div class="profile"><a href="admin.html" style="color:inherit;text-decoration:none;">βοΈ Admin</a></div> </div> <!-- Page Header --> <div class="page-header"> <div class="page-header-left"> <h1>Dashboard</h1> <p id="dashDate" style="color:#999;font-size:0.88rem;"></p> </div> <div class="page-header-actions"> <a href="invoice-create.html" class="btn btn-secondary btn-sm">+ Invoice</a> <a href="clients.html" class="btn btn-primary btn-sm">+ Add Client</a> </div> </div> <!-- Summary Cards --> <section class="cards"> <div class="card"> <h4>Monthly Revenue</h4> <h2 id="dRevenue">βΉ4,80,000</h2> <div style="font-size:0.78rem;color:#aaa;margin-top:4px;">β 12% vs last month</div> </div> <div class="card"> <h4>Active Projects</h4> <h2 id="dProjects">18</h2> <div style="font-size:0.78rem;color:#aaa;margin-top:4px;">Across all clients</div> </div> <div class="card"> <h4>Pending Approvals</h4> <h2 id="dApprovals">6</h2> <div style="font-size:0.78rem;color:#aaa;margin-top:4px;">Awaiting review</div> </div> <div class="card"> <h4>Overdue Tasks</h4> <h2 id="dOverdue">4</h2> <div style="font-size:0.78rem;color:#aaa;margin-top:4px;">Need attention</div> </div> <div class="card"> <h4>Pending Payments</h4> <h2 id="dPending">βΉ1,25,000</h2> <div style="font-size:0.78rem;color:#aaa;margin-top:4px;">Outstanding balance</div> </div> </section> <!-- Quick Navigation Cards --> <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:28px;"> <a href="clients.html" style="background:#fff;border-radius:12px;padding:16px;text-align:center;text-decoration:none;box-shadow:0 4px 10px rgba(108,92,231,0.1);transition:transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'"> <div style="font-size:1.6rem;margin-bottom:6px;">π₯</div> <div style="font-size:0.82rem;font-weight:600;color:#4b3fbf;">Clients</div> </a> <a href="projects.html" style="background:#fff;border-radius:12px;padding:16px;text-align:center;text-decoration:none;box-shadow:0 4px 10px rgba(108,92,231,0.1);transition:transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'"> <div style="font-size:1.6rem;margin-bottom:6px;">π</div> <div style="font-size:0.82rem;font-weight:600;color:#4b3fbf;">Projects</div> </a> <a href="invoices.html" style="background:#fff;border-radius:12px;padding:16px;text-align:center;text-decoration:none;box-shadow:0 4px 10px rgba(108,92,231,0.1);transition:transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'"> <div style="font-size:1.6rem;margin-bottom:6px;">π§Ύ</div> <div style="font-size:0.82rem;font-weight:600;color:#4b3fbf;">Invoices</div> </a> <a href="team.html" style="background:#fff;border-radius:12px;padding:16px;text-align:center;text-decoration:none;box-shadow:0 4px 10px rgba(108,92,231,0.1);transition:transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'"> <div style="font-size:1.6rem;margin-bottom:6px;">π§βπΌ</div> <div style="font-size:0.82rem;font-weight:600;color:#4b3fbf;">Team</div> </a> <a href="services.html" style="background:#fff;border-radius:12px;padding:16px;text-align:center;text-decoration:none;box-shadow:0 4px 10px rgba(108,92,231,0.1);transition:transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'"> <div style="font-size:1.6rem;margin-bottom:6px;">π </div> <div style="font-size:0.82rem;font-weight:600;color:#4b3fbf;">Services</div> </a> <a href="access-roles.html" style="background:#fff;border-radius:12px;padding:16px;text-align:center;text-decoration:none;box-shadow:0 4px 10px rgba(108,92,231,0.1);transition:transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'"> <div style="font-size:1.6rem;margin-bottom:6px;">π</div> <div style="font-size:0.82rem;font-weight:600;color:#4b3fbf;">Roles</div> </a> <a href="invoice-create.html" style="background:linear-gradient(135deg,#6c5ce7,#a29bfe);border-radius:12px;padding:16px;text-align:center;text-decoration:none;box-shadow:0 4px 10px rgba(108,92,231,0.25);transition:transform 0.2s;" onmouseover="this.style.transform='translateY(-3px)'" onmouseout="this.style.transform='translateY(0)'"> <div style="font-size:1.6rem;margin-bottom:6px;">β</div> <div style="font-size:0.82rem;font-weight:600;color:#fff;">New Invoice</div> </a> </div> <!-- Charts Section --> <section class="charts"> <div class="chart-box"> <h3>Website Projects by Status</h3> <canvas id="projectStatusChart"></canvas> </div> <div class="chart-box"> <h3>Revenue Analytics β 2025</h3> <canvas id="revenueChart"></canvas> </div> </section> <!-- Recent Activity --> <section class="activity"> <h3>Recent Activity</h3> <ul id="activityFeed"> <li>π¨ Homepage design approved by TechVision Pvt Ltd</li> <li>π° Payment of βΉ29,500 received from ShopKart India</li> <li>π New task assigned to Arjun β Contact Form Setup</li> <li>π StartupHub Landing Page moved to Live</li> <li>β οΈ Overdue invoice reminder sent to FashionHub</li> <li>π€ New client added β Digital Edge</li> </ul> </section> <!-- Urgent Alerts --> <section class="alerts"> <h3>Urgent Alerts</h3> <div class="alert danger">β οΈ 2 Projects with delayed delivery β FashionHub, Digital Edge</div> <div class="alert warning">π Hosting expiring in 10 days β TechVision (techvision.in)</div> <div class="alert warning">π SSL certificate expiring β FashionHub (fashionhub.in)</div> <div class="alert danger">π§Ύ 3 Unpaid Invoices totalling βΉ94,800</div> </section> </main> </div> <script src="supabase-config.js"></script> <script src="dashboard.js"></script> <script> // Logout functionality document.getElementById('logoutBtn').addEventListener('click', async () => { try { // Sign out from Firebase/Supabase if (typeof firebase !== 'undefined' && firebase.auth) { await firebase.auth().signOut(); } // Clear local storage if needed localStorage.clear(); // Redirect to home page window.location.href = 'index.html'; } catch(error) { console.error('Logout error:', error); // Still redirect even if there's an error window.location.href = 'index.html'; } }); // Update date document.getElementById('dashDate').textContent = 'Good ' + (new Date().getHours() < 12 ? 'morning' : new Date().getHours() < 18 ? 'afternoon' : 'evening') + ' β ' + new Date().toLocaleDateString('en-IN', { weekday:'long', day:'numeric', month:'long', year:'numeric' }); // Load dynamic stats from Supabase / sample data (async () => { try { const [clients, projects, invoices] = await Promise.all([ fetchClients(), fetchProjects(), fetchInvoices() ]); const revenue = invoices.filter(i=>i.status==='paid').reduce((s,i)=>s+(i.total_amount||0),0); const pending = invoices.filter(i=>['pending','overdue'].includes(i.status)).reduce((s,i)=>s+(i.total_amount||0),0); const active = projects.filter(p=>!['Live'].includes(p.status)).length; document.getElementById('dRevenue').textContent = formatCurrency(revenue) || 'βΉ4,80,000'; document.getElementById('dProjects').textContent = active || '18'; document.getElementById('dPending').textContent = formatCurrency(pending) || 'βΉ1,25,000'; } catch(e) { /* use defaults */ } })(); </script> </body> </html>
geri dΓΆn