victorAnumudu
96 lines
3.4 KiB
React
96 lines
3.4 KiB
React
import { useQuery } from '@tanstack/react-query'
|
|
import { topBar } from '../../services/services'
|
|
import queryKeys from '../../services/queryKeys'
|
|
import { Link } from 'react-router-dom'
|
|
|
|
export default function 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'})
|
|
// }
|
|
// }
|
|
// })
|
|
|
|
// useEffect(()=>{
|
|
// let reqData = {
|
|
// token: localStorage.getItem('token'), // USER TOKEN
|
|
// uid: localStorage.getItem('uid') // USER UID
|
|
// }
|
|
// topBarData.mutate(reqData)
|
|
// },[])
|
|
|
|
let reqData = {
|
|
token: localStorage.getItem('token'), // USER TOKEN
|
|
uid: localStorage.getItem('uid') // USER UID
|
|
}
|
|
const {data:topBarData, isFetching, isError, error} = useQuery({
|
|
queryKey: queryKeys.topBar,
|
|
queryFn: () => topBar(reqData)
|
|
})
|
|
const data = topBarData?.data?.top_bar // top bar data
|
|
|
|
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>
|
|
:
|
|
<>
|
|
{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'
|
|
let dataSpan = ''
|
|
if(item?.extra_style){
|
|
const data = item.data_span.split(' ')
|
|
dataSpan = `${data[0]} ${data[1]}`
|
|
}
|
|
|
|
return (
|
|
<div key={item.id + index} className="col-sm-6 col-xxl-3">
|
|
<div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}>
|
|
<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?.extra_style ? dataSpan : item?.data_span}</small>
|
|
</div>
|
|
<div className="col text-right">
|
|
<h5 className="text-muted mb-0"><Link to={item?.link}>{item?.description}</Link></h5>
|
|
</div>
|
|
</div>
|
|
<div className="apexchart-wrapper">
|
|
<div id="ecommercedemo3" className="chart-fit"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</>
|
|
}
|
|
</>
|
|
)
|
|
}
|