Profile Page - Copy this React, Tailwind 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'-}