list of bookings and UI

src/components/pages/Booked.js

+import Layout from "../ui/Layout";
+import * as React from "react";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import Avatar from "@mui/material/Avatar";
+import { useEffect, useState } from "react";
+import server from "../../utils/server";
+import { context } from "../../utils/context/Provider";
+import BasicTable from "../ui/BasicTable";
+import useSessionData from "../../utils/hooks/useSessionData";
+
+export default function Booked() {
+  //state
+  const [bookedData, setBookedData] = useState([]);
+  const store = React.useContext(context);
+  const getuser = useSessionData('user');
+  //get all the booked list data
+  const getBookedList = async () => {
+    const id = getuser.data.id;
+    try {
+      const res = await server.get
+        (`/api/admin/booking/${id}`);
+      console.log("res", res.data.data);
+      setBookedData(res.data.data);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  useEffect(() => {
+    //get the all ooked data
+    if (getuser.data?.id) {
+      getBookedList();
+    }
+  }, [getuser.data?.id]);
+  return (
+    <Layout>
+      <div style={{ padding: "2rem", maxWidth: "1200px", marginInline: "auto" }}>
+        <h2 className="booked_title">{bookedData.length ? 'Booked List' : 'No Booked Details'}</h2>
+        <div className="booked_list_flex">
+          {bookedData.length ?
+            <BasicTable rows={bookedData} />
+            : null
+          }
+        </div>
+      </div>
+    </Layout>
+  );
+}

src/components/ui/BasicTable.js

+import * as React from "react";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Paper from "@mui/material/Paper";
+import Avatar from "@mui/material/Avatar";
+
+export default function BasicTable({ rows }) {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell
+              style={{ fontSize: "1.15rem", fontWeight: "bold" }}
+              align="left"
+            >
+              Image
+            </TableCell>
+            <TableCell
+              style={{ fontSize: "1.15rem", fontWeight: "bold" }}
+              align="left"
+            >
+              Name
+            </TableCell>
+            <TableCell
+              style={{ fontSize: "1.15rem", fontWeight: "bold" }}
+              align="left"
+            >
+              Sport
+            </TableCell>
+            <TableCell
+              style={{ fontSize: "1.15rem", fontWeight: "bold" }}
+              align="left"
+            >
+              Date
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              align="left"
+              key={row.name}
+              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+            >
+              <TableCell align="left" className="table_cell">
+                <Avatar src={row.sport.image} />
+              </TableCell>
+              <TableCell align="left" className="table_cell">
+                {row.user.name}
+              </TableCell>
+              <TableCell align="left" className="table_cell">
+                {row.sport.name}
+              </TableCell>
+              <TableCell align="left" className="table_cell">
+                {new Date(row.datetime).toLocaleString('uk')}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

src/components/ui/Layout/index.js

+import Navbar from "../navbar";
+import "../../../App.css";
+import "../../../components/pages/index.css";
+import useSessionData from "../../../utils/hooks/useSessionData";
+import { useContext, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { context } from "../../../utils/context/Provider";
+
+export default function Layout({ children }) {
+  //get use session
+  const user = useSessionData('user');
+  const store = useContext(context);
+  //get navigation
+  const router = useNavigate();
+
+  useEffect(() => {
+    //check if the user exist in the session storage 
+    //else logout the user
+    console.log(store.data.userDetails, user.data)
+    if (!(store.data.userDetails || user.data)) {
+      router('/login')
+    }
+  }, [user.data, store.data.userDetails])
+
+  return (
+    <div className="layout_container">
+      <Navbar />
+      {children}
+    </div>
+  );
+}

src/components/ui/card/index.js

+import * as React from "react";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import CardMedia from "@mui/material/CardMedia";
+import CardContent from "@mui/material/CardContent";
+import CardActions from "@mui/material/CardActions";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { Menu, MenuItem, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import TransitionsModal from "../modal";
+
+export default function SportCard({
+  name,
+  image,
+  description,
+  id,
+  location,
+  pitches,
+  store,
+  key,
+}) {
+  //use states
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+
+  //router
+  const router = useNavigate();
+
+  //functions
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    store?.action.setSelectedSport(`${id}`);
+    setAnchorEl(null);
+  };
+  const handleCloseModal = () => {
+    store?.action.setSelectedSport(`${id}`);
+    setAnchorEl(null);
+    setModalOpen(!modalOpen);
+  };
+
+  const bookSport = () => {
+    try {
+      store?.action.setSelectedSport(`${id}`);
+      router("/booking");
+    } catch (err) {
+      console.log("error", err);
+    }
+  };
+
+  return (
+    <Card sx={{ maxWidth: 345 }} key={key} className="card-animation card-flex">
+      <CardHeader title={name} />
+      <CardMedia
+        component="img"
+        height="194"
+        image={image}
+        alt={`image-${id}`}
+      />
+      <CardContent>
+        <Typography variant="body2" color="text.secondary">
+          Description: {description}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Pitches: {pitches}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Location: {location}
+        </Typography>
+      </CardContent>
+      <CardActions style={{ justifyContent: "flex-end" }}>
+        <button className="ani_button book_button" onClick={() => bookSport()}>
+          Book
+        </button>
+      </CardActions>
+    </Card>
+  );
+}

src/components/ui/modal/index.js

+import * as React from "react";
+import Backdrop from "@mui/material/Backdrop";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Fade from "@mui/material/Fade";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import { context } from "../../../utils/context/Provider";
+import server from "../../../utils/server";
+import toast from "react-hot-toast";
+
+const style = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  bgcolor: "background.paper",
+  border: "1px solid #e6e6e6",
+  boxShadow: 24,
+  p: 4,
+  borderRadius: 4,
+};
+
+export default function TransitionsModal({ open, setOpen }) {
+  const handleClose = () => setOpen(false);
+  const store = React.useContext(context);
+
+  const handleDelete = async () => {
+    try {
+      if (!store?.data.selectedSport) throw new Error("sport id not found.");
+      const res = await server.delete(
+        `api/admin/sport/${store.data.selectedSport}`
+      );
+      store?.action.setRefreshSport(!store?.data.refreshSport);
+      toast.success(res.data.message);
+    } catch (err) {
+      toast.error(err.message || "Error!");
+    }
+  };
+
+  return (
+    <div>
+      <Modal
+        aria-labelledby="transition-modal-title"
+        aria-describedby="transition-modal-description"
+        open={open}
+        onClose={handleClose}
+        closeAfterTransition
+        slots={{ backdrop: Backdrop }}
+        slotProps={{
+          backdrop: {
+            timeout: 500,
+          },
+        }}
+      >
+        <Fade in={open}>
+          <Box sx={style}>
+            <Typography id="transition-modal-title" variant="h6" component="h2">
+              Are you sure?
+            </Typography>
+            <Typography id="transition-modal-description" sx={{ mt: 2 }}>
+              If you delete this sport, you can't retrieve the data. Please
+              confirm to delete this.
+            </Typography>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "end",
+                marginTop: "8px",
+                gap: "1rem",
+              }}
+            >
+              <Button variant="contained" color="error" onClick={handleDelete}>
+                Delete
+              </Button>
+              <Button variant="contained" onClick={handleClose}>
+                Cancel
+              </Button>
+            </div>
+          </Box>
+        </Fade>
+      </Modal>
+    </div>
+  );
+}

src/components/ui/navbar/index.css

+.navbar_container {
+  position: sticky;
+  top: 0;
+  padding: 1rem;
+  background: var(--primary-color);
+  color: white;
+  z-index: 10;
+}
+
+.nav_flex {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav_details_flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.logout {
+  border-radius: 0.5rem;
+  border: 1px solid hsl(0, 100%, 60%);
+  padding: 0.5rem 1rem;
+  background-color: hsl(0, 100%, 60%);
+}
+
+.login {
+  border-radius: 0.5rem;
+  border: 1px solid white;
+  padding: 0.5rem 1rem;
+  color: black;
+  background-color: white;
+}

src/components/ui/navbar/index.js

+import { useNavigate } from "react-router-dom";
+import "./index.css";
+import logo from "../../../assets/logo-tech.png";
+import useSessionData from "../../../utils/hooks/useSessionData";
+
+const navbar_header = [
+  { name: "Home", route: "/" },
+  { name: "Booked", route: "/booked" },
+];
+export default function Navbar() {
+  const router = useNavigate();
+  const user = useSessionData('user');
+  return (
+    <div className="navbar_container nav_flex">
+      <div className="pointer" onClick={() => router("/")}>
+        <img src={logo} height={40} />
+      </div>
+      <div className="nav_details_flex">
+        {navbar_header.map((item) => {
+          return (
+            <div
+              className="pointer ani_button"
+              onClick={() => {
+                if (item.route) router(item.route);
+              }}
+            >
+              {item.name}
+            </div>
+          );
+        })}
+      </div>
+      <div
+        className={`"pointer  ani_button" ${user.data?.id ? 'logout' : 'login'}`}
+        onClick={() => router("/login")}
+      >
+        {user.data?.id ? "logout" : "login"}
+      </div>
+    </div>
+  );
+}