292 lines
13 KiB
Plaintext
292 lines
13 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DocVA Client | Dashboard</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link rel="stylesheet" href="/public/css/dashboard.css">
|
|
</head>
|
|
<body class="dashboard-body">
|
|
<div id="root">
|
|
<nav class="dashboard-header">
|
|
<div class="header-content">
|
|
<div class="header-logo">
|
|
<div class="logo-container">
|
|
<h2 class="sidebar-title">DocVA Client Portal</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-nav">
|
|
<ul class="nav-list">
|
|
<li class="nav-item">
|
|
<a href="/client/dashboard" class="nav-button active">
|
|
<i class="fas fa-chart-bar"></i>Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/client/invoices" class="nav-button">
|
|
<i class="fas fa-file-invoice"></i>Invoices
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/client/virtual-assistants" class="nav-button">
|
|
<i class="fas fa-users"></i>Virtual Assistants
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/client/timesheets" class="nav-button">
|
|
<i class="fas fa-clock"></i>Timesheets
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="/client/referrals" class="nav-button">
|
|
<i class="fas fa-share-alt"></i>Referrals
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="user-avatar">TT</div>
|
|
|
|
<button class="mobile-menu-button">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="dashboard-container">
|
|
<aside class="dashboard-sidebar">
|
|
<!-- <div class="sidebar-header">
|
|
<h2 class="sidebar-title">DocVA Client Portal</h2>
|
|
</div> -->
|
|
<nav class="sidebar-nav">
|
|
<ul class="sidebar-list">
|
|
<li class="sidebar-item">
|
|
<a href="/client/dashboard" class="sidebar-link active">
|
|
<i class="fas fa-chart-bar sidebar-icon"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="/client/virtual-assistants" class="sidebar-link">
|
|
<i class="fas fa-users sidebar-icon"></i>
|
|
<span>Virtual Assistants</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="/client/timesheets" class="sidebar-link">
|
|
<i class="fas fa-clock sidebar-icon"></i>
|
|
<span>Timesheets</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="/client/invoices" class="sidebar-link">
|
|
<i class="fas fa-file-invoice sidebar-icon"></i>
|
|
<span>Invoices</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="/client/referrals" class="sidebar-link">
|
|
<i class="fas fa-share-alt sidebar-icon"></i>
|
|
<span>Referrals</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
<main class="dashboard-main">
|
|
<div class="dashboard-content">
|
|
<!-- Stats Cards -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<div class="stat-info">
|
|
<h3>Active Virtual Assistants</h3>
|
|
<div class="stat-value" id="activeVaCount">0</div>
|
|
</div>
|
|
<div class="stat-icon blue">
|
|
<i class="fas fa-users fa-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<div class="stat-info">
|
|
<h3>Total Billed Hours</h3>
|
|
<div class="stat-value" id="totalBilledHours">0</div>
|
|
</div>
|
|
<div class="stat-icon green">
|
|
<i class="fas fa-clock fa-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<div class="stat-info">
|
|
<h3>Unpaid Invoices</h3>
|
|
<div class="stat-value" id="unpaidInvoices">$0.00</div>
|
|
</div>
|
|
<div class="stat-icon red">
|
|
<i class="fas fa-file-invoice fa-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-content">
|
|
<div class="stat-info">
|
|
<h3>Outstanding Balance</h3>
|
|
<div class="stat-value" id="outstandingBalance">$0.00</div>
|
|
</div>
|
|
<div class="stat-icon yellow">
|
|
<i class="fas fa-money-bill-wave fa-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="content-grid">
|
|
<!-- Recent Timesheets -->
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Recent Timesheets</h3>
|
|
<a href="/client/timesheets" class="card-link">View All</a>
|
|
</div>
|
|
<div class="activity-list" id="recentTimesheets">
|
|
<!-- Timesheets will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Invoices -->
|
|
<div class="content-card">
|
|
<div class="card-header">
|
|
<h3 class="card-title">Recent Invoices</h3>
|
|
<a href="/client/invoices" class="card-link">View All</a>
|
|
</div>
|
|
<div class="activity-list" id="recentInvoices">
|
|
<!-- Invoices will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Load dashboard data
|
|
async function loadDashboardData() {
|
|
try {
|
|
const response = await fetchWithAuth(`${API_BASE}/dashboard`);
|
|
if (!response) return;
|
|
|
|
const data = await response.json();
|
|
|
|
// Update stats
|
|
document.getElementById('activeVaCount').textContent = data.activeVaCount || 0;
|
|
document.getElementById('totalBilledHours').textContent = data.totalBilledHours || '0';
|
|
document.getElementById('unpaidInvoices').textContent = `$${data.unpaidInvoices || '0.00'}`;
|
|
document.getElementById('outstandingBalance').textContent = `$${data.outstandingBalance || '0.00'}`;
|
|
|
|
// Update recent timesheets
|
|
const timesheetsContainer = document.getElementById('recentTimesheets');
|
|
if (data.recentTimesheets && data.recentTimesheets.length > 0) {
|
|
timesheetsContainer.innerHTML = data.recentTimesheets.map(timesheet => `
|
|
<div class="activity-item">
|
|
<div class="activity-info">
|
|
<h4>${timesheet.virtualAssistant}</h4>
|
|
<p>${timesheet.project}</p>
|
|
</div>
|
|
<div class="activity-meta">
|
|
<div class="value">${timesheet.hours}h</div>
|
|
<div class="date">${timesheet.date}</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
timesheetsContainer.innerHTML = '<div class="empty-state">No recent timesheets</div>';
|
|
}
|
|
|
|
// Update recent invoices
|
|
const invoicesContainer = document.getElementById('recentInvoices');
|
|
if (data.recentInvoices && data.recentInvoices.length > 0) {
|
|
invoicesContainer.innerHTML = data.recentInvoices.map(invoice => `
|
|
<div class="activity-item">
|
|
<div class="activity-info">
|
|
<h4>Invoice #${invoice.id}</h4>
|
|
<p>Due: ${invoice.dueDate}</p>
|
|
</div>
|
|
<div class="activity-meta">
|
|
<div class="value">$${invoice.amount}</div>
|
|
<span class="status-badge ${invoice.status === 'paid' ? 'status-paid' : 'status-unpaid'}">
|
|
${invoice.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} else {
|
|
invoicesContainer.innerHTML = '<div class="empty-state">No recent invoices</div>';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error loading dashboard data:', error);
|
|
}
|
|
}
|
|
|
|
// Load data when page loads
|
|
document.addEventListener('DOMContentLoaded', loadDashboardData);
|
|
</script>
|
|
|
|
<script>
|
|
// Theme management
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
|
|
function getSystemTheme() {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
// Initialize theme
|
|
const savedTheme = localStorage.getItem('theme') || getSystemTheme();
|
|
setTheme(savedTheme);
|
|
|
|
// // API base URL
|
|
// const API_BASE = '/api/v1/client';
|
|
|
|
// // Auth token management
|
|
// function getAuthToken() {
|
|
// return localStorage.getItem('authToken');
|
|
// }
|
|
|
|
// async function fetchWithAuth(url, options = {}) {
|
|
// const token = getAuthToken();
|
|
// if (!token) {
|
|
// window.location.href = '/client/login';
|
|
// return;
|
|
// }
|
|
|
|
// const response = await fetch(url, {
|
|
// ...options,
|
|
// headers: {
|
|
// 'Authorization': `Bearer ${token}`,
|
|
// 'Content-Type': 'application/json',
|
|
// ...options.headers,
|
|
// }
|
|
// });
|
|
|
|
// if (response.status === 401) {
|
|
// localStorage.removeItem('authToken');
|
|
// window.location.href = '/client/login';
|
|
// return;
|
|
// }
|
|
|
|
// return response;
|
|
// }
|
|
</script>
|
|
</body>
|
|
</html> |