select the time rracking to view

index.html

@@ -373,9 +373,10 @@
                 if (user.role === 'admin') {
                     window.location.href = "admin-dashboard.html";
                 } else {
-                    window.location.href = "time-tracking.html";
+                    // Redirect to time tracking page by default
+                    window.location.href = "time-tracking.html"; 
                 }
-            } else {
+} else {
                 alert('Invalid email or password');
             }
         });

time-tracking.html

@@ -121,8 +121,8 @@
                 </div>
                 
                 <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead class="bg-gray-50">
+                    <table class="min-w-full divide-y divide-gray-200" id="timeHistoryTable">
+<thead class="bg-gray-50">
                             <tr>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clock In</th>
@@ -130,29 +130,110 @@
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Hours</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Break Time</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
-                            <tr>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">Mon, Jun 12</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9:00 AM</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5:30 PM</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8.5</td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0:45</td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Complete</span>
-                                </td>
-                            </tr>
-                            <!-- More rows would go here -->
-                        </tbody>
+                        <tbody class="bg-white divide-y divide-gray-200" id="timeHistoryBody">
+                            <!-- Sample data rows will be populated by JavaScript -->
+</tbody>
                     </table>
                 </div>
             </div>
         </div>
     </div>
-
     <script>
         feather.replace();
+        
+        // Sample time tracking data
+        const timeEntries = [
+            {
+                date: 'Mon, Jun 12',
+                clockIn: '9:00 AM',
+                clockOut: '5:30 PM',
+                totalHours: '8.5',
+                breakTime: '0:45',
+                status: 'Complete'
+            },
+            {
+                date: 'Tue, Jun 13', 
+                clockIn: '8:45 AM',
+                clockOut: '5:15 PM',
+                totalHours: '8.5',
+                breakTime: '1:00',
+                status: 'Complete'
+            },
+            {
+                date: 'Wed, Jun 14',
+                clockIn: '9:15 AM',
+                clockOut: '5:45 PM',
+                totalHours: '8.5',
+                breakTime: '0:45',
+                status: 'Complete'
+            },
+            {
+                date: 'Thu, Jun 15',
+                clockIn: '9:00 AM',
+                clockOut: '-',
+                totalHours: '-',
+                breakTime: '-',
+                status: 'In Progress'
+            }
+        ];
+
+        // Populate time history table
+        const timeHistoryBody = document.getElementById('timeHistoryBody');
+        
+        timeEntries.forEach(entry => {
+            const row = document.createElement('tr');
+            
+            // Status badge color
+            let statusClass = '';
+            if (entry.status === 'Complete') {
+                statusClass = 'bg-green-100 text-green-800';
+            } else if (entry.status === 'In Progress') {
+                statusClass = 'bg-blue-100 text-blue-800';
+            } else if (entry.status === 'Pending') {
+                statusClass = 'bg-yellow-100 text-yellow-800';
+            }
+            
+            row.innerHTML = `
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">${entry.date}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${entry.clockIn}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${entry.clockOut}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${entry.totalHours}</td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${entry.breakTime}</td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">${entry.status}</span>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                    <button class="text-primary hover:text-primary-dark">Edit</button>
+                </td>
+            `;
+            
+            timeHistoryBody.appendChild(row);
+        });
+
+        // Clock In/Out functionality
+        const clockInBtn = document.querySelector('.bg-primary');
+        const clockOutBtn = document.querySelector('.bg-gray-200');
+        const breakStartBtn = document.querySelector('.bg-secondary');
+        const breakEndBtn = document.querySelector('.bg-gray-200 + .bg-gray-200');
+
+        clockInBtn.addEventListener('click', () => {
+            alert('Clocked in at ' + new Date().toLocaleTimeString());
+        });
+
+        clockOutBtn.addEventListener('click', () => {
+            alert('Clocked out at ' + new Date().toLocaleTimeString());
+        });
+
+        breakStartBtn.addEventListener('click', () => {
+            alert('Break started at ' + new Date().toLocaleTimeString());
+        });
+
+        breakEndBtn.addEventListener('click', () => {
+            alert('Break ended at ' + new Date().toLocaleTimeString());
+        });
     </script>
 </body>
 </html>