From 476e642f723e1d55a876c5bcafc94d7927bf2194 Mon Sep 17 00:00:00 2001
From: NorbertLoh <lohnorbert@gmail.com>
Date: Wed, 17 Sep 2025 23:02:49 +0800
Subject: [PATCH 1/4] Add UI for topic and difficulty selection for queue up

Multiselect is used for both topic and difficulty. However this
commit does not have any business and validation logic.
---
 .../queueupmodal/queuemodal.module.css        |  4 +
 .../components/queueupmodal/queuemodal.tsx    | 77 +++++++++++++++++++
 frontend/peerprep/app/pages/userpage.tsx      | 74 ++++++++++++++++++
 3 files changed, 155 insertions(+)
 create mode 100644 frontend/peerprep/app/components/queueupmodal/queuemodal.module.css
 create mode 100644 frontend/peerprep/app/components/queueupmodal/queuemodal.tsx
 create mode 100644 frontend/peerprep/app/pages/userpage.tsx

diff --git a/frontend/peerprep/app/components/queueupmodal/queuemodal.module.css b/frontend/peerprep/app/components/queueupmodal/queuemodal.module.css
new file mode 100644
index 000000000..8549225a8
--- /dev/null
+++ b/frontend/peerprep/app/components/queueupmodal/queuemodal.module.css
@@ -0,0 +1,4 @@
+.pill {
+    background-color: var(--mantine-color-brand-yellow-7);
+    color: var(--mantine-color-black);
+}
\ No newline at end of file
diff --git a/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx b/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx
new file mode 100644
index 000000000..d17dfa11b
--- /dev/null
+++ b/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx
@@ -0,0 +1,77 @@
+import { useDisclosure } from "@mantine/hooks";
+import { Modal, Button, MultiSelect, Text, Grid } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import classes from "./queuemodal.module.css";
+
+const topics = [
+  "Array",
+  "String",
+  "Dynamic Programming",
+  "Backtracking",
+  "Greedy",
+  "Graph",
+  "Tree",
+  "Linked List",
+  "Sorting",
+  "Searching",
+];
+
+const difficulties = ["Easy", "Medium", "Hard"];
+
+export default function QueueModal() {
+  const [opened, { open, close }] = useDisclosure(false);
+  const form = useForm({
+    initialValues: {
+      topic: [],
+      difficulty: [],
+    },
+  });
+
+  return (
+    <>
+      <Modal
+        opened={opened}
+        onClose={close}
+        c="white"
+        title="Select Topic and Difficulty"
+      >
+        <form onSubmit={form.onSubmit((values) => console.log(values))}>
+          <Grid>
+            <Grid.Col span={12}>
+              <MultiSelect
+                label="Topic"
+                placeholder="Pick values"
+                data={topics}
+                searchable
+                {...form.getInputProps("topic")}
+                classNames={{
+                  pill: classes.pill,
+                }}
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <MultiSelect
+                label="Difficulty"
+                placeholder="Pick values"
+                data={difficulties}
+                searchable
+                {...form.getInputProps("difficulty")}
+                classNames={{
+                  pill: classes.pill,
+                }}
+              />
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Button fullWidth type="submit" mt="md" onClick={close}>
+                Confirm
+              </Button>
+            </Grid.Col>
+          </Grid>
+        </form>
+      </Modal>
+      <Button fullWidth onClick={open}>
+        Queue Up
+      </Button>
+    </>
+  );
+}
diff --git a/frontend/peerprep/app/pages/userpage.tsx b/frontend/peerprep/app/pages/userpage.tsx
new file mode 100644
index 000000000..1c3ee76c0
--- /dev/null
+++ b/frontend/peerprep/app/pages/userpage.tsx
@@ -0,0 +1,74 @@
+import {
+  Grid,
+  Button,
+  useMantineTheme,
+} from "@mantine/core";
+
+import StatsCard from "../components/statscard";
+import HistoryTable from "../components/table/table";
+import type {InterviewHistory} from "../components/table/table";
+import QueueModal from "~/components/queueupmodal/queuemodal";
+
+import { useState } from "react";
+
+export function meta() {
+  return [
+    { title: "PeerPrep - Homepage" },
+    { name: "description", content: "Welcome to PeerPrep!" },
+  ];
+}
+
+export default function Userpage() {
+  const theme = useMantineTheme();
+
+  const [data, ] = useState<InterviewHistory[]>([
+    {
+      question: "Two Sum",
+      completionDate: "2024-10-01",
+      difficulty: "Easy",
+      topic: "Array",
+      language: "JavaScript",
+    },
+  ]);
+
+  return (
+    <Grid>
+      <Grid.Col span={12}>
+        <Grid gutter="md" align="center">
+          <Grid.Col span={{ base: 6, md: 2 }}>
+            <StatsCard
+              title="Interviews"
+              stat="1,234"
+              color={theme.colors.gray[0]}
+            />
+          </Grid.Col>
+          <Grid.Col span={{ base: 6, md: 2 }}>
+            <StatsCard
+              title="Easy"
+              stat="1,234"
+              color={theme.colors.green[5]}
+            />
+          </Grid.Col>
+          <Grid.Col span={{ base: 6, md: 2 }}>
+            <StatsCard
+              title="Medium"
+              stat="1,234"
+              color={theme.colors.yellow[5]}
+            />
+          </Grid.Col>
+          <Grid.Col span={{ base: 6, md: 2 }}>
+            <StatsCard title="Hard" stat="1,234" color={theme.colors.red[5]} />
+          </Grid.Col>
+          <Grid.Col span={{ base: 12, md: 2 }} offset={{ md: 2 }}>
+            <QueueModal />
+          </Grid.Col>
+        </Grid>
+      </Grid.Col>
+      <Grid.Col span={12}>
+        <HistoryTable
+          data={data}
+        />
+      </Grid.Col>
+    </Grid>
+  );
+}

