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

header profile image bug fixed #119

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