Add search functionality to admin and student pages

public/admin-reservations.html

@@ -44,6 +44,18 @@
                 <h5 class="mb-0">Filter Reservations</h5>
             </div>
             <div class="card-body">
+                <div class="row g-3 mb-3">
+                    <div class="col-md-12">
+                        <label for="searchInput" class="form-label">Search</label>
+                        <div class="input-group">
+                            <span class="input-group-text"><i class="bi bi-search"></i></span>
+                            <input type="text" class="form-control" id="searchInput" placeholder="Search by student name, item name, or location...">
+                            <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
+                                <i class="bi bi-x-lg"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
                 <div class="row g-3 mb-3">
                     <div class="col-md-6">
                         <label for="locationFilter" class="form-label">Location</label>

public/admin.html

@@ -56,6 +56,19 @@
                     </div>
                 </div>
                 
+                <!-- Search Bar -->
+                <div class="row mb-4">
+                    <div class="col-md-6">
+                        <div class="input-group">
+                            <span class="input-group-text"><i class="bi bi-search"></i></span>
+                            <input type="text" class="form-control" id="searchInput" placeholder="Search items by name, description, or location...">
+                            <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
+                                <i class="bi bi-x-lg"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                
                 <div id="itemsGrid" class="row g-4">
                     <!-- Grid items will be populated dynamically -->
                 </div>

public/js/admin-reservations.js

@@ -46,11 +46,16 @@ async function loadReservations() {
 function filterAndDisplayReservations() {
     const locationFilter = document.getElementById('locationFilter').value;
     const statusFilter = document.getElementById('statusFilter').value;
+    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
 
     const filteredReservations = reservations.filter(reservation => {
         const locationMatch = locationFilter === 'all' || reservation.location === locationFilter;
         const statusMatch = statusFilter === 'all' || reservation.status === statusFilter;
-        return locationMatch && statusMatch;
+        const searchMatch = searchTerm === '' || 
+            reservation.studentName.toLowerCase().includes(searchTerm) ||
+            reservation.itemName.toLowerCase().includes(searchTerm) ||
+            reservation.location.toLowerCase().includes(searchTerm);
+        return locationMatch && statusMatch && searchMatch;
     });
 
     const reservationsList = document.getElementById('reservationsList');
@@ -190,6 +195,23 @@ function setupEventListeners() {
         localStorage.clear();
         window.location.href = '/index.html';
     });
+
+    // Search functionality
+    const searchInput = document.getElementById('searchInput');
+    const clearSearch = document.getElementById('clearSearch');
+    
+    searchInput.addEventListener('input', filterAndDisplayReservations);
+    searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            filterAndDisplayReservations();
+        }
+    });
+    
+    clearSearch.addEventListener('click', () => {
+        searchInput.value = '';
+        filterAndDisplayReservations();
+        searchInput.focus();
+    });
 }
 
 // Auto refresh functionality

public/js/admin.js

@@ -59,6 +59,22 @@ async function loadItems() {
     }
 }
 
