CHIEFSOFT\ameye
75 lines
3.1 KiB
React
75 lines
3.1 KiB
React
import { useQuery } from '@tanstack/react-query'
|
|
import React from 'react'
|
|
import { productData } from '../../services/services'
|
|
import queryKeys from '../../services/queryKeys'
|
|
import productPath from "../../utils/productpath";
|
|
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 panel_round_c1">
|
|
<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 ">
|
|
<a href={productPath(product?.uid)} >
|
|
<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>
|
|
</a>
|
|
|
|
</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>
|
|
</>
|
|
)
|
|
}
|