text: import React, { useState, useEffect } from "react";
  import clsx from "clsx";
  
  import { makeStyles } from "@material-ui/core/styles";
  import CssBaseline from "@material-ui/core/CssBaseline";
  import Drawer from "@material-ui/core/Drawer";
  import Box from "@material-ui/core/Box";
  import AppBar from "@material-ui/core/AppBar";
  import Toolbar from "@material-ui/core/Toolbar";
  import List from "@material-ui/core/List";
  import Typography from "@material-ui/core/Typography";
  import Divider from "@material-ui/core/Divider";
  import IconButton from "@material-ui/core/IconButton";
  import Badge from "@material-ui/core/Badge";
  import Container from "@material-ui/core/Container";
  import Grid from "@material-ui/core/Grid";
  import Paper from "@material-ui/core/Paper";
  
  import MenuIcon from "@material-ui/icons/Menu";
  import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
  import NotificationsIcon from "@material-ui/icons/Notifications";
  import axios from "axios";
  import { mainListItems, secondaryListItems } from "../BuyerDashbord/listItem";
  import Chart from "../BuyerDashbord/Chart";
  import Deposits from "../BuyerDashbord/Deposits";
  import Orders from "../BuyerDashbord/Orders";
  import RegCusNavbar from "../RegCusNavbar";
  import "../css/dashbordbuyer.css";
  import { Link } from "react-router-dom";
  const drawerWidth = 240;
  
  const useStyles = makeStyles((theme) => ({
    root: {
      display: "flex",
    },
    toolbar: {
      paddingRight: 24, // keep right padding when drawer closed
    },
    toolbarIcon: {
      display: "flex",
      alignItems: "center",
      justifyContent: "flex-end",
      padding: "0 8px",
      ...theme.mixins.toolbar,
    },
    appBar: {
      zIndex: theme.zIndex.drawer + 1,
      transition: theme.transitions.create(["width", "margin"], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
    },
    appBarShift: {
      marginLeft: drawerWidth,
      width: `calc(100% - ${drawerWidth}px)`,
      transition: theme.transitions.create(["width", "margin"], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    menuButton: {
      marginRight: 36,
    },
    menuButtonHidden: {
      display: "none",
    },
    title: {
      flexGrow: 1,
    },
    drawerPaper: {
      position: "relative",
      whiteSpace: "nowrap",
      width: drawerWidth,
      transition: theme.transitions.create("width", {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    drawerPaperClose: {
      overflowX: "hidden",
      transition: theme.transitions.create("width", {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
      }),
      width: theme.spacing(7),
      [theme.breakpoints.up("sm")]: {
        width: theme.spacing(9),
      },
    },
    appBarSpacer: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
      height: "100vh",
      overflow: "auto",
    },
    container: {
      paddingTop: theme.spacing(4),
      paddingBottom: theme.spacing(4),
    },
    paper: {
      padding: theme.spacing(2),
      display: "flex",
      overflow: "auto",
      flexDirection: "column",
    },
    fixedHeight: {
      height: 240,
    },
  }));
  
  export default function Dashboard() {
    const classes = useStyles();
    const [open, setOpen] = React.useState(true);
  
    const handleDrawerOpen = () => {
      setOpen(true);
    };
    const handleDrawerClose = () => {
      setOpen(false);
    };
    const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
  
    return (
      <div className={classes.root}>
        <AppBar>
          <RegCusNavbar />
        </AppBar>
  
        <main className={classes.content}>
          <div className={classes.appBarSpacer} />
          <Container maxWidth="lg" className={classes.container}>
            <Grid container spacing={3}>
              {/* Chart */}
              <button className="buttonx">MY PROFILE</button>
              <Link to="helpcenter">
                {" "}
                <button className="buttonx">COMPLAINTS</button>
              </Link>
              <button className="buttonx">HELP CENTER</button>
              {/* Recent Orders */}
              <Grid item xs={12}>
                <Paper className={classes.paper}>
                  <Orders />
                </Paper>
              </Grid>
            </Grid>
            <Box pt={4}></Box>
          </Container>
        </main>
      </div>
    );
  }
  