+// Filter items based on search term
+function getFilteredItems() {
+    const searchTerm = document.getElementById('searchInput') ? 
+        document.getElementById('searchInput').value.toLowerCase() : '';
+    
+    if (searchTerm.trim() === '') {
+        return items;
+    }
+    
+    return items.filter(item => 
+        item.name.toLowerCase().includes(searchTerm) || 
+        (item.description && item.description.toLowerCase().includes(searchTerm)) ||
+        item.location.toLowerCase().includes(searchTerm)
+    );
+}
+
 // Display items based on current view mode
 function displayItems() {
     if (currentView === 'grid') {
@@ -74,7 +90,8 @@ function displayGridView() {
     document.getElementById('itemsList').classList.add('d-none');
     itemsGrid.classList.remove('d-none');
 
-    itemsGrid.innerHTML = items.map(item => `
+    const filteredItems = getFilteredItems();
+    itemsGrid.innerHTML = filteredItems.map(item => `
         <div class="col-md-4 col-lg-3">
             <div class="card item-card">
                 <img src="${item.imageUrl || '/images/default-item.png'}" class="item-image" alt="${item.name}">
@@ -102,7 +119,8 @@ function displayListView() {
     itemsList.classList.remove('d-none');
 
     const itemsListBody = document.getElementById('itemsListBody');
-    itemsListBody.innerHTML = items.map(item => `
+    const filteredItems = getFilteredItems();
+    itemsListBody.innerHTML = filteredItems.map(item => `
         <tr>
             <td><img src="${item.imageUrl || '/images/default-item.png'}" class="item-thumbnail" alt="${item.name}"></td>
             <td>${item.name}</td>
@@ -373,6 +391,29 @@ function setupEventListeners() {
         });
     }
 
+    // Search functionality
+    const searchInput = document.getElementById('searchInput');
+    const clearSearch = document.getElementById('clearSearch');
+    
+    if (searchInput) {
+        searchInput.addEventListener('input', displayItems);
+        searchInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                displayItems();
+            }
+        });
+    }
+    
+    if (clearSearch) {
+        clearSearch.addEventListener('click', () => {
+            if (searchInput) {
+                searchInput.value = '';
+                displayItems();
+                searchInput.focus();
+            }
+        });
+    }
+
     // Edit form elements
     const editItemImage = document.getElementById('editItemImage');
     if (editItemImage) {

public/js/student-reservations.js

@@ -62,11 +62,15 @@ async function loadReservations() {
 function filterAndDisplayReservations() {
     const locationFilter = document.getElementById('locationFilter').value;
     const statusFilter = document.getElementById('statusFilter').value;
+    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
 
     const filteredReservations = reservations.filter(reservation => {
         const locationMatch = locationFilter === 'all' || reservation.location === locationFilter;
         const statusMatch = statusFilter === 'all' || reservation.status === statusFilter;
-        return locationMatch && statusMatch;
+        const searchMatch = searchTerm === '' || 
+            reservation.itemName.toLowerCase().includes(searchTerm) ||
+            reservation.location.toLowerCase().includes(searchTerm);
+        return locationMatch && statusMatch && searchMatch;
     });
 
     const reservationsList = document.getElementById('reservationsList');
@@ -171,6 +175,23 @@ function setupEventListeners() {
         localStorage.clear();
         window.location.href = '/index.html';
     });
+
+    // Search functionality
+    const searchInput = document.getElementById('searchInput');
+    const clearSearch = document.getElementById('clearSearch');
+    
+    searchInput.addEventListener('input', filterAndDisplayReservations);
+    searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            filterAndDisplayReservations();
+        }
+    });
+    
+    clearSearch.addEventListener('click', () => {
+        searchInput.value = '';
+        filterAndDisplayReservations();
+        searchInput.focus();
+    });
 }
 
 // Auto refresh functionality

public/js/student.js

@@ -103,9 +103,22 @@ let currentViewMode = localStorage.getItem('studentViewMode') || 'grid';
 // Display items based on current view mode
 function displayItems() {
     const locationFilter = document.getElementById('locationFilter').value;
-    const filteredItems = locationFilter === 'all' 
+    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-        ? items 
+    
-        : items.filter(item => item.location === locationFilter);
+    let filteredItems = items;
+    
+    // Apply location filter
+    if (locationFilter !== 'all') {
+        filteredItems = filteredItems.filter(item => item.location === locationFilter);
+    }
+    
+    // Apply search filter
+    if (searchTerm.trim() !== '') {
+        filteredItems = filteredItems.filter(item => 
+            item.name.toLowerCase().includes(searchTerm) || 
+            (item.description && item.description.toLowerCase().includes(searchTerm))
+        );
+    }
 
     // Update view mode buttons active state
     const viewButtons = document.querySelectorAll('.view-mode-btn');
@@ -231,6 +244,23 @@ function setupEventListeners() {
         window.location.href = '/index.html';
     });
     
+    // Search functionality
+    const searchInput = document.getElementById('searchInput');
+    const clearSearch = document.getElementById('clearSearch');
+    
+    searchInput.addEventListener('input', displayItems);
+    searchInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            displayItems();
+        }
+    });
+    
+    clearSearch.addEventListener('click', () => {
+        searchInput.value = '';
+        displayItems();
+        searchInput.focus();
+    });
+    
     // View mode toggle listeners
     document.querySelectorAll('.view-mode-btn').forEach(btn => {
         btn.addEventListener('click', () => switchViewMode(btn.getAttribute('data-mode')));

public/student-reservations.html

@@ -63,6 +63,18 @@
                         </select>
                     </div>
                 </div>
+                <div class="row g-3 mb-3">
+                    <div class="col-md-12">
+                        <label for="searchInput" class="form-label">Search</label>
+                        <div class="input-group">
+                            <span class="input-group-text"><i class="bi bi-search"></i></span>
+                            <input type="text" class="form-control" id="searchInput" placeholder="Search by item name or location...">
+                            <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
+                                <i class="bi bi-x-lg"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
                 <div class="table-responsive">
                     <table class="table table-striped student-reservations-table mb-0">
                         <thead class="table-dark">

public/student.html

@@ -38,6 +38,15 @@
             <div class="col-auto">
                 <h2>Available Items</h2>
             </div>
+            <div class="col-md-4">
+                <div class="input-group">
+                    <span class="input-group-text"><i class="bi bi-search"></i></span>
+                    <input type="text" class="form-control" id="searchInput" placeholder="Search items by name or description...">
+                    <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
+                        <i class="bi bi-x-lg"></i>
+                    </button>
+                </div>
+            </div>
             <div class="col-auto ms-auto">
                 <select class="form-select me-2" id="locationFilter">
                     <option value="all">All Locations</option>