Standardized the access to the list of users

src/dashboards/Admin.tsx

@@ -51,17 +51,24 @@ export default function AdminDashboard({user}: Props) {
   useEffect(reload, [page]);
 
   const inactiveCountryManagerFilter = (x: User) =>
-		x.type === "agent" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+    x.type === "agent" &&
+    (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
 
   const UserDisplay = (displayUser: User) => (
     <div
       onClick={() => setSelectedUser(displayUser)}
-			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
-			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
+    >
+      <img
+        src={displayUser.profilePicture}
+        alt={displayUser.name}
+        className="rounded-full w-10 h-10"
+      />
       <div className="flex flex-col gap-1 items-start">
         <span>
           {displayUser.type === "corporate"
-						? displayUser.corporateInformation?.companyInformation?.name || displayUser.name
+            ? displayUser.corporateInformation?.companyInformation?.name ||
+              displayUser.name
             : displayUser.name}
         </span>
         <span className="text-sm opacity-75">{displayUser.email}</span>
@@ -74,25 +81,32 @@ export default function AdminDashboard({user}: Props) {
       x.type === "student" &&
       (!!selectedUser
         ? groups
-						.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+            .filter(
+              (g) =>
+                g.admin === selectedUser.id ||
+                g.participants.includes(selectedUser.id)
+            )
             .flatMap((g) => g.participants)
             .includes(x.id)
         : true);
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">Students ({total})</h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
@@ -101,25 +115,32 @@ export default function AdminDashboard({user}: Props) {
       x.type === "teacher" &&
       (!!selectedUser
         ? groups
-						.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+            .filter(
+              (g) =>
+                g.admin === selectedUser.id ||
+                g.participants.includes(selectedUser.id)
+            )
             .flatMap((g) => g.participants)
             .includes(x.id) || false
         : true);
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">Teachers ({total})</h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
@@ -127,36 +148,44 @@ export default function AdminDashboard({user}: Props) {
     const filter = (x: User) => x.type === "agent";
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Country Managers ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">
+              Country Managers ({total})
+            </h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
   const CorporateList = () => (
-		<>
+    <UserList
+      user={user}
+      filters={[(x) => x.type === "corporate"]}
+      renderHeader={(total) => (
         <div className="flex flex-col gap-4">
           <div
             onClick={() => setPage("")}
-					className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+          >
             <BsArrowLeft className="text-xl" />
             <span>Back</span>
           </div>
-				<h2 className="text-2xl font-semibold">Corporate ({users.filter((x) => x.type === "corporate").length})</h2>
+          <h2 className="text-2xl font-semibold">Corporate ({total})</h2>
         </div>
-
-			<UserList user={user} filters={[(x) => x.type === "corporate"]} />
-		</>
+      )}
+    />
   );
 
   const CorporatePaidStatusList = ({ paid }: { paid: Boolean }) => {
@@ -164,78 +193,103 @@ export default function AdminDashboard({user}: Props) {
     const filter = (x: User) => x.type === "corporate" && list.includes(x.id);
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
             <h2 className="text-2xl font-semibold">
-						{paid ? "Payment Done" : "Pending Payment"} ({list.length})
+              {paid ? "Payment Done" : "Pending Payment"} ({total})
             </h2>
           </div>
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
   const InactiveCountryManagerList = () => {
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[inactiveCountryManagerFilter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Inactive Country Managers ({users.filter(inactiveCountryManagerFilter).length})</h2>
+            <h2 className="text-2xl font-semibold">
+              Inactive Country Managers ({total})
+            </h2>
           </div>
-
-				<UserList user={user} filters={[inactiveCountryManagerFilter]} />
-			</>
+        )}
+      />
     );
   };
 
   const InactiveStudentsList = () => {
-		const filter = (x: User) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+    const filter = (x: User) =>
+      x.type === "student" &&
+      (x.status === "disabled" ||
+        moment().isAfter(x.subscriptionExpirationDate));
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Inactive Students ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">
+              Inactive Students ({total})
+            </h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
   const InactiveCorporateList = () => {
-		const filter = (x: User) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+    const filter = (x: User) =>
+      x.type === "corporate" &&
+      (x.status === "disabled" ||
+        moment().isAfter(x.subscriptionExpirationDate));
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Inactive Corporate ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">
+              Inactive Corporate ({total})
+            </h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
@@ -273,7 +327,15 @@ export default function AdminDashboard({user}: Props) {
         <IconCard
           Icon={BsGlobeCentralSouthAsia}
           label="Countries"
-					value={[...new Set(users.filter((x) => x.demographicInformation).map((x) => x.demographicInformation?.country))].length}
+          value={
+            [
+              ...new Set(
+                users
+                  .filter((x) => x.demographicInformation)
+                  .map((x) => x.demographicInformation?.country)
+              ),
+            ].length
+          }
           color="purple"
         />
         <IconCard
@@ -281,8 +343,12 @@ export default function AdminDashboard({user}: Props) {
           Icon={BsPersonFill}
           label="Inactive Students"
           value={
-						users.filter((x) => x.type === "student" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
-							.length
+            users.filter(
+              (x) =>
+                x.type === "student" &&
+                (x.status === "disabled" ||
+                  moment().isAfter(x.subscriptionExpirationDate))
+            ).length
           }
           color="rose"
         />
@@ -298,12 +364,22 @@ export default function AdminDashboard({user}: Props) {
           Icon={BsBank}
           label="Inactive Corporate"
           value={
-						users.filter((x) => x.type === "corporate" && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate)))
-							.length
+            users.filter(
+              (x) =>
+                x.type === "corporate" &&
+                (x.status === "disabled" ||
+                  moment().isAfter(x.subscriptionExpirationDate))
+            ).length
           }
           color="rose"
         />
-				<IconCard onClick={() => setPage("paymentdone")} Icon={BsCurrencyDollar} label="Payment Done" value={done.length} color="purple" />
+        <IconCard
+          onClick={() => setPage("paymentdone")}
+          Icon={BsCurrencyDollar}
+          label="Payment Done"
+          value={done.length}
+          color="purple"
+        />
         <IconCard
           onClick={() => setPage("paymentpending")}
           Icon={BsCurrencyDollar}
@@ -361,7 +437,9 @@ export default function AdminDashboard({user}: Props) {
           <span className="p-4">Unpaid Corporate</span>
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
-							.filter((x) => x.type === "corporate" && x.status === "paymentDue")
+              .filter(
+                (x) => x.type === "corporate" && x.status === "paymentDue"
+              )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
               ))}
@@ -375,8 +453,10 @@ export default function AdminDashboard({user}: Props) {
                 (x) =>
                   x.type === "student" &&
                   x.subscriptionExpirationDate &&
-									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
-									moment().isBefore(moment(x.subscriptionExpirationDate)),
+                  moment().isAfter(
+                    moment(x.subscriptionExpirationDate).subtract(30, "days")
+                  ) &&
+                  moment().isBefore(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -391,8 +471,10 @@ export default function AdminDashboard({user}: Props) {
                 (x) =>
                   x.type === "teacher" &&
                   x.subscriptionExpirationDate &&
-									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
-									moment().isBefore(moment(x.subscriptionExpirationDate)),
+                  moment().isAfter(
+                    moment(x.subscriptionExpirationDate).subtract(30, "days")
+                  ) &&
+                  moment().isBefore(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -407,8 +489,10 @@ export default function AdminDashboard({user}: Props) {
                 (x) =>
                   x.type === "agent" &&
                   x.subscriptionExpirationDate &&
-									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
-									moment().isBefore(moment(x.subscriptionExpirationDate)),
+                  moment().isAfter(
+                    moment(x.subscriptionExpirationDate).subtract(30, "days")
+                  ) &&
+                  moment().isBefore(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -423,8 +507,10 @@ export default function AdminDashboard({user}: Props) {
                 (x) =>
                   x.type === "corporate" &&
                   x.subscriptionExpirationDate &&
-									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
-									moment().isBefore(moment(x.subscriptionExpirationDate)),
+                  moment().isAfter(
+                    moment(x.subscriptionExpirationDate).subtract(30, "days")
+                  ) &&
+                  moment().isBefore(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -436,7 +522,10 @@ export default function AdminDashboard({user}: Props) {
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
               .filter(
-								(x) => x.type === "student" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
+                (x) =>
+                  x.type === "student" &&
+                  x.subscriptionExpirationDate &&
+                  moment().isAfter(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -448,7 +537,10 @@ export default function AdminDashboard({user}: Props) {
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
               .filter(
-								(x) => x.type === "teacher" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
+                (x) =>
+                  x.type === "teacher" &&
+                  x.subscriptionExpirationDate &&
+                  moment().isAfter(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -460,7 +552,10 @@ export default function AdminDashboard({user}: Props) {
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
               .filter(
-								(x) => x.type === "agent" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
+                (x) =>
+                  x.type === "agent" &&
+                  x.subscriptionExpirationDate &&
+                  moment().isAfter(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -473,7 +568,9 @@ export default function AdminDashboard({user}: Props) {
             {users
               .filter(
                 (x) =>
-									x.type === "corporate" && x.subscriptionExpirationDate && moment().isAfter(moment(x.subscriptionExpirationDate)),
+                  x.type === "corporate" &&
+                  x.subscriptionExpirationDate &&
+                  moment().isAfter(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -497,7 +594,8 @@ export default function AdminDashboard({user}: Props) {
                   if (shouldReload) reload();
                 }}
                 onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "teacher"
                     ? () => {
                         appendUserFilters({
                           id: "view-students",
@@ -507,7 +605,11 @@ export default function AdminDashboard({user}: Props) {
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });
@@ -517,7 +619,8 @@ export default function AdminDashboard({user}: Props) {
                     : undefined
                 }
                 onViewTeachers={
-									selectedUser.type === "corporate" || selectedUser.type === "student"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "student"
                     ? () => {
                         appendUserFilters({
                           id: "view-teachers",
@@ -527,7 +630,11 @@ export default function AdminDashboard({user}: Props) {
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });
@@ -537,7 +644,8 @@ export default function AdminDashboard({user}: Props) {
                     : undefined
                 }
                 onViewCorporate={
-									selectedUser.type === "teacher" || selectedUser.type === "student"
+                  selectedUser.type === "teacher" ||
+                  selectedUser.type === "student"
                     ? () => {
                         appendUserFilters({
                           id: "view-corporate",
@@ -547,7 +655,9 @@ export default function AdminDashboard({user}: Props) {
                           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),
                         });

src/dashboards/Agent.tsx

@@ -7,12 +7,17 @@ import UserList from "@/pages/(admin)/Lists/UserList";
 import { dateSorter } from "@/utils";
 import moment from "moment";
 import { useEffect, useState } from "react";
-import {BsArrowLeft, BsPersonFill, BsBank, BsCurrencyDollar} from "react-icons/bs";
+import {
+  BsArrowLeft,
+  BsPersonFill,
+  BsBank,
+  BsCurrencyDollar,
+} from "react-icons/bs";
 import UserCard from "@/components/UserCard";
 import useGroups from "@/hooks/useGroups";
 
 import IconCard from "./IconCard";
-import usePaymentStatusUsers from '@/hooks/usePaymentStatusUsers';
+import usePaymentStatusUsers from "@/hooks/usePaymentStatusUsers";
 
 interface Props {
   user: User;
@@ -34,19 +39,34 @@ export default function AgentDashboard({user}: Props) {
 
   const corporateFilter = (user: User) => user.type === "corporate";
   const referredCorporateFilter = (x: User) =>
-		x.type === "corporate" && !!x.corporateInformation && x.corporateInformation.referralAgent === user.id;
+    x.type === "corporate" &&
+    !!x.corporateInformation &&
+    x.corporateInformation.referralAgent === user.id;
   const inactiveReferredCorporateFilter = (x: User) =>
-		referredCorporateFilter(x) && (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
+    referredCorporateFilter(x) &&
+    (x.status === "disabled" || moment().isAfter(x.subscriptionExpirationDate));
 
-	const UserDisplay = ({ displayUser, allowClick = true }: {displayUser: User, allowClick?: boolean}) => (
+  const UserDisplay = ({
+    displayUser,
+    allowClick = true,
+  }: {
+    displayUser: User;
+    allowClick?: boolean;
+  }) => (
     <div
       onClick={() => allowClick && setSelectedUser(displayUser)}
-			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
-			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
+    >
+      <img
+        src={displayUser.profilePicture}
+        alt={displayUser.name}
+        className="rounded-full w-10 h-10"
+      />
       <div className="flex flex-col gap-1 items-start">
         <span>
           {displayUser.type === "corporate"
-						? displayUser.corporateInformation?.companyInformation?.name || displayUser.name
+            ? displayUser.corporateInformation?.companyInformation?.name ||
+              displayUser.name
             : displayUser.name}
         </span>
         <span className="text-sm opacity-75">{displayUser.email}</span>
@@ -56,37 +76,47 @@ export default function AgentDashboard({user}: Props) {
 
   const ReferredCorporateList = () => {
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[referredCorporateFilter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Referred Corporate ({users.filter(referredCorporateFilter).length})</h2>
+            <h2 className="text-2xl font-semibold">
+              Referred Corporate ({total})
+            </h2>
           </div>
-
-				<UserList user={user} filters={[referredCorporateFilter]} />
-			</>
+        )}
+      />
     );
   };
 
   const InactiveReferredCorporateList = () => {
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[inactiveReferredCorporateFilter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Inactive Referred Corporate ({users.filter(inactiveReferredCorporateFilter).length})</h2>
+            <h2 className="text-2xl font-semibold">
+              Inactive Referred Corporate ({total})
+            </h2>
           </div>
-
-				<UserList user={user} filters={[inactiveReferredCorporateFilter]} />
-			</>
+        )}
+      />
     );
   };
 
@@ -94,18 +124,22 @@ export default function AgentDashboard({user}: Props) {
     const filter = (x: User) => x.type === "corporate";
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Corporate ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">Corporate ({total})</h2>
           </div>
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
@@ -114,18 +148,24 @@ export default function AgentDashboard({user}: Props) {
     const filter = (x: User) => x.type === "corporate" && list.includes(x.id);
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">{paid ? 'Payment Done' : 'Pending Payment'} ({list.length})</h2>
+            <h2 className="text-2xl font-semibold">
+              {paid ? "Payment Done" : "Pending Payment"} ({total})
+            </h2>
           </div>
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
@@ -199,8 +239,10 @@ export default function AgentDashboard({user}: Props) {
               .filter(
                 (x) =>
                   referredCorporateFilter(x) &&
-									moment().isAfter(moment(x.subscriptionExpirationDate).subtract(30, "days")) &&
-									moment().isBefore(moment(x.subscriptionExpirationDate)),
+                  moment().isAfter(
+                    moment(x.subscriptionExpirationDate).subtract(30, "days")
+                  ) &&
+                  moment().isBefore(moment(x.subscriptionExpirationDate))
               )
               .map((x) => (
                 <UserDisplay key={x.id} displayUser={x} />
@@ -224,9 +266,16 @@ export default function AgentDashboard({user}: Props) {
                   if (shouldReload) reload();
                 }}
                 onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "teacher"
+                    ? () => setPage("students")
+                    : undefined
+                }
+                onViewTeachers={
+                  selectedUser.type === "corporate"
+                    ? () => setPage("teachers")
+                    : undefined
                 }
-								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
                 user={selectedUser}
               />
             </div>
@@ -235,7 +284,9 @@ export default function AgentDashboard({user}: Props) {
       </Modal>
       {page === "referredCorporate" && <ReferredCorporateList />}
       {page === "corporate" && <CorporateList />}
-			{page === "inactiveReferredCorporate" && <InactiveReferredCorporateList />}
+      {page === "inactiveReferredCorporate" && (
+        <InactiveReferredCorporateList />
+      )}
       {page === "paymentdone" && <CorporatePaidStatusList paid={true} />}
       {page === "paymentpending" && <CorporatePaidStatusList paid={false} />}
       {page === "" && <DefaultDashboard />}

src/dashboards/Corporate.tsx

@@ -57,16 +57,26 @@ export default function CorporateDashboard({user}: Props) {
     setShowModal(!!selectedUser && page === "");
   }, [selectedUser, page]);
 
-	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
-	const teacherFilter = (user: User) => user.type === "teacher" && groups.flatMap((g) => g.participants).includes(user.id);
+  const studentFilter = (user: User) =>
+    user.type === "student" &&
+    groups.flatMap((g) => g.participants).includes(user.id);
+  const teacherFilter = (user: User) =>
+    user.type === "teacher" &&
+    groups.flatMap((g) => g.participants).includes(user.id);
 
-	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
+  const getStatsByStudent = (user: User) =>
+    stats.filter((s) => s.user === user.id);
 
   const UserDisplay = (displayUser: User) => (
     <div
       onClick={() => setSelectedUser(displayUser)}
-			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
-			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
+    >
+      <img
+        src={displayUser.profilePicture}
+        alt={displayUser.name}
+        className="rounded-full w-10 h-10"
+      />
       <div className="flex flex-col gap-1 items-start">
         <span>{displayUser.name}</span>
         <span className="text-sm opacity-75">{displayUser.email}</span>
@@ -85,19 +95,22 @@ export default function CorporateDashboard({user}: Props) {
         : groups.flatMap((g) => g.participants).includes(x.id));
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">Students ({total})</h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
@@ -112,35 +125,42 @@ export default function CorporateDashboard({user}: Props) {
         : groups.flatMap((g) => g.participants).includes(x.id));
 
     return (
-			<>
+        <UserList
+          user={user}
+          filters={[filter]}
+          renderHeader={(total) => (
             <div className="flex flex-col gap-4">
               <div
                 onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+                className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+              >
                 <BsArrowLeft className="text-xl" />
                 <span>Back</span>
               </div>
-					<h2 className="text-2xl font-semibold">Teachers ({users.filter(filter).length})</h2>
+              <h2 className="text-2xl font-semibold">Teachers ({total})</h2>
             </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+          )}
+        />
     );
   };
 
   const GroupsList = () => {
-		const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
+    const filter = (x: Group) =>
+      x.admin === user.id || x.participants.includes(user.id);
 
     return (
       <>
         <div className="flex flex-col gap-4">
           <div
             onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+          >
             <BsArrowLeft className="text-xl" />
             <span>Back</span>
           </div>
-					<h2 className="text-2xl font-semibold">Groups ({groups.filter(filter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Groups ({groups.filter(filter).length})
+          </h2>
         </div>
 
         <GroupList user={user} />
@@ -150,14 +170,29 @@ export default function CorporateDashboard({user}: Props) {
 
   const averageLevelCalculator = (studentStats: Stat[]) => {
     const formattedStats = studentStats
-			.map((s) => ({focus: users.find((u) => u.id === s.user)?.focus, score: s.score, module: s.module}))
+      .map((s) => ({
+        focus: users.find((u) => u.id === s.user)?.focus,
+        score: s.score,
+        module: s.module,
+      }))
       .filter((f) => !!f.focus);
     const bandScores = formattedStats.map((s) => ({
       module: s.module,
-			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+      level: calculateBandScore(
+        s.score.correct,
+        s.score.total,
+        s.module,
+        s.focus!
+      ),
     }));
 
-		const levels: {[key in Module]: number} = {reading: 0, listening: 0, writing: 0, speaking: 0, level: 0};
+    const levels: { [key in Module]: number } = {
+      reading: 0,
+      listening: 0,
+      writing: 0,
+      speaking: 0,
+      level: 0,
+    };
     bandScores.forEach((b) => (levels[b.module] += b.level));
 
     return calculateAverageLevel(levels);
@@ -183,26 +218,46 @@ export default function CorporateDashboard({user}: Props) {
         <IconCard
           Icon={BsClipboard2Data}
           label="Exams Performed"
-					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
+          value={
+            stats.filter((s) =>
+              groups.flatMap((g) => g.participants).includes(s.user)
+            ).length
+          }
           color="purple"
         />
         <IconCard
           Icon={BsPaperclip}
           label="Average Level"
-					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
+          value={averageLevelCalculator(
+            stats.filter((s) =>
+              groups.flatMap((g) => g.participants).includes(s.user)
+            )
+          ).toFixed(1)}
+          color="purple"
+        />
+        <IconCard
+          onClick={() => setPage("groups")}
+          Icon={BsPeople}
+          label="Groups"
+          value={groups.length}
           color="purple"
         />
-				<IconCard onClick={() => setPage("groups")} Icon={BsPeople} label="Groups" value={groups.length} color="purple" />
         <IconCard
           Icon={BsPersonCheck}
           label="User Balance"
-					value={`${codes.length}/${user.corporateInformation?.companyInformation?.userAmount || 0}`}
+          value={`${codes.length}/${
+            user.corporateInformation?.companyInformation?.userAmount || 0
+          }`}
           color="purple"
         />
         <IconCard
           Icon={BsClock}
           label="Expiration Date"
-					value={user.subscriptionExpirationDate ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy") : "Unlimited"}
+          value={
+            user.subscriptionExpirationDate
+              ? moment(user.subscriptionExpirationDate).format("DD/MM/yyyy")
+              : "Unlimited"
+          }
           color="rose"
         />
       </section>
@@ -235,7 +290,11 @@ export default function CorporateDashboard({user}: Props) {
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
               .filter(studentFilter)
-							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
+              .sort(
+                (a, b) =>
+                  calculateAverageLevel(b.levels) -
+                  calculateAverageLevel(a.levels)
+              )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
               ))}
@@ -248,7 +307,8 @@ export default function CorporateDashboard({user}: Props) {
               .filter(studentFilter)
               .sort(
                 (a, b) =>
-									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
+                  Object.keys(groupByExam(getStatsByStudent(b))).length -
+                  Object.keys(groupByExam(getStatsByStudent(a))).length
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -272,7 +332,8 @@ export default function CorporateDashboard({user}: Props) {
                   if (shouldReload) reload();
                 }}
                 onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "teacher"
                     ? () => {
                         appendUserFilters({
                           id: "view-students",
@@ -282,7 +343,11 @@ export default function CorporateDashboard({user}: Props) {
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });
@@ -292,7 +357,8 @@ export default function CorporateDashboard({user}: Props) {
                     : undefined
                 }
                 onViewTeachers={
-									selectedUser.type === "corporate" || selectedUser.type === "student"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "student"
                     ? () => {
                         appendUserFilters({
                           id: "view-teachers",
@@ -302,7 +368,11 @@ export default function CorporateDashboard({user}: Props) {
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });

src/dashboards/Teacher.tsx

@@ -57,12 +57,17 @@ export default function TeacherDashboard({user}: Props) {
   const [showModal, setShowModal] = useState(false);
   const [selectedAssignment, setSelectedAssignment] = useState<Assignment>();
   const [isCreatingAssignment, setIsCreatingAssignment] = useState(false);
-	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
+  const [corporateUserToShow, setCorporateUserToShow] =
+    useState<CorporateUser>();
 
   const { stats } = useStats();
   const { users, reload } = useUsers();
   const { groups } = useGroups(user.id);
-	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assigner: user.id});
+  const {
+    assignments,
+    isLoading: isAssignmentsLoading,
+    reload: reloadAssignments,
+  } = useAssignments({ assigner: user.id });
 
   useEffect(() => {
     setShowModal(!!selectedUser && page === "");
@@ -72,15 +77,23 @@ export default function TeacherDashboard({user}: Props) {
     getUserCorporate(user.id).then(setCorporateUserToShow);
   }, [user]);
 
-	const studentFilter = (user: User) => user.type === "student" && groups.flatMap((g) => g.participants).includes(user.id);
+  const studentFilter = (user: User) =>
+    user.type === "student" &&
+    groups.flatMap((g) => g.participants).includes(user.id);
 
-	const getStatsByStudent = (user: User) => stats.filter((s) => s.user === user.id);
+  const getStatsByStudent = (user: User) =>
+    stats.filter((s) => s.user === user.id);
 
   const UserDisplay = (displayUser: User) => (
     <div
       onClick={() => setSelectedUser(displayUser)}
-			className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300">
-			<img src={displayUser.profilePicture} alt={displayUser.name} className="rounded-full w-10 h-10" />
+      className="flex w-full p-4 gap-4 items-center hover:bg-mti-purple-ultralight cursor-pointer transition ease-in-out duration-300"
+    >
+      <img
+        src={displayUser.profilePicture}
+        alt={displayUser.name}
+        className="rounded-full w-10 h-10"
+      />
       <div className="flex flex-col gap-1 items-start">
         <span>{displayUser.name}</span>
         <span className="text-sm opacity-75">{displayUser.email}</span>
@@ -99,35 +112,42 @@ export default function TeacherDashboard({user}: Props) {
         : groups.flatMap((g) => g.participants).includes(x.id));
 
     return (
-			<>
+      <UserList
+        user={user}
+        filters={[filter]}
+        renderHeader={(total) => (
           <div className="flex flex-col gap-4">
             <div
               onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+              className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+            >
               <BsArrowLeft className="text-xl" />
               <span>Back</span>
             </div>
-					<h2 className="text-2xl font-semibold">Students ({users.filter(filter).length})</h2>
+            <h2 className="text-2xl font-semibold">Students ({total})</h2>
           </div>
-
-				<UserList user={user} filters={[filter]} />
-			</>
+        )}
+      />
     );
   };
 
   const GroupsList = () => {
-		const filter = (x: Group) => x.admin === user.id || x.participants.includes(user.id);
+    const filter = (x: Group) =>
+      x.admin === user.id || x.participants.includes(user.id);
 
     return (
       <>
         <div className="flex flex-col gap-4">
           <div
             onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+          >
             <BsArrowLeft className="text-xl" />
             <span>Back</span>
           </div>
-					<h2 className="text-2xl font-semibold">Groups ({groups.filter(filter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Groups ({groups.filter(filter).length})
+          </h2>
         </div>
 
         <GroupList user={user} />
@@ -137,14 +157,29 @@ export default function TeacherDashboard({user}: Props) {
 
   const averageLevelCalculator = (studentStats: Stat[]) => {
     const formattedStats = studentStats
-			.map((s) => ({focus: users.find((u) => u.id === s.user)?.focus, score: s.score, module: s.module}))
+      .map((s) => ({
+        focus: users.find((u) => u.id === s.user)?.focus,
+        score: s.score,
+        module: s.module,
+      }))
       .filter((f) => !!f.focus);
     const bandScores = formattedStats.map((s) => ({
       module: s.module,
-			level: calculateBandScore(s.score.correct, s.score.total, s.module, s.focus!),
+      level: calculateBandScore(
+        s.score.correct,
+        s.score.total,
+        s.module,
+        s.focus!
+      ),
     }));
 
-		const levels: {[key in Module]: number} = {reading: 0, listening: 0, writing: 0, speaking: 0, level: 0};
+    const levels: { [key in Module]: number } = {
+      reading: 0,
+      listening: 0,
+      writing: 0,
+      speaking: 0,
+      level: 0,
+    };
     bandScores.forEach((b) => (levels[b.module] += b.level));
 
     return calculateAverageLevel(levels);
@@ -152,10 +187,16 @@ export default function TeacherDashboard({user}: Props) {
 
   const AssignmentsPage = () => {
     const activeFilter = (a: Assignment) =>
-			moment(a.endDate).isAfter(moment()) && moment(a.startDate).isBefore(moment()) && a.assignees.length > a.results.length;
-		const pastFilter = (a: Assignment) => (moment(a.endDate).isBefore(moment()) || a.assignees.length === a.results.length) && !a.archived;
+      moment(a.endDate).isAfter(moment()) &&
+      moment(a.startDate).isBefore(moment()) &&
+      a.assignees.length > a.results.length;
+    const pastFilter = (a: Assignment) =>
+      (moment(a.endDate).isBefore(moment()) ||
+        a.assignees.length === a.results.length) &&
+      !a.archived;
     const archivedFilter = (a: Assignment) => a.archived;
-		const futureFilter = (a: Assignment) => moment(a.startDate).isAfter(moment());
+    const futureFilter = (a: Assignment) =>
+      moment(a.startDate).isAfter(moment());
 
     return (
       <>
@@ -170,7 +211,9 @@ export default function TeacherDashboard({user}: Props) {
         />
         <AssignmentCreator
           assignment={selectedAssignment}
-					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}
+          groups={groups.filter(
+            (x) => x.admin === user.id || x.participants.includes(user.id)
+          )}
           users={users.filter(
             (x) =>
               x.type === "student" &&
@@ -179,7 +222,7 @@ export default function TeacherDashboard({user}: Props) {
                     .filter((g) => g.admin === selectedUser.id)
                     .flatMap((g) => g.participants)
                     .includes(x.id) || false
-								: groups.flatMap((g) => g.participants).includes(x.id)),
+                : groups.flatMap((g) => g.participants).includes(x.id))
           )}
           assigner={user.id}
           isCreating={isCreatingAssignment}
@@ -192,31 +235,47 @@ export default function TeacherDashboard({user}: Props) {
         <div className="w-full flex justify-between items-center">
           <div
             onClick={() => setPage("")}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+          >
             <BsArrowLeft className="text-xl" />
             <span>Back</span>
           </div>
           <div
             onClick={reloadAssignments}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+            className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+          >
             <span>Reload</span>
-						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
+            <BsArrowRepeat
+              className={clsx(
+                "text-xl",
+                isAssignmentsLoading && "animate-spin"
+              )}
+            />
           </div>
         </div>
         <section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Active Assignments ({assignments.filter(activeFilter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Active Assignments ({assignments.filter(activeFilter).length})
+          </h2>
           <div className="flex flex-wrap gap-2">
             {assignments.filter(activeFilter).map((a) => (
-							<AssignmentCard {...a} onClick={() => setSelectedAssignment(a)} key={a.id} />
+              <AssignmentCard
+                {...a}
+                onClick={() => setSelectedAssignment(a)}
+                key={a.id}
+              />
             ))}
           </div>
         </section>
         <section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Planned Assignments ({assignments.filter(futureFilter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Planned Assignments ({assignments.filter(futureFilter).length})
+          </h2>
           <div className="flex flex-wrap gap-2">
             <div
               onClick={() => setIsCreatingAssignment(true)}
-							className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300">
+              className="w-[250px] h-[200px] flex flex-col gap-2 items-center justify-center bg-white hover:bg-mti-purple-ultralight text-mti-purple-light hover:text-mti-purple-dark border border-mti-gray-platinum hover:drop-shadow p-4 cursor-pointer rounded-xl transition ease-in-out duration-300"
+            >
               <BsPlus className="text-6xl" />
               <span className="text-lg">New Assignment</span>
             </div>
@@ -233,7 +292,9 @@ export default function TeacherDashboard({user}: Props) {
           </div>
         </section>
         <section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Past Assignments ({assignments.filter(pastFilter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Past Assignments ({assignments.filter(pastFilter).length})
+          </h2>
           <div className="flex flex-wrap gap-2">
             {assignments.filter(pastFilter).map((a) => (
               <AssignmentCard
@@ -248,7 +309,9 @@ export default function TeacherDashboard({user}: Props) {
           </div>
         </section>
         <section className="flex flex-col gap-4">
-					<h2 className="text-2xl font-semibold">Archived Assignments ({assignments.filter(archivedFilter).length})</h2>
+          <h2 className="text-2xl font-semibold">
+            Archived Assignments ({assignments.filter(archivedFilter).length})
+          </h2>
           <div className="flex flex-wrap gap-2">
             {assignments.filter(archivedFilter).map((a) => (
               <AssignmentCard
@@ -270,14 +333,19 @@ export default function TeacherDashboard({user}: Props) {
     <>
       {corporateUserToShow && (
         <div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
-					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
+          Linked to:{" "}
+          <b>
+            {corporateUserToShow?.corporateInformation?.companyInformation
+              .name || corporateUserToShow.name}
+          </b>
         </div>
       )}
       <section
         className={clsx(
           "flex -lg:flex-wrap gap-4 items-center -lg:justify-center lg:justify-start text-center",
-					!!corporateUserToShow && "mt-12 xl:mt-6",
-				)}>
+          !!corporateUserToShow && "mt-12 xl:mt-6"
+        )}
+      >
         <IconCard
           onClick={() => setPage("students")}
           Icon={BsPersonFill}
@@ -288,23 +356,40 @@ export default function TeacherDashboard({user}: Props) {
         <IconCard
           Icon={BsClipboard2Data}
           label="Exams Performed"
-					value={stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user)).length}
+          value={
+            stats.filter((s) =>
+              groups.flatMap((g) => g.participants).includes(s.user)
+            ).length
+          }
           color="purple"
         />
         <IconCard
           Icon={BsPaperclip}
           label="Average Level"
-					value={averageLevelCalculator(stats.filter((s) => groups.flatMap((g) => g.participants).includes(s.user))).toFixed(1)}
+          value={averageLevelCalculator(
+            stats.filter((s) =>
+              groups.flatMap((g) => g.participants).includes(s.user)
+            )
+          ).toFixed(1)}
           color="purple"
         />
-				<IconCard Icon={BsPeople} label="Groups" value={groups.length} color="purple" onClick={() => setPage("groups")} />
+        <IconCard
+          Icon={BsPeople}
+          label="Groups"
+          value={groups.length}
+          color="purple"
+          onClick={() => setPage("groups")}
+        />
         <div
           onClick={() => setPage("assignments")}
-					className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300">
+          className="bg-white rounded-xl shadow p-4 flex flex-col gap-4 items-center w-96 h-52 justify-center cursor-pointer hover:shadow-xl transition ease-in-out duration-300"
+        >
           <BsEnvelopePaper className="text-6xl text-mti-purple-light" />
           <span className="flex flex-col gap-1 items-center text-xl">
             <span className="text-lg">Assignments</span>
-						<span className="font-semibold text-mti-purple-light">{assignments.filter((a) => !a.archived).length}</span>
+            <span className="font-semibold text-mti-purple-light">
+              {assignments.filter((a) => !a.archived).length}
+            </span>
           </span>
         </div>
       </section>
@@ -326,7 +411,11 @@ export default function TeacherDashboard({user}: Props) {
           <div className="flex flex-col items-start h-96 overflow-scroll scrollbar-hide">
             {users
               .filter(studentFilter)
-							.sort((a, b) => calculateAverageLevel(b.levels) - calculateAverageLevel(a.levels))
+              .sort(
+                (a, b) =>
+                  calculateAverageLevel(b.levels) -
+                  calculateAverageLevel(a.levels)
+              )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
               ))}
@@ -339,7 +428,8 @@ export default function TeacherDashboard({user}: Props) {
               .filter(studentFilter)
               .sort(
                 (a, b) =>
-									Object.keys(groupByExam(getStatsByStudent(b))).length - Object.keys(groupByExam(getStatsByStudent(a))).length,
+                  Object.keys(groupByExam(getStatsByStudent(b))).length -
+                  Object.keys(groupByExam(getStatsByStudent(a))).length
               )
               .map((x) => (
                 <UserDisplay key={x.id} {...x} />
@@ -363,9 +453,16 @@ export default function TeacherDashboard({user}: Props) {
                   if (shouldReload) reload();
                 }}
                 onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher" ? () => setPage("students") : undefined
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "teacher"
+                    ? () => setPage("students")
+                    : undefined
+                }
+                onViewTeachers={
+                  selectedUser.type === "corporate"
+                    ? () => setPage("teachers")
+                    : undefined
                 }
-								onViewTeachers={selectedUser.type === "corporate" ? () => setPage("teachers") : undefined}
                 user={selectedUser}
               />
             </div>

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

@@ -4,19 +4,38 @@ import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
 import { Type, User, userTypes, CorporateUser, Group } from "@/interfaces/user";
 import { Popover, Transition } from "@headlessui/react";
-import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
 import axios from "axios";
 import clsx from "clsx";
 import { capitalize, reverse } from "lodash";
 import moment from "moment";
 import { Fragment, useEffect, useState } from "react";
-import {BsArrowDown, BsArrowDownUp, BsArrowUp, BsCheck, BsCheckCircle, BsEye, BsFillExclamationOctagonFill, BsPerson, BsTrash} from "react-icons/bs";
+import {
+  BsArrowDown,
+  BsArrowDownUp,
+  BsArrowUp,
+  BsCheck,
+  BsCheckCircle,
+  BsEye,
+  BsFillExclamationOctagonFill,
+  BsPerson,
+  BsTrash,
+} from "react-icons/bs";
 import { toast } from "react-toastify";
 import { countries, TCountries } from "countries-list";
 import countryCodes from "country-codes-list";
 import Modal from "@/components/Modal";
 import UserCard from "@/components/UserCard";
-import {getUserCompanyName, isAgentUser, USER_TYPE_LABELS} from "@/resources/user";
+import {
+  getUserCompanyName,
+  isAgentUser,
+  USER_TYPE_LABELS,
+} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
 import { useRouter } from "next/router";
 import { isCorporateUser } from "@/resources/user";
@@ -26,9 +45,21 @@ import {asyncSorter} from "@/utils";
 import { exportListToExcel, UserListRow } from "@/utils/users";
 
 const columnHelper = createColumnHelper<User>();
-const searchFields = [["name"], ["email"], ["corporateInformation", "companyInformation", "name"]];
+const searchFields = [
+  ["name"],
+  ["email"],
+  ["corporateInformation", "companyInformation", "name"],
+];
 
-const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; groups: Group[]}) => {
+const CompanyNameCell = ({
+  users,
+  user,
+  groups,
+}: {
+  user: User;
+  users: User[];
+  groups: Group[];
+}) => {
   const [companyName, setCompanyName] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
@@ -37,17 +68,34 @@ const CompanyNameCell = ({users, user, groups}: {user: User; users: User[]; grou
     setCompanyName(name);
   }, [user, users, groups]);
 
-	return isLoading ? <span className="animate-pulse">Loading...</span> : <>{companyName}</>;
+  return isLoading ? (
+    <span className="animate-pulse">Loading...</span>
+  ) : (
+    <>{companyName}</>
+  );
 };
 
-export default function UserList({user, filters = []}: {user: User; filters?: ((user: User) => boolean)[]}) {
-	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
+export default function UserList({
+  user,
+  filters = [],
+  renderHeader,
+}: {
+  user: User;
+  filters?: ((user: User) => boolean)[];
+  renderHeader?: (total: number) => JSX.Element;
+}) {
+  const [showDemographicInformation, setShowDemographicInformation] =
+    useState(false);
   const [sorter, setSorter] = useState<string>();
   const [displayUsers, setDisplayUsers] = useState<User[]>([]);
   const [selectedUser, setSelectedUser] = useState<User>();
 
   const { users, reload } = useUsers();
-	const {groups} = useGroups(user && (user?.type === "corporate" || user?.type === "teacher") ? user.id : undefined);
+  const { groups } = useGroups(
+    user && (user?.type === "corporate" || user?.type === "teacher")
+      ? user.id
+      : undefined
+  );
 
   const appendUserFilters = useFilterStore((state) => state.appendUserFilter);
   const router = useRouter();
@@ -56,10 +104,13 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
     const momentDate = moment(date);
     const today = moment(new Date());
 
-		if (today.isAfter(momentDate)) return "!text-mti-red-light  font-bold line-through";
+    if (today.isAfter(momentDate))
+      return "!text-mti-red-light  font-bold line-through";
     if (today.add(1, "weeks").isAfter(momentDate)) return "!text-mti-red-light";
-		if (today.add(2, "weeks").isAfter(momentDate)) return "!text-mti-rose-light";
-		if (today.add(1, "months").isAfter(momentDate)) return "!text-mti-orange-light";
+    if (today.add(2, "weeks").isAfter(momentDate))
+      return "!text-mti-rose-light";
+    if (today.add(1, "months").isAfter(momentDate))
+      return "!text-mti-orange-light";
   };
 
   useEffect(() => {
@@ -67,11 +118,19 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
       if (user && users) {
         const filterUsers =
           user.type === "corporate" || user.type === "teacher"
-						? users.filter((u) => groups.flatMap((g) => g.participants).includes(u.id))
+            ? users.filter((u) =>
+                groups.flatMap((g) => g.participants).includes(u.id)
+              )
             : users;
 
-				const filteredUsers = filters.reduce((d, f) => d.filter(f), filterUsers);
-				const sortedUsers = await asyncSorter<User>(filteredUsers, sortFunction);
+        const filteredUsers = filters.reduce(
+          (d, f) => d.filter(f),
+          filterUsers
+        );
+        const sortedUsers = await asyncSorter<User>(
+          filteredUsers,
+          sortFunction
+        );
         console.log(sortedUsers);
 
         setDisplayUsers([...sortedUsers]);
@@ -81,7 +140,8 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
   }, [user, users, sorter, groups]);
 
   const deleteAccount = (user: User) => {
-		if (!confirm(`Are you sure you want to delete ${user.name}'s account?`)) return;
+    if (!confirm(`Are you sure you want to delete ${user.name}'s account?`))
+      return;
 
     axios
       .delete<{ ok: boolean }>(`/api/user?id=${user.id}`)
@@ -96,10 +156,20 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
   };
 
   const updateAccountType = (user: User, type: Type) => {
-		if (!confirm(`Are you sure you want to update ${user.name}'s account from ${capitalize(user.type)} to ${capitalize(type)}?`)) return;
+    if (
+      !confirm(
+        `Are you sure you want to update ${
+          user.name
+        }'s account from ${capitalize(user.type)} to ${capitalize(type)}?`
+      )
+    )
+      return;
 
     axios
-			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, type})
+      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
+        ...user,
+        type,
+      })
       .then(() => {
         toast.success("User type updated successfully!");
         reload();
@@ -111,7 +181,10 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 
   const verifyAccount = (user: User) => {
     axios
-			.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {...user, isVerified: true})
+      .post<{ user?: User; ok?: boolean }>(`/api/users/update?id=${user.id}`, {
+        ...user,
+        isVerified: true,
+      })
       .then(() => {
         toast.success("User verified successfully!");
         reload();
@@ -124,9 +197,11 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
   const toggleDisableAccount = (user: User) => {
     if (
       !confirm(
-				`Are you sure you want to ${user.status === "disabled" ? "enable" : "disable"} ${
+        `Are you sure you want to ${
+          user.status === "disabled" ? "enable" : "disable"
+        } ${
           user.name
-				}'s account? This change is usually related to their payment state.`,
+        }'s account? This change is usually related to their payment state.`
       )
     )
       return;
@@ -137,7 +212,11 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
         status: user.status === "disabled" ? "active" : "disabled",
       })
       .then(() => {
-				toast.success(`User ${user.status === "disabled" ? "enabled" : "disabled"} successfully!`);
+        toast.success(
+          `User ${
+            user.status === "disabled" ? "enabled" : "disabled"
+          } successfully!`
+        );
         reload();
       })
       .catch(() => {
@@ -169,31 +248,48 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
               enterTo="opacity-100 translate-y-0"
               leave="transition ease-in duration-150"
               leaveFrom="opacity-100 translate-y-0"
-							leaveTo="opacity-0 translate-y-1">
+              leaveTo="opacity-0 translate-y-1"
+            >
               <Popover.Panel className="absolute z-10 w-screen right-1/2 translate-x-1/3 max-w-sm">
                 <div className="bg-white p-4 rounded-lg grid grid-cols-2 gap-2 w-full drop-shadow-xl">
                   <Button
                     onClick={() => updateAccountType(row.original, "student")}
                     className="text-sm !py-2 !px-4"
-										disabled={row.original.type === "student" || !PERMISSIONS.generateCode["student"].includes(user.type)}>
+                    disabled={
+                      row.original.type === "student" ||
+                      !PERMISSIONS.generateCode["student"].includes(user.type)
+                    }
+                  >
                     Student
                   </Button>
                   <Button
                     onClick={() => updateAccountType(row.original, "teacher")}
                     className="text-sm !py-2 !px-4"
-										disabled={row.original.type === "teacher" || !PERMISSIONS.generateCode["teacher"].includes(user.type)}>
+                    disabled={
+                      row.original.type === "teacher" ||
+                      !PERMISSIONS.generateCode["teacher"].includes(user.type)
+                    }
+                  >
                     Teacher
                   </Button>
                   <Button
                     onClick={() => updateAccountType(row.original, "corporate")}
                     className="text-sm !py-2 !px-4"
-										disabled={row.original.type === "corporate" || !PERMISSIONS.generateCode["corporate"].includes(user.type)}>
+                    disabled={
+                      row.original.type === "corporate" ||
+                      !PERMISSIONS.generateCode["corporate"].includes(user.type)
+                    }
+                  >
                     Corporate
                   </Button>
                   <Button
                     onClick={() => updateAccountType(row.original, "admin")}
                     className="text-sm !py-2 !px-4"
-										disabled={row.original.type === "admin" || !PERMISSIONS.generateCode["admin"].includes(user.type)}>
+                    disabled={
+                      row.original.type === "admin" ||
+                      !PERMISSIONS.generateCode["admin"].includes(user.type)
+                    }
+                  >
                     Admin
                   </Button>
                 </div>
@@ -201,16 +297,26 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
             </Transition>
           </Popover>
         )}
-				{!row.original.isVerified && PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
-					<div data-tip="Verify User" className="cursor-pointer tooltip" onClick={() => verifyAccount(row.original)}>
+        {!row.original.isVerified &&
+          PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
+            <div
+              data-tip="Verify User"
+              className="cursor-pointer tooltip"
+              onClick={() => verifyAccount(row.original)}
+            >
               <BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
             </div>
           )}
         {PERMISSIONS.updateUser[row.original.type].includes(user.type) && (
           <div
-						data-tip={row.original.status === "disabled" ? "Enable User" : "Disable User"}
+            data-tip={
+              row.original.status === "disabled"
+                ? "Enable User"
+                : "Disable User"
+            }
             className="cursor-pointer tooltip"
-						onClick={() => toggleDisableAccount(row.original)}>
+            onClick={() => toggleDisableAccount(row.original)}
+          >
             {row.original.status === "disabled" ? (
               <BsCheckCircle className="hover:text-mti-purple-light transition ease-in-out duration-300" />
             ) : (
@@ -219,7 +325,11 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
           </div>
         )}
         {PERMISSIONS.deleteUser[row.original.type].includes(user.type) && (
-					<div data-tip="Delete" className="cursor-pointer tooltip" onClick={() => deleteAccount(row.original)}>
+          <div
+            data-tip="Delete"
+            className="cursor-pointer tooltip"
+            onClick={() => deleteAccount(row.original)}
+          >
             <BsTrash className="hover:text-mti-purple-light transition ease-in-out duration-300" />
           </div>
         )}
@@ -230,7 +340,10 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
   const demographicColumns = [
     columnHelper.accessor("name", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
+        >
           <span>Name</span>
           <SorterArrow name="name" />
         </button>
@@ -238,31 +351,49 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
       cell: ({ row, getValue }) => (
         <div
           className={clsx(
-						PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) &&
-							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+            PERMISSIONS.updateExpiryDate[row.original.type].includes(
+              user.type
+            ) &&
+              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
           )}
-					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) ? setSelectedUser(row.original) : null)}>
+          onClick={() =>
+            PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
+              ? setSelectedUser(row.original)
+              : null
+          }
+        >
           {getValue()}
         </div>
       ),
     }),
     columnHelper.accessor("demographicInformation.country", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "country"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() => setSorter((prev) => selectSorter(prev, "country"))}
+        >
           <span>Country</span>
           <SorterArrow name="country" />
         </button>
       ) as any,
       cell: (info) =>
         info.getValue()
-					? `${countryCodes.findOne("countryCode" as any, info.getValue()).flag} ${
+          ? `${
+              countryCodes.findOne("countryCode" as any, info.getValue()).flag
+            } ${
               countries[info.getValue() as unknown as keyof TCountries].name
-					  } (+${countryCodes.findOne("countryCode" as any, info.getValue()).countryCallingCode})`
+            } (+${
+              countryCodes.findOne("countryCode" as any, info.getValue())
+                .countryCallingCode
+            })`
           : "Not available",
     }),
     columnHelper.accessor("demographicInformation.phone", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() => setSorter((prev) => selectSorter(prev, "phone"))}
+        >
           <span>Phone</span>
           <SorterArrow name="phone" />
         </button>
@@ -270,20 +401,37 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
       cell: (info) => info.getValue() || "Not available",
       enableSorting: true,
     }),
-		columnHelper.accessor((x) => (x.type === "corporate" ? x.demographicInformation?.position : x.demographicInformation?.employment), {
+    columnHelper.accessor(
+      (x) =>
+        x.type === "corporate"
+          ? x.demographicInformation?.position
+          : x.demographicInformation?.employment,
+      {
         id: "employment",
         header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
+          <button
+            className="flex gap-2 items-center"
+            onClick={() =>
+              setSorter((prev) => selectSorter(prev, "employment"))
+            }
+          >
             <span>Employment/Position</span>
             <SorterArrow name="employment" />
           </button>
         ) as any,
-			cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
+        cell: (info) =>
+          (info.row.original.type === "corporate"
+            ? info.getValue()
+            : capitalize(info.getValue())) || "Not available",
         enableSorting: true,
-		}),
+      }
+    ),
     columnHelper.accessor("demographicInformation.gender", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() => setSorter((prev) => selectSorter(prev, "gender"))}
+        >
           <span>Gender</span>
           <SorterArrow name="gender" />
         </button>
@@ -293,7 +441,10 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
     }),
     {
       header: (
-				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
+        <span
+          className="cursor-pointer"
+          onClick={() => setShowDemographicInformation((prev) => !prev)}
+        >
           Switch
         </span>
       ),
@@ -305,7 +456,10 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
   const defaultColumns = [
     columnHelper.accessor("name", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "name"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() => setSorter((prev) => selectSorter(prev, "name"))}
+        >
           <span>Name</span>
           <SorterArrow name="name" />
         </button>
@@ -313,17 +467,30 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
       cell: ({ row, getValue }) => (
         <div
           className={clsx(
-						PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) &&
-							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+            PERMISSIONS.updateExpiryDate[row.original.type].includes(
+              user.type
+            ) &&
+              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
           )}
-					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) ? setSelectedUser(row.original) : null)}>
-					{row.original.type === "corporate" ? row.original.corporateInformation?.companyInformation?.name || getValue() : getValue()}
+          onClick={() =>
+            PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
+              ? setSelectedUser(row.original)
+              : null
+          }
+        >
+          {row.original.type === "corporate"
+            ? row.original.corporateInformation?.companyInformation?.name ||
+              getValue()
+            : getValue()}
         </div>
       ),
     }),
     columnHelper.accessor("email", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "email"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() => setSorter((prev) => selectSorter(prev, "email"))}
+        >
           <span>E-mail</span>
           <SorterArrow name="email" />
         </button>
@@ -331,17 +498,27 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
       cell: ({ row, getValue }) => (
         <div
           className={clsx(
-						PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) &&
-							"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer",
+            PERMISSIONS.updateExpiryDate[row.original.type].includes(
+              user.type
+            ) &&
+              "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
           )}
-					onClick={() => (PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) ? setSelectedUser(row.original) : null)}>
+          onClick={() =>
+            PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type)
+              ? setSelectedUser(row.original)
+              : null
+          }
+        >
           {getValue()}
         </div>
       ),
     }),
     columnHelper.accessor("type", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "type"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() => setSorter((prev) => selectSorter(prev, "type"))}
+        >
           <span>Type</span>
           <SorterArrow name="type" />
         </button>
@@ -350,29 +527,54 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
     }),
     columnHelper.accessor("corporateInformation.companyInformation.name", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}
+        >
           <span>Company Name</span>
           <SorterArrow name="companyName" />
         </button>
       ) as any,
-			cell: (info) => <CompanyNameCell user={info.row.original} users={users} groups={groups} />,
+      cell: (info) => (
+        <CompanyNameCell
+          user={info.row.original}
+          users={users}
+          groups={groups}
+        />
+      ),
     }),
     columnHelper.accessor("subscriptionExpirationDate", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}
+        >
           <span>Expiry Date</span>
           <SorterArrow name="expiryDate" />
         </button>
       ) as any,
       cell: (info) => (
-				<span className={clsx(info.getValue() ? expirationDateColor(moment(info.getValue()).toDate()) : "")}>
-					{!info.getValue() ? "No expiry date" : moment(info.getValue()).format("DD/MM/YYYY")}
+        <span
+          className={clsx(
+            info.getValue()
+              ? expirationDateColor(moment(info.getValue()).toDate())
+              : ""
+          )}
+        >
+          {!info.getValue()
+            ? "No expiry date"
+            : moment(info.getValue()).format("DD/MM/YYYY")}
         </span>
       ),
     }),
     columnHelper.accessor("isVerified", {
       header: (
-				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "verification"))}>
+        <button
+          className="flex gap-2 items-center"
+          onClick={() =>
+            setSorter((prev) => selectSorter(prev, "verification"))
+          }
+        >
           <span>Verification</span>
           <SorterArrow name="verification" />
         </button>
@@ -383,8 +585,9 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
             className={clsx(
               "w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
               "transition duration-300 ease-in-out",
-							info.getValue() && "!bg-mti-purple-light ",
-						)}>
+              info.getValue() && "!bg-mti-purple-light "
+            )}
+          >
             <BsCheck color="white" className="w-full h-full" />
           </div>
         </div>
@@ -392,7 +595,10 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
     }),
     {
       header: (
-				<span className="cursor-pointer" onClick={() => setShowDemographicInformation((prev) => !prev)}>
+        <span
+          className="cursor-pointer"
+          onClick={() => setShowDemographicInformation((prev) => !prev)}
+        >
           Switch
         </span>
       ),
@@ -412,15 +618,21 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 
   const sortFunction = async (a: User, b: User) => {
     if (sorter === "name" || sorter === reverseString("name"))
-			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+      return sorter === "name"
+        ? a.name.localeCompare(b.name)
+        : b.name.localeCompare(a.name);
 
     if (sorter === "email" || sorter === reverseString("email"))
-			return sorter === "email" ? a.email.localeCompare(b.email) : b.email.localeCompare(a.email);
+      return sorter === "email"
+        ? a.email.localeCompare(b.email)
+        : b.email.localeCompare(a.email);
 
     if (sorter === "type" || sorter === reverseString("type"))
       return sorter === "type"
-				? userTypes.findIndex((t) => a.type === t) - userTypes.findIndex((t) => b.type === t)
-				: userTypes.findIndex((t) => b.type === t) - userTypes.findIndex((t) => a.type === t);
+        ? userTypes.findIndex((t) => a.type === t) -
+            userTypes.findIndex((t) => b.type === t)
+        : userTypes.findIndex((t) => b.type === t) -
+            userTypes.findIndex((t) => a.type === t);
 
     if (sorter === "verification" || sorter === reverseString("verification"))
       return sorter === "verification"
@@ -428,73 +640,138 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
         : b.isVerified.toString().localeCompare(a.isVerified.toString());
 
     if (sorter === "expiryDate" || sorter === reverseString("expiryDate")) {
-			if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate) return sorter === "expiryDate" ? -1 : 1;
-			if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return sorter === "expiryDate" ? 1 : -1;
-			if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate) return 0;
-			if (moment(a.subscriptionExpirationDate).isAfter(b.subscriptionExpirationDate)) return sorter === "expiryDate" ? -1 : 1;
-			if (moment(b.subscriptionExpirationDate).isAfter(a.subscriptionExpirationDate)) return sorter === "expiryDate" ? 1 : -1;
+      if (!a.subscriptionExpirationDate && b.subscriptionExpirationDate)
+        return sorter === "expiryDate" ? -1 : 1;
+      if (a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
+        return sorter === "expiryDate" ? 1 : -1;
+      if (!a.subscriptionExpirationDate && !b.subscriptionExpirationDate)
+        return 0;
+      if (
+        moment(a.subscriptionExpirationDate).isAfter(
+          b.subscriptionExpirationDate
+        )
+      )
+        return sorter === "expiryDate" ? -1 : 1;
+      if (
+        moment(b.subscriptionExpirationDate).isAfter(
+          a.subscriptionExpirationDate
+        )
+      )
+        return sorter === "expiryDate" ? 1 : -1;
       return 0;
     }
 
     if (sorter === "country" || sorter === reverseString("country")) {
-			if (!a.demographicInformation?.country && b.demographicInformation?.country) return sorter === "country" ? -1 : 1;
-			if (a.demographicInformation?.country && !b.demographicInformation?.country) return sorter === "country" ? 1 : -1;
-			if (!a.demographicInformation?.country && !b.demographicInformation?.country) return 0;
+      if (
+        !a.demographicInformation?.country &&
+        b.demographicInformation?.country
+      )
+        return sorter === "country" ? -1 : 1;
+      if (
+        a.demographicInformation?.country &&
+        !b.demographicInformation?.country
+      )
+        return sorter === "country" ? 1 : -1;
+      if (
+        !a.demographicInformation?.country &&
+        !b.demographicInformation?.country
+      )
+        return 0;
 
       return sorter === "country"
-				? a.demographicInformation!.country.localeCompare(b.demographicInformation!.country)
-				: b.demographicInformation!.country.localeCompare(a.demographicInformation!.country);
+        ? a.demographicInformation!.country.localeCompare(
+            b.demographicInformation!.country
+          )
+        : b.demographicInformation!.country.localeCompare(
+            a.demographicInformation!.country
+          );
     }
 
     if (sorter === "phone" || sorter === reverseString("phone")) {
-			if (!a.demographicInformation?.phone && b.demographicInformation?.phone) return sorter === "phone" ? -1 : 1;
-			if (a.demographicInformation?.phone && !b.demographicInformation?.phone) return sorter === "phone" ? 1 : -1;
-			if (!a.demographicInformation?.phone && !b.demographicInformation?.phone) return 0;
+      if (!a.demographicInformation?.phone && b.demographicInformation?.phone)
+        return sorter === "phone" ? -1 : 1;
+      if (a.demographicInformation?.phone && !b.demographicInformation?.phone)
+        return sorter === "phone" ? 1 : -1;
+      if (!a.demographicInformation?.phone && !b.demographicInformation?.phone)
+        return 0;
 
       return sorter === "phone"
-				? a.demographicInformation!.phone.localeCompare(b.demographicInformation!.phone)
-				: b.demographicInformation!.phone.localeCompare(a.demographicInformation!.phone);
+        ? a.demographicInformation!.phone.localeCompare(
+            b.demographicInformation!.phone
+          )
+        : b.demographicInformation!.phone.localeCompare(
+            a.demographicInformation!.phone
+          );
     }
 
     if (sorter === "employment" || sorter === reverseString("employment")) {
-			const aSortingItem = a.type === "corporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
-			const bSortingItem = b.type === "corporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;
+      const aSortingItem =
+        a.type === "corporate"
+          ? a.demographicInformation?.position
+          : a.demographicInformation?.employment;
+      const bSortingItem =
+        b.type === "corporate"
+          ? b.demographicInformation?.position
+          : b.demographicInformation?.employment;
 
-			if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
-			if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
+      if (!aSortingItem && bSortingItem)
+        return sorter === "employment" ? -1 : 1;
+      if (aSortingItem && !bSortingItem)
+        return sorter === "employment" ? 1 : -1;
       if (!aSortingItem && !bSortingItem) return 0;
 
-			return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
+      return sorter === "employment"
+        ? aSortingItem!.localeCompare(bSortingItem!)
+        : bSortingItem!.localeCompare(aSortingItem!);
     }
 
     if (sorter === "gender" || sorter === reverseString("gender")) {
-			if (!a.demographicInformation?.gender && b.demographicInformation?.gender) return sorter === "employment" ? -1 : 1;
-			if (a.demographicInformation?.gender && !b.demographicInformation?.gender) return sorter === "employment" ? 1 : -1;
-			if (!a.demographicInformation?.gender && !b.demographicInformation?.gender) return 0;
+      if (!a.demographicInformation?.gender && b.demographicInformation?.gender)
+        return sorter === "employment" ? -1 : 1;
+      if (a.demographicInformation?.gender && !b.demographicInformation?.gender)
+        return sorter === "employment" ? 1 : -1;
+      if (
+        !a.demographicInformation?.gender &&
+        !b.demographicInformation?.gender
+      )
+        return 0;
 
       return sorter === "gender"
-				? a.demographicInformation!.gender.localeCompare(b.demographicInformation!.gender)
-				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
+        ? a.demographicInformation!.gender.localeCompare(
+            b.demographicInformation!.gender
+          )
+        : b.demographicInformation!.gender.localeCompare(
+            a.demographicInformation!.gender
+          );
     }
 
     if (sorter === "companyName" || sorter === reverseString("companyName")) {
       const aCorporateName = getUserCompanyName(a, users, groups);
       const bCorporateName = getUserCompanyName(b, users, groups);
-			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
-			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
+      if (!aCorporateName && bCorporateName)
+        return sorter === "companyName" ? -1 : 1;
+      if (aCorporateName && !bCorporateName)
+        return sorter === "companyName" ? 1 : -1;
       if (!aCorporateName && !bCorporateName) return 0;
 
-			return sorter === "companyName" ? aCorporateName.localeCompare(bCorporateName) : bCorporateName.localeCompare(aCorporateName);
+      return sorter === "companyName"
+        ? aCorporateName.localeCompare(bCorporateName)
+        : bCorporateName.localeCompare(aCorporateName);
     }
 
     return a.id.localeCompare(b.id);
   };
 
-	const {rows: filteredRows, renderSearch} = useListSearch<User>(searchFields, displayUsers);
+  const { rows: filteredRows, renderSearch } = useListSearch<User>(
+    searchFields,
+    displayUsers
+  );
 
   const table = useReactTable({
     data: filteredRows,
-		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
+    columns: (!showDemographicInformation
+      ? defaultColumns
+      : demographicColumns) as any,
     getCoreRowModel: getCoreRowModel(),
   });
 
@@ -511,6 +788,8 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
   };
 
   return (
+	<>
+	{renderHeader && renderHeader(displayUsers.length)}
     <div className="w-full">
       <Modal isOpen={!!selectedUser} onClose={() => setSelectedUser(undefined)}>
         <>
@@ -519,7 +798,8 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
               <UserCard
                 loggedInUser={user}
                 onViewStudents={
-									selectedUser.type === "corporate" || selectedUser.type === "teacher"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "teacher"
                     ? () => {
                         appendUserFilters({
                           id: "view-students",
@@ -529,7 +809,11 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });
@@ -539,7 +823,8 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
                     : undefined
                 }
                 onViewTeachers={
-									selectedUser.type === "corporate" || selectedUser.type === "student"
+                  selectedUser.type === "corporate" ||
+                  selectedUser.type === "student"
                     ? () => {
                         appendUserFilters({
                           id: "view-teachers",
@@ -549,7 +834,11 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
                           id: "belongs-to-admin",
                           filter: (x: User) =>
                             groups
-															.filter((g) => g.admin === selectedUser.id || g.participants.includes(selectedUser.id))
+                              .filter(
+                                (g) =>
+                                  g.admin === selectedUser.id ||
+                                  g.participants.includes(selectedUser.id)
+                              )
                               .flatMap((g) => g.participants)
                               .includes(x.id),
                         });
@@ -559,7 +848,8 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
                     : undefined
                 }
                 onViewCorporate={
-									selectedUser.type === "teacher" || selectedUser.type === "student"
+                  selectedUser.type === "teacher" ||
+                  selectedUser.type === "student"
                     ? () => {
                         appendUserFilters({
                           id: "view-corporate",
@@ -569,7 +859,9 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
                           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),
                         });
@@ -591,7 +883,11 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
       <div className="w-full flex flex-col gap-2">
         <div className="w-full flex gap-2 items-end">
           {renderSearch()}
-					<Button className="w-full max-w-[200px] mb-1" variant="outline" onClick={downloadExcel}>
+          <Button
+            className="w-full max-w-[200px] mb-1"
+            variant="outline"
+            onClick={downloadExcel}
+          >
             Download List
           </Button>
         </div>
@@ -601,7 +897,12 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
                   <th className="py-4 px-4 text-left" key={header.id}>
-										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
                   </th>
                 ))}
               </tr>
@@ -609,7 +910,10 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
           </thead>
           <tbody className="px-2">
             {table.getRowModel().rows.map((row) => (
-							<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+              <tr
+                className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
+                key={row.id}
+              >
                 {row.getVisibleCells().map((cell) => (
                   <td className="px-4 py-2 items-center w-fit" key={cell.id}>
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
@@ -621,5 +925,6 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
         </table>
       </div>
     </div>
+	</>
   );
 }

src/pages/list/users.tsx

@@ -26,7 +26,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
       redirect: {
         destination: "/login",
         permanent: false,
-			}
+      },
     };
   }
 
@@ -38,7 +38,10 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 export default function UsersListPage() {
   const { user } = useUser();
   const { users } = useUsers();
-	const [filters, clearFilters] = useFilterStore((state) => [state.userFilters, state.clearUserFilters]);
+  const [filters, clearFilters] = useFilterStore((state) => [
+    state.userFilters,
+    state.clearUserFilters,
+  ]);
   const router = useRouter();
 
   return (
@@ -56,20 +59,25 @@ export default function UsersListPage() {
 
       {user && (
         <Layout user={user}>
+          <UserList
+            user={user}
+            filters={filters.map((f) => f.filter)}
+            renderHeader={(total) => (
               <div className="flex flex-col gap-4">
                 <div
                   onClick={() => {
                     clearFilters();
                     router.back();
                   }}
-							className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
+                  className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300"
+                >
                   <BsArrowLeft className="text-xl" />
                   <span>Back</span>
                 </div>
-						<h2 className="text-2xl font-semibold">Users ({filters.map((f) => f.filter).reduce((d, f) => d.filter(f), users).length})</h2>
+                <h2 className="text-2xl font-semibold">Users ({total})</h2>
               </div>
-
-					<UserList user={user} filters={filters.map((f) => f.filter)} />
+            )}
+          />
         </Layout>
       )}
     </>