From 68e3cf14c950eadbd72af9535cc065ec1fb2e82d Mon Sep 17 00:00:00 2001
From: Aakash <aakashmittal@hicglobalsolutions.com>
Date: Fri, 28 Nov 2025 16:30:48 +0530
Subject: [PATCH] Added dark mode support in dashboard, updated payroll API

---
 public/css/dashboard.css                      | 493 ++++++++++--------
 public/css/va-register.css                    |  47 +-
 .../vaPayroll/vaPayrollSchedule.controller.js |  41 +-
 views/va_client_register.ejs                  |  14 +
 views/va_register.ejs                         |  95 +---
 5 files changed, 379 insertions(+), 311 deletions(-)

diff --git a/public/css/dashboard.css b/public/css/dashboard.css
index fc52d06..fcd6185 100644
--- a/public/css/dashboard.css
+++ b/public/css/dashboard.css
@@ -176,6 +176,10 @@ body {
     cursor: pointer;
 }
 
+[data-theme="dark"] .mobile-menu-button {
+    color: var(--text-secondary);
+}
+
 /* Container Layout */
 .dashboard-container {
     display: flex;
@@ -187,8 +191,8 @@ body {
     width: 16rem;
     background-color: var(--bg-card);
     border-right: 1px solid var(--border-color);
-    /* display: none; */
 }
+
 .dashboard-sidebar.active {
     display: block;
 }
@@ -198,6 +202,7 @@ body {
         display: block;
     }
 }
