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

top bar contents updated

Browse Source
This commit is contained in:
victorAnumudu
2024-12-13 19:20:20 +01:00
parent 1f07d92aae
commit 71f3c7bcd6
3 changed files with 69 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/home/HomeSections.jsx
+2 -98
View File
@@ -2,6 +2,7 @@ import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS"; import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import RecentActions from "./RecentActions"; import RecentActions from "./RecentActions";
import Products from "./Products"; import Products from "./Products";
import TopBar from "./TopBar";
// import { useQuery } from "@tanstack/react-query"; // import { useQuery } from "@tanstack/react-query";
// import { accountDashboard } from "../../services/services"; // import { accountDashboard } from "../../services/services";
// import queryKeys from "../../services/queryKeys"; // import queryKeys from "../../services/queryKeys";
@@ -63,104 +64,7 @@ export default function HomeSections(){
</div> */} </div> */}
<BreadcrumbComBS title='Home' paths={['Dashboard', 'Home']} /> <BreadcrumbComBS title='Home' paths={['Dashboard', 'Home']} />
<div className="row"> <div className="row">
<div className="col-sm-6 col-xxl-3"> <TopBar />
<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">0</h3>
<small className="d-block">Last 2 months</small>
</div>
<div className="col text-right">
<h5 className="text-muted mb-0">Contacts</h5>
<strong className="text-danger 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>
<div 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 ecommerce-contant-text m-b-0 h-100">
<div className="w-100">
<div className="row p-3">
<div className="col">
<h3 className="mb-0">0</h3>
<small className="d-block">Past 12 hours</small>
</div>
<div className="col text-right">
<h5 className="text-muted mb-0">Site Traffic</h5>
<strong className="text-primary m-t-5"><i
className="zmdi zmdi-long-arrow-up font-weight-bold"></i> 0.00%</strong>
</div>
</div>
<div className="apexchart-wrapper">
<div id="ecommercedemo1" className="chart-fit"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div 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="w-100">
<div className="row p-3">
<div className="col">
<h3 className="mb-0">0</h3>
<small className="d-block">Last 14 days</small>
</div>
<div className="col text-right">
<h5 className="text-muted mb-0">Appointments</h5>
<strong className="text-orange m-t-5"><i
className="zmdi zmdi-long-arrow-up font-weight-bold"></i> 0.00%</strong>
</div>
</div>
</div>
<div className="apexchart-wrapper">
<div id="ecommercedemo2" className="chart-fit"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div 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">5,687</h3>
<small className="d-block">Last 3 months</small>
</div>
<div className="col text-right">
<h5 className="text-muted mb-0">Purchases</h5>
<strong className="text-success m-t-5"><i
className="zmdi zmdi-long-arrow-up font-weight-bold"></i> 9.89%</strong>
</div>
</div>
<div className="apexchart-wrapper">
<div id="ecommercedemo4" className="chart-fit"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-xxl-6 m-b-30"> <div className="col-xxl-6 m-b-30">
src/component/home/RecentActions.jsx
+1 -1
View File
@@ -43,7 +43,7 @@ export default function RecentActions() {
<div className="d-xxs-flex align-items-center"> <div className="d-xxs-flex align-items-center">
<div className="total-sales"> <div className="total-sales">
<p>Last Update</p> <p>Last Update</p>
<h1>{dataAction?.data?.action_data?.last_update}</h1> <h3>{dataAction?.data?.action_data?.last_update}</h3>
</div> </div>
<div className="mb-3 mb-sm-0 ml-auto"> <div className="mb-3 mb-sm-0 ml-auto">
{/*<button className="btn btn-primary btn-xs">View All Invoices</button>*/} {/*<button className="btn btn-primary btn-xs">View All Invoices</button>*/}
src/component/home/TopBar.jsx
+66
View File
@@ -0,0 +1,66 @@
import { useQuery } from '@tanstack/react-query'
import React from 'react'
import { recentActions } from '../../services/services'
import queryKeys from '../../services/queryKeys'
export default function TopBar() {
const {data:dataAction, isFetching, isError, error} = useQuery({
queryKey: queryKeys.recentAction,
queryFn: () => recentActions()
})
const actionData = dataAction?.data?.action_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>
:
<>
{actionData && actionData?.top_bar?.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>
)
})}
</>
}
</>
)
}