Profile - Copy this React, Mui Component to your project

Use following example database document to add required fields into profile page according to it also add dob field into profile account status need to be in readmode only user cant change their email and status of account{ "_id": { "$oid": "66d5a682fe9446d63b202473" }, "username": "Raj Tiwari", "email": "olixlab.1@gmail.com", "password": "$2a$10$nP8jxQ81KLkC2aVdnMoKiuNEpy0iqbMEju32hYoeuKqONfQQ.cu7m", "role": "user", "activities": [], "salary": 20000, "emailStats": [ "2024 11 13", "2024 11 14", "2024 11 15" ], "createdAt": { "$date": "2024 09 02T11:50:26.117Z" }, "__v": 1171, "lastLoginAt": { "$date": "2024 11 13T12:35:32.573Z" }, "userId": "auth0|66d5a682fe9446d63b202473" } Here is my current code change sof profile page// ** React Imports import React, { useState } from 'react' // ** MUI Imports import { Box, Typography, Avatar, Grid, TextField, Button, Paper, Switch, CircularProgress, Chip, Container, IconButton, Tooltip, useTheme } from '@mui/material' // ** Third Party Imports import { styled } from '@mui/system' // ** Components Imports import IconifyIcon from 'src/@core/components/icon' import DropzoneModal from 'src/@core/components/drop zone modal' // ** Helper Imports import apiHelper from 'src/@core/utils/api helper' // ** Hooks Imports import { useAuth } from 'src/hooks/useAuth' interface Profile { username: string email: string bio: string role: string department: string phone: string location: string status: string } const StyledPaper = styled(Paper)(({ theme }) => ({ padding: theme.spacing(3), borderRadius: 16, boxShadow: '0 4px 12px rgba(0,0,0,0.1)', transition: 'transform 0.3s ease in out' // '&:hover': { // transform: 'translateY( 4px)' // } })) const ProfileImage = styled(Avatar)(() => ({ width: 150, height: 150, border: '4px solid white', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', margin: '0 auto', cursor: 'pointer', transition: 'transform 0.3s ease', '&:hover': { transform: 'scale(1.05)' } })) const defaultProfileStats = { username: 'John Doe', email: 'john.doe@example.com', bio: 'Senior Software Engineer with 5+ years of experience', role: 'Admin', department: 'Engineering', phone: '+1 (555) 123 4567', location: 'San Francisco, CA', status: 'Active' } const profileItems: { label: string; field: keyof Profile; multiline?: boolean }[] = [ { label: 'Full Name', field: 'username' }, { label: 'Email', field: 'email' }, { label: 'Phone', field: 'phone' }, { label: 'Location', field: 'location' }, { label: 'Department', field: 'department' }, { label: 'Bio', field: 'bio', multiline: true } ] const UserProfile = () => { const { user } = useAuth() const [isEditing, setIsEditing] = useState(false) const [isLoading, setIsLoading] = useState(false) const [isAdmin] = useState(true) // Mock admin status const [uploadModalOpen, setUploadModalOpen] = useState(false) const [selectedImage, setSelectedImage] = useState<string | null>(null) const [uploadProgress, setUploadProgress] = useState(0) const [uploadStatus, setUploadStatus] = useState<string | null>(null) const [profileData, setProfileData] = useState<Profile>({ ...defaultProfileStats, username: user!.username, email: user!.email, role: user!.role }) const theme = useTheme() const handleUpload = async () => { setUploadProgress(0) setUploadStatus(null) // Simulate upload progress const interval = setInterval(() => { setUploadProgress(prev => { if (prev >= 100) { clearInterval(interval) return 100 } return prev + 10 }) }, 500) // Simulate API call try { await new Promise(resolve => setTimeout(resolve, 5000)) setUploadStatus('success') setTimeout(() => { setUploadModalOpen(false) setSelectedImage(null) setUploadProgress(0) setUploadStatus(null) }, 1500) } catch (error) { setUploadStatus('error') } } const handleEditToggle = () => { setIsEditing(!isEditing) } const handleSave = async () => { setIsLoading(true) // Simulate API call await new Promise(resolve => setTimeout(resolve, 1500)) setIsLoading(false) setIsEditing(false) } const handleInputChange = (field: any) => (event: any) => { setProfileData({ ...profileData, [field]: event.target.value }) } const handleCloseDropzoneModal = () => setUploadModalOpen(false) return ( <Container maxWidth='lg' sx={{ py: 4 }}> <StyledPaper elevation={0}> <Grid container spacing={4}> <Grid item xs={12} md={4} sx={{ textAlign: 'center' }}> <Box sx={{ position: 'relative', display: 'inline block' }}> <ProfileImage alt={profileData.username} src={selectedImage || '/images/avatars/1.jpeg'} aria label='Profile picture' onClick={() => setUploadModalOpen(true)} /> {isAdmin && ( <Tooltip title='Upload new picture'> <IconButton onClick={() => setUploadModalOpen(true)} sx={{ position: 'absolute', bottom: 0, right: 0, backgroundColor: 'primary.main', color: 'white', '&:hover': { backgroundColor: 'primary.dark' } }} > <IconifyIcon icon='mdi:account edit' width={24} height={24} color='white' /> </IconButton> </Tooltip> )} </Box> <Typography variant='h5' sx={{ mt: 2, fontWeight: 'bold' }}> {profileData.username} </Typography> <Chip icon={<IconifyIcon icon='mdi:shield user outline' width={24} height={24} color='white' />} label={profileData.role} color='primary' sx={{ mt: 1 }} /> </Grid> <Grid item xs={12} md={8}> <Box sx={{ display: 'flex', justifyContent: 'space between', mb: 3 }}> <Typography variant='h6' sx={{ fontWeight: 'bold' }}> Profile Information </Typography> {isAdmin && ( <Button startIcon={ isEditing ? ( <IconifyIcon icon='mdi:content save cog' width={24} height={24} color='white' /> ) : ( <IconifyIcon icon='mdi:account edit' width={24} height={24} color='white' /> ) } variant='contained' onClick={isEditing ? handleSave : handleEditToggle} disabled={isLoading} > {isLoading ? ( <CircularProgress size={24} color='inherit' /> ) : isEditing ? ( 'Save Changes' ) : ( 'Edit Profile' )} </Button> )} </Box> <Grid container spacing={3}> {profileItems.map(item => ( <Grid item xs={12} sm={item.field === 'bio' ? 12 : 6} key={item.field}> <TextField fullWidth label={item.label} variant='outlined' value={profileData[item.field]} onChange={handleInputChange(item.field)} disabled={item.field === 'email' ? true : !isEditing} multiline={item.multiline} rows={item.multiline ? 4 : 1} InputProps={{ sx: { borderRadius: 2 } }} /> </Grid> ))} </Grid> {isAdmin && ( <Box sx={{ mt: 4, p: 2, bgcolor: '#f5f5f5', borderRadius: 2, ...theme.applyStyles('dark', { backgroundColor: 'unset' }) }} > <Typography variant='h6' sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> <IconifyIcon icon='mdi:user edit' width={24} height={24} color='white' /> Admin Controls </Typography> <Box sx={{ mt: 2, display: 'flex', alignItems: 'center', gap: 2 }}> <Typography>Account Status:</Typography> <Switch checked={profileData.status === 'Active'} onChange={() => setProfileData({ ...profileData, status: profileData.status === 'Active' ? 'Inactive' : 'Active' }) } disabled={!isEditing} /> <Typography color={profileData.status === 'Active' ? 'success.main' : 'error.main'}> {profileData.status} </Typography> </Box> </Box> )} </Grid> </Grid> </StyledPaper> <DropzoneModal open={uploadModalOpen} label='Upload Profile Picture' selectedImage={selectedImage!} uploadStatus={uploadStatus!} uploadProgress={uploadProgress} onUploadFn={handleUpload} onCloseFn={handleCloseDropzoneModal} setSelectedImage={setSelectedImage} setUploadProgress={setUploadProgress} setUploadStatus={setUploadStatus} /> </Container> ) } export default UserProfile UserProfile.acl = { action: 'read', subject: 'client page' }