Compare commits
8 Commits
0c14e26937
...
bfcd64cf0e
| Author | SHA1 | Date |
|---|---|---|
 =bhagwanSingh
|
bfcd64cf0e | |
 Aakash Mittal
|
bc3b81e12f | |
|
Aakash Mittal
|
41f5eff4d7 | |
|
Aakash Mittal
|
4d1abaf9aa | |
|
Aakash Mittal
|
68a248c25a | |
|
Aakash Mittal
|
2d61f25d5b | |
|
Aakash Mittal
|
0b0f1d5ab3 | |
 JaiPandey425
|
604afe9b72 |
|
|
@ -20,6 +20,7 @@
|
||||||
"dotenv": "^16.4.7",
|
"dotenv": "^16.4.7",
|
||||||
"ejs": "^3.1.10",
|
"ejs": "^3.1.10",
|
||||||
"express": "^4.19.2",
|
"express": "^4.19.2",
|
||||||
|
"express-ejs-layouts": "^2.5.1",
|
||||||
"express-minify": "^1.0.0",
|
"express-minify": "^1.0.0",
|
||||||
"helmet": "^8.1.0",
|
"helmet": "^8.1.0",
|
||||||
"html-minifier": "^4.0.0",
|
"html-minifier": "^4.0.0",
|
||||||
|
|
@ -4232,6 +4233,11 @@
|
||||||
"node": ">= 0.10.0"
|
"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": {
|
"node_modules/express-minify": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/express-minify/-/express-minify-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/express-minify/-/express-minify-1.0.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@
|
||||||
"dotenv": "^16.4.7",
|
"dotenv": "^16.4.7",
|
||||||
"ejs": "^3.1.10",
|
"ejs": "^3.1.10",
|
||||||
"express": "^4.19.2",
|
"express": "^4.19.2",
|
||||||
|
"express-ejs-layouts": "^2.5.1",
|
||||||
"express-minify": "^1.0.0",
|
"express-minify": "^1.0.0",
|
||||||
"helmet": "^8.1.0",
|
"helmet": "^8.1.0",
|
||||||
"html-minifier": "^4.0.0",
|
"html-minifier": "^4.0.0",
|
||||||
|
|
|
||||||
|
|
@ -165,7 +165,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-menu-button {
|
.mobile-menu-button {
|
||||||
display: none;
|
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -201,6 +200,9 @@ body {
|
||||||
.dashboard-sidebar {
|
.dashboard-sidebar {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.mobile-menu-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
@ -213,9 +215,14 @@ body {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
transition: .3s ease;
|
transition: .3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-sidebar.active {
|
.dashboard-sidebar.active {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-header {
|
.sidebar-header {
|
||||||
|
|
@ -260,6 +267,53 @@ body {
|
||||||
color: var(--text-primary);
|
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 {
|
[data-theme="dark"] .sidebar-link:hover {
|
||||||
background-color: var(--color-gray-800);
|
background-color: var(--color-gray-800);
|
||||||
}
|
}
|
||||||
|
|
@ -699,6 +753,7 @@ body {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0.9) translateY(-20px);
|
transform: scale(0.9) translateY(-20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1) translateY(0);
|
transform: scale(1) translateY(0);
|
||||||
|
|
@ -1214,10 +1269,19 @@ tr[data-vaid]:hover {
|
||||||
background: var(--color-gray-400);
|
background: var(--color-gray-400);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0% { opacity: 1; }
|
0% {
|
||||||
50% { opacity: 0.5; }
|
opacity: 1;
|
||||||
100% { opacity: 1; }
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-vas-message {
|
.no-vas-message {
|
||||||
|
|
@ -1627,12 +1691,20 @@ tr[data-vaid]:hover {
|
||||||
|
|
||||||
/* Additional Dark Mode Styles for Elements Not Covered */
|
/* Additional Dark Mode Styles for Elements Not Covered */
|
||||||
[data-theme="dark"] {
|
[data-theme="dark"] {
|
||||||
|
|
||||||
/* Ensure all text colors are properly set */
|
/* Ensure all text colors are properly set */
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
p, span, div {
|
p,
|
||||||
|
span,
|
||||||
|
div {
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1710,6 +1782,164 @@ tr[data-vaid]:hover {
|
||||||
transform: scale(1);
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.profile-name {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Accordion Styles */
|
/* Accordion Styles */
|
||||||
.accordion {
|
.accordion {
|
||||||
|
|
@ -1803,6 +2033,8 @@ tr[data-vaid]:hover {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading-spinner {
|
.loading-spinner {
|
||||||
|
|
@ -1977,4 +2209,20 @@ tr[data-vaid]:hover {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
transform: none;
|
transform: none;
|
||||||
color: var(--accent-light);
|
color: var(--accent-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.data-table #vaCreditTableBody .status{
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-primary);
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: var(--color-gray-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table #vaCreditTableBody .status.invoiced {
|
||||||
|
background-color: rgba(16, 185, 129, 0.1);
|
||||||
|
color: var(--color-success);
|
||||||
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 435 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1,29 @@
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const mobileMenuButton = document.querySelector(".mobile-menu-button");
|
||||||
|
const sidebar = document.querySelector(".dashboard-sidebar");
|
||||||
|
mobileMenuButton.addEventListener("click", () => {
|
||||||
|
sidebar.classList.toggle("active");
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
(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);
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,263 @@
|
||||||
|
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>` : `<a class="va-logs va-action" data-va-id="${va.id}" target="_blank" href="/client/virtual-assistants/view-logs?va=${va.id}">Logs</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-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);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
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);
|
||||||
|
|
@ -0,0 +1,248 @@
|
||||||
|
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,240 @@
|
||||||
|
// 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);
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
// API base URL
|
||||||
|
const API_BASE = '/api/v1/client';
|
||||||
|
|
||||||
|
const vaCreditsTableBody = document.getElementById("vaCreditTableBody");
|
||||||
|
const vaCreditsEmptyState = document.getElementById("vaEmptyCreditState");
|
||||||
|
|
||||||
|
function createCreditRow(credit) {
|
||||||
|
return `
|
||||||
|
<tr data-credit-id="${credit.id}">
|
||||||
|
<td><span class="status ${credit.status.toLowerCase()}">${credit.status}</span></td>
|
||||||
|
<td>${credit.date}</td>
|
||||||
|
<td>${credit.comment}</td>
|
||||||
|
<td>$${credit.creditAmount}</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function loadCreditsData() {
|
||||||
|
const res = await fetchWithAuth(`${API_BASE}/credits`);
|
||||||
|
if (!res) return;
|
||||||
|
|
||||||
|
const result = await res.json();
|
||||||
|
if (!result.success) return;
|
||||||
|
console.log("Credits Result:", result);
|
||||||
|
|
||||||
|
const { data } = result;
|
||||||
|
|
||||||
|
console.log("Credits Data:", data);
|
||||||
|
|
||||||
|
const allCredits = data || [];
|
||||||
|
|
||||||
|
if (allCredits.length === 0) {
|
||||||
|
vaCreditsTableBody.innerHTML = "";
|
||||||
|
vaCreditsEmptyState.style.display = "block";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
vaCreditsEmptyState.style.display = "none";
|
||||||
|
|
||||||
|
vaCreditsTableBody.innerHTML = allCredits
|
||||||
|
.map((credit) => createCreditRow(credit))
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
let totalCredits = 0;
|
||||||
|
let availableCredits = 0;
|
||||||
|
|
||||||
|
allCredits.forEach(credit => {
|
||||||
|
totalCredits += parseFloat(credit.creditAmount);
|
||||||
|
if (credit.status.toLowerCase() === 'pending') {
|
||||||
|
availableCredits += parseFloat(credit.creditAmount);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
document.getElementById("vaTotalCredits").textContent = `$${totalCredits}`;
|
||||||
|
document.getElementById("vaAvailableCredits").textContent = `$${availableCredits}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initial load
|
||||||
|
loadCreditsData();
|
||||||
|
|
@ -0,0 +1,300 @@
|
||||||
|
// API base URL
|
||||||
|
const API_BASE = '/api/v1/client';
|
||||||
|
|
||||||
|
function toggleAccordion(accordionId) {
|
||||||
|
const accordion = document.getElementById(accordionId);
|
||||||
|
accordion.classList.toggle('active');
|
||||||
|
|
||||||
|
// const allAccordions = document.querySelectorAll('.accordion');
|
||||||
|
// allAccordions.forEach(acc => {
|
||||||
|
// if (acc.id !== accordionId && acc.classList.contains('active')) {
|
||||||
|
// acc.classList.remove('active');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTime(milliseconds) {
|
||||||
|
if (!milliseconds) return '0m';
|
||||||
|
|
||||||
|
const seconds = Math.floor(milliseconds / 1000);
|
||||||
|
const hours = Math.floor(seconds / 3600);
|
||||||
|
const minutes = Math.floor((seconds % 3600) / 60);
|
||||||
|
|
||||||
|
if (hours > 0) {
|
||||||
|
return `${hours}h ${minutes}m ${seconds % 60}s`;
|
||||||
|
}
|
||||||
|
return `${minutes}m ${seconds % 60}s`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(dateString) {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatTimeOnly(dateString) {
|
||||||
|
const date = new Date(dateString);
|
||||||
|
return date.toLocaleTimeString('en-US', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
second: '2-digit'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateTotalIndividualLogsHours(workTrackLogs) {
|
||||||
|
let total = 0;
|
||||||
|
workTrackLogs.forEach(workTrack => {
|
||||||
|
if (workTrack.logs && Array.isArray(workTrack.logs)) {
|
||||||
|
workTrack.logs.forEach(log => {
|
||||||
|
total += log.totalTime || 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return total;
|
||||||
|
}
|
||||||
|
|
||||||
|
function countIndividualLogs(workTrackLogs) {
|
||||||
|
let count = 0;
|
||||||
|
workTrackLogs.forEach(workTrack => {
|
||||||
|
if (workTrack.logs && Array.isArray(workTrack.logs)) {
|
||||||
|
count += workTrack.logs.length;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return count;
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateTotalHours(logs) {
|
||||||
|
return logs.reduce((total, log) => total + (log.totalTime || 0), 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create project accordion
|
||||||
|
function createProjectAccordion(projectData, index) {
|
||||||
|
const workTrackLogs = projectData.workTrackLogs || [];
|
||||||
|
const totalHours = calculateTotalIndividualLogsHours(workTrackLogs);
|
||||||
|
const individualLogsCount = countIndividualLogs(workTrackLogs);
|
||||||
|
const projectName = projectData.projectDetails?.name || `Project ${index + 1}`;
|
||||||
|
|
||||||
|
const accordionId = `project-${index}`;
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="accordion" id="${accordionId}">
|
||||||
|
<div class="accordion-header" onclick="toggleAccordion('${accordionId}')">
|
||||||
|
<div class="accordion-title">
|
||||||
|
${projectName}
|
||||||
|
<span class="logs-count">${individualLogsCount} activities</span>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||||
|
<div style="text-align: right;">
|
||||||
|
<div class="time-badge">${formatTime(totalHours)}</div>
|
||||||
|
</div>
|
||||||
|
<i class="fas fa-chevron-down accordion-icon"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="accordion-content">
|
||||||
|
${individualLogsCount > 0 ? createIndividualLogsTable(workTrackLogs) : createNoLogsMessage()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create table for individual log entries
|
||||||
|
function createIndividualLogsTable(workTrackLogs) {
|
||||||
|
// Collect all individual logs from all work tracks
|
||||||
|
const allIndividualLogs = [];
|
||||||
|
workTrackLogs.forEach(workTrack => {
|
||||||
|
if (workTrack.logs && Array.isArray(workTrack.logs)) {
|
||||||
|
workTrack.logs.forEach(log => {
|
||||||
|
allIndividualLogs.push(log);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return `
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table class="data-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Title</th>
|
||||||
|
<th>App Name</th>
|
||||||
|
<th>From</th>
|
||||||
|
<th>To</th>
|
||||||
|
<th>Total Time</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
${allIndividualLogs.map((log, index) => createIndividualLogRow(log, index)).join('')}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a single row for individual log entry
|
||||||
|
function createIndividualLogRow(log, index) {
|
||||||
|
const title = log.title || `Activity ${index + 1}`;
|
||||||
|
const appName = log.appName || 'Unknown App';
|
||||||
|
|
||||||
|
// Parse dates
|
||||||
|
const fromDate = log.from;
|
||||||
|
const toDate = log.to || log.from;
|
||||||
|
|
||||||
|
// Calculate duration
|
||||||
|
let duration = log.totalTime || 0;
|
||||||
|
if (!duration && fromDate && toDate) {
|
||||||
|
const from = new Date(fromDate);
|
||||||
|
const to = new Date(toDate);
|
||||||
|
duration = Math.floor((to - from) / 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
return `
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<strong>${title}</strong>
|
||||||
|
</td>
|
||||||
|
<td>${appName}</td>
|
||||||
|
<td>
|
||||||
|
<div class="datetime-cell">
|
||||||
|
<div class="date-text">${formatDate(fromDate)}</div>
|
||||||
|
<div class="time-text">${formatTimeOnly(fromDate)}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="datetime-cell">
|
||||||
|
<div class="date-text">${formatDate(toDate)}</div>
|
||||||
|
<div class="time-text">${formatTimeOnly(toDate)}</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="time-badge">${formatTime(duration)}</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create no logs message
|
||||||
|
function createNoLogsMessage() {
|
||||||
|
return `
|
||||||
|
<div style="text-align: center; padding: 2rem; color: #64748b;">
|
||||||
|
<i class="fas fa-clipboard"></i>
|
||||||
|
<h4>No Activity Logs</h4>
|
||||||
|
<p>No detailed activity logs available for this project.</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load VA logs
|
||||||
|
async function loadVALogs() {
|
||||||
|
const loadingState = document.getElementById('loadingState');
|
||||||
|
const emptyState = document.getElementById('emptyState');
|
||||||
|
const projectsContainer = document.getElementById('projectsContainer');
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Get VA ID from URL
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const vaId = urlParams.get('va');
|
||||||
|
|
||||||
|
if (!vaId) {
|
||||||
|
window.location.href = '/client/virtual-assistants';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch VA logs data
|
||||||
|
const response = await fetchWithAuth(`${API_BASE}/vaLogsData/${vaId}`);
|
||||||
|
|
||||||
|
if (!response || !response.ok) {
|
||||||
|
throw new Error('Failed to load VA logs');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (!data.success) {
|
||||||
|
throw new Error(data.message || 'Failed to load VA logs');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide loading state
|
||||||
|
loadingState.style.display = 'none';
|
||||||
|
|
||||||
|
const projectLogs = data.data?.projectLogs || [];
|
||||||
|
|
||||||
|
// Handle empty state
|
||||||
|
if (projectLogs.length === 0) {
|
||||||
|
emptyState.style.display = 'block';
|
||||||
|
projectsContainer.style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show projects container
|
||||||
|
projectsContainer.style.display = 'block';
|
||||||
|
emptyState.style.display = 'none';
|
||||||
|
|
||||||
|
// Create accordions for each project
|
||||||
|
let accordionsHTML = '';
|
||||||
|
projectLogs.forEach((project, index) => {
|
||||||
|
accordionsHTML += createProjectAccordion(project, index);
|
||||||
|
});
|
||||||
|
|
||||||
|
projectsContainer.innerHTML = accordionsHTML;
|
||||||
|
|
||||||
|
// Auto-open first accordion
|
||||||
|
if (projectLogs.length > 0) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const firstAccordion = document.getElementById('project-0');
|
||||||
|
if (firstAccordion) {
|
||||||
|
firstAccordion.classList.add('active');
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error loading VA logs:", error);
|
||||||
|
loadingState.style.display = 'none';
|
||||||
|
projectsContainer.style.display = 'none';
|
||||||
|
|
||||||
|
// Show error in empty state
|
||||||
|
emptyState.innerHTML = `
|
||||||
|
<i class="fas fa-exclamation-triangle"></i>
|
||||||
|
<h3>Error Loading Data</h3>
|
||||||
|
<p>${error.message}</p>
|
||||||
|
<button onclick="loadVALogs()" class="btn btn-primary" style="margin-top: 1rem;">
|
||||||
|
<i class="fas fa-redo"></i> Retry
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
emptyState.style.display = 'block';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// Load VA logs on page load
|
||||||
|
loadVALogs();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
@ -495,7 +495,7 @@ async function validateStep(step) {
|
||||||
const lastName = document.getElementById('last-name').value;
|
const lastName = document.getElementById('last-name').value;
|
||||||
const password = document.getElementById('password').value;
|
const password = document.getElementById('password').value;
|
||||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||||
if (!validateEmail(email) && !firstName && !lastName && !password && !confirmPassword) {
|
if (!firstName && !lastName && !password && !confirmPassword) {
|
||||||
isValid = false;
|
isValid = false;
|
||||||
showError('Fields are Required', null, step);
|
showError('Fields are Required', null, step);
|
||||||
let requiredFields1 = form.querySelectorAll('[required]');
|
let requiredFields1 = form.querySelectorAll('[required]');
|
||||||
|
|
|
||||||
|
|
@ -621,12 +621,18 @@
|
||||||
if (!payoneerAccount) {
|
if (!payoneerAccount) {
|
||||||
showError('Please enter your Payoneer account number', 'payoneerAccount', step);
|
showError('Please enter your Payoneer account number', 'payoneerAccount', step);
|
||||||
isValid = false;
|
isValid = false;
|
||||||
|
} else if (!validateEmail(payoneerAccount)) {
|
||||||
|
showError('Please enter a valid email address for Payoneer', 'payoneerAccount', step);
|
||||||
|
isValid = false;
|
||||||
}
|
}
|
||||||
} else if (paymentMethod === 'veem') {
|
} else if (paymentMethod === 'veem') {
|
||||||
const veemAccount = document.getElementById('veemAccount').value;
|
const veemAccount = document.getElementById('veemAccount').value;
|
||||||
if (!veemAccount) {
|
if (!veemAccount) {
|
||||||
showError('Please enter your Veem account number', 'veemAccount', step);
|
showError('Please enter your Veem account number', 'veemAccount', step);
|
||||||
isValid = false;
|
isValid = false;
|
||||||
|
} else if (!validateEmail(veemAccount)) {
|
||||||
|
showError('Please enter a valid email address for Veem', 'veemAccount', step);
|
||||||
|
isValid = false;
|
||||||
}
|
}
|
||||||
} else if (paymentMethod === 'wise') {
|
} else if (paymentMethod === 'wise') {
|
||||||
const wiseEmail = document.getElementById('wiseEmail').value;
|
const wiseEmail = document.getElementById('wiseEmail').value;
|
||||||
|
|
@ -763,6 +769,48 @@
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function validateVeemEmail(input) {
|
||||||
|
const wiseError = document.getElementById('veem-error');
|
||||||
|
const value = input.value.trim();
|
||||||
|
|
||||||
|
// Remove any validation styling first
|
||||||
|
input.style.border = '';
|
||||||
|
wiseError.style.display = 'none';
|
||||||
|
|
||||||
|
if (value.length > 0) {
|
||||||
|
// Check if it's a valid email
|
||||||
|
if (!validateEmail(value)) {
|
||||||
|
wiseError.textContent = 'Please enter a valid email address for Veem';
|
||||||
|
wiseError.style.display = 'block';
|
||||||
|
input.style.border = '1px solid #ef4444';
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function validatePayoneerEmail(input) {
|
||||||
|
const wiseError = document.getElementById('payoneer-error');
|
||||||
|
const value = input.value.trim();
|
||||||
|
|
||||||
|
// Remove any validation styling first
|
||||||
|
input.style.border = '';
|
||||||
|
wiseError.style.display = 'none';
|
||||||
|
|
||||||
|
if (value.length > 0) {
|
||||||
|
// Check if it's a valid email
|
||||||
|
if (!validateEmail(value)) {
|
||||||
|
wiseError.textContent = 'Please enter a valid email address for Payoneer';
|
||||||
|
wiseError.style.display = 'block';
|
||||||
|
input.style.border = '1px solid #ef4444';
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
// Function to generate a strong password
|
// Function to generate a strong password
|
||||||
function generatePassword() {
|
function generatePassword() {
|
||||||
const length = 12;
|
const length = 12;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
import authFetch from "../../../utils/authFetch.js";
|
||||||
|
|
||||||
|
async function va_credits_get(req, res) {
|
||||||
|
try {
|
||||||
|
const clientId = req.body.clientId;
|
||||||
|
const salesforceUrl = `${process.env.SF_DOCTRACKER_API_URL}services/apexrest/docva/api/credit/${clientId}`;
|
||||||
|
|
||||||
|
const response = await authFetch(salesforceUrl, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
// Add any required headers for Salesforce authentication
|
||||||
|
// 'Authorization': 'Bearer ' + process.env.SF_ACCESS_TOKEN
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
res.status(201).json({
|
||||||
|
success: true,
|
||||||
|
data: result.data
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to sync with Salesforce:", error.message);
|
||||||
|
console.log(error)
|
||||||
|
|
||||||
|
// Create a custom error to distinguish Salesforce errors
|
||||||
|
const salesforceError = new Error(`Salesforce sync failed: ${error.message}`);
|
||||||
|
salesforceError.isSalesforceError = true;
|
||||||
|
throw salesforceError;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { va_credits_get };
|
||||||
|
|
@ -28,7 +28,7 @@ async function va_register_client(req, res) {
|
||||||
if (!userDetails || !userDetails.email || !userDetails.firstName || !userDetails.lastName || !userDetails.password || !userDetails.name) {
|
if (!userDetails || !userDetails.email || !userDetails.firstName || !userDetails.lastName || !userDetails.password || !userDetails.name) {
|
||||||
return res.status(400).json({
|
return res.status(400).json({
|
||||||
success: false,
|
success: false,
|
||||||
message: "Missing required fields: firstName, lastName, email, company name and password are required"
|
message: "Missing required fields: firstName, lastName, email, password, and company name are required"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -55,26 +55,50 @@ async function render_reset_form(req, res) {
|
||||||
try {
|
try {
|
||||||
const { token, userType } = req.query;
|
const { token, userType } = req.query;
|
||||||
|
|
||||||
|
// ❌ Missing params
|
||||||
if (!token || !userType) {
|
if (!token || !userType) {
|
||||||
return res.render('auth/reset-password-error', { error: 'Reset token or user type is missing', userType: userType || 'va' });
|
return res.render('auth/reset-password-error', {
|
||||||
|
title: "Reset Password",
|
||||||
|
layout: 'layouts/auth',
|
||||||
|
error: 'Reset token or user type is missing',
|
||||||
|
userType: userType || 'va'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validate token
|
// ✅ Validate token
|
||||||
const validation = await passwordResetService.validateResetToken(token, userType);
|
const validation = await passwordResetService.validateResetToken(token, userType);
|
||||||
|
|
||||||
if (!validation.valid) {
|
if (!validation.valid) {
|
||||||
return res.render('auth/reset-password-error', { error: validation.message, userType: userType || 'va' });
|
return res.render('auth/reset-password-error', {
|
||||||
|
title: "Reset Password",
|
||||||
|
layout: 'layouts/auth',
|
||||||
|
error: validation.message,
|
||||||
|
userType: userType || 'va'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Render reset form with token
|
// ✅ Render reset password form
|
||||||
res.render('auth/reset-password-form', { token, userType, error: null });
|
return res.render('auth/reset-password-form', {
|
||||||
|
title: "Reset Password",
|
||||||
|
layout: 'layouts/auth',
|
||||||
|
token,
|
||||||
|
userType,
|
||||||
|
error: null
|
||||||
|
});
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
logger.error(`PasswordResetController - Render form error: ${error.message}`);
|
logger.error(`PasswordResetController - Render form error: ${error.message}`);
|
||||||
res.render('auth/reset-password-error', { error: 'Failed to load reset form' });
|
|
||||||
|
return res.render('auth/reset-password-error', {
|
||||||
|
title: "Reset Password",
|
||||||
|
layout: 'layouts/auth',
|
||||||
|
error: 'Failed to load reset form',
|
||||||
|
userType: 'va'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Process password reset form submission (shared for both VA and Client)
|
// Process password reset form submission (shared for both VA and Client)
|
||||||
async function process_reset(req, res) {
|
async function process_reset(req, res) {
|
||||||
try {
|
try {
|
||||||
|
|
|
||||||
|
|
@ -49,9 +49,38 @@ async function va_projects_report_function(req, res) {
|
||||||
|
|
||||||
// Default: current day range
|
// Default: current day range
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const fromDate = from && from !== "undefined" ? new Date(from) : new Date(now.setHours(0, 0, 0, 0));
|
let fromDate, toDate;
|
||||||
const toDate = to && to !== "undefined" ? new Date(to) : new Date();
|
|
||||||
toDate.setHours(23, 59, 59, 999);
|
if (from && from !== "undefined" && from !== "null") {
|
||||||
|
fromDate = new Date(from);
|
||||||
|
// If only date string provided (YYYY-MM-DD), set to start of day
|
||||||
|
if (from.length === 10) {
|
||||||
|
fromDate.setHours(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Default: 15 days ago
|
||||||
|
fromDate = new Date();
|
||||||
|
fromDate.setHours(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (to && to !== "undefined" && to !== "null") {
|
||||||
|
toDate = new Date(to);
|
||||||
|
// If only date string provided (YYYY-MM-DD), set to end of day
|
||||||
|
if (to.length === 10) {
|
||||||
|
toDate.setHours(23, 59, 59, 999);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Default: today end of day
|
||||||
|
toDate = new Date();
|
||||||
|
toDate.setHours(23, 59, 59, 999);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fromDate > toDate) {
|
||||||
|
return res.status(400).json({
|
||||||
|
success: false,
|
||||||
|
message: "Invalid date range: 'from' date must be before 'to' date"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Get all VA login/logout logs for this project in range
|
// Get all VA login/logout logs for this project in range
|
||||||
const logs = await LoggedModel.find({
|
const logs = await LoggedModel.find({
|
||||||
|
|
@ -61,7 +90,16 @@ async function va_projects_report_function(req, res) {
|
||||||
}).sort({ time: 1 }).lean();
|
}).sort({ time: 1 }).lean();
|
||||||
|
|
||||||
if (!logs.length) {
|
if (!logs.length) {
|
||||||
return res.json({ success: true, message: "No logs found for this project", data: [] });
|
return res.json({
|
||||||
|
success: true,
|
||||||
|
message: "No logs found for this project in the specified date range",
|
||||||
|
data: [],
|
||||||
|
dateRange: {
|
||||||
|
from: fromDate.toISOString().split('T')[0],
|
||||||
|
to: toDate.toISOString().split('T')[0],
|
||||||
|
days: Math.ceil((toDate - fromDate) / (1000 * 60 * 60 * 24))
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get all work tracks for this VA and project in the date range
|
// Get all work tracks for this VA and project in the date range
|
||||||
|
|
@ -70,7 +108,13 @@ async function va_projects_report_function(req, res) {
|
||||||
vaId,
|
vaId,
|
||||||
$or: [
|
$or: [
|
||||||
{ from: { $gte: fromDate, $lte: toDate } },
|
{ from: { $gte: fromDate, $lte: toDate } },
|
||||||
{ to: { $gte: fromDate, $lte: toDate } }
|
{ to: { $gte: fromDate, $lte: toDate } },
|
||||||
|
{
|
||||||
|
$and: [
|
||||||
|
{ from: { $lte: fromDate } },
|
||||||
|
{ to: { $gte: fromDate } }
|
||||||
|
]
|
||||||
|
}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
.sort({ from: 1 })
|
.sort({ from: 1 })
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,7 @@ import { client_dashboard_projects } from "../../controllers/client/dashboard/cl
|
||||||
import { client_logout_callback } from "../../controllers/client/dashboard/clientLogout.controller.js";
|
import { client_logout_callback } from "../../controllers/client/dashboard/clientLogout.controller.js";
|
||||||
import { va_tips_delete, va_tips_get, va_tips_manage_function, va_tips_update } from "../../controllers/va/vaTips/vaTipsManage.controller.js";
|
import { va_tips_delete, va_tips_get, va_tips_manage_function, va_tips_update } from "../../controllers/va/vaTips/vaTipsManage.controller.js";
|
||||||
import { clientDashboardGetVaLogsController } from "../../controllers/client/dashboard/clientDashboardGetVaLogs.controller.js";
|
import { clientDashboardGetVaLogsController } from "../../controllers/client/dashboard/clientDashboardGetVaLogs.controller.js";
|
||||||
|
import { va_credits_get } from "../../controllers/client/dashboard/clientDashboardCredits.controller.js";
|
||||||
|
|
||||||
// clients routes
|
// clients routes
|
||||||
clientRoutes.post("/register", va_register_client); // Register a new VA
|
clientRoutes.post("/register", va_register_client); // Register a new VA
|
||||||
|
|
@ -29,6 +30,8 @@ clientRoutes.get("/tips", clientAuthValidator, va_tips_get);
|
||||||
clientRoutes.patch("/tips/:tipId", clientAuthValidator, va_tips_update);
|
clientRoutes.patch("/tips/:tipId", clientAuthValidator, va_tips_update);
|
||||||
clientRoutes.delete("/tips/:tipId", clientAuthValidator, va_tips_delete);
|
clientRoutes.delete("/tips/:tipId", clientAuthValidator, va_tips_delete);
|
||||||
|
|
||||||
|
clientRoutes.get("/credits", clientAuthValidator, va_credits_get);
|
||||||
|
|
||||||
clientRoutes.get("/vaLogsData/:vaId", clientAuthValidator, clientDashboardGetVaLogsController);
|
clientRoutes.get("/vaLogsData/:vaId", clientAuthValidator, clientDashboardGetVaLogsController);
|
||||||
|
|
||||||
// clientRoutes.get("/:clientID?", va_clients_callback); // VA Clients Callback for getting all VA's or specific client by ID (NC)
|
// clientRoutes.get("/:clientID?", va_clients_callback); // VA Clients Callback for getting all VA's or specific client by ID (NC)
|
||||||
|
|
|
||||||
239
src/server.js
239
src/server.js
|
|
@ -18,6 +18,7 @@ import apiRoutes from './routes/index.js'
|
||||||
|
|
||||||
|
|
||||||
import { render_reset_form } from "./controllers/passwordReset.controllers.js";
|
import { render_reset_form } from "./controllers/passwordReset.controllers.js";
|
||||||
|
import expressLayouts from "express-ejs-layouts";
|
||||||
import jwt from "jsonwebtoken";
|
import jwt from "jsonwebtoken";
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
|
|
@ -39,6 +40,11 @@ app.on('certificate-error', (event, webContents, url, error, certificate, callba
|
||||||
});
|
});
|
||||||
|
|
||||||
app.set("view engine", "ejs");
|
app.set("view engine", "ejs");
|
||||||
|
|
||||||
|
app.use(expressLayouts);
|
||||||
|
|
||||||
|
// DEFAULT layout for all pages
|
||||||
|
app.set("layout", "layouts/dashboard");
|
||||||
const PORT = process.env.PORT || 8000;
|
const PORT = process.env.PORT || 8000;
|
||||||
|
|
||||||
app.use(cors({
|
app.use(cors({
|
||||||
|
|
@ -59,7 +65,9 @@ app.use('/api', apiRoutes);
|
||||||
|
|
||||||
app.get("/download-tracker", (req, res) => {
|
app.get("/download-tracker", (req, res) => {
|
||||||
res.render("download_tracker", {
|
res.render("download_tracker", {
|
||||||
version: "3.2.1"
|
title: 'Download tracker',
|
||||||
|
version: "3.2.1",
|
||||||
|
layout: 'layouts/main'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -74,52 +82,82 @@ app.get("/download-file", (req, res) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get('/varegister/:sf_token?', (req, res) => {
|
app.get('/varegister/:sf_token?', (req, res) => {
|
||||||
const { sf_token } = req.params;
|
const { sf_token } = req.params;
|
||||||
|
|
||||||
try {
|
// No token → invalid request
|
||||||
const decoded = jwt.verify(sf_token, process.env.JWT_SECRET_SF_TOKEN);
|
if (!sf_token) {
|
||||||
|
return res.status(404).render('not_found', {
|
||||||
|
title: 'Page Not Found',
|
||||||
|
layout: 'layouts/error'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (decoded) {
|
try {
|
||||||
const email = decoded.email;
|
const decoded = jwt.verify(sf_token, process.env.JWT_SECRET_SF_TOKEN);
|
||||||
res.render('va_register', { title: "VA Registration", email });
|
|
||||||
} else {
|
|
||||||
res.render('not_found', { title: "VA Registration" });
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
res.render('not_found', { title: "VA Registration" });
|
|
||||||
}
|
|
||||||
|
|
||||||
// if(verified) {
|
// Token valid
|
||||||
// res.render('va_register', { title: "VA Registration" });
|
return res.render('va_register', {
|
||||||
// } else {
|
title: 'VA Registration',
|
||||||
// res.render('not_founf', { title: "VA Registration" });
|
email: decoded.email,
|
||||||
// }
|
layout: 'layouts/varegisterlayout'
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
// Invalid / expired token
|
||||||
|
return res.status(401).render('not_found', {
|
||||||
|
title: 'Invalid or Expired Link',
|
||||||
|
layout: 'layouts/error'
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get('/clientregister/:sf_token?', (req, res) => {
|
|
||||||
const { sf_token } = req.params;
|
|
||||||
try {
|
|
||||||
const decoded = jwt.verify(sf_token, process.env.JWT_SECRET_SF_TOKEN);
|
|
||||||
|
|
||||||
if (decoded) {
|
app.get('/clientregister/:sf_token?', (req, res) => {
|
||||||
const email = decoded.email;
|
const { sf_token } = req.params;
|
||||||
res.render('va_client_register', { title: "Client Registration", email });
|
|
||||||
} else {
|
// No token → invalid request
|
||||||
res.render('not_found', { title: "Client Registration" });
|
if (!sf_token) {
|
||||||
}
|
return res.status(404).render('not_found', {
|
||||||
} catch (error) {
|
title: 'Page Not Found',
|
||||||
res.render('not_found', { title: "Client Registration" });
|
layout: 'layouts/error'
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const decoded = jwt.verify(sf_token, process.env.JWT_SECRET_SF_TOKEN);
|
||||||
|
|
||||||
|
// Token valid
|
||||||
|
return res.render('va_client_register', {
|
||||||
|
title: 'Client Registration',
|
||||||
|
email: decoded.email,
|
||||||
|
layout: 'layouts/vaclientlayout'
|
||||||
|
});
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
// Invalid / expired token
|
||||||
|
return res.status(401).render('not_found', {
|
||||||
|
title: 'Invalid or Expired Link',
|
||||||
|
layout: 'layouts/error'
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get('/auth/password/reset-form', render_reset_form);
|
app.get('/auth/password/reset-form', render_reset_form);
|
||||||
|
|
||||||
app.get("/client/login", (req, res) => {
|
app.get("/client/login", (req, res) => {
|
||||||
res.render("client_login")
|
// res.render("client_login")
|
||||||
|
res.render("client/client_login", {
|
||||||
|
layout: "layouts/auth", // ⬅️ override layout
|
||||||
|
title: "DocVA | Login"
|
||||||
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
app.get("/client/forgot-password", (req, res) => {
|
app.get("/client/forgot-password", (req, res) => {
|
||||||
res.render("forgot_password")
|
|
||||||
|
res.render("forgot_password", {
|
||||||
|
title: "Forgot Password",
|
||||||
|
layout: "layouts/forgotpasswordlayout"
|
||||||
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
// Client Dashboard Routes with new file names
|
// Client Dashboard Routes with new file names
|
||||||
|
|
@ -127,7 +165,11 @@ app.get('/client/dashboard', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
// const dashboardData = await dashboardService.getClientDashboard(req.user.id);
|
// const dashboardData = await dashboardService.getClientDashboard(req.user.id);
|
||||||
// res.render('client/dashboard-dashboard', dashboardData);
|
// res.render('client/dashboard-dashboard', dashboardData);
|
||||||
res.render('client/dashboard-dashboard');
|
// res.render('client/dashboard-dashboard');
|
||||||
|
res.render('client/dashboard-dashboard', {
|
||||||
|
title: "Client Dashboard",
|
||||||
|
pageScript: "dashboard.js"
|
||||||
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Dashboard error:', error);
|
console.error('Dashboard error:', error);
|
||||||
res.status(500).render('client/dashboard-dashboard', { error: 'Failed to load dashboard' });
|
res.status(500).render('client/dashboard-dashboard', { error: 'Failed to load dashboard' });
|
||||||
|
|
@ -137,7 +179,12 @@ app.get('/client/dashboard', async (req, res) => {
|
||||||
app.get('/client/virtual-assistants', async (req, res) => {
|
app.get('/client/virtual-assistants', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
||||||
res.render('client/dashboard-virtual-assistants');
|
// res.render('client/dashboard-virtual-assistants');
|
||||||
|
res.render('client/dashboard-virtual-assistants', {
|
||||||
|
title: "Virtual Assistants",
|
||||||
|
pageScript:"dashboard-virtual-assistants.js"
|
||||||
|
|
||||||
|
});
|
||||||
// res.render('client/dashboard-virtual-assistants', vaData);
|
// res.render('client/dashboard-virtual-assistants', vaData);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Virtual assistants error:', error);
|
console.error('Virtual assistants error:', error);
|
||||||
|
|
@ -148,7 +195,12 @@ app.get('/client/virtual-assistants', async (req, res) => {
|
||||||
app.get('/client/projects', async (req, res) => {
|
app.get('/client/projects', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
||||||
res.render('client/dashboard-projects');
|
// res.render('client/dashboard-projects');
|
||||||
|
res.render('client/dashboard-projects', {
|
||||||
|
title: "Projects",
|
||||||
|
pageScript:"projects.js"
|
||||||
|
|
||||||
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Projects error:', error);
|
console.error('Projects error:', error);
|
||||||
res.status(500).render('client/dashboard-projects', { error: 'Failed to load projects' });
|
res.status(500).render('client/dashboard-projects', { error: 'Failed to load projects' });
|
||||||
|
|
@ -158,7 +210,11 @@ app.get('/client/projects', async (req, res) => {
|
||||||
app.get('/client/profile', async (req, res) => {
|
app.get('/client/profile', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
||||||
res.render('client/dashboard-profile');
|
// res.render('client/dashboard-profile');
|
||||||
|
res.render('client/dashboard-profile',{
|
||||||
|
title: "Profile",
|
||||||
|
pageScript:"profile.js"
|
||||||
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Projects error:', error);
|
console.error('Projects error:', error);
|
||||||
res.status(500).render('client/dashboard-profile', { error: 'Failed to load profile' });
|
res.status(500).render('client/dashboard-profile', { error: 'Failed to load profile' });
|
||||||
|
|
@ -168,7 +224,11 @@ app.get('/client/profile', async (req, res) => {
|
||||||
app.get('/client/virtual-assistants/manage-tips', async (req, res) => {
|
app.get('/client/virtual-assistants/manage-tips', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
|
||||||
res.render('client/dashboard-manage-va-tips');
|
// res.render('client/dashboard-manage-va-tips');
|
||||||
|
res.render('client/dashboard-manage-va-tips', {
|
||||||
|
title: 'Manage VA Tips',
|
||||||
|
pageScript: 'manage-tips.js'
|
||||||
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Projects error:', error);
|
console.error('Projects error:', error);
|
||||||
res.status(500).render('client/dashboard-manage-va-tips', { error: 'Failed to load profile' });
|
res.status(500).render('client/dashboard-manage-va-tips', { error: 'Failed to load profile' });
|
||||||
|
|
@ -177,18 +237,36 @@ app.get('/client/virtual-assistants/manage-tips', async (req, res) => {
|
||||||
|
|
||||||
app.get('/client/virtual-assistants/view-logs', async (req, res) => {
|
app.get('/client/virtual-assistants/view-logs', async (req, res) => {
|
||||||
try {
|
try {
|
||||||
res.render('client/dashboard-va-logs');
|
// res.render('client/dashboard-va-logs');
|
||||||
|
res.render('client/dashboard-va-logs', {
|
||||||
|
title: 'VA Logs',
|
||||||
|
pageScript: 'va-logs.js'
|
||||||
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Projects error:', error);
|
console.error('Projects error:', error);
|
||||||
res.status(500).render('client/dashboard-va-logs', { error: 'Failed to load profile' });
|
res.status(500).render('client/dashboard-va-logs', { error: 'Failed to load profile' });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
app.get('/client/credits', async (req, res) => {
|
||||||
|
try {
|
||||||
|
// res.render('client/dashboard-va-logs');
|
||||||
|
res.render('client/dashboard-credits', {
|
||||||
|
title: 'Credits',
|
||||||
|
pageScript: 'va-credits.js'
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Projects error:', error);
|
||||||
|
res.status(500).render('client/dashboard-va-logs', { error: 'Failed to load profile' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
app.get("/live/:projectId/:vaId", async (req, res) => {
|
app.get("/live/:projectId/:vaId", async (req, res) => {
|
||||||
const { projectId, vaId } = req.params;
|
const { projectId, vaId } = req.params;
|
||||||
|
|
||||||
if (!projectId || !vaId) {
|
if (!projectId || !vaId) {
|
||||||
return res.status(400).send({ "message": "Page not found" });
|
return res.status(400).render("not_found", { title: "Page not found" });
|
||||||
}
|
}
|
||||||
|
|
||||||
let clientId = null;
|
let clientId = null;
|
||||||
|
|
@ -199,36 +277,45 @@ app.get("/live/:projectId/:vaId", async (req, res) => {
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Error fetching client for project:", err.message);
|
console.error("Error fetching client for project:", err.message);
|
||||||
return;
|
return res.status(500).render("not_found", { title: "Server Error" });
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!clientId) return res.status(400).send({ "message": "Page not found" });
|
if (!clientId) {
|
||||||
|
return res.status(400).render("not_found", { title: "Page not found" });
|
||||||
res.render("va_live_tracker", { title: "VA Live Tracker", projectId, vaId, clientId })
|
|
||||||
})
|
|
||||||
|
|
||||||
app.get("/live/:projectId/:vaId", async (req, res) => {
|
|
||||||
const { projectId, vaId } = req.params;
|
|
||||||
|
|
||||||
if (!projectId || !vaId) {
|
|
||||||
return res.status(400).send({ "message": "Page not found" });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let clientId = null;
|
res.render("va_live_tracker", {
|
||||||
try {
|
title: "VA Live Tracker",
|
||||||
const clientRes = await ProjectModel.findById(projectId);
|
projectId,
|
||||||
if (clientRes) {
|
vaId,
|
||||||
clientId = clientRes.clientId.toString();
|
clientId,
|
||||||
}
|
layout: "layouts/valivetrackerlayout" // ✅ ADD THIS
|
||||||
} catch (err) {
|
});
|
||||||
console.error("Error fetching client for project:", err.message);
|
});
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!clientId) return res.status(400).send({ "message": "Page not found" });
|
|
||||||
|
|
||||||
res.render("va_live_tracker", { title: "VA Live Tracker", projectId, vaId, clientId })
|
// app.get("/live/:projectId/:vaId", async (req, res) => {
|
||||||
})
|
// const { projectId, vaId } = req.params;
|
||||||
|
|
||||||
|
// if (!projectId || !vaId) {
|
||||||
|
// return res.status(400).send({ "message": "Page not found" });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// let clientId = null;
|
||||||
|
// try {
|
||||||
|
// const clientRes = await ProjectModel.findById(projectId);
|
||||||
|
// if (clientRes) {
|
||||||
|
// clientId = clientRes.clientId.toString();
|
||||||
|
// }
|
||||||
|
// } catch (err) {
|
||||||
|
// console.error("Error fetching client for project:", err.message);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (!clientId) return res.status(400).send({ "message": "Page not found" });
|
||||||
|
|
||||||
|
// res.render("va_live_tracker", { title: "VA Live Tracker", projectId, vaId, clientId })
|
||||||
|
// })
|
||||||
|
|
||||||
// Handling Socket
|
// Handling Socket
|
||||||
import { VAModel, ProjectModel, ClientModel } from './models/vaModel.js';
|
import { VAModel, ProjectModel, ClientModel } from './models/vaModel.js';
|
||||||
|
|
@ -504,12 +591,19 @@ io.on("connection", (socket) => {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
app.get("/", (req, res) => {
|
app.get("/login", (req, res) => {
|
||||||
res.render("client_login")
|
// res.render("client_login")
|
||||||
|
res.render("client/client_login", {
|
||||||
|
layout: "layouts/auth", // ⬅️ override layout
|
||||||
|
title: "DocVA | Login"
|
||||||
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
app.get("/forgot-password", (req, res) => {
|
app.get("/forgot-password", (req, res) => {
|
||||||
res.render("forgot_password")
|
res.render("forgot_password", {
|
||||||
|
title: "Forgot Password",
|
||||||
|
layout: "layouts/forgotpasswordlayout"
|
||||||
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
app.get("/health", (req, res) => {
|
app.get("/health", (req, res) => {
|
||||||
|
|
@ -528,7 +622,7 @@ app.get("/tnyk/:sf_token", (req, res) => {
|
||||||
try {
|
try {
|
||||||
const decoded = jwt.verify(sf_token, process.env.JWT_SECRET_SF_TOKEN);
|
const decoded = jwt.verify(sf_token, process.env.JWT_SECRET_SF_TOKEN);
|
||||||
if (decoded) {
|
if (decoded) {
|
||||||
res.render('client/dashboard-dashboard', { sf_token: sf_token });
|
res.render('client/dashboard-dashboard', { sf_token, title: "Client" });
|
||||||
} else {
|
} else {
|
||||||
res.render('not_found', { title: "Client" });
|
res.render('not_found', { title: "Client" });
|
||||||
}
|
}
|
||||||
|
|
@ -540,12 +634,13 @@ app.get("/tnyk/:sf_token", (req, res) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
app.use((req, res) => {
|
app.use((req, res) => {
|
||||||
res.status(404).render("not_found", {
|
res.status(404).render("not_found", {
|
||||||
title: "404 - Page Not Found"
|
layout: "layouts/error",
|
||||||
});
|
title: "404 - Page Not Found"
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
server.listen(PORT, "0.0.0.0", () => {
|
server.listen(PORT, () => {
|
||||||
mongoose
|
mongoose
|
||||||
.connect(
|
.connect(
|
||||||
process.env.MONGO_URI,
|
process.env.MONGO_URI,
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ class SalesforceService {
|
||||||
body: JSON.stringify(salesforcePayload),
|
body: JSON.stringify(salesforcePayload),
|
||||||
timeout: 30000, // 30 seconds timeout
|
timeout: 30000, // 30 seconds timeout
|
||||||
});
|
});
|
||||||
|
|
||||||
logger.info(`SalesforceService - Client registered successfully in Salesforce: ${clientData.userDetails.email}`);
|
logger.info(`SalesforceService - Client registered successfully in Salesforce: ${clientData.userDetails.email}`);
|
||||||
|
|
||||||
return response.data;
|
return response.data;
|
||||||
|
|
|
||||||
|
|
@ -222,7 +222,7 @@
|
||||||
<form>
|
<form>
|
||||||
<input type="email" name="email" placeholder="Enter your email address *" required />
|
<input type="email" name="email" placeholder="Enter your email address *" required />
|
||||||
<input type="password" name="password" placeholder="Enter your password *" required />
|
<input type="password" name="password" placeholder="Enter your password *" required />
|
||||||
<a href="/forgot-password" class="forgot">Forgot password?</a>
|
<a href="/client/forgot-password" class="forgot">Forgot password?</a>
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary">Log in using password</button>
|
<button type="submit" class="btn btn-primary">Log in using password</button>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
<!-- Stats Cards -->
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-info">
|
||||||
|
<h3>Total Credits</h3>
|
||||||
|
<div class="stat-value" id="vaTotalCredits">$0</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-icon blue">
|
||||||
|
<i class="fas fa-dollar fa-xl"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-content">
|
||||||
|
<div class="stat-info">
|
||||||
|
<h3>Available Credits</h3>
|
||||||
|
<div class="stat-value" id="vaAvailableCredits">$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="table-container">
|
||||||
|
<div class="table-wrapper">
|
||||||
|
<table class="data-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Date</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Amount</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="vaCreditTableBody">
|
||||||
|
<!-- Data will be loaded here -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="vaEmptyCreditState" style="display: none;">
|
||||||
|
<div class="empty-state">
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
|
<h3>No Credit Found</h3>
|
||||||
|
<p>You haven't received any credit yet.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -1,580 +1,76 @@
|
||||||
<!DOCTYPE html>
|
<!-- Stats Cards -->
|
||||||
<html lang="en" data-theme="light">
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card">
|
||||||
<head>
|
<div class="stat-content">
|
||||||
<meta charset="UTF-8">
|
<div class="stat-info">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<h3>Active VA</h3>
|
||||||
<title>DocVA Client | Dashboard</title>
|
<div class="stat-value" id="activeVaCount">0</div>
|
||||||
<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>
|
||||||
</nav>
|
<div class="stat-icon blue">
|
||||||
<div class="dashboard-container">
|
<i class="fas fa-users fa-xl"></i>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<div class="stat-card">
|
||||||
window.__SF_TOKEN__ = "<%- typeof sf_token !== 'undefined' ? sf_token : '' %>";
|
<div class="stat-content">
|
||||||
|
<div class="stat-info">
|
||||||
if (window.__SF_TOKEN__ && !localStorage.getItem('knoptpq')) {
|
<h3>Total VA's</h3>
|
||||||
localStorage.setItem('knoptpq', window.__SF_TOKEN__);
|
<div class="stat-value" id="totalVaCount">0</div>
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
|
|
||||||
// Theme management
|
|
||||||
function setTheme(theme) {
|
|
||||||
document.documentElement.setAttribute('data-theme', theme);
|
|
||||||
localStorage.setItem('theme', theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSystemTheme() {
|
|
||||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize theme
|
|
||||||
const savedTheme = getSystemTheme();
|
|
||||||
setTheme(savedTheme);
|
|
||||||
|
|
||||||
// API base URL
|
|
||||||
const API_BASE = '/api/v1/client';
|
|
||||||
|
|
||||||
// Auth token management
|
|
||||||
function getAuthToken() {
|
|
||||||
let token = localStorage.getItem('knoptpq');
|
|
||||||
|
|
||||||
if (!token && window.__SF_TOKEN__) {
|
|
||||||
localStorage.setItem('knoptpq', window.__SF_TOKEN__);
|
|
||||||
token = window.__SF_TOKEN__;
|
|
||||||
}
|
|
||||||
|
|
||||||
return token;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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 '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</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-exclamation-triangle"></i>
|
|
||||||
<h3>Error</h3>
|
|
||||||
<p>${message}</p>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
<div class="stat-icon blue">
|
||||||
vaEmptyState.style.display = 'block';
|
<i class="fas fa-users fa-xl"></i>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
// Close modal when clicking outside
|
<div class="stat-card">
|
||||||
vaModal.addEventListener('click', (e) => {
|
<div class="stat-content">
|
||||||
if (e.target === vaModal) {
|
<div class="stat-info">
|
||||||
closeVAModal();
|
<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>
|
||||||
|
|
||||||
// Close modal with escape key
|
<script>
|
||||||
document.addEventListener('keydown', (e) => {
|
const tnyk = "<%= typeof sf_token !== 'undefined' ? sf_token : '' %>";
|
||||||
if (e.key === 'Escape' && vaModal.style.display === 'flex') {
|
if (tnyk) {
|
||||||
closeVAModal();
|
localStorage.setItem('knoptpq', tnyk);
|
||||||
}
|
}
|
||||||
});
|
</script>
|
||||||
|
|
||||||
// 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,548 +1,58 @@
|
||||||
<!DOCTYPE html>
|
<!-- Stats Cards -->
|
||||||
<html lang="en" data-theme="light">
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card">
|
||||||
<head>
|
<div class="stat-content">
|
||||||
<meta charset="UTF-8">
|
<div class="stat-info">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<h3>Unbilled Tips</h3>
|
||||||
<title>DocVA Client | Dashboard</title>
|
<div class="stat-value" id="vaUnbilledTips">$0</div>
|
||||||
<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>
|
</div>
|
||||||
</nav>
|
<div class="stat-icon blue">
|
||||||
<div class="dashboard-container">
|
<i class="fas fa-file-invoice fa-xl"></i>
|
||||||
<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="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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<div class="stat-card">
|
||||||
// Theme management
|
<div class="stat-content">
|
||||||
function setTheme(theme) {
|
<div class="stat-info">
|
||||||
document.documentElement.setAttribute('data-theme', theme);
|
<h3>Total Tips</h3>
|
||||||
localStorage.setItem('theme', theme);
|
<div class="stat-value" id="vaTotalTips">$0</div>
|
||||||
}
|
</div>
|
||||||
|
<div class="stat-icon blue">
|
||||||
function getSystemTheme() {
|
<i class="fas fa-dollar fa-xl"></i>
|
||||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
</div>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
// Initialize theme
|
</div>
|
||||||
const savedTheme = getSystemTheme();
|
<!-- Virtual Assistants List -->
|
||||||
setTheme(savedTheme);
|
<div class="content-section">
|
||||||
|
<div class="section-header" style="justify-content: space-between;align-items: center;">
|
||||||
// API base URL
|
<a href="/client/virtual-assistants" class="btn btn-secondary">Back</a>
|
||||||
const API_BASE = '/api/v1/client';
|
<span class="btn btn-primary" id="tipVaAddBtn">Tip Virtual Assistant</span>
|
||||||
|
</div>
|
||||||
// Auth token management
|
<div class="table-container">
|
||||||
function getAuthToken() {
|
<div class="table-wrapper">
|
||||||
return localStorage.getItem('knoptpq');
|
<table class="data-table">
|
||||||
}
|
<thead>
|
||||||
|
<tr>
|
||||||
async function fetchWithAuth(url, options = {}) {
|
<th>Void</th>
|
||||||
const token = getAuthToken();
|
<th>Status</th>
|
||||||
if (!token) {
|
<th>Virtual Assistant Name</th>
|
||||||
window.location.href = '/';
|
<th>Description</th>
|
||||||
return;
|
<th>Date Added</th>
|
||||||
}
|
<th>Amount</th>
|
||||||
|
</tr>
|
||||||
const response = await fetch(url, {
|
</thead>
|
||||||
...options,
|
<tbody id="vaTipTableBody">
|
||||||
headers: {
|
<!-- Data will be loaded here -->
|
||||||
'token': `${token}`,
|
</tbody>
|
||||||
'type': 'client',
|
</table>
|
||||||
'Content-Type': 'application/json',
|
</div>
|
||||||
'ngrok-skip-browser-warning': 69420,
|
<div id="vaEmptyTipState" style="display: none;">
|
||||||
...options.headers,
|
<div class="empty-state">
|
||||||
}
|
<i class="fas fa-users"></i>
|
||||||
});
|
<h3>No Tip Found</h3>
|
||||||
|
<p>You haven't gave any Tip yet.</p>
|
||||||
if (response.status === 401) {
|
</div>
|
||||||
localStorage.removeItem('knoptpq');
|
</div>
|
||||||
localStorage.removeItem('refreshToken');
|
</div>
|
||||||
window.location.href = '/';
|
</div>
|
||||||
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>
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,509 +1,31 @@
|
||||||
<!DOCTYPE html>
|
<!-- Projects List -->
|
||||||
<html lang="en" data-theme="light">
|
<div class="content-section">
|
||||||
<head>
|
<div class="section-header">
|
||||||
<meta charset="UTF-8">
|
<h2 class="section-title">Projects <span class="total-count" id="projectsCount">0
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
Projects</span></h2>
|
||||||
<title>DocVA Client | Dashboard</title>
|
</div>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
<div class="table-container">
|
||||||
<link rel="stylesheet" href="/public/css/dashboard.css">
|
<div class="table-wrapper">
|
||||||
</head>
|
<table class="data-table">
|
||||||
<body class="dashboard-body">
|
<thead>
|
||||||
<div id="root">
|
<tr>
|
||||||
<nav class="dashboard-header">
|
<th>Name</th>
|
||||||
<div class="header-content">
|
<th>Hourly Rate</th>
|
||||||
<div class="header-logo">
|
<th>Total VA Assigned</th>
|
||||||
<div class="logo-container">
|
<th>Dedicated Hours</th>
|
||||||
<h2 class="sidebar-title">DocVA Client Portal</h2>
|
</tr>
|
||||||
</div>
|
</thead>
|
||||||
</div>
|
<tbody id="projectsTableBody">
|
||||||
|
<!-- Data will be loaded here -->
|
||||||
<div class="header-nav">
|
</tbody>
|
||||||
<ul class="nav-list">
|
</table>
|
||||||
<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>
|
||||||
<div id="projectModal" class="modal-overlay">
|
<div id="projectsEmptyState" style="display: none;">
|
||||||
<div class="modal-content">
|
<div class="empty-state">
|
||||||
<div class="modal-header" style="display: flex;align-items: center;justify-content: space-between;">
|
<i class="fas fa-briefcase"></i>
|
||||||
<h2 class="modal-title" id="modalProjectName">Project Details</h2>
|
<h3>No Projects</h3>
|
||||||
<button class="modal-close" id="modalClose">
|
<p>You don't have any projects yet.</p>
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
</div>
|
||||||
// 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,519 +1,25 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" data-theme="light">
|
|
||||||
|
|
||||||
<head>
|
<!-- Virtual Assistants List -->
|
||||||
<meta charset="UTF-8">
|
<div class="content-section">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<div class="section-header" style="justify-content: space-between;align-items: center;">
|
||||||
<title>DocVA Client | Dashboard</title>
|
<a href="/client/virtual-assistants" class="btn btn-secondary">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
<i class="fas fa-arrow-left"></i> Back to VAs
|
||||||
<link rel="stylesheet" href="/public/css/dashboard.css">
|
</a>
|
||||||
</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 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">
|
|
||||||
<!-- 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">
|
|
||||||
<i class="fas fa-arrow-left"></i> Back to VAs
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Loading State -->
|
|
||||||
<div id="loadingState" class="loading-spinner">
|
|
||||||
<div class="spinner"></div>
|
|
||||||
<p>Loading VA logs...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Empty State -->
|
|
||||||
<div id="emptyState" class="empty-state" style="display: none;">
|
|
||||||
<i class="fas fa-clipboard-list"></i>
|
|
||||||
<h3>No Logs Found</h3>
|
|
||||||
<p>This virtual assistant hasn't logged any time in the last 15 days.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Projects Accordion Container -->
|
|
||||||
<div id="projectsContainer" style="display: none;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</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() {
|
<!-- Loading State -->
|
||||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
<div id="loadingState" class="loading-spinner">
|
||||||
}
|
<div class="spinner"></div>
|
||||||
|
<p>Loading VA logs...</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
// Initialize theme
|
<!-- Empty State -->
|
||||||
const savedTheme = getSystemTheme();
|
<div id="emptyState" class="empty-state" style="display: none;">
|
||||||
setTheme(savedTheme);
|
<i class="fas fa-clipboard-list"></i>
|
||||||
|
<h3>No Logs Found</h3>
|
||||||
|
<p>This virtual assistant hasn't logged any time in the last 15 days.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
// API base URL
|
<!-- Projects Accordion Container -->
|
||||||
const API_BASE = '/api/v1/client';
|
<div id="projectsContainer" style="display: none;"></div>
|
||||||
|
</div>
|
||||||
// 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 toggleAccordion(accordionId) {
|
|
||||||
const accordion = document.getElementById(accordionId);
|
|
||||||
accordion.classList.toggle('active');
|
|
||||||
|
|
||||||
// const allAccordions = document.querySelectorAll('.accordion');
|
|
||||||
// allAccordions.forEach(acc => {
|
|
||||||
// if (acc.id !== accordionId && acc.classList.contains('active')) {
|
|
||||||
// acc.classList.remove('active');
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatTime(milliseconds) {
|
|
||||||
if (!milliseconds) return '0m';
|
|
||||||
|
|
||||||
const seconds = Math.floor(milliseconds / 1000);
|
|
||||||
const hours = Math.floor(seconds / 3600);
|
|
||||||
const minutes = Math.floor((seconds % 3600) / 60);
|
|
||||||
|
|
||||||
if (hours > 0) {
|
|
||||||
return `${hours}h ${minutes}m ${seconds % 60}s`;
|
|
||||||
}
|
|
||||||
return `${minutes}m ${seconds % 60}s`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatDate(dateString) {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return date.toLocaleDateString('en-US', {
|
|
||||||
year: 'numeric',
|
|
||||||
month: 'short',
|
|
||||||
day: 'numeric'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatTimeOnly(dateString) {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
return date.toLocaleTimeString('en-US', {
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
second: '2-digit'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function calculateTotalIndividualLogsHours(workTrackLogs) {
|
|
||||||
let total = 0;
|
|
||||||
workTrackLogs.forEach(workTrack => {
|
|
||||||
if (workTrack.logs && Array.isArray(workTrack.logs)) {
|
|
||||||
workTrack.logs.forEach(log => {
|
|
||||||
total += log.totalTime || 0;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return total;
|
|
||||||
}
|
|
||||||
|
|
||||||
function countIndividualLogs(workTrackLogs) {
|
|
||||||
let count = 0;
|
|
||||||
workTrackLogs.forEach(workTrack => {
|
|
||||||
if (workTrack.logs && Array.isArray(workTrack.logs)) {
|
|
||||||
count += workTrack.logs.length;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return count;
|
|
||||||
}
|
|
||||||
|
|
||||||
function calculateTotalHours(logs) {
|
|
||||||
return logs.reduce((total, log) => total + (log.totalTime || 0), 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create project accordion
|
|
||||||
function createProjectAccordion(projectData, index) {
|
|
||||||
const workTrackLogs = projectData.workTrackLogs || [];
|
|
||||||
const totalHours = calculateTotalIndividualLogsHours(workTrackLogs);
|
|
||||||
const individualLogsCount = countIndividualLogs(workTrackLogs);
|
|
||||||
const projectName = projectData.projectDetails?.name || `Project ${index + 1}`;
|
|
||||||
|
|
||||||
const accordionId = `project-${index}`;
|
|
||||||
|
|
||||||
return `
|
|
||||||
<div class="accordion" id="${accordionId}">
|
|
||||||
<div class="accordion-header" onclick="toggleAccordion('${accordionId}')">
|
|
||||||
<div class="accordion-title">
|
|
||||||
${projectName}
|
|
||||||
<span class="logs-count">${individualLogsCount} activities</span>
|
|
||||||
</div>
|
|
||||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
|
||||||
<div style="text-align: right;">
|
|
||||||
<div class="time-badge">${formatTime(totalHours)}</div>
|
|
||||||
</div>
|
|
||||||
<i class="fas fa-chevron-down accordion-icon"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="accordion-content">
|
|
||||||
${individualLogsCount > 0 ? createIndividualLogsTable(workTrackLogs) : createNoLogsMessage()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create table for individual log entries
|
|
||||||
function createIndividualLogsTable(workTrackLogs) {
|
|
||||||
// Collect all individual logs from all work tracks
|
|
||||||
const allIndividualLogs = [];
|
|
||||||
workTrackLogs.forEach(workTrack => {
|
|
||||||
if (workTrack.logs && Array.isArray(workTrack.logs)) {
|
|
||||||
workTrack.logs.forEach(log => {
|
|
||||||
allIndividualLogs.push(log);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return `
|
|
||||||
<div class="table-wrapper">
|
|
||||||
<table class="data-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Title</th>
|
|
||||||
<th>App Name</th>
|
|
||||||
<th>From</th>
|
|
||||||
<th>To</th>
|
|
||||||
<th>Total Time</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
${allIndividualLogs.map((log, index) => createIndividualLogRow(log, index)).join('')}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a single row for individual log entry
|
|
||||||
function createIndividualLogRow(log, index) {
|
|
||||||
const title = log.title || `Activity ${index + 1}`;
|
|
||||||
const appName = log.appName || 'Unknown App';
|
|
||||||
|
|
||||||
// Parse dates
|
|
||||||
const fromDate = log.from;
|
|
||||||
const toDate = log.to || log.from;
|
|
||||||
|
|
||||||
// Calculate duration
|
|
||||||
let duration = log.totalTime || 0;
|
|
||||||
if (!duration && fromDate && toDate) {
|
|
||||||
const from = new Date(fromDate);
|
|
||||||
const to = new Date(toDate);
|
|
||||||
duration = Math.floor((to - from) / 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
return `
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<strong>${title}</strong>
|
|
||||||
</td>
|
|
||||||
<td>${appName}</td>
|
|
||||||
<td>
|
|
||||||
<div class="datetime-cell">
|
|
||||||
<div class="date-text">${formatDate(fromDate)}</div>
|
|
||||||
<div class="time-text">${formatTimeOnly(fromDate)}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<div class="datetime-cell">
|
|
||||||
<div class="date-text">${formatDate(toDate)}</div>
|
|
||||||
<div class="time-text">${formatTimeOnly(toDate)}</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<span class="time-badge">${formatTime(duration)}</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create no logs message
|
|
||||||
function createNoLogsMessage() {
|
|
||||||
return `
|
|
||||||
<div style="text-align: center; padding: 2rem; color: #64748b;">
|
|
||||||
<i class="fas fa-clipboard"></i>
|
|
||||||
<h4>No Activity Logs</h4>
|
|
||||||
<p>No detailed activity logs available for this project.</p>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load VA logs
|
|
||||||
async function loadVALogs() {
|
|
||||||
const loadingState = document.getElementById('loadingState');
|
|
||||||
const emptyState = document.getElementById('emptyState');
|
|
||||||
const projectsContainer = document.getElementById('projectsContainer');
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Get VA ID from URL
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const vaId = urlParams.get('va');
|
|
||||||
|
|
||||||
if (!vaId) {
|
|
||||||
window.location.href = '/client/virtual-assistants';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fetch VA logs data
|
|
||||||
const response = await fetchWithAuth(`${API_BASE}/vaLogsData/${vaId}`);
|
|
||||||
|
|
||||||
if (!response || !response.ok) {
|
|
||||||
throw new Error('Failed to load VA logs');
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (!data.success) {
|
|
||||||
throw new Error(data.message || 'Failed to load VA logs');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide loading state
|
|
||||||
loadingState.style.display = 'none';
|
|
||||||
|
|
||||||
const projectLogs = data.data?.projectLogs || [];
|
|
||||||
|
|
||||||
// Handle empty state
|
|
||||||
if (projectLogs.length === 0) {
|
|
||||||
emptyState.style.display = 'block';
|
|
||||||
projectsContainer.style.display = 'none';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show projects container
|
|
||||||
projectsContainer.style.display = 'block';
|
|
||||||
emptyState.style.display = 'none';
|
|
||||||
|
|
||||||
// Create accordions for each project
|
|
||||||
let accordionsHTML = '';
|
|
||||||
projectLogs.forEach((project, index) => {
|
|
||||||
accordionsHTML += createProjectAccordion(project, index);
|
|
||||||
});
|
|
||||||
|
|
||||||
projectsContainer.innerHTML = accordionsHTML;
|
|
||||||
|
|
||||||
// Auto-open first accordion
|
|
||||||
if (projectLogs.length > 0) {
|
|
||||||
setTimeout(() => {
|
|
||||||
const firstAccordion = document.getElementById('project-0');
|
|
||||||
if (firstAccordion) {
|
|
||||||
firstAccordion.classList.add('active');
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error loading VA logs:", error);
|
|
||||||
loadingState.style.display = 'none';
|
|
||||||
projectsContainer.style.display = 'none';
|
|
||||||
|
|
||||||
// Show error in empty state
|
|
||||||
emptyState.innerHTML = `
|
|
||||||
<i class="fas fa-exclamation-triangle"></i>
|
|
||||||
<h3>Error Loading Data</h3>
|
|
||||||
<p>${error.message}</p>
|
|
||||||
<button onclick="loadVALogs()" class="btn btn-primary" style="margin-top: 1rem;">
|
|
||||||
<i class="fas fa-redo"></i> Retry
|
|
||||||
</button>
|
|
||||||
`;
|
|
||||||
emptyState.style.display = 'block';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 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);
|
|
||||||
|
|
||||||
// Load VA logs on page load
|
|
||||||
loadVALogs();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,637 +1,69 @@
|
||||||
<!DOCTYPE html>
|
<!-- Stats Cards -->
|
||||||
<html lang="en" data-theme="light">
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card">
|
||||||
<head>
|
<div class="stat-content">
|
||||||
<meta charset="UTF-8">
|
<div class="stat-info">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<h3>Active VA</h3>
|
||||||
<title>DocVA Client | Dashboard</title>
|
<div class="stat-value" id="activeVaCount">0</div>
|
||||||
<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 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>
|
</div>
|
||||||
</nav>
|
<div class="stat-icon blue">
|
||||||
<div class="dashboard-container">
|
<i class="fas fa-users fa-xl"></i>
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- 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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<div class="stat-card">
|
||||||
// Theme management
|
<div class="stat-content">
|
||||||
function setTheme(theme) {
|
<div class="stat-info">
|
||||||
document.documentElement.setAttribute('data-theme', theme);
|
<h3>Total VA's</h3>
|
||||||
localStorage.setItem('theme', theme);
|
<div class="stat-value" id="totalVaCount">0</div>
|
||||||
}
|
|
||||||
|
|
||||||
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</a>` : `<a class="va-logs va-action" data-va-id="${va.id}" target="_blank" href="/client/virtual-assistants/view-logs?va=${va.id}">Logs</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}</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-exclamation-triangle"></i>
|
|
||||||
<h3>Error</h3>
|
|
||||||
<p>${message}</p>
|
|
||||||
</div>
|
</div>
|
||||||
`;
|
<div class="stat-icon blue">
|
||||||
vaEmptyState.style.display = 'block';
|
<i class="fas fa-users fa-xl"></i>
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
// Close modal when clicking outside
|
</div>
|
||||||
vaModal.addEventListener('click', (e) => {
|
<div class="stat-card">
|
||||||
if (e.target === vaModal) {
|
<div class="stat-content">
|
||||||
closeVAModal();
|
<div class="stat-info">
|
||||||
}
|
<h3>Total Projects</h3>
|
||||||
});
|
<div class="stat-value" id="totalProjects">0</div>
|
||||||
|
</div>
|
||||||
// Close modal with escape key
|
<div class="stat-icon green">
|
||||||
document.addEventListener('keydown', (e) => {
|
<i class="fas fa-clock fa-xl"></i>
|
||||||
if (e.key === 'Escape' && vaModal.style.display === 'flex') {
|
</div>
|
||||||
closeVAModal();
|
</div>
|
||||||
}
|
</div>
|
||||||
});
|
</div>
|
||||||
|
<!-- Virtual Assistants List -->
|
||||||
// Optional: Auto-refresh data every 30 seconds
|
<div class="content-section">
|
||||||
setInterval(loadDashboardData, 30000);
|
<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>
|
||||||
// Logout Modal Functions
|
<a href="/client/virtual-assistants/manage-tips" class="btn btn-primary">Manage Tips</a>
|
||||||
function openLogoutModal() {
|
</div>
|
||||||
const modal = document.getElementById('logoutModal');
|
<div class="table-container">
|
||||||
modal.style.display = 'flex';
|
<div class="table-wrapper">
|
||||||
document.body.style.overflow = 'hidden';
|
<table class="data-table">
|
||||||
}
|
<thead>
|
||||||
|
<tr>
|
||||||
function closeLogoutModal() {
|
<th>Status</th>
|
||||||
const modal = document.getElementById('logoutModal');
|
<th>Virtual Assistant</th>
|
||||||
modal.style.display = 'none';
|
<th>Active Project</th>
|
||||||
document.body.style.overflow = 'auto';
|
<th>Total Projects</th>
|
||||||
}
|
<th>Today Logged Hours</th>
|
||||||
|
<th>Action</th>
|
||||||
const handleVaLogsClick = (e) => {
|
</tr>
|
||||||
e.preventDefault();
|
</thead>
|
||||||
|
<tbody id="vaTableBody">
|
||||||
cosnole.log("handleVaLogsClick Called")
|
<!-- Data will be loaded here -->
|
||||||
}
|
</tbody>
|
||||||
|
</table>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
</div>
|
||||||
// Load dashboard data
|
<div id="vaEmptyState" style="display: none;">
|
||||||
loadDashboardData();
|
<div class="empty-state">
|
||||||
|
<i class="fas fa-users"></i>
|
||||||
// Mobile menu toggle
|
<h3>No Virtual Assistants</h3>
|
||||||
const menuToggle = document.querySelector('.mobile-menu-button');
|
<p>You haven't assigned any virtual assistants yet.</p>
|
||||||
const sidebar = document.querySelector('.dashboard-sidebar');
|
</div>
|
||||||
menuToggle.addEventListener('click', () => {
|
</div>
|
||||||
sidebar.classList.toggle('active');
|
</div>
|
||||||
});
|
</div>
|
||||||
|
|
||||||
// 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,132 +1,35 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>DocVA | Reset Password</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:root[data-theme="light"] {
|
|
||||||
--bg: #ffffff;
|
|
||||||
--text: #111827;
|
|
||||||
--card-bg: #ffffff;
|
|
||||||
--border: #e5e7eb;
|
|
||||||
--btn-bg: #0a0a8f;
|
|
||||||
--btn-text: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-theme="dark"] {
|
|
||||||
--bg: #121212;
|
|
||||||
--text: #f9fafb;
|
|
||||||
--card-bg: #1e1e1e;
|
|
||||||
--border: #334155;
|
|
||||||
--btn-bg: #3b82f6;
|
|
||||||
--btn-text: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
font-family: "Inter", sans-serif;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100vh;
|
|
||||||
margin: 0;
|
|
||||||
transition: background-color 0.3s, color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 380px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 170px;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: var(--card-bg);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 2rem;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
||||||
transition: background 0.3s, border-color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.8rem;
|
|
||||||
margin-bottom: 1.2rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
background: #fff;
|
|
||||||
color: #111;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
transition: border 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root[data-theme="dark"] input {
|
|
||||||
background: #0f172a;
|
|
||||||
color: #fff;
|
|
||||||
border: 1px solid #475569;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
width: 100%;
|
|
||||||
background: var(--btn-bg);
|
|
||||||
color: var(--btn-text);
|
|
||||||
border: none;
|
|
||||||
padding: 0.8rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
margin-top: 1rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--text);
|
|
||||||
text-decoration: none;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
opacity: 1;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2>DocTracker</h2>
|
<div class="logo">
|
||||||
|
<img id="logo-img" src="/public/images/logo-white-vertical.svg" alt="DocVA Logo" />
|
||||||
|
</div>
|
||||||
<form class="card">
|
<form class="card">
|
||||||
<h2>Reset your password</h2>
|
<h2>Reset your password</h2>
|
||||||
<input type="email" placeholder="Enter your email address*" required />
|
<input type="email" placeholder="Enter your email address*" required />
|
||||||
<button type="submit">Send password reset code</button>
|
<button type="submit">Send password reset code</button>
|
||||||
<a href="/">Go back to login</a>
|
<a href="/client/login">Go back to login</a>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
const root = document.documentElement;
|
||||||
|
|
||||||
|
function setTheme(theme) {
|
||||||
|
document.getElementById("logo-img").src =
|
||||||
|
theme === "dark"
|
||||||
|
? "/public/images/logo-white-vertical.svg"
|
||||||
|
: "/public/images/logo-colored-vertical.svg";
|
||||||
|
root.setAttribute("data-theme", theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSystemTheme() {
|
||||||
|
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
? "dark"
|
||||||
|
: "light";
|
||||||
|
}
|
||||||
|
|
||||||
|
setTheme(getSystemTheme());
|
||||||
|
|
||||||
function validateEmail(email) {
|
function validateEmail(email) {
|
||||||
const emailRegex = /^[a-zA-Z0-9](?:[a-zA-Z0-9]*[._-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9]*[-]?[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
|
const emailRegex = /^[a-zA-Z0-9](?:[a-zA-Z0-9]*[._-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9]*[-]?[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
|
||||||
return emailRegex.test(email);
|
return emailRegex.test(email);
|
||||||
|
|
@ -181,7 +84,7 @@
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
if(response.success) {
|
if(response.success) {
|
||||||
if(confirm('Please Check your mail inbox for password reset link')) {
|
if(confirm('Please Check your mail inbox for password reset link')) {
|
||||||
window.location.href = "/"; // Redirect to reset password page
|
window.location.href = "/client/login"; // Redirect to reset password page
|
||||||
// console.log(response)
|
// console.log(response)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -200,6 +103,3 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<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') %>
|
||||||
|
|
||||||
|
<%- include('../partials/bankDetails-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>
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>404 - Page Not Found</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #ffffff;
|
||||||
|
--text: #222222;
|
||||||
|
--subtext: #555555;
|
||||||
|
--button-bg: #6c63ff;
|
||||||
|
--button-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode automatic */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: #0f0f0f;
|
||||||
|
--text: #ffffff;
|
||||||
|
--subtext: #bbbbbb;
|
||||||
|
--button-bg: #6c63ff;
|
||||||
|
--button-text: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
font-family: Inter, system-ui, sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 420px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 7rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: var(--subtext);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 14px 26px;
|
||||||
|
background: var(--button-bg);
|
||||||
|
color: var(--button-text);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
border-radius: 12px;
|
||||||
|
display: inline-block;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 150px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 4.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<%- body %>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" href="/public/images/favicon.svg" sizes="any">
|
||||||
|
<title>DocVA | Reset Password</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root[data-theme="light"] {
|
||||||
|
--bg: #ffffff;
|
||||||
|
--text: #111827;
|
||||||
|
--card-bg: #ffffff;
|
||||||
|
--border: #e5e7eb;
|
||||||
|
--btn-bg: #0a0a8f;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-theme="dark"] {
|
||||||
|
--bg: #121212;
|
||||||
|
--text: #f9fafb;
|
||||||
|
--card-bg: #1e1e1e;
|
||||||
|
--border: #334155;
|
||||||
|
--btn-bg: #3b82f6;
|
||||||
|
--btn-text: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 170px;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem;
|
||||||
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||||
|
transition: background 0.3s, border-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.8rem;
|
||||||
|
margin-bottom: 1.2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: #fff;
|
||||||
|
color: #111;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
transition: border 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[data-theme="dark"] input {
|
||||||
|
background: #0f172a;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--btn-bg);
|
||||||
|
color: var(--btn-text);
|
||||||
|
border: none;
|
||||||
|
padding: 0.8rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
margin-top: 1rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text);
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
opacity: 1;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
width: 170px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<%- body %>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -13,5 +13,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<%- body %>
|
<%- body %>
|
||||||
|
|
||||||
|
<script src="/public/js/common/theme.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" href="/public/images/favicon.svg" sizes="any">
|
||||||
|
<title>Client Registration</title>
|
||||||
|
|
||||||
|
<link href="/public/css/va-register.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<%- body %>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,169 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Live Screen Feed</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
background: #0f0f0f;
|
||||||
|
color: white;
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SIDEBAR */
|
||||||
|
.sidebar {
|
||||||
|
width: 280px;
|
||||||
|
background: #181818;
|
||||||
|
border-right: 1px solid #2b2b2b;
|
||||||
|
padding: 15px;
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: transform 0.35s ease;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar h3 {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
background: #252525;
|
||||||
|
border: 1px solid #333;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app:hover {
|
||||||
|
background: #333;
|
||||||
|
transform: translateX(3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app.active {
|
||||||
|
background: #6c63ff;
|
||||||
|
border-color: #6c63ff;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 0 10px rgba(108, 99, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MAIN CONTENT */
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
padding: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#selectedAppTitle {
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#liveImage {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 900px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 2px solid #444;
|
||||||
|
object-fit: contain;
|
||||||
|
background: black;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
font-size: 16px;
|
||||||
|
opacity: 0.8;
|
||||||
|
color: #bbb;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* MOBILE RESPONSIVE */
|
||||||
|
.mobile-toggle {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 15px;
|
||||||
|
left: 15px;
|
||||||
|
background: #6C63FF;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
z-index: 9999;
|
||||||
|
/* VERY HIGH: always visible */
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-toggle span {
|
||||||
|
display: block;
|
||||||
|
width: 26px;
|
||||||
|
height: 3px;
|
||||||
|
background: #fff;
|
||||||
|
margin: 5px 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar Hidden on Mobile */
|
||||||
|
@media (max-width: 780px) {
|
||||||
|
body {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 100%;
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.open {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-toggle {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark overlay when sidebar opens */
|
||||||
|
#overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.45);
|
||||||
|
display: none;
|
||||||
|
z-index: 40;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<%- body %>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="icon" href="/public/images/favicon.svg" sizes="any">
|
||||||
|
<title>Virtual Assistant Registration</title>
|
||||||
|
|
||||||
|
<link href="/public/css/va-register.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
select option:disabled {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<%- body %>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,105 +1,10 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>404 - Page Not Found</title>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--bg: #ffffff;
|
|
||||||
--text: #222222;
|
|
||||||
--subtext: #555555;
|
|
||||||
--button-bg: #6c63ff;
|
|
||||||
--button-text: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark mode automatic */
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--bg: #0f0f0f;
|
|
||||||
--text: #ffffff;
|
|
||||||
--subtext: #bbbbbb;
|
|
||||||
--button-bg: #6c63ff;
|
|
||||||
--button-text: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background: var(--bg);
|
|
||||||
color: var(--text);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100vh;
|
|
||||||
font-family: Inter, system-ui, sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 420px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 7rem;
|
|
||||||
font-weight: 800;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
margin-top: 10px;
|
|
||||||
color: var(--subtext);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
margin-top: 30px;
|
|
||||||
padding: 14px 26px;
|
|
||||||
background: var(--button-bg);
|
|
||||||
color: var(--button-text);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: 12px;
|
|
||||||
display: inline-block;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
opacity: 0.85;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 150px;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
h1 {
|
|
||||||
font-size: 4.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 120px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<img src="/public/images/logo-white-vertical.svg" alt="404 Icon">
|
<img src="/public/images/logo-white-vertical.svg" alt="404 Icon">
|
||||||
<h1>404</h1>
|
<h1>404</h1>
|
||||||
<p>Oops! The page you're looking for does not exist.</p>
|
<p>Oops! The page you're looking for does not exist.</p>
|
||||||
<a href="/" class="btn">Go Home</a>
|
<a href="/client/login" class="btn">Go Home</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -124,6 +29,3 @@
|
||||||
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", applyTheme);
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", applyTheme);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
<div id="bankDetailsModal" class="modal-overlay">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h2 class="modal-title">Update Bank Details</h2>
|
||||||
|
<button class="modal-close" onclick="closeBankDetailsModal()">
|
||||||
|
<i class="fas fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form id="payment-form" class="modal-form">
|
||||||
|
<div class="payment-option" onclick="selectPaymentOption('card')">
|
||||||
|
<h4>Credit or Debit Card</h4>
|
||||||
|
<p>Pay securely with your card</p>
|
||||||
|
</div>
|
||||||
|
<div id="card-details" class="payment-details">
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-container">
|
||||||
|
<input type="text" id="card-number" class="input-field" placeholder=" " required>
|
||||||
|
<label for="card-number" class="input-label">Card Number *</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-container">
|
||||||
|
<input type="text" id="expiry-date" class="input-field" placeholder=" " required>
|
||||||
|
<label for="expiry-date" class="input-label">Expiry Date (MM/YY) *</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-container">
|
||||||
|
<input type="text" id="security-code" class="input-field" placeholder=" " oninput="validateCVVVV(this)" onkeypress="return preventInvalidCVVChars(event)" maxlength="4" required>
|
||||||
|
<label for="security-code" class="input-label">Security Code *</label>
|
||||||
|
</div>
|
||||||
|
<div class="invalid-feedback" id="security-code-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
|
Please enter a valid security code
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-container">
|
||||||
|
<input type="text" id="card-zip" class="input-field" placeholder=" " oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)" maxlength="10" required>
|
||||||
|
<label for="card-zip" class="input-label">ZIP Code *</label>
|
||||||
|
</div>
|
||||||
|
<div class="invalid-feedback" id="card-zip-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
|
ZIP code should contain only numbers
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="payment-option" onclick="selectPaymentOption('bank')">
|
||||||
|
<h4>Bank Account (ACH)</h4>
|
||||||
|
<p>Direct bank transfer</p>
|
||||||
|
</div>
|
||||||
|
<div id="bank-details" class="payment-details">
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-container">
|
||||||
|
<input type="text" id="bank-name" class="input-field" placeholder=" " oninput="validateBankName(this)" onkeypress="return preventInvalidBankNameChars(event)" required>
|
||||||
|
<label for="bank-name" class="input-label">Bank Name *</label>
|
||||||
|
</div>
|
||||||
|
<div class="invalid-feedback" id="bank-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
|
Bank name should contain letters and cannot be only numbers or special characters
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-container">
|
||||||
|
<input type="text" id="account-number" class="input-field" placeholder=" " oninput="validateAccountNumber(this)" onkeypress="return preventInvalidAccountNumberChars(event)" required>
|
||||||
|
<label for="account-number" class="input-label">Account Number *</label>
|
||||||
|
</div>
|
||||||
|
<div class="invalid-feedback" id="account-number-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
|
Please enter a valid account number
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-container">
|
||||||
|
<input type="text" id="routing-number" class="input-field" placeholder=" " required>
|
||||||
|
<label for="routing-number" class="input-label">Routing Number *</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-container">
|
||||||
|
<select id="account-type" class="select-field" required>
|
||||||
|
<option value="" disable selected style="display: none"></option>
|
||||||
|
<option value="checking">Checking</option>
|
||||||
|
<option value="savings">Savings</option>
|
||||||
|
</select>
|
||||||
|
<label for="account-type" class="input-label">Account Type *</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-container">
|
||||||
|
<input type="text" id="account-holder-name" class="input-field" placeholder=" " oninput="validateAccountHolderName(this)" onkeypress="return preventInvalidAccountHolderChars(event)" required>
|
||||||
|
<label for="account-holder-name" class="input-label">Account Holder Name *</label>
|
||||||
|
</div>
|
||||||
|
<div class="invalid-feedback" id="account-holder-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
|
Account holder name should only contain letters and spaces
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button type="button" class="cancel-btn" onclick="closeBankDetailsModal()">Cancel</button>
|
||||||
|
<button type="submit" class="save-btn" id="saveBankDetailsBtn">Update Bank Details</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,64 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<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="/client/credits" class="sidebar-link">
|
||||||
|
<i class="fas fa-wallet"></i>
|
||||||
|
<span>Credits</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>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<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>
|
||||||
|
|
@ -1,16 +1,4 @@
|
||||||
<!DOCTYPE html>
|
<div class="container">
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Client Registration</title>
|
|
||||||
|
|
||||||
<link href="/public/css/va-register.css" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<!-- Sidebar for desktop -->
|
<!-- Sidebar for desktop -->
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
|
|
@ -21,7 +9,7 @@
|
||||||
<nav class="progress-steps">
|
<nav class="progress-steps">
|
||||||
<div class="step active" data-step="1" onclick="goToStep(1)">
|
<div class="step active" data-step="1" onclick="goToStep(1)">
|
||||||
<div class="step-number">1</div>
|
<div class="step-number">1</div>
|
||||||
<!-- <div class="step-number">✓</div> -->
|
<!-- <div class="step-number">✓</div> -->
|
||||||
<div class="step-text">Create Your Account</div>
|
<div class="step-text">Create Your Account</div>
|
||||||
<div class="step-connector"></div>
|
<div class="step-connector"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -59,7 +47,7 @@
|
||||||
<ol>
|
<ol>
|
||||||
<li class="step active" data-step="1" onclick="goToStep(1)">
|
<li class="step active" data-step="1" onclick="goToStep(1)">
|
||||||
<div class="step-number">1</div>
|
<div class="step-number">1</div>
|
||||||
<!-- <div class="step-number">✓</div> -->
|
<!-- <div class="step-number">✓</div> -->
|
||||||
<div class="step-text">Create Account</div>
|
<div class="step-text">Create Account</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="step" data-step="2" onclick="goToStep(2)">
|
<li class="step" data-step="2" onclick="goToStep(2)">
|
||||||
|
|
@ -116,7 +104,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="email" id="email" class="input-field" placeholder=" " value="<%= email %>" readonly disabled required>
|
<input type="email" id="email" class="input-field" placeholder=" " value="<%= email %>"
|
||||||
|
readonly disabled required>
|
||||||
<label for="email" class="input-label">Email *</label>
|
<label for="email" class="input-label">Email *</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -169,17 +158,20 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="city" class="input-field" placeholder=" " oninput="validateCity(this)" onkeypress="return preventInvalidCityChars(event)" required>
|
<input type="text" id="city" class="input-field" placeholder=" "
|
||||||
|
oninput="validateCity(this)" onkeypress="return preventInvalidCityChars(event)"
|
||||||
|
required>
|
||||||
<label for="city" class="input-label">City *</label>
|
<label for="city" class="input-label">City *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="city-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="city-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
City name should contain letters and cannot be only numbers or special characters
|
City name should contain letters and cannot be only numbers or special characters
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<!-- <input type="text" id="state" class="input-field" placeholder=" " required> -->
|
<!-- <input type="text" id="state" class="input-field" placeholder=" " required> -->
|
||||||
<select id="state" class="select-field" required>
|
<select id="state" class="select-field" required>
|
||||||
<option value="" disable selected style="display: none"></option>
|
<option value="" disable selected style="display: none"></option>
|
||||||
<!-- States will be populated by JavaScript -->
|
<!-- States will be populated by JavaScript -->
|
||||||
</select>
|
</select>
|
||||||
|
|
@ -189,10 +181,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="zip" class="input-field" placeholder=" " oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)" maxlength="10" required>
|
<input type="text" id="zip" class="input-field" placeholder=" "
|
||||||
|
oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)"
|
||||||
|
maxlength="10" required>
|
||||||
<label for="zip" class="input-label">ZIP *</label>
|
<label for="zip" class="input-label">ZIP *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="zip-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="zip-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
Invalid Zip code
|
Invalid Zip code
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -228,17 +223,20 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="billing-city" class="input-field" placeholder=" " oninput="validateCity(this)" onkeypress="return preventInvalidCityChars(event)" required>
|
<input type="text" id="billing-city" class="input-field" placeholder=" "
|
||||||
|
oninput="validateCity(this)" onkeypress="return preventInvalidCityChars(event)"
|
||||||
|
required>
|
||||||
<label for="billing-city" class="input-label">City *</label>
|
<label for="billing-city" class="input-label">City *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="billing-city-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="billing-city-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
City name should contain letters and cannot be only numbers or special characters
|
City name should contain letters and cannot be only numbers or special characters
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<!-- <input type="text" id="billing-state" class="input-field" placeholder=" " required> -->
|
<!-- <input type="text" id="billing-state" class="input-field" placeholder=" " required> -->
|
||||||
<select id="billing-state" class="select-field" required>
|
<select id="billing-state" class="select-field" required>
|
||||||
<option value="" disable selected style="display: none"></option>
|
<option value="" disable selected style="display: none"></option>
|
||||||
<!-- States will be populated by JavaScript -->
|
<!-- States will be populated by JavaScript -->
|
||||||
</select>
|
</select>
|
||||||
|
|
@ -247,10 +245,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="billing-zip" class="input-field" placeholder=" " oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)" maxlength="10" required>
|
<input type="text" id="billing-zip" class="input-field" placeholder=" "
|
||||||
|
oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)"
|
||||||
|
maxlength="10" required>
|
||||||
<label for="billing-zip" class="input-label">ZIP *</label>
|
<label for="billing-zip" class="input-label">ZIP *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="billing-zip-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="billing-zip-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
ZIP code should contain only numbers
|
ZIP code should contain only numbers
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -283,19 +284,26 @@
|
||||||
<form id="signatory-form">
|
<form id="signatory-form">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="position" class="input-field" placeholder=" " oninput="validatePosition(this)" onkeypress="return preventInvalidPositionChars(event)" required>
|
<input type="text" id="position" class="input-field" placeholder=" "
|
||||||
<label for="position" class="input-label">Position (Owner / CEO / Manager / etc.) *</label>
|
oninput="validatePosition(this)"
|
||||||
|
onkeypress="return preventInvalidPositionChars(event)" required>
|
||||||
|
<label for="position" class="input-label">Position (Owner / CEO / Manager / etc.)
|
||||||
|
*</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="position-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="position-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
Position should only contain letters, spaces, and common punctuation
|
Position should only contain letters, spaces, and common punctuation
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="signatory-name" class="input-field" placeholder=" " oninput="validateSignatoryName(this)" onkeypress="return preventNumbers(event)" required>
|
<input type="text" id="signatory-name" class="input-field" placeholder=" "
|
||||||
|
oninput="validateSignatoryName(this)" onkeypress="return preventNumbers(event)"
|
||||||
|
required>
|
||||||
<label for="signatory-name" class="input-label">Name *</label>
|
<label for="signatory-name" class="input-label">Name *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="signatory-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="signatory-name-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
Name should not contain numbers
|
Name should not contain numbers
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -333,26 +341,33 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="expiry-date" class="input-field" placeholder=" " required>
|
<input type="text" id="expiry-date" class="input-field" placeholder=" "
|
||||||
|
required>
|
||||||
<label for="expiry-date" class="input-label">Expiry Date (MM/YY) *</label>
|
<label for="expiry-date" class="input-label">Expiry Date (MM/YY) *</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="security-code" class="input-field" placeholder=" " oninput="validateCVVVV(this)" nkeypress="return preventInvalidCVVChars(event)" maxlength="4" required>
|
<input type="text" id="security-code" class="input-field" placeholder=" "
|
||||||
|
oninput="validateCVVVV(this)"
|
||||||
|
nkeypress="return preventInvalidCVVChars(event)" maxlength="4" required>
|
||||||
<label for="security-code" class="input-label">Security Code *</label>
|
<label for="security-code" class="input-label">Security Code *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="security-code-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="security-code-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
Please enter a valid security code
|
Please enter a valid security code
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="card-zip" class="input-field" placeholder=" " oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)" maxlength="10" required>
|
<input type="text" id="card-zip" class="input-field" placeholder=" "
|
||||||
|
oninput="validateZipCode(this)" onkeypress="return preventNonNumericZip(event)"
|
||||||
|
maxlength="10" required>
|
||||||
<label for="card-zip" class="input-label">ZIP Code *</label>
|
<label for="card-zip" class="input-label">ZIP Code *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="card-zip-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="card-zip-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
ZIP code should contain only numbers
|
ZIP code should contain only numbers
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -364,19 +379,25 @@
|
||||||
<div id="bank-details" class="payment-details">
|
<div id="bank-details" class="payment-details">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="bank-name" class="input-field" placeholder=" " oninput="validateBankName(this)" onkeypress="return preventInvalidBankNameChars(event)" required>
|
<input type="text" id="bank-name" class="input-field" placeholder=" "
|
||||||
|
oninput="validateBankName(this)"
|
||||||
|
onkeypress="return preventInvalidBankNameChars(event)" required>
|
||||||
<label for="bank-name" class="input-label">Bank Name *</label>
|
<label for="bank-name" class="input-label">Bank Name *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="bank-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="bank-name-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
Bank name should contain letters and cannot be only numbers or special characters
|
Bank name should contain letters and cannot be only numbers or special characters
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="account-number" class="input-field" placeholder=" " oninput="validateAccountNumber(this)" onkeypress="return preventInvalidAccountNumberChars(event)" required>
|
<input type="text" id="account-number" class="input-field" placeholder=" "
|
||||||
|
oninput="validateAccountNumber(this)"
|
||||||
|
onkeypress="return preventInvalidAccountNumberChars(event)" required>
|
||||||
<label for="account-number" class="input-label">Account Number *</label>
|
<label for="account-number" class="input-label">Account Number *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="account-number-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="account-number-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
Please enter a valid account number
|
Please enter a valid account number
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -398,10 +419,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="account-holder-name" class="input-field" placeholder=" " oninput="validateAccountHolderName(this)" onkeypress="return preventInvalidAccountHolderChars(event)" required>
|
<input type="text" id="account-holder-name" class="input-field" placeholder=" "
|
||||||
|
oninput="validateAccountHolderName(this)"
|
||||||
|
onkeypress="return preventInvalidAccountHolderChars(event)" required>
|
||||||
<label for="account-holder-name" class="input-label">Account Holder Name *</label>
|
<label for="account-holder-name" class="input-label">Account Holder Name *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="account-holder-name-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="account-holder-name-error"
|
||||||
|
style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
Account holder name should only contain letters and spaces
|
Account holder name should only contain letters and spaces
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -418,27 +442,26 @@
|
||||||
<div class="success-message">
|
<div class="success-message">
|
||||||
<div class="success-icon">✓</div>
|
<div class="success-icon">✓</div>
|
||||||
<h3>Registration Complete!</h3>
|
<h3>Registration Complete!</h3>
|
||||||
<p>Your account has been successfully created. You will receive a confirmation email shortly.</p>
|
<p>Your account has been successfully created. You will receive a confirmation email shortly.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="/public/js/va-client-register.js"></script>
|
<script src="/public/js/va-client-register.js"></script>
|
||||||
<script>
|
<script>
|
||||||
function setTheme(theme) {
|
function setTheme(theme) {
|
||||||
document.documentElement.setAttribute('data-theme', theme);
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
localStorage.setItem('theme', theme);
|
localStorage.setItem('theme', theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSystemTheme() {
|
function getSystemTheme() {
|
||||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize theme
|
// Initialize theme
|
||||||
const savedTheme = getSystemTheme();
|
const savedTheme = getSystemTheme();
|
||||||
setTheme(savedTheme);
|
setTheme(savedTheme);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,293 +1,124 @@
|
||||||
<!DOCTYPE html>
|
<!-- Mobile Toggle Button -->
|
||||||
<html lang="en">
|
<div class="mobile-toggle" id="toggleBtn">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<head>
|
<!-- Mobile Overlay -->
|
||||||
<meta charset="UTF-8" />
|
<div id="overlay"></div>
|
||||||
<title>Live Screen Feed</title>
|
|
||||||
|
|
||||||
<style>
|
<div class="sidebar" id="sidebar">
|
||||||
* {
|
<h3>Visible Apps</h3>
|
||||||
box-sizing: border-box;
|
<div id="appsList"></div>
|
||||||
margin: 0;
|
</div>
|
||||||
padding: 0;
|
|
||||||
|
<div class="content">
|
||||||
|
<h2 id="selectedAppTitle">Select an app to view</h2>
|
||||||
|
<img id="liveImage" alt="Live Feed" />
|
||||||
|
<div id="placeholder" class="placeholder">No app selected</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/socket.io/socket.io.js"></script>
|
||||||
|
<script>
|
||||||
|
const vaId = "<%= vaId %>";
|
||||||
|
const clientId = "<%= clientId %>";
|
||||||
|
const projectId = "<%= projectId %>";
|
||||||
|
const token = localStorage.getItem("knoptpq");
|
||||||
|
|
||||||
|
const socket = io({
|
||||||
|
auth: {
|
||||||
|
token: token,
|
||||||
|
userType: "client",
|
||||||
|
projectId: projectId,
|
||||||
|
vaId: vaId
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.emit("register", {
|
||||||
|
role: "client",
|
||||||
|
id: vaId,
|
||||||
|
projectId: "<%= projectId %>",
|
||||||
|
clientId: clientId
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const sidebar = document.getElementById("sidebar");
|
||||||
|
const toggleBtn = document.getElementById("toggleBtn");
|
||||||
|
const overlay = document.getElementById("overlay");
|
||||||
|
|
||||||
|
const appsList = document.getElementById("appsList");
|
||||||
|
const liveImage = document.getElementById("liveImage");
|
||||||
|
const selectedAppTitle = document.getElementById("selectedAppTitle");
|
||||||
|
const placeholder = document.getElementById("placeholder");
|
||||||
|
|
||||||
|
let currentApp = null;
|
||||||
|
|
||||||
|
/* MOBILE SIDEBAR TOGGLE */
|
||||||
|
toggleBtn.onclick = () => {
|
||||||
|
sidebar.classList.add("open");
|
||||||
|
overlay.classList.add("show");
|
||||||
|
};
|
||||||
|
|
||||||
|
overlay.onclick = () => {
|
||||||
|
sidebar.classList.remove("open");
|
||||||
|
overlay.classList.remove("show");
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.on("connected", () => {
|
||||||
|
socket.emit("requestVisibleApps", { token });
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Receive visible apps */
|
||||||
|
socket.on("receiveVisibleApps", ({ apps, vaId: senderVaId }) => {
|
||||||
|
if (vaId !== senderVaId) return;
|
||||||
|
|
||||||
|
appsList.innerHTML = "";
|
||||||
|
|
||||||
|
if (!apps?.length) {
|
||||||
|
appsList.innerHTML = "<p style='color:#777;'>No visible apps</p>";
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
apps.forEach(app => {
|
||||||
height: 100vh;
|
const div = document.createElement("div");
|
||||||
display: flex;
|
div.classList.add("app");
|
||||||
background: #0f0f0f;
|
div.textContent = app.name || "Unnamed App";
|
||||||
color: white;
|
|
||||||
font-family: "Inter", sans-serif;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SIDEBAR */
|
div.onclick = () => {
|
||||||
.sidebar {
|
document.querySelectorAll(".app").forEach(el => el.classList.remove("active"));
|
||||||
width: 280px;
|
div.classList.add("active");
|
||||||
background: #181818;
|
|
||||||
border-right: 1px solid #2b2b2b;
|
|
||||||
padding: 15px;
|
|
||||||
overflow-y: auto;
|
|
||||||
transition: transform 0.35s ease;
|
|
||||||
z-index: 50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h3 {
|
currentApp = app.name;
|
||||||
margin-bottom: 15px;
|
selectedAppTitle.textContent = app.name;
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app {
|
|
||||||
background: #252525;
|
|
||||||
border: 1px solid #333;
|
|
||||||
padding: 12px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app:hover {
|
|
||||||
background: #333;
|
|
||||||
transform: translateX(3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app.active {
|
|
||||||
background: #6c63ff;
|
|
||||||
border-color: #6c63ff;
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 0 10px rgba(108, 99, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* MAIN CONTENT */
|
|
||||||
.content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: relative;
|
|
||||||
padding: 20px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#selectedAppTitle {
|
|
||||||
font-size: 20px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#liveImage {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 900px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 2px solid #444;
|
|
||||||
object-fit: contain;
|
|
||||||
background: black;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.placeholder {
|
|
||||||
font-size: 16px;
|
|
||||||
opacity: 0.8;
|
|
||||||
color: #bbb;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* MOBILE RESPONSIVE */
|
|
||||||
.mobile-toggle {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 15px;
|
|
||||||
left: 15px;
|
|
||||||
background: #6C63FF;
|
|
||||||
padding: 14px;
|
|
||||||
border-radius: 8px;
|
|
||||||
z-index: 9999;
|
|
||||||
/* VERY HIGH: always visible */
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-toggle span {
|
|
||||||
display: block;
|
|
||||||
width: 26px;
|
|
||||||
height: 3px;
|
|
||||||
background: #fff;
|
|
||||||
margin: 5px 0;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar Hidden on Mobile */
|
|
||||||
@media (max-width: 780px) {
|
|
||||||
body {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar.open {
|
|
||||||
transform: translateX(0%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-toggle {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding-top: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark overlay when sidebar opens */
|
|
||||||
#overlay {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.45);
|
|
||||||
display: none;
|
|
||||||
z-index: 40;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<!-- Mobile Toggle Button -->
|
|
||||||
<div class="mobile-toggle" id="toggleBtn">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mobile Overlay -->
|
|
||||||
<div id="overlay"></div>
|
|
||||||
|
|
||||||
<div class="sidebar" id="sidebar">
|
|
||||||
<h3>Visible Apps</h3>
|
|
||||||
<div id="appsList"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<h2 id="selectedAppTitle">Select an app to view</h2>
|
|
||||||
<img id="liveImage" alt="Live Feed" />
|
|
||||||
<div id="placeholder" class="placeholder">No app selected</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script>
|
|
||||||
const vaId = "<%= vaId %>";
|
|
||||||
const clientId = "<%= clientId %>";
|
|
||||||
const projectId = "<%= projectId %>";
|
|
||||||
const token = localStorage.getItem("knoptpq");
|
|
||||||
|
|
||||||
const socket = io({
|
|
||||||
auth: {
|
|
||||||
token: token,
|
|
||||||
userType: "client",
|
|
||||||
projectId: projectId,
|
|
||||||
vaId: vaId
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.emit("register", {
|
|
||||||
role: "client",
|
|
||||||
id: vaId,
|
|
||||||
projectId: "<%= projectId %>",
|
|
||||||
clientId: clientId
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const sidebar = document.getElementById("sidebar");
|
|
||||||
const toggleBtn = document.getElementById("toggleBtn");
|
|
||||||
const overlay = document.getElementById("overlay");
|
|
||||||
|
|
||||||
const appsList = document.getElementById("appsList");
|
|
||||||
const liveImage = document.getElementById("liveImage");
|
|
||||||
const selectedAppTitle = document.getElementById("selectedAppTitle");
|
|
||||||
const placeholder = document.getElementById("placeholder");
|
|
||||||
|
|
||||||
let currentApp = null;
|
|
||||||
|
|
||||||
/* MOBILE SIDEBAR TOGGLE */
|
|
||||||
toggleBtn.onclick = () => {
|
|
||||||
sidebar.classList.add("open");
|
|
||||||
overlay.classList.add("show");
|
|
||||||
};
|
|
||||||
|
|
||||||
overlay.onclick = () => {
|
|
||||||
sidebar.classList.remove("open");
|
|
||||||
overlay.classList.remove("show");
|
|
||||||
};
|
|
||||||
|
|
||||||
socket.on("connected", () => {
|
|
||||||
socket.emit("requestVisibleApps", { token });
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Receive visible apps */
|
|
||||||
socket.on("receiveVisibleApps", ({ apps, vaId: senderVaId }) => {
|
|
||||||
if (vaId !== senderVaId) return;
|
|
||||||
|
|
||||||
appsList.innerHTML = "";
|
|
||||||
|
|
||||||
if (!apps?.length) {
|
|
||||||
appsList.innerHTML = "<p style='color:#777;'>No visible apps</p>";
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
apps.forEach(app => {
|
|
||||||
const div = document.createElement("div");
|
|
||||||
div.classList.add("app");
|
|
||||||
div.textContent = app.name || "Unnamed App";
|
|
||||||
|
|
||||||
div.onclick = () => {
|
|
||||||
document.querySelectorAll(".app").forEach(el => el.classList.remove("active"));
|
|
||||||
div.classList.add("active");
|
|
||||||
|
|
||||||
currentApp = app.name;
|
|
||||||
selectedAppTitle.textContent = app.name;
|
|
||||||
|
|
||||||
placeholder.style.display = "none";
|
|
||||||
liveImage.style.display = "none";
|
|
||||||
|
|
||||||
socket.emit("selectApp", { appTitle: app.name, clientId, vaId, projectId });
|
|
||||||
|
|
||||||
// Close sidebar on mobile
|
|
||||||
sidebar.classList.remove("open");
|
|
||||||
overlay.classList.remove("show");
|
|
||||||
};
|
|
||||||
|
|
||||||
appsList.appendChild(div);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on("authError", () => {
|
|
||||||
socket.disconnect();
|
|
||||||
localStorage.removeItem("knoptpq");
|
|
||||||
window.location.href = "/";
|
|
||||||
});
|
|
||||||
|
|
||||||
/* Receive images */
|
|
||||||
socket.on("receiveImage", (base64, title) => {
|
|
||||||
if (currentApp && title === currentApp) {
|
|
||||||
liveImage.src = base64;
|
|
||||||
liveImage.style.display = "block";
|
|
||||||
placeholder.style.display = "none";
|
placeholder.style.display = "none";
|
||||||
}
|
liveImage.style.display = "none";
|
||||||
|
|
||||||
|
socket.emit("selectApp", { appTitle: app.name, clientId, vaId, projectId });
|
||||||
|
|
||||||
|
// Close sidebar on mobile
|
||||||
|
sidebar.classList.remove("open");
|
||||||
|
overlay.classList.remove("show");
|
||||||
|
};
|
||||||
|
|
||||||
|
appsList.appendChild(div);
|
||||||
});
|
});
|
||||||
</script>
|
});
|
||||||
|
|
||||||
</body>
|
socket.on("authError", () => {
|
||||||
|
socket.disconnect();
|
||||||
|
localStorage.removeItem("knoptpq");
|
||||||
|
window.location.href = "/client/login";
|
||||||
|
});
|
||||||
|
|
||||||
</html>
|
/* Receive images */
|
||||||
|
socket.on("receiveImage", (base64, title) => {
|
||||||
|
if (currentApp && title === currentApp) {
|
||||||
|
liveImage.src = base64;
|
||||||
|
liveImage.style.display = "block";
|
||||||
|
placeholder.style.display = "none";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -1,25 +1,4 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Virtual Assistant Registration</title>
|
|
||||||
|
|
||||||
<link href="/public/css/va-register.css" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
select option:disabled {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
background-color: white;
|
|
||||||
color: #2d2d2d;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- Sidebar for desktop -->
|
<!-- Sidebar for desktop -->
|
||||||
|
|
@ -269,11 +248,11 @@
|
||||||
<div id="veem-details" class="payment-details">
|
<div id="veem-details" class="payment-details">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="veemAccount" class="input-field" placeholder=" " minlength="8" maxlength="25" oninput="validateVeemAccount(this)" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
|
<input type="email" id="veemAccount" class="input-field" placeholder=" " oninput="validateVeemEmail(this)" required>
|
||||||
<label for="veemAccount" class="input-label">Veem Account Number *</label>
|
<label for="veemAccount" class="input-label">Veem Email Address *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="veem-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="veem-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
Account number must be 8-25 characters
|
Invalid Veem email address
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -302,11 +281,11 @@
|
||||||
<div id="payoneer-details" class="payment-details">
|
<div id="payoneer-details" class="payment-details">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<input type="text" id="payoneerAccount" class="input-field" placeholder=" " minlength="5" maxlength="20" oninput="validatePayoneerAccount(this)" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
|
<input type="email" id="payoneerAccount" class="input-field" placeholder=" " oninput="validatePayoneerEmail(this)" required>
|
||||||
<label for="payoneerAccount" class="input-label">Payoneer Account Number *</label>
|
<label for="payoneerAccount" class="input-label">Payoneer Email Address *</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="invalid-feedback" id="payoneer-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
<div class="invalid-feedback" id="payoneer-error" style="display: none; color: #dc3545; font-size: 12px; margin-top: 5px;">
|
||||||
Account number must be 5-20 characters
|
Please enter a valid email address for Payoneer
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -346,5 +325,4 @@
|
||||||
const savedTheme = getSystemTheme();
|
const savedTheme = getSystemTheme();
|
||||||
setTheme(savedTheme);
|
setTheme(savedTheme);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue