From c3dea8ae95ef0aa6d5da6bdf94aa26ff7d3cdb88 Mon Sep 17 00:00:00 2001
From: Chief Bube <ebube.ojinta@chiefsoft.com>
Date: Sun, 22 Oct 2023 23:20:34 -0700
Subject: [PATCH 1/3] changed index

---
 pages/index.js | 93 +++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 84 insertions(+), 9 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index ec9013d..9c2b14d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,12 +1,87 @@
-import { useRouter } from "next/router";
-import ECommerce from "./ecommerce";
+import React from "react";
+import Grid from "@mui/material/Grid";
+import Link from "next/link";
+import styles from "@/styles/PageTitle.module.css";
+import Features from "@/components/Dashboard/eCommerce/Features";
+import Ratings from "@/components/Dashboard/eCommerce/Ratings";
+import AudienceOverview from "@/components/Dashboard/eCommerce/AudienceOverview";
+import VisitsByDay from "@/components/Dashboard/eCommerce/VisitsByDay";
+import Impressions from "@/components/Dashboard/eCommerce/Impressions";
+import ActivityTimeline from "@/components/Dashboard/eCommerce/ActivityTimeline";
+import RevenuStatus from "@/components/Dashboard/eCommerce/RevenuStatus";
+import SalesByCountries from "@/components/Dashboard/eCommerce/SalesByCountries";
+import NewCustomers from "@/components/Dashboard/eCommerce/NewCustomers";
+import RecentOrders from "@/components/Dashboard/eCommerce/RecentOrders";
+import TeamMembersList from "@/components/Dashboard/eCommerce/TeamMembersList";
+import BestSellingProducts from "@/components/Dashboard/eCommerce/BestSellingProducts";
+import LiveVisitsOnOurSite from "@/components/Dashboard/eCommerce/LiveVisitsOnOurSite";
 
-export default function Home() {
-  const router = useRouter();
+function MainPage() {
+  return (
+    <>
+      {/* Page title */}
+      <div className={styles.pageTitle}>
+        <h1>eCommerce</h1>
+        <ul>
+          <li>
+            <Link href="/">Dashboard</Link>
+          </li>
+          <li>eCommerce</li>
+        </ul>
+      </div>
+      <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
+        <Grid item xs={12} md={12} lg={12} xl={8}>
+          {/* Features */}
+          <Features />
+          {/* AudienceOverview */}
+          <AudienceOverview />
+          <Grid container columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
+            <Grid item xs={12} md={8}>
+              {/* VisitsByDay */}
+              <VisitsByDay />
+            </Grid>
+            <Grid item xs={12} md={4}>
+              {/* Impressions */}
+              <Impressions />
 
-  console.log("Check pathname: " + router.pathname)
-
-  if (router.pathname === "/") {
-    return <ECommerce />;
-  }
+              {/* ActivityTimeline */}
+              <ActivityTimeline />
+            </Grid>
+            <Grid item xs={12} md={12}>
+              {/* RevenuStatus */}
+              <RevenuStatus />
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12} md={12} lg={12} xl={4}>
+          {/* Ratings */}
+          <Ratings />
+          {/* LiveVisitsOnOurSite */}
+          <LiveVisitsOnOurSite />
+          {/* SalesByLocations */}
+          <SalesByCountries />
+          {/* NewCustomers */}
+          <NewCustomers />
+        </Grid>
+      </Grid>
+      {/* Recent Orders */}
+      <RecentOrders />
+      <Grid
+        container
+        rowSpacing={1}
+        columnSpacing={{ xs: 1, sm: 1, md: 1, lg: 1, xl: 2 }}
+      >
+        <Grid item xs={12} md={12} lg={12} xl={8}>
+          {/* TeamMembersList */}
+          <TeamMembersList />
+        </Grid>
+        <Grid item xs={12} md={12} lg={12} xl={4}>
+          {/* BestSellingProducts */}
+          <BestSellingProducts />
+        </Grid>
+      </Grid>
+    </>
+  );
 }
+
+export default MainPage
\ No newline at end of file

From de57daf98ae147f7006516d59465b8dd03d3ae55 Mon Sep 17 00:00:00 2001
From: Chief Bube <ebube.ojinta@chiefsoft.com>
Date: Mon, 23 Oct 2023 00:45:13 -0700
Subject: [PATCH 2/3] Added Logout Option and prefetch for the dashboard

