Improved the overall code itself

src/dashboards/Owner.tsx

@@ -40,7 +40,17 @@ export default function OwnerDashboard({user}: Props) {
 		</div>
 	);
 
-	const StudentsList = () => (
+	const StudentsList = () => {
+		const filter = (x: User) =>
+			x.type === "student" &&
+			(!!selectedUser
+				? groups
+						.filter((g) => g.admin === selectedUser.id)
+						.flatMap((g) => g.participants)
+						.includes(x.id) || false
+				: true);
+
+		return (
 			<>
 				<div className="flex flex-col gap-4">
 					<div
@@ -49,40 +59,25 @@ export default function OwnerDashboard({user}: Props) {
 						<BsArrowLeft className="text-xl" />
 						<span>Back</span>
 					</div>
-				<h2 className="text-2xl font-semibold">
+					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
-					Students (
-					{
-						users.filter(
-							(x) =>
-								x.type === "student" &&
-								(!!selectedUser
-									? groups
-											.filter((g) => g.admin === selectedUser.id)
-											.flatMap((g) => g.participants)
-											.includes(x.id) || false
-									: true),
-						).length
-					}
-					)
-				</h2>
 				</div>
 
-			<UserList
+				<UserList user={user} filter={filter} />
-				user={user}
+			</>
-				filter={(x) =>
+		);
-					x.type === "student" &&
+	};
+
+	const TeachersList = () => {
+		const filter = (x: User) =>
+			x.type === "teacher" &&
 			(!!selectedUser
 				? groups
 						.filter((g) => g.admin === selectedUser.id)
 						.flatMap((g) => g.participants)
 						.includes(x.id) || false
-						: true)
+				: true);
-				}
-			/>
-		</>
-	);
 
-	const TeachersList = () => (
+		return (
 			<>
 				<div className="flex flex-col gap-4">
 					<div
@@ -91,38 +86,13 @@ export default function OwnerDashboard({user}: Props) {
 						<BsArrowLeft className="text-xl" />
 						<span>Back</span>
 					</div>
-				<h2 className="text-2xl font-semibold">
+					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
-					Teachers (
-					{
-						users.filter(
-							(x) =>
-								x.type === "teacher" &&
-								(!!selectedUser
-									? groups
-											.filter((g) => g.admin === selectedUser.id)
-											.flatMap((g) => g.participants)
-											.includes(x.id) || false
-									: true),
-						).length
-					}
-					)
-				</h2>
 				</div>
 
-			<UserList
+				<UserList user={user} filter={filter} />
-				user={user}
-				filter={(x) =>
-					x.type === "teacher" &&
-					(!!selectedUser
-						? groups
-								.filter((g) => g.admin === selectedUser.id)
-								.flatMap((g) => g.participants)
-								.includes(x.id) || false
-						: true)
-				}
-			/>
 			</>
 		);
+	};
 
 	const CorporateList = () => (
 		<>
@@ -140,7 +110,10 @@ export default function OwnerDashboard({user}: Props) {
 		</>
 	);
 
-	const InactiveStudentsList = () => (
+	const InactiveStudentsList = () => {
+		const filter = (x: User) => x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate));
+
+		return (
 			<>
 				<div className="flex flex-col gap-4">
 					<div
@@ -149,17 +122,18 @@ export default function OwnerDashboard({user}: Props) {
 						<BsArrowLeft className="text-xl" />
 						<span>Back</span>
 					</div>
-				<h2 className="text-2xl font-semibold">
+					<h2 className="text-2xl font-semibold">Inactive Students ({users.filter(filter).length})</h2>
-					Inactive Students (
-					{users.filter((x) => x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length})
-				</h2>
 				</div>
 
-			<UserList user={user} filter={(x) => x.type === "student" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))} />
+				<UserList user={user} filter={filter} />
 			</>
 		);
+	};
 
-	const InactiveCorporateList = () => (
+	const InactiveCorporateList = () => {
+		const filter = (x: User) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate));
+
+		return (
 			<>
 				<div className="flex flex-col gap-4">
 					<div
@@ -168,15 +142,13 @@ export default function OwnerDashboard({user}: Props) {
 						<BsArrowLeft className="text-xl" />
 						<span>Back</span>
 					</div>
-				<h2 className="text-2xl font-semibold">
+					<h2 className="text-2xl font-semibold">Inactive Corporate ({users.filter(filter).length})</h2>
-					Inactive Corporate (
-					{users.filter((x) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))).length})
-				</h2>
 				</div>
 
-			<UserList user={user} filter={(x) => x.type === "admin" && (x.isDisabled || moment().isAfter(x.subscriptionExpirationDate))} />
+				<UserList user={user} filter={filter} />
 			</>
 		);
+	};
 
 	const DefaultDashboard = () => (
 		<>