Product page

src/component/home/Products.jsx

@@ -14,7 +14,7 @@ export default function Products() {
 
   return (
     <>
-        <div className="card card-statistics h-100 mb-0">
+        <div className="card card-statistics h-100 mb-0 panel_round_c1">
             <div className="card-header">
                 <h4 className="card-title">My Products</h4>
             </div>

src/component/home/RecentActions.jsx

@@ -14,7 +14,7 @@ export default function RecentActions() {
 
   return (
     <>
-        <div className="card card-statistics h-100 mb-0">
+        <div className="card card-statistics h-100 mb-0 panel_round_c2">
             <div className="card-header">
                 <div className="card-heading">
                     <h4 className="card-title">Recent Actions</h4>

src/component/product/ProductFactory.jsx

@@ -1,8 +1,11 @@
 import React from "react";
+import { useQuery } from '@tanstack/react-query'
 import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
 // import getImage from "../../utils/getImage";
 import ProductStart from "./ProductStart";
 import { useLocation } from 'react-router-dom';
+import {MyProductData, productData} from "../../services/services";
+import queryKeys from "../../services/queryKeys";
 
 export default function ProductFactory(){
     const location = useLocation();
@@ -12,6 +15,13 @@ export default function ProductFactory(){
     const lastPart = pathname.split('/').pop();
     console.log(lastPart)
 
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.product,
+        queryFn: () => MyProductData(lastPart)
+    })
+
+    const myproduct_data = data?.data?.myproduct_data
+
     return(
         <>
             <BreadcrumbComBS title='Name of the Product Here' paths={['Dashboard', 'Product']} />

src/css/style.scss

@@ -94,4 +94,12 @@
   text-align: center;
 }
 
+.panel_round_c1{
+  background-color: #e6f5f4;
+  border-radius: 10px;
+}
 
+.panel_round_c2{
+  background-color: #e3dfef;
+  border-radius: 10px;
+}

src/services/services.js

@@ -29,7 +29,7 @@ const postAuxEnd = (path, postData, media=false) => {
     })
 }
 
-const getAuxEnd = (path) => {
+const getAuxEnd = (path, reqData=[]) => {
     const basePath = process.env.REACT_APP_MAIN_API
     return axios.get(`${basePath}${path}`).then(res => {
         return res
@@ -65,3 +65,7 @@ export const recentActions = () => {
 export const productData = () => {
     return getAuxEnd(`/panel/account/products`)
 }
+
+export const MyProductData = () => {
+    return getAuxEnd(`/panel/myproduct/dash`)
+}