victorAnumudu
83 lines
3.0 KiB
React
83 lines
3.0 KiB
React
import React, {useEffect} from 'react'
|
|
import { useMutation } from '@tanstack/react-query'
|
|
import { topBar } from '../../services/services'
|
|
|
|
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)
|
|
},[])
|
|
|
|
const data = topBarData?.data?.data?.top_bar // top bar data
|
|
|
|
return (
|
|
<>
|
|
{topBarData.isPending ?
|
|
<>
|
|
<div className="col-12">
|
|
<div className="card p-4">
|
|
<p className='text-mute'>Loading...</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
: topBarData.error ?
|
|
<div className="col-12">
|
|
<div className="card p-4">
|
|
<p className='text-danger'>{topBarData.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'
|
|
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>
|
|
)
|
|
})}
|
|
</>
|
|
}
|
|
</>
|
|
)
|
|
}
|