123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153 |
- 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
|