Frontend restructuring

frontend/peerprep/app/leaderboard/layout.tsx → frontend/peerprep/app/(default)/home/layout.tsx

@@ -1,11 +1,11 @@
-export default function LeaderboardLayout({
+export default function HomeLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
+    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-6">
+      <div className="inline-block w-full min-w-lg text-center justify-center">
         {children}
       </div>
     </section>

frontend/peerprep/app/(default)/home/page.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import {
+  Progress,
+  Button,
+  Avatar,
+  Badge,
+  Spacer,
+  Divider,
+} from "@nextui-org/react";
+
+import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
+
+export default function Home() {
+  const friends = [
+    { name: "s_name", status: "online" },
+    { name: "thisisalongusername", status: "online" },
+    { name: "Friend3", status: "hidden" },
+    { name: "Friend4", status: "offline" },
+  ];
+
+  return (
+    <div className="flex flex-col items-center p-8">
+      <h1 className="text-3xl font-bold text-center">
+        Hey there! Ready for some coding challenges? 🧑‍💻
+      </h1>
+
+      {/* Layout container */}
+      <div className="flex flex-wrap justify-center gap-8 w-full mt-8">
+        {/* Left Column */}
+        <div className="flex-1 min-w-[300px]">
+          {/* Start a new session */}
+          <div className="flex gap-4">
+            <Card className="flex-1">
+              <CardBody>
+                <h3 className="text-lg font-semibold mb-2 p-3">
+                  Are you ready?
+                </h3>
+              </CardBody>
+              <CardFooter className="flex justify-end p-5">
+                <Button color="primary">Start a new session</Button>
+              </CardFooter>
+            </Card>
+            <Card className="flex-1">
+              <CardBody>
+                <h3 className="text-lg font-semibold mb-2 p-3">
+                  Current Score
+                </h3>
+                <h3 className="text-4xl font-bold">1600</h3>
+                <Progress value={75} color="primary" className="w" />
+                <span>75%</span>
+              </CardBody>
+            </Card>
+          </div>
+
+          <Spacer y={5} />
+
+          {/* Activity Heatmap */}
+          <Card>
+            <CardBody>
+              <h3 className="text-lg font-semibold mb-2">
+                Activities in the last year
+              </h3>
+              <div className="h-[100px] bg-gray-200">
+                {/* Placeholder for heatmap */}
+              </div>
+            </CardBody>
+          </Card>
+        </div>
+
+        {/* Right Column (Friends List) */}
+        <div className="flex-shrink-0 min-w-[250px]">
+          <Card>
+            <CardBody>
+              <h3 className="text-lg font-semibold mb-4">Friends</h3>
+              <ul className="space-y-4">
+                {friends.map((friend, idx) => (
+                  <li key={idx} className="flex items-center">
+                    <Avatar name={friend.name} />
+                    <div className="ml-4">
+                      <h4 className="font-medium">{friend.name}</h4>
+                      <Badge
+                        color={
+                          friend.status === "online"
+                            ? "success"
+                            : friend.status === "hidden"
+                              ? "warning"
+                              : "danger"
+                        }
+                      >
+                        {friend.status}
+                      </Badge>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </CardBody>
+          </Card>
+        </div>
+      </div>
+
+      {/* Activity Feed */}
+      <div className="w-full mt-8">
+        <Card>
+          <CardBody>
+            <h3 className="text-lg font-semibold mb-4">Activity Feed</h3>
+            <Divider />
+            <div className="space-y-4 mt-4">
+              {/* Mock activity feed */}
+              <div>
+                <h4 className="font-medium">
+                  JayCee completed 'Split Linked List in Parts'
+                </h4>
+                <p className="text-sm">
+                  With jweng5551 | Linked List - Medium | +200 points
+                </p>
+              </div>
+              <div>
+                <h4 className="font-medium">
+                  jweng5551 completed 'Split Linked List in Parts'
+                </h4>
+                <p className="text-sm">
+                  With JayCee | Linked List - Medium | +200 points
+                </p>
+              </div>
+              <div>
+                <h4 className="font-medium">
+                  DelilShad completed 'Regular Expression Matching'
+                </h4>
+                <p className="text-sm">
+                  With You | Dynamic Programming - Hard | +500 points
+                </p>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+
+      <Spacer y={2} />
+    </div>
+  );
+}

frontend/peerprep/app/layout.tsx → frontend/peerprep/app/(default)/layout.tsx

@@ -45,7 +45,7 @@ export default function RootLayout({
       <body
         className={clsx(
           "min-h-screen bg-background font-sans antialiased",
-          fontSans.variable,
+          fontSans.variable
         )}
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>

frontend/peerprep/app/(landing)/layout.tsx

@@ -0,0 +1,13 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div>{children}</div>;
+      </body>
+    </html>
+  );
+}

frontend/peerprep/app/(landing)/login/layout.tsx

@@ -0,0 +1,7 @@
+export default function LoginLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div>{children}</div>;
+}

frontend/peerprep/app/(landing)/login/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col items-center p-8">
+      <h1 className="text-3xl font-bold text-center">Placeholder login page</h1>
+    </div>
+  );
+}

frontend/peerprep/app/(landing)/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+export default function Landing() {
+  return (
+    <div className="flex flex-col items-center p-8">
+      <h1 className="text-3xl font-bold text-center">
+        Placeholder Landing page
+      </h1>
+    </div>
+  );
+}

frontend/peerprep/components/addquestionform.tsx

@@ -21,7 +21,7 @@ import { WysiMarkEditor } from "./wysimarkeditor";
 import BoxIcon from "./boxicons";
 
 import { capitalize, languages } from "@/utils/utils";
-import { complexityColorMap } from "@/app/questions-management/list/columns";
+import { complexityColorMap } from "@/app/(default)/questions-management/columns";
 
 interface AddQuestionFormProps {
   initialTitle?: string;
@@ -43,7 +43,7 @@ export default function AddQuestionForm({
   initialTestCases = [{ input: "", output: "" }],
 }: AddQuestionFormProps) {
   const NEXT_PUBLIC_QUESTION_SERVICE_URL = env(
-    "NEXT_PUBLIC_QUESTION_SERVICE_URL",
+    "NEXT_PUBLIC_QUESTION_SERVICE_URL"
   );
   const router = useRouter();
   const { theme } = useTheme();
@@ -67,7 +67,7 @@ export default function AddQuestionForm({
 
   const { data: categoryData, isLoading: categoryLoading } = useSWR(
     `${NEXT_PUBLIC_QUESTION_SERVICE_URL}/api/questions/categories/unique`,
-    fetcher,
+    fetcher
   );
 
   const uniqueCategories = React.useMemo(() => {
@@ -88,7 +88,7 @@ export default function AddQuestionForm({
   // Handle removing a category
   const removeCategory = (category: string) => {
     setCategories((prevCategories) =>
-      prevCategories.filter((cat) => cat !== category),
+      prevCategories.filter((cat) => cat !== category)
     );
   };
 
@@ -117,7 +117,7 @@ export default function AddQuestionForm({
   // Handle input change for test case
   const handleInputChange = (
     index: number,
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement>
   ) => {
     const updatedTestCases = [...testCases];
 
@@ -160,11 +160,11 @@ export default function AddQuestionForm({
       !templateCode.trim() ||
       !testCases.every(
         (testCase) =>
-          testCase.input.trim() !== "" && testCase.output.trim() !== "",
+          testCase.input.trim() !== "" && testCase.output.trim() !== ""
       )
     ) {
       setErrorMessage(
-        "Please fill in all the required fields before submitting.",
+        "Please fill in all the required fields before submitting."
       );
       setErrorModalOpen(true); // Show error modal with the validation message
 
@@ -179,7 +179,7 @@ export default function AddQuestionForm({
       complexity: selectedTab,
       templateCode,
       testCases: testCases.map(
-        (testCase) => `${testCase.input} -> ${testCase.output}`,
+        (testCase) => `${testCase.input} -> ${testCase.output}`
       ),
     };
 
@@ -195,7 +195,7 @@ export default function AddQuestionForm({
             "Content-Type": "application/json",
           },
           body: JSON.stringify(formData), // Convert data to JSON
-        },
+        }
       );
 
       if (response.ok) {
@@ -207,21 +207,21 @@ export default function AddQuestionForm({
         const errorData = await response.json();
 
         setErrorMessage(
-          errorData.error || "Failed to submit the question. Please try again.",
+          errorData.error || "Failed to submit the question. Please try again."
         );
         setErrorModalOpen(true);
       }
     } catch (error) {
       // Show error modal with generic error message
       setErrorMessage(
-        "An error occurred while submitting the question. Please try again later",
+        "An error occurred while submitting the question. Please try again later"
       );
       setErrorModalOpen(true);
     }
   };
 
   const handleCancel = () => {
-    router.push("/");
+    router.push("/questions-management");
   };
 
   return (
@@ -427,11 +427,11 @@ export default function AddQuestionForm({
         message={successMessage}
         onConfirm={() => {
           setSuccessModalOpen(false);
-          router.push("/");
+          router.push("/questions-management");
         }}
         onOpenChange={() => {
           setSuccessModalOpen;
-          router.push("/");
+          router.push("/questions-management");
         }}
       />
       <ErrorModal