MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

added new endpoint for top bar data

Browse Source
This commit is contained in:
victorAnumudu
2025-06-24 16:38:42 +01:00
parent ffd80d9888
commit 9d158fe1cb
5 changed files with 122 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/home/TopBar.jsx
+29 -12
View File
@@ -1,20 +1,37 @@
import React from 'react'
import { useQuery } from '@tanstack/react-query'
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)
location.reload();
},
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 +39,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
+67
View File
@@ -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>
)
})}
</>
}
</>
)
}