+
 @media (max-width: 768px) {
     .dashboard-sidebar {
         position: absolute;
@@ -264,6 +269,10 @@ body {
     color: var(--color-primary-light);
 }
 
+[data-theme="dark"] .sidebar-link.active {
+    background-color: rgba(59, 130, 246, 0.2);
+}
+
 .sidebar-icon {
     width: 1.25rem;
     text-align: center;
@@ -304,6 +313,7 @@ body {
 
 .section-title {
     margin-bottom: 20px;
+    color: var(--text-primary);
 }
 
 .stat-card {
@@ -381,6 +391,10 @@ body {
     border-radius: 20px;
 }
 
+[data-theme="dark"] .status-indicator:has(>.active) {
+    background-color: rgba(51, 255, 0, 0.15);
+}
+
 @media (min-width: 1024px) {
     .content-grid {
         grid-template-columns: repeat(2, 1fr);
@@ -515,6 +529,14 @@ body {
     background-color: rgba(59, 130, 246, 0.2);
 }
 
+[data-theme="dark"] .action-button {
+    background-color: rgba(59, 130, 246, 0.2);
+}
+
+[data-theme="dark"] .action-button:hover {
+    background-color: rgba(59, 130, 246, 0.3);
+}
+
 /* Table Styles */
 .table-container {
     background-color: var(--bg-card);
@@ -599,21 +621,38 @@ body {
     color: var(--color-gray-600);
 }
 
+[data-theme="dark"] .hours-default {
+    background-color: rgba(107, 114, 128, 0.2);
+    color: var(--color-gray-400);
+}
+
 .hours-primary {
     background-color: rgba(59, 130, 246, 0.1);
     color: var(--color-primary-light);
 }
 
+[data-theme="dark"] .hours-primary {
+    background-color: rgba(59, 130, 246, 0.2);
+}
+
 .hours-secondary {
     background-color: rgba(99, 102, 241, 0.1);
     color: var(--color-secondary);
 }
 
+[data-theme="dark"] .hours-secondary {
+    background-color: rgba(99, 102, 241, 0.2);
+}
+
 .hours-warning {
     background-color: rgba(245, 158, 11, 0.1);
     color: var(--color-warning);
 }
 
+[data-theme="dark"] .hours-warning {
+    background-color: rgba(245, 158, 11, 0.2);
+}
+
 .amount-positive {
     color: var(--color-success);
 }
@@ -629,38 +668,6 @@ body {
     color: var(--text-secondary);
 }
 
-/* Responsive */
-@media (max-width: 768px) {
-    .dashboard-main {
-        padding: 1rem;
-    }
-    
-    .mobile-menu-button {
-        display: flex;
-    }
-    
-    .nav-list {
-        display: none;
-    }
-    
-    .stats-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .content-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .data-table {
-        font-size: 0.75rem;
-    }
-    
-    .data-table th,
-    .data-table td {
-        padding: 0.5rem 0.75rem;
-    }
-}
-
 /* Popup Styles */
 .popup-overlay {
     position: fixed;
@@ -677,9 +684,9 @@ body {
 }
 
 .popup-content {
-    background: white;
+    background: var(--bg-card);
     border-radius: 12px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-lg);
     width: 90%;
     max-width: 500px;
     max-height: 90vh;
@@ -703,12 +710,13 @@ body {
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
 }
 
 .popup-header h3 {
     margin: 0;
-    color: #1f2937;
+    color: var(--text-primary);
     font-size: 1.25rem;
     font-weight: 600;
 }
@@ -717,7 +725,7 @@ body {
     background: none;
     border: none;
     font-size: 1.25rem;
-    color: #6b7280;
+    color: var(--text-secondary);
     cursor: pointer;
     padding: 0.25rem;
     border-radius: 4px;
@@ -725,8 +733,12 @@ body {
 }
 
 .popup-close:hover {
-    background: #f3f4f6;
-    color: #374151;
+    background: var(--color-gray-100);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .popup-close:hover {
+    background: var(--color-gray-700);
 }
 
 .popup-body {
@@ -743,7 +755,7 @@ body {
     justify-content: space-between;
     align-items: center;
     padding: 0.75rem 0;
-    border-bottom: 1px solid #f3f4f6;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .detail-item:last-child {
@@ -752,22 +764,22 @@ body {
 
 .detail-item label {
     font-weight: 600;
-    color: #374151;
+    color: var(--text-primary);
     font-size: 0.875rem;
 }
 
 .detail-item span {
-    color: #6b7280;
+    color: var(--text-secondary);
     text-align: right;
 }
 
 .status-active {
-    color: #059669;
+    color: var(--color-success);
     font-weight: 600;
 }
 
 .status-inactive {
-    color: #dc2626;
+    color: var(--color-danger);
     font-weight: 600;
 }
 
@@ -775,7 +787,7 @@ body {
     display: flex;
     gap: 1rem;
     padding: 1.5rem;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid var(--border-color);
     justify-content: flex-end;
 }
 
@@ -794,7 +806,7 @@ body {
 }
 
 .btn-primary {
-    background: #3b82f6;
+    background: var(--color-primary-light);
     color: white;
 }
 
@@ -803,12 +815,12 @@ body {
 }
 
 .btn-secondary {
-    background: #6b7280;
+    background: var(--color-gray-500);
     color: white;
 }
 
 .btn-secondary:hover {
-    background: #4b5563;
+    background: var(--color-gray-600);
 }
 
 /* Make table rows clickable */
@@ -818,7 +830,11 @@ tr[data-vaid] {
 }
 
 tr[data-vaid]:hover {
-    background-color: #f8fafc !important;
+    background-color: var(--color-gray-50) !important;
+}
+
+[data-theme="dark"] tr[data-vaid]:hover {
+    background-color: var(--color-gray-800) !important;
 }
 
 /* Ensure view link doesn't trigger row click */
@@ -833,13 +849,13 @@ tr[data-vaid]:hover {
 .projects-section {
     margin-top: 1.5rem;
     padding-top: 1.5rem;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid var(--border-color);
 }
 
 .projects-title {
     font-size: 1rem;
     font-weight: 600;
-    color: #1f2937;
+    color: var(--text-primary);
     margin: 0 0 1rem 0;
 }
 
@@ -850,17 +866,26 @@ tr[data-vaid]:hover {
 }
 
 .project-item {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
+    background: var(--color-gray-50);
+    border: 1px solid var(--border-color);
     border-radius: 8px;
     padding: 1rem;
     transition: all 0.2s;
     margin-top: 12px;
 }
 
+[data-theme="dark"] .project-item {
+    background: var(--color-gray-800);
+}
+
 .project-item:hover {
-    background: #f1f5f9;
-    border-color: #cbd5e1;
+    background: var(--color-gray-100);
+    border-color: var(--color-gray-300);
+}
+
+[data-theme="dark"] .project-item:hover {
+    background: var(--color-gray-700);
+    border-color: var(--color-gray-600);
 }
 
 .project-header {
@@ -873,10 +898,11 @@ tr[data-vaid]:hover {
 .project-name {
     font-weight: 600;
     font-size: 0.9rem;
+    color: var(--text-primary);
 }
 
 .project-time {
-    background: #3b82f6;
+    background: var(--color-primary-light);
     color: white;
     padding: 0.25rem 0.5rem;
     border-radius: 4px;
@@ -886,18 +912,22 @@ tr[data-vaid]:hover {
 
 .project-id {
     font-size: 0.75rem;
-    color: #6b7280;
+    color: var(--text-secondary);
     font-family: monospace;
 }
 
 .no-projects {
     text-align: center;
-    color: #6b7280;
+    color: var(--text-secondary);
     font-style: italic;
     padding: 1rem;
-    background: #f8fafc;
+    background: var(--color-gray-50);
     border-radius: 6px;
-    border: 1px dashed #d1d5db;
+    border: 1px dashed var(--border-color);
+}
+
+[data-theme="dark"] .no-projects {
+    background: var(--color-gray-800);
 }
 
 /* Adjust basic info layout */
@@ -907,39 +937,6 @@ tr[data-vaid]:hover {
     margin-bottom: 1rem;
 }
 
-.detail-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem 0;
-    border-bottom: 1px solid #f3f4f6;
-}
-
-.detail-item:last-child {
-    border-bottom: none;
-}
-
-.detail-item label {
-    font-weight: 600;
-    color: #374151;
-    font-size: 0.875rem;
-}
-
-.detail-item span {
-    color: #6b7280;
-    text-align: right;
-}
-
-.status-active {
-    color: #059669;
-    font-weight: 600;
-}
-
-.status-inactive {
-    color: #dc2626;
-    font-weight: 600;
-}
-
 /* Popup responsive adjustments */
 @media (max-width: 480px) {
     .project-header {
@@ -980,9 +977,9 @@ tr[data-vaid]:hover {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background: white;
+    background: var(--bg-card);
     border-radius: 12px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--shadow-lg);
     width: 90%;
     max-width: 800px;
     max-height: 80vh;
@@ -993,8 +990,8 @@ tr[data-vaid]:hover {
 
 .modal-header {
     padding: 20px 24px;
-    border-bottom: 1px solid #e5e7eb;
-    background: #f8fafc;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-secondary);
     display: flex;
     justify-content: between;
     align-items: center;
@@ -1003,7 +1000,7 @@ tr[data-vaid]:hover {
 .modal-title {
     font-size: 1.5rem;
     font-weight: 600;
-    color: #1f2937;
+    color: var(--text-primary);
     margin: 0;
 }
 
@@ -1012,15 +1009,19 @@ tr[data-vaid]:hover {
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
-    color: #6b7280;
+    color: var(--text-secondary);
     padding: 4px;
     border-radius: 4px;
     transition: all 0.2s;
 }
 
 .modal-close:hover {
-    color: #374151;
-    background: #e5e7eb;
+    color: var(--text-primary);
+    background: var(--color-gray-100);
+}
+
+[data-theme="dark"] .modal-close:hover {
+    background: var(--color-gray-700);
 }
 
 .modal-body {
@@ -1032,9 +1033,9 @@ tr[data-vaid]:hover {
 .project-info-section {
     margin-bottom: 24px;
     padding: 16px;
-    background: #f8fafc;
+    background: var(--bg-secondary);
     border-radius: 8px;
-    border-left: 4px solid #3b82f6;
+    border-left: 4px solid var(--color-primary-light);
 }
 
 .project-info-grid {
@@ -1051,20 +1052,20 @@ tr[data-vaid]:hover {
 
 .project-info-label {
     font-size: 0.875rem;
-    color: #6b7280;
+    color: var(--text-secondary);
     margin-bottom: 4px;
 }
 
 .project-info-value {
     font-size: 1rem;
     font-weight: 500;
-    color: #1f2937;
+    color: var(--text-primary);
 }
 
 .va-section-title {
     font-size: 1.25rem;
     font-weight: 600;
-    color: #1f2937;
+    color: var(--text-primary);
     margin-bottom: 16px;
     display: flex;
     align-items: center;
@@ -1072,7 +1073,7 @@ tr[data-vaid]:hover {
 }
 
 .va-count-badge {
-    background: #3b82f6;
+    background: var(--color-primary-light);
     color: white;
     padding: 2px 8px;
     border-radius: 12px;
@@ -1083,25 +1084,26 @@ tr[data-vaid]:hover {
 .va-table {
     width: 100%;
     border-collapse: collapse;
-    background: white;
+    background: var(--bg-card);
     border-radius: 8px;
     overflow: hidden;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow);
 }
 
 .va-table th {
-    background: #f8fafc;
+    background: var(--bg-secondary);
     padding: 12px 16px;
     text-align: left;
     font-weight: 600;
-    color: #374151;
-    border-bottom: 1px solid #e5e7eb;
+    color: var(--text-primary);
+    border-bottom: 1px solid var(--border-color);
     font-size: 0.875rem;
 }
 
 .va-table td {
     padding: 16px;
-    border-bottom: 1px solid #f3f4f6;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-primary);
 }
 
 .va-table tr:last-child td {
@@ -1109,7 +1111,11 @@ tr[data-vaid]:hover {
 }
 
 .va-table tr:hover {
-    background: #f9fafb;
+    background: var(--color-gray-50);
+}
+
+[data-theme="dark"] .va-table tr:hover {
+    background: var(--color-gray-800);
 }
 
 .va-name {
@@ -1122,7 +1128,7 @@ tr[data-vaid]:hover {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background: #3b82f6;
+    background: var(--color-primary-light);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1139,13 +1145,13 @@ tr[data-vaid]:hover {
 
 .va-fullname {
     font-weight: 500;
-    color: #1f2937;
+    color: var(--text-primary);
     text-transform: capitalize;
 }
 
 .va-email {
     font-size: 0.875rem;
-    color: #6b7280;
+    color: var(--text-secondary);
 }
 
 .status-badge {
@@ -1159,13 +1165,18 @@ tr[data-vaid]:hover {
 }
 
 .status-badge.active {
-    background: #dcfce7;
-    color: #166534;
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--color-success);
 }
 
 .status-badge.inactive {
-    background: #f3f4f6;
-    color: #6b7280;
+    background: var(--color-gray-100);
+    color: var(--color-gray-600);
+}
+
+[data-theme="dark"] .status-badge.inactive {
+    background: var(--color-gray-700);
+    color: var(--color-gray-400);
 }
 
 .status-dot {
@@ -1175,11 +1186,11 @@ tr[data-vaid]:hover {
 }
 
 .status-dot.active {
-    background: #16a34a;
+    background: var(--color-success);
 }
 
 .status-dot.inactive {
-    background: #9ca3af;
+    background: var(--color-gray-400);
 }
 
 .activity-status {
@@ -1196,11 +1207,11 @@ tr[data-vaid]:hover {
 }
 
 .activity-dot.active {
-    background: #16a34a;
+    background: var(--color-success);
 }
 
 .activity-dot.inactive {
-    background: #9ca3af;
+    background: var(--color-gray-400);
 }
 
 @keyframes pulse {
@@ -1212,13 +1223,13 @@ tr[data-vaid]:hover {
 .no-vas-message {
     text-align: center;
     padding: 40px 20px;
-    color: #6b7280;
+    color: var(--text-secondary);
 }
 
 .no-vas-message i {
     font-size: 3rem;
     margin-bottom: 16px;
-    color: #d1d5db;
+    color: var(--color-gray-400);
 }
 
 /* Responsive Design */
@@ -1246,62 +1257,6 @@ tr[data-vaid]:hover {
     }
 }
 
-/* Dark theme support */
-[data-theme="dark"] .modal-content {
-    background: #1f2937;
-    color: #f9fafb;
-}
-
-[data-theme="dark"] .modal-header {
-    background: #374151;
-    border-bottom-color: #4b5563;
-}
-
-[data-theme="dark"] .modal-title {
-    color: #f9fafb;
-}
-
-[data-theme="dark"] .project-info-section {
-    background: #374151;
-    border-left-color: #60a5fa;
-}
-
-[data-theme="dark"] .project-info-value {
-    color: #f9fafb;
-}
-
-[data-theme="dark"] .va-section-title {
-    color: #f9fafb;
-}
-
-[data-theme="dark"] .va-table {
-    background: #374151;
-}
-
-[data-theme="dark"] .va-table th {
-    background: #4b5563;
-    color: #f9fafb;
-    border-bottom-color: #6b7280;
-}
-
-[data-theme="dark"] .va-table td {
-    border-bottom-color: #4b5563;
-    color: #f9fafb;
-}
-
-[data-theme="dark"] .va-table tr:hover {
-    background: #4b5563;
-}
-
-[data-theme="dark"] .va-fullname {
-    color: #f9fafb;
-}
-
-[data-theme="dark"] .status-badge.inactive {
-    background: #4b5563;
-    color: #d1d5db;
-}
-
 .modal-actions {
     text-align: center;
     margin-top: 20px;
@@ -1311,6 +1266,7 @@ tr[data-vaid]:hover {
     text-decoration: none;
 }
 
+/* Profile Styles */
 .profile-container {
     max-width: 1200px;
     margin: 0 auto;
@@ -1320,13 +1276,13 @@ tr[data-vaid]:hover {
 .profile-header {
     margin-bottom: 30px;
     padding-bottom: 20px;
-    border-bottom: 1px solid #e1e5e9;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .profile-title {
     font-size: 2rem;
     font-weight: 600;
-    color: #2d3748;
+    color: var(--text-primary);
     margin: 0;
 }
 
@@ -1336,11 +1292,11 @@ tr[data-vaid]:hover {
 }
 
 .profile-section {
-    background: white;
+    background: var(--bg-card);
     border-radius: 12px;
     padding: 30px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-    border: 1px solid #e1e5e9;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
 }
 
 .section-header {
@@ -1349,18 +1305,18 @@ tr[data-vaid]:hover {
     gap: 12px;
     margin-bottom: 25px;
     padding-bottom: 15px;
-    border-bottom: 1px solid #e1e5e9;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .section-icon {
     font-size: 1.5rem;
-    color: #4299e1;
+    color: var(--color-primary-light);
 }
 
 .section-title {
     font-size: 1.5rem;
     font-weight: 600;
-    color: #2d3748;
+    color: var(--text-primary);
     margin: 0;
 }
 
@@ -1378,21 +1334,32 @@ tr[data-vaid]:hover {
 
 .form-label {
     font-weight: 500;
-    color: #4a5568;
+    color: var(--text-secondary);
     font-size: 0.875rem;
 }
 
 .form-input {
     padding: 12px;
-    border: 1px solid #e1e5e9;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
     font-size: 1rem;
-    background: #f7fafc;
-    color: #4a5568;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    transition: border-color 0.2s;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--color-primary-light);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+[data-theme="dark"] .form-input:focus {
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
 }
 
 .empty-field {
-    color: #a0aec0;
+    color: var(--text-muted);
     font-style: italic;
 }
 
@@ -1402,7 +1369,7 @@ tr[data-vaid]:hover {
 }
 
 .change-password-btn {
-    background: #4299e1;
+    background: var(--color-primary-light);
     color: white;
     border: none;
     padding: 12px 24px;
@@ -1414,7 +1381,7 @@ tr[data-vaid]:hover {
 }
 
 .change-password-btn:hover {
-    background: #3182ce;
+    background: #2563eb;
 }
 
 /* Modal Styles */
@@ -1432,19 +1399,18 @@ tr[data-vaid]:hover {
     padding: 20px;
 }
 
-
 .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 24px;
-    border-bottom: 1px solid #e1e5e9;
+    border-bottom: 1px solid var(--border-color);
 }
 
 .modal-title {
     font-size: 1.5rem;
     font-weight: 600;
-    color: #2d3748;
+    color: var(--text-primary);
     margin: 0;
 }
 
@@ -1453,14 +1419,19 @@ tr[data-vaid]:hover {
     border: none;
     font-size: 1.25rem;
     cursor: pointer;
-    color: #718096;
+    color: var(--text-secondary);
     padding: 5px;
     border-radius: 4px;
+    transition: all 0.2s;
 }
 
 .modal-close:hover {
-    background: #f7fafc;
-    color: #2d3748;
+    background: var(--color-gray-100);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .modal-close:hover {
+    background: var(--color-gray-700);
 }
 
 .modal-body {
@@ -1479,36 +1450,41 @@ tr[data-vaid]:hover {
 
 .modal-form .form-label {
     font-weight: 500;
-    color: #4a5568;
+    color: var(--text-secondary);
 }
 
 .modal-form .form-input {
     padding: 12px;
-    border: 1px solid #cbd5e0;
+    border: 1px solid var(--border-color);
     border-radius: 8px;
     font-size: 1rem;
-    background: white;
+    background: var(--bg-primary);
+    color: var(--text-primary);
     transition: border-color 0.2s;
 }
 
 .modal-form .form-input:focus {
     outline: none;
-    border-color: #4299e1;
-    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
+    border-color: var(--color-primary-light);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+[data-theme="dark"] .modal-form .form-input:focus {
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
 }
 
 .modal-form .form-input.error {
-    border-color: #e53e3e;
+    border-color: var(--color-danger);
 }
 
 .error-message {
-    color: #e53e3e;
+    color: var(--color-danger);
     font-size: 0.875rem;
     margin-top: 4px;
 }
 
 .success-message {
-    color: #38a169;
+    color: var(--color-success);
     font-size: 0.875rem;
     margin-top: 4px;
 }
@@ -1519,11 +1495,11 @@ tr[data-vaid]:hover {
     justify-content: flex-end;
     margin-top: 30px;
     padding-top: 20px;
-    border-top: 1px solid #e1e5e9;
+    border-top: 1px solid var(--border-color);
 }
 
 .save-btn {
-    background: #48bb78;
+    background: var(--color-success);
     color: white;
     border: none;
     padding: 12px 24px;
@@ -1534,16 +1510,16 @@ tr[data-vaid]:hover {
 }
 
 .save-btn:hover {
-    background: #38a169;
+    background: #059669;
 }
 
 .save-btn:disabled {
-    background: #a0aec0;
+    background: var(--color-gray-400);
     cursor: not-allowed;
 }
 
 .cancel-btn {
-    background: #e53e3e;
+    background: var(--color-danger);
     color: white;
     border: none;
     padding: 12px 24px;
@@ -1554,7 +1530,7 @@ tr[data-vaid]:hover {
 }
 
 .cancel-btn:hover {
-    background: #c53030;
+    background: #dc2626;
 }
 
 /* Logout Confirmation Modal Styles */
@@ -1565,19 +1541,19 @@ tr[data-vaid]:hover {
 
 .logout-icon {
     font-size: 3rem;
-    color: #e53e3e;
+    color: var(--color-danger);
     margin-bottom: 20px;
 }
 
 .logout-title {
     font-size: 1.5rem;
     font-weight: 600;
-    color: #2d3748;
+    color: var(--text-primary);
     margin-bottom: 10px;
 }
 
 .logout-message {
-    color: #718096;
+    color: var(--text-secondary);
     font-size: 1rem;
     line-height: 1.5;
     margin-bottom: 30px;
@@ -1590,7 +1566,7 @@ tr[data-vaid]:hover {
 }
 
 .logout-confirm-btn {
-    background: #e53e3e;
+    background: var(--color-danger);
     color: white;
     border: none;
     padding: 12px 24px;
@@ -1602,11 +1578,11 @@ tr[data-vaid]:hover {
 }
 
 .logout-confirm-btn:hover {
-    background: #c53030;
+    background: #dc2626;
 }
 
 .logout-cancel-btn {
-    background: #718096;
+    background: var(--color-gray-500);
     color: white;
     border: none;
     padding: 12px 24px;
@@ -1618,7 +1594,7 @@ tr[data-vaid]:hover {
 }
 
 .logout-cancel-btn:hover {
-    background: #4a5568;
+    background: var(--color-gray-600);
 }
 
 @media (max-width: 768px) {
@@ -1633,4 +1609,69 @@ tr[data-vaid]:hover {
     .logout-actions {
         flex-direction: column;
     }
+}
+
+/* Additional Dark Mode Styles for Elements Not Covered */
+[data-theme="dark"] {
+    /* Ensure all text colors are properly set */
+    h1, h2, h3, h4, h5, h6 {
+        color: var(--text-primary);
+    }
+    
+    p, span, div {
+        color: var(--text-primary);
+    }
+    
+    /* Form elements */
+    input::placeholder,
+    textarea::placeholder {
+        color: var(--text-muted);
+    }
+    
+    /* Selection color */
+    ::selection {
+        background: rgba(59, 130, 246, 0.3);
+        color: var(--text-primary);
+    }
+    
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+        background: var(--bg-secondary);
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background: var(--color-gray-600);
+        border-radius: 4px;
+    }
+    
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--color-gray-500);
+    }
+}
+
+/* Ensure proper contrast for all interactive elements */
+[data-theme="dark"] button:not(.modal-close):not(.popup-close) {
+    color: white;
+}
+
+[data-theme="dark"] .sidebar-title {
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] .logo-container h2 {
+    color: var(--text-primary);
+}
+
+/* Loading states */
+.loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+[data-theme="dark"] .loading {
+    opacity: 0.5;
 }
\ No newline at end of file
diff --git a/public/css/va-register.css b/public/css/va-register.css
index 3acf759..279eb44 100644
--- a/public/css/va-register.css
+++ b/public/css/va-register.css
@@ -5,9 +5,52 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
 }
 
+:root {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8fafc;
+    --bg-card: #ffffff;
+    --bg-sidebar: linear-gradient(to bottom, #f4f4f5, #d0f9f9, #cac5f7);
+    --text-primary: #333333;
+    --text-secondary: #6b7280;
+    --text-muted: #9ca3af;
+    --border-color: #e5e7eb;
+    --border-dark: #374151;
+    --accent-color: #000000;
+    --accent-light: #070065;
+    --success-color: #10b981;
+    --error-color: #dc2626;
+    --warning-bg: #fff3cd;
+    --warning-border: #ffeaa7;
+    --warning-text: #856404;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] {
+    --bg-primary: #121212;
+    --bg-secondary: #1e1e1e;
+    --bg-card: #1e1e1e;
+    --bg-sidebar: linear-gradient(to bottom, #2d2d2d, #1a3a3a, #2a264d);
+    --text-primary: #f5f5f5;
+    --text-secondary: #d1d5db;
+    --text-muted: #9ca3af;
+    --border-color: #374151;
+    --border-dark: #4b5563;
+    --accent-color: #ffffff;
+    --accent-light: #6366f1;
+    --success-color: #10b981;
+    --error-color: #ef4444;
+    --warning-bg: #422006;
+    --warning-border: #854d0e;
+    --warning-text: #fef3c7;
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
 body {
-    background-color: #fff;
-    color: #333;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .container {
diff --git a/src/controllers/va/vaPayroll/vaPayrollSchedule.controller.js b/src/controllers/va/vaPayroll/vaPayrollSchedule.controller.js
index bbe879f..3edd4a3 100644
--- a/src/controllers/va/vaPayroll/vaPayrollSchedule.controller.js
+++ b/src/controllers/va/vaPayroll/vaPayrollSchedule.controller.js
@@ -17,11 +17,48 @@ async function va_payroll_schedule_function(req, res) {
         }
 
         const result = await response.json();
-        // console.log("✅ Successfully synced VA data to Salesforce:", result);
+        
+        // Get current date
+        const currentDate = new Date();
+        
+        // Sort all data by ScheduleDate in ascending order
+        const sortedData = [...result.data].sort((a, b) => {
+            return new Date(a.ScheduleDate) - new Date(b.ScheduleDate);
+        });
+        
+        // Find the index of current schedule (where current date falls between periodStart and periodEnd)
+        let currentIndex = -1;
+        for (let i = 0; i < sortedData.length; i++) {
+            const item = sortedData[i];
+            const periodStart = new Date(item.periodStart);
+            const periodEnd = new Date(item.periodEnd);
+            
+            if (currentDate >= periodStart && currentDate <= periodEnd) {
+                currentIndex = i;
+                break;
+            }
+        }
+        
+        // If no current schedule found, use the schedule that just passed or is upcoming
+        if (currentIndex === -1) {
+            // Find the first schedule where periodEnd is in future
+            currentIndex = sortedData.findIndex(item => new Date(item.periodEnd) >= currentDate);
+            
+            // If all are in past, use the last one
+            if (currentIndex === -1) {
+                currentIndex = sortedData.length - 1;
+            }
+        }
+        
+        // Calculate the start index (2nd last schedule from current)
+        const startIndex = Math.max(0, currentIndex - 2);
+        
+        // Get the filtered data from 2nd last to all future schedules
+        const filteredData = sortedData.slice(startIndex);
         
         res.status(201).json({ 
             success: true,
-            data: result.data
+            data: filteredData
         });
     } catch (error) {
         console.error("Failed to sync with Salesforce:", error.message);
diff --git a/views/va_client_register.ejs b/views/va_client_register.ejs
index e9ad8c6..3c23053 100644
--- a/views/va_client_register.ejs
+++ b/views/va_client_register.ejs
@@ -390,5 +390,19 @@
     </div>
 </div>
   <script src="/public/js/va-client-register.js"></script>
+  <script>
+    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);
+  </script>
 </body>
 </html>
diff --git a/views/va_register.ejs b/views/va_register.ejs
index 7964692..b92fd43 100644
--- a/views/va_register.ejs
+++ b/views/va_register.ejs
@@ -11,87 +11,6 @@
     select option:disabled {
         display: none;
     }
-    /* body {
-      background-color: #f8f9fa;
-      font-family: 'Segoe UI', sans-serif;
-    }
-
-    .card-registration {
-      border: none;
-      border-radius: 12px;
-      overflow: hidden;
-    }
-
-    .card-registration img {
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .card-body {
-      padding: 3rem !important;
-    }
-
-    h3 {
-      font-weight: 600;
-      color: #343a40;
-      margin-bottom: 2rem;
-    }
-
-    .form-outline {
-      position: relative;
-    }
-
-    .form-control-lg {
-      border-radius: 8px;
-      padding: 0.75rem 1rem;
-      font-size: 1rem;
-    }
-
-    .form-label {
-      font-weight: 500;
-      color: #495057;
-      margin-bottom: 0.5rem;
-    }
-
-    .btn-lg {
-      border-radius: 8px;
-      padding: 0.7rem 2rem;
-      font-size: 1rem;
-    }
-
-    .btn-warning {
-      background-color: #ffc107;
-      border: none;
-      font-weight: 600;
-    }
-
-    .btn-warning:hover {
-      background-color: #e0a800;
-    }
-
-    .btn-light {
-      border: 1px solid #ccc;
-      font-weight: 500;
-    }
-
-    h5 {
-      font-weight: 600;
-      color: #495057;
-      border-bottom: 2px solid #ffc107;
-      display: inline-block;
-      padding-bottom: 0.25rem;
-      margin-top: 2rem;
-    }
-
-    @media (max-width: 991px) {
-      .card-body {
-        padding: 2rem !important;
-      }
-
-      .card-registration img {
-        display: none;
-      }
-    } */
   </style>
 </head>
 
@@ -407,5 +326,19 @@
       </div>
   </div>
   <script src="/public/js/va-register.js"></script>
+  <script>
+    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);
+  </script>
 </body>
 </html>