Merge branch 'backend' of http://git.hicglobalsolutions.in/BhawanSingh/va-tracker-middleware - 01-12

public/css/dashboard.css

@@ -1461,6 +1461,7 @@ tr[data-vaid]:hover {
     background: var(--bg-primary);
     color: var(--text-primary);
     transition: border-color 0.2s;
+    resize: vertical;
 }
 
 .modal-form .form-input:focus {
@@ -1477,6 +1478,19 @@ tr[data-vaid]:hover {
     border-color: var(--color-danger);
 }
 
+.select-field {
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 16px;
+    border-radius: 6px;
+}
+
+[data-theme="dark"] .select-field {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+}
+
 .error-message {
     color: var(--color-danger);
     font-size: 0.875rem;

public/css/va-register.css

@@ -64,11 +64,12 @@ body {
     display: none;
     flex-direction: column;
     width: 388px;
-    background: linear-gradient(to bottom, #f4f4f5, #d0f9f9, #cac5f7);
+    background: var(--bg-sidebar);
     padding: 24px;
     border-radius: 14px;
     margin: 20px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow);
+    transition: all 0.3s ease;
 }
 
 .logo {
@@ -80,18 +81,24 @@ body {
     width: 100%;
     height: auto;
     max-width: 196px;
+    filter: brightness(var(--logo-brightness, 1));
 }
+
+[data-theme="dark"] .logo-placeholder img {
+    --logo-brightness: 0.9;
+}
+
 .logo-placeholder h2 {
     font-size: 32px;
     font-weight: 700;
-    color: #000;
+    color: var(--text-primary);
     text-align: center;
 }
 
 .form-title-sec {
     font-size: 24px;
     font-weight: 700;
-    color: #000;
+    color:var(--text-primary);
     text-align: center;
     margin-bottom: 24px;
 }
@@ -111,15 +118,25 @@ body {
     border: 2px solid transparent;
     cursor: pointer;
     position: relative;
+    transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+[data-theme="dark"] .step {
+    background: rgba(255, 255, 255, 0.05);
 }
 
 .step.active {
-    border-color: #000000;
+    border-color: var(--accent-color);
+}
+
+[data-theme="dark"] .step.active {
+    background: rgba(255, 255, 255, 0.1);
 }
 
 .step.completed .step-number {
-    background-color: #000000;
+    background-color: var(--accent-color);
-    border-color: #000000;
+    border-color: var(--accent-color);
     color: white;
 }
 
@@ -130,30 +147,43 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 2px solid #00000070;
+    border: 2px solid var(--accent-color);
     font-weight: 600;
-    color: #000000b5;
+    color: var(--accent-color);
     transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.8);
+}
+
+[data-theme="dark"] .step-number {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--accent-color);
+    color: var(--text-primary);
 }
 
 .step.active .step-number {
-    border-color: #000;
+    border-color:var(--text-primary);
-    color: #000;
+    color:var(--text-primary);
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.9);
+}
+
+[data-theme="dark"] .step.active .step-number {
+    background: rgba(255, 255, 255, 0.2);
 }
 
 .step-text {
     font-size: 14px;
-    color: #000000b5;
+    color: var(--text-primary);
 }
 
 .step.active .step-text {
-    color: #000;
+    color:var(--text-primary);
 }
 
 .step-connector {
     height: 24px;
     width: 2px;
-    background-color: #00000070;
+    background-color: var(--accent-color);
     margin-left: 16px;
     position: absolute;
     top: 46px;
@@ -161,7 +191,7 @@ body {
 }
 
 .step.active .step-connector {
-    background-color: #000;
+    background-color:var(--text-primary);
 }
 
 /* Main Content Styles */
@@ -171,15 +201,17 @@ body {
     flex-direction: column;
     padding: 20px;
     overflow-y: auto;
+    background-color: var(--bg-primary);
 }
 
 .mobile-progress {
-    background-color: #f4f4f5;
+    background-color: var(--bg-secondary);
     padding: 16px;
     border-radius: 12px;
     margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow);
     overflow-x: auto;
+    border: 1px solid var(--border-color);
 }
 
 .mobile-progress ol {
@@ -204,11 +236,12 @@ body {
 .form-card {
     width: 100%;
     max-width: 450px;
-    background: white;
+    background: var(--bg-card);
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-color);
     border-radius: 12px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    box-shadow: var(--shadow-lg);
     padding: 24px;
+    transition: all 0.3s ease;
 }
 
 .form-title {
@@ -216,7 +249,7 @@ body {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 24px;
-    color: #000;
+    color:var(--text-primary);
 }
 
 .form-step {
@@ -234,10 +267,17 @@ body {
 
 .input-container {
     position: relative;
-    background-color: #f9fafb;
+    background-color: var(--bg-secondary);
     border-radius: 6px;
     overflow: hidden;
     padding: 2px 0;
+    border: 1px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.input-container:focus-within {
+    border-color: var(--accent-light);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
 .input-label {
@@ -246,7 +286,7 @@ body {
     top: 50%;
     transform: translateY(-50%);
     font-size: 14px;
-    color: #6b7280;
+    color: var(--text-secondary);
     transition: all 0.2s ease;
     pointer-events: none;
 }
@@ -259,6 +299,16 @@ body {
     outline: none;
     font-size: 14px;
     border-radius: 6px;
+    color: var(--text-primary);
+    transition: all 0.3s ease;
+}
+
+[data-theme="dark"] .input-field, [data-theme="dark"] .select-field {
+    background-color: #ffffff1a;
+}
+
+.input-field::placeholder {
+    color: var(--text-muted);
 }
 
 .select-field {
@@ -270,6 +320,10 @@ body {
     border-radius: 6px;
 }
 
+[data-theme="dark"] .select-field {
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+}
+
 .input-field:focus + .input-label,
 .input-field:not(:placeholder-shown) + .input-label,
 .select-field:focus + .input-label,
@@ -277,6 +331,7 @@ body {
     top: 2px;
     font-size: 12px;
     transform: none;
+    color: var(--accent-light);
 }
 
   .checkbox-group {
@@ -289,10 +344,13 @@ body {
   .checkbox-group input {
       width: 16px;
       height: 16px;
+    accent-color: var(--accent-color);
   }
 
   .checkbox-group label {
       font-size: 14px;
+    color: var(--text-primary);
+    cursor: pointer;
   }
 
   .form-actions {
@@ -312,31 +370,33 @@ body {
   }
 
   .btn-primary {
-      background-color: #000000;
+      background-color: var(--accent-color);
       color: white;
   }
 
   .btn-primary:hover {
       opacity: 0.9;
+    transform: translateY(-1px);
   }
 
   .btn-secondary {
-      background-color: #f3f4f6;
+    background-color: var(--bg-secondary);
-      color: #374151;
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
   }
 
   .btn-secondary:hover {
-      background-color: #e5e7eb;
+      background-color: var(--border-color);
   }
 
 .btn-outline {
     background-color: transparent;
-    border: 1px solid #070065;
+    border: 1px solid var(--accent-light);
-    color: #070065;
+    color: var(--accent-light);
 }
 
 .btn-outline:hover {
-    background-color: #070065;
+    background-color: var(--accent-light);
     color: white;
 }
 
@@ -344,6 +404,7 @@ body {
 .btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
+    transform: none !important;
 }
 
 .btn-sm {
@@ -360,31 +421,109 @@ body {
 }
 
 .payment-option.selected {
-    border-color: #000000;
+    border-color: var(--border-color);
-    background-color: #f0f9ff;
+    transition: all 0.3s ease;
+    background: var(--bg-card);
+}
+
+.payment-option:hover {
+    border-color: var(--accent-light);
+    transform: translateY(-1px);
+}
+
+.payment-option.selected {
+    border-color: var(--accent-color);
+    background-color: rgba(99, 102, 241, 0.1);
+}
+
+[data-theme="dark"] .payment-option.selected {
+    background-color: rgba(99, 102, 241, 0.2);
+}
+
+/* Button Dark Mode Styles */
+[data-theme="dark"] .btn-primary {
+    background-color: #6366f1;
+    color: white;
+    border: 1px solid #6366f1;
+}
+
+[data-theme="dark"] .btn-primary:hover {
+    background-color: #4f46e5;
+    border-color: #4f46e5;
+    opacity: 1;
+}
+
+[data-theme="dark"] .btn-secondary {
+    background-color: #374151;
+    color: #d1d5db;
+    border: 1px solid #4b5563;
+}
+
+[data-theme="dark"] .btn-secondary:hover {
+    background-color: #4b5563;
+    border-color: #6b7280;
+}
+
+[data-theme="dark"] .btn-outline {
+    background-color: transparent;
+    border: 1px solid #6366f1;
+    color: #6366f1;
+}
+
+[data-theme="dark"] .btn-outline:hover {
+    background-color: #6366f1;
+    color: white;
+}
+
+[data-theme="dark"] .btn:disabled {
+    background-color: #374151;
+    color: #6b7280;
+    border-color: #4b5563;
+    opacity: 0.5;
+}
+
+/* Action button dark mode styles */
+[data-theme="dark"] .password-toggle,
+[data-theme="dark"] .password-generate,
+[data-theme="dark"] .detect-location {
+    color: #818cf8;
+}
+
+[data-theme="dark"] .password-toggle:hover,
+[data-theme="dark"] .password-generate:hover,
+[data-theme="dark"] .detect-location:hover {
+    color: #6366f1;
+}
+
+/* Focus states for dark mode */
+[data-theme="dark"] .btn:focus-visible {
+    outline: 2px solid #818cf8;
+    outline-offset: 2px;
 }
 
 .payment-option h4 {
     margin-bottom: 8px;
     font-size: 16px;
+    color: var(--text-primary);
 }
 
 .payment-option p {
     font-size: 14px;
-    color: #6b7280;
+    color: var(--text-secondary);
 }
 
 .payment-details {
     display: none;
     margin: 4px 0 16px;
     padding: 16px;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
-    background-color: #bdbdbd;
+    transition: all 0.3s ease;
 }
 
 .payment-details.active {
     display: block;
+    animation: slideDown 0.3s ease-out;
 }
 
 .success-message {
@@ -394,24 +533,25 @@ body {
 
 .success-icon {
     font-size: 48px;
-    color: #10b981;
+    color: var(--success-color);
     margin-bottom: 16px;
 }
 
 .success-message h3 {
     font-size: 24px;
     margin-bottom: 8px;
+    color: var(--text-primary);
 }
 
 .success-message p {
-    color: #6b7280;
+    color: var(--text-secondary);
     margin-bottom: 24px;
 }
 
 .location-loading {
     display: none;
     font-size: 12px;
-    color: #6b7280;
+    color: var(--text-secondary);
     margin-top: 4px;
     margin-left: 12px;
     position: absolute;
@@ -428,17 +568,17 @@ body {
 }
 
 .profile-incomplete {
-    background: #fff3cd;
+    background: var(--warning-bg);
-    border: 1px solid #ffeaa7;
+    border: 1px solid var(--warning-border);
     border-radius: 8px;
     padding: 1rem;
     margin-bottom: 1.5rem;
-    color: #856404;
+    color: var(--warning-text);
 }
 
 .password-strength {
     height: 5px;
-    background: #e9ecef;
+    background: var(--bg-secondary);
     border-radius: 5px;
     margin-top: 5px;
     overflow: hidden;
@@ -452,7 +592,7 @@ body {
 }
 
 .password-weak {
-    background: #dc3545;
+    background: var(--error-color);
     width: 25%;
 }
 
@@ -462,7 +602,7 @@ body {
 }
 
 .password-strong {
-    background: #28a745;
+    background: var(--success-color);
     width: 100%;
 }
 
@@ -473,38 +613,127 @@ body {
     margin-top: 8px;
 }
 
-.password-toggle {
+.password-toggle, .password-generate, .detect-location {
     background: none;
     border: none;
-    color: #070065;
+    color: var(--accent-light);
     cursor: pointer;
     font-size: 12px;
+    transition: color 0.3s ease;
 }
 
-.password-generate {
+.password-toggle:hover, .password-generate:hover, .detect-location:hover {
-    background: none;
+    color: var(--accent-color);
-    border: none;
-    color: #070065;
-    cursor: pointer;
-    font-size: 12px;
 }
 
 .form-text {
     font-size: 12px;
-    color: #6b7280;
+    color: var(--text-secondary);
     margin-top: 4px;
 }
 
-.detect-location {
+/* Error States */
-    background: none;
+.step-error-container {
-    border: none;
+    background-color: rgba(220, 38, 38, 0.1);
-    color: #070065;
+    border: 1px solid rgba(220, 38, 38, 0.3);
-    cursor: pointer;
+    border-radius: 8px;
-    font-size: 12px;
+    padding: 12px 16px;
-    text-decoration: underline;
+    margin-bottom: 20px;
-    margin-top: 5px;
+    animation: slideDown 0.3s ease-out;
 }
 
+[data-theme="dark"] .step-error-container {
+    background-color: rgba(220, 38, 38, 0.2);
+    border-color: rgba(220, 38, 38, 0.4);
+}
+
+.error-message {
+    color: var(--error-color);
+    font-size: 14px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.error-message::before {
+    content: "⚠";
+    font-size: 16px;
+}
+
+.field-error {
+    border: 1px solid var(--error-color) !important;
+    background-color: rgba(220, 38, 38, 0.05) !important;
+}
+
+[data-theme="dark"] .field-error {
+    background-color: rgba(220, 38, 38, 0.1) !important;
+}
+
+/* Animations */
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb {
+    background: var(--border-dark);
+}
+
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+    background: var(--text-secondary);
+}
+
+.btn:focus-visible,
+.input-field:focus-visible,
+.select-field:focus-visible,
+.payment-option:focus-visible {
+    outline: 2px solid var(--accent-light);
+    outline-offset: 2px;
+}
+
+/* Selection Color */
+::selection {
+    background-color: rgba(99, 102, 241, 0.3);
+    color: var(--text-primary);
+}
+
+
   /* Responsive styles */
   @media (min-width: 1024px) {
       .sidebar {
@@ -520,41 +749,35 @@ body {
       }
   }
 
-  .step-error-container {
+@media (max-width: 1023px) {
-    background-color: #fef2f2;
+    [data-theme="dark"] .mobile-progress {
-    border: 1px solid #fecaca;
+        background-color: var(--bg-card);
-    border-radius: 8px;
+        border: 1px solid var(--border-dark);
-    padding: 12px 16px;
-    margin-bottom: 20px;
-    animation: slideDown 0.3s ease-out;
-}
-
-.error-message {
-    color: #dc2626;
-    font-size: 14px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.error-message::before {
-    content: "⚠";
-    font-size: 16px;
-}
-
-.field-error {
-    border: 1px solid #dc2626 !important;
-    background-color: #fef2f2;
-}
-
-@keyframes slideDown {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
     }
-    to {
+    
-        opacity: 1;
+    .mobile-progress .step {
-        transform: translateY(0);
+        background: rgba(255, 255, 255, 0.05);
+    }
+    
+    [data-theme="dark"] .mobile-progress .step {
+        background: rgba(255, 255, 255, 0.1);
+    }
+}
+
+@media print {
+    [data-theme="dark"] {
+        --bg-primary: #ffffff;
+        --bg-card: #ffffff;
+        --text-primary: #000000;
+        --text-secondary: #333333;
+        --border-color: #cccccc;
+    }
+    
+    .sidebar {
+        display: none;
+    }
+    
+    .btn {
+        display: none;
     }
 }

src/server.js

@@ -168,6 +168,16 @@ app.get('/client/profile', async (req, res) => {
 	}
 });
 
+app.get('/client/virtual-assistants/manage-tips', async (req, res) => {
+	try {
+		// const vaData = await virtualAssistantService.getClientVAs(req.user.id);
+		res.render('client/dashboard-manage-va-tips');
+	} catch (error) {
+		console.error('Projects error:', error);
+		res.status(500).render('client/dashboard-manage-va-tips', { error: 'Failed to load profile' });
+	}
+});
+
 app.get("/live/:projectId/:vaId", async (req, res) => {
 	const { projectId, vaId } = req.params;
 

views/client/dashboard-manage-va-tips.ejs

@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DocVA Client | Dashboard</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <link rel="stylesheet" href="/public/css/dashboard.css">
+</head>
+<body class="dashboard-body">
+    <div id="root">
+        <nav class="dashboard-header">
+            <div class="header-content">
+                <div class="header-logo">
+                    <div class="logo-container">
+                        <h2 class="sidebar-title">DocVA Client Portal</h2>
+                    </div>
+                </div>
+                
+                <div class="header-nav">
+                    <ul class="nav-list">
+                        <li class="nav-item">
+                            <a href="/client/dashboard" class="nav-button">
+                                <i class="fas fa-chart-bar"></i>Dashboard
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="/client/virtual-assistants" class="nav-button active">
+                                <i class="fas fa-users"></i>Virtual Assistants
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="/client/projects" class="nav-button">
+                                <i class="fas fa-file-invoice"></i>Projects
+                            </a>
+                        </li>
+                    </ul>
+                    
+                    <button class="mobile-menu-button">
+                        <i class="fas fa-bars"></i>
+                    </button>
+                </div>
+            </div>
+        </nav>
+        <div class="dashboard-container">
+            <aside class="dashboard-sidebar">
+                <nav class="sidebar-nav">
+                    <ul class="sidebar-list">
+                        <li class="sidebar-item">
+                            <a href="/client/profile" class="sidebar-link">
+                                <i class="fas fa-user sidebar-icon"></i>
+                                <span>Profile</span>
+                            </a>
+                        </li>
+                        <li class="sidebar-item">
+                            <a href="/client/dashboard" class="sidebar-link">
+                                <i class="fas fa-chart-bar sidebar-icon"></i>
+                                <span>Dashboard</span>
+                            </a>
+                        </li>
+                        <li class="sidebar-item">
+                            <a href="/client/virtual-assistants" class="sidebar-link active">
+                                <i class="fas fa-users sidebar-icon"></i>
+                                <span>Virtual Assistants</span>
+                            </a>
+                        </li>
+                        <li class="sidebar-item">
+                            <a href="/client/projects" class="sidebar-link">
+                                <i class="fas fa-file-invoice sidebar-icon"></i>
+                                <span>Projects</span>
+                            </a>
+                        </li>
+                        <li class="sidebar-item">
+                            <a href="javascript:void(0);" class="sidebar-link" id="logoutButton">
+                                <i class="fas fa-sign-out-alt sidebar-icon"></i>
+                                <span>Logout</span>
+                            </a>
+                        </li>
+                    </ul>
+                </nav>
+            </aside>
+            <main class="dashboard-main">
+                <div class="dashboard-content">
+                    <!-- Stats Cards -->
+                    <div class="stats-grid">
+                        <div class="stat-card">
+                            <div class="stat-content">
+                                <div class="stat-info">
+                                    <h3>Unbilled Tips</h3>
+                                    <div class="stat-value" id="vaUnbilledTips">$0</div>
+                                </div>
+                                <div class="stat-icon blue">
+                                    <i class="fas fa-file-invoice fa-xl"></i>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="stat-card">
+                            <div class="stat-content">
+                                <div class="stat-info">
+                                    <h3>Total Tips</h3>
+                                    <div class="stat-value" id="vaTotalTips">$0</div>
+                                </div>
+                                <div class="stat-icon blue">
+                                    <i class="fas fa-dollar fa-xl"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Virtual Assistants List -->
+                    <div class="content-section">
+                        <div class="section-header" style="justify-content: space-between;align-items: center;">
+                            <a href="/client/virtual-assistants" class="btn btn-secondary">Back</a>
+                            <span class="btn btn-primary" id="tipVaAddBtn">Tip Virtual Assistant</span>
+                        </div>
+                        <div class="table-container">
+                            <div class="table-wrapper">
+                                <table class="data-table">
+                                    <thead>
+                                        <tr>
+                                            <th>Void</th>
+                                            <th>Status</th>
+                                            <th>Virtual Assistant Name</th>
+                                            <th>Description</th>
+                                            <th>Date Added</th>
+                                            <th>Amount</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="vaTipTableBody">
+                                        <!-- Data will be loaded here -->
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div id="vaEmptyTipState" style="display: none;">
+                                <div class="empty-state">
+                                    <i class="fas fa-users"></i>
+                                    <h3>No Tip Found</h3>
+                                    <p>You haven't gave any Tip yet.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+        <div id="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 select-field" id="vaForTip" required>
+                                <option value="">-- Select Virtual Assistant --</option>
+                                <option value="va 1">VA 1</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 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="savePasswordBtn">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>
+<script>
+    // Theme management
+    function setTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+    }
+    
+    function getSystemTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    
+    // Initialize theme
+    const savedTheme = getSystemTheme();
+    setTheme(savedTheme);
+    
+    // API base URL
+    const API_BASE = '/api/v1/client';
+    
+    // Auth token management
+    function getAuthToken() {
+        return localStorage.getItem('knoptpq');
+    }
+    
+    async function fetchWithAuth(url, options = {}) {
+        const token = getAuthToken();
+        if (!token) {
+            window.location.href = '/client/login';
+            return;
+        }
+        
+        const response = await fetch(url, {
+            ...options,
+            headers: {
+                'token': `${token}`,
+                'Content-Type': 'application/json',
+                ...options.headers,
+            }
+        });
+        
+        if (response.status === 401) {
+            localStorage.removeItem('knoptpq');
+            localStorage.removeItem('refreshToken');
+            window.location.href = '/client/login';
+            return;
+        }
+        
+        return response;
+    }
+
+    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 = '/client/login';
+        }
+    }
+
+    // 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);
+    });
+
+</script>
+</body>
+</html>

views/client/dashboard-virtual-assistants.ejs

@@ -121,8 +121,9 @@
 
                     <!-- Virtual Assistants List -->
                     <div class="content-section">
-                        <div class="section-header">
+                        <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">