added dashboard payments endpoint

2025-09-01 15:28:47 +01:00
parent aae69ffd3b
commit be6dab1ec9
6 changed files with 139 additions and 65 deletions
@@ -0,0 +1,91 @@
+import React from 'react'
+import { getDashPayments } from '../../services/services'
+import { useQuery } from '@tanstack/react-query'
+import queryKeys from '../../services/queryKeys'
+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
+    // 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="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'}}>Subscription</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>
+                                                <a className="mr-3" href={externalUrl} target='_blank'><b>{externalUrl}</b></a> -  {item?.description}
+                                            </td>
+
+                                            <td><span className={`badge ${statusColor}`}>{statusText}</span></td>
+                                            <td>
+                                                <a className="mr-3" href={productUrl}>
+                                                    <img src={getImage('arrow-next.png')} alt='next' />
+                                                </a>
+                                            </td>
+                                        </tr>
+                                    )
+                                })
+                                :
+                                    <td colSpan={3} className='text-center'>No record found</td>
+                                }
+                            </tbody>
+                        </table>
+                    }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+  )
+}