Added dark mode support in dashboard, updated payroll API

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 {

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);

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>

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>