tbg-ecomm-nextjs/pages-sections/yamaha/profile/profile.js

import React from "react";
import classNames from "classnames";

import { makeStyles, useTheme } from '@material-ui/core/styles';
import Dashboard from "@material-ui/icons/Dashboard";

import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import Grid from '@material-ui/core/Grid';
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
import CustomInput from "components/CustomInput/CustomInput.js";
import InputAdornment from "@material-ui/core/InputAdornment";
import Paper from '@material-ui/core/Paper';

import Accordion from '@material-ui/core/Accordion';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

import PropTypes from 'prop-types';
import SwipeableViews from 'react-swipeable-views';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Box from '@material-ui/core/Box';

import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

import stylecss from "pages-sections/yamaha/profile/profile.css"
import Voucher1 from 'assets/img/Group1.png';

const useStyles = makeStyles((theme) => ({
    root: {
        backgroundColor: theme.palette.background.paper,
        width: '100%',
    },
    heading: {
        fontSize: theme.typography.pxToRem(15),
        flexBasis: '33.33%',
        flexShrink: 0,
    },
    secondaryHeading: {
        fontSize: theme.typography.pxToRem(15),
        color: theme.palette.text.secondary,
    },
}));

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 p={3}>
                    <Typography>{children}</Typography>
                </Box>
            )}
        </div>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

function a11yProps(index) {
    return {
        id: `full-width-tab-${index}`,
        'aria-controls': `full-width-tabpanel-${index}`,
    };
}

