fix location reload error

.env

@@ -1,10 +1,16 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
-REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 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

@@ -1,9 +1,15 @@
 SKIP_PREFLIGHT_CHECK=true 
 REACT_APP_NODE_ENV="development"
-REACT_APP_SOCKET_URL="https://dev-socket.mermsemr.com"
+REACT_APP_SOCKET_URL="https://devsocket.mermsemr.com"
 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

@@ -1,8 +1,14 @@
 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
+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

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/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

@@ -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,14 +14,17 @@ 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()
 
   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 +40,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
     }
   })
 
@@ -62,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">
@@ -71,7 +85,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 +93,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 +146,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,47 @@
+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) => {
+      console.log(error)
+      // window.location.reload(true)
+    },
+      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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useQuery } from '@tanstack/react-query'
 
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
@@ -25,14 +25,7 @@ export default function Calendar(){
     const category = receievedEvents?.category  //EVENT CATEGORIES FROM API
     const eventList = receievedEvents?.list //EVENT LIST FROM API
 
-    const events = [
-        {id: '1111', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2025-01-18')},
-        {id: '2222', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2025-01-19')},
-        {id: '3333', title: 'Client Call', color: 'fc-event-danger', start: new Date('2025-01-22')},
-        {id: '4444', title: 'Interview', color: 'fc-event-success', start: new Date('2025-01-1')}
-    ]
-
-    const [dummyEvents, setDummyEvents] = useState(events)
+    const [activeCategory, setActiveCategory] = useState('1')
 
     const [removeAfterDrop, setRemoveAfterDrop] = useState(false)
 
@@ -47,11 +40,14 @@ export default function Calendar(){
     const handleAddNewEvent = () => {
         if(newEvent.title && newEvent.color){
             const eventToAdd = {...newEvent}
-            setDummyEvents(prev => ([...prev, eventToAdd]))
+            // setDefaultCategory(prev => ([...prev, eventToAdd]))
             setNewEvent({title: '', color: ''})
         }
     }
 
+    const handleActiveCategory = (id) => {
+        setActiveCategory(id)
+    }
 
     return(
         <>
@@ -79,38 +75,69 @@ export default function Calendar(){
                                 :
                                 <>
                                     <div className="col-xl-3">
-                                        <div id="external-events">
-                                            {/* <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
-                                                Add New Event
-                                            </button>
-                                            <p className="mt-3">
-                                                Drag and drop your event or click in the calendar.
-                                            </p> */}
-                                            {/* {dummyEvents.map((item, index) => (
-                                                <div key={index} className={`fc-event ${item.color}`} data-color={`${item.color}`} 
-                                                    draggable="true"
-                                                    onDragStart={() =>
-                                                    handleDragStart({...item})
-                                                    }
-                                                >
-                                                    <span></span> {item.title}
+                                       
+                                        {/* <button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
+                                            Add New Event
+                                        </button>
+                                        <p className="mt-3">
+                                            Drag and drop your event or click in the calendar.
+                                        </p> */}
+
+                                        {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}
+                                                //     // onDragStart={() =>
+                                                //     // handleDragStart({...item})
+                                                //     // }
+                                                // >
+                                                //     <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>
+
+                                                <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>
-                                            ))} */}
+                                            )
+                                        }
+                                        )}
+
+                                        {/* <div id="external-events">
                                             <ExternalDraggable category={category} />
-                                            {/* <div className="form-check">
-                                                <input className="form-check-input" type="checkbox" value={removeAfterDrop}
-                                                    id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
-                                                    <label className="form-check-label" htmlFor="defaultCheck1">
-                                                        Remove After Drop
-                                                    </label>
-                                            </div> */}
-                                        </div>
+                                        </div> */}
+
+                                        {/* <div className="form-check">
+                                            <input className="form-check-input" type="checkbox" value={removeAfterDrop}
+                                                id="defaultCheck1" onChange={() => setRemoveAfterDrop(prev => !prev)} />
+                                                <label className="form-check-label" htmlFor="defaultCheck1">
+                                                    Remove After Drop
+                                                </label>
+                                        </div> */}
                                     </div>
                                     <div className="col-xl-9">
                                         <div className="event-calendar">
                                             <EventCalendar 
                                                 removeAfterDrop={removeAfterDrop} 
                                                 eventList={eventList}
+                                                activeCategory={activeCategory}
                                             />
                                         </div>
                                     </div>

src/component/calendar/EventCalendar.jsx

@@ -6,7 +6,7 @@ import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import { INITIAL_EVENTS, createEventId } from './event-utils';
 
