diff --git a/client/app/admin-dashboard/page.jsx b/client/app/admin-dashboard/page.jsx
new file mode 100644
index 0000000..f26a385
--- /dev/null
+++ b/client/app/admin-dashboard/page.jsx
@@ -0,0 +1,9 @@
+import AdminDashboard from "../../components/AdminDashboard";
+
+export default function AdminDashboardView() {
+ return (
+
+ );
+}
diff --git a/client/app/page.js b/client/app/page.js
index 3f1a00a..ab60fd8 100644
--- a/client/app/page.js
+++ b/client/app/page.js
@@ -1,3 +1,4 @@
+"use client";
import { Container, Typography } from "@mui/material";
export default function Home() {
diff --git a/client/components/AdminDashboard.jsx b/client/components/AdminDashboard.jsx
new file mode 100644
index 0000000..2028920
--- /dev/null
+++ b/client/components/AdminDashboard.jsx
@@ -0,0 +1,107 @@
+"use client";
+import React, { useState } from "react";
+import { DataGrid } from "@mui/x-data-grid";
+import { Typography } from "@mui/material";
+import Button from "@mui/material/Button";
+
+export default function AdminDashboard() {
+ const status_options = ["Requested", "Confirmed", "Pending", "Visited"];
+
+ const [rows, setRows] = useState([
+ {
+ id: 1,
+ visited: false,
+ status: "Confirmed",
+ date: "11/15/24",
+ time: "6a-8a",
+ lastname: "Targaryen",
+ firstname: "Daenerys",
+ phone: "333-333-3333",
+ email: "iConquor@westeros.com",
+ address: "333 Dothraki Valley, Free City of Penthos, Valerya 33333",
+ },
+ {
+ id: 2,
+ visited: false,
+ status: "Pending",
+ date: "12/3/24",
+ time: "2p-4p",
+ lastname: "Lannister",
+ firstname: "Tyrion",
+ phone: "031-294-4822",
+ email: "iDrink@andKnowThings.com",
+ address: "699 Hand of the King Row, Here and There, Seven Kingdoms 00000",
+ },
+ {
+ id: 3,
+ visited: false,
+ status: "Requested",
+ date: "12/24/24",
+ time: "11a-1p",
+ lastname: "Stark",
+ firstname: "Arya",
+ phone: "909-485-3822",
+ email: "aGirl@IsNoOne.com",
+ address: "39842 Northern Way, Many Faced God, Esos 10101",
+ },
+ ]);
+
+ const columns = [
+ {
+ field: "visited",
+ headerName: "Mark as visited",
+ width: 150,
+ renderCell: (params) => (
+
+ ),
+ },
+ { field: "status", headerName: "Status", width: 150 },
+ { field: "date", headerName: "Date", width: 150 },
+ { field: "time", headerName: "Timeslot", width: 150 },
+ { field: "lastname", headerName: "Last Name", width: 150 },
+ { field: "firstname", headerName: "First Name", width: 150 },
+ { field: "phone", headerName: "Phone", width: 150 },
+ { field: "email", headerName: "Email", width: 150 },
+ { field: "address", headerName: "Address", width: 150 },
+ ];
+
+ const handleVisited = (id) => {
+ setRows((prev) =>
+ prev.map((row) =>
+ row.id === id
+ ? {
+ ...row,
+ visited: !row.visited,
+ status: !row.visited ? "Visited" : "Pending",
+ }
+ : row
+ )
+ );
+ };
+
+ const paginationModel = { page: 0, pageSize: 15 };
+
+ return (
+
+
+ Reservations:
+
+
+
+
+