src/authorization/UserExist.jsx

@@ -66,7 +66,7 @@ export default function UserExist() {
                 navigate(RouteLinks.login, {replace:true})
             }
         }
-        if(userDetails.name){
+        if(userDetails?.email || userDetails?.username){
             setPageIsLoading(false)
         }else if(!userDetails.name && localStorage.getItem('token')){
             loadUser(localStorage.getItem('token'))

src/components/auth/LoginCom.jsx

@@ -45,9 +45,7 @@ export default function LoginCom() {
             const {jwt_token, user} = res?.data
             if (jwt_token) {
                 localStorage.setItem('token', jwt_token)
-                // localStorage.setItem('room', room)
+                dispatch(updateUserDetails({jwt_token, ...user}));
-                const data = {jwt_token}
-                dispatch(updateUserDetails({...data, ...user}));
             }
             setLoading(false)
             navigate(RouteLinks.homePage, {state: {proceed: 'true'}}) // later add redux to dispatch state

src/components/layouts/DashboardHeader.jsx

@@ -1,3 +1,4 @@
+import { useSelector } from "react-redux";
 import { LuSunDim } from "react-icons/lu";
 import { IoMdSunny } from "react-icons/io";
 
@@ -17,6 +18,8 @@ export default function DashboardHeader() {
 
     const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = GeneralLayoutContext()
 
+    const {userDetails:{username, email}} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER
+
   return (
     <>
         {/* HEADER SECTION*/}
@@ -60,8 +63,8 @@ export default function DashboardHeader() {
                             <div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
                                 <div className="w-full h-full flex flex-col gap-4">
                                     <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
-                                        <h1 className="font-semibold">Username</h1>
+                                        <h1 className="font-semibold">{username}</h1>
-                                        <p className="-mt-2">username@gmail.com</p>
+                                        <p className="-mt-2">{email}</p>
                                     </div>
                                     <div className="rounded w-full flex justify-center items-center gap-2">
                                         <MainBtn

src/components/layouts/DashboardLayout.jsx

@@ -4,8 +4,9 @@ import DashboardHeader from './DashboardHeader'
 import { GeneralLayoutContext } from '../../context/GeneralLayoutContext'
 import DashboardAside from './aside/DashboardAside'
 import RightAsideBar from './rightaside/RightAsideBar'
+import { memo } from 'react'
 
-export default function DashboardLayout() {
+const DashboardLayout =memo(()=> {
 
     // let {pathname} = useLocation()
 
@@ -54,4 +55,6 @@ export default function DashboardLayout() {
         </>
     </div>
   )
-}
+})
+
+export default DashboardLayout

src/components/layouts/aside/DashboardAside.jsx

@@ -1,22 +1,23 @@
 import {useLocation} from 'react-router-dom'
+import { useSelector } from "react-redux";
 import RouteLinks from "../../../RouteLinks";
 import DummyLogo from "../../DummyLogo";
 import MainBtn from "../../MainBtn";
 import AsideLink from "./AsideLink";
 import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
-// import { useSelector } from "react-redux";
 import {GeneralLayoutContext} from "../../../context/GeneralLayoutContext";
 import {TbLogout2} from "react-icons/tb";
 import UserAvatar from '../../../assets/user_avatar.jpg'
 import Icons from "../../Icons";
 
+
 export default function DashboardAside() {
 
     const {pathname} = useLocation()
 
     const {setLogoutModal, handleActiveMenu} = GeneralLayoutContext()
 
-    // const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
+    const {userDetails:{username, email}} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER
     // const {role}= userDetails
 
     return (
@@ -126,8 +127,8 @@ export default function DashboardAside() {
                         <div className="w-full min-h-48 flex flex-col justify-between gap-4">
                             <div className="w-full h-full">
                                 <div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
-                                    <h1 className="font-semibold">Username</h1>
+                                    <h1 className="font-semibold">{username}</h1>
-                                    <p className="-mt-2">username@gmail.com</p>
+                                    <p className="-mt-2">{email}</p>
                                 </div>
                             </div>
                             <div className="rounded w-full flex items-center gap-2">

src/components/subscription_view/RebuildModal.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import ModalWrapper from '../modals/ModalWrapper'
+import MainBtn from '../MainBtn'
+
+export default function RebuildModal({data={}, templateRebuild, closeModal, proceedFunc}) {
+  return (
+    <ModalWrapper maxWidth='max-w-sm'>
+        <div className='relative bg-white rounded-lg shadow-round_black dark:border-[1px] dark:border-[#1E2027] dark:bg-black-box dark:text-white'>
+            {/* <!-- Modal header --> */}
+            {/* <div className="p-8 sm:p-12 flex items-center justify-between border-b rounded-t border-gray-300 dark:border-gray-600">
+                <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
+                    EDIT
+                </h3>
+                <button onClick={closeModal} type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
+                    <svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                    </svg>
+                    <span className="sr-only">Close modal</span>
+                </button>
+            </div> */}
+            {/* <!-- Modal body --> */}
+            <div className='p-8 sm:p-12 mb-4 flex flex-col flex-wrap gap-4 lg:gap-8'>
+                <div className='w-full text-center'>
+                    <p className='text-lg font-semibold mb-1'>Please confirm you want product rebuild to start</p>
+                    {templateRebuild.isPending && <p className='text-sm text-emerald-600'>Rebuild started ...</p>}
+                </div>
+
+                <div className='flex justify-between items-center gap-4'>
+                    <MainBtn 
+                        onClick={proceedFunc}
+                        className={`bg-primary dark:bg-primary-dark px-2 py-1 mt-4 rounded-md text-white font-medium sm:self-end`}
+                        text='Proceed'
+                    />
+                    <MainBtn 
+                        type='button'
+                        className={`bg-red-500 px-2 py-1 mt-4 rounded-md text-white font-medium sm:self-end`}
+                        text='Cancel'
+                        onClick={closeModal}
+                    />
+                </div>
+            </div>
+        </div>
+    </ModalWrapper>
+  )
+}

src/components/subscription_view/SubscriptionViewCom.jsx

@@ -7,6 +7,7 @@ import RouteLinks from '../../RouteLinks';
 import {getSubscriptionsView, updateTemplate, updateCustomTemplate, rebuildTemplate} from '../../services/siteServices'
 import queryKeys from '../../services/queryKeys'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
+import RebuildModal from './RebuildModal';
 
 export default function SubscriptionViewCom() {
 
@@ -14,7 +15,7 @@ export default function SubscriptionViewCom() {
     const {state} = useLocation()
     const navigate = useNavigate()
 
-    const [reqStatus, setReqStatus] = useState({loading: false, type: '', error: false, success: false})
+    const [rebuildStatus, setRebuildStatus] = useState({status: false, data: {}})
 
     const [values, setValues] = useState({custom_id: '', template_uid: ''})
 
@@ -69,6 +70,7 @@ export default function SubscriptionViewCom() {
         },
         onSettled: () => {
             setTimeout(() => {
+                setRebuildStatus({status: false, data: {}})
                 templateRebuild.reset()
             }, 3000)
         }
@@ -175,7 +177,7 @@ export default function SubscriptionViewCom() {
                                     </td>
                                     <td className="px-2">
                                         <div className="text-right">
-                                            <button name='template' onClick={handleRebuildTemplate}
+                                            <button name='template' onClick={()=>setRebuildStatus({status: true, data:{}})}
                                                     className={`rounded-md p-2 bg-primary text-white text-center`}>
                                                 Rebuild
                                             </button>
@@ -238,7 +240,8 @@ export default function SubscriptionViewCom() {
                             </div>
                         </div>
                     </>
-            }
+                }
+                { rebuildStatus?.status && <RebuildModal data={{}} templateRebuild={templateRebuild} proceedFunc={handleRebuildTemplate} closeModal={()=>setRebuildStatus({status: false, data:{}})} />}
         </div>
     )
 }