Update frontend/src/components/admin/ClassStudentManager.jsx

frontend/src/components/admin/ClassStudentManager.jsx

@@ -1,6 +1,6 @@
 // frontend/src/components/admin/ClassStudentManager.jsx
-import React, { useState, useMemo } from "react";
-import { Users2, X } from "lucide-react";
+import React, { useState, useMemo, useRef, useEffect } from "react";
+import { Users2, X, ChevronDown, Search } from "lucide-react";
 import client from "../../api/client";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 
@@ -41,6 +41,11 @@ export default function ClassStudentManager({ classData, onClose }) {
   });
 
   const [selectedStudentId, setSelectedStudentId] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const dropdownRef = useRef(null);
+  const inputRef = useRef(null);
 
   const availableStudents = useMemo(() => {
     const enrolledStudentIds = new Set(
@@ -64,13 +69,94 @@ export default function ClassStudentManager({ classData, onClose }) {
     });
   }, [students, enrollments]);
 
+  // Filter students based on search query
+  const filteredStudents = useMemo(() => {
+    if (!searchQuery.trim()) return availableStudents;
+    const query = searchQuery.toLowerCase();
+    return availableStudents.filter((student) => {
+      const fullName = `${student.first_name} ${student.last_name}`.toLowerCase();
+      const email = (student.membership_email || "").toLowerCase();
+      const planName = (student.membership_plan_name || "").toLowerCase();
+      return (
+        fullName.includes(query) ||
+        email.includes(query) ||
+        planName.includes(query) ||
+        (student.gender && student.gender.toLowerCase().includes(query))
+      );
+    });
+  }, [availableStudents, searchQuery]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsDropdownOpen(false);
+        setHighlightedIndex(-1);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  // Handle keyboard navigation
+  const handleKeyDown = (e) => {
+    if (!isDropdownOpen && (e.key === "ArrowDown" || e.key === "Enter")) {
+      setIsDropdownOpen(true);
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedIndex((prev) =>
+        prev < filteredStudents.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : -1));
+    } else if (e.key === "Enter" && highlightedIndex >= 0) {
+      e.preventDefault();
+      const student = filteredStudents[highlightedIndex];
+      if (student) {
+        handleSelectStudent(student);
+      }
+    } else if (e.key === "Escape") {
+      setIsDropdownOpen(false);
+      setHighlightedIndex(-1);
+    }
+  };
+
+  const handleSelectStudent = (student) => {
+    setSelectedStudentId(student.id.toString());
+    setSearchQuery(`${student.first_name} ${student.last_name}`);
+    setIsDropdownOpen(false);
+    setHighlightedIndex(-1);
+  };
+
+  const handleInputChange = (e) => {
+    setSearchQuery(e.target.value);
+    setIsDropdownOpen(true);
+    setHighlightedIndex(-1);
+    if (!e.target.value) {
+      setSelectedStudentId("");
+    }
+  };
+
+  const handleInputFocus = () => {
+    setIsDropdownOpen(true);
+  };
+
   const enrollMutation = useMutation({
     // POST /api/admin/classes/{class_id}/enroll
     mutationFn: (payload) =>
       client.post(`/admin/classes/${classId}/enroll`, payload),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["class-enrollments", classId] });
-      setSelectedEmail("");
+      setSelectedStudentId("");
+      setSearchQuery("");
+      setIsDropdownOpen(false);
     },
   });
 
@@ -94,7 +180,7 @@ export default function ClassStudentManager({ classData, onClose }) {
     enrollMutation.mutate({
       student_id: student.id,
       student_email: student.membership_email || "",
-      student_name: student.name,
+      student_name: `${student.first_name} ${student.last_name}`,
     });
   };
 
@@ -128,22 +214,69 @@ export default function ClassStudentManager({ classData, onClose }) {
       <div className="px-4 sm:px-6 py-4 space-y-4">
         {/* Add student row */}
         <div className="flex flex-wrap gap-3 items-center">
-          <select
-            className="flex-1 min-w-[220px] rounded-lg border border-stone-200 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500"
-            value={selectedStudentId}
-            onChange={(e) => setSelectedStudentId(e.target.value)}
-            disabled={isLoadingStudents || enrollMutation.isPending}
-          >
-            <option value="">Select a student to add...</option>
-            {availableStudents.map((student) => (
-              <option key={student.id} value={student.id}>
-                {student.first_name} {student.last_name}
-                {student.gender ? ` (${student.gender})` : ""}
-                {student.membership_plan_name ? ` - ${student.membership_plan_name}` : ""}
-                {student.membership_email ? ` [${student.membership_email}]` : ""}
-              </option>
-            ))}
-          </select>
+          <div className="flex-1 min-w-[220px] relative" ref={dropdownRef}>
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-stone-400 pointer-events-none" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={searchQuery}
+                onChange={handleInputChange}
+                onFocus={handleInputFocus}
+                onKeyDown={handleKeyDown}
+                placeholder="Search and select a student to add..."
+                disabled={isLoadingStudents || enrollMutation.isPending}
+                className="w-full pl-9 pr-10 py-2 rounded-lg border border-stone-200 text-sm focus:outline-none focus:ring-1 focus:ring-red-500 focus:border-red-500 disabled:opacity-50 disabled:cursor-not-allowed"
+              />
+              <ChevronDown
+                className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-stone-400 pointer-events-none transition-transform ${
+                  isDropdownOpen ? "rotate-180" : ""
+                }`}
+              />
+            </div>
+
+            {/* Dropdown list */}
+            {isDropdownOpen && filteredStudents.length > 0 && (
+              <div className="absolute z-50 w-full mt-1 bg-white border border-stone-200 rounded-lg shadow-lg max-h-60 overflow-auto">
+                {filteredStudents.map((student, index) => {
+                  const fullName = `${student.first_name} ${student.last_name}`;
+                  const isHighlighted = index === highlightedIndex;
+                  return (
+                    <button
+                      key={student.id}
+                      type="button"
+                      onClick={() => handleSelectStudent(student)}
+                      onMouseEnter={() => setHighlightedIndex(index)}
+                      className={`w-full text-left px-3 py-2 text-sm hover:bg-stone-50 transition-colors ${
+                        isHighlighted ? "bg-stone-100" : ""
+                      }`}
+                    >
+                      <div className="font-medium text-stone-900">{fullName}</div>
+                      <div className="text-xs text-stone-500 mt-0.5">
+                        {student.gender && `${student.gender} • `}
+                        {student.membership_plan_name && `${student.membership_plan_name} • `}
+                        {student.membership_email}
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+
+            {/* No results message */}
+            {isDropdownOpen && searchQuery && filteredStudents.length === 0 && (
+              <div className="absolute z-50 w-full mt-1 bg-white border border-stone-200 rounded-lg shadow-lg px-3 py-2 text-sm text-stone-500">
+                No students found matching "{searchQuery}"
+              </div>
+            )}
+
+            {/* Empty state */}
+            {isDropdownOpen && !searchQuery && availableStudents.length === 0 && (
+              <div className="absolute z-50 w-full mt-1 bg-white border border-stone-200 rounded-lg shadow-lg px-3 py-2 text-sm text-stone-500">
+                No available students to add
+              </div>
+            )}
+          </div>
           <button
             type="button"
             onClick={handleAddStudent}