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>
-
-    </>)
+    </>
+    )
 }