MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

Added dashboard payments endpoint #77

Merged
ameye merged 1 commits from payments-endpoint into master 2025-09-01 14:34:42 +00:00
Conversation 0 Commits 1 Files Changed 6
+139 -65
6 changed files with 139 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/contacts/Contacts.js
+18 -13
View File
@@ -47,7 +47,7 @@ export default function Contacts() {
if (id == "0") {
filteredConData = contactsData;
} else {
filteredConData = contactsData.filter((item) => item.category == `A00000${id}`);
filteredConData = contactsData.filter((item) => item.category == id);
}
setFiltererdContactData(filteredConData);
changeActiveUID(filteredConData[0]?.uid);
@@ -87,7 +87,7 @@ export default function Contacts() {
<div className="col-12">
<div
className="card card-statistics mail-contant"
style={{ minHeight: "550px", borderRadius: "10px" }}
style={{ minHeight: "200px", borderRadius: "10px" }}
>
<div className="card-body p-0">
<div className="row no-gutters">
@@ -197,20 +197,20 @@ export default function Contacts() {
</div>
</div>
</div>
<div className="col-md-8 col-xxl-4 border-md-t">
<div className="mail-content border-right border-n h-100">
<div className="mail-search border-bottom">
<div className={`${filteredContactData.length > 0 ? 'col-md-8 col-xxl-4' : 'col-md-8 col-xxl-10'} border-md-t`}>
<div className="mail-content border-right border-n h-100" style={{placeContent: 'center'}}>
{/* <div className="mail-search border-bottom">
<div className="row align-items-center mx-0">
<div className="col-12">
{/*<div className="form-group pt-3">*/}
{/* <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
{/* <i className="fa fa-search"></i>*/}
{/*</div>*/}
<div className="form-group pt-3">
<input type="text" className="form-control" id="search" placeholder="Search.." />
<i className="fa fa-search"></i>
</div>
</div>
</div>
</div>
</div> */}
<div className="mail-msg scrollbar scroll_dark">
{contactsData &&
{ filteredContactData.length ?
filteredContactData?.map((contact, index) => {
const isActive =
contact?.uid == activeContactUID ||
@@ -282,16 +282,20 @@ export default function Contacts() {
</a>
</div>
);
})}
})
:
<p className="text-center">Messages will appear here as soon as they are available for selection</p>
}
</div>
</div>
</div>
{filteredContactData.length > 0 &&
<div className="col-xxl-6 border-t border-xxl-t">
<div className="mail-chat py-5 px-5">
<div className="media align-items-center">
<div className="bg-img mr-3">
<img
src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : contactsData ? getImage("avtar/" + contactsData[0]?.category + ".png") : getImage("avtar/01.jpg")}
src={activeContactUID ? getImage("avtar/" + activeDetail[0].category + ".png") : getImage(filteredContactData[0] == undefined ? "avtar/01.jpg": "avtar/" + filteredContactData[0].category + ".png")}
className="img-fluid"
alt="user"
/>
@@ -333,6 +337,7 @@ export default function Contacts() {
</div>
</div>
</div>
}
</div>
</div>
</div>
src/component/home/DashPayments.jsx
+91
View File
@@ -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>
</>
)
}
src/component/home/HomeSections.jsx
+2 -35
View File
@@ -5,6 +5,7 @@ import Products from "./Products";
import TopBar from "./TopBar";
import ProductsURL from "./ProductsURL";
import { SocketContextValues } from "../context/SocketIOContext";
import DashPayments from "./DashPayments";
export default function HomeSections(){
@@ -52,41 +53,7 @@ export default function HomeSections(){
<div className="row">
<ProductsURL />
<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 className="dropdown">*/}
{/* <a className="p-2" href="#!" data-toggle="dropdown" aria-haspopup="true"*/}
{/* aria-expanded="false">*/}
{/* <i className="fe fe-circle"></i>*/}
{/* </a>*/}
{/* <div className="dropdown-menu custom-dropdown dropdown-menu-right p-4">*/}
{/* <h6 className="mb-1">Action</h6>*/}
{/* <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-o pr-2"></i>View*/}
{/* reports</a>*/}
{/* <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-edit pr-2"></i>Edit reports</a>*/}
{/* <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-bar-chart-o pr-2"></i>Statistics</a>*/}
{/* <h6 className="mb-1 mt-3">Export</h6>*/}
{/* <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-pdf-o pr-2"></i>Export*/}
{/* to PDF</a>*/}
{/* <a className="dropdown-item" href="#!"><i className="fa-fw fa fa-file-excel-o pr-2"></i>Export*/}
{/* to CSV</a>*/}
{/* </div>*/}
{/*</div>*/}
</div>
<div className="card-body">
{/*<h5>We only started collecting data from February 2019 </h5>*/}
{/*<p>Questions about the Net Earnings number? <a*/}
{/* className="btn btn-square btn-inverse-success btn-xs ml-1" href="#">Click here</a></p>*/}
<div className="row mt-4">
.
</div>
</div>
</div>
</div>
<DashPayments />
</div>
</>;
src/component/home/TopBar.jsx
+19 -17
View File
@@ -64,28 +64,30 @@ export default function TopBar() {
}
return (
<div key={item.id + index} className="col-sm-6 col-xxl-3">
<div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}>
<div className="card-body p-0">
<div className="d-flex m-b-0 ecommerce-contant-text h-100">
<div className="w-100">
<div className="row p-3">
<div className="col">
<h3 className="mb-0">{item?.value || 0}</h3>
<small className="d-block">{item?.extra_style ? dataSpan : item?.data_span}</small>
<div key={item.id + index} className="col-sm-6 col-xxl-3">
<Link to={item?.link}>
<div className={`card card-statistics ecommerce-contant overflow-h ${item?.extra_style} `} style={{borderRadius: '10px'}}>
<div className="card-body p-0">
<div className="d-flex m-b-0 ecommerce-contant-text h-100">
<div className="w-100">
<div className="row p-3">
<div className="col">
<h3 className="mb-0">{item?.value || 0}</h3>
<small className="d-block">{item?.extra_style ? dataSpan : item?.data_span}</small>
</div>
<div className="col text-right">
<h5 className="text-muted mb-0">{item?.description}</h5>
</div>
</div>
<div className="apexchart-wrapper">
<div id="ecommercedemo3" className="chart-fit"></div>
</div>
</div>
<div className="col text-right">
<h5 className="text-muted mb-0"><Link to={item?.link}>{item?.description}</Link></h5>
</div>
</div>
<div className="apexchart-wrapper">
<div id="ecommercedemo3" className="chart-fit"></div>
</div>
</div>
</div>
</div>
</Link>
</div>
</div>
)
})}
</>
src/services/queryKeys.js
+1
View File
@@ -1,6 +1,7 @@
const queryKeys = {
user_details: ['user_details'],
product_url: ['product_url'],
dash_payments: ['dash_payments'],
products: ['product-data'],
myproduct_provision: ['myproduct_provision'],
product_page: ['product_page'],
src/services/services.js
+8
View File
@@ -114,6 +114,14 @@ export const productsURL = (reqData) => {
return postAuxEnd(`/panel/account/products/url`, postData, false)
}
// FUNCTION TO GET DASHBOARD PRODUCT URL DATA SECTION
export const getDashPayments = (reqData) => {
let postData = {
...reqData,
}
return postAuxEnd(`/panel/account/payments`, postData, false)
}
// FUNCTION TO GET DASHBOARD PRODUCT DATA SECTION
export const productsData = (reqData) => {
let postData = {