Filtered out the fields from the UserCard in the list wouldn't have anything to display

src/pages/(admin)/Lists/UserList.tsx

@@ -787,35 +787,44 @@ export default function UserList({
     document.body.removeChild(element);
   };
 
-  return (
-	<>
-	{renderHeader && renderHeader(displayUsers.length)}
-    <div className="w-full">
-      <Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
-        <>
-          {selectedUser && (
-            <div className="w-full flex flex-col gap-8">
-              <UserCard
-                loggedInUser={user}
-                onViewStudents={
-                  selectedUser.type === "corporate" ||
-                  selectedUser.type === "teacher"
-                    ? () => {
-                        appendUserFilters({
-                          id: "view-students",
-                          filter: (x: User) => x.type === "student",
-                        });
-                        appendUserFilters({
-                          id: "belongs-to-admin",
-                          filter: (x: User) =>
-                            groups
+  const viewStudentFilter = (x: User) => x.type === "student";
+  const viewTeacherFilter = (x: User) => x.type === "teacher";
+  const belongsToAdminFilter = (x: User) => {
+    if (!selectedUser) return false;
+    return groups
       .filter(
         (g) =>
           g.admin === selectedUser.id ||
           g.participants.includes(selectedUser.id)
       )
       .flatMap((g) => g.participants)
-                              .includes(x.id),
+      .includes(x.id);
+  };
+
+  const viewStudentFilterBelongsToAdmin = (x: User) =>
+    x.type === "student" && belongsToAdminFilter(x);
+  const viewTeacherFilterBelongsToAdmin = (x: User) =>
+    x.type === "teacher" && belongsToAdminFilter(x);
+
+  const renderUserCard = (selectedUser: User) => {
+    const studentsFromAdmin = users.filter(viewStudentFilterBelongsToAdmin);
+    const teachersFromAdmin = users.filter(viewTeacherFilterBelongsToAdmin);
+    return (
+      <div className="w-full flex flex-col gap-8">
+        <UserCard
+          loggedInUser={user}
+          onViewStudents={
+            (selectedUser.type === "corporate" ||
+              selectedUser.type === "teacher") &&
+            studentsFromAdmin.length > 0
+              ? () => {
+                  appendUserFilters({
+                    id: "view-students",
+                    filter: viewStudentFilter,
+                  });
+                  appendUserFilters({
+                    id: "belongs-to-admin",
+                    filter: belongsToAdminFilter,
                   });
 
                   router.push("/list/users");
@@ -823,24 +832,17 @@ export default function UserList({
               : undefined
           }
           onViewTeachers={
-                  selectedUser.type === "corporate" ||
-                  selectedUser.type === "student"
+            (selectedUser.type === "corporate" ||
+              selectedUser.type === "student") &&
+            teachersFromAdmin.length > 0
               ? () => {
                   appendUserFilters({
                     id: "view-teachers",
-                          filter: (x: User) => x.type === "teacher",
+                    filter: viewTeacherFilter,
                   });
                   appendUserFilters({
                     id: "belongs-to-admin",
-                          filter: (x: User) =>
-                            groups
-                              .filter(
-                                (g) =>
-                                  g.admin === selectedUser.id ||
-                                  g.participants.includes(selectedUser.id)
-                              )
-                              .flatMap((g) => g.participants)
-                              .includes(x.id),
+                    filter: belongsToAdminFilter,
                   });
 
                   router.push("/list/users");
@@ -848,8 +850,7 @@ export default function UserList({
               : undefined
           }
           onViewCorporate={
-                  selectedUser.type === "teacher" ||
-                  selectedUser.type === "student"
+            selectedUser.type === "teacher" || selectedUser.type === "student"
               ? () => {
                   appendUserFilters({
                     id: "view-corporate",
@@ -859,9 +860,7 @@ export default function UserList({
                     id: "belongs-to-admin",
                     filter: (x: User) =>
                       groups
-                              .filter((g) =>
-                                g.participants.includes(selectedUser.id)
-                              )
+                        .filter((g) => g.participants.includes(selectedUser.id))
                         .flatMap((g) => [g.admin, ...g.participants])
                         .includes(x.id),
                   });
@@ -877,8 +876,18 @@ export default function UserList({
           user={selectedUser}
         />
       </div>
-          )}
-        </>
+    );
+  };
+
+  return (
+    <>
+      {renderHeader && renderHeader(displayUsers.length)}
+      <div className="w-full">
+        <Modal
+          isOpen={!!selectedUser}
+          onClose={() => setSelectedUser(undefined)}
+        >
+          {selectedUser && renderUserCard(selectedUser)}
         </Modal>
         <div className="w-full flex flex-col gap-2">
           <div className="w-full flex gap-2 items-end">
@@ -916,7 +925,10 @@ export default function UserList({
                 >
                   {row.getVisibleCells().map((cell) => (
                     <td className="px-4 py-2 items-center w-fit" key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </td>
                   ))}
                 </tr>