const DataProfile = function ({ profile, user, ...props }) {
    const classes = useStyles();
    const [pass, setPass] = React.useState("");
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);

    const theme = useTheme();
    const [value, setValue] = React.useState(0);

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

    const handleChangeIndex = (index) => {
        setValue(index);
    };

    const [open, setOpen] = React.useState(false);
    const [scroll, setScroll] = React.useState('paper');

    const handleClickOpen = (scrollType) => () => {
        setOpen(true);
        setScroll(scrollType);
    };

    const handleClose = () => {
        setOpen(false);
    };

    const descriptionElementRef = React.useRef(null);
    React.useEffect(() => {
        if (open) {
            const { current: descriptionElement } = descriptionElementRef;
            if (descriptionElement !== null) {
                descriptionElement.focus();
            }
        }
    }, [open]);

    const AkunSaya = profile.map((data) => {
        const classes = useStyles();
        const [expanded, setExpanded] = React.useState(false);

        const handleChange = (panel) => (event, isExpanded) => {
            setExpanded(isExpanded ? panel : false);
        };
        return (
            <div style={{ padding: "30px" }} className={classes.root}>
                <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls="panel1bh-content"
                        id="panel1bh-header"
                    >
                        <Typography className={classes.heading}><strong>Profil Saya</strong></Typography>
                        <Typography className={classes.secondaryHeading}><strong>Kelola informasi profil Anda untuk mengontrol, melindungi dan mengamankan akun</strong></Typography>
                    </AccordionSummary>
                    <AccordionDetails>
                        <Typography>
                            <Grid container="container">
                                <Grid item="item" xs={12}>
                                    <hr></hr>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Username
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.username}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Nama
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.firstName}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Email
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.email}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Tanggal Lahir
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : 15 Mei 1998
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Jenis Kelamin
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : Laki - Laki
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Nomer Telpon
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.telp}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Alamat
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.address}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Button color="info" round="round" href={"/yamaha/profile/edit-profile?s=" + data.id}>
                                    <Icon className={classes.icons}>open_in_new</Icon>Edit Profile
                                </Button>
                            </Grid>
                        </Typography>
                    </AccordionDetails>
                </Accordion>
                <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls="panel3bh-content"
                        id="panel3bh-header"
                    >
                        <Typography className={classes.heading}><strong>Ubah Password Saya</strong></Typography>
                        <Typography className={classes.secondaryHeading}>
                            <strong>Kelola Password Saya Untuk Meningkatkan Keamanan Akun Anda</strong>
                        </Typography>
                    </AccordionSummary>
                    <AccordionDetails>
                        <Typography>
                            <Grid container="container">
                                <Grid item xs>
                                    <hr></hr>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid
                                        container="container"
                                        style={{
                                            padding: "10px"
                                        }}>
                                        <Grid item xs={3}>
                                            Password Saat Ini
                                        </Grid>
                                        <Grid item xs={9}>
                                            :
                                            <div align="left">
                                                <CustomInput
                                                    labelText="Password Saat Ini"
                                                    id="pass"
                                                    value={pass}
                                                    formControlProps={{
                                                        fullWidth: true
                                                    }}
                                                    inputProps={{
                                                        onChange: (event) => setPass(event.target.value),
                                                        type: "password",
                                                        endAdornment: (
                                                            <InputAdornment position="end">
                                                                <Icon className={classes.inputIconsColor}>
                                                                    lock_outline
                                                                </Icon>
                                                            </InputAdornment>
                                                        ),
                                                        autoComplete: "off"
                                                    }} />
                                            </div>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs={3}>
                                        Password Baru
                                    </Grid>
                                    <Grid item xs={9}>
                                        :
                                        <div align="left">
                                            <CustomInput
                                                labelText="Masukan Password Baru Anda"
                                                id="pass"
                                                value={pass}
                                                formControlProps={{
                                                    fullWidth: true
                                                }}
                                                inputProps={{
                                                    onChange: (event) => setPass(event.target.value),
                                                    type: "password",
                                                    endAdornment: (
                                                        <InputAdornment position="end">
                                                            <Icon className={classes.inputIconsColor}>
                                                                lock_outline
                                                            </Icon>
                                                        </InputAdornment>
                                                    ),
                                                    autoComplete: "off"
                                                }} />
                                        </div>
                                    </Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs={3}>
                                        Confirm Password
                                    </Grid>
                                    <Grid item xs={9}>
                                        :
                                        <div align="left">
                                            <CustomInput
                                                labelText="Masukan Kembali Password Anda"
                                                id="pass"
                                                value={pass}
                                                formControlProps={{
                                                    fullWidth: true
                                                }}
                                                inputProps={{
                                                    onChange: (event) => setPass(event.target.value),
                                                    type: "password",
                                                    endAdornment: (
                                                        <InputAdornment position="end">
                                                            <Icon className={classes.inputIconsColor}>
                                                                lock_outline
                                                            </Icon>
                                                        </InputAdornment>
                                                    ),
                                                    autoComplete: "off"
                                                }} />
                                        </div>
                                    </Grid>
                                </Grid>
                                <Button color="info" round="round" href={"/yamaha/product/product_detail?s=" + data.id}>
                                    <Icon className={classes.icons}>open_in_new</Icon>
                                    Simpan
                                </Button>
                            </Grid>
                        </Typography>
                    </AccordionDetails>
                </Accordion>
            </div>
        );
    })
    const Notifikasi = profile.map((data) => {
        const classes = useStyles();
        const [expanded, setExpanded] = React.useState(false);

        const handleChange = (panel) => (event, isExpanded) => {
            setExpanded(isExpanded ? panel : false);
        };
        return (
            <div style={{ padding: "30px" }} className={classes.root}>
                <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls="panel1bh-content"
                        id="panel1bh-header"
                    >
                        <Typography className={classes.heading}><strong>Profil Saya</strong></Typography>
                        <Typography className={classes.secondaryHeading}><strong>Kelola informasi profil Anda untuk mengontrol, melindungi dan mengamankan akun</strong></Typography>
                    </AccordionSummary>
                    <AccordionDetails>
                        <Typography>
                            <Grid container="container">
                                <Grid item="item" xs={12}>
                                    <hr></hr>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Username
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.username}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Nama
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.firstName}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Email
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.email}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Tanggal Lahir
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : 15 Mei 1998
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Jenis Kelamin
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : Laki - Laki
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Nomer Telpon
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.telp}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs>
                                        Alamat
                                    </Grid>
                                    <Grid item xs>
                                        <div align="left">
                                            : {data.address}
                                        </div>
                                    </Grid>
                                    <Grid item xs />
                                    <Grid item xs />
                                </Grid>
                                <Button color="info" round="round" href={"/yamaha/profile/edit-profile?s=" + data.id}>
                                    <Icon className={classes.icons}>open_in_new</Icon>Edit Profile
                                </Button>
                            </Grid>
                        </Typography>
                    </AccordionDetails>
                </Accordion>
                <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
                    <AccordionSummary
                        expandIcon={<ExpandMoreIcon />}
                        aria-controls="panel3bh-content"
                        id="panel3bh-header"
                    >
                        <Typography className={classes.heading}><strong>Ubah Password Saya</strong></Typography>
                        <Typography className={classes.secondaryHeading}>
                            <strong>Kelola Password Saya Untuk Meningkatkan Keamanan Akun Anda</strong>
                        </Typography>
                    </AccordionSummary>
                    <AccordionDetails>
                        <Typography>
                            <Grid container="container">
                                <Grid item xs>
                                    <hr></hr>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid
                                        container="container"
                                        style={{
                                            padding: "10px"
                                        }}>
                                        <Grid item xs={3}>
                                            Password Saat Ini
                                        </Grid>
                                        <Grid item xs={9}>
                                            :
                                            <div align="left">
                                                <CustomInput
                                                    labelText="Password Saat Ini"
                                                    id="pass"
                                                    value={pass}
                                                    formControlProps={{
                                                        fullWidth: true
                                                    }}
                                                    inputProps={{
                                                        onChange: (event) => setPass(event.target.value),
                                                        type: "password",
                                                        endAdornment: (
                                                            <InputAdornment position="end">
                                                                <Icon className={classes.inputIconsColor}>
                                                                    lock_outline
                                                                </Icon>
                                                            </InputAdornment>
                                                        ),
                                                        autoComplete: "off"
                                                    }} />
                                            </div>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs={3}>
                                        Password Baru
                                    </Grid>
                                    <Grid item xs={9}>
                                        :
                                        <div align="left">
                                            <CustomInput
                                                labelText="Masukan Password Baru Anda"
                                                id="pass"
                                                value={pass}
                                                formControlProps={{
                                                    fullWidth: true
                                                }}
                                                inputProps={{
                                                    onChange: (event) => setPass(event.target.value),
                                                    type: "password",
                                                    endAdornment: (
                                                        <InputAdornment position="end">
                                                            <Icon className={classes.inputIconsColor}>
                                                                lock_outline
                                                            </Icon>
                                                        </InputAdornment>
                                                    ),
                                                    autoComplete: "off"
                                                }} />
                                        </div>
                                    </Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item xs={3}>
                                        Confirm Password
                                    </Grid>
                                    <Grid item xs={9}>
                                        :
                                        <div align="left">
                                            <CustomInput
                                                labelText="Masukan Kembali Password Anda"
                                                id="pass"
                                                value={pass}
                                                formControlProps={{
                                                    fullWidth: true
                                                }}
                                                inputProps={{
                                                    onChange: (event) => setPass(event.target.value),
                                                    type: "password",
                                                    endAdornment: (
                                                        <InputAdornment position="end">
                                                            <Icon className={classes.inputIconsColor}>
                                                                lock_outline
                                                            </Icon>
                                                        </InputAdornment>
                                                    ),
                                                    autoComplete: "off"
                                                }} />
                                        </div>
                                    </Grid>
                                </Grid>
                                <Button color="info" round="round" href={"/yamaha/product/product_detail?s=" + data.id}>
                                    <Icon className={classes.icons}>open_in_new</Icon>
                                    Simpan
                                </Button>
                            </Grid>
                        </Typography>
                    </AccordionDetails>
                </Accordion>
            </div>
        );
    })
    const Voucher = profile.map((data) => {
        return (
            <div style={{ padding: "30px" }} className={classes.root}>
                <div className={classes.root}>
                    <AppBar position="static" color="default">
                        <Tabs
                            value={value}
                            onChange={handleChange}
                            indicatorColor="primary"
                            textColor="primary"
                            variant="fullWidth"
                            aria-label="full width tabs example"
                        >
                            <Tab label="Semua" {...a11yProps(0)} />
                            <Tab label="Terbaru" {...a11yProps(1)} />
                            <Tab label="Terpopuler" {...a11yProps(2)} />
                            <Tab label="Segera Berakhir" {...a11yProps(3)} />
                        </Tabs>
                    </AppBar>
                    <SwipeableViews
                        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
                        index={value}
                        onChangeIndex={handleChangeIndex}
                    >
                        <TabPanel value={value} index={0} dir={theme.direction}>
                            <div className={classes.root} align="center">
                                <Grid container spacing={3}>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a onClick={handleClickOpen('paper')} className="sk">S&K</a>
                                            <Dialog
                                                open={open}
                                                onClose={handleClose}
                                                scroll={scroll}
                                                aria-labelledby="scroll-dialog-title"
                                                aria-describedby="scroll-dialog-description"
                                            >
                                                <DialogTitle id="scroll-dialog-title">Syarat & Ketentuan Penggunaan Voucher</DialogTitle>
                                                <DialogContent dividers={scroll === 'paper'}>
                                                    <DialogContentText
                                                        id="scroll-dialog-description"
                                                        ref={descriptionElementRef}
                                                        tabIndex={-1}
                                                    >
                                                        <div className="container">
                                                            <img
                                                                alt="..."
                                                                style={{ width: "500px", display: "block" }}
                                                                src={Voucher1}
                                                                className={navImageClasses}
                                                            />
                                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                                            <p className="valid">s/d: 19.09.2021</p>
                                                        </div>
                                                        <h4 className="text"><strong>Promosi</strong></h4><br />
                                                        <p style={{ marginTop: "-30px" }} >Voucher Gratis Ongkir</p>

                                                        <h4 className="text"><strong>Masa Berlaku</strong></h4><br />
                                                        <p style={{ marginTop: "-30px" }} >13.09.2021 00:00 - 19.09.2021 23:59</p>

                                                        <h4 className="text"><strong>Produk</strong></h4><br />
                                                        <p style={{ marginTop: "-30px" }} >Produk bertanda Gratis Ongkir di E-Commerce Yamaha</p>

                                                        <h4 className="text"><strong>Metode Pembayaran</strong></h4><br />
                                                        <p style={{ marginTop: "-30px" }} >Semua metode pembayaran</p>

                                                        <h4 className="text"><strong>S&K</strong></h4><br />
                                                        <p style={{ marginTop: "-30px" }} >
                                                            Voucher Gratis Ongkir ini berlaku untuk semua toko berlogo Gratis Ongkir di E-Commerce Yamaha. Berlaku pada 13-19 
                                                            September 2021 WIB sesuai ketentuan berikut : -- 
                                                            1. Semua toko bertanda Gratis Ongkir dengan menggunakan 
                                                            pengiriman Reguler atau Hemat dengan min. belanja 30RB dan potongan s/d 10RB untuk pengiriman ke Area Sumatera Selatan dan Bengkulu. 
                                                            2. Semua toko bertanda Gratis Ongkir 
                                                            dengan menggunakan pengiriman Reguler atau Hemat dengan min. belanja 30RB dan potongan s/d 25RB untuk 
                                                            pengiriman ke Sumatera Selatan.
                                                            3. Semua toko bertanda Gratis 
                                                            Ongkir dengan menggunakan pengiriman Reguler atau Hemat dengan min. belanja 30RB dan potongan s/d 30RB 
                                                            untuk pengiriman ke Sumatera Selatan dan Bengkulu -- 
                                                            Cek S&K selengkapnya di halaman Gratis Ongkir E-Commerce Yamaha. 
                                                            Dengan menggunakan Voucher ini, Anda telah menyetujui Syarat Layanan E-Commerce Yamaha.
                                                        </p>
                                                    </DialogContentText>
                                                </DialogContent>
                                                <DialogActions>
                                                    <Button onClick={handleClose} color="primary">
                                                        Cancel
                                                    </Button>
                                                    <Button onClick={handleClose} color="primary">
                                                        Subscribe
                                                    </Button>
                                                </DialogActions>
                                            </Dialog>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                </Grid>
                                <Grid container spacing={3}>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                </Grid>
                            </div>
                        </TabPanel>
                        <TabPanel value={value} index={1} dir={theme.direction}>
                            <div className={classes.root} align="center">
                                <Grid container spacing={3}>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                </Grid>
                                <Grid container spacing={3}>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                </Grid>
                            </div>
                        </TabPanel>
                        <TabPanel value={value} index={2} dir={theme.direction}>
                            <div className={classes.root} align="center">
                                <Grid container spacing={3}>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                </Grid>
                                <Grid container spacing={3}>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                </Grid>
                            </div>
                        </TabPanel>
                        <TabPanel value={value} index={3} dir={theme.direction}>
                            <div className={classes.root} align="center">
                                <Grid container spacing={3}>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                </Grid>
                                <Grid container spacing={3}>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                    <Grid item xs={6}>
                                        <div className="container">
                                            <img
                                                alt="..."
                                                style={{ width: "500px", display: "block" }}
                                                src={Voucher1}
                                                className={navImageClasses}
                                            />
                                            <p className="name"><strong>Voucher Gratis Ongkir</strong></p><br></br>
                                            <p className="valid">s/d: 19.09.2021</p>
                                            <a href="#" target="_blank" className="used">Pakai Voucher</a>
                                            <a href="#" target="_blank" className="sk">S&K</a>
                                        </div>
                                    </Grid>
                                </Grid>
                            </div>
                        </TabPanel>
                    </SwipeableViews>
                </div>
            </div>
        );
    })
    return (
        <Card className={classes.textCenter}>
            <div align="center">
                <CardHeader color="info"><b>Profile</b></CardHeader>
            </div>
            <CardBody>
                <div align="center">
                    <h2><b>Profile & User Management</b></h2>
                </div>
                <GridContainer justify="center">
                    <GridItem>
                        <NavPills
                            alignCenter
                            color="primary"
                            tabs={[
                                {
                                    tabButton: "Akun Saya",
                                    tabIcon: Dashboard,
                                    tabContent: (
                                        <GridContainer justify="center">
                                            {AkunSaya}
                                        </GridContainer>
                                    ),
                                },
                                {
                                    tabButton: "Notifikasi",
                                    tabIcon: Dashboard,
                                    tabContent: (
                                        <GridContainer justify="center">
                                            {Notifikasi}
                                        </GridContainer>
                                    ),
                                },
                                {
                                    tabButton: "Voucher Saya",
                                    tabIcon: Dashboard,
                                    tabContent: (
                                        <GridContainer justify="center">
                                            {Voucher}
                                        </GridContainer>
                                    ),
                                },
                            ]}
                        />
                    </GridItem>
                </GridContainer>
            </CardBody>
        </Card>
    );
}

export default DataProfile;