added products API

2024-12-12 22:01:19 +01:00
parent 03af1d8887
commit 2cf501dd2e
5 changed files with 87 additions and 100 deletions
@@ -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>
+    </>
+  )
+}