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

frontend/src/components/admin/ClassStudentManager.jsx

@@ -1,6 +1,7 @@
 // frontend/src/components/admin/ClassStudentManager.jsx
 import React, { useState, useMemo, useRef, useEffect } from "react";
-import { Users2, X, ChevronDown, Search } from "lucide-react";
+import { Link } from "react-router-dom";
+import { Users2, X, ChevronDown, Search, User } from "lucide-react";
 import client from "../../api/client";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 
@@ -300,31 +301,55 @@ export default function ClassStudentManager({ classData, onClose }) {
         ) : (
           <div className="border-t border-stone-100 pt-4">
             <div className="space-y-2">
-              {enrolledStudents.map((enrollment) => (
-                <div
-                  key={enrollment.id}
-                  className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-stone-50"
-                >
-                  <div>
-                    <div className="font-medium text-stone-900 text-sm">
-                      {enrollment.student_name || enrollment.student_email || "Unknown Student"}
-                    </div>
-                    {enrollment.student_email && enrollment.student_name && (
-                      <div className="text-xs text-stone-500">
-                        {enrollment.student_email}
+              {enrolledStudents.map((enrollment) => {
+                // Try to find the student by student_id or by matching email/name
+                const student = enrollment.student_id
+                  ? students.find((s) => s.id === enrollment.student_id)
+                  : students.find(
+                      (s) =>
+                        s.membership_email === enrollment.student_email ||
+                        `${s.first_name} ${s.last_name}` === enrollment.student_name
+                    );
+                const studentId = student?.id || enrollment.student_id;
+
+                return (
+                  <div
+                    key={enrollment.id}
+                    className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-stone-50"
+                  >
+                    <div className="flex items-center gap-2 flex-1">
+                      <div className="flex-1">
+                        <div className="font-medium text-stone-900 text-sm">
+                          {enrollment.student_name || enrollment.student_email || "Unknown Student"}
+                        </div>
+                        {enrollment.student_email && enrollment.student_name && (
+                          <div className="text-xs text-stone-500">
+                            {enrollment.student_email}
+                          </div>
+                        )}
                       </div>
-                    )}
+                      {studentId && (
+                        <Link
+                          to={`/admin/students/${studentId}`}
+                          className="p-1 text-stone-600 hover:text-stone-900"
+                          title="View Profile"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <User className="w-4 h-4" />
+                        </Link>
+                      )}
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => removeMutation.mutate(enrollment.id)}
+                      disabled={removeMutation.isPending}
+                      className="text-xs font-medium text-red-600 hover:text-red-700 disabled:opacity-50 ml-2"
+                    >
+                      Remove
+                    </button>
                   </div>
-                  <button
-                    type="button"
-                    onClick={() => removeMutation.mutate(enrollment.id)}
-                    disabled={removeMutation.isPending}
-                    className="text-xs font-medium text-red-600 hover:text-red-700 disabled:opacity-50"
-                  >
-                    Remove
-                  </button>
-                </div>
-              ))}
+                );
+              })}
             </div>
           </div>
         )}