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

Added country

Browse Source
This commit is contained in:
Olusesan Ameye
2026-04-29 11:27:55 -04:00
parent fc38378210
commit ae0500a799
2 changed files with 73 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/account_view/AccountViewCom.jsx
+65 -66
View File
@@ -1,80 +1,79 @@
import {useEffect} from 'react' import { useEffect } from "react";
import { useQuery, useQueryClient } from '@tanstack/react-query' import { useQuery, useQueryClient } from "@tanstack/react-query";
import {useLocation, useNavigate} from 'react-router-dom' import { useLocation, useNavigate } from "react-router-dom";
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' import BreadcrumbCom from "../breadcrumb/BreadcrumbCom";
import RouteLinks from '../../RouteLinks' import RouteLinks from "../../RouteLinks";
import { getAccountView } from '../../services/siteServices' import { getAccountView } from "../../services/siteServices";
import queryKeys from '../../services/queryKeys' import queryKeys from "../../services/queryKeys";
import CustomerAccountView from "./CustomerAccountView"; import CustomerAccountView from "./CustomerAccountView";
import AccountProfileView from "./AccountProfileView"; import AccountProfileView from "./AccountProfileView";
import CustomerSubscriptionsView from "./CustomerSubscriptionsView"; import CustomerSubscriptionsView from "./CustomerSubscriptionsView";
import CustomerPaymentsView from "./CustomerPaymentsView"; import CustomerPaymentsView from "./CustomerPaymentsView";
export default function AccountViewCom() { export default function AccountViewCom() {
const queryClient = useQueryClient();
const queryClient = useQueryClient() const { state } = useLocation();
const navigate = useNavigate();
const {state} = useLocation() useEffect(() => {
const navigate = useNavigate() if (!state?.memberUID) {
navigate(RouteLinks.homePage, { replace: true });
}
}, [navigate, state?.memberUID]);
useEffect(()=>{ const { data, isFetching, isError, error } = useQuery({
if(!state?.memberUID){ queryKey: queryKeys.account_view,
navigate(RouteLinks.homePage, {replace: true}) queryFn: () => {
} // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
},[navigate, state?.memberUID]) const reqData = {
member_uid: state?.memberUID,
// page,
// ...filterData
};
return getAccountView(reqData);
},
staleTime: 0, //0 mins
});
const accountsViewData = data?.data; // ACCOUNT VIEW DATA
const account_info = accountsViewData?.account;
const account_profile = accountsViewData?.account_profile;
const subscriptions = accountsViewData?.subscriptions;
const payments = accountsViewData?.payments;
const {data, isFetching, isError, error} = useQuery({ useEffect(() => {
queryKey: queryKeys.account_view, queryClient.refetchQueries({
queryFn: () => { queryKey: [...queryKeys.account_view],
// const filterData = filter?.type ? {[filter?.type]: filter.id} : {} // type: 'active',
const reqData = { // exact: true,
member_uid: state?.memberUID });
// page, }, [queryClient, state?.memberUID]);
// ...filterData
}
return getAccountView(reqData)
},
staleTime: 0 //0 mins
})
const accountsViewData = data?.data // ACCOUNT VIEW DATA
const account_info = accountsViewData?.account
const account_profile = accountsViewData?.account_profile
const subscriptions = accountsViewData?.subscriptions
const payments = accountsViewData?.payments
// console.log('DATA', payments, subscriptions)
useEffect(()=>{ return (
queryClient.refetchQueries({ <div className="w-full flex flex-col gap-8">
queryKey: [...queryKeys.account_view], <BreadcrumbCom
// type: 'active', title={`Account View [${state?.memberUID}]`}
// exact: true, paths={["Dashboard", "Account View"]}
}) />
},[queryClient, state?.memberUID])
return ( <div className="box bg-white dark:bg-black-box text-black-body dark:text-white-body">
<div className='w-full flex flex-col gap-8'> {isFetching ? (
<BreadcrumbCom title={`Account View [${state?.memberUID}]`} paths={['Dashboard', 'Account View']}/> <>
<p className="text-slate-800">Loading...</p>
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'> </>
{isFetching ? ) : isError ? (
<> <p className="text-red-500">{error.message}</p>
<p className='text-slate-800'>Loading...</p> ) : (
</> <>
: isError ? <CustomerAccountView accountInfo={account_info} />
<p className='text-red-500'>{error.message}</p> <AccountProfileView profile={account_profile} />
: <CustomerSubscriptionsView subscriptions={subscriptions} />
<> <CustomerPaymentsView payments={payments} />
<CustomerAccountView accountInfo={account_info} /> </>
<AccountProfileView profile={account_profile} /> )}
<CustomerSubscriptionsView subscriptions={subscriptions} /> </div>
<CustomerPaymentsView payments={payments} /> </div>
</> );
}
}
</div>
</div>
)
}
src/components/account_view/CustomerAccountView.jsx
+8 -2
View File
@@ -26,7 +26,9 @@ export default function CustomerAccountView({accountInfo}) {
<th scope="col" className="px-2"> <th scope="col" className="px-2">
Email Email
</th> </th>
<th scope="col" className="px-2">
Country
</th>
<th scope="col" className="px-2 text-right"> <th scope="col" className="px-2 text-right">
Action Action
</th> </th>
@@ -60,7 +62,11 @@ export default function CustomerAccountView({accountInfo}) {
<div className="text-base font-semibold">{accountInfo?.email}</div> <div className="text-base font-semibold">{accountInfo?.email}</div>
</div> </div>
</td> </td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{accountInfo?.country}</div>
</div>
</td>
<td className="px-2 text-right"> <td className="px-2 text-right">
<div className='flex items-center justify-end gap-3 md:gap-4'> <div className='flex items-center justify-end gap-3 md:gap-4'>
<div <div