Merge pull request #36 from chingu-voyages/admin_dashboard

Admin dashboard

client/app/admin-dashboard/page.jsx

@@ -0,0 +1,9 @@
+import AdminDashboard from "../../components/AdminDashboard";
+
+export default function AdminDashboardView() {
+  return (
+    <div>
+      <AdminDashboard />
+    </div>
+  );
+}

client/app/page.js

@@ -1,3 +1,4 @@
+"use client";
 import { Container, Typography } from "@mui/material";
 
 export default function Home() {

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: "[email protected]",
+      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: "[email protected]",
+      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: "[email protected]",
+      address: "39842 Northern Way, Many Faced God, Esos 10101",
+    },
+  ]);
+
+  const columns = [
+    {
+      field: "visited",
+      headerName: "Mark as visited",
+      width: 150,
+      renderCell: (params) => (
+        <Button
+          variant="contained"
+          color={params.row.visited ? "success" : "error"}
+          onClick={() => handleVisited(params.row.id)}
+        ></Button>
+      ),
+    },
+    { 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 (
+    <div className="bg-green-100 p-8 rounded-lg shadow-lg">
+      <Typography
+        variant="h3"
+        className="text-2xl text-stone-800 font-semibold mb-4"
+      >
+        Reservations:
+      </Typography>
+      <div style={{ height: 300, width: "100%" }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          initialState={{ pagination: { paginationModel } }}
+          pageSizeOptions={[15, 10]}
+          sx={{ border: 0 }}
+        />
+      </div>
+    </div>
+  );
+}

client/package.json

@@ -14,8 +14,10 @@
     "@emotion/styled": "^11.13.0",
     "@mui/base": "^5.0.0-beta.61",
     "@mui/icons-material": "^6.1.7",
+    "@fontsource/roboto": "^5.1.0",
     "@mui/material": "^6.1.6",
     "@mui/material-nextjs": "^6.1.6",
+    "@mui/x-data-grid": "^7.22.2",
     "@mui/x-date-pickers": "^7.22.2",
     "dayjs": "^1.11.13",
     "joi": "^17.13.3",