Profile page option feature and Its Design Implemented

src/pages/ProfilePage/index.tsx

@@ -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">
+					<Stack direction="column" spacing={2}>
-						<Grid item>
+						<Stack
+							direction="row"
+							spacing={1.5}
+							alignItems="center"
+						>
 							<Avatar
-								
+								alt="User Avatar"
-								alt={user?.name || "User Avatar"}
+								src="/avatar.png"
-								src={"/static/images/avatar/7.jpg"}
+								sx={{ width: 36, height: 36 }}
-								sx={{ width: 80, height: 80 }}
 							/>
+							<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 variant="body1" sx={{ color: "#202020" }}>
-							</Typography>
+							Bio:
-							<Typography variant="body2" color="text.secondary">
+						</Typography>
-								Email: {user?.email || "N/A"}
+						<Typography variant="body2" color="text.secondary">
-							</Typography>
+							{user?.bio || "No bio available."}
-							<Typography variant="body2" color="text.secondary">
+						</Typography>
-								Phone: {user?.phone || "N/A"}
+					</Stack>
-							</Typography>
-							<Typography variant="body2" color="text.secondary">
-								Role: <b>{user?.userType || "N/A"}</b>
-							</Typography>
-						</Grid>
-					</Grid>
 				</CardContent>
 			</Card>
 		</Container>