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
+37 -38
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()
const navigate = useNavigate()
useEffect(() => { useEffect(() => {
if (!state?.memberUID) { if (!state?.memberUID) {
navigate(RouteLinks.homePage, {replace: true}) navigate(RouteLinks.homePage, { replace: true });
} }
},[navigate, state?.memberUID]) }, [navigate, state?.memberUID]);
const { data, isFetching, isError, error } = useQuery({ const { data, isFetching, isError, error } = useQuery({
queryKey: queryKeys.account_view, queryKey: queryKeys.account_view,
queryFn: () => { queryFn: () => {
// const filterData = filter?.type ? {[filter?.type]: filter.id} : {} // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
const reqData = { const reqData = {
member_uid: state?.memberUID member_uid: state?.memberUID,
// page, // page,
// ...filterData // ...filterData
} };
return getAccountView(reqData) return getAccountView(reqData);
}, },
staleTime: 0 //0 mins staleTime: 0, //0 mins
}) });
const accountsViewData = data?.data // ACCOUNT VIEW DATA const accountsViewData = data?.data; // ACCOUNT VIEW DATA
const account_info = accountsViewData?.account const account_info = accountsViewData?.account;
const account_profile = accountsViewData?.account_profile const account_profile = accountsViewData?.account_profile;
const subscriptions = accountsViewData?.subscriptions const subscriptions = accountsViewData?.subscriptions;
const payments = accountsViewData?.payments const payments = accountsViewData?.payments;
// console.log('DATA', payments, subscriptions)
useEffect(() => { useEffect(() => {
queryClient.refetchQueries({ queryClient.refetchQueries({
queryKey: [...queryKeys.account_view], queryKey: [...queryKeys.account_view],
// type: 'active', // type: 'active',
// exact: true, // exact: true,
}) });
},[queryClient, state?.memberUID]) }, [queryClient, state?.memberUID]);
return ( return (
<div className='w-full flex flex-col gap-8'> <div className="w-full flex flex-col gap-8">
<BreadcrumbCom title={`Account View [${state?.memberUID}]`} paths={['Dashboard', 'Account View']}/> <BreadcrumbCom
title={`Account View [${state?.memberUID}]`}
paths={["Dashboard", "Account View"]}
/>
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'> <div className="box bg-white dark:bg-black-box text-black-body dark:text-white-body">
{isFetching ? {isFetching ? (
<> <>
<p className='text-slate-800'>Loading...</p> <p className="text-slate-800">Loading...</p>
</> </>
: isError ? ) : isError ? (
<p className='text-red-500'>{error.message}</p> <p className="text-red-500">{error.message}</p>
: ) : (
<> <>
<CustomerAccountView accountInfo={account_info} /> <CustomerAccountView accountInfo={account_info} />
<AccountProfileView profile={account_profile} /> <AccountProfileView profile={account_profile} />
<CustomerSubscriptionsView subscriptions={subscriptions} /> <CustomerSubscriptionsView subscriptions={subscriptions} />
<CustomerPaymentsView payments={payments} /> <CustomerPaymentsView payments={payments} />
</> </>
)}
}
</div> </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