---
 components/Authentication/SignInForm.js    | 21 ++++--
 components/_App/Layout.js                  | 11 ++-
 components/_App/LeftSidebar/SidebarData.js |  6 ++
 components/_App/LeftSidebar/index.js       | 82 +++++++++++-----------
 middleware.js                              | 16 -----
 pages/auth/logout.js                       | 44 +++++++-----
 6 files changed, 95 insertions(+), 85 deletions(-)

diff --git a/components/Authentication/SignInForm.js b/components/Authentication/SignInForm.js
index 29c3668..33f7c58 100644
--- a/components/Authentication/SignInForm.js
+++ b/components/Authentication/SignInForm.js
@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
-import { setCookie } from 'cookies-next';
+import { setCookie } from "cookies-next";
 import Link from "next/link";
 import Grid from "@mui/material/Grid";
 import LoadingButton from "@mui/lab/LoadingButton";
@@ -79,9 +79,17 @@ const SignInForm = () => {
       }
 
       // Store the token in cookies
-       await setCookie("cmc-token", res.token);
-       router.push("/");
+      // Calculate the expiration time in 24 hours
+      const expirationDate = new Date();
+      expirationDate.setTime(expirationDate.getTime() + 24 * 60 * 60 * 1000); // 24 hours in milliseconds
 
