victorAnumudu
90 lines
3.9 KiB
React
90 lines
3.9 KiB
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() {
|
|
|
|
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)
|
|
},
|
|
staleTime: 0
|
|
})
|
|
|
|
// console.log('DATA', data?.data)
|
|
const productReportData = data?.data?.product || []
|
|
|
|
return (
|
|
<>
|
|
|
|
<div className="row">
|
|
<div className="col-md-12 m-b-30">
|
|
<div className="d-block d-sm-flex flex-nowrap align-items-center">
|
|
<div className="page-title mb-2 mb-sm-0">
|
|
<h4>Products Report</h4>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<div className="export-table-wrapper table-responsive">
|
|
<table id="export-table" className="table table-bordered">
|
|
<thead className="thead-light">
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Added</th>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{productReportData.length > 0 ? productReportData.map((item, index) => {
|
|
return (
|
|
<tr key={index}>
|
|
<td>{item?.product_id}</td>
|
|
<td>{item?.added}</td>
|
|
<td>{item?.product_name}</td>
|
|
<td>{item?.status}</td>
|
|
</tr>
|
|
)
|
|
})
|
|
:
|
|
<tr>
|
|
<td colSpan={4} className='text-center'>No data found</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</>
|
|
)
|
|
} |