modification list:

themeswitcher added [light theme is pending css]
home page converted into componenet
Update profile UI added and api integrted where fetch profile and update profile
Update Password UI integrated and API integrated

Author: VikrantParmar

.gitignore

@@ -91,3 +91,6 @@ eslintcache
 # Lock files (optional: if you don't want to track lock files)
 package-lock.json
 yarn.lock
+
+#custom files and folders
+_notes.txt

src/App.css

@@ -54,4 +54,5 @@
   100% {
     transform: rotate(360deg);
   }
-}
+}
+

src/App.jsx

@@ -1,52 +1,43 @@
-import React, { Suspense } from "react";
+import React, { useState, Suspense } from "react";
 import { Route, Routes, Navigate } from "react-router-dom";
 import { CssBaseline, Box, CircularProgress } from "@mui/material";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { ThemeProvider } from "@mui/material/styles";
 import HeaderMenu from "./components/Layout/HeaderMenu";
 import Footer from "./components/Layout/Footer";
+import { SnackbarProvider } from "notistack";
+import lightTheme from "@/themes/lightTheme";
+import darkTheme from "./themes/darkTheme";
 import "./App.css";
 const HomePage = React.lazy(() => import("./pages/HomePage"));
 const LoginPage = React.lazy(() => import("./pages/Auth/LoginPage"));
 const RegisterPage = React.lazy(() => import("./pages/Auth/RegisterPage"));
+const ProfilePage = React.lazy(() => import("@/pages/Profile/ProfilePage"));
 const NotFoundPage = React.lazy(() => import("./pages/ErrorPages/Page404"));
