509 lines
20 KiB
Plaintext
509 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">
|
|
<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/projects" class="nav-button active">
|
|
<i class="fas fa-file-invoice"></i>Projects
|
|
</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>
|
|
|
|
|
|
<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/profile" class="sidebar-link">
|
|
<i class="fas fa-user sidebar-icon"></i>
|
|
<span>Profile</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="/client/dashboard" class="sidebar-link">
|
|
<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/projects" class="sidebar-link active">
|
|
<i class="fas fa-file-invoice sidebar-icon"></i>
|
|
<span>Projects</span>
|
|
</a>
|
|
</li>
|
|
<li class="sidebar-item">
|
|
<a href="javascript:void(0);" class="sidebar-link" id="logoutButton">
|
|
<i class="fas fa-sign-out-alt sidebar-icon"></i>
|
|
<span>Logout</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
<main class="dashboard-main">
|
|
<div class="dashboard-content">
|
|
<!-- Projects List -->
|
|
<div class="content-section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Projects <span class="total-count" id="projectsCount">0 Projects</span></h2>
|
|
</div>
|
|
<div class="table-container">
|
|
<div class="table-wrapper">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Hourly Rate</th>
|
|
<th>Total VA Assigned</th>
|
|
<th>Dedicated Hours</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="projectsTableBody">
|
|
<!-- Data will be loaded here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="projectsEmptyState" style="display: none;">
|
|
<div class="empty-state">
|
|
<i class="fas fa-briefcase"></i>
|
|
<h3>No Projects</h3>
|
|
<p>You don't have any projects yet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<div id="projectModal" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<div class="modal-header" style="display: flex;align-items: center;justify-content: space-between;">
|
|
<h2 class="modal-title" id="modalProjectName">Project Details</h2>
|
|
<button class="modal-close" id="modalClose">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="va-details-section">
|
|
<h3 class="va-section-title">
|
|
<i class="fas fa-users"></i>
|
|
Virtual Assistants
|
|
<span class="va-count-badge" id="vaCountBadge">0</span>
|
|
</h3>
|
|
|
|
<div class="va-table-container">
|
|
<table class="va-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Virtual Assistant</th>
|
|
<th>Status</th>
|
|
<th>Activity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="modalVATableBody">
|
|
<!-- VA details will be loaded here -->
|
|
</tbody>
|
|
</table>
|
|
<div id="modalNoVAs" class="no-vas-message" style="display: none;">
|
|
<i class="fas fa-user-friends"></i>
|
|
<h4>No Virtual Assistants</h4>
|
|
<p>No VAs are currently assigned to this project.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="logoutModal" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">Confirm Logout</h2>
|
|
<button class="modal-close" onclick="closeLogoutModal()">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="logout-modal-body">
|
|
<div class="logout-icon">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</div>
|
|
<h3 class="logout-title">Are you sure you want to logout?</h3>
|
|
<p class="logout-message">You will be logged out of your account and redirected to the login page.</p>
|
|
<div class="logout-actions">
|
|
<button class="logout-cancel-btn" onclick="closeLogoutModal()">Cancel</button>
|
|
<button class="logout-confirm-btn" id="confirmLogoutBtn">Yes, Logout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 = 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 = '/';
|
|
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 = '/';
|
|
return;
|
|
}
|
|
|
|
return response;
|
|
}
|
|
|
|
async function handleLogout() {
|
|
try {
|
|
// Call logout API
|
|
await fetchWithAuth(`${API_BASE}/logout`, {
|
|
method: 'POST'
|
|
});
|
|
} catch (error) {
|
|
console.error('Logout API error:', error);
|
|
} finally {
|
|
// Clear local storage and redirect
|
|
localStorage.removeItem('knoptpq');
|
|
localStorage.removeItem('refreshToken');
|
|
window.location.href = '/';
|
|
}
|
|
}
|
|
|
|
// Modal management
|
|
const projectModal = document.getElementById('projectModal');
|
|
const modalClose = document.getElementById('modalClose');
|
|
const modalProjectName = document.getElementById('modalProjectName');
|
|
const modalVATableBody = document.getElementById('modalVATableBody');
|
|
const modalNoVAs = document.getElementById('modalNoVAs');
|
|
const vaCountBadge = document.getElementById('vaCountBadge');
|
|
|
|
function openProjectModal(project) {
|
|
// Set project name
|
|
modalProjectName.textContent = project.name || 'Unnamed Project';
|
|
|
|
// Set project info
|
|
const hourlyRate = project.hourlyRate ? `$${project.hourlyRate}/hr` : 'Not set';
|
|
const dedicatedHours = project.dedicatedHours || 'Not set';
|
|
const statusText = project.status === 'ACTIVE' ? 'Active' : 'Inactive';
|
|
const statusClass = project.status === 'ACTIVE' ? 'active' : 'inactive';
|
|
|
|
// Set VA details
|
|
const assignedVAs = project.assignedVADetails || [];
|
|
vaCountBadge.textContent = assignedVAs.length;
|
|
|
|
if (assignedVAs.length > 0) {
|
|
modalVATableBody.innerHTML = assignedVAs.map(va => createVATableRow(va)).join('');
|
|
modalVATableBody.style.display = '';
|
|
modalNoVAs.style.display = 'none';
|
|
} else {
|
|
modalVATableBody.innerHTML = '';
|
|
modalVATableBody.style.display = 'none';
|
|
modalNoVAs.style.display = 'block';
|
|
}
|
|
|
|
// Show modal
|
|
projectModal.style.display = 'block';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function createVATableRow(va) {
|
|
const statusClass = va.status === 'FULLTIME' ? 'active' : 'inactive';
|
|
const statusText = va.status === 'FULLTIME' ? 'Full Time' :
|
|
va.status === 'PARTTIME' ? 'Part Time' : 'Inactive';
|
|
|
|
const activityClass = va.isActive ? 'active' : 'inactive';
|
|
const activityText = va.isActive ? 'Currently Active' : 'Not Active';
|
|
|
|
// Get initials for avatar
|
|
const initials = (va.firstName?.charAt(0) || '') + (va.lastName?.charAt(0) || '') || 'VA';
|
|
|
|
return `
|
|
<tr>
|
|
<td>
|
|
<div class="va-name">
|
|
<div class="va-avatar">${initials}</div>
|
|
<div class="va-details">
|
|
<span class="va-fullname">${va.firstName} ${va.lastName}</span>
|
|
<span class="va-email">${va.email}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class=" ${statusClass}">
|
|
${statusText}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="activity-status">
|
|
<div class="activity-dot ${activityClass}"></div>
|
|
<span>${activityText}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
function closeProjectModal() {
|
|
projectModal.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
projectModal.addEventListener('click', (e) => {
|
|
if (e.target === projectModal) {
|
|
closeProjectModal();
|
|
}
|
|
});
|
|
|
|
// Close modal with escape key
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && projectModal.style.display === 'block') {
|
|
closeProjectModal();
|
|
}
|
|
});
|
|
|
|
function createProjectTableRow(project) {
|
|
const statusClass = project.status === 'ACTIVE' ? 'active' : 'inactive';
|
|
const statusText = project.status === 'ACTIVE' ? 'Active' : 'Inactive';
|
|
const hourlyRate = project.hourlyRate ? `$${project.hourlyRate}/hr` : '-';
|
|
const dedicatedHours = project.dedicatedHours ? `${project.dedicatedHours}` : '-';
|
|
|
|
return `
|
|
<tr class="project-row" data-project-id="${project.id}">
|
|
<td>
|
|
<div class="project-info">
|
|
<div class="project-name">${project.name || 'Unnamed Project'}</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="hourly-rate">${hourlyRate}</span>
|
|
</td>
|
|
<td>
|
|
<span class="va-count">${project.vaAssigned || 0}</span>
|
|
</td>
|
|
<td>
|
|
<span class="dedicated-hours">${dedicatedHours}</span>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
// Load dashboard data
|
|
async function loadDashboardData() {
|
|
try {
|
|
const response = await fetchWithAuth(`${API_BASE}/dashboard-projects`);
|
|
if (!response) return;
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
const data = result.data;
|
|
const counts = result.counts;
|
|
|
|
// Update counts
|
|
document.getElementById('projectsCount').textContent = `${counts.totalProjects || 0} Projects`;
|
|
|
|
// Update Projects table
|
|
const projectsTableBody = document.getElementById('projectsTableBody');
|
|
const projectsEmptyState = document.getElementById('projectsEmptyState');
|
|
const projects = data.projects || [];
|
|
|
|
if (projects.length > 0) {
|
|
projectsTableBody.innerHTML = projects.map(project => createProjectTableRow(project)).join('');
|
|
projectsTableBody.style.display = '';
|
|
projectsEmptyState.style.display = 'none';
|
|
|
|
// Add click event listeners to project rows
|
|
document.querySelectorAll('.project-row').forEach((row, index) => {
|
|
row.addEventListener('click', function() {
|
|
const project = projects[index];
|
|
openProjectModal(project);
|
|
});
|
|
});
|
|
} else {
|
|
projectsTableBody.innerHTML = '';
|
|
projectsTableBody.style.display = 'none';
|
|
projectsEmptyState.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 projectsTableBody = document.getElementById('projectsTableBody');
|
|
const projectsEmptyState = document.getElementById('projectsEmptyState');
|
|
const vaTableBody = document.getElementById('vaTableBody');
|
|
const vaEmptyState = document.getElementById('vaEmptyState');
|
|
|
|
// Hide tables
|
|
projectsTableBody.style.display = 'none';
|
|
vaTableBody.style.display = 'none';
|
|
|
|
// Show error states
|
|
projectsEmptyState.innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h3>Error</h3>
|
|
<p>${message}</p>
|
|
</div>
|
|
`;
|
|
projectsEmptyState.style.display = 'block';
|
|
|
|
vaEmptyState.innerHTML = `
|
|
<div class="empty-state">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h3>Error</h3>
|
|
<p>${message}</p>
|
|
</div>
|
|
`;
|
|
vaEmptyState.style.display = 'block';
|
|
}
|
|
|
|
|
|
// Optional: Auto-refresh data every 30 seconds
|
|
setInterval(loadDashboardData, 30000);
|
|
|
|
// Logout Modal Functions
|
|
function openLogoutModal() {
|
|
const modal = document.getElementById('logoutModal');
|
|
modal.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeLogoutModal() {
|
|
const modal = document.getElementById('logoutModal');
|
|
modal.style.display = 'none';
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Load dashboard data
|
|
loadDashboardData();
|
|
|
|
// Mobile menu toggle
|
|
const menuToggle = document.querySelector('.mobile-menu-button');
|
|
const sidebar = document.querySelector('.dashboard-sidebar');
|
|
menuToggle.addEventListener('click', () => {
|
|
sidebar.classList.toggle('active');
|
|
});
|
|
|
|
// Close modal with escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeLogoutModal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('logoutModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeLogoutModal();
|
|
}
|
|
});
|
|
|
|
// Logout button - opens confirmation modal instead of directly logging out
|
|
document.getElementById('logoutButton').addEventListener('click', openLogoutModal);
|
|
|
|
// Confirm logout button
|
|
document.getElementById('confirmLogoutBtn').addEventListener('click', handleLogout);
|
|
});
|
|
|
|
modalClose.addEventListener('click', closeProjectModal);
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |