UI for admin page

frontend/peerprep/app/components/table/historytable.tsx

@@ -0,0 +1,52 @@
+import { Button, Card, Divider, Table, Text, Pagination, Group } from "@mantine/core";
+import classes from "./table.module.css";
+
+export type InterviewHistory = {
+  question: string;
+  completionDate: string;
+  difficulty: string;
+  topic: string;
+  language: string;
+};
+
+export default function HistoryTable({ data }: { data: InterviewHistory[] }) {
+  const rows = data.map((row) => (
+    <Table.Tr key={row.question}>
+      <Table.Td>{row.question}</Table.Td>
+      <Table.Td ta="right">{row.completionDate}</Table.Td>
+      <Table.Td ta="right">{row.difficulty}</Table.Td>
+      <Table.Td ta="right">{row.topic}</Table.Td>
+      <Table.Td ta="right">{row.language}</Table.Td>
+      <Table.Td ta="right" style={{ width: 100 }}>
+        <Button>View</Button>
+      </Table.Td>
+    </Table.Tr>
+  ));
+  return (
+    <Card shadow="sm" padding="lg">
+      <Text fw={1000} size="xl" c="white" mb={"xs"}>
+        Interviews
+      </Text>
+      <Divider />
+      <Table.ScrollContainer minWidth={500}>
+        <Table c={"white"} highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Question</Table.Th>
+              <Table.Th className={classes.cell}>Completion Date</Table.Th>
+              <Table.Th className={classes.cell}>Difficulty</Table.Th>
+              <Table.Th className={classes.cell}>Topic</Table.Th>
+              <Table.Th className={classes.cell}>Language</Table.Th>
+              <Table.Th className={classes.cell}></Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+      <Group justify="center">
+      <Pagination total={5} siblings={3} defaultValue={1} />
+
+      </Group>
+    </Card>
+  );
+}

frontend/peerprep/app/components/table/questionstable.tsx

@@ -0,0 +1,60 @@
+import { Button, Card, Divider, Table, Text, Pagination, Group, Input } from "@mantine/core";
+import classes from "./table.module.css";
+
+export type QuestionHistory = {
+  question: string;
+  dateAdded: string;
+  lastEdited: string;
+  difficulty: string;
+  topic: string;
+};
+
+export default function QuestionsTable({ data }: { data: QuestionHistory[] }) {
+  const rows = data.map((row) => (
+    <Table.Tr key={row.question}>
+      <Table.Td>{row.question}</Table.Td>
+      <Table.Td ta="right">{row.dateAdded}</Table.Td>
+      <Table.Td ta="right">{row.lastEdited}</Table.Td>
+      <Table.Td ta="right">{row.difficulty}</Table.Td>
+      <Table.Td ta="right">{row.topic}</Table.Td>
+      <Table.Td ta="right" style={{ width: 50 }}>
+        <Button>Edit</Button>
+      </Table.Td>
+      <Table.Td ta="right" style={{ width: 50 }}>
+        <Button>Delete</Button>
+      </Table.Td>
+    </Table.Tr>
+  ));
+  return (
+    <Card shadow="sm" padding="lg">
+      <Group justify="space-between">
+        <Text fw={1000} size="xl" c="white" mb={"xs"}>
+          Questions
+        </Text>
+        <Input placeholder="Search" />
+      </Group>
+
+      <Divider />
+      <Table.ScrollContainer minWidth={500}>
+        <Table c={"white"} highlightOnHover>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>Question</Table.Th>
+              <Table.Th className={classes.cell}>Date Added</Table.Th>
+              <Table.Th className={classes.cell}>Last Edited</Table.Th>
+              <Table.Th className={classes.cell}>Difficulty</Table.Th>
+              <Table.Th className={classes.cell}>Topic</Table.Th>
+              <Table.Th className={classes.cell} style={{ width: 50 }}></Table.Th>
+              <Table.Th className={classes.cell} style={{ width: 50 }}></Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>{rows}</Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+      <Group justify="center">
+      <Pagination total={5} siblings={3} defaultValue={1} />
+
+      </Group>
+    </Card>
+  );
+}

frontend/peerprep/app/pages/adminpage.tsx

@@ -0,0 +1,73 @@
+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 { 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>
+  );
+}