FinalProject/src/pages/AdminPage/AdminPage.jsx

import {
    Avatar,
    BottomNavigationAction,
    Button, Card, CardContent, CardHeader, Checkbox, CircularProgress, Collapse,
    Container, Divider,
    FormControl,
    Grid,
    InputLabel, MenuItem, Pagination, Select, Switch,
    TextField,
    useMediaQuery
} from "@mui/material";
import Breadcrumb from "../../components/Breadcrumbs";
import PropTypes from 'prop-types';
import SwipeableViews from 'react-swipeable-views';
import { useTheme } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import {useState} from "react";
import PersonIcon from '@mui/icons-material/Person';
import CategoryIcon from '@mui/icons-material/Category';
import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
import BottomNavigation from '@mui/material/BottomNavigation';
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
import EditIcon from '@mui/icons-material/Edit';
import {CFindGoodEdit, CGoodEdit, FindGoodEdit} from "./GoodTab";
import {CClients} from "./ClientsTab";
import {CCategoryEdit, CCategoryEditTree} from "./CateforyTab";

const defaultTabs = [{icon: PersonIcon, text: 'clients'}, {icon: CategoryIcon, text: 'categories'}, {icon: AutoAwesomeIcon, text: 'products'}]

const IconHeader = ({Icon}) => {
    return <Icon style={{marginRight: '10px'}} />
}
function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
        <div
            role="tabpanel"
            hidden={value !== index}
            id={`full-width-tabpanel-${index}`}
            aria-labelledby={`full-width-tab-${index}`}
            {...other}
        >
            {value === index && (
                <Box sx={{ p: 3 }}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}
TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.number.isRequired,
    value: PropTypes.number.isRequired,
};
function a11yProps(index) {
    return {
        id: `full-width-tab-${index}`,
        'aria-controls': `full-width-tabpanel-${index}`,
    };
}


const SelectBlock = ({Block, FindBlock}) => {
    const [value, setValue] = useState('create');
    return (
        <>
            <Box sx={{width: '100%', display:'flex', justifyContent: 'center', alignItems: 'center', marginBottom: '20px'}}>
                <BottomNavigation
                    showLabels
                    sx={{width: '100%'}}
                    value={value}
                    onChange={(event, newValue) => {
                        setValue(newValue);
                    }}
                >
                    <BottomNavigationAction value={'create'} label="Create" icon={<AddCircleOutlineIcon />} />
                    <BottomNavigationAction value={'edit'} label="Edit" icon={<EditIcon />} />
                </BottomNavigation>
            </Box>
            {value === 'create' ?
                <Block/> : <FindBlock/>
            }
        </>
    )
}

const FullWidthTabs = () => {
    const theme = useTheme();
    const [value, setValue] = useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };
    const handleChangeIndex = (index) => {
        setValue(index);
    };

    return (
        <Box sx={{ bgcolor: '#fff', width: '100%', borderRadius: '20px', borderTopLeftRadius: '20px', borderTopRightRadius: '20px', overflow: 'hidden'}}>
            <AppBar position="static" sx={{boxShadow: 'none'}}>
                <Tabs
                    value={value}
                    onChange={handleChange}
                    TabIndicatorProps={{style: {background:'#616161', height: '1px'}}}
                    textColor="inherit"
                    sx={{backgroundColor:'#fff', color: '#000'}}
                    variant="fullWidth"
                    aria-label="full width tabs example"
                >
                    {defaultTabs.map((item, index) =>
                        <Tab key={index} icon={<IconHeader Icon={item.icon}/>} iconPosition="start" label={item.text} sx={{borderBottom: '1px solid #dedede'}} {...a11yProps(index)}/>
                    )}
                </Tabs>
            </AppBar>
            <SwipeableViews
                axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
                index={value}
                onChangeIndex={handleChangeIndex}
            >
                <TabPanel value={value} index={0} dir={theme.direction}>
                    <CClients/>
                </TabPanel>
                <TabPanel value={value} index={1} dir={theme.direction}>
                    <SelectBlock Block={CCategoryEdit} FindBlock={CCategoryEditTree}/>
                </TabPanel>
                <TabPanel value={value} index={2} dir={theme.direction}>
                    <SelectBlock Block={CGoodEdit} FindBlock={CFindGoodEdit}/>
                </TabPanel>
            </SwipeableViews>
        </Box>
    );
}
const AdminPage = () => {
    const matches = useMediaQuery('(max-width:768px)')
    return(
        <>
            <Breadcrumb links={['admin']} title={'Dashboard'}/>
            <main style={{backgroundColor: "#f3f3f3", padding: matches ? "20px 0" : "50px 0", minHeight:'300px'}}>
                <Container maxWidth="lg">
                    <FullWidthTabs/>
                </Container>
            </main>
        </>
    )
}

export default AdminPage