Add admin page

Question table should have a search functionality that searches by
question name. Mantine-datatable can be used for enhanced table
features in the future.

Author: NorbertLoh

frontend/peerprep/app/pages/adminpage.tsx

@@ -0,0 +1,74 @@
+import {
+  Grid,
+  useMantineTheme,
+  Button
+} from "@mantine/core";
+
+import StatsCard from "../components/statscard";
+import QuestionsTable from "~/components/table/questionstable";
+import type {QuestionHistory} from "../components/table/questionstable";
+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<QuestionHistory[]>([
+    {
+        question: "Two Sum",
+        dateAdded: "2024-10-01",
+        lastEdited: "2024-10-01",
+        difficulty: "Easy",
+        topic: "Array",
+    },
+  ]);
+
+  return (
+    <Grid>
+      <Grid.Col span={12}>
+        <Grid gutter="md" align="center">
+          <Grid.Col span={{ base: 6, md: 2 }}>
+            <StatsCard
+              title="Total Questions"
+              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 }}>
+            <Button fullWidth onClick={() => {}}>Add Question</Button>
+          </Grid.Col>
+        </Grid>
+      </Grid.Col>
+      <Grid.Col span={12}>
+        <QuestionsTable
+          data={data}
+        />
+      </Grid.Col>
+    </Grid>
+  );
+}

frontend/peerprep/app/pages/userpage.tsx

@@ -4,8 +4,8 @@ import {
 } from "@mantine/core";
 
 import StatsCard from "../components/statscard";
-import HistoryTable from "../components/table/table";
-import type {InterviewHistory} from "../components/table/table";
+import HistoryTable from "../components/table/historytable";
+import type {InterviewHistory} from "../components/table/historytable";
 import QueueModal from "~/components/queueupmodal/queuemodal";
 
 import { useState } from "react";

frontend/peerprep/app/root.tsx

@@ -144,10 +144,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export default function App() {
   const location = useLocation();
-  const linksWithHeader = ["/user"];
+  const linksWithoutHeader = ["/", "/login", "/signup"];
 
   const isHeader = () => {
-    return linksWithHeader.includes(location.pathname);
+    return !linksWithoutHeader.includes(location.pathname);
   };
 
   return (

frontend/peerprep/app/routes.ts

@@ -5,4 +5,5 @@ export default [
     route("login", "pages/login.tsx"),
     route("signup", "pages/signup.tsx"),
     route("user", "pages/userpage.tsx"),
+    route("admin", "pages/adminpage.tsx"),
 ] satisfies RouteConfig;