+
-
+ {/*
*/}
diff --git a/src/component/authorization/UserExist.jsx b/src/component/authorization/UserExist.jsx
index c742ac3..b4f4cb5 100644
--- a/src/component/authorization/UserExist.jsx
+++ b/src/component/authorization/UserExist.jsx
@@ -1,19 +1,103 @@
import React, { useEffect, useState } from 'react'
-import { Outlet } from 'react-router-dom'
+import { useDispatch, useSelector } from "react-redux";
+import { Outlet, useNavigate } from 'react-router-dom'
+import { updateUserDetails } from "../../store/UserDetails";
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';
export default function UserExist() {
- const [loading, setLoading] = useState(true)
+ const {joinRoom} = SocketContextValues() // Destructures values from socket context
+
+ const navigate = useNavigate()
+ const [loading, setLoading] = useState(true)
+
+ const dispatch = useDispatch()
+
+ 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
+
+ let loggedIn = lastname ? true : false; // variable to determine if user is logged in
+ // console.log('loggedIn', loggedIn)
+
+ // Function to log the user out
+ const logoutUser = () => {
+ localStorage.clear()
+ navigate(siteLinks.login)
+ window.location.reload()
+ };
+
+ // Function to reset the activity time
+ const resetTimer = () => {
+ debounceFunction(setLastActivityTime(Date.now()), 1000)
+ };
+
useEffect(()=>{
const timer = setTimeout(()=>{
- setLoading(false)
- },1000)
+ if(Date.now() - Number(lastActivityTime) >= Number(process.env.REACT_APP_TIMEOUT)){
+ logoutUser()
+ }
+ }, Number(process.env.REACT_APP_TIMEOUT))
+
+ // Listen for activity events
+ const events = ['mousemove', 'keydown', 'click', 'scroll', 'touchstart'];
+
+ // Adding event listeners
+ events.forEach(event => {
+ window.addEventListener(event, resetTimer);
+ });
+
+ return () => {
+ clearTimeout(timer)
+ events.forEach(event => {
+ window.removeEventListener(event, resetTimer);
+ })
+ }
+ },[lastActivityTime])
+
+ useEffect(()=>{
+ accountDashboard().then(res => {
+ const {dash_data} = res?.data
+ setLoading(false)
+ dispatch(updateUserDetails({ ...dash_data }));
+ }).catch(err => {
+ navigate(siteLinks.login)
+ setLoading(false)
+ })
+ },[])
- return () => clearTimeout(timer)
+
+ // 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')){
+ joinRoom(localStorage.getItem('room'));
+ joinRoom("merms_global_events"); // global room for all
+ }
},[])
return (
diff --git a/src/component/calendar/Calendar.jsx b/src/component/calendar/Calendar.jsx
index 350dd35..9aa4175 100644
--- a/src/component/calendar/Calendar.jsx
+++ b/src/component/calendar/Calendar.jsx
@@ -1,14 +1,112 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
+import EventCalendar from "./EventCalendar";
export default function Calendar(){
+ const [draggedEvent, setDraggedEvent] = useState('undroppable')
+ const handleDragStart = useCallback((event) => setDraggedEvent(event), [])
+
+ // const dummyEvents = [
+ // {id: '1', title: 'Family Vacation', color: 'fc-event-primary', start: new Date('2024-12-18'), end: new Date('2024-12-18'), isAllDay: false, resource: ''},
+ // {id: '2', title: 'Meeting In Office', color: 'fc-event-warning', start: new Date('2024-12-19'), end: new Date('2024-12-19'), isAllDay: false, resource: ''},
+ // {id: '3', title: 'Client Call', color: 'fc-event-danger', start: new Date('2024-12-20'), end: new Date('2024-12-20'), isAllDay: false, resource: ''},
+ // {id: '4', title: 'Interview', color: 'fc-event-success', start: new Date('2024-12-21'), end: new Date('2024-12-21'), isAllDay: false, resource: ''}
+ // ]
+ const dummyEvents = [
+ {id: '1', title: 'Family Vacation', color: 'fc-event-primary', isAllDay: false},
+ {id: '2', title: 'Meeting In Office', color: 'fc-event-warning', isAllDay: false},
+ {id: '3', title: 'Client Call', color: 'fc-event-danger', isAllDay: false},
+ {id: '4', title: 'Interview', color: 'fc-event-success', isAllDay: false}
+ ]
+
return(
<>
-
Coming Soon
+
+
+
+
+
+
+
+
+ Add New Event
+
+
+ Drag and drop your event or click in the calendar.
+
+ {dummyEvents.map((item, index) => (
+
+ handleDragStart({...item})
+ }
+ >
+
+ ))}
+
+
+ Remove After Drop
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Event Modal */}
+
+
+
+
+
Add New Event
+
+ ×
+
+
+
+
+ Close
+ Save changes
+
+
+
)
diff --git a/src/component/calendar/EventCalendar.jsx b/src/component/calendar/EventCalendar.jsx
new file mode 100644
index 0000000..5d03708
--- /dev/null
+++ b/src/component/calendar/EventCalendar.jsx
@@ -0,0 +1,130 @@
+import React, { useCallback, useState } from 'react'
+import { Calendar, dayjsLocalizer } from 'react-big-calendar'
+import dayjs from 'dayjs'
+
+import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
+
+
+
+const localizer = dayjsLocalizer(dayjs)
+
+const DnDCalendar = withDragAndDrop(Calendar)
+
+export default function EventCalendar({draggedEvent, setDraggedEvent}) {
+ const myEventsList = []
+ const [myEvents, setMyEvents] = useState(myEventsList)
+
+ const moveEvent = useCallback(
+ ({ event, start, end, isAllDay: droppedOnAllDaySlot = false }) => {
+ // const { isAllDay } = event
+ // if (!allDay && droppedOnAllDaySlot) {
+ // event.allDay = true
+ // }
+ // if (allDay && !droppedOnAllDaySlot) {
+ // event.allDay = false;
+ // }
+
+ setMyEvents((prev) => {
+ const existing = prev.find((ev) => ev.id === event.id) ?? {}
+ const filtered = prev.filter((ev) => ev.id !== event.id)
+ return [...filtered, { ...existing, start, end, allDay: event.allDay }]
+ })
+ },
+ [setMyEvents]
+ )
+ const [displayDragItemInCell, setDisplayDragItemInCell] = useState(true)
+
+
+ const dragFromOutsideItem = useCallback(() => draggedEvent === 'undroppable' ? null : draggedEvent, [draggedEvent])
+
+ const customOnDragOverFromOutside = useCallback(
+ (dragEvent) => {
+ // check for undroppable is specific to this example
+ // and not part of API. This just demonstrates that
+ // onDragOver can optionally be passed to conditionally
+ // allow draggable items to be dropped on cal, based on
+ // whether event.preventDefault is called
+ if (draggedEvent !== 'undroppable') {
+ console.log('preventDefault')
+ dragEvent.preventDefault()
+ }
+ },
+ [draggedEvent]
+ )
+
+
+ const eventPropGetter = useCallback(
+ (event) => ({
+ ...(event.isDraggable
+ ? { className: 'isDraggable' }
+ : { className: 'nonDraggable' }),
+ }),
+ []
+ )
+
+ const newEvent = useCallback(
+ (event) => {
+ setMyEvents((prev) => {
+ const idList = prev.map((item) => item.id)
+ const newId = Math.max(...idList) + 1
+ // return [...prev, { ...event, id: newId }]
+ return [...prev, { ...event}]
+ })
+ },
+ [setMyEvents]
+ )
+
+ const onDropFromOutside = useCallback(
+ ({ start, end, allDay: isAllDay }) => {
+ if (draggedEvent === 'undroppable') {
+ setDraggedEvent(null)
+ return
+ }
+
+ const { title, id } = draggedEvent
+ const event = {
+ title: title,
+ start,
+ end,
+ isAllDay,
+ id
+ }
+ setDraggedEvent(null)
+ newEvent(event)
+ },
+ [draggedEvent, setDraggedEvent, newEvent]
+ )
+
+ const resizeEvent = useCallback(
+ ({ event, start, end }) => {
+ setMyEvents((prev) => {
+ const existing = prev.find((ev) => ev.id === event.id) ?? {}
+ const filtered = prev.filter((ev) => ev.id !== event.id)
+ return [...filtered, { ...existing, start, end }]
+ })
+ },
+ [setMyEvents]
+ )
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/component/comments/Comments.js b/src/component/comments/Comments.js
index aa9c8ab..2486032 100644
--- a/src/component/comments/Comments.js
+++ b/src/component/comments/Comments.js
@@ -1,6 +1,6 @@
import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
-
+import getImage from "../../utils/getImage";
export default function Comments(){
@@ -8,7 +8,364 @@ export default function Comments(){
<>
-
Coming Soon
+ {/*
Coming Soon
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dutca Patrick
+
30 Min ago
+
+
+
+
+
Landing page Designer...
+
+
+
+
+
hey adminjon...
+
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.
+
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.
+
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.
+
+
Have lovely Day,
+
adminjon
+
+
+
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
Wireframe
*/}
+ {/*
(220.MB)
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+
+
+
+
+
+
)
diff --git a/src/component/contacts/Contacts.js b/src/component/contacts/Contacts.js
index 93cadba..734d134 100644
--- a/src/component/contacts/Contacts.js
+++ b/src/component/contacts/Contacts.js
@@ -1,6 +1,6 @@
import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
-
+import getImage from "../../utils/getImage";
export default function Contacts(){
@@ -8,7 +8,355 @@ export default function Contacts(){
<>
-
Coming Soon
+ {/*
Coming Soon
*/}
+
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+ {/*
*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dutca Patrick
+
30 Min ago
+
+
+
+
+
Landing page Designer...
+
+
+
+
+
hey adminjon...
+
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.
+
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.
+
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.
+ {/*
*/}
+ {/*
Have lovely Day,
*/}
+ {/*
adminjon
*/}
+ {/*
*/}
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+ {/* */}
+
+
+
+
+
+
+
+
+
)
diff --git a/src/component/context/SocketIOContext.jsx b/src/component/context/SocketIOContext.jsx
new file mode 100644
index 0000000..1643d74
--- /dev/null
+++ b/src/component/context/SocketIOContext.jsx
@@ -0,0 +1,80 @@
+import { useQueryClient } from "@tanstack/react-query";
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { Outlet } from "react-router-dom";
+import { io } from "socket.io-client";
+import queryKeys from "../../services/queryKeys";
+import { socketEmitEvents, socketOnEvents } from "./socketEvents";
+// import io from "socket.io-client";
+
+// import { tableReload } from "../../store/TableReloads";
+// import { useDispatch, useSelector } from "react-redux";
+
+
+let SocketIOContext = createContext({})
+
+export default function SocketIOContextProvider({children}) {
+ const queryClient = useQueryClient()
+ // const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS IF USER UID, to determine if user is active
+
+ // const dispatch = useDispatch()
+
+ const socket = io.connect(process.env.REACT_APP_SOCKET_URL);
+
+ // // Messages States
+ // const [message, setMessage] = useState("");
+ const [socketMsgReceived, setSocketMsgReceived] = useState("");
+
+ const joinRoom = (room) => {
+ if (room !== "") {
+ return socket.emit("join_room", room);
+ }
+ return
+ };
+
+ const sendMessage = (eventType, message, room) => {
+ if(message && room){
+ socket.emit(eventType, { message, room });
+ }
+ };
+
+ useEffect(() => {
+ socket.on(socketOnEvents.receive_message, (data) => {
+ // setSocketMsgReceived(data.message);
+ // dispatch(tableReload({type:'CHATMESSAGELIST'})) // dispatches to update chat message sending from owner to worker and vice versa
+ console.log('DATA', data)
+ queryClient.refetchQueries({
+ queryKey: [...queryKeys.recentAction],
+ // type: 'active',
+ // exact: true,
+ })
+ });
+
+ // client-side
+ socket.on("connect", () => {
+ console.log(socket.id);
+ });
+
+ socket.on("disconnect", () => {
+ console.log(socket.id);
+ });
+ }, [socket]);
+
+ let values = {
+ socket,
+ sendMessage,
+ socketMsgReceived,
+ setSocketMsgReceived,
+ joinRoom,
+ }
+
+ return (
+
+
+ )
+}
+
+
+export const SocketContextValues = () => {
+ return useContext(SocketIOContext)
+}
diff --git a/src/component/context/socketEvents.js b/src/component/context/socketEvents.js
new file mode 100644
index 0000000..d3b198c
--- /dev/null
+++ b/src/component/context/socketEvents.js
@@ -0,0 +1,9 @@
+export const socketEmitEvents = {
+ send_message: 'send_message'
+}
+
+
+
+export const socketOnEvents = {
+ receive_message: 'receive_message'
+}
\ No newline at end of file
diff --git a/src/component/home/HomeSections.jsx b/src/component/home/HomeSections.jsx
index 584aaea..c525ec9 100644
--- a/src/component/home/HomeSections.jsx
+++ b/src/component/home/HomeSections.jsx
@@ -1,9 +1,19 @@
-import React from "react";
+import React, { useEffect } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
-
+import RecentActions from "./RecentActions";
+import Products from "./Products";
+import TopBar from "./TopBar";
+import ProductsURL from "./ProductsURL";
+import { SocketContextValues } from "../context/SocketIOContext";
export default function HomeSections(){
+ const {sendMessage} = SocketContextValues() // Destructures values from socket context
+
+ // useEffect(()=>{
+ // sendMessage('Hello socket', '2020aklksod')
+ // },[])
+
return <>
{/*
@@ -29,424 +39,50 @@ export default function HomeSections(){
*/}
-
-
-
-
-
-
-
-
$65,456
- Last 6 months
-
-
-
Revenue
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
52%
- Past 12 hours
-
-
-
Conversion Rate
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
605
- Last 90 days
-
-
-
Transactions
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
5,687
- Last 3 months
-
-
-
Purchases
-
-
-
-
-
-
-
-
+
-
-
-
My Products
-
-
-
-
-
-
-
-
-
Annual Sales
-
15,236
-
-
-
-
-
-
-
-
-
Annual Revenue
-
$40,516
-
-
-
-
-
-
-
+
-
-
-
-
Recent Actions
-
-
- {/*
-
-
-
-
-
Last Update
-
10-10-2021 10 AM
-
-
- {/*View All Invoices */}
-
-
-
-
-
-
-
+
-
-
-
-
-
Top selling products
-
-
-
-
-
-
-
-
- #
- Name
- Price
- In stock
- Status
- Action
-
-
-
-
- 1
- Cold Shoulder Bling Dress
- $65.342
-
-
-
- Active
-
- 2
- PlayStation 4 Pro 1TB Console
- $47.655
-
-
-
- Active
-
- 3
- Extra Fine Wool Jumpers
- $56.479
-
-
-
- Canceled
-
- 4
- Long Sleeve Bow Top
- $04.786
-
-
-
- Active
-
- 5
- Shine Stripe Long Sleeve Ruffle
- $23.456
-
-
-
- Active
-
- 6
- Long Sleeve Micro Thermal Shirt
- $65.598
-
-
-
- info
+
-
-
- #
- Name
- Price
- In stock
- Status
- Action
-
-
-
-
-
-
-
-
+
-
Lifetime sales
-
-
+ {/*
*/}
-
We only started collecting data from February 2019
-
Questions about the Net Earnings number? Click here
+ {/*
We only started collecting data from February 2019 */}
+ {/*
Questions about the Net Earnings number? Click here
*/}
diff --git a/src/component/home/Products.jsx b/src/component/home/Products.jsx
new file mode 100644
index 0000000..67d3893
--- /dev/null
+++ b/src/component/home/Products.jsx
@@ -0,0 +1,75 @@
+import { useQuery } from '@tanstack/react-query'
+import React from 'react'
+import { productData } from '../../services/services'
+import queryKeys from '../../services/queryKeys'
+import productPath from "../../utils/productpath";
+import { Link } from 'react-router-dom';
+export default function Products() {
+
+ const {data, isFetching, isError, error} = useQuery({
+ queryKey: queryKeys.product,
+ queryFn: () => productData()
+ })
+
+ const products = data?.data?.products_data?.products
+
+ return (
+ <>
+
+
+
My Products
+
+
+ {isFetching ?
+ <>
+
+
+ : isError ?
+
+ :
+
+ {products && products.map((product, index) => (
+
+
+
+
+
+
+
{product?.status}
+
{product?.description}
+
+
+
+
+
+ ))}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+ {/*
Annual Revenue
*/}
+ {/*
$40,516 */}
+ {/*
*/}
+ {/*
*/}
+ {/*
*/}
+
+ }
+
+
+
+
+ )
+}
diff --git a/src/component/home/ProductsURL.jsx b/src/component/home/ProductsURL.jsx
new file mode 100644
index 0000000..baafc4e
--- /dev/null
+++ b/src/component/home/ProductsURL.jsx
@@ -0,0 +1,86 @@
+import React from 'react'
+import { productsURL } from '../../services/services'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+
+export default function ProductsURL() {
+
+ const {data:data, isFetching, isError, error} = useQuery({
+ queryKey: queryKeys.product_url,
+ queryFn: () => productsURL()
+ })
+
+ const urlData = data?.data?.url_data?.url
+
+ return (
+ <>
+
+
+
+
+
My Product URLs
+
+
+
+
+
+ {isFetching ?
+ <>
+
+
+ : isError ?
+
+ :
+
+
+
+ #
+ Description
+
+ Status
+ Action
+
+
+
+ {urlData && urlData.map((item, index) => {
+ let statusColor = item?.status == 'Active' ? 'badge-success-inverse' : item?.status == 'Updating' ? 'badge-success-inverse' : item?.status == 'Refreshing' ? 'badge-danger-inverse' : 'badge-info-inverse'
+ return (
+
+ {Number(item?.no) + Number(index)}
+ {item?.description} - {item?.url}
+
+ {item?.status}
+ )
+ })}
+
+
+
+ #
+ Name
+ Price
+ In stock
+ Status
+ Action
+
+
+
+ }
+
+
+
+
+
+ )
+}
diff --git a/src/component/home/RecentActions.jsx b/src/component/home/RecentActions.jsx
new file mode 100644
index 0000000..5ec76a2
--- /dev/null
+++ b/src/component/home/RecentActions.jsx
@@ -0,0 +1,113 @@
+import React from 'react'
+import { useQuery } from "@tanstack/react-query";
+import { recentActions } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
+
+export default function RecentActions() {
+
+ const {data:dataAction, isFetching, isError, error} = useQuery({
+ queryKey: queryKeys.recentAction,
+ queryFn: () => recentActions()
+ })
+
+ const actionData = dataAction?.data?.action_data
+
+ return (
+ <>
+
+
+
+
Recent Actions
+
+ {/*
+
*/}
+
+
+ {isFetching ?
+ <>
+
+
+ : isError ?
+
+ :
+ <>
+
+
+
Last Update
+
{dataAction?.data?.action_data?.last_update}
+
+
+ {/*View All Invoices */}
+
+
+
+
+
+
Initial
+
{actionData?.initial}
+
+
+
Processing
+
{actionData?.processing}
+
+
+
Verifying
+
{actionData?.verifying}
+
+
+
Completed
+
{actionData?.completed}
+
+
+
+
+ }
+
+
+
+ )
+}
diff --git a/src/component/home/TopBar.jsx b/src/component/home/TopBar.jsx
new file mode 100644
index 0000000..f2f1fd9
--- /dev/null
+++ b/src/component/home/TopBar.jsx
@@ -0,0 +1,67 @@
+import { useQuery } from '@tanstack/react-query'
+import React from 'react'
+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('TOP', topData)
+
+ return (
+ <>
+ {isFetching ?
+ <>
+
+
+ : isError ?
+
+ :
+ <>
+ {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 (
+
+
+
+
+
+
+
+
{item?.value || 0}
+ {item?.data_span}
+
+
+
{item?.description}
+
+
+
+
+
+
+
+
+ )
+ })}
+
+ }
+
+ )
+}
diff --git a/src/component/layout/layoutcom/UserHeader.jsx b/src/component/layout/layoutcom/UserHeader.jsx
index 56d9f20..bf0aff0 100644
--- a/src/component/layout/layoutcom/UserHeader.jsx
+++ b/src/component/layout/layoutcom/UserHeader.jsx
@@ -1,46 +1,74 @@
import React from "react";
import getImage from "../../../utils/getImage";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import siteLinks from "../../../links/siteLinks";
export default function UserHeader(){
+
+ const { userDetails } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
+
+ const toggleSidebar = (e) => {
+ e.preventDefault()
+ document.body.classList.toggle('sidebar-toggled')
+ }
+
+ const removeSidebar = (e) => {
+ e.preventDefault()
+ document.body.classList.remove('sidebar-toggled')
+ }
+
+ // const toggleSidebarMini = (e) => {
+ // e.preventDefault()
+ // }
+
+ const navigate = useNavigate()
+
+ const logout = () => {
+ localStorage.clear()
+ navigate(siteLinks.login, {replace: true})
+ window.location.reload()
+ }
+
return (
-
+
-
+
-
+ {userDetails?.account_name}
+ {/*
-
+ */}
-
+ {/*
-
+ */}
- {/* ul className="navbar-nav nav-right ml-auto dropdown" */}
{/*
-
+
-
+
Messages
6
@@ -134,16 +162,16 @@ export default function UserHeader(){
-
-
-
+ */}
+ {/*
+
-
+
-
-
+ */}
+ {/*
@@ -254,8 +282,7 @@ export default function UserHeader(){
*/}
-
-
+
+ ![user]({getImage("avtar/01.jpg")})
+ ![user]({getImage("avtar/02.jpg")})
+ ![user]({getImage("avtar/03.jpg")})
+ ![user]({getImage("avtar/04.jpg")})
+ ![user]({getImage("avtar/05.jpg")})
+ ![user]({getImage("avtar/06.jpg")})
+ ![user]({getImage("avtar/07.jpg")})
+ ![user]({getImage("avtar/08.jpg")})
+ ![user]({getImage("avtar/09.jpg")})
+ 
+ 
+