From 3a7915e08214b738f72a93b9ea47777dcf451ece Mon Sep 17 00:00:00 2001
From: "NORBERT_THINK\\Funky" <lohnorbert@gmail.com>
Date: Thu, 18 Sep 2025 15:24:30 +0800
Subject: [PATCH 2/4] Add language select option to modal

---
 .../app/components/queueupmodal/queuemodal.tsx        | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx b/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx
index d17dfa11b..2147c1070 100644
--- a/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx
+++ b/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx
@@ -1,5 +1,5 @@
 import { useDisclosure } from "@mantine/hooks";
-import { Modal, Button, MultiSelect, Text, Grid } from "@mantine/core";
+import { Modal, Button, MultiSelect, Text, Grid, Select } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import classes from "./queuemodal.module.css";
 
@@ -61,6 +61,15 @@ export default function QueueModal() {
                 }}
               />
             </Grid.Col>
+            <Grid.Col span={12}>
+              <Select
+                label="Language"
+                placeholder="Pick one"
+                data={["C++", "Python", "Java", "JavaScript"]}
+                searchable
+                {...form.getInputProps("language")}
+              />
+            </Grid.Col>
             <Grid.Col span={12}>
               <Button fullWidth type="submit" mt="md" onClick={close}>
                 Confirm

From d83799c6fba0e0ff4a110115ee2bf5086ae94160 Mon Sep 17 00:00:00 2001
From: "NORBERT_THINK\\Funky" <lohnorbert@gmail.com>
Date: Thu, 18 Sep 2025 15:36:40 +0800
Subject: [PATCH 3/4] Fix lint

---
 frontend/peerprep/app/components/queueupmodal/queuemodal.tsx | 2 +-
 frontend/peerprep/app/pages/userpage.tsx                     | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx b/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx
index 2147c1070..7be1524e5 100644
--- a/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx
+++ b/frontend/peerprep/app/components/queueupmodal/queuemodal.tsx
@@ -1,5 +1,5 @@
 import { useDisclosure } from "@mantine/hooks";
-import { Modal, Button, MultiSelect, Text, Grid, Select } from "@mantine/core";
+import { Modal, Button, MultiSelect, Grid, Select } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import classes from "./queuemodal.module.css";
 
diff --git a/frontend/peerprep/app/pages/userpage.tsx b/frontend/peerprep/app/pages/userpage.tsx
index 1c3ee76c0..3dc6aae5c 100644
--- a/frontend/peerprep/app/pages/userpage.tsx
+++ b/frontend/peerprep/app/pages/userpage.tsx
@@ -1,6 +1,5 @@
 import {
   Grid,
-  Button,
   useMantineTheme,
 } from "@mantine/core";
 

From 94b5aab819d53b3a3a750993d2ea610a6138d7b6 Mon Sep 17 00:00:00 2001
From: NorbertLoh <lohnorbert@gmail.com>
Date: Thu, 2 Oct 2025 23:26:04 +0800
Subject: [PATCH 4/4] Fix merge conflict

---
 frontend/peerprep/app/pages/userpage.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/frontend/peerprep/app/pages/userpage.tsx b/frontend/peerprep/app/pages/userpage.tsx
index b62f07b35..3dc6aae5c 100644
--- a/frontend/peerprep/app/pages/userpage.tsx
+++ b/frontend/peerprep/app/pages/userpage.tsx
@@ -58,13 +58,8 @@ export default function Userpage() {
           <Grid.Col span={{ base: 6, md: 2 }}>
             <StatsCard title="Hard" stat="1,234" color={theme.colors.red[5]} />
           </Grid.Col>
-<<<<<<< HEAD
           <Grid.Col span={{ base: 12, md: 2 }} offset={{ md: 2 }}>
             <QueueModal />
-=======
-          <Grid.Col span={{ base: 12, md: 1 }} offset={{ md: 3 }}>
-            <Button fullWidth>Queue Up</Button>
->>>>>>> dc243d0e2b1ee601dbc077ccaee9b876eac1d2d5
           </Grid.Col>
         </Grid>
       </Grid.Col>