-import { SnackbarProvider } from "notistack";
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: "#0A0F24",
-    },
-    secondary: {
-      main: "#FAE3CF",
-    },
-    other: {
-      white: "#fff",
-      black: "#000",
-    },
-    background: {
-      default: "#f4f6f8",
-    },
-  },
-  typography: {
-    fontFamily: "Roboto, Arial, sans-serif", //monospace
-    h1: {
-      fontSize: "2rem",
-    },
-    body1: {
-      fontSize: "1rem",
-    },
-  },
-});
+const ProfilePage2 = React.lazy(() =>
+  import("@/components/Profile/ProfileForm")
+);
 function App() {
+  const [currentTheme, setCurrentTheme] = useState("dark");
+  const themes = {
+    light: lightTheme,
+    dark: darkTheme,
+  };
+  const handleThemeChange = (theme) => {
+    setCurrentTheme(theme);
+  };
+
   return (
     <SnackbarProvider
       maxSnack={1}
       anchorOrigin={{ vertical: "top", horizontal: "right" }}
     >
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={themes[currentTheme]}>
         <CssBaseline />
         <Box display="flex" flexDirection="column" minHeight="100vh">
-          <HeaderMenu />
+          <HeaderMenu
+            currentTheme={currentTheme}
+            onThemeChange={handleThemeChange}
+          />
           <Box
             component="main"
             sx={{ flexGrow: 1, bgcolor: "background.default", p: 3 }}
@@ -63,6 +54,9 @@ function App() {
                 <Route path="/home" element={<Navigate to="/" />} />
                 <Route path="/login" element={<LoginPage />} />
                 <Route path="/register" element={<RegisterPage />} />
+                <Route path="/my-profile" element={<ProfilePage />} />
+                <Route path="/me" element={<ProfilePage2 />} />
+                <Route path="/update-password" element={<ProfilePage />} />
                 <Route path="*" element={<NotFoundPage />} />
               </Routes>
             </Suspense>

src/components/Home/Banner.jsx

@@ -1,17 +1,27 @@
-import {
-  Typography,
-  Paper,
-} from "@mui/material";
+import { Typography, Paper } from "@mui/material";
 const Banner = () => {
   return (
-    <Paper className="home-banner">
-      <Typography variant="h2" gutterBottom>
-        Welcome to {import.meta.env.VITE_APP_NAME} !
-      </Typography>
-      <Typography variant="h6">
-        Designing Innovative Solutions Inspired by Excellence
-      </Typography>
-    </Paper>
+    <>
+      <Paper className="home-banner">
+        <Typography
+          variant="h2"
+          gutterBottom
+          sx={{
+            fontSize: { xs: "2rem", sm: "3rem", md: "4rem" },
+          }}
+        >
+          Welcome To {import.meta.env.VITE_APP_NAME} !
+        </Typography>
+        <Typography
+          variant="h6"
+          sx={{
+            fontSize: { xs: "1rem", sm: "1.25rem", md: "1.5rem" },
+          }}
+        >
+          Designing Innovative Solutions Inspired by Excellence
+        </Typography>
+      </Paper>
+    </>
   );
 };
 export default Banner;

src/components/Layout/HeaderMenu.jsx

@@ -18,12 +18,21 @@ import {
   ListItemIcon,
   Divider,
   Tooltip,
+  Select,
+  Chip,
 } from "@mui/material";
-import { Menu as MenuIcon, Logout } from "@mui/icons-material";
+import {
+  Menu as MenuIcon,
+  Logout,
+  PersonAdd,
+  Person2Outlined,
+  PasswordOutlined,
+} from "@mui/icons-material";
 import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import CommonHelper from "@/utils/commonHelpers";
 import { logout, resetError } from "@/store/auth/authSlice";
+import ThemeSwitcher from "@/components/Layout/ThemeSwitcher";
 
 const pages = [
   { name: "Home", path: "/", public: 1, auth: 1 },
@@ -32,7 +41,7 @@ const pages = [
   { name: "SignUp", path: "/register", public: 1, auth: 0 },
 ];
 
-function HeaderMenu() {
+function HeaderMenu({ currentTheme, onThemeChange }) {
   const dispatch = useDispatch();
   const { isLoggedIn, user } = useSelector((state) => state.auth);
   const [anchorElNav, setAnchorElNav] = useState(null);
@@ -252,6 +261,11 @@ function HeaderMenu() {
               return null;
             })}
           </Box>
+          <ThemeSwitcher
+            currentTheme={currentTheme}
+            onThemeChange={onThemeChange}
+          />
+
           {isLoggedIn && user ? (
             <>
               <Box
@@ -265,17 +279,18 @@ function HeaderMenu() {
                   <IconButton
                     onClick={handleClick}
                     size="small"
-                    sx={{ ml: 2 }}
+                    sx={{ ml: 0 }}
                     aria-controls={open ? "account-menu" : undefined}
                     aria-haspopup="true"
                     aria-expanded={open ? "true" : undefined}
                   >
                     <Avatar
                       sx={{
+                        fontWeight: "bold",
                         width: 40,
                         height: 40,
                         color: "primary.main",
-                        background: "secondary.main",
+                        backgroundColor: "secondary.main",
                       }}
                     >
                       {CommonHelper._nameInitials(user.full_name)}
@@ -321,14 +336,37 @@ function HeaderMenu() {
                 anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
               >
                 <MenuItem>
-                  <strong>
-                    Hello, {user.full_name} [{user.unique_id}]
+                  <strong style={{ display: "flex", alignItems: "center" }}>
+                    Hello, {user.first_name}{" "}
+                    <Chip
+                      label={user.unique_id}
+                      size="small"
+                      color="primary"
+                      sx={{ marginLeft: "8px", verticalAlign: "middle" }}
+                    />
                   </strong>
                 </MenuItem>
-                <MenuItem onClick={handleClose}>
-                  <Avatar /> My account
+
+                <MenuItem
+                  onClick={handleClose}
+                  component={Link}
+                  to="/my-profile"
+                >
+                  <ListItemIcon>
+                    <Person2Outlined fontSize="small" />
+                  </ListItemIcon>
+                  My Account
+                </MenuItem>
+                <MenuItem
+                  onClick={handleClose}
+                  component={Link}
+                  to="/update-password"
+                >
+                  <ListItemIcon>
+                    <PasswordOutlined fontSize="small" />
+                  </ListItemIcon>
+                  Change Password
                 </MenuItem>
-                <Divider />
                 {/* <MenuItem onClick={handleClose}>
                   <ListItemIcon>
                     <PersonAdd fontSize="small" />

src/components/Layout/ThemeSwitcher.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Box, IconButton } from "@mui/material";
+import { LightMode, DarkMode } from "@mui/icons-material";
+
+const ThemeSwitcher = ({ currentTheme, onThemeChange }) => {
+  const handleToggleTheme = () => {
+    onThemeChange(currentTheme === "light" ? "dark" : "light");
+  };
+
+  return (
+    <Box>
+      <IconButton onClick={handleToggleTheme} color="inherit">
+        {currentTheme === "light" ? <DarkMode /> : <LightMode />}
+      </IconButton>
+    </Box>
+  );
+};
+
+export default ThemeSwitcher;