From 36d7b9e71e6946180a7e6aa402d999cb2d2a0125 Mon Sep 17 00:00:00 2001
From: jaanvi <jaana78145@gmail.com>
Date: Tue, 4 Mar 2025 18:12:15 +0530
Subject: [PATCH] Profile page option feature and Its Design Implemented

---
 src/pages/ProfilePage/index.tsx | 133 ++++++++++++++++++++++++--------
 1 file changed, 102 insertions(+), 31 deletions(-)

diff --git a/src/pages/ProfilePage/index.tsx b/src/pages/ProfilePage/index.tsx
index 1bebb78..f1d2f32 100644
--- a/src/pages/ProfilePage/index.tsx
+++ b/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">
-						<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>