auth layout fix

.env.production

@@ -1,7 +1,7 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="production"
 REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
-REACT_APP_MAIN_API="https://api.mermsemr.com"
+REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
 
 # login footer links

package.json

@@ -33,7 +33,8 @@
   },
   "scripts": {
     "start": "react-scripts start -e .env.development",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
+    "build": "react-scripts start -e .env.development",
+    "build_real": "GENERATE_SOURCEMAP=false react-scripts build -e .env.production",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/component/auth/Login2.jsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 // import LoginImg from '../../assets/bg/login.svg'
 
@@ -14,6 +14,9 @@ import IOSDownload from '../../assets/img/download/apple.jpg'
 
 export default function Login() {
 
+  const { userDetails: { token, room }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+  let loggedIn = token && room ? true : false; // variable to determine if user is logged in
+
   const dispatch = useDispatch()
 
   const navigate = useNavigate()
@@ -67,6 +70,12 @@ export default function Login() {
     }
   }
 
+  useEffect(()=>{ // NAVIGATES USER TO HOME PAGE IF USER IS ACTIVE
+    if(loggedIn){
+        navigate(siteLinks.dash)
+    }
+  },[])
+
   return (
     <div className="app">
         <div className="app-wrap">

src/component/home/TopBar.jsx

@@ -1,20 +1,37 @@
-import React from 'react'
-import { useQuery } from '@tanstack/react-query'
+import React, {useEffect} from 'react'
+import { useMutation } from '@tanstack/react-query'
 import { topBar } from '../../services/services'
-import queryKeys from '../../services/queryKeys'
 
 export default function TopBar() {
 
-    const {data, isFetching, isError, error} = useQuery({
-        queryKey: queryKeys.topBar,
-        queryFn: () => topBar()
-    })
+  const topBarData = useMutation({
+    mutationFn: (reqData) => {
+        return topBar(reqData)
+    },
+    onError: (error) => {
+        console.log(error)
+        location.reload();
+    },
+      onSuccess: (res) => {
+        if(res?.data?.resultCode != '0'){
+            throw({message: 'Something went wrong'})
+        }
+    }
+  })
 
-    const topData = data?.data?.bar_data?.top_bar
+    useEffect(()=>{
+      let reqData = {
+        token: localStorage.getItem('token'), // USER TOKEN
+        uid: localStorage.getItem('uid') // USER UID
+      }
+      topBarData.mutate(reqData)
+    },[])
+    
+    const data = topBarData?.data?.data?.top_bar // top bar data
 
   return (
     <>
-        {isFetching ? 
+        {topBarData.isPending ? 
         <>
             <div className="col-12">
                 <div className="card p-4">
@@ -22,15 +39,15 @@ export default function TopBar() {
                 </div>
             </div>
         </>
-        : isError ?
+        : topBarData.error ?
         <div className="col-12">
             <div className="card p-4">
-                <p className='text-danger'>{error.message}</p>
+                <p className='text-danger'>{topBarData.error.message}</p>
             </div>
         </div>
         :
         <>
-        {topData && topData?.map((item, index)=>{
+        {data && data?.map((item, index)=>{
             let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
             return (
             <div key={item.id + index} className="col-sm-6 col-xxl-3">

src/component/home/_TopBar.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { topBar } from '../../services/services'
+import queryKeys from '../../services/queryKeys'
+
+export default function TopBar() {
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.topBar,
+        queryFn: () => topBar()
+    })
+
+    const topData = data?.data?.bar_data?.top_bar
+    console.log('topData', topData)
+
+  return (
+    <>
+        {isFetching ? 
+        <>
+            <div className="col-12">
+                <div className="card p-4">
+                    <p className='text-mute'>Loading...</p>
+                </div>
+            </div>
+        </>
+        : isError ?
+        <div className="col-12">
+            <div className="card p-4">
+                <p className='text-danger'>{error.message}</p>
+            </div>
+        </div>
+        :
+        <>
+        {topData && topData?.map((item, index)=>{
+            let textColor = item?.description == 'Contacts' ? 'text-danger' : item?.description == 'Site Traffic' ? 'text-primary' : item?.description == 'Appointments' ? 'text-orange' : 'text-success'
+            return (
+            <div key={item.id + index} className="col-sm-6 col-xxl-3">
+                <div className="card card-statistics ecommerce-contant overflow-h">
+                    <div className="card-body p-0">
+                        <div className="d-flex m-b-0 ecommerce-contant-text h-100">
+                            <div className="w-100">
+                                <div className="row p-3">
+                                    <div className="col">
+                                        <h3 className="mb-0">{item?.value || 0}</h3>
+                                        <small className="d-block">{item?.data_span}</small>
+                                    </div>
+                                    <div className="col text-right">
+                                        <h5 className="text-muted mb-0">{item?.description}</h5>
+                                        <strong className={`${textColor} m-t-5`}><i
+                                            className="zmdi zmdi-long-arrow-up font-weight-bold"></i> N/A</strong>
+                                    </div>
+                                </div>
+                                <div className="apexchart-wrapper">
+                                    <div id="ecommercedemo3" className="chart-fit"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            )
+        })}
+        </>
+        }
+    </>
+  )
+}

src/services/services.js

@@ -65,9 +65,7 @@ export const userInfo = (reqData) => {
     }
     return postAuxEnd('/panel/Account', postData, false)
 }
-// export const getUserDetails = (reqData) => {
-//     return getAuxEnd(`/panel/Account`, reqData)
-// }
+
 
 
 
@@ -114,18 +112,31 @@ export const recoverPWD = (reqData) => {
 }
 
 // FUNCTION TO GET DASHBOARD TOP BAR SECTION
-export const topBar = () => {
-    return getAuxEnd(`/panel/account/bar`)
+export const topBar = (reqData) => {
+    let postData = {
+        ...reqData,
+        // "token":"there-will-be-token",
+        // "uid": "there-will-be-uid"
+    }
+    return postAuxEnd(`/panel/account-bar`, postData, false)
 }
 
 // FUNCTION TO GET CALENDAR EVENTS
 export const getCalendarEvents = () => {
-    return getAuxEnd(`/panel/account/calendar`)
+   // return getAuxEnd(`/panel/account/calendar`)
+    let postData = {
+        "a":"b"
+    }
+    return postAuxEnd(`/panel/account/calendar`, postData, false)
 }
 
 // FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
 export const recentActions = () => {
-    return getAuxEnd(`/panel/account/actions`)
+    //return getAuxEnd(`/panel/account/actions`)
+    let postData = {
+        "a":"b"
+    }
+    return postAuxEnd(`/panel/account/actions`, postData, false)
 }
 
 // FUNCTION TO GET MY PRODUCT PROVISION DATA