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

added products API

Browse Source
This commit is contained in:
victorAnumudu
2024-12-12 22:01:19 +01:00
parent 03af1d8887
commit 2cf501dd2e
5 changed files with 87 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/home/HomeSections.jsx
+2 -94
View File
@@ -1,6 +1,7 @@
import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import RecentActions from "./RecentActions";
import Products from "./Products";
// import { useQuery } from "@tanstack/react-query";
// import { accountDashboard } from "../../services/services";
// import queryKeys from "../../services/queryKeys";
@@ -163,100 +164,7 @@ export default function HomeSections(){
</div>
<div className="row">
<div className="col-xxl-6 m-b-30">
<div className="card card-statistics h-100 mb-0">
<div className="card-header">
<h4 className="card-title">My Products</h4>
</div>
<div className="card-body pb-0">
<div className="row m-b-20">
<div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
<div className="d-flex align-items-center extraProductCard">
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
<i className="fa fa-cart-plus text-primary"></i>
</div>
<div className="report-details">
<p>Activate now</p>
<h4>Professional Website</h4>
</div>
</div>
</div>
<div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
<div className="d-flex align-items-center extraProductCard">
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
<i className="fa fa-cart-plus text-primary"></i>
</div>
<div className="report-details">
<p>Activate now</p>
<h4>Professional Blog</h4>
</div>
</div>
</div>
<div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
<div className="d-flex align-items-center extraProductCard">
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
<i className="fa fa-cart-plus text-primary"></i>
</div>
<div className="report-details">
<p>Activate now</p>
<h4>Business Website</h4>
</div>
</div>
</div>
<div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
<div className="d-flex align-items-center extraProductCard">
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
<i className="fa fa-cart-plus text-primary"></i>
</div>
<div className="report-details">
<p>Activate now</p>
<h4>Business Blog Site</h4>
</div>
</div>
</div>
<div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
<div className="d-flex align-items-center extraProductCard">
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
<i className="fa fa-cart-plus text-primary"></i>
</div>
<div className="report-details">
<p>Activate now</p>
<h4>OpenEmr </h4>
</div>
</div>
</div>
<div className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
<div className="d-flex align-items-center extraProductCard">
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
<i className="fa fa-cart-plus text-primary"></i>
</div>
<div className="report-details">
<p>Activate now</p>
<h4>Dummy</h4>
</div>
</div>
</div>
{/*<div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">*/}
{/* <div className="d-flex align-items-center">*/}
{/* <div className="icon-container img-icon m-r-20 bg-light-gray rounded">*/}
{/* <i className="fa fa-dollar text-primary"></i>*/}
{/* </div>*/}
{/* <div className="report-details">*/}
{/* <p>Annual Revenue</p>*/}
{/* <h3>$40,516</h3>*/}
{/* </div>*/}
{/* </div>*/}
{/*</div>*/}
</div>
<div className="apexchart-wrapper">
<div id="ecommerce5" className="chart-fit"></div>
</div>
</div>
</div>
<Products />
</div>
<div className="col-xxl-6 m-b-30">
<RecentActions />
src/component/home/Products.jsx
+71
View File
@@ -0,0 +1,71 @@
import { useQuery } from '@tanstack/react-query'
import React from 'react'
import { productData } from '../../services/services'
import queryKeys from '../../services/queryKeys'
export default function Products() {
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.product,
queryFn: () => productData()
})
const products = data?.data?.products_data?.products
return (
<>
<div className="card card-statistics h-100 mb-0">
<div className="card-header">
<h4 className="card-title">My Products</h4>
</div>
<div className="card-body pb-0">
{isFetching ?
<>
<div className="row">
<div className="col-12">
<p className='text-mute'>Loading...</p>
</div>
</div>
</>
: isError ?
<div className="row">
<div className="col-12">
<p className='text-danger'>{error.message}</p>
</div>
</div>
:
<div className="row m-b-20">
{products && products.map((product, index) => (
<div key={product.uid+index} className="col-xxs-6 col-xl-4 col-xxl-6 mb-2 mb-xxl-0 ">
<div className="d-flex align-items-center extraProductCard">
<div className="icon-container img-icon m-r-20 bg-light-gray rounded">
<i className="fa fa-cart-plus text-primary"></i>
</div>
<div className="report-details">
<p>{product?.status}</p>
<h4>{product?.description}</h4>
</div>
</div>
</div>
))}
{/*<div style={{backgroundColor: 'green'}} className="col-xxs-6 col-md-4 col-xxl-6 mb-2 mb-xxl-0">*/}
{/* <div className="d-flex align-items-center">*/}
{/* <div className="icon-container img-icon m-r-20 bg-light-gray rounded">*/}
{/* <i className="fa fa-dollar text-primary"></i>*/}
{/* </div>*/}
{/* <div className="report-details">*/}
{/* <p>Annual Revenue</p>*/}
{/* <h3>$40,516</h3>*/}
{/* </div>*/}
{/* </div>*/}
{/*</div>*/}
</div>
}
<div className="apexchart-wrapper">
<div id="ecommerce5" className="chart-fit"></div>
</div>
</div>
</div>
</>
)
}
src/component/home/RecentActions.jsx
+7 -5
View File
@@ -10,6 +10,8 @@ export default function RecentActions() {
queryFn: () => recentActions()
})
const actionData = dataAction?.data?.action_data
return (
<>
<div className="card card-statistics h-100 mb-0">
@@ -60,19 +62,19 @@ export default function RecentActions() {
<div className="row no-gutters">
<div className="col-6 col-xxs-3 ">
<p>Initial</p>
<h4>{dataAction?.data?.action_data?.initial}</h4>
<h4>{actionData?.initial}</h4>
</div>
<div className="col-6 col-xxs-3 ">
<p>Processing</p>
<h4>{dataAction?.data?.action_data?.processing}</h4>
<h4>{actionData?.processing}</h4>
</div>
<div className="col-6 col-xxs-3 ">
<p>Verifying</p>
<h4>{dataAction?.data?.action_data?.verifying}</h4>
<h4>{actionData?.verifying}</h4>
</div>
<div className="col-6 col-xxs-3 ">
<p>Completed</p>
<h4>{dataAction?.data?.action_data?.completed}</h4>
<h4>{actionData?.completed}</h4>
</div>
</div>
<div className="table-responsive m-t-20">
@@ -86,7 +88,7 @@ export default function RecentActions() {
</tr>
</thead>
<tbody className="text-muted">
{dataAction?.data?.action_data?.actions.map((action, index) => {
{actionData && actionData?.actions.map((action, index) => {
let bgColor = action?.status == 'completed' ? 'badge-success-inverse' : action?.status == 'verifying' ? 'badge-info-inverse' : action?.status == 'processing' ? 'badge-warning-inverse' : 'badge-primary-inverse'
return (
<tr key={index}>
src/services/queryKeys.js
+2 -1
View File
@@ -1,6 +1,7 @@
const queryKeys = {
dashboard: ['dashboard'],
recentAction: ['recent-action']
recentAction: ['recent-action'],
product: ['product-data']
}
export default queryKeys
src/services/services.js
+5
View File
@@ -60,3 +60,8 @@ export const accountDashboard = () => {
export const recentActions = () => {
return getAuxEnd(`/panel/account/actions`)
}
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
export const productData = () => {
return getAuxEnd(`/panel/account/products`)
}