504 lines
20 KiB
Plaintext
504 lines
20 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/virtual-assistants" class="nav-button">
|
|
<i class="fas fa-users"></i>Virtual Assistants
|
|
</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/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 VA</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 VA's</h3>
|
|
<div class="stat-value" id="totalVaCount">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 Projects</h3>
|
|
<div class="stat-value" id="totalProjects">0</div>
|
|
</div>
|
|
<div class="stat-icon green">
|
|
<i class="fas fa-clock fa-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Virtual Assistants List -->
|
|
<div class="content-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Virtual Assistants <span class="total-count" id="vaListCount">0 VAs</span></h2>
|
|
|
|
</div>
|
|
<div class="table-container">
|
|
<div class="table-wrapper">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Virtual Assistant</th>
|
|
<th>Projects Assigned</th>
|
|
<th>Working from</th>
|
|
<th>Total Worked</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="vaTableBody">
|
|
<!-- Data will be loaded here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="vaEmptyState" style="display: none;">
|
|
<div class="empty-state">
|
|
<i class="fas fa-users"></i>
|
|
<h3>No Virtual Assistants</h3>
|
|
<p>You haven't assigned any virtual assistants yet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<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('knoptpq');
|
|
}
|
|
|
|
async function fetchWithAuth(url, options = {}) {
|
|
const token = getAuthToken();
|
|
if (!token) {
|
|
window.location.href = '/client/login';
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(url, {
|
|
...options,
|
|
headers: {
|
|
'token': `${token}`,
|
|
'Content-Type': 'application/json',
|
|
...options.headers,
|
|
}
|
|
});
|
|
|
|
if (response.status === 401) {
|
|
localStorage.removeItem('knoptpq');
|
|
localStorage.removeItem('refreshToken');
|
|
window.location.href = '/client/login';
|
|
return;
|
|
}
|
|
|
|
return response;
|
|
}
|
|
|
|
// Format time function
|
|
function formatTime(seconds) {
|
|
if (!seconds) return '';
|
|
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
|
|
if (hours > 0) {
|
|
return `${hours}h ${minutes}m`;
|
|
} else if (minutes > 0) {
|
|
return `${minutes}m`;
|
|
} else if (seconds > 0) {
|
|
return `${seconds}s`;
|
|
} else {
|
|
return 'Just started';
|
|
}
|
|
}
|
|
|
|
// Create VA card HTML
|
|
function createVATableRow(va) {
|
|
const statusClass = va.isCurrentlyActive ? 'active' : 'inactive';
|
|
const statusText = va.isCurrentlyActive ? 'Active' : 'Inactive';
|
|
const workedTime = formatTime(va.currentSessionDuration);
|
|
const totalWorkedTime = formatTime(va.totalWorkedSeconds);
|
|
const projectsAssigned = va.projectsAssigned || 0;
|
|
const viewLink = va.isCurrentlyActive ? `<a href="/live/${va.lastProjectId}/${va.id}" class="view-link" data-va-id="${va.id}" target="_blank">
|
|
<i class="fas fa-eye"></i>
|
|
View
|
|
</a>` : '';
|
|
|
|
return `
|
|
<tr data-vaid="${va.id}">
|
|
<td>
|
|
<div class="status-indicator">
|
|
<div class="status-dot ${statusClass}"></div>
|
|
<span class="status-text ${statusClass}">${statusText}</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="va-info">
|
|
<div class="va-name">${va.name}</div>
|
|
<div class="va-email">${va.email || 'N/A'}</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="projects-count">${projectsAssigned} Projects</span>
|
|
</td>
|
|
<td>
|
|
<span class="worked-time">${workedTime}</span>
|
|
</td>
|
|
<td>
|
|
<span class="worked-time">${totalWorkedTime}</span>
|
|
</td>
|
|
<td>
|
|
${viewLink}
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
// Load dashboard data
|
|
async function loadDashboardData() {
|
|
try {
|
|
const response = await fetchWithAuth(`${API_BASE}/dashboard`);
|
|
if (!response) return;
|
|
const result = await response.json();
|
|
// console.log(data)
|
|
|
|
if (result.success) {
|
|
const data = result.data;
|
|
const summary = result.summary;
|
|
|
|
// Update stats cards
|
|
document.getElementById('activeVaCount').textContent = summary.activeVAs || 0;
|
|
document.getElementById('totalVaCount').textContent = summary.totalVAs || 0;
|
|
document.getElementById('totalProjects').textContent = summary.totalProjects || 0;
|
|
|
|
// Update VA list count
|
|
document.getElementById('vaListCount').textContent = `${summary.totalVAs || 0} VAs`;
|
|
|
|
// Update VA table
|
|
const vaTableBody = document.getElementById('vaTableBody');
|
|
const vaEmptyState = document.getElementById('vaEmptyState');
|
|
const allVAs = data.allVAs?.total || [];
|
|
|
|
if (allVAs.length > 0) {
|
|
vaTableBody.innerHTML = allVAs.map(va => createVATableRow(va)).join('');
|
|
vaTableBody.style.display = '';
|
|
vaEmptyState.style.display = 'none';
|
|
|
|
// Add event listeners to table rows
|
|
document.querySelectorAll('tr[data-vaid]').forEach(row => {
|
|
row.addEventListener('click', async function(e) {
|
|
// Don't trigger if click is on view link
|
|
if (e.target.closest('.view-link')) {
|
|
return;
|
|
}
|
|
|
|
const vaId = this.getAttribute('data-vaid');
|
|
const vaData = allVAs.find(va => va.id === vaId);
|
|
|
|
if (vaData) {
|
|
// Show loading state
|
|
const originalContent = this.innerHTML;
|
|
this.innerHTML = '<td colspan="6" style="text-align: center;"><i class="fas fa-spinner fa-spin"></i> Loading...</td>';
|
|
|
|
// Fetch additional VA details from /test API
|
|
const projectData = await fetchVADetails(vaId);
|
|
|
|
// Restore original content
|
|
this.innerHTML = originalContent;
|
|
|
|
// Show popup with VA details
|
|
showVAPopup(projectData);
|
|
}
|
|
});
|
|
});
|
|
|
|
} else {
|
|
vaTableBody.innerHTML = '';
|
|
vaTableBody.style.display = 'none';
|
|
vaEmptyState.style.display = 'block';
|
|
}
|
|
|
|
} else {
|
|
console.error('Failed to load dashboard data:', result.message);
|
|
showError('Failed to load dashboard data');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error loading dashboard data:', error);
|
|
showError('Error loading dashboard data');
|
|
}
|
|
}
|
|
|
|
// Show error message
|
|
function showError(message) {
|
|
const vaTableBody = document.getElementById('vaTableBody');
|
|
const vaEmptyState = document.getElementById('vaEmptyState');
|
|
|
|
vaTableBody.style.display = 'none';
|
|
vaEmptyState.innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h3>Error</h3>
|
|
<p>${message}</p>
|
|
</div>
|
|
`;
|
|
vaEmptyState.style.display = 'block';
|
|
}
|
|
|
|
// Load data when page loads
|
|
document.addEventListener('DOMContentLoaded', loadDashboardData);
|
|
|
|
// Optional: Auto-refresh data every 30 seconds
|
|
setInterval(loadDashboardData, 30000);
|
|
|
|
function createPopup(vaData) {
|
|
// Extract project details from the API response
|
|
// The API response is the project array, so use it directly
|
|
const projectDetails = Array.isArray(vaData) ? vaData : (vaData.projects || []);
|
|
|
|
// Create project details HTML
|
|
const projectsHTML = projectDetails.length > 0
|
|
? projectDetails.map(project => `
|
|
<div class="project-item">
|
|
<div class="project-header">
|
|
<span class="project-name">${project.projectName || 'Unknown Project'}</span>
|
|
<span class="project-time">${project.totalTime || '00:00:00'}</span>
|
|
</div>
|
|
<div class="project-id">ID: ${project.projectId || 'N/A'}</div>
|
|
</div>
|
|
`).join('')
|
|
: '<div class="no-projects">No project data available</div>';
|
|
|
|
return `
|
|
<div class="popup-overlay" id="vaPopup">
|
|
<div class="popup-content">
|
|
<div class="popup-header">
|
|
<h3>Project Work Details</h3>
|
|
<button class="popup-close" id="closePopup">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="popup-body">
|
|
<!-- Project Count -->
|
|
<div class="project-summary">
|
|
<div class="total-projects">
|
|
<i class="fas fa-folder-open"></i>
|
|
<span>Total Projects: ${projectDetails.length}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Details List -->
|
|
<div class="projects-list">
|
|
${projectsHTML}
|
|
</div>
|
|
</div>
|
|
<div class="popup-footer">
|
|
<button class="btn btn-secondary" id="closePopupBtn">
|
|
<i class="fas fa-times"></i> Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Show popup with VA details
|
|
function showVAPopup(projectData) {
|
|
console.log('Project Data:', projectData);
|
|
|
|
// Remove existing popup if any
|
|
const existingPopup = document.getElementById('vaPopup');
|
|
if (existingPopup) {
|
|
existingPopup.remove();
|
|
}
|
|
|
|
// Create and show new popup with only project data
|
|
const popupHTML = createPopup(projectData);
|
|
document.body.insertAdjacentHTML('beforeend', popupHTML);
|
|
|
|
// Add event listeners for closing popup
|
|
document.getElementById('closePopup').addEventListener('click', closePopup);
|
|
document.getElementById('closePopupBtn').addEventListener('click', closePopup);
|
|
|
|
// Close popup when clicking outside
|
|
document.getElementById('vaPopup').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closePopup();
|
|
}
|
|
});
|
|
|
|
// Close popup with Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closePopup();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Fetch VA details for popup - now returns only project data
|
|
async function fetchVADetails(vaId) {
|
|
try {
|
|
const response = await fetchWithAuth(`${API_BASE}/dashboard/va-report`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ vaId: vaId }),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (!response) return;
|
|
|
|
const result = await response.json();
|
|
console.log('API Response:', result);
|
|
|
|
if (result.success) {
|
|
// Return the projects array directly
|
|
return result.projects || [];
|
|
} else {
|
|
console.error('Failed to fetch project details:', result.message);
|
|
return [];
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching project details:', error);
|
|
return [];
|
|
}
|
|
}
|
|
|
|
// Close popup function
|
|
function closePopup() {
|
|
const popup = document.getElementById('vaPopup');
|
|
if (popup) {
|
|
popup.remove();
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |