jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Profile page option feature and Its Design Implemented

Browse source
This commit is contained in:
jaanvi 2025-03-04 18:12:15 +05:30
parent d1612f9131
commit 36d7b9e71e
1 changed files with 102 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
src/pages/ProfilePage/index.tsx
View file

@ -1,7 +1,3 @@
//Eknoor singh
//date:- 12-Feb-2025
//Made a special page for showing the profile details
import { useEffect } from "react";
import {
Container,
@ -12,16 +8,15 @@ import {
Grid,
Avatar,
Box,
Stack,
Divider,
Link,
} from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
const ProfilePage = () => {
//Eknoor singh
//date:- 12-Feb-2025
//Dispatch is called and user, isLoading, and error from Authstate Interface
const dispatch = useDispatch<AppDispatch>();
const { user, isLoading } = useSelector(
(state: RootState) => state?.profileReducer
@ -49,34 +44,110 @@ const ProfilePage = () => {
return (
<Container sx={{ py: 4 }}>
<Typography variant="h4" gutterBottom>
Profile
Account Info
</Typography>
<Card sx={{ maxWidth: 600, margin: "0 auto" }}>
<Card sx={{ maxWidth: "100%", margin: "0 auto" }}>
<CardContent>
<Grid container spacing={2} alignItems="center">
<Grid item>
<Stack direction="column" spacing={2}>
<Stack
direction="row"
spacing={1.5}
alignItems="center"
>
<Avatar
alt={user?.name || "User Avatar"}
src={"/static/images/avatar/7.jpg"}
sx={{ width: 80, height: 80 }}
alt="User Avatar"
src="/avatar.png"
sx={{ width: 36, height: 36 }}
/>
<Box>
<Typography
variant="body1"
sx={{ color: "#202020" }}
>
{user?.name || "No Admin"}
</Typography>
<Typography
variant="body2"
color="text.secondary"
>
{user?.userType || "N/A"}
</Typography>
</Box>
</Stack>
<Divider
flexItem
sx={{ backgroundColor: "rgba(32, 32, 32, 0.5)" }}
/>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Typography
variant="body1"
sx={{ color: "#202020" }}
>
Personal Information
</Typography>
<Link href="/edit-profile" underline="hover">
Edit
</Link>
</Stack>
<Grid container >
<Grid item xs={12} sm={4}>
<Typography
variant="body1"
sx={{ color: "#202020" }}
>
Name:
</Typography>
<Typography
variant="body2"
color="text.secondary"
>
{user?.name || "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={4}>
<Typography
variant="body1"
sx={{ color: "#202020" }}
>
Phone:
</Typography>
<Typography
variant="body2"
color="text.secondary"
>
{user?.phone || "N/A"}
</Typography>
</Grid>
<Grid item xs={12} sm={4}>
<Typography
variant="body1"
sx={{ color: "#202020" }}
>
Email:
</Typography>
<Typography
variant="body2"
color="text.secondary"
>
{user?.email || "N/A"}
</Typography>
</Grid>
</Grid>
<Grid item xs>
<Typography variant="h6">
{user?.name || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Email: {user?.email || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Phone: {user?.phone || "N/A"}
</Typography>
<Typography variant="body2" color="text.secondary">
Role: <b>{user?.userType || "N/A"}</b>
</Typography>
</Grid>
</Grid>
<Typography variant="body1" sx={{ color: "#202020" }}>
Bio:
</Typography>
<Typography variant="body2" color="text.secondary">
{user?.bio || "No bio available."}
</Typography>
</Stack>
</CardContent>
</Card>
</Container>