AdminFacultyPage- added dropdown for course input, display course name instead of ID,

client/src/Pages/AdminFacultyPage.jsx

@@ -18,10 +18,12 @@ export const AdminFacultyPage = () => {
     program: '',
     courses: [''],
   });
+  const [courses, setcourses] = useState({});
 
   //  Fetch all faculties
   useEffect(() => {
     fetchFaculties();
+    fetchCourses();
   }, []);
 
   const fetchFaculties = async () => {
@@ -29,6 +31,19 @@ export const AdminFacultyPage = () => {
     setFaculties(res.data);
   };
 
+  const fetchCourses = async () => {
+    try {
+      const res = await axios.get("http://localhost:8080/api/courses");
+      const courseMap = res.data.reduce((acc, course) => {
+        acc[course.courseId] = course.name;
+        return acc;
+      }, {});
+      setcourses(courseMap);
+    } catch (error) {
+      console.error("Error fetching courses: ", error);
+    }
+  };
+
   //  Add or Update Faculty
   const handleAddOrUpdateFaculty = async (e) => {
     e.preventDefault();
@@ -180,7 +195,6 @@ export const AdminFacultyPage = () => {
                 style={inputStyle}
               />
               <input
-
                 placeholder="Department"
                 value={currentFaculty.department}
                 onChange={(e) => setCurrentFaculty({ ...currentFaculty, department: e.target.value })}
@@ -197,16 +211,23 @@ export const AdminFacultyPage = () => {
               />
             </div>
 
-            <h4 style={subHeadingStyle}>Courses:</h4>
+            
             {currentFaculty.courses.map((course, index) => (
               <div key={index} style={courseContainerStyle}>
-                <input
 
-                  placeholder="Course Name"
+                <select
                   value={course}
                   onChange={(e) => handleCourseChange(index, e.target.value)}
                   style={{ ...inputStyle, flex: 1 }}
-                />
+                >
+                  <option value="">Select Course</option>
+                  {Object.entries(courses).map(([courseId, courseName]) => (
+                    <option key={courseId} value={courseId}>
+                      {courseName}
+                    </option>
+                  ))}
+                </select>
+
                 <button type="button" onClick={() => handleRemoveCourse(index)} style={removeButtonStyle}>❌</button>
               </div>
             ))}
@@ -239,13 +260,23 @@ export const AdminFacultyPage = () => {
           {filteredFaculties.length > 0 ? (
             filteredFaculties.map((f) => (
               <tr key={f._id}>
-                <td>{f.facultyId}</td>
-                <td>{f.name}</td>
-                <td>{f.email}</td>
-                <td>{f.department}</td>
-                <td>{f.program}</td>
-                <td>{f.courses.join(', ')}</td>
-                <td>
+                <td style={tdStyle}>{f.facultyId}</td>
+                <td style={{
+                  maxWidth: '150px',
+                  wordWrap: 'break-word',
+                  whiteSpace: 'normal'
+                }}>{f.name}</td>
+                <td style={tdStyle}>{f.email}</td>
+                <td style={tdStyle}>{f.department}</td>
+                <td style={tdStyle}>{f.program}</td>
+                <td style={tdStyle}><ul style={{ padding: 0, margin: 0, listStyleType: 'none' }}>
+                  {f.courses.map((courseId, index) => (
+                    <li key={index} style={{ marginBottom: '5px' }}>
+                      {courses[courseId] || courseId}
+                    </li>
+                  ))}
+                </ul></td>
+                <td style={tdStyle}>
                   <button style={{
                     backgroundColor: '#4CAF50',
                     color: 'white',
@@ -288,13 +319,18 @@ export const AdminFacultyPage = () => {
   );
 };
 
-
 const tableStyle = {
   width: '100%',
   borderCollapse: 'collapse',
   marginTop: '20px',
 };
 
+const tdStyle = {
+  maxWidth: '350px',
+  wordWrap: 'break-word',
+  whiteSpace: 'normal'
+}
+
 const formStyle = {
   backgroundColor: '#f9f9f9',
   padding: '20px',