Skip to content

Commit 9fe33a1

Browse files
NorbertLohNorbertLoh
authored
Merge pull request #32 from CS3219-AY2526Sem1/admin-page
UI for admin page
2 parents e3e083a + 8bcb199 commit 9fe33a1

File tree

3 files changed

+185
-0
lines changed

3 files changed

+185
-0
lines changed

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Button, Card, Divider, Table, Text, Pagination, Group } from "@mantine/core";
2+
import classes from "./table.module.css";
3+
4+
export type InterviewHistory = {
5+
question: string;
6+
completionDate: string;
7+
difficulty: string;
8+
topic: string;
9+
language: string;
10+
};
11+
12+
export default function HistoryTable({ data }: { data: InterviewHistory[] }) {
13+
const rows = data.map((row) => (
14+
<Table.Tr key={row.question}>
15+
<Table.Td>{row.question}</Table.Td>
16+
<Table.Td ta="right">{row.completionDate}</Table.Td>
17+
<Table.Td ta="right">{row.difficulty}</Table.Td>
18+
<Table.Td ta="right">{row.topic}</Table.Td>
19+
<Table.Td ta="right">{row.language}</Table.Td>
20+
<Table.Td ta="right" style={{ width: 100 }}>
21+
<Button>View</Button>
22+
</Table.Td>
23+
</Table.Tr>
24+
));
25+
return (
26+
<Card shadow="sm" padding="lg">
27+
<Text fw={1000} size="xl" c="white" mb={"xs"}>
28+
Interviews
29+
</Text>
30+
<Divider />
31+
<Table.ScrollContainer minWidth={500}>
32+
<Table c={"white"} highlightOnHover>
33+
<Table.Thead>
34+
<Table.Tr>
35+
<Table.Th>Question</Table.Th>
36+
<Table.Th className={classes.cell}>Completion Date</Table.Th>
37+
<Table.Th className={classes.cell}>Difficulty</Table.Th>
38+
<Table.Th className={classes.cell}>Topic</Table.Th>
39+
<Table.Th className={classes.cell}>Language</Table.Th>
40+
<Table.Th className={classes.cell}></Table.Th>
41+
</Table.Tr>
42+
</Table.Thead>
43+
<Table.Tbody>{rows}</Table.Tbody>
44+
</Table>
45+
</Table.ScrollContainer>
46+
<Group justify="center">
47+
<Pagination total={5} siblings={3} defaultValue={1} />
48+
49+
</Group>
50+
</Card>
51+
);
52+
}

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Button, Card, Divider, Table, Text, Pagination, Group, Input } from "@mantine/core";
2+
import classes from "./table.module.css";
3+
4+
export type QuestionHistory = {
5+
question: string;
6+
dateAdded: string;
7+
lastEdited: string;
8+
difficulty: string;
9+
topic: string;
10+
};
11+
12+
export default function QuestionsTable({ data }: { data: QuestionHistory[] }) {
13+
const rows = data.map((row) => (
14+
<Table.Tr key={row.question}>
15+
<Table.Td>{row.question}</Table.Td>
16+
<Table.Td ta="right">{row.dateAdded}</Table.Td>
17+
<Table.Td ta="right">{row.lastEdited}</Table.Td>
18+
<Table.Td ta="right">{row.difficulty}</Table.Td>
19+
<Table.Td ta="right">{row.topic}</Table.Td>
20+
<Table.Td ta="right" style={{ width: 50 }}>
21+
<Button>Edit</Button>
22+
</Table.Td>
23+
<Table.Td ta="right" style={{ width: 50 }}>
24+
<Button>Delete</Button>
25+
</Table.Td>
26+
</Table.Tr>
27+
));
28+
return (
29+
<Card shadow="sm" padding="lg">
30+
<Group justify="space-between">
31+
<Text fw={1000} size="xl" c="white" mb={"xs"}>
32+
Questions
33+
</Text>
34+
<Input placeholder="Search" />
35+
</Group>
36+
37+
<Divider />
38+
<Table.ScrollContainer minWidth={500}>
39+
<Table c={"white"} highlightOnHover>
40+
<Table.Thead>
41+
<Table.Tr>
42+
<Table.Th>Question</Table.Th>
43+
<Table.Th className={classes.cell}>Date Added</Table.Th>
44+
<Table.Th className={classes.cell}>Last Edited</Table.Th>
45+
<Table.Th className={classes.cell}>Difficulty</Table.Th>
46+
<Table.Th className={classes.cell}>Topic</Table.Th>
47+
<Table.Th className={classes.cell} style={{ width: 50 }}></Table.Th>
48+
<Table.Th className={classes.cell} style={{ width: 50 }}></Table.Th>
49+
</Table.Tr>
50+
</Table.Thead>
51+
<Table.Tbody>{rows}</Table.Tbody>
52+
</Table>
53+
</Table.ScrollContainer>
54+
<Group justify="center">
55+
<Pagination total={5} siblings={3} defaultValue={1} />
56+
57+
</Group>
58+
</Card>
59+
);
60+
}

‎frontend/peerprep/app/pages/adminpage.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import {
2+
Grid,
3+
useMantineTheme,
4+
Button
5+
} from "@mantine/core";
6+
7+
import StatsCard from "../components/statscard";
8+
import QuestionsTable from "~/components/table/questionstable";
9+
import type {QuestionHistory} from "../components/table/questionstable";
10+
11+
import { useState } from "react";
12+
13+
export function meta() {
14+
return [
15+
{ title: "PeerPrep - Homepage" },
16+
{ name: "description", content: "Welcome to PeerPrep!" },
17+
];
18+
}
19+
20+
export default function Userpage() {
21+
const theme = useMantineTheme();
22+
23+
const [data, ] = useState<QuestionHistory[]>([
24+
{
25+
question: "Two Sum",
26+
dateAdded: "2024-10-01",
27+
lastEdited: "2024-10-01",
28+
difficulty: "Easy",
29+
topic: "Array",
30+
},
31+
]);
32+
33+
return (
34+
<Grid>
35+
<Grid.Col span={12}>
36+
<Grid gutter="md" align="center">
37+
<Grid.Col span={{ base: 6, md: 2 }}>
38+
<StatsCard
39+
title="Total Questions"
40+
stat="1,234"
41+
color={theme.colors.gray[0]}
42+
/>
43+
</Grid.Col>
44+
<Grid.Col span={{ base: 6, md: 2 }}>
45+
<StatsCard
46+
title="Easy"
47+
stat="1,234"
48+
color={theme.colors.green[5]}
49+
/>
50+
</Grid.Col>
51+
<Grid.Col span={{ base: 6, md: 2 }}>
52+
<StatsCard
53+
title="Medium"
54+
stat="1,234"
55+
color={theme.colors.yellow[5]}
56+
/>
57+
</Grid.Col>
58+
<Grid.Col span={{ base: 6, md: 2 }}>
59+
<StatsCard title="Hard" stat="1,234" color={theme.colors.red[5]} />
60+
</Grid.Col>
61+
<Grid.Col span={{ base: 12, md: 2 }} offset={{ md: 2 }}>
62+
<Button fullWidth onClick={() => {}}>Add Question</Button>
63+
</Grid.Col>
64+
</Grid>
65+
</Grid.Col>
66+
<Grid.Col span={12}>
67+
<QuestionsTable
68+
data={data}
69+
/>
70+
</Grid.Col>
71+
</Grid>
72+
);
73+
}

0 commit comments

Comments
 (0)