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

Merge branch 'header-profile-image' of MERMS/MermsPanelReactJS into master

Browse Source
This commit is contained in:
Olusesan Ameye
2026-02-16 11:27:02 +00:00
committed by Gogs
parent 7628a561f8 a11f5100ba
commit f5c798c6c1
6 changed files with 84 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/reports/PaymentReportTable.jsx
+21 -15
View File
@@ -16,10 +16,13 @@ export default function PaymentReportTable() {
page
}
return getPaymentReports(reqData)
}
},
staleTime: 0
})
console.log('DATA', data?.data)
// console.log('DATA', data?.data)
const paymentReportData = data?.data?.payment || []
return (
<>
<div className="row">
@@ -57,18 +60,21 @@ export default function PaymentReportTable() {
</tr>
</thead>
<tbody>
<tr>
<td>Sat, 30 Aug 2025 06:18:31 GMT</td>
<td>STATRTER001</td>
<td> $5.99</td>
<td>1</td>
</tr>
<tr>
<td>Sat, 30 Aug 2025 06:18:31 GMT</td>
<td>STATRTER001</td>
<td> $5.99</td>
<td>1</td>
</tr>
{paymentReportData.length > 0 ? paymentReportData.map((item, index) => {
return (
<tr key={index}>
<td>{item?.added}</td>
<td>{item?.name}</td>
<td>{item?.amount}</td>
<td>{item?.status}</td>
</tr>
)
})
:
<tr>
<td colSpan={4} className='text-center'>No data found</td>
</tr>
}
</tbody>
</table>
@@ -80,4 +86,4 @@ export default function PaymentReportTable() {
</div>
</>
)
}
}
src/component/reports/ProductReportTable.jsx
+19 -18
View File
@@ -16,10 +16,12 @@ export default function ProductReportTable() {
page
}
return getProductReports(reqData)
}
},
staleTime: 0
})
console.log('DATA', data?.data)
// console.log('DATA', data?.data)
const productReportData = data?.data?.product || []
return (
<>
@@ -60,23 +62,22 @@ export default function ProductReportTable() {
</tr>
</thead>
<tbody>
<tr>
<td>A000002</td>
<td>Sun, 13 Jul 2025 15:02:57 GMT</td>
<td>Name for - A000001</td>
<td>7</td>
</tr>
<tr>
<td>A000002</td>
<td>Sun, 13 Jul 2025 15:02:57 GMT</td>
<td>Name for - A000001</td>
<td>7</td>
</tr>
{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>
src/component/reports/Reports.jsx
+12 -5
View File
@@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import {useQuery} from "@tanstack/react-query";
import queryKeys from "../../services/queryKeys";
@@ -11,6 +11,8 @@ import SystemReportTable from "./SystemReportTable";
export default function Reports() {
const [activeTab, setActiveTab] = useState('payment')
const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.topics,
queryFn: () => {
@@ -49,7 +51,7 @@ export default function Reports() {
:
<div>
<div>
<div className="card card-statistics" style={{minHeight: '550px'}}>
<div className="card card-statistics" style={{minHeight: '500px'}}>
{/*<div className="card-header">*/}
{/* <div className="card-heading">*/}
{/* <h4 className="card-title"> Tab vertical </h4>*/}
@@ -62,7 +64,7 @@ export default function Reports() {
<ul className="nav nav-tabs" id="myTab" role="tablist">
{sortedReportTopicList && sortedReportTopicList.map((item, index) => {
return (
<li key={index} className="nav-item" role="presentation">
<li key={index} className="nav-item" role="presentation" onClick={() => setActiveTab(item?.url)}>
<a className={`nav-link ${index == 0 && 'active'}`} id={`tab-${item?.url}`} href="#" data-bs-toggle="tab" data-bs-target={`#content-${item?.url}`} type="button" role="tab">
{item?.name}
</a>
@@ -72,14 +74,19 @@ export default function Reports() {
</ul>
{/* <!-- Tab Content --> */}
<div className="tab-content">
{/* <div className="tab-content">
{sortedReportTopicList && sortedReportTopicList.map((item, index) => {
return (
<div key={index} className={`tab-pane fade show ${index == 0 && 'active'}`} id={`content-${item?.url}`} role="tabpanel">
<div key={index} className={`tab-pane fade show ${index == 0 && 'active'}`} id={`content-${item?.url}`} role="tabpanel" style={{minHeight: '400px'}}>
{renderedTable[item?.url]}
</div>
)
})}
</div> */}
<div className="tab-content">
<div className={`tab-pane fade show active`} style={{minHeight: '400px'}}>
{renderedTable[activeTab]}
</div>
</div>
</div>
</div>
src/component/reports/SystemReportTable.jsx
+18 -13
View File
@@ -17,9 +17,11 @@ export default function SystemReportTable() {
}
return getSystemReports(reqData)
},
staleTime: 0
})
console.log('DATA', data?.data)
// console.log('DATA', data?.data)
const systemReportData = data?.data?.system || []
return (
<>
@@ -60,18 +62,21 @@ export default function SystemReportTable() {
</tr>
</thead>
<tbody>
<tr>
<td>Sun, 15 Feb 2026 10:52:01 GMT</td>
<td>Systems Status Checks</td>
<td>processing</td>
<td>Sun, 15 Feb 2026 09:26:02 GMT</td>
</tr>
<tr>
<td>Sun, 15 Feb 2026 10:52:01 GMT</td>
<td>Systems Status Checks</td>
<td>processing</td>
<td>Sun, 15 Feb 2026 09:26:02 GMT</td>
</tr>
{systemReportData.length > 0 ? systemReportData.map((item, index) => {
return (
<tr key={index}>
<td>{item?.added}</td>
<td>{item?.action_name}</td>
<td>{item?.status_description}</td>
<td>{item?.updated}</td>
</tr>
)
})
:
<tr>
<td colSpan={4} className='text-center'>No data found</td>
</tr>
}
</tbody>
</table>
</div>
src/component/settings/ProfileImage.jsx
+13 -6
View File
@@ -1,17 +1,21 @@
import React, { memo, useRef, useState } from 'react'
// import { useSelector } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import getImage from '../../utils/getImage';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { uploadProfileImg } from '../../services/services';
import queryKeys from '../../services/queryKeys';
import { updateUserDetails } from '../../store/UserDetails'
const ProfileImage = memo(({intialData}) => {
const dispatch = useDispatch()
const queryClient = useQueryClient()
const [selectedImg, setSelectedImg] = useState(null)
// const {userDetails} = useSelector((state) => state?.userDetails); // CHECKS FOR ACTIVE USER DETAILS
const avtarImage = "avtar/merms-user.png";
// browser profile img
@@ -32,17 +36,20 @@ const ProfileImage = memo(({intialData}) => {
return uploadProfileImg(fields)
},
onSuccess: (res) => {
console.log('res', res)
if(res?.data?.picture){
dispatch(updateUserDetails({ picture: res?.data?.picture }));
}
// if(res.data.resultCode != '0'){
// throw({message: res?.data?.resultDescription ? res?.data?.resultDescription : 'An error occured'})
// }
// const account_name = res?.data?.personal_data?.account_name
// dispatch(updateUserDetails({ account_name }));
},
onSettled: ()=>{
setTimeout(() => {
queryClient.refetchQueries({
queryKey: [...queryKeys.profile_data], // type: 'active', // exact: true,
})
// queryClient.refetchQueries({
// queryKey: [...queryKeys.profile_data], // type: 'active', // exact: true,
// })
uploadProfileMutation.reset()
}, 3000);
}
@@ -95,7 +102,7 @@ const ProfileImage = memo(({intialData}) => {
{selectedImg &&
<div>
<button onClick={proceedToUpload} disabled={uploadProfileMutation.isSuccess || uploadProfileMutation.isPending} className="btn btn-light text-primary mb-2">
{uploadProfileMutation.isPaused ? 'Upload...' : 'Upload New Avatar'}
{uploadProfileMutation.isPending ? 'Upload...' : 'Upload New Avatar'}
</button>
</div>
}
src/store/UserDetails.js
+1 -1
View File
@@ -9,7 +9,7 @@ export const userSlice = createSlice({
initialState,
reducers: {
updateUserDetails: (state, action) => {
state.userDetails = { ...action.payload };
state.userDetails = { ...state.userDetails, ...action.payload };
},
},
});