when click pending request its not working resolved the contain sections - Follow Up Deployment

index.html

@@ -174,7 +174,7 @@
                             </div>
                         </div>
                         <div class="mt-4">
-                            <a href="#" class="text-blue-600 text-sm font-medium hover:underline">View requests</a>
+                            <a href="#pending" class="text-blue-600 text-sm font-medium hover:underline">View requests</a>
                         </div>
                     </div>
                     <div class="bg-white rounded-lg shadow p-6">
@@ -537,9 +537,87 @@
             requestLeaveLink: 'Request Leave',
             leaveHistoryLink: 'Leave History', 
             reportsLink: 'Reports',
-            settingsLink: 'Settings'
+            settingsLink: 'Settings',
+            pendingRequestsLink: 'Pending Requests'
         };
 
+        // Add click handler for pending requests link
+        document.querySelector('a[href="#pending"]').addEventListener('click', function(e) {
+            e.preventDefault();
+            document.querySelector('h1').textContent = 'Pending Requests';
+            document.querySelector('main').innerHTML = `
+                <div class="p-6">
+                    <h2 class="text-lg font-semibold text-gray-800 mb-4">Pending Leave Requests</h2>
+                    <div class="bg-white rounded-lg shadow overflow-hidden">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <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">Type</th>
+                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dates</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">
+                                        <div class="flex items-center">
+                                            <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center">
+                                                <i class="fas fa-clock text-yellow-600"></i>
+                                            </div>
+                                            <div class="ml-4">
+                                                <div class="text-sm font-medium text-gray-900">Annual Leave</div>
+                                                <div class="text-sm text-gray-500">Vacation</div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap">
+                                        <div class="text-sm text-gray-900">Jun 20 - Jun 22</div>
+                                        <div class="text-sm text-gray-500">2023</div>
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap">
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
+                                            Pending
+                                        </span>
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                        <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
+                                        <button class="text-red-600 hover:text-red-900">Cancel</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td class="px-6 py-4 whitespace-nowrap">
+                                        <div class="flex items-center">
+                                            <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center">
+                                                <i class="fas fa-clock text-yellow-600"></i>
+                                            </div>
+                                            <div class="ml-4">
+                                                <div class="text-sm font-medium text-gray-900">Sick Leave</div>
+                                                <div class="text-sm text-gray-500">Medical</div>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap">
+                                        <div class="text-sm text-gray-900">Jun 25 - Jun 26</div>
+                                        <div class="text-sm text-gray-500">2023</div>
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap">
+                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
+                                            Pending
+                                        </span>
+                                    </td>
+                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                        <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button>
+                                        <button class="text-red-600 hover:text-red-900">Cancel</button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            `;
+        });
+
         Object.keys(navLinks).forEach(linkId => {
             document.getElementById(linkId).addEventListener('click', function(e) {
                 e.preventDefault();