create status component, compose all student components, refactor registration form

Author: aileenr19

frontend/src/app/RegistrationForm/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+import Link from "next/link";
+import { useState } from "react";
+import * as z from "zod";
+import { default as PartyRegistrationForm, default as partyFormSchema } from "../../components/PartyRegistrationForm";
+
+export default function RegistrationForm() {
+    type partyFormValues = z.infer<typeof partyFormSchema>;
+    const [data, setData] = useState<partyFormValues | null>(null);
+    const handleSubmit = async (values: partyFormValues) => {
+        try {
+            const res = await fetch("http://localhost:8000/party/", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                // credentials: "include", 
+                body: JSON.stringify(values),
+            });
+
+            if (!res.ok) {
+                console.error("Failed to create a party");
+                return;
+            }
+
+            const createdParty = await res.json();
+            console.log("Party created:", createdParty);
+
+        } catch (error) {
+            console.error("Error submitting form:", error);
+        }
+    };
+
+    return (
+        <div className="px-128 py-8">
+            <Link href="/StudentDashboard">
+                Back
+            </Link>
+            <div className="font-bold pb-4">Off Campus Student Life Party Registration Form</div>
+            <PartyRegistrationForm onSubmit={handleSubmit} />
+        </div>
+    );
+}

frontend/src/app/StudentDashboard/page.tsx

@@ -0,0 +1,19 @@
+import RegistrationTracker from "@/components/RegistrationTracker";
+import StatusComponent from "@/components/StatusComponent";
+import { PARTIES } from "@/lib/mockData";
+import Link from "next/link";
+export default function StudentDashboard() {
+    return (
+        <div className="px-20 py-2 flex flex-col gap-8 max-w-4xl mx-auto">
+            <div className="font-semibold text-2xl">Events</div>
+            <Link href="/RegistrationForm">
+                <button className="px-4 py-2 rounded-lg bg-black text-white">
+                    Registration Form
+                </button>
+            </Link>
+            <RegistrationTracker parties={PARTIES.filter(party => party.contactOne.id === 4)} />
+            <div>Party Smart Course </div>
+            <StatusComponent completion_date={null} expiration_date={null} />
+        </div>
+    );
+}

frontend/src/components/StatusComponent.tsx

@@ -0,0 +1,50 @@
+import alertTriangleIcon from "@/components/icons/alert-triangle.svg";
+import checkIcon from "@/components/icons/check-circle.svg";
+import { Card, CardContent } from "@/components/ui/card";
+import Image from "next/image";
+
+type CompletionCardProps = {
+    completion_date: string | null;
+    expiration_date: string | null;
+};
+
+export default function StatusComponent({ completion_date, expiration_date }: CompletionCardProps) {
+    const isCompleted = completion_date && expiration_date;
+
+    return (
+        <Card className="p-4 rounded-2xl shadow-sm w-full bg-white">
+            <CardContent className="p-0 flex flex-col gap-1 text-sm">
+
+                {isCompleted ? (
+                    <>
+                        <div className="flex items-center gap-2 text-gray-800">
+                            <Image src={checkIcon} alt="check icon" />
+                            <span>
+                                Completed on <strong>{completion_date}</strong>
+                            </span>
+                        </div>
+
+                        <div className="italic text-[#09294E]">
+                            Expires {expiration_date}
+                        </div>
+
+                    </>
+                ) : (
+                    <div>
+                        <div className="flex items-center gap-2 text-gray-800">
+                            <Image src={alertTriangleIcon} alt="alert icon" />
+                            <span>
+                                Course not completed
+                            </span>
+                        </div>
+                        <a href="#" className="text-blue-600 underline text-sm">
+                            Schedule a meeting
+                        </a>
+                    </div>
+                )}
+
+            </CardContent>
+        </Card>
+    );
+}
+