victorAnumudu
68 lines
2.6 KiB
React
68 lines
2.6 KiB
React
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>
|
|
)
|
|
})}
|
|
</>
|
|
}
|
|
</>
|
|
)
|
|
}
|