-export default function EventCalendar({removeAfterDrop, eventList}) {
+export default function EventCalendar({removeAfterDrop, eventList, activeCategory}) {
   const [weekendsVisible, setWeekendsVisible] = useState(true);
   const [currentEvents, setCurrentEvents] = useState([]);
 
@@ -79,9 +79,11 @@ export default function EventCalendar({removeAfterDrop, eventList}) {
   }
 
   useEffect(()=>{
-    let newEventList = eventList.map(item => ({...item, start: new Date(item?.start)}))
+    // let newEventList = eventList?.map(item => ({...item, start: new Date(item?.start)}))
+    let newEventList = eventList?.filter(item => (Number(item.category) == Number(activeCategory)))?.map(item => ({...item, start: new Date(item?.start)}))
+    console.log('newEventList', newEventList)
     setCurrentEvents(newEventList)
-  },[eventList])
+  },[activeCategory])
 
   return (
     <div className="demo-app">

src/component/comments/Comments.js

@@ -18,7 +18,7 @@ export default function Comments(){
                                         <div className="row justify-content-center">
                                             <div className="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">className= <i className="fa fa-plus pl-2"></i></a>
+                                                    <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>
                                                 </div>
                                             </div>
                                             <div className="col-12">

src/component/contacts/Contacts.js

@@ -1,354 +1,276 @@
-import React from "react";
+"use client"
+import React, { useEffect, useState } from "react";
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 import getImage from "../../utils/getImage";
+import { useQuery } from "@tanstack/react-query";
+import { contactData } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
+import getCustomTime from "../../utils/getCustomTime";
 
 export default function Contacts(){
 
+    const {data:contacts, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.contacts,
+        queryFn: () => contactData()
+    })
+
+    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']} />
-            <div className="row">
-                {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
-                <div className="col-12">
-                    <div className="card card-statistics mail-contant">
-                        <div className="card-body p-0">
-                            <div className="row no-gutters">
-                                <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="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">className= <i className="fa fa-plus pl-2"></i></a>
+            {isFetching ? 
+                <>
+                    <div className="row">
+                        <div className="col-12">
+                            <p className='text-mute'>Loading...</p>
+                        </div>
+                    </div>
+                </>
+                : isError ?
+                <div className="row">
+                    <div className="col-12">
+                        <p className='text-danger'>{error.message}</p>
+                    </div>
+                </div>
+                :
+                <div className="row">
+                    {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
+                    <div className="col-12">
+                        <div className="card card-statistics mail-contant">
+                            <div className="card-body p-0">
+                                <div className="row no-gutters">
+                                    <div className="col-md-4 col-xxl-2 col-md-4">
+                                        <div className="mail-sidebar">
+                                            <div className="row justify-content-center">
+                                                <div className="d-none col-12">
+                                                    <div className="text-center mail-sidebar-title px-4">
+                                                        <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>
-                                            <div className="col-12">
-                                                <div className="px-4 py-4">
-                                                    <ul className="pl-0">
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-envelope-o text-primary pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Inbox</span>
-                                                                            </span>
-                                                                            <span className="nav-item ml-auto text-right">
-                                                                                             <span className="badge badge-pill badge-primary float-right">0+</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-paper-plane-o pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Replied Mail</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </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)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-circle-o pr-4 text-warning"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Work</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                        <li className="py-2">
-                                                            <a href="javascript:void(0)">
-                                                                            <span className="nav align-items-center">
-                                                                                        <span>
-                                                                                            <i className="fa fa-plus pr-4"></i>
-                                                                                        </span>
-                                                                            <span>
-                                                                                            <span>Add Category</span>
-                                                                            </span>
-                                                                            </span>
-                                                            </a>
-                                                        </li>
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="col-md-8  col-xxl-4 border-md-t">
-                                    <div className="mail-content  border-right border-n h-100">
-                                        <div className="mail-search border-bottom">
-                                            <div className="row align-items-center mx-0">
                                                 <div className="col-12">
-                                                    {/*<div className="form-group pt-3">*/}
-                                                    {/*    <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
-                                                    {/*        <i className="fa fa-search"></i>*/}
-                                                    {/*</div>*/}
+                                                    <div className="px-4 py-4">
+                                                        <ul className="pl-0">
+                                                            <li className="py-2">
+                                                                <a href="#">
+                                                                                <span className="nav align-items-center">
+                                                                                            <span>
+                                                                                                <i className="fa fa-envelope-o text-primary pr-4"></i>
+                                                                                            </span>
+                                                                                <span>
+                                                                                                <span>Inbox</span>
+                                                                                </span>
+                                                                                <span className="nav-item ml-auto text-right">
+                                                                                                <span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
+                                                                                </span>
+                                                                                </span>
+                                                                </a>
+                                                            </li>
+                                                            <li className="py-2">
+                                                                <a href="#">
+                                                                                <span className="nav align-items-center">
+                                                                                            <span>
+                                                                                                <i className="fa fa-paper-plane-o pr-4"></i>
+                                                                                            </span>
+                                                                                <span>
+                                                                                                <span>Replied Mail</span>
+                                                                                </span>
+                                                                                </span>
+                                                                </a>
+                                                            </li>
+
+                                                        </ul>
+
+                                                        <ul className="pl-0 mt-5">
+                                                            <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>
+                                                                                            </span>
+                                                                                <span>
+                                                                                                <span>Work</span>
+                                                                                </span>
+                                                                                </span>
+                                                                </a>
+                                                            </li>
+                                                            <li className="py-2">
+                                                                <a href="#">
+                                                                                <span className="nav align-items-center">
+                                                                                            <span>
+                                                                                                <i className="fa fa-plus pr-4"></i>
+                                                                                            </span>
+                                                                                <span>
+                                                                                                <span>Add Category</span>
+                                                                                </span>
+                                                                                </span>
+                                                                </a>
+                                                            </li> */}
+                                                        </ul>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div className="mail-msg scrollbar scroll_dark">
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Martin smith</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Saas Designer</h5>
-                                                            <p>Since there is not an "all the above" category, I'll take the opportunity to enthusiastically congratulate you on the very high quality.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
+                                    </div>
+                                    <div className="col-md-8  col-xxl-4 border-md-t">
+                                        <div className="mail-content  border-right border-n h-100">
+                                            <div className="mail-search border-bottom">
+                                                <div className="row align-items-center mx-0">
+                                                    <div className="col-12">
+                                                        {/*<div className="form-group pt-3">*/}
+                                                        {/*    <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
+                                                        {/*        <i className="fa fa-search"></i>*/}
+                                                        {/*</div>*/}
                                                     </div>
-                                                </a>
+                                                </div>
                                             </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/02.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
+                                            <div className="mail-msg scrollbar scroll_dark">
+                                                {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'}`}>
+                                                            <a href="#">
+                                                                <div className="media align-items-center">
+                                                                    <div className="mr-3">
+                                                                        <div className="bg-img">
+                                                                            <img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
+                                                                        </div>
+                                                                    </div>
+                                                                    <div className="w-100">
+                                                                        <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>{new Date(contact.added).toDateString()}</span></p>
+                                                                        </div>
+                                                                        <h5 className="mb-0 my-2">{contact.title}</h5>
+                                                                        <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>
                                                         </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>DutcaPatrick</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Mobile app Designer </h5>
-                                                            <p>Very nice template, lots of pages and good documentation.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>m_morsch</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Landing page Designer</h5>
-                                                            <p>Excellent and at a great price... thank you very much!</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/04.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>AnnaHorno</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Re-Design ios app</h5>
-                                                            <p>Solved my theme problem in 10 minutes. We thank you.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/05.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Wdcorbitt</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Mobil UX/UI Designer</h5>
-                                                            <p>Asked for information and received it EXTREMELY quickly. Great layout - good code - great price! </p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/06.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Anne Smith</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Jobly Opportunity</h5>
-                                                            <p>Mentor has so many features and layouts. Its a great choice.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img  src={getImage("avtar/07.jpg")}  className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Paul Flavius</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Saas Designer</h5>
-                                                            <p>There are many people in the world with amazing talents who realize only a small percentage of their potential. </p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img src="assets/img/avtar/08.jpg" className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Sara Lisbon</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">UI Designer</h5>
-                                                            <p>We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
-                                            </div>
-                                            <div className="mail-msg-item">
-                                                <a href="javascript:void(0)">
-                                                    <div className="media align-items-center">
-                                                        <div className="mr-3">
-                                                            <div className="bg-img">
-                                                                <img src="assets/img/avtar/09.jpg" className="img-fluid" alt="user" />
-                                                            </div>
-                                                        </div>
-                                                        <div className="w-100">
-                                                            <div className="mail-msg-item-titel justify-content-between">
-                                                                <p>Annahorno</p>
-                                                                <p className="d-none d-xl-block">06:59 <span> PM </span></p>
-                                                            </div>
-                                                            <h5 className="mb-0 my-2">Saas Designer</h5>
-                                                            <p>One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
-                                                            <p className="d-xl-none">06:59 <span> PM </span></p>
-                                                        </div>
-                                                    </div>
-                                                </a>
+                                                    )
+                                                })}
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                                <div className="col-xxl-6 border-t border-xxl-t">
-                                    <div className="mail-chat py-5 px-5">
-                                        <div className="media align-items-center">
-                                            <div className="bg-img mr-3">
-                                                <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
-                                            </div>
-                                            <div>
-                                                <h4 className="mb-0">Dutca Patrick</h4>
-                                                <p>30 Min ago</p>
-                                            </div>
-                                        </div>
-                                        <div className="mt-4 d-flex justify-content-between">
-                                            <div>
-                                                <h3>Landing page Designer...</h3>
-                                            </div>
-                                            <div className="d-flex">
-                                                {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
-                                                {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
-                                            </div>
-                                        </div>
-                                        <div>
-                                            <p className="my-4">hey adminjon...</p>
-                                            <p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
-                                            <p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
-                                            <p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p>
-                                            {/*<div className="my-5">*/}
-                                            {/*    <p>Have lovely Day,</p>*/}
-                                            {/*    <p>adminjon</p>*/}
-                                            {/*</div>*/}
-                                        </div>
-                                    </div>
+                                    <div className="col-xxl-6 border-t border-xxl-t">
 
-                                    <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>
-                                        </div>
-                                        <div className="collapse" id="editer">
-                                            <div className="form-group">
-                                                <textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
+                                        <div className="mail-chat py-5 px-5">
+                                            <div className="media align-items-center">
+                                                <div className="bg-img mr-3">
+                                                    <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
+                                                </div>
+                                                <div>
+                                                    <h4 className="mb-0">{activeContactUID ? activeDetail[0].sender : contactsData[0].sender}</h4>
+                                                    <p>{activeContactUID ? new Date(activeDetail[0].added).toDateString() : new Date(contactsData[0].added).toDateString()}</p>
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div className="collapse" id="forward">
-                                            <div className="form-group">
-                                                <input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
-                                            </div>
-                                        </div>
-                                        <div className="d-flex align-items-center justify-content-between py-2">
-                                            <div>
-                                                {/*<ul className="nav">*/}
-                                                {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
-                                                {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
-                                                {/*    <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
-                                                {/*</ul>*/}
+                                            <div className="mt-4 d-flex justify-content-between">
+                                                <div>
+                                                    <h3>{activeContactUID ? activeDetail[0].title : contactsData[0].title}</h3>
+                                                </div>
+                                                <div className="d-flex">
+                                                    {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
+                                                    {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
+                                                </div>
                                             </div>
                                             <div>
-                                                {/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
+                                                <p>{activeContactUID ? activeDetail[0].message : contactsData[0].message}</p>
+                                                {/* <p className="my-4">hey adminjon...</p>
+                                                <p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
+                                                <p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
+                                                <p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p> */}
+                                                {/*<div className="my-5">*/}
+                                                {/*    <p>Have lovely Day,</p>*/}
+                                                {/*    <p>adminjon</p>*/}
+                                                {/*</div>*/}
+                                            </div>
+                                        </div>
+
+                                        <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="#" className="text-primary"><i className="fa fa-microphone"></i></a>
+                                            </div>
+                                            <div className="collapse" id="editer">
+                                                <div className="form-group">
+                                                    <textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
+                                                </div>
+                                            </div>
+                                            <div className="collapse" id="forward">
+                                                <div className="form-group">
+                                                    <input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
+                                                </div>
+                                            </div>
+                                            <div className="d-flex align-items-center justify-content-between py-2">
+                                                <div>
+                                                    {/*<ul className="nav">*/}
+                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
+                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
+                                                    {/*    <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
+                                                    {/*</ul>*/}
+                                                </div>
+                                                <div>
+                                                    {/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
@@ -357,7 +279,7 @@ export default function Contacts(){
                         </div>
                     </div>
                 </div>
-            </div>
+            }
         </>
     )
 }

src/component/home/TopBar.jsx

@@ -1,20 +1,36 @@
-import { useQuery } from '@tanstack/react-query'
-import React from 'react'
+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)
+    },
+      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 +38,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/css/calendar/_calendar.scss

@@ -31,13 +31,14 @@
 .fc-event {
   border-radius: 2px;
   border: none;
-  cursor: move;
+  // cursor: move;
   font-size: 13px;
   margin: 5px 0px;
   padding: 10px 10px 10px 40px;
   text-align: left;
   position:relative;
   &:before {
+    display: none;
     content:'';
     position:absolute;
     width:15px;
@@ -49,6 +50,9 @@
     &-primary {
       @include hex-rgba($primary, 0.2);
       color:$primary;
+      & label {
+        color:$primary;
+      }
       &:before {
         @include hex-rgba($primary, 0.8);
       }
@@ -59,6 +63,9 @@
     &-warning {
       @include hex-rgba($warning, 0.2);
       color:$warning;
+      & label {
+        color:$warning;
+      }
       &:before {
         @include hex-rgba($warning, 0.8);
       }
@@ -69,6 +76,9 @@
     &-danger {
       @include hex-rgba($danger, 0.2);
       color:$danger;
+      & label {
+        color:$danger;
+      }
       &:before {
         @include hex-rgba($danger, 0.8);
       }
@@ -79,6 +89,9 @@
     &-success {
       @include hex-rgba($success, 0.2);
       color:$success;
+      & label {
+        color:$success;
+      }
       &:before {
         @include hex-rgba($success, 0.8);
       }

src/css/mail/_mail.scss

@@ -41,7 +41,7 @@
 }
 .mail-msg{
 	max-height: 747px;
-	overflow: hidden;
+	overflow-y: auto;
 	outline: none;
 	@include laptop {
 		max-height: 450px;

src/services/queryKeys.js

@@ -1,11 +1,14 @@
 const queryKeys = {
+    user_details: ['user_details'],
+    
     dashboard: ['dashboard'],
     topBar: ['top-bar'],
     recentAction: ['recent-action'],
     product: ['product-data'],
     product_url: ['product_url'],
     myproduct_provision: ['myproduct_provision'],
-    calendar_events: ['calendar_events']
+    calendar_events: ['calendar_events'],
+    contacts: ['contacts']
 }
 
 export default queryKeys

src/services/services.js

@@ -4,12 +4,13 @@ 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')}` : '',
+            // 'uuid': 'dummy'
           };
     // config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
     // config.baseURL = process.env.REACT_APP_MAIN_API
@@ -25,7 +26,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 +43,65 @@ const getAuxEnd = (path, reqData= null) => {
     })
 }
 
+// FUNCTION TO AUTHORIZE 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)
+}
+
+// FUNCTION TO GET DASHBOARD TOP BAR SECTION
+export const topBar = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/account/bar`, postData, false)
+}
+
+// FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
+export const recentActions = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    //return getAuxEnd(`/panel/account/actions`)
+    return postAuxEnd(`/panel/account/actions`, postData, false)
+}
+
+// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
+export const productData = () => {
+     let postData = {
+        "token":"b",
+        "uid": 'h'
+    }
+    return postAuxEnd(`/panel/account/products`, postData, false)
+}
+
+// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
+export const productsURL = () => {
+    return getAuxEnd(`/panel/account/products/url`)
+}
+
+
+
+
+
 // FUNCTION TO REGISTER USER
 export const signUpUser = (reqData) => {
     let postData = {
@@ -91,24 +143,13 @@ 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`)
-}
-
 // FUNCTION TO GET CALENDAR EVENTS
 export const getCalendarEvents = () => {
-    return getAuxEnd(`/panel/account/calendar`)
-}
-
-// FUNCTION TO GET DASHBOARD RECENT ACTIONS SECTION
-export const recentActions = () => {
-    return getAuxEnd(`/panel/account/actions`)
+   // return getAuxEnd(`/panel/account/calendar`)
+    let postData = {
+        "a":"b"
+    }
+    return postAuxEnd(`/panel/account/calendar`, postData, false)
 }
 
 // FUNCTION TO GET MY PRODUCT PROVISION DATA
@@ -118,13 +159,8 @@ export const productProvision = (reqData) => {
 }
 
 // FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
-export const productData = () => {
-    return getAuxEnd(`/panel/account/products`)
-}
-
-// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
-export const productsURL = () => {
-    return getAuxEnd(`/panel/account/products/url`)
+export const contactData = () => {
+    return getAuxEnd(`/panel/contacts`)
 }
 
 export const MyProductData = (productID) => {

src/utils/getCustomTime.js

@@ -0,0 +1,13 @@
+function getCustomTime(dateStr) {
+    let date = new Date(dateStr);
+    
+    if(isNaN(date)){
+        return '00:00'
+    }
+    const hours = date.getHours()
+    const minutes = date.getMinutes()
+
+    return `${hours}:${minutes} ${hours >= 12  ? 'PM' : 'AM'}`
+  }
+  
+    export default getCustomTime