victorAnumudu
89 lines
3.7 KiB
React
89 lines
3.7 KiB
React
import React from 'react'
|
|
import { getDashPayments } from '../../services/services'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import queryKeys from '../../services/queryKeys'
|
|
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
|
|
import getImage from '../../utils/getImage'
|
|
|
|
export default function DashPayments() {
|
|
|
|
|
|
const {data, isFetching, isError, error} = useQuery({
|
|
queryKey: queryKeys.dash_payments,
|
|
queryFn: () => {
|
|
let reqData = {
|
|
token: localStorage.getItem('token'), // USER TOKEN
|
|
uid: localStorage.getItem('uid') // USER UID
|
|
}
|
|
return getDashPayments(reqData)
|
|
}
|
|
})
|
|
|
|
const payments = data?.data?.member_payments
|
|
// console.log('data', payments)
|
|
|
|
return (
|
|
<>
|
|
<div className="col-xxl-4 m-b-30" style={{minHeight: '300px'}}>
|
|
<div className="card card-statistics h-100 mb-0 panel_round_c3">
|
|
<div className="card-header d-flex justify-content-between">
|
|
<div className="card-heading">
|
|
<h4 className="card-title">Payments</h4>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-y-auto card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
|
|
<div className="datatable-wrapper table-responsive">
|
|
{isFetching ?
|
|
<>
|
|
<div className="col-12">
|
|
<div className="p-4">
|
|
<p className='text-mute'>Loading...</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
: isError ?
|
|
<div className="col-12">
|
|
<div className="p-4">
|
|
<p className='text-danger'>{error.message}</p>
|
|
</div>
|
|
</div>
|
|
:
|
|
<table id="datatable" className="table table-borderless table-striped">
|
|
<thead>
|
|
<tr>
|
|
{/* <th style={{width: '30px'}}>#</th> */}
|
|
<th>Date</th>
|
|
|
|
<th style={{width: '130px'}}>Description</th>
|
|
<th style={{width: '80px'}}>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{payments.length > 0 ?
|
|
payments.map((item, index) => {
|
|
return (
|
|
<tr key={index}>
|
|
{/* <td>{Number(item?.id).toString().padStart(6,'0')}</td> */}
|
|
<td>
|
|
{getDateTimeFromDateString(item?.added)}
|
|
</td>
|
|
|
|
<td>{item?.option_name}</td>
|
|
<td className='text-right'>${item?.amount}</td>
|
|
</tr>
|
|
)
|
|
})
|
|
:
|
|
<td colSpan={3} className='text-center'>No record found</td>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|