+      const cookieOptions = {
+        expires: expirationDate,
+        httpOnly: true, // Make the cookie accessible only via HTTP (recommended for security)
+      };
+      
+      await setCookie("cmc-token", res.token);
+      router.push("/");
 
       console.log(res);
     } catch (error) {
@@ -100,6 +108,11 @@ const SignInForm = () => {
     setShowPassword(!showPassword);
   };
 
+  useEffect(() => {
+    // Prefetch the dashboard
+    router.prefetch("/");
+  });
+
   return (
     <>
       <div className={styles.authenticationBox}>
diff --git a/components/_App/Layout.js b/components/_App/Layout.js
index edca465..1736b2a 100644
--- a/components/_App/Layout.js
+++ b/components/_App/Layout.js
@@ -20,14 +20,11 @@ const Layout = ({ children }) => {
 
   useEffect(() => {
     const authenticationPages = [
-      // "/",
-      "/auth",
       "/auth/login",
       "/auth/sign-up",
       "/auth/forgot-password",
       "/auth/lock-screen",
       "/auth/confirm-mail",
-      "/auth/logout",
     ];
 
     setIsAuthenticationPage(authenticationPages.includes(router.pathname));
@@ -38,8 +35,8 @@ const Layout = ({ children }) => {
 
   const title = isAuthenticationPage ? "CMC - auth" : "CMC - dashboard";
   const mainWrapper = {
-    paddingLeft: typeof window !== "undefined" && isAuthenticationPage && "0"
-  }
+    paddingLeft: typeof window !== "undefined" && isAuthenticationPage && "0",
+  };
 
   return (
     <>
@@ -65,7 +62,9 @@ const Layout = ({ children }) => {
           {children}
         </div>
 
-        {!isAuthenticationPage && <Footer />}
+        {!isAuthenticationPage && router.pathname !== "/auth/logout" && (
+          <Footer />
+        )}
       </div>
 
       <ScrollToTop />
diff --git a/components/_App/LeftSidebar/SidebarData.js b/components/_App/LeftSidebar/SidebarData.js
index 11bce30..a74dff5 100644
--- a/components/_App/LeftSidebar/SidebarData.js
+++ b/components/_App/LeftSidebar/SidebarData.js
@@ -6,6 +6,7 @@ import LayersIcon from "@mui/icons-material/Layers";
 import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import LockIcon from "@mui/icons-material/Lock";
+import LogoutIcon from "@mui/icons-material/Logout";
 import SettingsIcon from "@mui/icons-material/Settings";
 import PostAddIcon from "@mui/icons-material/PostAdd";
 import MailOutlineIcon from "@mui/icons-material/MailOutline";
@@ -513,4 +514,9 @@ export const SidebarData = [
       },
     ],
   },
+  {
+    title: "Logout",
+    path: "/auth/logout",
+    icon: <LogoutIcon />,
+  },
 ];
diff --git a/components/_App/LeftSidebar/index.js b/components/_App/LeftSidebar/index.js
index bbd1224..8f5ff9d 100644
--- a/components/_App/LeftSidebar/index.js
+++ b/components/_App/LeftSidebar/index.js
@@ -1,69 +1,69 @@
-import React from 'react';
-import {
-  Box
-} from "@mui/material";
+import React from "react";
+import { Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { SidebarData } from './SidebarData';
-import SubMenu from './SubMenu';
-import Link from 'next/link';
-import ClearIcon from '@mui/icons-material/Clear';
-import IconButton from '@mui/material/IconButton';
+import { SidebarData } from "./SidebarData";
+import SubMenu from "./SubMenu";
+import Link from "next/link";
+import ClearIcon from "@mui/icons-material/Clear";
+import IconButton from "@mui/material/IconButton";
 
 const SidebarNav = styled("nav")(({ theme }) => ({
-  background: '#fff',
+  background: "#fff",
   boxShadow: "0px 4px 20px rgba(47, 143, 232, 0.07)",
-  width: '300px',
-  padding: '30px 10px',
-  height: '100vh',
-  display: 'flex',
-  justifyContent: 'center',
-  position: 'fixed',
+  width: "300px",
+  padding: "30px 10px",
+  height: "100vh",
+  display: "flex",
+  justifyContent: "center",
+  position: "fixed",
   top: 0,
   left: 0,
-  transition: '350ms',
-  zIndex: '10',
-  overflowY: 'auto'
+  transition: "350ms",
+  zIndex: "10",
+  overflowY: "auto",
 }));
- 
+
 const SidebarWrap = styled("div")(({ theme }) => ({
-  width: '100%'
+  width: "100%",
 }));
 
 const Sidebar = ({ toggleActive }) => {
   return (
     <>
-      <div className='leftSidebarDark'>
+      <div className="leftSidebarDark">
         <SidebarNav className="LeftSidebarNav">
           <SidebarWrap>
-            <Box 
-              sx={{ 
-                mb: '20px',
-                px: '20px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between'
+            <Box
+              sx={{
+                mb: "20px",
+                px: "20px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
               }}
             >
-              <Link href='/'>
-                <img 
-                  src="/images/logos/wrenchboard-logo.png" alt="Logo" 
-                  className='black-logo' 
+              <Link href="/">
+                <img
+                  src="/images/logos/wrenchboard-logo.png"
+                  alt="Logo"
+                  className="black-logo"
                 />
 
                 {/* For Dark Variation */}
-                <img 
-                  src="/images/logos/wrenchboard-logo.png" alt="Logo" 
-                  className='white-logo' 
+                <img
+                  src="/images/logos/wrenchboard-logo.png"
+                  alt="Logo"
+                  className="white-logo"
                 />
               </Link>
 
-              <IconButton 
-                onClick={toggleActive} 
+              <IconButton
+                onClick={toggleActive}
                 size="small"
                 sx={{
-                  background: 'rgb(253, 237, 237)',
-                  display: { lg: 'none' },
-                  marginLeft: "1rem"
+                  background: "rgb(253, 237, 237)",
+                  display: { lg: "none" },
+                  marginLeft: "1rem",
                 }}
               >
                 <ClearIcon />
diff --git a/middleware.js b/middleware.js
index a8c1570..2f412c3 100644
--- a/middleware.js
+++ b/middleware.js
@@ -32,17 +32,6 @@ export async function middleware(req, next) {
       });
     }
 
-    // Add authentication logic here (verify the token, etc.)
-    // const isAuthenticated = verifyToken(token);
-    // const isAuthenticated = hasCookie("cmc-token", { req });
-
-    // if (!isAuthenticated) {
-    //   // Handle unauthenticated users
-    //  return NextResponse.error(new Error("Authentication failed"), {
-    //     status: 401,
-    //   });
-    // }
-
   } catch (error) {
     console.error("Error during authentication check:", error);
     return NextResponse.error();
@@ -54,12 +43,7 @@ export const config = {
 };
 
 const authenticationPages = [
-  // "/",
-  "/auth",
   "/auth/login",
   "/auth/sign-up",
-  "/auth/forgot-password",
-  "/auth/lock-screen",
-  "/auth/confirm-mail",
   "/auth/logout",
 ];
diff --git a/pages/auth/logout.js b/pages/auth/logout.js
index f4b6894..966057f 100644
--- a/pages/auth/logout.js
+++ b/pages/auth/logout.js
@@ -1,8 +1,16 @@
+import { useRouter } from 'next/router'
 import { Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import Button from "@mui/material/Button";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { deleteCookie } from "cookies-next";
 
 export default function Logout() {
+  const router = useRouter()
+  const handleLogout = () => {
+    deleteCookie("cmc-token");
+    router.push("/auth/login")
+  };
   return (
     <>
       <div className="authenticationBox">
@@ -20,51 +28,51 @@ export default function Logout() {
               maxWidth: "510px",
               ml: "auto",
               mr: "auto",
-              textAlign: "center"
+              textAlign: "center",
             }}
             className="bg-black"
           >
             <Box>
-              <img 
-                src="/images/logo.png" 
-                alt="Black logo" 
-                className="black-logo" 
+              <img
+                src="/images/logos/wrenchboard-logo.png"
+                alt="Logo"
+                className="black-logo"
               />
 
-              <img 
-                src="/images/logo-white.png" 
-                alt="White logo" 
-                className="white-logo" 
+              <img
+                src="/images/logos/wrenchboard-logo.png"
+                alt="Logo"
+                className="white-logo"
               />
             </Box>
 
             <Box mt={4} mb={4}>
-              <img src="/images/coffee.png" alt="Coffee" />
+              <LogoutIcon />
             </Box>
 
             <Typography as="h1" fontSize="20px" fontWeight="500" mb={1}>
-              You are Logged Out
-            </Typography>
-
-            <Typography>
-              Thank you for using Admash admin template
+              Would you like to sign out?
             </Typography>
 
             <Button
-              href="/auth/sign-in/"
+              onClick={handleLogout}
               fullWidth
               variant="contained"
               sx={{
                 mt: 3,
+                backgroundColor: "#4687BA",
                 textTransform: "capitalize",
                 borderRadius: "8px",
                 fontWeight: "500",
                 fontSize: "16px",
                 padding: "12px 10px",
-                color: "#fff !important"
+                color: "#fff !important",
+                "&:hover": {
+                  backgroundColor: "rgba(70, 135, 186, 0.8)",
+                },
               }}
             >
-              Sign In
+              Sign Out
             </Button>
           </Box>
         </Box>

From 5502bcd1aefff151da65f13902469ca9c44b4765 Mon Sep 17 00:00:00 2001
From: Chief Bube <ebube.ojinta@chiefsoft.com>
Date: Mon, 23 Oct 2023 04:24:38 -0700
Subject: [PATCH 3/3] added context provider for user profile

---
 components/Authentication/SignInForm.js | 108 ++++++++++++------------
 components/_App/Layout.js               |   9 +-
 components/_App/TopNavbar/Profile.js    |   4 +
 contexts/userProfileContext.js          |  38 +++++++++
 pages/_app.js                           |  43 ++++++++--
 pages/auth/logout.js                    |  12 ++-
 pages/pages/profile.js                  |   5 ++
 services/Fetcher.js                     |   3 +-
 styles/globals.css                      |   4 +
 9 files changed, 157 insertions(+), 69 deletions(-)
 create mode 100644 contexts/userProfileContext.js

diff --git a/components/Authentication/SignInForm.js b/components/Authentication/SignInForm.js
index 33f7c58..5b666fd 100644
--- a/components/Authentication/SignInForm.js
+++ b/components/Authentication/SignInForm.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { setCookie } from "cookies-next";
-import Link from "next/link";
+import { useSnackbar } from "notistack";
 import Grid from "@mui/material/Grid";
 import LoadingButton from "@mui/lab/LoadingButton";
 import IconButton from "@mui/material/IconButton";
@@ -14,8 +14,12 @@ import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import styles from "./signinform.module.css";
 import Fetcher from "services/Fetcher";
+import { useUserProfile } from "contexts/userProfileContext";
 
 const SignInForm = () => {
+  const { state, dispatch } = useUserProfile();
+
+  // Define and initialize state variables
   const [formValues, setFormValues] = useState({
     email: "",
     password: "",
@@ -27,55 +31,70 @@ const SignInForm = () => {
   const [loading, setLoading] = useState(false);
   const [errMsg, setErrMsg] = useState("");
 
+  // Create instances of external services
   const api = new Fetcher();
   const router = useRouter();
 
+  // Access the Snackbar notification function
+  const { enqueueSnackbar } = useSnackbar();
+
+  // Handle changes in the input fields
   const handleChange = (event) => {
     setFormValues({ ...formValues, [event.target.name]: event.target.value });
   };
 
-  // "use server"
+  // Handle form submission
   const handleSubmit = async (event) => {
     event.preventDefault();
 
     const { email, password } = formValues;
 
-    if (email === "" || password === "") {
+    // Validate the form fields
+    if (email === "" && password === "") {
       setErrorHandlers({ ...errorHandlers, email: true, password: true });
+      setErrMsg("all fields are required");
       setTimeout(() => {
         setErrorHandlers({ ...errorHandlers, email: false, password: false });
-      }, 1500);
+        setErrMsg("");
+      }, 2000);
       return;
     } else if (email === "") {
       setErrorHandlers({ ...errorHandlers, email: true });
+      setErrMsg("email field is required");
       setTimeout(() => {
         setErrorHandlers({ ...errorHandlers, email: false });
-      }, 1500);
+        setErrMsg("");
+      }, 2000);
       return;
     } else if (password === "") {
       setErrorHandlers({ ...errorHandlers, password: true });
+      setErrMsg("password field is required");
       setTimeout(() => {
         setErrorHandlers({ ...errorHandlers, password: false });
-      }, 1500);
+        setErrMsg("");
+      }, 2000);
       return;
     }
 
+    // Initiate the login process
     setLoading(true);
     try {
+      // Prepare the login request data
       const data = {
         username: email,
         password,
       };
+
+      // Send the login request to the server
       const res = await api.login(data);
 
       if (res.status === 204 || res.length === 0) {
-        setErrorHandlers({ ...errorHandlers, email: true, password: true });
-        setErrMsg("Wrong Credentials");
-        setTimeout(() => {
-          setErrorHandlers({ ...errorHandlers, email: false, password: false });
-          setLoading(false);
-          setErrMsg("");
-        }, 1500);
+        // Handle login failure
+        enqueueSnackbar("Wrong Credentials", {
+          variant: "error",
+        });
+        setLoading(false);
+        return;
       }
 
       // Store the token in cookies
@@ -87,29 +106,45 @@ const SignInForm = () => {
         expires: expirationDate,
         httpOnly: true, // Make the cookie accessible only via HTTP (recommended for security)
       };
+
       
+      // Set the login token in a cookie
       await setCookie("cmc-token", res.token);
+
+      const userProfileData = res.profile;
+      dispatch({ type: 'SET_USER_PROFILE', payload: userProfileData });
+
+      enqueueSnackbar("Login Successful", {
+        variant: "success",
+        autoHideDuration: 4000,
+      });
+
+      // Redirect the user to a new page after successful login
       router.push("/");
 
       console.log(res);
     } catch (error) {
+      // Handle any errors that occur during login
       setLoading(false);
       console.log(error);
     } finally {
+      // Ensure that the loading indicator is cleared after a short delay
       setTimeout(() => {
         setLoading(false);
       }, 5000);
     }
   };
 
+  // Define and initialize the state variable for toggling password visibility
   const [showPassword, setShowPassword] = useState(false);
 
+  // Toggle password visibility
   const handleTogglePassword = () => {
     setShowPassword(!showPassword);
   };
 
   useEffect(() => {
-    // Prefetch the dashboard
+    // Prefetch the dashboard page to optimize navigation
     router.prefetch("/");
   });
 
@@ -142,15 +177,6 @@ const SignInForm = () => {
                   className={styles.favicon}
                 />
               </Box>
-              {/* <Typography
-                as="h1"
-                fontSize="28px"
-                fontWeight="700"
-                mb="5px"
-                color="#fff"
-              >
-                Sign In{" "}
-              </Typography> */}
 
               <Box component="form" noValidate onSubmit={handleSubmit}>
                 <Box
@@ -164,25 +190,13 @@ const SignInForm = () => {
                 >
                   <Grid container alignItems="center" spacing={2}>
                     <Grid item xs={12}>
-                      {/* <Typography
-                        component="label"
-                        sx={{
-                          fontWeight: "500",
-                          fontSize: "14px",
-                          mb: "10px",
-                          display: "block",
-                        }}
-                      >
-                        Email
-                      </Typography> */}
-
                       <TextField
                         required
                         fullWidth
                         id="email"
                         label={
-                          errorHandlers.email
-                            ? "Incomplete/wrong email"
+                          errorHandlers.email && errMsg !== ""
+                            ? errMsg
                             : "Email Address"
                         }
                         value={formValues.email}
@@ -198,25 +212,13 @@ const SignInForm = () => {
                     </Grid>
 
                     <Grid item xs={12}>
-                      {/* <Typography
-                        component="label"
-                        sx={{
-                          fontWeight: "500",
-                          fontSize: "14px",
-                          mb: "10px",
-                          display: "block",
-                        }}
-                      >
-                        Password
-                      </Typography> */}
-
                       <TextField
                         required
                         fullWidth
                         name="password"
                         label={
-                          errorHandlers.password
-                            ? "Incomplete/wrong password"
+                          errorHandlers.password && errMsg !== ""
+                            ? errMsg
                             : "Password"
                         }
                         value={formValues.password}
@@ -274,9 +276,7 @@ const SignInForm = () => {
                       },
                     }}
                   >
-                    <span>
-                      {loading ? "Signing in…" : errMsg ? errMsg : "Sign In"}
-                    </span>
+                    <span>{loading ? "Signing in…" : "Sign In"}</span>
                   </LoadingButton>
                 </Box>
               </Box>
diff --git a/components/_App/Layout.js b/components/_App/Layout.js
index 1736b2a..9b6e926 100644
--- a/components/_App/Layout.js
+++ b/components/_App/Layout.js
@@ -6,7 +6,6 @@ import TopNavbar from "@/components/_App/TopNavbar";
 import Footer from "@/components/_App/Footer";
 import ScrollToTop from "./ScrollToTop";
 import ControlPanelModal from "./ControlPanelModal";
-import AuthRoute from "middlewares/AuthRoute";
 
 const Layout = ({ children }) => {
   const router = useRouter();
@@ -34,9 +33,6 @@ const Layout = ({ children }) => {
   // console.log("isAuthenticationPage:", isAuthenticationPage, router.pathname);
 
   const title = isAuthenticationPage ? "CMC - auth" : "CMC - dashboard";
-  const mainWrapper = {
-    paddingLeft: typeof window !== "undefined" && isAuthenticationPage && "0",
-  };
 
   return (
     <>
@@ -46,8 +42,9 @@ const Layout = ({ children }) => {
       </Head>
 
       <div
-        className={`main-wrapper-content ${active ? "active" : ""}`}
-        style={mainWrapper}
+        className={`main-wrapper-content ${active ? "active" : ""} ${
+          isAuthenticationPage ? "authBox" : ""
+        }`}
       >
         {!isAuthenticationPage && (
           <>
diff --git a/components/_App/TopNavbar/Profile.js b/components/_App/TopNavbar/Profile.js
index 8c8c93a..4d60705 100644
--- a/components/_App/TopNavbar/Profile.js
+++ b/components/_App/TopNavbar/Profile.js
@@ -17,8 +17,12 @@ import MailOutlineIcon from "@mui/icons-material/MailOutline";
 import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
 import AttachMoneyIcon from "@mui/icons-material/AttachMoney";
 import Logout from "@mui/icons-material/Logout";
+import { useUserProfile } from "contexts/userProfileContext";
 
 const Profile = () => {
+  const { state } = useUserProfile();
+  const userProfile = state.userProfile;
+
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
diff --git a/contexts/userProfileContext.js b/contexts/userProfileContext.js
new file mode 100644
index 0000000..9af0b95
--- /dev/null
+++ b/contexts/userProfileContext.js
@@ -0,0 +1,38 @@
+// UserProfileContext.js
+import { createContext, useContext, useReducer } from "react";
+
+// Define the initial state
+const initialState = {
+  userProfile: null,
+};
+
+// Create the context
+const UserProfileContext = createContext();
+
+// Create a custom hook for using the context
+export const useUserProfile = () => {
+  return useContext(UserProfileContext);
+};
+
+// Define a reducer function to update the context state
+const userProfileReducer = (state, action) => {
+  switch (action.type) {
+    case "SET_USER_PROFILE":
+      return { ...state, userProfile: action.payload };
+    case "CLEAR_USER_PROFILE":
+      return { ...state, userProfile: null };
+    default:
+      return state;
+  }
+};
+
+// Create the UserProfileProvider component
+export const UserProfileProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(userProfileReducer, initialState);
+
+  return (
+    <UserProfileContext.Provider value={{ state, dispatch }}>
+      {children}
+    </UserProfileContext.Provider>
+  );
+};
diff --git a/pages/_app.js b/pages/_app.js
index c663c75..2fe7406 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "../styles/remixicon.css";
 import "react-tabs/style/react-tabs.css";
 import "swiper/css";
@@ -13,18 +13,51 @@ import "../styles/rtl.css";
 import "../styles/dark.css";
 // Theme Styles
 import theme from "../styles/theme";
-
+import { SnackbarProvider } from "notistack";
 import { ThemeProvider, CssBaseline } from "@mui/material";
 import Layout from "@/components/_App/Layout";
+import { UserProfileProvider } from "contexts/userProfileContext";
+import { useRouter } from "next/router";
+import { hasCookie } from "cookies-next";
 
 function MyApp({ Component, pageProps }) {
+  const router = useRouter();
+
+  const handlePopState = () => {
+    // Check if the user is logged in or if you need to redirect them after logout
+    if (!hasCookie("cmc-token")) {
+      router.push("/auth/login");
+    }
+  };
+
+  // Attach the event handler when the component mounts
+  useEffect(() => {
+    window.onpopstate = handlePopState;
+
+    // Clean up the event handler when the component unmounts
+    return () => {
+      window.onpopstate = null;
+    };
+  }, []);
+
   return (
     <>
+      <Head>
+        <title>{!hasCookie("cmc-token") && "CMC - auth"}</title>
+      </Head>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
+        <UserProfileProvider>
+          <SnackbarProvider
+            maxSnack={3}
+            autoHideDuration={2000}
+            preventDuplicate
+          >
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
+          </SnackbarProvider>
+        </UserProfileProvider>
       </ThemeProvider>
     </>
   );
diff --git a/pages/auth/logout.js b/pages/auth/logout.js
index 966057f..1aeb13f 100644
--- a/pages/auth/logout.js
+++ b/pages/auth/logout.js
@@ -1,4 +1,4 @@
-import { useRouter } from 'next/router'
+import { useRouter } from "next/router";
 import { Typography } from "@mui/material";
 import { Box } from "@mui/system";
 import Button from "@mui/material/Button";
@@ -6,10 +6,16 @@ import LogoutIcon from "@mui/icons-material/Logout";
 import { deleteCookie } from "cookies-next";
 
 export default function Logout() {
-  const router = useRouter()
+  const router = useRouter();
   const handleLogout = () => {
+    // Remove the cookie
     deleteCookie("cmc-token");
-    router.push("/auth/login")
+
+    // Use replaceState to replace the current URL with the root URL
+    window.history.replaceState({}, document.title, window.location.href);
+
+    // Redirect to the login page
+    router.push("/auth/login");
   };
   return (
     <>
diff --git a/pages/pages/profile.js b/pages/pages/profile.js
index cb5a6fd..3979430 100644
--- a/pages/pages/profile.js
+++ b/pages/pages/profile.js
@@ -9,8 +9,13 @@ import ProfileContent from '@/components/Pages/Profile/ProfileContent';
 import ImpressionGoalConversions from "@/components/Dashboard/Analytics/ImpressionGoalConversions";
 import Link from 'next/link';
 import styles from '@/styles/PageTitle.module.css';
+import { useUserProfile } from 'contexts/userProfileContext';
 
 export default function Profile() {
+  const { state } = useUserProfile();
+  const userProfile = state.userProfile;
+
+  console.log(userProfile)
   return (
     <>
       {/* Page title */}
diff --git a/services/Fetcher.js b/services/Fetcher.js
index 6e667cc..e4ff8f0 100644
--- a/services/Fetcher.js
+++ b/services/Fetcher.js
@@ -3,7 +3,8 @@ import Axios from "axios";
 class Fetcher {
   constructor(url) {
     // this.url = url;
-    console.log("first request!!!");
+    // console.log("first request!!!");
+    // return new Response("Working!!!" + url)
   }
 
   // Endpoints Here
diff --git a/styles/globals.css b/styles/globals.css
index 98296fb..c7991d2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -804,6 +804,10 @@ img {
   position: relative;
   transition: all 0.5s ease-out;
 }
+
+.main-wrapper-content.authBox{
+  padding-left: 0;
+}
 .main-wrapper-content.active {
   padding-left: 0;
 }