revert commit
This commit is contained in:
parent
d036a71810
commit
344d6181fa
|
|
@ -20,7 +20,6 @@
|
|||
"dotenv": "^16.4.7",
|
||||
"ejs": "^3.1.10",
|
||||
"express": "^4.19.2",
|
||||
"express-ejs-layouts": "^2.5.1",
|
||||
"express-minify": "^1.0.0",
|
||||
"helmet": "^8.1.0",
|
||||
"html-minifier": "^4.0.0",
|
||||
|
|
@ -4233,11 +4232,6 @@
|
|||
"node": ">= 0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/express-ejs-layouts": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/express-ejs-layouts/-/express-ejs-layouts-2.5.1.tgz",
|
||||
"integrity": "sha512-IXROv9n3xKga7FowT06n1Qn927JR8ZWDn5Dc9CJQoiiaaDqbhW5PDmWShzbpAa2wjWT1vJqaIM1S6vJwwX11gA=="
|
||||
},
|
||||
"node_modules/express-minify": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/express-minify/-/express-minify-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
"scripts": {
|
||||
"start": "nodemon --inspect src/server.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"deploy": "curl -X POST http://35.162.222.18:9000/hooks/deploy-va-middleware",
|
||||
"deploy": "curl -X POST http://35.95.209.161:9000/hooks/deploy-va-middleware",
|
||||
"build": "npx webpack --mode production",
|
||||
"dev": "npx webpack --mode development"
|
||||
},
|
||||
|
|
@ -25,7 +25,6 @@
|
|||
"dotenv": "^16.4.7",
|
||||
"ejs": "^3.1.10",
|
||||
"express": "^4.19.2",
|
||||
"express-ejs-layouts": "^2.5.1",
|
||||
"express-minify": "^1.0.0",
|
||||
"helmet": "^8.1.0",
|
||||
"html-minifier": "^4.0.0",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
--color-gray-700: #374151;
|
||||
--color-gray-800: #1f2937;
|
||||
--color-gray-900: #111827;
|
||||
|
||||
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-card: #ffffff;
|
||||
|
|
@ -213,7 +213,6 @@ body {
|
|||
transform: translateX(-100%);
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
.dashboard-sidebar.active {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
|
@ -261,54 +260,6 @@ body {
|
|||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== FIX DUPLICATE SELECT ICON ISSUE ===== */
|
||||
select,
|
||||
.select-field {
|
||||
appearance: none !important;
|
||||
-webkit-appearance: none !important;
|
||||
-moz-appearance: none !important;
|
||||
|
||||
background-image: none !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: unset !important;
|
||||
}
|
||||
|
||||
/* Custom select wrapper */
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.void-btn-a {
|
||||
background: tomato;
|
||||
text-decoration: none;
|
||||
color: #ffffff !important;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Add spacing for icon */
|
||||
.select-wrapper select {
|
||||
width: 100%;
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
/* Single dropdown icon */
|
||||
.select-icon {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
[data-theme="dark"] .sidebar-link:hover {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
|
|
@ -748,7 +699,6 @@ select,
|
|||
opacity: 0;
|
||||
transform: scale(0.9) translateY(-20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
|
|
@ -994,17 +944,17 @@ tr[data-vaid]:hover {
|
|||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.project-time {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.detail-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
.detail-item span {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1265,17 +1215,9 @@ tr[data-vaid]:hover {
|
|||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.no-vas-message {
|
||||
|
|
@ -1673,11 +1615,11 @@ tr[data-vaid]:hover {
|
|||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
||||
.modal-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.logout-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -1685,49 +1627,41 @@ tr[data-vaid]:hover {
|
|||
|
||||
/* Additional Dark Mode Styles for Elements Not Covered */
|
||||
[data-theme="dark"] {
|
||||
|
||||
/* Ensure all text colors are properly set */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
p,
|
||||
span,
|
||||
div {
|
||||
|
||||
p, span, div {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
/* Form elements */
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
|
||||
/* Selection color */
|
||||
::selection {
|
||||
background: rgba(59, 130, 246, 0.3);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-gray-600);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-gray-500);
|
||||
}
|
||||
|
|
@ -1774,167 +1708,4 @@ tr[data-vaid]:hover {
|
|||
|
||||
.va-action:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
|
||||
/* ================================
|
||||
PROFILE DROPDOWN (GLASS STYLE)
|
||||
================================ */
|
||||
.header-profile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profile-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
padding: 0.70rem 0.75rem;
|
||||
|
||||
border-radius: 999px;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
/* NEW */
|
||||
border: 1px solid var(--border-color);
|
||||
background: linear-gradient(135deg, rgba(255, 0, 150, 0.3), rgba(0, 204, 255, 0.3));
|
||||
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
/* Hover effect */
|
||||
.profile-trigger:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Active (clicked/open) state */
|
||||
.profile-trigger.active {
|
||||
background-color: rgba(0, 123, 255, 0.1);
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
|
||||
}
|
||||
|
||||
|
||||
[data-theme="dark"] .profile-trigger:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* Avatar */
|
||||
.profile-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid #3b82f6;
|
||||
}
|
||||
|
||||
/* Name */
|
||||
.profile-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color, #111827);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .profile-name {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.profile-trigger i {
|
||||
font-size: 0.7rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
DROPDOWN MENU
|
||||
================================ */
|
||||
.profile-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 0.45rem);
|
||||
right: 0;
|
||||
width: 240px;
|
||||
border-radius: 12px;
|
||||
backdrop-filter: blur(16px);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .profile-menu {
|
||||
background: rgba(30, 30, 30, 0.9);
|
||||
}
|
||||
|
||||
/* Show menu on hover */
|
||||
.profile-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-menu.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* Menu items */
|
||||
.profile-menu a,
|
||||
.logout-btn {
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-color, #111827);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.profile-menu a:hover,
|
||||
.logout-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .profile-menu a,
|
||||
[data-theme="dark"] .logout-btn {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .profile-menu a:hover,
|
||||
[data-theme="dark"] .logout-btn:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.menu-divider {
|
||||
height: 1px;
|
||||
background: var(--border-color);
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
/* Logout */
|
||||
.logout-btn {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.logout-btn i {
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
RESPONSIVE
|
||||
================================ */
|
||||
@media (max-width: 768px) {
|
||||
.profile-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 435 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" zoomAndPan="magnify" viewBox="0 0 600 599.999999" height="800" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="256ef070a6"><path d="M 23.410156 9.867188 L 578 9.867188 L 578 588 L 23.410156 588 Z M 23.410156 9.867188 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#256ef070a6)"><path fill="#060165" d="M 287.648438 9.867188 L 23.410156 9.867188 L 23.410156 321.480469 C 23.410156 468.195312 142.195312 587.019531 288.859375 587.019531 C 447.644531 587.019531 577.339844 457.28125 577.339844 298.445312 C 577.339844 139.605469 447.644531 9.867188 287.648438 9.867188 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#ffffff" d="M 237.949219 186.894531 C 237.949219 217.207031 212.496094 242.667969 182.195312 242.667969 C 151.890625 242.667969 126.4375 268.132812 126.4375 298.445312 C 126.4375 328.757812 151.890625 354.21875 182.195312 354.21875 L 293.707031 354.21875 C 324.011719 354.21875 349.464844 328.757812 349.464844 298.445312 L 349.464844 186.894531 C 349.464844 156.582031 324.011719 131.117188 293.707031 131.117188 C 263.40625 131.117188 237.949219 156.582031 237.949219 186.894531 " fill-opacity="1" fill-rule="nonzero"/><path fill="#05c3ec" d="M 361.585938 409.992188 C 361.585938 379.679688 387.039062 354.21875 417.34375 354.21875 C 447.644531 354.21875 473.097656 328.757812 473.097656 298.445312 C 473.097656 268.132812 447.644531 242.667969 417.34375 242.667969 L 305.828125 242.667969 C 275.527344 242.667969 250.070312 268.132812 250.070312 298.445312 L 250.070312 409.992188 C 250.070312 440.304688 275.527344 465.769531 305.828125 465.769531 C 336.132812 465.769531 361.585938 440.304688 361.585938 409.992188 " fill-opacity="1" fill-rule="nonzero"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,29 +0,0 @@
|
|||
window.getAuthToken = function () {
|
||||
return localStorage.getItem("knoptpq");
|
||||
};
|
||||
|
||||
window.fetchWithAuth = async function (url, options = {}) {
|
||||
const token = getAuthToken();
|
||||
|
||||
if (!token) {
|
||||
window.location.href = "/client/login";
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
token,
|
||||
"Content-Type": "application/json",
|
||||
...options.headers,
|
||||
},
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
localStorage.clear();
|
||||
window.location.href = "/client/login";
|
||||
return;
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const profileTrigger = document.querySelector('.profile-trigger');
|
||||
const profileMenu = document.querySelector('.profile-menu');
|
||||
|
||||
if (!profileTrigger || !profileMenu) return;
|
||||
|
||||
// Toggle on click
|
||||
profileTrigger.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
profileMenu.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close on outside click
|
||||
document.addEventListener('click', () => {
|
||||
profileMenu.classList.remove('active');
|
||||
});
|
||||
|
||||
// Prevent closing when clicking inside menu
|
||||
profileMenu.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Close on ESC
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
profileMenu.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
function openLogoutModal() {
|
||||
document.getElementById("logoutModal").style.display = "flex";
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeLogoutModal() {
|
||||
document.getElementById("logoutModal").style.display = "none";
|
||||
document.body.style.overflow = "auto";
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
try {
|
||||
await fetchWithAuth("/api/v1/client/logout", { method: "POST" });
|
||||
} finally {
|
||||
localStorage.clear();
|
||||
window.location.href = "/client/login";
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.getElementById("logoutButton")?.addEventListener("click", openLogoutModal);
|
||||
document.getElementById("confirmLogoutBtn")?.addEventListener("click", handleLogout);
|
||||
});
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
const currentPath = window.location.pathname;
|
||||
document.querySelectorAll('.nav-button').forEach(link => {
|
||||
if (link.getAttribute('href') === currentPath) {
|
||||
link.classList.add('active');
|
||||
} else {
|
||||
link.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.querySelectorAll('.sidebar-link').forEach(link => {
|
||||
if (link.getAttribute('href') === currentPath) {
|
||||
link.classList.add('active');
|
||||
} else {
|
||||
link.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Auth helpers
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem("knoptpq");
|
||||
}
|
||||
|
||||
async function fetchWithAuth(url, options = {}) {
|
||||
const token = getAuthToken();
|
||||
if (!token) {
|
||||
window.location.href = "/client/login";
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
"token": token,
|
||||
"Content-Type": "application/json",
|
||||
...options.headers,
|
||||
}
|
||||
});
|
||||
|
||||
if (res.status === 401) {
|
||||
localStorage.clear();
|
||||
window.location.href = "/client/login";
|
||||
return;
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
// Logout modal
|
||||
function openLogoutModal() {
|
||||
document.getElementById("logoutModal").style.display = "flex";
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeLogoutModal() {
|
||||
document.getElementById("logoutModal").style.display = "none";
|
||||
document.body.style.overflow = "auto";
|
||||
}
|
||||
|
||||
// Final logout
|
||||
async function handleLogout() {
|
||||
try {
|
||||
await fetchWithAuth("/api/v1/client/logout", { method: "POST" });
|
||||
} catch (e) {
|
||||
console.error("Logout error", e);
|
||||
} finally {
|
||||
localStorage.clear();
|
||||
window.location.href = "/client/login";
|
||||
}
|
||||
}
|
||||
|
||||
// DOM bindings
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
// Logout button
|
||||
const logoutBtn = document.getElementById("logoutButton");
|
||||
if (logoutBtn) logoutBtn.addEventListener("click", openLogoutModal);
|
||||
|
||||
// Confirm logout
|
||||
const confirmBtn = document.getElementById("confirmLogoutBtn");
|
||||
if (confirmBtn) confirmBtn.addEventListener("click", handleLogout);
|
||||
|
||||
// Click outside modal
|
||||
const modal = document.getElementById("logoutModal");
|
||||
if (modal) {
|
||||
modal.addEventListener("click", (e) => {
|
||||
if (e.target === modal) closeLogoutModal();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
(function () {
|
||||
const root = document.documentElement;
|
||||
|
||||
function applyTheme(theme) {
|
||||
root.setAttribute("data-theme", theme);
|
||||
localStorage.setItem("theme", theme);
|
||||
}
|
||||
|
||||
function getSystemTheme() {
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
}
|
||||
|
||||
function initTheme() {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
applyTheme(savedTheme || getSystemTheme());
|
||||
}
|
||||
|
||||
// expose globally
|
||||
window.setTheme = applyTheme;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initTheme);
|
||||
})();
|
||||
|
|
@ -1,263 +0,0 @@
|
|||
const API_BASE = "/api/v1/client";
|
||||
|
||||
// Format time function
|
||||
function formatTime(seconds) {
|
||||
if (!seconds) return 'No Record Found';
|
||||
|
||||
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 {
|
||||
return 'Just started';
|
||||
}
|
||||
}
|
||||
|
||||
const vaModal = document.getElementById('vaModal');
|
||||
|
||||
function openVAModal(va) {
|
||||
// Set basic VA info
|
||||
document.getElementById('modalVAName').textContent = va.name;
|
||||
|
||||
// Set projects
|
||||
const projects = va.projects || [];
|
||||
document.getElementById('projectsCountBadge').textContent = projects.length;
|
||||
|
||||
const projectsTableBody = document.getElementById('modalProjectsTableBody');
|
||||
const noProjectsMessage = document.getElementById('modalNoProjects');
|
||||
|
||||
if (projects.length > 0) {
|
||||
projectsTableBody.innerHTML = projects.map(project => createProjectTableRow(project)).join('');
|
||||
projectsTableBody.style.display = '';
|
||||
noProjectsMessage.style.display = 'none';
|
||||
} else {
|
||||
projectsTableBody.innerHTML = '';
|
||||
projectsTableBody.style.display = 'none';
|
||||
noProjectsMessage.style.display = 'block';
|
||||
}
|
||||
|
||||
// Set action button
|
||||
const modalActions = document.getElementById('modalActions');
|
||||
const viewSessionBtn = document.getElementById('viewSessionBtn');
|
||||
|
||||
if (va.isCurrentlyActive && va.lastProjectId) {
|
||||
viewSessionBtn.href = `/live/${va.lastProjectId}/${va.id}`;
|
||||
modalActions.style.display = 'block';
|
||||
} else {
|
||||
modalActions.style.display = 'none';
|
||||
}
|
||||
|
||||
// Show modal
|
||||
vaModal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeVAModal() {
|
||||
vaModal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
// Create project table row for modal
|
||||
function createProjectTableRow(project) {
|
||||
const statusClass = project.isCurrentlyWorking ? 'active' : 'inactive';
|
||||
const statusText = project.isCurrentlyWorking ? 'Working' : 'Not Active';
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="project-info">
|
||||
<div class="project-name">${project.name}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="hourly-rate">$${project.hourlyRate}/hr</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="worked-time">${project.totalWorkedTime}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="status-badge ${statusClass}">
|
||||
<span class="status-text">${statusText}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
// Create VA table row for main table
|
||||
function createVATableRow(va) {
|
||||
const statusClass = va.isCurrentlyActive ? 'active' : 'inactive';
|
||||
const statusText = va.isCurrentlyActive ? 'Active' : 'Inactive';
|
||||
const activeProject = va?.lastProject?.name ? va.lastProject.name : '-';
|
||||
const workedTime = formatTime(va.currentSessionDuration);
|
||||
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">Live Tracking</a>` : '<p class="va-logs va-action" data-va-id="${va.id}" target="_blank">Logs</p>';
|
||||
|
||||
return `
|
||||
<tr class="va-row" data-va-id="${va.id}">
|
||||
<td>
|
||||
<div class="status-indicator">
|
||||
<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">${activeProject}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="projects-count">${projectsAssigned} Projects</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="worked-time">${workedTime}</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();
|
||||
|
||||
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 || [];
|
||||
|
||||
if (allVAs.length > 0) {
|
||||
vaTableBody.innerHTML = allVAs.map(va => createVATableRow(va)).join('');
|
||||
vaTableBody.style.display = '';
|
||||
vaEmptyState.style.display = 'none';
|
||||
|
||||
// Store VA data globally for modal access
|
||||
window.vaData = allVAs;
|
||||
|
||||
// Add click event listeners to VA rows
|
||||
document.querySelectorAll('.va-row').forEach((row, index) => {
|
||||
row.addEventListener('click', function (e) {
|
||||
// Don't open modal if clicking on view link
|
||||
if (!e.target.closest('.view-link')) {
|
||||
const va = allVAs[index];
|
||||
openVAModal(va);
|
||||
}
|
||||
});
|
||||
});
|
||||
} 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';
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
vaModal.addEventListener('click', (e) => {
|
||||
if (e.target === vaModal) {
|
||||
closeVAModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal with escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && vaModal.style.display === 'flex') {
|
||||
closeVAModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
const API_BASE = "/api/v1/client";
|
||||
|
||||
/* ------------------ Utils ------------------ */
|
||||
|
||||
function formatTime(seconds) {
|
||||
if (!seconds) return "No Record";
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
return h ? `${h}h ${m}m` : `${m}m`;
|
||||
}
|
||||
|
||||
/* ------------------ DOM Elements ------------------ */
|
||||
|
||||
const vaModal = document.getElementById("vaModal");
|
||||
const modalVAName = document.getElementById("modalVAName");
|
||||
const modalProjectsTableBody = document.getElementById("modalProjectsTableBody");
|
||||
const modalNoProjects = document.getElementById("modalNoProjects");
|
||||
|
||||
const vaTableBody = document.getElementById("vaTableBody");
|
||||
const vaEmptyState = document.getElementById("vaEmptyState");
|
||||
|
||||
/* ------------------ Modal Controls ------------------ */
|
||||
|
||||
function openVAModal(va) {
|
||||
modalVAName.textContent = va.name || "VA Details";
|
||||
|
||||
const projects = va.projects || [];
|
||||
|
||||
if (projects.length === 0) {
|
||||
modalProjectsTableBody.innerHTML = "";
|
||||
modalNoProjects.style.display = "block";
|
||||
} else {
|
||||
modalNoProjects.style.display = "none";
|
||||
modalProjectsTableBody.innerHTML = projects
|
||||
.map(createProjectRow)
|
||||
.join("");
|
||||
}
|
||||
|
||||
vaModal.style.display = "flex";
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeVAModal() {
|
||||
vaModal.style.display = "none";
|
||||
document.body.style.overflow = "auto";
|
||||
}
|
||||
|
||||
/* Outside click close */
|
||||
vaModal.addEventListener("click", (e) => {
|
||||
if (e.target === vaModal) closeVAModal();
|
||||
});
|
||||
|
||||
/* ESC key close */
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") closeVAModal();
|
||||
});
|
||||
|
||||
/* ------------------ Table Builders ------------------ */
|
||||
|
||||
function createProjectRow(project) {
|
||||
return `
|
||||
<tr>
|
||||
<td>${project.name}</td>
|
||||
<td>$${project.hourlyRate}/hr</td>
|
||||
<td>${project.totalWorkedTime}</td>
|
||||
<td>${project.isCurrentlyWorking ? "Working" : "Inactive"}</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
function createVATableRow(va, index) {
|
||||
return `
|
||||
<tr class="va-row" data-index="${index}">
|
||||
<td>
|
||||
<span class="status ${va.isCurrentlyActive ? "active" : "inactive"}">
|
||||
${va.isCurrentlyActive ? "Active" : "Inactive"}
|
||||
</span>
|
||||
</td>
|
||||
<td>${va.name}</td>
|
||||
<td>${va.lastProject?.name || "-"}</td>
|
||||
<td>${va.projectsAssigned || 0}</td>
|
||||
<td>${va.currentSessionDuration || "No Record Found"}</td>
|
||||
<td>
|
||||
${
|
||||
va.isCurrentlyActive
|
||||
? `<a href="/live/${va.lastProjectId}/${va.id}" target="_blank">Live</a>`
|
||||
: "-"
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
setInterval(loadDashboardData, 30000);
|
||||
|
||||
/* ------------------ Load Dashboard ------------------ */
|
||||
|
||||
async function loadDashboardData() {
|
||||
const res = await fetchWithAuth(`${API_BASE}/dashboard`);
|
||||
if (!res) return;
|
||||
|
||||
const result = await res.json();
|
||||
if (!result.success) return;
|
||||
|
||||
const { summary, data } = result;
|
||||
|
||||
document.getElementById("activeVaCount").textContent = summary.activeVAs;
|
||||
document.getElementById("totalVaCount").textContent = summary.totalVAs;
|
||||
document.getElementById("totalProjects").textContent = summary.totalProjects;
|
||||
document.getElementById("vaListCount").textContent = `${summary.totalVAs} VAs`;
|
||||
|
||||
const allVAs = data.allVAs || [];
|
||||
|
||||
if (allVAs.length === 0) {
|
||||
vaTableBody.innerHTML = "";
|
||||
vaEmptyState.style.display = "block";
|
||||
return;
|
||||
}
|
||||
|
||||
vaEmptyState.style.display = "none";
|
||||
|
||||
/* store globally for modal */
|
||||
window.allVAs = allVAs;
|
||||
|
||||
vaTableBody.innerHTML = allVAs
|
||||
.map((va, index) => createVATableRow(va, index))
|
||||
.join("");
|
||||
|
||||
/* Row click handlers */
|
||||
document.querySelectorAll(".va-row").forEach(row => {
|
||||
row.addEventListener("click", (e) => {
|
||||
if (e.target.tagName === "A") return; // ignore Live click
|
||||
const index = row.dataset.index;
|
||||
openVAModal(window.allVAs[index]);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ------------------ Init ------------------ */
|
||||
|
||||
document.addEventListener("DOMContentLoaded", loadDashboardData);
|
||||
|
|
@ -1,248 +0,0 @@
|
|||
|
||||
|
||||
// API base URL
|
||||
const API_BASE = '/api/v1/client';
|
||||
|
||||
|
||||
|
||||
function openTipModal() {
|
||||
const modal = document.getElementById('tipModal');
|
||||
modal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Clear form
|
||||
document.getElementById('tipForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function closeTipModal() {
|
||||
const modal = document.getElementById('tipModal');
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
// Clear form and errors
|
||||
document.getElementById('tipForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function clearErrorMessages() {
|
||||
document.getElementById('vaForTipError').textContent = '';
|
||||
document.getElementById('vaTipAmountError').textContent = '';
|
||||
document.getElementById('vaTipDescriptionError').textContent = '';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.querySelector('.mobile-menu-button');
|
||||
const sidebar = document.querySelector('.dashboard-sidebar');
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('active');
|
||||
});
|
||||
|
||||
document.getElementById('tipVaAddBtn').addEventListener('click', openTipModal);
|
||||
|
||||
document.getElementById('tipModal').addEventListener('click', function (e) {
|
||||
if (e.target === this) {
|
||||
closeTipModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal with escape key
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeLogoutModal();
|
||||
closeTipModal();
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
// ------------------------------
|
||||
// TIP FORM SUBMISSION HANDLER
|
||||
// ------------------------------
|
||||
|
||||
document.getElementById('tipForm').addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// clearErrorMessages();
|
||||
|
||||
const vaId = document.getElementById('vaForTip').value;
|
||||
const amount = document.getElementById('vaTipAmount').value.trim();
|
||||
const description = document.getElementById('vaTipDescription').value.trim();
|
||||
|
||||
let isValid = true;
|
||||
|
||||
// Validation
|
||||
if (!vaId) {
|
||||
document.getElementById('vaForTipError').textContent = "Please select a virtual assistant.";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!amount || isNaN(amount) || Number(amount) <= 0) {
|
||||
document.getElementById('vaTipAmountError').textContent = "Enter a valid tip amount.";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Prepare API body
|
||||
const payload = {
|
||||
vaId,
|
||||
amount: Number(amount),
|
||||
description
|
||||
};
|
||||
|
||||
try {
|
||||
document.getElementById('submitTipBtn').disabled = true;
|
||||
document.getElementById('submitTipBtn').textContent = "Submitting...";
|
||||
|
||||
const response = await fetchWithAuth(`/api/v1/client/tips`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
alert(data.message || "Failed to submit tip.");
|
||||
return;
|
||||
}
|
||||
|
||||
alert("Tip submitted successfully!");
|
||||
closeTipModal();
|
||||
|
||||
// Optionally refresh page or reload tips list
|
||||
window.location.reload();
|
||||
|
||||
} catch (err) {
|
||||
console.error("Tip submit error:", err);
|
||||
alert("Something went wrong while submitting tip.");
|
||||
} finally {
|
||||
document.getElementById('submitTipBtn').disabled = false;
|
||||
document.getElementById('submitTipBtn').textContent = "Submit Tip";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Load VAs for tip selection
|
||||
async function loadVAs() {
|
||||
try {
|
||||
const response = await fetchWithAuth(`${API_BASE}/dashboard`);
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Failed to load VAs:", data.message);
|
||||
return;
|
||||
}
|
||||
|
||||
const vaSelect = document.getElementById('vaForTip');
|
||||
data.data.allVAs.forEach(va => {
|
||||
const option = document.createElement('option');
|
||||
option.value = va.id;
|
||||
option.textContent = va.name;
|
||||
vaSelect.appendChild(option);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error loading VAs:", error);
|
||||
}
|
||||
}
|
||||
|
||||
loadVAs();
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Load VAs for tip selection
|
||||
async function loadTips() {
|
||||
try {
|
||||
const response = await fetchWithAuth(`${API_BASE}/tips`);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Failed to load VAs:", data.message);
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
const vaSelect = document.getElementById('vaTipTableBody');
|
||||
data.data.forEach(tip => {
|
||||
const row = document.createElement('tr');
|
||||
const cellVoid = document.createElement('td');
|
||||
const cellStatus = document.createElement('td');
|
||||
const cellName = document.createElement('td');
|
||||
const cellDescription = document.createElement('td');
|
||||
const cellDate = document.createElement('td');
|
||||
const cellAmount = document.createElement('td');
|
||||
|
||||
cellVoid.innerHTML = `<button id='voidBtn' class='void-btn-a' data-id='${tip._id}'>Void</button>`;
|
||||
cellVoid.classList.add('void-btn');
|
||||
|
||||
cellStatus.textContent = tip.status;
|
||||
cellName.textContent = tip.vaName;
|
||||
cellDescription.textContent = tip.description;
|
||||
cellDate.textContent = tip.createdAt ? new Date(tip.createdAt).toLocaleDateString() : '';
|
||||
cellAmount.textContent = `$${parseFloat(tip.amount).toFixed(2)}`;
|
||||
|
||||
row.appendChild(cellVoid);
|
||||
row.appendChild(cellStatus);
|
||||
row.appendChild(cellName);
|
||||
row.appendChild(cellDescription);
|
||||
row.appendChild(cellDate);
|
||||
row.appendChild(cellAmount);
|
||||
|
||||
vaSelect.appendChild(row);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.void-btn-a').forEach(button => {
|
||||
button.addEventListener('click', async function () {
|
||||
const tipId = this.getAttribute('data-id');
|
||||
if (confirm('Are you sure you want to void this tip?')) {
|
||||
try {
|
||||
const response = await fetchWithAuth(`${API_BASE}/tips/${tipId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
alert(result.message || 'Failed to void tip.');
|
||||
return;
|
||||
}
|
||||
|
||||
alert('Tip voided successfully!');
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error('Error voiding tip:', error);
|
||||
alert('Something went wrong while voiding the tip.');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error loading VAs:", error);
|
||||
}
|
||||
}
|
||||
|
||||
loadTips();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,195 +0,0 @@
|
|||
// API base URL
|
||||
const API_BASE = '/api/v1/client';
|
||||
|
||||
|
||||
// Format empty fields
|
||||
function formatEmptyFields() {
|
||||
const inputs = document.querySelectorAll('.form-input');
|
||||
inputs.forEach(input => {
|
||||
if (!input.value.trim()) {
|
||||
input.value = 'Not provided';
|
||||
input.classList.add('empty-field');
|
||||
} else {
|
||||
input.classList.remove('empty-field');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Load profile data
|
||||
async function loadProfileData() {
|
||||
try {
|
||||
const response = await fetchWithAuth(`${API_BASE}/profile`);
|
||||
if (!response) return;
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
const data = result.data;
|
||||
|
||||
// Populate only personal and address information
|
||||
const fieldsToShow = ['name', 'email', 'position', 'address', 'city', 'state', 'zip'];
|
||||
|
||||
fieldsToShow.forEach(key => {
|
||||
const element = document.getElementById(key);
|
||||
if (element && data[key]) {
|
||||
element.value = data[key];
|
||||
}
|
||||
});
|
||||
|
||||
formatEmptyFields();
|
||||
|
||||
} else {
|
||||
console.error('Failed to load profile data:', result.message);
|
||||
alert('Failed to load profile data');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading profile data:', error);
|
||||
alert('Error loading profile data');
|
||||
}
|
||||
}
|
||||
|
||||
// Password Modal Functions
|
||||
function openPasswordModal() {
|
||||
const modal = document.getElementById('passwordModal');
|
||||
modal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Clear form
|
||||
document.getElementById('passwordForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function closePasswordModal() {
|
||||
const modal = document.getElementById('passwordModal');
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
// Clear form and errors
|
||||
document.getElementById('passwordForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function clearErrorMessages() {
|
||||
document.getElementById('currentPasswordError').textContent = '';
|
||||
document.getElementById('newPasswordError').textContent = '';
|
||||
document.getElementById('confirmPasswordError').textContent = '';
|
||||
}
|
||||
|
||||
// Change password
|
||||
async function changePassword(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const currentPassword = document.getElementById('currentPassword').value;
|
||||
const newPassword = document.getElementById('newPassword').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
|
||||
// Reset errors
|
||||
clearErrorMessages();
|
||||
|
||||
let hasError = false;
|
||||
|
||||
if (!currentPassword) {
|
||||
document.getElementById('currentPasswordError').textContent = 'Current password is required';
|
||||
hasError = true;
|
||||
}
|
||||
|
||||
if (!newPassword) {
|
||||
document.getElementById('newPasswordError').textContent = 'New password is required';
|
||||
hasError = true;
|
||||
} else if (newPassword.length < 6) {
|
||||
document.getElementById('newPasswordError').textContent = 'Password must be at least 6 characters';
|
||||
hasError = true;
|
||||
}
|
||||
|
||||
if (!confirmPassword) {
|
||||
document.getElementById('confirmPasswordError').textContent = 'Please confirm your password';
|
||||
hasError = true;
|
||||
} else if (newPassword !== confirmPassword) {
|
||||
document.getElementById('confirmPasswordError').textContent = 'Passwords do not match';
|
||||
hasError = true;
|
||||
}
|
||||
|
||||
if (hasError) return;
|
||||
|
||||
try {
|
||||
const saveBtn = document.getElementById('savePasswordBtn');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Changing Password...';
|
||||
|
||||
const response = await fetchWithAuth(`${API_BASE}/profile`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({
|
||||
userDetails: {
|
||||
currentPassword,
|
||||
newPassword,
|
||||
confirmPassword
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (!response) {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Change Password';
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
alert('Password changed successfully!');
|
||||
closePasswordModal();
|
||||
} else {
|
||||
alert(result.message || 'Failed to change password');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error changing password:', error);
|
||||
alert('Error changing password');
|
||||
} finally {
|
||||
const saveBtn = document.getElementById('savePasswordBtn');
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Change Password';
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
loadProfileData();
|
||||
|
||||
// Change password button
|
||||
document.getElementById('changePasswordBtn').addEventListener('click', openPasswordModal);
|
||||
|
||||
// Password form submission
|
||||
document.getElementById('passwordForm').addEventListener('submit', changePassword);
|
||||
|
||||
// Close modal when clicking outside
|
||||
document.getElementById('passwordModal').addEventListener('click', function (e) {
|
||||
if (e.target === this) {
|
||||
closePasswordModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal with escape key
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
closePasswordModal();
|
||||
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);
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.querySelector('.mobile-menu-button');
|
||||
const sidebar = document.querySelector('.dashboard-sidebar');
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,240 +0,0 @@
|
|||
// API base URL
|
||||
const API_BASE = '/api/v1/client';
|
||||
|
||||
// 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);
|
||||
|
||||
|
||||
|
||||
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);
|
||||
|
|
@ -35,8 +35,6 @@ async function client_dashboard_projects(req, res) {
|
|||
|
||||
// STEP 1: Get client ID from token
|
||||
const clientUser = await ClientModel.findOne({ "userDetails.email": clientEmail });
|
||||
|
||||
console.log("Line 38" , clientUser)
|
||||
if (!clientUser) {
|
||||
return res.status(404).json({ success: false, message: "Client not found" });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,32 +42,32 @@ import authFetch from "../../../utils/authFetch.js";
|
|||
// time: currentTime // Use same timestamp for consistent logging
|
||||
// });
|
||||
|
||||
// console.log(`Created logout log: ${logoutLog._id}`);
|
||||
// try {
|
||||
// const salesforceUrl = `${process.env.SF_DOCTRACKER_API_URL}services/apexrest/docva/api/va-project-log`;
|
||||
// const sfDataSync = {
|
||||
// "_id": logoutLog._id,
|
||||
// "loggedType": "LOGOUT",
|
||||
// "vaId": vaId,
|
||||
// "vaEmail": lastLog.vaEmail,
|
||||
// "projectId": lastLog.projectId,
|
||||
// "time": logoutLog.time,
|
||||
// }
|
||||
// // console.log(`Created logout log: ${logoutLog._id}`);
|
||||
// try {
|
||||
// const salesforceUrl = `${process.env.SF_DOCTRACKER_API_URL}services/apexrest/docva/api/va-project-log`;
|
||||
// const sfDataSync = {
|
||||
// "_id": logoutLog._id,
|
||||
// "loggedType": "LOGOUT",
|
||||
// "vaId": vaId,
|
||||
// "vaEmail": lastLog.vaEmail,
|
||||
// "projectId": lastLog.projectId,
|
||||
// "time": logoutLog.time,
|
||||
// }
|
||||
|
||||
// const response = await fetch(salesforceUrl, {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// // Add any required headers for Salesforce authentication
|
||||
// // 'Authorization': 'Bearer ' + process.env.SF_ACCESS_TOKEN
|
||||
// },
|
||||
// body: JSON.stringify(sfDataSync)
|
||||
// });
|
||||
// const response = await authFetch(salesforceUrl, {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// // Add any required headers for Salesforce authentication
|
||||
// // 'Authorization': 'Bearer ' + process.env.SF_ACCESS_TOKEN
|
||||
// },
|
||||
// body: JSON.stringify(sfDataSync)
|
||||
// });
|
||||
|
||||
// if (!response.ok) {
|
||||
// const errorText = await response.text();
|
||||
// throw new Error(`Salesforce API responded with status ${response.status}: ${errorText}`);
|
||||
// }
|
||||
// if (!response.ok) {
|
||||
// const errorText = await response.text();
|
||||
// throw new Error(`Salesforce API responded with status ${response.status}: ${errorText}`);
|
||||
// }
|
||||
|
||||
// const result = await response.json();
|
||||
// // console.log("✅ Successfully synced VA data to Salesforce:", result);
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ async function va_leave_apply_function(req, res) {
|
|||
"dateTo": endDate.toISOString().split('T')[0],
|
||||
"totalDays": totalDays,
|
||||
"leaveType": leaveType,
|
||||
"comment": processedComment.plainText, // Send plain text to Salesforce
|
||||
"comment": processedComment.plainText !== "" ? processedComment.plainText : "-", // Send plain text to Salesforce
|
||||
"attachments": processedComment.extractedImages, // Send extracted images info
|
||||
"status": "PENDING",
|
||||
"rejectionReason": ""
|
||||
|
|
|
|||
|
|
@ -21,16 +21,12 @@ async function va_profile_callback(req, res) {
|
|||
return res.status(400).json({ success: false, message: "Invalid token payload" });
|
||||
}
|
||||
|
||||
console.log(decoded.email , "Line 24")
|
||||
|
||||
|
||||
const vaUser = await VAModel.findOne({ "userDetails.email": decoded.email })
|
||||
.select("-userDetails.password") // hide password
|
||||
.populate("clientIds", "userDetails.email userDetails.name") // optional populate
|
||||
.populate("projectIds", "name totalLoggedHours") // optional populate
|
||||
.lean();
|
||||
|
||||
console.log("Line 33" , vaUser)
|
||||
if (!vaUser) {
|
||||
return res.status(404).json({ success: false, message: "VA not found" });
|
||||
}
|
||||
|
|
|
|||
136
src/server.js
136
src/server.js
|
|
@ -18,7 +18,6 @@ import apiRoutes from './routes/index.js'
|
|||
|
||||
|
||||
import { render_reset_form } from "./controllers/passwordReset.controllers.js";
|
||||
import expressLayouts from "express-ejs-layouts";
|
||||
import jwt from "jsonwebtoken";
|
||||
|
||||
const app = express();
|
||||
|
|
@ -40,11 +39,6 @@ app.on('certificate-error', (event, webContents, url, error, certificate, callba
|
|||
});
|
||||
|
||||
app.set("view engine", "ejs");
|
||||
|
||||
app.use(expressLayouts);
|
||||
|
||||
// DEFAULT layout for all pages
|
||||
app.set("layout", "layouts/dashboard");
|
||||
const PORT = process.env.PORT || 8000;
|
||||
|
||||
app.use(cors({
|
||||
|
|
@ -120,19 +114,9 @@ app.get('/clientregister/:sf_token?', (req, res) => {
|
|||
|
||||
app.get('/auth/password/reset-form', render_reset_form);
|
||||
|
||||
app.get('/health', (req, res) => {
|
||||
res.status(201).send({ status: "Server is healthy" });
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
app.get("/client/login", (req, res) => {
|
||||
res.render("client/client_login", {
|
||||
layout: "layouts/auth", // ⬅️ override layout
|
||||
title: "DocVA | Login"
|
||||
});
|
||||
});
|
||||
res.render("client_login")
|
||||
})
|
||||
|
||||
app.get("/client/forgot-password", (req, res) => {
|
||||
res.render("forgot_password")
|
||||
|
|
@ -142,11 +126,8 @@ app.get("/client/forgot-password", (req, res) => {
|
|||
app.get('/client/dashboard', async (req, res) => {
|
||||
try {
|
||||
// const dashboardData = await dashboardService.getClientDashboard(req.user.id);
|
||||
res.render('client/dashboard-dashboard', {
|
||||
title: "Client Dashboard",
|
||||
pageScript: "dashboard.js"
|
||||
});
|
||||
// res.render('layouts/dashboard');
|
||||
// res.render('client/dashboard-dashboard', dashboardData);
|
||||
res.render('client/dashboard-dashboard');
|
||||
} catch (error) {
|
||||
console.error('Dashboard error:', error);
|
||||
res.status(500).render('client/dashboard-dashboard', { error: 'Failed to load dashboard' });
|
||||
|
|
@ -156,11 +137,7 @@ app.get('/client/dashboard', async (req, res) => {
|
|||
app.get('/client/virtual-assistants', async (req, res) => {
|
||||
try {
|
||||
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
||||
res.render('client/dashboard-virtual-assistants', {
|
||||
title: "Virtual Assistants",
|
||||
pageScript:"dashboard-virtual-assistants.js"
|
||||
|
||||
});
|
||||
res.render('client/dashboard-virtual-assistants');
|
||||
// res.render('client/dashboard-virtual-assistants', vaData);
|
||||
} catch (error) {
|
||||
console.error('Virtual assistants error:', error);
|
||||
|
|
@ -171,11 +148,7 @@ app.get('/client/virtual-assistants', async (req, res) => {
|
|||
app.get('/client/projects', async (req, res) => {
|
||||
try {
|
||||
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
||||
res.render('client/dashboard-projects', {
|
||||
title: "Projects",
|
||||
pageScript:"projects.js"
|
||||
|
||||
});
|
||||
res.render('client/dashboard-projects');
|
||||
} catch (error) {
|
||||
console.error('Projects error:', error);
|
||||
res.status(500).render('client/dashboard-projects', { error: 'Failed to load projects' });
|
||||
|
|
@ -185,25 +158,23 @@ app.get('/client/projects', async (req, res) => {
|
|||
app.get('/client/profile', async (req, res) => {
|
||||
try {
|
||||
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
||||
res.render('client/dashboard-profile',{
|
||||
title: "Profile",
|
||||
pageScript:"profile.js"
|
||||
|
||||
});
|
||||
res.render('client/dashboard-profile');
|
||||
} catch (error) {
|
||||
console.error('Projects error:', error);
|
||||
res.status(500).render('client/dashboard-profile', { error: 'Failed to load profile' });
|
||||
}
|
||||
});
|
||||
|
||||
app.get('/client/virtual-assistants/manage-tips', (req, res) => {
|
||||
res.render('client/dashboard-manage-va-tips', {
|
||||
title: 'Manage VA Tips',
|
||||
pageScript: 'manage-tips.js'
|
||||
});
|
||||
app.get('/client/virtual-assistants/manage-tips', async (req, res) => {
|
||||
try {
|
||||
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
||||
res.render('client/dashboard-manage-va-tips');
|
||||
} catch (error) {
|
||||
console.error('Projects error:', error);
|
||||
res.status(500).render('client/dashboard-manage-va-tips', { error: 'Failed to load profile' });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
app.get("/live/:projectId/:vaId", async (req, res) => {
|
||||
const { projectId, vaId } = req.params;
|
||||
|
||||
|
|
@ -440,66 +411,6 @@ io.on("connection", (socket) => {
|
|||
socket.to(vaSocketRespectToClient.get(`${clientId}-${vaId}-${projectId}-va`)).emit("appToCapture", { appTitle });
|
||||
});
|
||||
|
||||
socket.on("getVisibleApps", async ({ token }) => {
|
||||
try {
|
||||
// Verify token
|
||||
const decoded = jwt.verify(token, process.env.JWT_SECRET_ACCESS_TOKEN);
|
||||
const vaEmail = decoded.email;
|
||||
|
||||
// Find VA in DB
|
||||
const vaUser = await VAModel.findOne({ "userDetails.email": vaEmail });
|
||||
if (!vaUser) {
|
||||
console.log("❌ Unauthorized VA");
|
||||
return;
|
||||
}
|
||||
|
||||
const vaId = vaUser._id.toString();
|
||||
console.log("🟢 Received Apps from VA:", vaId);
|
||||
|
||||
// Broadcast image only to allowed clients
|
||||
for (let [_, clientSocket] of io.sockets.sockets) {
|
||||
if (
|
||||
clientSocket.data.role === "client" &&
|
||||
clientSocket.data.allowedVAs?.includes(vaId)
|
||||
) {
|
||||
clientSocket.emit("captureAppsTracker");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Token verification failed:", err.message);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("requestVisibleApps", async ({ token }) => {
|
||||
try {
|
||||
// Verify token
|
||||
const decoded = jwt.verify(token, process.env.JWT_SECRET_ACCESS_TOKEN);
|
||||
const vaEmail = decoded.email;
|
||||
|
||||
// Find VA in DB
|
||||
const vaUser = await VAModel.findOne({ "userDetails.email": vaEmail });
|
||||
if (!vaUser) {
|
||||
console.log("❌ Unauthorized VA");
|
||||
return;
|
||||
}
|
||||
|
||||
const vaId = vaUser._id.toString();
|
||||
console.log("🟢 Received Apps from VA:", vaId);
|
||||
|
||||
// Broadcast image only to allowed clients
|
||||
for (let [_, clientSocket] of io.sockets.sockets) {
|
||||
if (
|
||||
clientSocket.data.role === "client" &&
|
||||
clientSocket.data.allowedVAs?.includes(vaId)
|
||||
) {
|
||||
clientSocket.emit("captureAppsTracker");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Token verification failed:", err.message);
|
||||
}
|
||||
});
|
||||
|
||||
socket.on("requestVisibleApps", async ({ token }) => {
|
||||
try {
|
||||
// Verify token
|
||||
|
|
@ -574,15 +485,28 @@ io.on("connection", (socket) => {
|
|||
);
|
||||
|
||||
if (vaSocketId) {
|
||||
io.to(vaSocketId).emit("stopSendAppsDetails");
|
||||
// io.to(vaSocketId).emit("stopSendAppsDetails");
|
||||
io.to(vaSocketRespectToClient.get(`${clientId}-${vaId}-${projectId}-va`)).emit("stopSendAppsDetails", { projId: projectId });
|
||||
}
|
||||
}
|
||||
|
||||
console.log("❌ Client disconnected");
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
app.get("/", (req, res) => {
|
||||
res.render("client_login")
|
||||
})
|
||||
|
||||
app.get("/forgot-password", (req, res) => {
|
||||
res.render("forgot_password")
|
||||
})
|
||||
|
||||
app.get("/health", (req, res) => {
|
||||
return res.status(200).json({ "success": true, "message": "Server is Healthy" })
|
||||
})
|
||||
|
||||
app.use((req, res) => {
|
||||
res.status(404).render("not_found", {
|
||||
title: "404 - Page Not Found"
|
||||
|
|
|
|||
|
|
@ -1,72 +1,557 @@
|
|||
|
||||
<!-- 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>
|
||||
<!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/projects" class="nav-button">
|
||||
<i class="fas fa-file-invoice"></i>Projects
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="mobile-menu-button">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</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>
|
||||
</nav>
|
||||
<div class="dashboard-container">
|
||||
<aside class="dashboard-sidebar">
|
||||
<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 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/projects" class="sidebar-link">
|
||||
<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">
|
||||
<!-- 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>Active Project</th>
|
||||
<th>Total Projects</th>
|
||||
<th>Today Logged Hours</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 id="vaModal" 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="modalVAName">VA Details</h2>
|
||||
<button class="modal-close" onclick="closeVAModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Projects Section -->
|
||||
<div class="va-details-section">
|
||||
<h3 class="va-section-title">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
Projects
|
||||
<span class="va-count-badge" id="projectsCountBadge">0</span>
|
||||
</h3>
|
||||
|
||||
<div class="va-table-container">
|
||||
<table class="va-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project Name</th>
|
||||
<th>Hourly Rate</th>
|
||||
<th>Worked Time</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="modalProjectsTableBody">
|
||||
<!-- Project details will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="modalNoProjects" class="no-vas-message" style="display: none;">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
<h4>No Projects</h4>
|
||||
<p>This VA is not assigned to any projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div class="modal-actions" id="modalActions" style="display: none;">
|
||||
<a href="#" class="view-session-btn" id="viewSessionBtn" target="_blank">
|
||||
<i class="fas fa-eye"></i>
|
||||
View Live Session
|
||||
</a>
|
||||
</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;
|
||||
}
|
||||
|
||||
<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>
|
||||
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 = '/';
|
||||
}
|
||||
}
|
||||
|
||||
// Format time function
|
||||
function formatTime(seconds) {
|
||||
if (!seconds) return 'No Record Found';
|
||||
|
||||
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 {
|
||||
return 'Just started';
|
||||
}
|
||||
}
|
||||
|
||||
<!-- 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>Active Project</th>
|
||||
<th>Total Projects</th>
|
||||
<th>Today Logged Hours</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="vaTableBody">
|
||||
<!-- Data will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="vaEmptyState" style="display: none;">
|
||||
const vaModal = document.getElementById('vaModal');
|
||||
|
||||
function openVAModal(va) {
|
||||
// Set basic VA info
|
||||
document.getElementById('modalVAName').textContent = va.name;
|
||||
|
||||
// Set projects
|
||||
const projects = va.projects || [];
|
||||
document.getElementById('projectsCountBadge').textContent = projects.length;
|
||||
|
||||
const projectsTableBody = document.getElementById('modalProjectsTableBody');
|
||||
const noProjectsMessage = document.getElementById('modalNoProjects');
|
||||
|
||||
if (projects.length > 0) {
|
||||
projectsTableBody.innerHTML = projects.map(project => createProjectTableRow(project)).join('');
|
||||
projectsTableBody.style.display = '';
|
||||
noProjectsMessage.style.display = 'none';
|
||||
} else {
|
||||
projectsTableBody.innerHTML = '';
|
||||
projectsTableBody.style.display = 'none';
|
||||
noProjectsMessage.style.display = 'block';
|
||||
}
|
||||
|
||||
// Set action button
|
||||
const modalActions = document.getElementById('modalActions');
|
||||
const viewSessionBtn = document.getElementById('viewSessionBtn');
|
||||
|
||||
if (va.isCurrentlyActive && va.lastProjectId) {
|
||||
viewSessionBtn.href = `/live/${va.lastProjectId}/${va.id}`;
|
||||
modalActions.style.display = 'block';
|
||||
} else {
|
||||
modalActions.style.display = 'none';
|
||||
}
|
||||
|
||||
// Show modal
|
||||
vaModal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeVAModal() {
|
||||
vaModal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
// Create project table row for modal
|
||||
function createProjectTableRow(project) {
|
||||
const statusClass = project.isCurrentlyWorking ? 'active' : 'inactive';
|
||||
const statusText = project.isCurrentlyWorking ? 'Working' : 'Not Active';
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="project-info">
|
||||
<div class="project-name">${project.name}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="hourly-rate">$${project.hourlyRate}/hr</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="worked-time">${project.totalWorkedTime}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="status-badge ${statusClass}">
|
||||
<span class="status-text">${statusText}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
// Create VA table row for main table
|
||||
function createVATableRow(va) {
|
||||
const statusClass = va.isCurrentlyActive ? 'active' : 'inactive';
|
||||
const statusText = va.isCurrentlyActive ? 'Active' : 'Inactive';
|
||||
const activeProject = va?.lastProject?.name ? va.lastProject.name : '-';
|
||||
const workedTime = formatTime(va.currentSessionDuration);
|
||||
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">Live Tracking</a>` : '';
|
||||
|
||||
return `
|
||||
<tr class="va-row" data-va-id="${va.id}">
|
||||
<td>
|
||||
<div class="status-indicator">
|
||||
<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">${activeProject}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="projects-count">${projectsAssigned} Projects</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="worked-time">${workedTime}</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();
|
||||
|
||||
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 || [];
|
||||
|
||||
if (allVAs.length > 0) {
|
||||
vaTableBody.innerHTML = allVAs.map(va => createVATableRow(va)).join('');
|
||||
vaTableBody.style.display = '';
|
||||
vaEmptyState.style.display = 'none';
|
||||
|
||||
// Store VA data globally for modal access
|
||||
window.vaData = allVAs;
|
||||
|
||||
// Add click event listeners to VA rows
|
||||
document.querySelectorAll('.va-row').forEach((row, index) => {
|
||||
row.addEventListener('click', function(e) {
|
||||
// Don't open modal if clicking on view link
|
||||
if (!e.target.closest('.view-link')) {
|
||||
const va = allVAs[index];
|
||||
openVAModal(va);
|
||||
}
|
||||
});
|
||||
});
|
||||
} 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-users"></i>
|
||||
<h3>No Virtual Assistants</h3>
|
||||
<p>You haven't assigned any virtual assistants yet.</p>
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<h3>Error</h3>
|
||||
<p>${message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
vaEmptyState.style.display = 'block';
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
vaModal.addEventListener('click', (e) => {
|
||||
if (e.target === vaModal) {
|
||||
closeVAModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal with escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && vaModal.style.display === 'flex') {
|
||||
closeVAModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,59 +1,548 @@
|
|||
<!-- Stats Cards -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-info">
|
||||
<h3>Unbilled Tips</h3>
|
||||
<div class="stat-value" id="vaUnbilledTips">$0</div>
|
||||
</div>
|
||||
<div class="stat-icon blue">
|
||||
<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>Total Tips</h3>
|
||||
<div class="stat-value" id="vaTotalTips">$0</div>
|
||||
</div>
|
||||
<div class="stat-icon blue">
|
||||
<i class="fas fa-dollar fa-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
|
||||
<!-- Virtual Assistants List -->
|
||||
<div class="content-section">
|
||||
<div class="section-header" style="justify-content: space-between;align-items: center;">
|
||||
<a href="/client/virtual-assistants" class="btn btn-secondary">Back</a>
|
||||
<span class="btn btn-primary" id="tipVaAddBtn">Tip Virtual Assistant</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Void</th>
|
||||
<th>Status</th>
|
||||
<th>Virtual Assistant Name</th>
|
||||
<th>Description</th>
|
||||
<th>Date Added</th>
|
||||
<th>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="vaTipTableBody">
|
||||
<!-- Data will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.void-btn-a {
|
||||
background: tomato;
|
||||
text-decoration: none;
|
||||
color: #ffffff !important;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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 active">
|
||||
<i class="fas fa-users"></i>Virtual Assistants
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/client/projects" class="nav-button">
|
||||
<i class="fas fa-file-invoice"></i>Projects
|
||||
</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">
|
||||
<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 active">
|
||||
<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">
|
||||
<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">
|
||||
<!-- Stats Cards -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-info">
|
||||
<h3>Unbilled Tips</h3>
|
||||
<div class="stat-value" id="vaUnbilledTips">$0</div>
|
||||
</div>
|
||||
<div class="stat-icon blue">
|
||||
<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>Total Tips</h3>
|
||||
<div class="stat-value" id="vaTotalTips">$0</div>
|
||||
</div>
|
||||
<div class="stat-icon blue">
|
||||
<i class="fas fa-dollar fa-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Virtual Assistants List -->
|
||||
<div class="content-section">
|
||||
<div class="section-header" style="justify-content: space-between;align-items: center;">
|
||||
<a href="/client/virtual-assistants" class="btn btn-secondary">Back</a>
|
||||
<span class="btn btn-primary" id="tipVaAddBtn">Tip Virtual Assistant</span>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Void</th>
|
||||
<th>Status</th>
|
||||
<th>Virtual Assistant Name</th>
|
||||
<th>Description</th>
|
||||
<th>Date Added</th>
|
||||
<th>Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="vaTipTableBody">
|
||||
<!-- Data will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="vaEmptyTipState" style="display: none;">
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-users"></i>
|
||||
<h3>No Tip Found</h3>
|
||||
<p>You haven't gave any Tip yet.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div id="vaEmptyTipState" style="display: none;">
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-users"></i>
|
||||
<h3>No Tip Found</h3>
|
||||
<p>You haven't gave any Tip yet.</p>
|
||||
<div id="tipModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Tip Virtual Assistant</h2>
|
||||
<button class="modal-close" onclick="closeTipModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="modal-form" id="tipForm">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Select Virtual Assistant</label>
|
||||
<select name="vaForTip" class="form-input" id="vaForTip" required>
|
||||
<option value="">-- Select Virtual Assistant --</option>
|
||||
<!-- Options will be populated dynamically -->
|
||||
</select>
|
||||
<div class="error-message" id="vaForTipError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tip Amount</label>
|
||||
<input type="text" class="form-input" id="vaTipAmount" required>
|
||||
<div class="error-message" id="vaTipAmountError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tip Description</label>
|
||||
<textarea required="true" name="vaTipDescription" class="form-input" id="vaTipDescription"></textarea>
|
||||
<div class="error-message" id="vaTipDescriptionError"></div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="cancel-btn" onclick="closeTipModal()">Cancel</button>
|
||||
<button type="submit" class="save-btn" id="submitTipBtn">Submit Tip</button>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
</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}`,
|
||||
'type': 'client',
|
||||
'Content-Type': 'application/json',
|
||||
'ngrok-skip-browser-warning': 69420,
|
||||
...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 = '/';
|
||||
}
|
||||
}
|
||||
|
||||
// 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';
|
||||
}
|
||||
|
||||
function openTipModal() {
|
||||
const modal = document.getElementById('tipModal');
|
||||
modal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Clear form
|
||||
document.getElementById('tipForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function closeTipModal() {
|
||||
const modal = document.getElementById('tipModal');
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
// Clear form and errors
|
||||
document.getElementById('tipForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function clearErrorMessages() {
|
||||
document.getElementById('vaForTipError').textContent = '';
|
||||
document.getElementById('vaTipAmountError').textContent = '';
|
||||
document.getElementById('vaTipDescriptionError').textContent = '';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.querySelector('.mobile-menu-button');
|
||||
const sidebar = document.querySelector('.dashboard-sidebar');
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('active');
|
||||
});
|
||||
|
||||
document.getElementById('tipVaAddBtn').addEventListener('click', openTipModal);
|
||||
|
||||
document.getElementById('tipModal').addEventListener('click', function (e) {
|
||||
if (e.target === this) {
|
||||
closeTipModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal with escape key
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeLogoutModal();
|
||||
closeTipModal();
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
// ------------------------------
|
||||
// TIP FORM SUBMISSION HANDLER
|
||||
// ------------------------------
|
||||
|
||||
document.getElementById('tipForm').addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
clearErrorMessages();
|
||||
|
||||
const vaId = document.getElementById('vaForTip').value;
|
||||
const amount = document.getElementById('vaTipAmount').value.trim();
|
||||
const description = document.getElementById('vaTipDescription').value.trim();
|
||||
|
||||
let isValid = true;
|
||||
|
||||
// Validation
|
||||
if (!vaId) {
|
||||
document.getElementById('vaForTipError').textContent = "Please select a virtual assistant.";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!amount || isNaN(amount) || Number(amount) <= 0) {
|
||||
document.getElementById('vaTipAmountError').textContent = "Enter a valid tip amount.";
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
// Prepare API body
|
||||
const payload = {
|
||||
vaId,
|
||||
amount: Number(amount),
|
||||
description
|
||||
};
|
||||
|
||||
try {
|
||||
document.getElementById('submitTipBtn').disabled = true;
|
||||
document.getElementById('submitTipBtn').textContent = "Submitting...";
|
||||
|
||||
const response = await fetchWithAuth(`/api/v1/client/tips`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
alert(data.message || "Failed to submit tip.");
|
||||
return;
|
||||
}
|
||||
|
||||
alert("Tip submitted successfully!");
|
||||
closeTipModal();
|
||||
|
||||
// Optionally refresh page or reload tips list
|
||||
window.location.reload();
|
||||
|
||||
} catch (err) {
|
||||
console.error("Tip submit error:", err);
|
||||
alert("Something went wrong while submitting tip.");
|
||||
} finally {
|
||||
document.getElementById('submitTipBtn').disabled = false;
|
||||
document.getElementById('submitTipBtn').textContent = "Submit Tip";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Load VAs for tip selection
|
||||
async function loadVAs() {
|
||||
try {
|
||||
const response = await fetchWithAuth(`${API_BASE}/dashboard`);
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Failed to load VAs:", data.message);
|
||||
return;
|
||||
}
|
||||
|
||||
const vaSelect = document.getElementById('vaForTip');
|
||||
data.data.allVAs.forEach(va => {
|
||||
const option = document.createElement('option');
|
||||
option.value = va.id;
|
||||
option.textContent = va.name;
|
||||
vaSelect.appendChild(option);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error loading VAs:", error);
|
||||
}
|
||||
}
|
||||
|
||||
loadVAs();
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Load VAs for tip selection
|
||||
async function loadTips() {
|
||||
try {
|
||||
const response = await fetchWithAuth(`${API_BASE}/tips`);
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Failed to load VAs:", data.message);
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
const vaSelect = document.getElementById('vaTipTableBody');
|
||||
data.data.forEach(tip => {
|
||||
const row = document.createElement('tr');
|
||||
const cellVoid = document.createElement('td');
|
||||
const cellStatus = document.createElement('td');
|
||||
const cellName = document.createElement('td');
|
||||
const cellDescription = document.createElement('td');
|
||||
const cellDate = document.createElement('td');
|
||||
const cellAmount = document.createElement('td');
|
||||
|
||||
cellVoid.innerHTML = `<button id='voidBtn' class='void-btn-a' data-id='${tip._id}'>Void</button>`;
|
||||
cellVoid.classList.add('void-btn');
|
||||
|
||||
cellStatus.textContent = tip.status;
|
||||
cellName.textContent = tip.vaName;
|
||||
cellDescription.textContent = tip.description;
|
||||
cellDate.textContent = tip.createdAt ? new Date(tip.createdAt).toLocaleDateString() : '';
|
||||
cellAmount.textContent = `$${parseFloat(tip.amount).toFixed(2)}`;
|
||||
|
||||
row.appendChild(cellVoid);
|
||||
row.appendChild(cellStatus);
|
||||
row.appendChild(cellName);
|
||||
row.appendChild(cellDescription);
|
||||
row.appendChild(cellDate);
|
||||
row.appendChild(cellAmount);
|
||||
|
||||
vaSelect.appendChild(row);
|
||||
});
|
||||
|
||||
document.querySelectorAll('.void-btn-a').forEach(button => {
|
||||
button.addEventListener('click', async function () {
|
||||
const tipId = this.getAttribute('data-id');
|
||||
if (confirm('Are you sure you want to void this tip?')) {
|
||||
try {
|
||||
const response = await fetchWithAuth(`${API_BASE}/tips/${tipId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
alert(result.message || 'Failed to void tip.');
|
||||
return;
|
||||
}
|
||||
|
||||
alert('Tip voided successfully!');
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error('Error voiding tip:', error);
|
||||
alert('Something went wrong while voiding the tip.');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error loading VAs:", error);
|
||||
}
|
||||
}
|
||||
|
||||
loadTips();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,65 +1,478 @@
|
|||
<div class="profile-container">
|
||||
<div class="profile-header">
|
||||
<h1 class="profile-title">Client Profile</h1>
|
||||
</div>
|
||||
|
||||
<div class="profile-sections">
|
||||
<!-- Personal Information -->
|
||||
<div class="profile-section">
|
||||
<div class="section-header">
|
||||
<i class="fas fa-user section-icon"></i>
|
||||
<h2 class="section-title">Personal Information</h2>
|
||||
<!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 | Profile</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">
|
||||
<i class="fas fa-file-invoice"></i>Projects
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="mobile-menu-button">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Full Name</label>
|
||||
<input type="text" class="form-input" id="name" readonly>
|
||||
</nav>
|
||||
<div class="dashboard-container">
|
||||
<aside class="dashboard-sidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="sidebar-list">
|
||||
<li class="sidebar-item">
|
||||
<a href="/client/profile" class="sidebar-link active">
|
||||
<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">
|
||||
<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">
|
||||
<div class="profile-container">
|
||||
<div class="profile-header">
|
||||
<h1 class="profile-title">Client Profile</h1>
|
||||
</div>
|
||||
|
||||
<div class="profile-sections">
|
||||
<!-- Personal Information -->
|
||||
<div class="profile-section">
|
||||
<div class="section-header">
|
||||
<i class="fas fa-user section-icon"></i>
|
||||
<h2 class="section-title">Personal Information</h2>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Full Name</label>
|
||||
<input type="text" class="form-input" id="name" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-input" id="email" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Position</label>
|
||||
<input type="text" class="form-input" id="position" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address Information -->
|
||||
<div class="profile-section">
|
||||
<div class="section-header">
|
||||
<i class="fas fa-home section-icon"></i>
|
||||
<h2 class="section-title">Address Information</h2>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Address</label>
|
||||
<input type="text" class="form-input" id="address" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">City</label>
|
||||
<input type="text" class="form-input" id="city" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">State</label>
|
||||
<input type="text" class="form-input" id="state" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">ZIP Code</label>
|
||||
<input type="text" class="form-input" id="zip" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password Change Section -->
|
||||
<div class="profile-section">
|
||||
<div class="password-section">
|
||||
<button class="change-password-btn" id="changePasswordBtn">
|
||||
<i class="fas fa-lock"></i>
|
||||
Change Password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="form-input" id="email" readonly>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Change Password Modal -->
|
||||
<div id="passwordModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Change Password</h2>
|
||||
<button class="modal-close" onclick="closePasswordModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Position</label>
|
||||
<input type="text" class="form-input" id="position" readonly>
|
||||
<div class="modal-body">
|
||||
<form class="modal-form" id="passwordForm">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Current Password</label>
|
||||
<input type="password" class="form-input" id="currentPassword" required>
|
||||
<div class="error-message" id="currentPasswordError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">New Password</label>
|
||||
<input type="password" class="form-input" id="newPassword" required>
|
||||
<div class="error-message" id="newPasswordError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Confirm New Password</label>
|
||||
<input type="password" class="form-input" id="confirmPassword" required>
|
||||
<div class="error-message" id="confirmPasswordError"></div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="cancel-btn" onclick="closePasswordModal()">Cancel</button>
|
||||
<button type="submit" class="save-btn" id="savePasswordBtn">Change Password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Address Information -->
|
||||
<div class="profile-section">
|
||||
<div class="section-header">
|
||||
<i class="fas fa-home section-icon"></i>
|
||||
<h2 class="section-title">Address Information</h2>
|
||||
</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Address</label>
|
||||
<input type="text" class="form-input" id="address" readonly>
|
||||
|
||||
<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="form-group">
|
||||
<label class="form-label">City</label>
|
||||
<input type="text" class="form-input" id="city" readonly>
|
||||
<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 class="form-group">
|
||||
<label class="form-label">State</label>
|
||||
<input type="text" class="form-input" id="state" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">ZIP Code</label>
|
||||
<input type="text" class="form-input" id="zip" readonly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password Change Section -->
|
||||
<div class="profile-section">
|
||||
<div class="password-section">
|
||||
<button class="change-password-btn" id="changePasswordBtn">
|
||||
<i class="fas fa-lock"></i>
|
||||
Change Password
|
||||
</button>
|
||||
</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 {
|
||||
await fetchWithAuth(`${API_BASE}/logout`, { method: 'POST' });
|
||||
} catch (error) {
|
||||
console.error('Logout API error:', error);
|
||||
} finally {
|
||||
localStorage.removeItem('knoptpq');
|
||||
localStorage.removeItem('refreshToken');
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
|
||||
// Format empty fields
|
||||
function formatEmptyFields() {
|
||||
const inputs = document.querySelectorAll('.form-input');
|
||||
inputs.forEach(input => {
|
||||
if (!input.value.trim()) {
|
||||
input.value = 'Not provided';
|
||||
input.classList.add('empty-field');
|
||||
} else {
|
||||
input.classList.remove('empty-field');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Load profile data
|
||||
async function loadProfileData() {
|
||||
try {
|
||||
const response = await fetchWithAuth(`${API_BASE}/profile`);
|
||||
if (!response) return;
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
const data = result.data;
|
||||
|
||||
// Populate only personal and address information
|
||||
const fieldsToShow = ['name', 'email', 'position', 'address', 'city', 'state', 'zip'];
|
||||
|
||||
fieldsToShow.forEach(key => {
|
||||
const element = document.getElementById(key);
|
||||
if (element && data[key]) {
|
||||
element.value = data[key];
|
||||
}
|
||||
});
|
||||
|
||||
formatEmptyFields();
|
||||
|
||||
} else {
|
||||
console.error('Failed to load profile data:', result.message);
|
||||
alert('Failed to load profile data');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading profile data:', error);
|
||||
alert('Error loading profile data');
|
||||
}
|
||||
}
|
||||
|
||||
// Password Modal Functions
|
||||
function openPasswordModal() {
|
||||
const modal = document.getElementById('passwordModal');
|
||||
modal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Clear form
|
||||
document.getElementById('passwordForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function closePasswordModal() {
|
||||
const modal = document.getElementById('passwordModal');
|
||||
modal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
|
||||
// Clear form and errors
|
||||
document.getElementById('passwordForm').reset();
|
||||
clearErrorMessages();
|
||||
}
|
||||
|
||||
function clearErrorMessages() {
|
||||
document.getElementById('currentPasswordError').textContent = '';
|
||||
document.getElementById('newPasswordError').textContent = '';
|
||||
document.getElementById('confirmPasswordError').textContent = '';
|
||||
}
|
||||
|
||||
// Change password
|
||||
async function changePassword(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const currentPassword = document.getElementById('currentPassword').value;
|
||||
const newPassword = document.getElementById('newPassword').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
|
||||
// Reset errors
|
||||
clearErrorMessages();
|
||||
|
||||
let hasError = false;
|
||||
|
||||
if (!currentPassword) {
|
||||
document.getElementById('currentPasswordError').textContent = 'Current password is required';
|
||||
hasError = true;
|
||||
}
|
||||
|
||||
if (!newPassword) {
|
||||
document.getElementById('newPasswordError').textContent = 'New password is required';
|
||||
hasError = true;
|
||||
} else if (newPassword.length < 6) {
|
||||
document.getElementById('newPasswordError').textContent = 'Password must be at least 6 characters';
|
||||
hasError = true;
|
||||
}
|
||||
|
||||
if (!confirmPassword) {
|
||||
document.getElementById('confirmPasswordError').textContent = 'Please confirm your password';
|
||||
hasError = true;
|
||||
} else if (newPassword !== confirmPassword) {
|
||||
document.getElementById('confirmPasswordError').textContent = 'Passwords do not match';
|
||||
hasError = true;
|
||||
}
|
||||
|
||||
if (hasError) return;
|
||||
|
||||
try {
|
||||
const saveBtn = document.getElementById('savePasswordBtn');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Changing Password...';
|
||||
|
||||
const response = await fetchWithAuth(`${API_BASE}/profile`, {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({
|
||||
userDetails: {
|
||||
currentPassword,
|
||||
newPassword,
|
||||
confirmPassword
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (!response) {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Change Password';
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
alert('Password changed successfully!');
|
||||
closePasswordModal();
|
||||
} else {
|
||||
alert(result.message || 'Failed to change password');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error changing password:', error);
|
||||
alert('Error changing password');
|
||||
} finally {
|
||||
const saveBtn = document.getElementById('savePasswordBtn');
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Change Password';
|
||||
}
|
||||
}
|
||||
|
||||
// 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';
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadProfileData();
|
||||
|
||||
// Change password button
|
||||
document.getElementById('changePasswordBtn').addEventListener('click', openPasswordModal);
|
||||
|
||||
// Password form submission
|
||||
document.getElementById('passwordForm').addEventListener('submit', changePassword);
|
||||
|
||||
// Close modal when clicking outside
|
||||
document.getElementById('passwordModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closePasswordModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal with escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closePasswordModal();
|
||||
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);
|
||||
|
||||
// Mobile menu toggle
|
||||
const menuToggle = document.querySelector('.mobile-menu-button');
|
||||
const sidebar = document.querySelector('.dashboard-sidebar');
|
||||
menuToggle.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +1,509 @@
|
|||
<!-- 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>
|
||||
<!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="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 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>
|
||||
</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>
|
||||
|
|
@ -1,71 +1,637 @@
|
|||
<!-- 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>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- Virtual Assistants List -->
|
||||
<div class="content-section">
|
||||
<div class="section-header" style="justify-content: space-between;align-items: center;">
|
||||
<h2 class="section-title">Virtual Assistants <span class="total-count" id="vaListCount">0 VAs</span></h2>
|
||||
<a href="/client/virtual-assistants/manage-tips" class="btn btn-primary">Manage Tips</a>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Virtual Assistant</th>
|
||||
<th>Active Project</th>
|
||||
<th>Total Projects</th>
|
||||
<th>Today Logged Hours</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="vaTableBody">
|
||||
<!-- Data will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
<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 active">
|
||||
<i class="fas fa-users"></i>Virtual Assistants
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/client/projects" class="nav-button">
|
||||
<i class="fas fa-file-invoice"></i>Projects
|
||||
</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">
|
||||
<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 active">
|
||||
<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">
|
||||
<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">
|
||||
<!-- 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" style="justify-content: space-between;align-items: center;">
|
||||
<h2 class="section-title">Virtual Assistants <span class="total-count" id="vaListCount">0
|
||||
VAs</span></h2>
|
||||
<a href="/client/virtual-assistants/manage-tips" class="btn btn-primary">Manage Tips</a>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<div class="table-wrapper">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<th>Virtual Assistant</th>
|
||||
<th>Active Project</th>
|
||||
<th>Total Projects</th>
|
||||
<th>Today Logged Hours</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 id="vaEmptyState" style="display: none;">
|
||||
|
||||
<!-- VA Modal Start -->
|
||||
<div id="vaModal" 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="modalVAName">VA Details</h2>
|
||||
<button class="modal-close" onclick="closeVAModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Projects Section -->
|
||||
<div class="va-details-section">
|
||||
<h3 class="va-section-title">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
Projects
|
||||
<span class="va-count-badge" id="projectsCountBadge">0</span>
|
||||
</h3>
|
||||
|
||||
<div class="va-table-container">
|
||||
<table class="va-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project Name</th>
|
||||
<th>Hourly Rate</th>
|
||||
<th>Worked Time</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="modalProjectsTableBody">
|
||||
<!-- Project details will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="modalNoProjects" class="no-vas-message" style="display: none;">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
<h4>No Projects</h4>
|
||||
<p>This VA is not assigned to any projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div class="modal-actions" id="modalActions" style="display: none;">
|
||||
<a href="#" class="view-session-btn" id="viewSessionBtn" target="_blank">
|
||||
<i class="fas fa-eye"></i>
|
||||
View Live Session
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- VA Modal Start -->
|
||||
|
||||
<!-- Log Modal Start -->
|
||||
<div id="vaModal" 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="modalVAName">VA Details</h2>
|
||||
<button class="modal-close" onclick="closeVAModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Projects Section -->
|
||||
<div class="va-details-section">
|
||||
<!-- <h3 class="va-section-title">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
Projects
|
||||
<span class="va-count-badge" id="projectsCountBadge">0</span>
|
||||
</h3> -->
|
||||
|
||||
<div class="va-table-container">
|
||||
<table class="va-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Title</th>
|
||||
<th>Time</th>
|
||||
<th>Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="modalProjectsTableBody">
|
||||
<!-- Project details will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="modalNoProjects" class="no-vas-message" style="display: none;">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
<h4>No Logs Found</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div class="modal-actions" id="modalActions" style="display: none;">
|
||||
<a href="#" class="view-session-btn" id="viewSessionBtn" target="_blank">
|
||||
<i class="fas fa-eye"></i>
|
||||
View Live Session
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Log Modal End -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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 = '/';
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
return 'Just started';
|
||||
}
|
||||
}
|
||||
|
||||
const vaModal = document.getElementById('vaModal');
|
||||
|
||||
function openVAModal(va) {
|
||||
// Set basic VA info
|
||||
document.getElementById('modalVAName').textContent = va.name;
|
||||
|
||||
// Set projects
|
||||
const projects = va.projects || [];
|
||||
document.getElementById('projectsCountBadge').textContent = projects.length;
|
||||
|
||||
const projectsTableBody = document.getElementById('modalProjectsTableBody');
|
||||
const noProjectsMessage = document.getElementById('modalNoProjects');
|
||||
|
||||
if (projects.length > 0) {
|
||||
projectsTableBody.innerHTML = projects.map(project => createProjectTableRow(project)).join('');
|
||||
projectsTableBody.style.display = '';
|
||||
noProjectsMessage.style.display = 'none';
|
||||
} else {
|
||||
projectsTableBody.innerHTML = '';
|
||||
projectsTableBody.style.display = 'none';
|
||||
noProjectsMessage.style.display = 'block';
|
||||
}
|
||||
|
||||
// Set action button
|
||||
const modalActions = document.getElementById('modalActions');
|
||||
const viewSessionBtn = document.getElementById('viewSessionBtn');
|
||||
|
||||
if (va.isCurrentlyActive && va.lastProjectId) {
|
||||
viewSessionBtn.href = `/live/${va.lastProjectId}/${va.id}`;
|
||||
modalActions.style.display = 'block';
|
||||
} else {
|
||||
modalActions.style.display = 'none';
|
||||
}
|
||||
|
||||
// Show modal
|
||||
vaModal.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeVAModal() {
|
||||
vaModal.style.display = 'none';
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
|
||||
// Create project table row for modal
|
||||
function createProjectTableRow(project) {
|
||||
const statusClass = project.isCurrentlyWorking ? 'active' : 'inactive';
|
||||
const statusText = project.isCurrentlyWorking ? 'Working' : 'Not Active';
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="project-info">
|
||||
<div class="project-name">${project.name}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="hourly-rate">$${project.hourlyRate}/hr</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="worked-time">${project.totalWorkedTime}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="status-badge ${statusClass}">
|
||||
<span class="status-text">${statusText}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
|
||||
// Create VA table row for main table
|
||||
function createVATableRow(va) {
|
||||
const statusClass = va.isCurrentlyActive ? 'active' : 'inactive';
|
||||
const statusText = va.isCurrentlyActive ? 'Active' : 'Inactive';
|
||||
const activeProject = va?.lastProject?.name ? va.lastProject.name : '-';
|
||||
const workedTime = formatTime(va.currentSessionDuration);
|
||||
const projectsAssigned = va.projectsAssigned || 0;
|
||||
const viewLink = va.isCurrentlyActive ? `<a href="/live/${va.lastProjectId}/${va.id}" class="view-link va-action" data-va-id="${va.id}" target="_blank">Live Tracking</a>` : '<p class="va-logs va-action" data-va-id="${va.id}" target="_blank">Logs</p>';
|
||||
|
||||
return `
|
||||
<tr class="va-row" data-va-id="${va.id}">
|
||||
<td>
|
||||
<div class="status-indicator">
|
||||
<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">${activeProject}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="projects-count">${projectsAssigned}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="worked-time">${workedTime}</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();
|
||||
|
||||
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 || [];
|
||||
|
||||
if (allVAs.length > 0) {
|
||||
vaTableBody.innerHTML = allVAs.map(va => createVATableRow(va)).join('');
|
||||
vaTableBody.style.display = '';
|
||||
vaEmptyState.style.display = 'none';
|
||||
|
||||
// Store VA data globally for modal access
|
||||
window.vaData = allVAs;
|
||||
|
||||
// Add click event listeners to VA rows
|
||||
document.querySelectorAll('.va-info').forEach((row, index) => {
|
||||
row.addEventListener('click', function (e) {
|
||||
// Don't open modal if clicking on view link
|
||||
if (!e.target.closest('.view-link')) {
|
||||
const va = allVAs[index];
|
||||
openVAModal(va);
|
||||
}
|
||||
});
|
||||
});
|
||||
} 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-users"></i>
|
||||
<h3>No Virtual Assistants</h3>
|
||||
<p>You haven't assigned any virtual assistants yet.</p>
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<h3>Error</h3>
|
||||
<p>${message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
vaEmptyState.style.display = 'block';
|
||||
}
|
||||
|
||||
// Close modal when clicking outside
|
||||
vaModal.addEventListener('click', (e) => {
|
||||
if (e.target === vaModal) {
|
||||
closeVAModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal with escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && vaModal.style.display === 'flex') {
|
||||
closeVAModal();
|
||||
}
|
||||
});
|
||||
|
||||
// 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';
|
||||
}
|
||||
|
||||
const handleVaLogsClick = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
cosnole.log("handleVaLogsClick Called")
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
|
||||
|
||||
|
||||
const allVaLogsBtn = document.querySelectorAll(".va-logs");
|
||||
for (const va of allVaLogsBtn) {
|
||||
va.addEventListener("click", handleVaLogsClick)
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>
|
||||
<%= title || 'Auth' %>
|
||||
</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="/public/images/favicon.svg" sizes="any">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%- body %>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>
|
||||
<%= title || 'Dashboard' %>
|
||||
</title>
|
||||
|
||||
<link rel="stylesheet" href="/public/css/dashboard.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
<link rel="icon" href="/public/images/favicon.svg" sizes="any">
|
||||
</head>
|
||||
|
||||
<body class="dashboard-body">
|
||||
|
||||
<%- include('../partials/header') %>
|
||||
|
||||
<div class="dashboard-container">
|
||||
<%- include('../partials/sidebar') %>
|
||||
|
||||
<main class="dashboard-main">
|
||||
<div class="dashboard-content">
|
||||
<%- body %>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<%- include('../partials/va-modal') %>
|
||||
<%- include('../partials/logout-modal') %>
|
||||
<%- include('../partials/tip-modal') %>
|
||||
<%- include('../partials/projects-modal') %>
|
||||
|
||||
<%- include('../partials/password-modal') %>
|
||||
|
||||
<!-- COMMON SIDEBAR + LOGOUT -->
|
||||
<script src="/public/js/common/sidebar.js"></script>
|
||||
<script src="/public/js/common/header.js"></script>
|
||||
|
||||
<!-- COMMON -->
|
||||
<script src="/public/js/common/theme.js"></script>
|
||||
<script src="/public/js/common/auth.js"></script>
|
||||
<script src="/public/js/common/logout.js"></script>
|
||||
|
||||
<!-- PAGE -->
|
||||
<% if (typeof pageScript !=='undefined' ) { %>
|
||||
<script src="/public/js/pages/<%= pageScript %>"></script>
|
||||
<% } %>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<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">
|
||||
<i class="fas fa-file-invoice"></i>Projects
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="mobile-menu-button">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<!-- Profile Dropdown -->
|
||||
<div class="header-profile">
|
||||
<div class="profile-trigger">
|
||||
<i class="fas fa-user"></i>
|
||||
</div>
|
||||
|
||||
<div class="profile-menu">
|
||||
|
||||
<a href="/client/profile">
|
||||
<i class="fas fa-user"></i>
|
||||
Profile
|
||||
</a>
|
||||
<!-- <a href="/client/account-settings">
|
||||
<i class="fas fa-cog"></i>
|
||||
Account Settings
|
||||
</a> -->
|
||||
<!-- <a href="/client/billing">
|
||||
<i class="fas fa-credit-card"></i>
|
||||
Billing & Payments
|
||||
</a> -->
|
||||
|
||||
<div class="menu-divider"></div>
|
||||
|
||||
<button class="logout-btn" onclick="openLogoutModal()">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<div id="passwordModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Change Password</h2>
|
||||
<button class="modal-close" onclick="closePasswordModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="modal-form" id="passwordForm">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Current Password</label>
|
||||
<input type="password" class="form-input" id="currentPassword" required>
|
||||
<div class="error-message" id="currentPasswordError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">New Password</label>
|
||||
<input type="password" class="form-input" id="newPassword" required>
|
||||
<div class="error-message" id="newPasswordError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Confirm New Password</label>
|
||||
<input type="password" class="form-input" id="confirmPassword" required>
|
||||
<div class="error-message" id="confirmPasswordError"></div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="cancel-btn" onclick="closePasswordModal()">Cancel</button>
|
||||
<button type="submit" class="save-btn" id="savePasswordBtn">Change Password</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<aside class="dashboard-sidebar" id="dashboardSidebar">
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="sidebar-list">
|
||||
|
||||
<li>
|
||||
<a href="/client/profile" class="sidebar-link">
|
||||
<i class="fas fa-user"></i>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/client/dashboard" class="sidebar-link">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/client/virtual-assistants" class="sidebar-link">
|
||||
<i class="fas fa-users"></i>
|
||||
<span>Virtual Assistants</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/client/projects" class="sidebar-link">
|
||||
<i class="fas fa-file-invoice"></i>
|
||||
<span>Projects</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="javascript:void(0)" id="logoutButton" class="sidebar-link logout">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<div id="tipModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title">Tip Virtual Assistant</h2>
|
||||
<button class="modal-close" onclick="closeTipModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="modal-form" id="tipForm">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Select Virtual Assistant</label>
|
||||
<select name="vaForTip" class="form-input" id="vaForTip" required>
|
||||
<option value="">-- Select Virtual Assistant --</option>
|
||||
<!-- Options will be populated dynamically -->
|
||||
</select>
|
||||
<div class="error-message" id="vaForTipError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tip Amount</label>
|
||||
<input type="text" class="form-input" id="vaTipAmount" required>
|
||||
<div class="error-message" id="vaTipAmountError"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Tip Description</label>
|
||||
<textarea required="true" name="vaTipDescription" class="form-input" id="vaTipDescription"></textarea>
|
||||
<div class="error-message" id="vaTipDescriptionError"></div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="cancel-btn" onclick="closeTipModal()">Cancel</button>
|
||||
<button type="submit" class="save-btn" id="submitTipBtn">Submit Tip</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<div id="vaModal" class="modal-overlay">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="modalVAName">VA Details</h2>
|
||||
<button class="modal-close" onclick="closeVAModal()">✖</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<table class="va-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project</th>
|
||||
<th>Rate</th>
|
||||
<th>Time</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="modalProjectsTableBody"></tbody>
|
||||
</table>
|
||||
|
||||
<div id="modalNoProjects" class="empty-state" style="display:none">
|
||||
No Projects Assigned
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<div id="vaModal" 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="modalVAName">VA Details</h2>
|
||||
<button class="modal-close" onclick="closeVAModal()">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Projects Section -->
|
||||
<div class="va-details-section">
|
||||
<h3 class="va-section-title">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
Projects
|
||||
<span class="va-count-badge" id="projectsCountBadge">0</span>
|
||||
</h3>
|
||||
|
||||
<div class="va-table-container">
|
||||
<table class="va-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project Name</th>
|
||||
<th>Hourly Rate</th>
|
||||
<th>Worked Time</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="modalProjectsTableBody">
|
||||
<!-- Project details will be loaded here -->
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="modalNoProjects" class="no-vas-message" style="display: none;">
|
||||
<i class="fas fa-briefcase"></i>
|
||||
<h4>No Projects</h4>
|
||||
<p>This VA is not assigned to any projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div class="modal-actions" id="modalActions" style="display: none;">
|
||||
<a href="#" class="view-session-btn" id="viewSessionBtn" target="_blank">
|
||||
<i class="fas fa-eye"></i>
|
||||
View Live Session
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue