added the new login endpoint

.env

@@ -5,6 +5,12 @@ REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
 REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
 
+# login footer links
+REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000
 

.env.development

@@ -5,5 +5,11 @@ REACT_APP_MAIN_API="https://devapi.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://dev-media.mermsemr.com"
 REACT_APP_MAIN_SOCKET="https://dev-socket.mermsemr.com"
 
+# login footer links
+REACT_APP_HOME_LINK='https://dev-www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://dev-www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://dev-www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://dev-www.mermsemr.com/terms'
+
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000

.env.production

@@ -4,5 +4,11 @@ REACT_APP_SOCKET_URL="https://socket.mermsemr.com"
 REACT_APP_MAIN_API="https://api.mermsemr.com"
 REACT_APP_MEDIA_SERVER="https://media.mermsemr.com"
 
+# login footer links
+REACT_APP_HOME_LINK='https://www.mermsemr.com/'
+REACT_APP_ABOUT_LINK='https://www.mermsemr.com/about'
+REACT_APP_CONTACTS_LINK='https://www.mermsemr.com/contacts'
+REACT_APP_TERMS_LINK='https://www.mermsemr.com/terms'
+
 # Inactivity timeout/logout AT 10MINS
 REACT_APP_TIMEOUT=600000

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
   merms-panel:
-    # image: registry.chiefsoft.net/wrenchboard-users-wrench:latest
+    image: registry.chiefsoft.net/merms-panel-reactjs:latest
     build:
       context: .
       dockerfile: docker/Dockerfile

src/App.css

@@ -8,4 +8,31 @@
   background-image: url('./assets/bg/signup_bg.jpg') !important;
   background-size: cover;
   background-repeat: no-repeat;
+}
+
+.register{
+  border-radius: 10px;
+}
+
+.login-links{
+  margin-top: 50px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.login-links a {
+  font-size: 15px;
+  font-weight: 700;
+  padding: 0px 20px;
+  border-right: 2px solid;
+  cursor: pointer;
+}
+
+.login-links a:nth-of-type(1){
+  padding-left: 0px;
+}
+
+.login-links a:last-child{
+  border: 0px;
 }

src/App.js

@@ -11,7 +11,7 @@ function App() {
         refetchOnWindowFocus: false,
         retry: 3,
         // refetchOnMount: false,
-        staleTime: 3000
+        staleTime: Infinity // can also be a number in millisecond
       },
     },
   })

src/AppRouters.jsx

@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom';
 
 import UserExist from './component/authorization/UserExist';
 import AuthLayout from './component/auth/AuthLayout';
+import BearerToken from './component/authorization/BearerToken';
 import siteLinks from './links/siteLinks';
 
 import LoginPage from './views/LoginPage';
@@ -22,27 +23,29 @@ function AppRouters() {
   return (
     <div className="">
       <Routes>
-        {/* auth routes wrapper */}
-        <Route element={<AuthLayout />}>
-          <Route path={siteLinks.home} element={<LoginPage />} />
-          <Route path={siteLinks.login} element={<LoginPage />} />
-          <Route path={siteLinks.signup} element={<SignupPage />} />
-          <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
-          <Route path={siteLinks.csignup} element={<CSignupPage />} />
-          <Route path={siteLinks.error} element={<LoginPage />} />
-        </Route>
+        <Route element={<BearerToken />}>
+          {/* auth routes wrapper */}
+          <Route element={<AuthLayout />}>
+            <Route path={siteLinks.home} element={<LoginPage />} />
+            <Route path={siteLinks.login} element={<LoginPage />} />
+            <Route path={siteLinks.signup} element={<SignupPage />} />
+            <Route path={siteLinks.forgetpwd} element={<ForgetpwdPage />} />
+            <Route path={siteLinks.csignup} element={<CSignupPage />} />
+            <Route path={siteLinks.error} element={<LoginPage />} />
+          </Route>
 
-        {/* protected routes */}
-        <Route element={<SocketIOContextProvider />}>
-          <Route element={<UserExist />}> 
-            <Route path={siteLinks.dash} element={<HomePage />} />
-            <Route path={siteLinks.product} element={<ProductPage />} />
-            <Route path={siteLinks.reports} element={<ReportsPage />} />
-            <Route path={siteLinks.comments} element={<CommentsPage />} />
-            <Route path={siteLinks.contacts} element={<ContactsPage />} />
-            <Route path={siteLinks.user} element={<UserPage />} />
-            <Route path={siteLinks.calendar} element={<CalendarPage />} />
-            <Route path={siteLinks.settings} element={<SettingsPage />} />
+          {/* protected routes */}
+          <Route element={<SocketIOContextProvider />}>
+            <Route element={<UserExist />}> 
+              <Route path={siteLinks.dash} element={<HomePage />} />
+              <Route path={siteLinks.product} element={<ProductPage />} />
+              <Route path={siteLinks.reports} element={<ReportsPage />} />
+              <Route path={siteLinks.comments} element={<CommentsPage />} />
+              <Route path={siteLinks.contacts} element={<ContactsPage />} />
+              <Route path={siteLinks.user} element={<UserPage />} />
+              <Route path={siteLinks.calendar} element={<CalendarPage />} />
+              <Route path={siteLinks.settings} element={<SettingsPage />} />
+            </Route>
           </Route>
         </Route>
       </Routes>

src/component/auth/Login2.jsx

@@ -19,9 +19,9 @@ export default function Login() {
   const navigate = useNavigate()
 
   const [fields, setFields] = useState({
-    username: localStorage.getItem('username') || '',
+    username: '',
     password: '',
-    remember: localStorage.getItem('username') ? true : false
+    remember: false
   })
 
   const handleChange = ({target:{name, value}}) => {
@@ -37,20 +37,25 @@ export default function Login() {
             throw new Error('Please provide all fields marked *')
         }
         rememberMe(fields.remember) // FUNCTION TO SAVE USERNAME OF THE USER TO LOCAL STORAGE
+        delete fields.remember // REMOVING REMEMBER FROM THE PAYLOAD
         return loginUser(fields)
     },
     onError: (error) => {
         console.log(error)
     },
       onSuccess: (res) => {
-        const {token, room} = res?.data?.data
-        if(token){
-            localStorage.setItem('token', token)
-            localStorage.setItem('room', room)
-            // const data = {token}
-            // dispatch(updateUserDetails({ ...data }));
-            navigate('/dash') // later add redux to dispatch state
+        if(res?.data?.error_message){
+            throw({message: res?.data?.error_message})
         }
+        const {token, room, uid} = res?.data
+        if(!token || !room){
+            throw({message: 'something went wrong, try again!'})
+        }
+        localStorage.setItem('token', token)
+        localStorage.setItem('room', room)
+        localStorage.setItem('uid', uid)
+        dispatch(updateUserDetails({ ...res?.data }));
+        navigate('/dash') // later add redux to dispatch state
     }
   })
 
@@ -71,7 +76,7 @@ export default function Login() {
                         <div className="row no-gutters justify-content-center">
                             <div className="col-11 col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
                                 <div className="mt-5 d-flex">
-                                    <div className="bg-white register p-5">
+                                    <div className="bg-white register px-5 pt-5 pb-3">
                                         <h1 className="mb-2">MERMS Panel</h1>
                                         <p>Welcome back, please login to your account.</p>
                                         <form className="mt-3 mt-sm-5">
@@ -79,19 +84,19 @@ export default function Login() {
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label text-black fw-bold">User Name*</label>
-                                                        <input name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
+                                                        <input maxLength={55} name='username' value={fields.username} onChange={handleChange} type="text" className="form-control" placeholder="Username" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
                                                     <div className="form-group">
                                                         <label className="control-label text-black fw-bold">Password*</label>
-                                                        <input name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
+                                                        <input maxLength={55} name='password' value={fields.password} onChange={handleChange} type="password" className="form-control" placeholder="Password" />
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
                                                     <div className="d-block d-sm-flex  align-items-center">
                                                         <div className="form-check">
-                                                            <input className="form-check-input" type="checkbox" id="gridCheck" name='remember' checked={fields.remember} onChange={handleChange} disabled={!fields.username ? true : false} />
+                                                            <input className="form-check-input" type="checkbox" id="gridCheck" name='remember' checked={fields.remember || false} onChange={handleChange} disabled={!fields.username ? true : false} />
                                                             <label className="form-check-label text-black" htmlFor="gridCheck">
                                                                 Remember Me
                                                             </label>
@@ -132,6 +137,13 @@ export default function Login() {
                                                 </div>
                                             </div>
                                         </div>
+
+                                        <div className="login-links">
+                                            <a href={process.env.REACT_APP_HOME_LINK}>Home</a>
+                                            <a href={process.env.REACT_APP_ABOUT_LINK}>About</a>
+                                            <a href={process.env.REACT_APP_CONTACTS_LINK}>Contact</a>
+                                            <a href={process.env.REACT_APP_TERMS_LINK}>Terms</a>
+                                        </div>
                                     </div>
                                 </div>
                             </div>

src/component/authorization/BearerToken.jsx

@@ -0,0 +1,46 @@
+import {useEffect} from 'react'
+import { useMutation } from '@tanstack/react-query'
+import { Outlet } from 'react-router-dom'
+import MainLoaderBS from '../loaders/MainLoaderBS'
+
+import { userToken } from '../../services/services'
+
+export default function BearerToken() {
+    const bearerToken = useMutation({
+    mutationFn: (fields) => {
+        return userToken(fields)
+    },
+    onError: (error) => {
+        location.reload();
+    },
+      onSuccess: (res) => {
+        if(res?.data?.resultCode != '0'){
+            throw({message: 'Something went wrong'})
+        }
+        const {access_token, refresh_token} = res?.data?.data
+        if(access_token){
+            localStorage.setItem('access_token', access_token)
+        }else{
+            throw({message: 'Something went wrong'})
+        }
+    }
+  })
+
+  useEffect(()=>{
+    let reqData = {
+      "username": "user",
+      "password": "password"
+    }
+    bearerToken.mutate(reqData)
+  },[])
+
+  return (
+    <>
+        {bearerToken.isPending  ? 
+            <MainLoaderBS />
+            :
+            <Outlet />
+        }
+    </>
+  )
+}

src/component/authorization/UserExist.jsx

@@ -1,13 +1,15 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from "react-redux";
 import { Outlet, useNavigate } from 'react-router-dom'
+import { useMutation } from '@tanstack/react-query'
+
 import { updateUserDetails } from "../../store/UserDetails";
+import { userInfo } from '../../services/services'
 import MainLoaderBS from '../loaders/MainLoaderBS'
 import Layout from '../layout/Layout'
 import siteLinks from '../../links/siteLinks'
 
 import debounceFunction from '../../utils/debounceFunction'
-import { accountDashboard } from '../../services/services';
 import { SocketContextValues } from '../context/SocketIOContext';
 
 
@@ -23,9 +25,9 @@ export default function UserExist() {
     
     const [lastActivityTime, setLastActivityTime] = useState(Date.now()); // HOLDS THE INITIAL TIME USER LOGS IN
 
-    const { userDetails: { lastname }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+    const { userDetails: { token, room }} = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
   
-    let loggedIn = lastname ? true : false; // variable to determine if user is logged in
+    let loggedIn = token && room ? true : false; // variable to determine if user is logged in
     // console.log('loggedIn', loggedIn)
   
     // Function to log the user out
@@ -40,6 +42,31 @@ export default function UserExist() {
       debounceFunction(setLastActivityTime(Date.now()), 1000)
     };
 
+
+
+    const getUser = useMutation({
+      mutationFn: (fields) => {
+          return userInfo(fields)
+      },
+      onError: (error) => {
+        navigate(siteLinks.login)
+        setLoading(false)
+      },
+        onSuccess: (res) => {
+          const {token, room, uid} = res?.data
+          if(!token || !room){
+            navigate(siteLinks.login)
+            setLoading(false)
+            return
+          }
+          localStorage.setItem('token', token)
+          localStorage.setItem('room', room)
+          localStorage.setItem('uid', uid)
+          dispatch(updateUserDetails({ ...res?.data }));
+          setLoading(false)
+      }
+    })
+
     useEffect(()=>{
       const timer = setTimeout(()=>{
         if(Date.now() - Number(lastActivityTime) >= Number(process.env.REACT_APP_TIMEOUT)){
@@ -61,37 +88,21 @@ export default function UserExist() {
           window.removeEventListener(event, resetTimer);
         })
       }
-    },[lastActivityTime])
-
+    },[lastActivityTime])  
+  
     useEffect(()=>{
-      accountDashboard().then(res => {
-        const {dash_data} = res?.data
+      let token = localStorage.getItem('token') // USER TOKEN
+      let uid = localStorage.getItem('uid') // USER UID
+      if(token && loggedIn){
         setLoading(false)
-        dispatch(updateUserDetails({ ...dash_data }));
-      }).catch(err => {
+      }else if(token && uid && !loggedIn){
+        const reqData = {token, uid}
+        getUser.mutate(reqData)
+      }else{
         navigate(siteLinks.login)
         setLoading(false)
-      })
+      }
     },[])
-  
-  
-    // useEffect(()=>{
-    //   let token = localStorage.getItem('token')
-    //   const timer = setTimeout(()=>{
-    //     if(token && loggedIn){
-    //       setLoading(false)
-    //     }else if(token && !loggedIn){
-    //       const data = {token}
-    //       dispatch(updateUserDetails({ ...data }));
-    //       setLoading(false)
-    //       // dispatch(updateUserDetails({ ...res.data }));
-    //     }else{
-    //       navigate('auth/login')
-    //     }
-    //   },1000)
-  
-    //   return () => clearTimeout(timer)
-    // },[])
 
     useEffect(()=>{
       if(localStorage.getItem('room')){

src/component/calendar/Calendar.jsx

@@ -85,6 +85,7 @@ export default function Calendar(){
 
                                         {category.map((item, index) => {
                                             let color = item?.cid == '1' ? 'fc-event-success' : item?.cid == '2' ? 'fc-event-danger' : item?.cid == '3' ? 'fc-event-warning' : 'fc-event-primary'
+                                            let circleColor = item?.cid == '1' ? 'text-success' : item?.cid == '2' ? 'text-danger' : item?.cid == '3' ? 'text-warning' : 'text-primary'
                                             return (
                                                 // <div key={index} className={`fc-event ${color}`} data-color={`${color}`} 
                                                 //     // draggable={false}
@@ -94,12 +95,26 @@ export default function Calendar(){
                                                 // >
                                                 //     <span>{item.description}</span>
                                                 // </div>
-                                                <div key={index} className={`form-check ${color}`}>
-                                                    <input className="form-check-input" type="radio" value={item.cid}
-                                                        id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
-                                                        <label className={`w-100 form-check-label`} htmlFor={item.cid}>
-                                                        {item.description}
-                                                        </label>
+
+                                                // <div key={index} className={`form-check ${color}`}>
+                                                //     <input className="form-check-input" type="radio" value={item.cid}
+                                                //         id={item.cid} name='category' checked={item.cid == activeCategory} onChange={() => handleActiveCategory(item.cid)} />
+                                                //         <label className={`w-100 form-check-label`} htmlFor={item.cid}>
+                                                //         {item.description}
+                                                //         </label>
+                                                // </div>
+
+                                                <div key={index} className={`form-check ${color}`} onClick={() => handleActiveCategory(item.cid)} style={{cursor: 'pointer'}}>
+                                                    <div>
+                                                        <span className="nav align-items-center">
+                                                            <span>
+                                                                <i className={`fa fa-circle-o pr-4 ${item.cid == activeCategory ? circleColor : 'text-light'}`}></i>
+                                                            </span>
+                                                        <span>
+                                                            <span>{item?.description}</span>
+                                                        </span>
+                                                        </span>
+                                                    </div>
                                                 </div>
                                             )
                                         }

src/component/contacts/Contacts.js

@@ -14,18 +14,34 @@ export default function Contacts(){
         queryFn: () => contactData()
     })
 
-    const contactsData = contacts?.data?.calendar_data?.contacts
+    const contactsData = contacts?.data?.calendar_data?.contacts // LIST OF CONTACTS
+    const contactsCategory = contacts?.data?.calendar_data?.category // LIST OF CATEGORY
+
+    const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY
 
     const [activeContactUID, setActiveContactUID] = useState(null)
-
     const [activeDetail, setActiveDetail] = useState(null)
 
+    const [filteredContactData, setFiltererdContactData] = useState(null)
+
     const changeActiveUID = (uid) => {
         setActiveContactUID(uid)
         let detail = contactsData.filter(item => item.uid == uid)
         setActiveDetail(detail)
     }
 
+    const changeActiveCategoryUID = (id) => {
+        let filteredConData = []
+        setActiveCategoryUID(id)
+        if(id == '0'){
+            filteredConData = contactsData
+        }else{
+            filteredConData = contactsData.filter(item => item.category == id)
+        }
+        setFiltererdContactData(filteredConData)
+        changeActiveUID(filteredConData[0]?.uid)
+    }
+
     return(
         <>
             <BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
@@ -53,16 +69,16 @@ export default function Contacts(){
                                     <div className="col-md-4 col-xxl-2 col-md-4">
                                         <div className="mail-sidebar">
                                             <div className="row justify-content-center">
-                                                <div className="col-12">
+                                                <div className="d-none col-12">
                                                     <div className="text-center mail-sidebar-title px-4">
-                                                        <a href="javascript:void(0)" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
+                                                        <a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
                                                     </div>
                                                 </div>
                                                 <div className="col-12">
                                                     <div className="px-4 py-4">
                                                         <ul className="pl-0">
                                                             <li className="py-2">
-                                                                <a href="javascript:void(0)">
+                                                                <a href="#">
                                                                                 <span className="nav align-items-center">
                                                                                             <span>
                                                                                                 <i className="fa fa-envelope-o text-primary pr-4"></i>
@@ -71,13 +87,13 @@ export default function Contacts(){
                                                                                                 <span>Inbox</span>
                                                                                 </span>
                                                                                 <span className="nav-item ml-auto text-right">
-                                                                                                <span className="badge badge-pill badge-primary float-right">0+</span>
+                                                                                                <span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
                                                                                 </span>
                                                                                 </span>
                                                                 </a>
                                                             </li>
                                                             <li className="py-2">
-                                                                <a href="javascript:void(0)">
+                                                                <a href="#">
                                                                                 <span className="nav align-items-center">
                                                                                             <span>
                                                                                                 <i className="fa fa-paper-plane-o pr-4"></i>
@@ -90,21 +106,36 @@ export default function Contacts(){
                                                             </li>
 
                                                         </ul>
+
                                                         <ul className="pl-0 mt-5">
-                                                            <li className="py-2">
-                                                                <a href="javascript:void(0)">
-                                                                                <span className="nav align-items-center">
-                                                                                            <span>
-                                                                                                <i className="fa fa-circle-o text-danger pr-4"></i>
-                                                                                            </span>
-                                                                                <span>
-                                                                                                <span>Personal</span>
-                                                                                </span>
-                                                                                </span>
-                                                                </a>
-                                                            </li>
-                                                            <li className="py-2">
-                                                                <a href="javascript:void(0)">
+                                                            <li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
+                                                                    <div>
+                                                                        <span className="nav align-items-center">
+                                                                            <span>
+                                                                                <i className={`fa fa-circle-o pr-4 ${activeCategoryUID == '0' ? 'text-primary' : 'text-warning'}`}></i>
+                                                                            </span>
+                                                                        <span>
+                                                                            <span>All</span>
+                                                                        </span>
+                                                                        </span>
+                                                                    </div>
+                                                                </li>
+                                                            {contactsCategory && contactsCategory.map(item => (
+                                                                <li key={item?.product_id} className="py-2" onClick={()=>changeActiveCategoryUID(item?.product_id)} style={{cursor: 'pointer'}}>
+                                                                    <div>
+                                                                        <span className="nav align-items-center">
+                                                                            <span>
+                                                                                <i className={`fa fa-circle-o pr-4 ${activeCategoryUID == item?.product_id ? 'text-primary' : 'text-warning'}`}></i>
+                                                                            </span>
+                                                                        <span>
+                                                                            <span>{item?.title}</span>
+                                                                        </span>
+                                                                        </span>
+                                                                    </div>
+                                                                </li>
+                                                            ))}
+                                                            {/* <li className="py-2">
+                                                                <a href="#">
                                                                                 <span className="nav align-items-center">
                                                                                             <span>
                                                                                                 <i className="fa fa-circle-o pr-4 text-warning"></i>
@@ -116,7 +147,7 @@ export default function Contacts(){
                                                                 </a>
                                                             </li>
                                                             <li className="py-2">
-                                                                <a href="javascript:void(0)">
+                                                                <a href="#">
                                                                                 <span className="nav align-items-center">
                                                                                             <span>
                                                                                                 <i className="fa fa-plus pr-4"></i>
@@ -126,7 +157,7 @@ export default function Contacts(){
                                                                                 </span>
                                                                                 </span>
                                                                 </a>
-                                                            </li>
+                                                            </li> */}
                                                         </ul>
                                                     </div>
                                                 </div>
@@ -146,7 +177,7 @@ export default function Contacts(){
                                                 </div>
                                             </div>
                                             <div className="mail-msg scrollbar scroll_dark">
-                                                {contactsData && contactsData.map((contact, index)=> {
+                                                {contactsData && (filteredContactData || contactsData).map((contact, index)=> {
                                                     const isActive = (contact.uid == activeContactUID) || (!activeContactUID && index == 0)
                                                     return (
                                                         <div key={contact.uid} onClick={()=>changeActiveUID(contact.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
@@ -161,11 +192,16 @@ export default function Contacts(){
                                                                         <div className="mail-msg-item-titel justify-content-between">
                                                                             <p>{contact.sender}</p>
                                                                             {/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
-                                                                            <p className="d-none d-xl-block"><span>{getCustomTime(contact.added)}</span></p>
+                                                                            <p className="d-none d-xl-block"><span>{new Date(contact.added).toDateString()}</span></p>
                                                                         </div>
                                                                         <h5 className="mb-0 my-2">{contact.title}</h5>
-                                                                        <p>{contact.message.length < 150 ? contact.message : contact.message.substring(0,151) + '...' }</p>
-                                                                        <p className="d-xl-none"><span>{getCustomTime(contact.added)}</span></p>
+                                                                        <p>{contact.message.length < 100 ? contact.message : contact.message.substring(0,101) + ' ...' }</p>
+                                                                        <p className="d-xl-none">
+                                                                            <span>
+                                                                            {new Date(contact.added).toDateString()}
+                                                                            {/* {getCustomTime(contact.added)} */}
+                                                                            </span>
+                                                                        </p>
                                                                     </div>
                                                                 </div>
                                                             </a>
@@ -184,7 +220,7 @@ export default function Contacts(){
                                                 </div>
                                                 <div>
                                                     <h4 className="mb-0">{activeContactUID ? activeDetail[0].sender : contactsData[0].sender}</h4>
-                                                    <p>{activeContactUID ? getCustomTime(activeDetail[0].added) : getCustomTime(contactsData[0].added)}</p>
+                                                    <p>{activeContactUID ? new Date(activeDetail[0].added).toDateString() : new Date(contactsData[0].added).toDateString()}</p>
                                                 </div>
                                             </div>
                                             <div className="mt-4 d-flex justify-content-between">
@@ -212,7 +248,7 @@ export default function Contacts(){
                                         <div className="bg-light mail-f px-4 py-3">
                                             <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
                                                 <p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
-                                                <a href="javascript:void(0)" className="text-primary"><i className="fa fa-microphone"></i></a>
+                                                <a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
                                             </div>
                                             <div className="collapse" id="editer">
                                                 <div className="form-group">

src/component/home/TopBar.jsx

@@ -1,5 +1,5 @@
-import { useQuery } from '@tanstack/react-query'
 import React from 'react'
+import { useQuery } from '@tanstack/react-query'
 import { topBar } from '../../services/services'
 import queryKeys from '../../services/queryKeys'
 

src/services/queryKeys.js

@@ -1,4 +1,6 @@
 const queryKeys = {
+    user_details: ['user_details'],
+    
     dashboard: ['dashboard'],
     topBar: ['top-bar'],
     recentAction: ['recent-action'],

src/services/services.js

@@ -4,12 +4,12 @@ import axios from "axios"
 axios.interceptors.request.use(
     config => {
         config.headers = {
-            // Accept: "application/json",
+            Accept: "application/json",
             "Access-Control-Allow-Origin": "*",
             // "Access-Control-Expose-Headers": "Access-Control-Allow-Origin",
             // "Access-Control-Allow-Headers": "Origin, X-API-KEY, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Allow-Headers, Authorization, observe, enctype, Content-Length, X-Csrf-Token",
             // "Content-Type": "application/json;charset=UTF-8",
-            'Authorization': `Bearer ${localStorage.getItem('token')}`
+            'Authorization': (localStorage && localStorage.getItem('access_token')) ? `Bearer ${localStorage.getItem('access_token')}` : ''
           };
     // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
     // config.baseURL = process.env.REACT_APP_MAIN_API
@@ -25,7 +25,7 @@ const postAuxEnd = (path, postData, media=false) => {
     return axios.post(`${basePath}${path}`, postData).then(res => {
         return res
     }).catch(err => {
-        throw new Error(err.response.data.message);
+        throw new Error(err.response.data.msg);
     })
 }
 
@@ -42,14 +42,36 @@ const getAuxEnd = (path, reqData= null) => {
     })
 }
 
+// FUNCTION TO LOGIN USER IN
+export const userToken = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/Authorize', postData, false)
+}
+
 // FUNCTION TO LOGIN USER IN
 export const loginUser = (reqData) => {
     let postData = {
         ...reqData
     }
-    return postAuxEnd('/panel/auth/login', postData, false)
+    return postAuxEnd('/panel/Login', postData, false)
 }
 
+// FUNCTION TO GET USER INFO DATA
+export const userInfo = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/panel/Account', postData, false)
+}
+// export const getUserDetails = (reqData) => {
+//     return getAuxEnd(`/panel/Account`, reqData)
+// }
+
+
+
+
 // FUNCTION TO REGISTER USER
 export const signUpUser = (reqData) => {
     let postData = {
@@ -91,11 +113,6 @@ export const recoverPWD = (reqData) => {
     return postAuxEnd('/panel/auth/reset', postData, false)
 }
 
-// FUNCTION TO GET DASHBOARD DATA
-export const accountDashboard = () => {
-    return getAuxEnd(`/panel/account/dash`)
-}
-
 // FUNCTION TO GET DASHBOARD TOP BAR SECTION
 export const topBar = () => {
     return getAuxEnd(`/panel/account/bar`)