[28/02, 11:59 am] Kaustubh Upare Springboard: import { Box, Grid, Stack, Typography,IconButton, Button, InputBase, TextField, InputAdornment, Avatar } from "@mui/material" import Header from "./Header" import Sidebar from "./Sidebar" import { DashboardOutlined, Group, LogoutOutlined, Message, Notifications, Person,Search as SearchIcon, Settings } from "@mui/icons-material" import { useLocation } from "react-router-dom" import { Link, SearchField } from "../Styled/StyledComponents" const WebLayout=()=>(WrappedComponent)=>{ return(props)=>{ const location=useLocation(); const Easy=({Icons,Name,loca})=>{ const isActive = location.pathname === loca; return( <Link to={loca} active={isActive}> <Stack direction={"row"} alignItems={"center"} > <IconButton color="default" > {Icons} </IconButton> <Typography variant="caption"> {Name}</Typography> </Stack> </Link> ) } return( <> <Grid container spacing={2} sx={{ height: "100vh", p: 2,paddingBottom:0,paddingRight:0 }} > {/* Sidebar */} <Grid item md={2} sx={{ display:{xs:"none",md:"flex"},bgcolor: "#6092FF0D", height: "100%", flexDirection:"column", justifyContent:"flex-start" }} > <Stack direction={"row"} gap={2} alignItems={"center"} justifyContent={"flex-start"} sx={{ width: "100%", p: 1, mb: "auto"}} > <Box width={"40px"}> <img src="src/assets/TeamSyncLogo.png" alt="" /> </Box> <Typography variant="body1" sx={{fontFamily:"Fitgree",fontSize:"1.2rem"}} > TeamSync </Typography> </Stack> <Stack alignSelf={"center"} gap={1} sx={{flexGrow:1,justifyContent:"center",width:"100%", marginTop:-18, }} > <Easy Icons={<DashboardOutlined sx={{fontSize:"medium"}} />} Name={"Dashboard"} loca={"/dashboard"}/> <Easy Icons={<Person sx={{fontSize:"medium"}} />} Name={"Projects"} loca={"/Projects"} /> <Easy Icons={<Group sx={{fontSize:"medium"}}/>} Name={"Task Management"} loca={"/admin/group"} /> <Easy Icons={<Message sx={{fontSize:"medium"}}/>} Name={"Communication"} loca={"/admin/message"} /> </Stack> <Stack direction={"row"} width={"100%"} justifyContent={"center"} paddingBottom={3} > <Button variant="contained" startIcon={<LogoutOutlined />} sx={{ backgroundColor: "#2979FF", color: "#FFF", borderRadius: "8px", width: "60%", mt: "auto", "&:hover": { backgroundColor: "#1565C0" } }} > Logout </Button> </Stack> </Grid> {/* Main Content */} <Grid item xs={12} sm={10} md={10} container direction="column" sx={{p:1,height:"100%"}} gap={1} style={{paddingTop:0,paddingBottom:0}} > <Grid item sx={{ bgcolor: "white", height: "4rem", width:"100%" }} > <Stack direction={"row"} padding={1}> <Box> <Typography variant="h6" fontFamily={"Figtree"}> Hello Arun </Typography> <Typography variant="body2" color="gray"> Mon, Feb 25, 2025 </Typography> </Box> <Box display={"flex"} sx={{flexGrow:1}}></Box> <Box sx={{display:{xs:"none",sm:"flex"},alignItems:"center",}}> <TextField variant="outlined" placeholder="Search..." sx={{ "& .MuiInputBase-input": { padding: "12px", // Adjust padding inside input }, }} InputProps={{ startAdornment: ( <InputAdornment position="start"> <SearchIcon /> </InputAdornment> ), }} /> </Box> <Stack direction={"row"} padding={1}> <IconButton> <Settings /> </IconButton> <IconButton> <Notifications /> </IconButton> <Stack direction={"row"} alignItems={"center"}> <Avatar></Avatar> <Typography variant="caption"> Arun Kumar </Typography> </Stack> </Stack> </Stack> </Grid> <Grid item sx={{ bgcolor: "grey.300", width:"100%",minHeight: 0, overflowY:"auto" }} > {<WrappedComponent {...props}/>} </Grid> </Grid> </Grid> </> ) } } export default WebLayout [28/02, 11:59 am] Kaustubh Upare Springboard: import { Box, Button, Card, CardContent, Divider, Grid, IconButton, MenuItem, Pagination, Select, Stack, TextField, Typography } from "@mui/material" import WebLayout from "./WebLayout" import { useState } from "react"; import { Add, Edit, Search } from "@mui/icons-material"; import { Link } from "react-router-dom"; const Delete=()=>{ const projects = Array.from({ length: 3 }, (_, i) => ({ id: i + 1, name: "Design Project", teamLead: "Arjun Kumar", teamMembers: 33, deadline: "27-02-2025", })); const [search, setSearch] = useState(""); const [page, setPage] = useState(1); const [itemsPerPage, setItemsPerPage] = useState(6); const filteredProjects = projects.filter((project) => project.name.toLowerCase().includes(search.toLowerCase()) ); const totalPages = Math.ceil(filteredProjects.length / itemsPerPage); const displayedProjects = filteredProjects.slice( (page - 1) * itemsPerPage, page * itemsPerPage ); // <Stack direction={"row"} padding={1} paddingRight={4} justifyContent="space-between" alignItems="center"> {/* <Box display={'flex'} justifyContent={"center"}> <Search color="action"/> <input style={{border:"none",outline:"none"}} placeholder="Search..." ></input> </Box> <Button variant="contained" sx={{borderRadius:"6px"}} > <Add fontSize="small" /> <Typography variant="caption">Project</Typography> </Button> </Stack> <Typography variant="h5" component={"h2"}>All Projects</Typography> <Box sx={{ p: 2, width: "100%", maxWidth: "1200px" }}> <Grid container spacing={2}> {projects.map((project, index) => ( <Grid item xs={12} sm={6} md={4} lg={3} key={index}> <Card sx={{ p: 2, borderRadius: 3, boxShadow: 2 }}> <CardContent> <Box display="flex" justifyContent="space-between" alignItems="center"> <Typography variant="h6" fontWeight="bold"> {project.name} </Typography> <IconButton size="small"> <Edit color="primary" /> </IconButton> </Box> <Typography variant="body2">TL: {project.teamLead}</Typography> <Typography variant="body2">Total Team Members: {project.teamMembers}</Typography> <Typography variant="caption" color="gray" display="block" mt={2}> Deadline: {project.deadline} </Typography> </CardContent> </Card> </Grid> ))} </Grid> </Box> */} return( <> <Stack direction={"row"} padding={1} paddingRight={4} justifyContent="space-between" alignItems="center"> <Box display={'flex'} justifyContent={"center"}> <Search color="action"/> <input style={{border:"none",outline:"none"}} placeholder="Search..." ></input> </Box> <Button variant="contained" sx={{borderRadius:"6px"}} > <Add fontSize="small" /> <Typography variant="caption">Project</Typography> </Button> </Stack> <Grid container sx={{overflowY:"auto"}} gap={2} p={2}> { projects.map((project, index) => ( <Grid item key={index} xs={12} sm={6} md={4}> <Card sx={{ p: 2, borderRadius: 3, boxShadow: 2, maxWidth: 300 }}> <CardContent> <Typography variant="h6" fontWeight="bold"> Design Project </Typography> <Box display="flex" justifyContent="space-between" alignItems="center" mt={1}> <Typography variant="body2" color="gray"> TL: Arjun Kumar </Typography> <Link href="#" variant="body2" sx={{ color: "blue", textDecoration: "none" }}> Edit </Link> </Box> <Typography variant="body2" color="gray" mt={1}> Total Team Members </Typography> <Typography fontWeight="bold">33</Typography> <Divider sx={{ my: 2 }} /> <Box display="flex" justifyContent="space-between"> <Typography variant="body2" color="gray"> Deadline </Typography> <Typography fontWeight="bold">27-02-2025</Typography> </Box> </CardContent> </Card> </Grid> )) } </Grid> </> ) } export default WebLayout()(Delete) prompt that ai this <Grid item sx={{ bgcolor: "grey.300", width:"100%",minHeight: 0, overflowY:"auto" }} > {<WrappedComponent {...props}/>} </Grid> is shifting to right fix it pls pls fix it