diff --git a/sports-matcher/client/src/pages/Admin.js b/sports-matcher/client/src/pages/Admin.js
new file mode 100644
index 0000000..90ec76e
--- /dev/null
+++ b/sports-matcher/client/src/pages/Admin.js
@@ -0,0 +1,250 @@
+/* eslint-disable react/jsx-key */
+import React from "react";
+import "../styles/Admin.css";
+import { Button, Typography, Container, Paper } from "react-bootstrap";
+import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead } from "react-bootstrap";
+// import Typography from '@mui/material/Typography';
+// import Container from '@mui/material/Container';
+// import { TableContainer, TableCell, Table, TableBody, TableRow, TableHead, Paper } from '@mui/material';
+
+
+
+export default class AdminTable extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ users: [
+ { id: 1, username: "username1", name: "name1", email: "user1@email.com", phone: "123-456-7890" },
+ { id: 2, username: "username2", name: "name2", email: "user2@email.com", phone: "123-456-7890" },
+ { id: 3, username: "username3", name: "name3", email: "user3@email.com", phone: "123-456-7890" },
+ { id: 4, username: "username4", name: "name4", email: "user4@email.com", phone: "123-456-7890" }
+ ],
+ suspendedUsers: [
+ { id: 1, username: "suspended1", name: "s1", email: "s1@email.com", phone: "123-456-7890" },
+ { id: 2, username: "suspended2", name: "s2", email: "s2@email.com", phone: "123-456-7890" },
+ { id: 3, username: "suspended3", name: "s3", email: "s3@email.com", phone: "123-456-7890" },
+ { id: 4, username: "suspended4", name: "s4", email: "s4@email.com", phone: "123-456-7890" }
+ ],
+ matches: [
+ { id: 1, sport: "Tennis", date: "08/08/2021", location: "toronto", description: "Tennis match" },
+ { id: 2, sport: "Basketball", date: "09/09/2021", location: "toronto", description: "Basketball match" }
+ ],
+ buttonColors: ["black", "", ""]
+ };
+
+
+ }
+
+ EditButton() {
+ return {
+ alert("clicked");
+ }} variant="contained">Edit ;
+
+ }
+
+ DeleteButtonClick() {
+ return (
+
+
+ Are you sure you want to delete this user?
+ {
+ alert("User deleted");
+ }} variant="contained">Yes
+
+ );
+ }
+
+ NewDeleteButtonClick() {
+ return (
);
+ }
+
+ DeleteButton() {
+ return {
+ alert("User deleted.");
+ }} variant="contained">Delete ;
+
+ }
+
+ PardonButton() {
+ return {
+ alert("User pardoned.");
+ }} variant="contained">Pardon ;
+
+ }
+
+ userTableData() {
+ return this.state.users.map((user) => {
+ const { id, username, name, email, phone } = user;
+ return (
+
+
+ {id}
+ {username}
+ {name}
+ {email}
+ {phone}
+ {this.DeleteButton()}
+ {this.EditButton()}
+
+ );
+ });
+ }
+
+ suspendedUserTableData() {
+ return this.state.suspendedUsers.map((user) => {
+ const { id, username, name, email, phone } = user;
+ return (
+
+ {id}
+ {username}
+ {name}
+ {email}
+ {phone}
+ {this.DeleteButton()}
+ {this.EditButton()}
+ {this.PardonButton()}
+
+ );
+ });
+ }
+
+ matchTableData() {
+ return this.state.matches.map((match) => {
+ const { id, sport, date, location, description } = match;
+ return (
+
+ {id}
+ {sport}
+ {date}
+ {location}
+ {description}
+ {this.DeleteButton()}
+ {this.EditButton()}
+
+ );
+ });
+ }
+
+ matchTableHead() {
+ return (
+
+
+ ID
+ Sport
+ Date
+ Location
+ Description
+
+
+
+
+ );
+
+ }
+
+ suspendedUserTableHead() {
+ return (
+
+
+ ID
+ Username
+ Name
+ Email
+ Phone
+
+
+
+
+
+ );
+
+ }
+
+ userTableHead() {
+ return (
+
+
+ ID
+ Username
+ Name
+ Email
+ Phone
+
+
+
+
+ );
+
+ }
+
+
+ selectTable() {
+ this.setState({ buttonColors: ["", "", ""] });
+ }
+
+ renderTableHead() {
+ if (this.state.buttonColors[0] === "black") {
+ return this.matchTableHead();
+ } else if (this.state.buttonColors[1] === "black") {
+ return this.userTableHead();
+ } else {
+ return this.suspendedUserTableHead();
+ }
+ }
+
+ renderTableData() {
+ if (this.state.buttonColors[0] === "black") {
+ return this.matchTableData();
+ } else if (this.state.buttonColors[1] === "black") {
+ return this.userTableData();
+ } else {
+ return this.suspendedUserTableData();
+ }
+
+ }
+
+ render() {
+ return (
+
+
Administration
+
+ {
+ this.setState({ buttonColors: ["black", "", ""] });
+ }} sx={{
+ margin: 3,
+ backgroundColor: this.state.buttonColors[0],
+ }} variant="outlined">Matches
+ {
+ this.setState({ buttonColors: ["", "black", ""] });
+ }} sx={{
+ margin: 3,
+ backgroundColor: this.state.buttonColors[1],
+ }} variant="outlined">Users
+ {
+ this.setState({ buttonColors: ["", "", "black"] });
+ }} sx={{
+ margin: 3,
+ backgroundColor: this.state.buttonColors[2],
+ }} variant="outlined">Suspended Users
+
+
+
+ {this.renderTableHead()}
+
+ {this.renderTableData()}
+
+
+
+
+
+ );
+ }
+}
+
+//export default AdminTable
\ No newline at end of file
diff --git a/sports-matcher/client/src/styles/Admin.css b/sports-matcher/client/src/styles/Admin.css
new file mode 100644
index 0000000..59c9b92
--- /dev/null
+++ b/sports-matcher/client/src/styles/Admin.css
@@ -0,0 +1,4 @@
+
+.MainTable {
+ padding : 20px;
+}
\ No newline at end of file