my product provision API added

src/component/product/ProductProvision.jsx

@@ -1,10 +1,38 @@
+import { useQuery } from "@tanstack/react-query";
+import queryKeys from "../../services/queryKeys";
+import { productProvision } from "../../services/services";
 import getImage from "../../utils/getImage";
 
 export default function ProductProvision(props){
     const productTitle  = props.productData?.title;
     const productDescription  = props.productData?.description;
+    const productID = props?.productData?.product_id
 
-    return <>
+    const {data:provision, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.myproduct_provision,
+        queryFn: () => productProvision(productID)
+    })
+
+    const provisionData = provision?.data?.provision
+
+    return (
+        <>
+            {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">
                         <div className="col-md-12">
                             <div className="card card-statistics">
@@ -16,7 +44,7 @@ export default function ProductProvision(props){
                                     <div className="card-body">
                                         <div className="progress">
                                             <div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
-                                aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style={{width:'75%'}} ></div>
+                                            aria-valuenow={`${provisionData.percent_completed}%`} aria-valuemin="0" aria-valuemax="100" style={{width:`${provisionData.percent_completed}%`}} ></div>
                                         </div>
                                 </div>
                             </div>
@@ -29,7 +57,6 @@ export default function ProductProvision(props){
                         </div>
                     </div>
                     <div className="row">
-
                         <div className="col-lg-6">
 
                             <div className="card card-statistics">
@@ -49,21 +76,13 @@ export default function ProductProvision(props){
                                             </tr>
                                             </thead>
                                             <tbody>
-                                <tr>
-                                    <th scope="row">1</th>
-                                    <td>Start Creation </td>
-
-                                </tr>
-                                <tr>
-                                    <th scope="row">2</th>
-                                    <td>Update Access Routes</td>
-
-                                </tr>
-                                <tr>
-                                    <th scope="row">3</th>
-                                    <td>Veryfing ...</td>
+                                                {provisionData?.url?.map(item => (
+                                                <tr key={item.id}>
+                                                    <th scope="row">{item.id}</th>
+                                                    <td>{item.action}</td>
 
                                                 </tr>
+                                                ))}
                                             </tbody>
                                         </table>
                                     </div>
@@ -83,8 +102,9 @@ export default function ProductProvision(props){
                             </div>
 
                         </div>
-
-
                     </div>
                 </>
             }
+        </>
+    )
+}

src/services/queryKeys.js

@@ -3,7 +3,8 @@ const queryKeys = {
     topBar: ['top-bar'],
     recentAction: ['recent-action'],
     product: ['product-data'],
-    product_url: ['product_url']
+    product_url: ['product_url'],
+    myproduct_provision: ['myproduct_provision']
 }
 
 export default queryKeys

src/services/services.js

@@ -106,6 +106,12 @@ export const recentActions = () => {
     return getAuxEnd(`/panel/account/actions`)
 }
 
+// FUNCTION TO GET MY PRODUCT PROVISION DATA
+export const productProvision = (productID) => {
+    const reqData = { product_id : productID}
+    return getAuxEnd(`/panel/myproduct/provision`,reqData)
+}
+
 // FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
 export const productData = () => {
     return getAuxEnd(`/panel/account/products`)