Added an Invite list to the payment due page as well

src/dashboards/Student.tsx

@@ -1,5 +1,6 @@
 import Button from "@/components/Low/Button";
 import ProgressBar from "@/components/Low/ProgressBar";
+import InviteCard from "@/components/Medium/InviteCard";
 import PayPalPayment from "@/components/PayPalPayment";
 import ProfileSummary from "@/components/ProfileSummary";
 import useAssignments from "@/hooks/useAssignments";
@@ -102,71 +103,6 @@ export default function StudentDashboard({ user }: Props) {
     });
   };
 
-  const InviteCard = (invite: Invite) => {
-    const [isLoading, setIsLoading] = useState(false);
-
-    const inviter = users.find((u) => u.id === invite.from);
-    const name = !inviter
-      ? null
-      : inviter.type === "corporate"
-        ? inviter.corporateInformation?.companyInformation?.name || inviter.name
-        : inviter.name;
-
-    const decide = (decision: "accept" | "decline") => {
-      if (!confirm(`Are you sure you want to ${decision} this invite?`)) return;
-
-      setIsLoading(true);
-      axios
-        .get(`/api/invites/${decision}/${invite.id}`)
-        .then(() => {
-          toast.success(
-            `Successfully ${decision === "accept" ? "accepted" : "declined"} the invite!`,
-            { toastId: "success" },
-          );
-          reloadInvites();
-        })
-        .catch((e) => {
-          toast.success(`Something went wrong, please try again later!`, {
-            toastId: "error",
-          });
-          reloadInvites();
-        })
-        .finally(() => setIsLoading(false));
-    };
-
-    return (
-      <div className="border-mti-gray-anti-flash flex min-w-[200px] flex-col gap-6 rounded-xl border p-4 text-black">
-        <span>Invited by {name}</span>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => decide("accept")}
-            disabled={isLoading}
-            className="bg-mti-green-ultralight hover:bg-mti-green-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
-          >
-            {!isLoading && "Accept"}
-            {isLoading && (
-              <div className="flex items-center justify-center">
-                <BsArrowRepeat className="animate-spin text-white" size={25} />
-              </div>
-            )}
-          </button>
-          <button
-            onClick={() => decide("decline")}
-            disabled={isLoading}
-            className="bg-mti-red-ultralight hover:bg-mti-red-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
-          >
-            {!isLoading && "Decline"}
-            {isLoading && (
-              <div className="flex items-center justify-center">
-                <BsArrowRepeat className="animate-spin text-white" size={25} />
-              </div>
-            )}
-          </button>
-        </div>
-      </div>
-    );
-  };
-
   return (
     <>
       {corporateUserToShow && (
@@ -356,7 +292,12 @@ export default function StudentDashboard({ user }: Props) {
           </div>
           <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
             {invites.map((invite) => (
-              <InviteCard key={invite.id} {...invite} />
+              <InviteCard
+                key={invite.id}
+                invite={invite}
+                users={users}
+                reload={reloadInvites}
+              />
             ))}
           </span>
         </section>