added endpoint for payment, product and system reports

src/component/reports/PaymentReportTable.jsx

@@ -1,7 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getPaymentReports } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
 
 export default function PaymentReportTable() {
-    return (<>
+
+    const [page, setPage] = useState(0)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.payment_report, page],
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                page
+            }
+            return getPaymentReports(reqData)
+        }
+    })
+
+    console.log('DATA', data?.data)
+    return (
+    <>
         <div className="row">
             <div className="col-md-12 m-b-30">
                 <div className="d-block d-sm-flex flex-nowrap align-items-center">
@@ -12,6 +32,17 @@ export default function PaymentReportTable() {
             </div>
         </div>
         <div className="row">
+            {isFetching ? 
+            <>
+                <div className="col-12">
+                    <p className='text-mute'>Loading...</p>
+                </div>
+            </>
+            : isError ?
+            <div className="col-12">
+                <p className='text-danger'>{error?.message}</p>
+            </div>
+            :
             <div className="col-lg-12">
                 <div className="card card-statistics">
                     <div className="card-body">
@@ -164,7 +195,8 @@ export default function PaymentReportTable() {
                     </div>
                 </div>
             </div>
-        </div>
-
-    </>)
+            }
+        </div>
+    </>
+    )
 }

src/component/reports/ProductReportTable.jsx

@@ -1,7 +1,28 @@
-import React from "react";
+import React, { useState }  from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getProductReports } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
 
 export default function ProductReportTable() {
-    return (<>
+
+    const [page, setPage] = useState(0)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.product_report, page],
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                page
+            }
+            return getProductReports(reqData)
+        }
+    })
+
+    console.log('DATA', data?.data)
+
+    return (
+    <>
 
         <div className="row">
             <div className="col-md-12 m-b-30">
@@ -14,6 +35,17 @@ export default function ProductReportTable() {
         </div>
 
         <div className="row">
+            {isFetching ? 
+                <>
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </>
+                : isError ?
+                <div className="col-12">
+                    <p className='text-danger'>{error?.message}</p>
+                </div>
+                :
                 <div className="col-lg-12">
                     <div className="card card-statistics">
                         <div className="card-body">
@@ -166,7 +198,8 @@ export default function ProductReportTable() {
                         </div>
                     </div>
                 </div>
-        </div>
-
-    </>)
+            }
+        </div>
+    </>
+    )
 }

src/component/reports/Reports.jsx

@@ -36,6 +36,17 @@ export default function Reports() {
         <>
             <BreadcrumbComBS title='Reports' paths={['Dashboard', 'Reports']}/>
             <div className="row">
+            {isFetching ? 
+            <>
+                <div className="col-12">
+                    <p className='text-mute'>Loading...</p>
+                </div>
+            </>
+            : isError ?
+            <div className="col-12">
+                <p className='text-danger'>{error?.message}</p>
+            </div>
+            :
             <div>
                 <div>
                     <div className="card card-statistics" style={{minHeight: '550px'}}>
@@ -75,6 +86,7 @@ export default function Reports() {
                     </div>
                 </div>
             </div>
+            }
             </div>
         </>
     )

src/component/reports/SystemReportTable.jsx

@@ -1,7 +1,28 @@
-import React from "react";
+import React, { useState }  from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getSystemReports } from "../../services/services";
+import queryKeys from "../../services/queryKeys";
 
 export default function SystemReportTable() {
-    return (<>
+
+    const [page, setPage] = useState(0)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.system_report, page],
+        queryFn: () => {
+            let reqData = {
+                token: localStorage.getItem('token'), // USER TOKEN
+                uid: localStorage.getItem('uid'), // USER UID
+                page
+            }
+            return getSystemReports(reqData)
+        },
+    })
+
+    console.log('DATA', data?.data)
+
+    return (
+    <>
 
         <div className="row">
             <div className="col-md-12 m-b-30">
@@ -14,6 +35,17 @@ export default function SystemReportTable() {
         </div>
 
         <div className="row">
+            {isFetching ? 
+                <>
+                    <div className="col-12">
+                        <p className='text-mute'>Loading...</p>
+                    </div>
+                </>
+                : isError ?
+                <div className="col-12">
+                    <p className='text-danger'>{error?.message}</p>
+                </div>
+                :
                 <div className="col-lg-12">
                     <div className="card card-statistics">
                         <div className="card-body">
@@ -166,7 +198,8 @@ export default function SystemReportTable() {
                         </div>
                     </div>
                 </div>
-        </div>
-
-    </>)
+            }
+        </div>
+    </>
+    )
 }

src/services/queryKeys.js

@@ -13,6 +13,9 @@ const queryKeys = {
     profile_data: ['profile_data'],
     my_files: ['my_files'],
     topics: ['topics'],
+    payment_report: ['payment_report'],
+    product_report: ['product_report'],
+    system_report: ['system_report'],
     
     dashboard: ['dashboard'],
     topBar: ['top-bar'],

src/services/services.js

@@ -297,6 +297,30 @@ export const getReportsTopicsList = (reqData) => {
     return postAuxEnd(`/panel/report/topics`, postData, false)
 }
 
+// FUNCTION TO GET PAYMENT REPORTS
+export const getPaymentReports = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/item/payment`, postData, false)
+}
+
+// FUNCTION TO GET PRODUCT REPORTS
+export const getProductReports = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/item/product`, postData, false)
+}
+
+// FUNCTION TO GET SYSTEM REPORTS
+export const getSystemReports = (reqData) => {
+    let postData = {
+        ...reqData,
+    }
+    return postAuxEnd(`/panel/report/item/system`, postData, false)
+}
+
 // FUNCTION TO GET COMMON PRACTICE
 export const getCommonPractice = (reqData) => {
     let postData = {