// ** React Imports import { useState } from 'react' // ** MUI Imports import Box from '@mui/material/Box' import Grid from '@mui/material/Grid' import Card from '@mui/material/Card' import Button from '@mui/material/Button' import Dialog from '@mui/material/Dialog' import Select from '@mui/material/Select' import Switch from '@mui/material/Switch' import Divider from '@mui/material/Divider' import MenuItem from '@mui/material/MenuItem' import { styled } from '@mui/material/styles' import TextField from '@mui/material/TextField' import Typography from '@mui/material/Typography' import InputLabel from '@mui/material/InputLabel' import CardContent from '@mui/material/CardContent' import CardActions from '@mui/material/CardActions' import DialogTitle from '@mui/material/DialogTitle' import FormControl from '@mui/material/FormControl' import DialogContent from '@mui/material/DialogContent' import DialogActions from '@mui/material/DialogActions' import InputAdornment from '@mui/material/InputAdornment' import LinearProgress from '@mui/material/LinearProgress' import FormControlLabel from '@mui/material/FormControlLabel' import DialogContentText from '@mui/material/DialogContentText' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Custom Components import CustomChip from 'src/@core/components/mui/chip' import CustomAvatar from 'src/@core/components/mui/avatar' import UserSuspendDialog from 'src/views/apps/user/view/UserSuspendDialog' import UserSubscriptionDialog from 'src/views/apps/user/view/UserSubscriptionDialog' // ** Types import { ThemeColor } from 'src/@core/layouts/types' import { UsersType } from 'src/types/apps/userTypes' // ** Utils Import import { getInitials } from 'src/@core/utils/get-initials' interface ColorsType { [key: string]: ThemeColor } const data: UsersType = { id: 1, role: 'admin', status: 'active', username: 'gslixby0', avatarColor: 'primary', country: 'El Salvador', company: 'Yotz PVT LTD', contact: '(479) 232-9151', currentPlan: 'enterprise', fullName: 'Daisy Patterson', email: 'gslixby0@abc.net.au', avatar: '/images/avatars/4.png' } const roleColors: ColorsType = { admin: 'error', editor: 'info', author: 'warning', maintainer: 'success', subscriber: 'primary' } const statusColors: ColorsType = { active: 'success', pending: 'warning', inactive: 'secondary' } // ** Styled component const Sup = styled('sup')(({ theme }) => ({ top: '0.2rem', left: '-0.6rem', position: 'absolute', color: theme.palette.primary.main })) // ** Styled component const Sub = styled('sub')({ fontWeight: 300, fontSize: '1rem', alignSelf: 'flex-end' }) const UserViewLeft = () => { // ** States const [openEdit, setOpenEdit] = useState(false) const [openPlans, setOpenPlans] = useState(false) const [suspendDialogOpen, setSuspendDialogOpen] = useState(false) const [subscriptionDialogOpen, setSubscriptionDialogOpen] = useState(false) // Handle Edit dialog const handleEditClickOpen = () => setOpenEdit(true) const handleEditClose = () => setOpenEdit(false) // Handle Upgrade Plan dialog const handlePlansClickOpen = () => setOpenPlans(true) const handlePlansClose = () => setOpenPlans(false) if (data) { return ( {data.avatar ? ( ) : ( {getInitials(data.fullName)} )} {data.fullName}
1.23k Task Done
568 Project Done
Details `${theme.spacing(4)} !important` }} /> Username: @{data.username} Billing Email: {data.email} Status: Role: {data.role} Tax ID: Tax-8894 Contact: +1 {data.contact} Language: English Country: {data.country} [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pt: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} > Edit User Information `${theme.spacing(8)} !important`, px: theme => [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`] }} > Updating user details will receive a privacy audit.
@ }} /> Status Language Country } sx={{ '& .MuiTypography-root': { fontWeight: 500 } }} />
[`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pb: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} >
`2px solid ${theme.palette.primary.main}` }}> $ 99 / month 10 Users Up to 10GB storage Basic Support Days 26 of 30 Days 4 days remaining [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pt: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} > Upgrade Plan [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`] }} > Choose the best plan for the user. `${theme.spacing(2)} !important`, pb: theme => `${theme.spacing(8)} !important`, px: theme => [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`] }} > Choose Plan [`${theme.spacing(8)} !important`, `${theme.spacing(8)} !important`], px: theme => [`${theme.spacing(5)} !important`, `${theme.spacing(15)} !important`], pb: theme => [`${theme.spacing(8)} !important`, `${theme.spacing(12.5)} !important`] }} > User current plan is standard plan $ 99 / month
) } else { return null } } export default UserViewLeft