Account edit files

src/RouteLinks.js

@@ -3,6 +3,7 @@ const RouteLinks = {
     homePage: '/',
     customerPage: '/customer',
     accountDetails: '/account-view/*',
+    accountEdit:'/account-edit/*',
     subscriptionDetails: '/subscription-view/*',
     subscriptions: '/subscriptions',
     billings: '/billings',

src/SiteRoutes.jsx

@@ -24,7 +24,7 @@ import SubscriptionDetailsPage from "./pages/SubscriptionDetailsPage";
 import CountrySettingsPage from "./pages/CountrySettingsPage";
 import ProductViewPage from "./pages/ProductViewPage";
 import FilesUploadPage from "./pages/FilesUploadPage"; // TRANSACTION DETAILS PAGE
-
+import AccountEditpage from "./pages/AccountEditPage";
 
 // const Home = lazy(() => import('./pages/Home'));
 
@@ -39,6 +39,8 @@ export default function SiteRoutes() {
                 <Route path={RouteLinks.subscriptions} element={<SubscriptionsPage/>}/> {`*/SUBSCRIPTIONS PAGE*/`}
                 <Route path={RouteLinks.customerPage} element={<CustomerPage/>}/> {`*/CUSTOMER PAGE*/`}
                 <Route path={RouteLinks.accountDetails} element={<AccountDetailsPage/>}/> {`*/CUSTOMER PAGE*/`}
+                <Route path={RouteLinks.accountEdit} element={<AccountEditpage/>}/> {`*/CUSTOMER EDIT PAGE*/`}
+                
                 <Route path={RouteLinks.billings} element={<BillingsPage/>}/> {`*/BILLINGS PAGE*/`}
                 <Route path={RouteLinks.products} element={<ProductsPage/>}/> {`*/PRODUCTS PAGE*/`}
                 <Route path={RouteLinks.productView} element={<ProductViewPage/>}/> {`*/PRODUCTS VIEW PAGE*/`}

src/components/account_edit/AccountEditCom.jsx

@@ -0,0 +1,79 @@
+import { useEffect } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { useLocation, useNavigate } from "react-router-dom";
+
+import BreadcrumbCom from "../breadcrumb/BreadcrumbCom";
+import RouteLinks from "../../RouteLinks";
+import { getAccountView } from "../../services/siteServices";
+import queryKeys from "../../services/queryKeys";
+// import CustomerAccountView from "./CustomerAccountView";
+// import AccountProfileView from "./AccountProfileView";
+// import CustomerSubscriptionsView from "./CustomerSubscriptionsView";
+// import CustomerPaymentsView from "./CustomerPaymentsView";
+
+export default function AccountEditCom() {
+  const queryClient = useQueryClient();
+
+  const { state } = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!state?.memberUID) {
+      navigate(RouteLinks.homePage, { replace: true });
+    }
+  }, [navigate, state?.memberUID]);
+
+  const { data, isFetching, isError, error } = useQuery({
+    queryKey: queryKeys.account_view,
+    queryFn: () => {
+      // const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+      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;
+
+  useEffect(() => {
+    queryClient.refetchQueries({
+      queryKey: [...queryKeys.account_view],
+      // type: 'active',
+      // exact: true,
+    });
+  }, [queryClient, state?.memberUID]);
+
+  return (
+    <div className="w-full flex flex-col gap-8">
+      <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">
+        {isFetching ? (
+          <>
+            <p className="text-slate-800">Loading...</p>
+          </>
+        ) : isError ? (
+          <p className="text-red-500">{error.message}</p>
+        ) : (
+          <>
+            {/* <CustomerAccountView accountInfo={account_info} />
+            <AccountProfileView profile={account_profile} />
+            <CustomerSubscriptionsView subscriptions={subscriptions} />
+            <CustomerPaymentsView payments={payments} /> */}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/account_view/CustomerAccountView.jsx

@@ -71,8 +71,7 @@ export default function CustomerAccountView({accountInfo}) {
                                         <div className='flex items-center justify-end gap-3 md:gap-4'>
                                             <div
                                                 className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'>
-                                                <Link 
+                                                <Link to={`/account-edit/${accountInfo?.uid}`}
-                                                    // to={`/subscription-view/63554d40-9ba1-4afe-80c2-ca147236f7ee`}
                                                 >
                                                     <Icons name='eye'/>
                                                 </Link>

src/components/layouts/rightaside/RecentPaymentsBar.jsx

@@ -1,86 +1,143 @@
-import React from 'react'
+import React from "react";
-import {Link} from 'react-router-dom'
+import { Link } from "react-router-dom";
-import Img from '../../../assets/user_avatar.jpg'
+import Img from "../../../assets/user_avatar.jpg";
-import CustomCounter from '../../CustomCounter'
+import CustomCounter from "../../CustomCounter";
 
-export default function RecentPaymentsBar({data, isFetching, isError, error}) {
+export default function RecentPaymentsBar({
-    
+  data,
-    const recentPayment = data?.data?.recent_payment_summary
+  isFetching,
-    const recentLogin = data?.data?.recent_login
+  isError,
+  error,
+}) {
+  const recentPayment = data?.data?.recent_payment_summary;
+  const recentLogin = data?.data?.recent_login;
+  const systemList = data?.data?.system_url;
 
-    return (
+
-        <div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 aside-scroll-design'>
+  return (
-            <div className='flex flex-col gap-4'>
+    <div className="h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 aside-scroll-design">
-                <p className='text-base text-white-body font-bold'>Recent Payments [7 days]</p>
+      <div className="flex flex-col gap-4">
-                {isFetching ?
+        <p className="text-base text-white-body font-bold">
-                <div className='w-full flex justify-center'>
+          Recent Payments [7 days]
-                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+        </p>
-                </div>
+        {isFetching ? (
-                :
+          <div className="w-full flex justify-center">
-                isError ?
+            <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
-                <p className='text-base text-white-body font-bold'>{error?.message}</p>
+          </div>
-                :
+        ) : isError ? (
-                <div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
+          <p className="text-base text-white-body font-bold">
-                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+            {error?.message}
-                        <p className='text-base font-bold text-white-body'>
+          </p>
-                            <CustomCounter targetNumber={recentPayment?.approved} timeInSeconds={1} />
+        ) : (
-                        </p>
+          <div className="grid grid-cols-2 gap-4 sm:gap-6 large:gap-8">
-                        <p className='text-sm text-slate-500'>Approved</p>
+            <div className="p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed">
-                    </div>
+              <p className="text-base font-bold text-white-body">
-                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
+                <CustomCounter
-                        <p className='text-base font-bold text-white-body'>
+                  targetNumber={recentPayment?.approved}
-                            <CustomCounter targetNumber={recentPayment?.verified} timeInSeconds={1} />
+                  timeInSeconds={1}
-                        </p>
+                />
-                        <p className='text-sm text-slate-500'>Verified</p>
+              </p>
-                    </div>
+              <p className="text-sm text-slate-500">Approved</p>
-                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
-                        <p className='text-base font-bold text-white-body'>
-                            <CustomCounter targetNumber={recentPayment?.failed} timeInSeconds={1} />
-                        </p>
-                        <p className='text-sm text-slate-500'>Failed</p>
-                    </div>
-                    <div className='p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed'>
-                        <p className='text-base font-bold text-white-body'>
-                            <CustomCounter targetNumber={recentPayment?.total} timeInSeconds={1} />
-                        </p>
-                        <p className='text-sm text-slate-500'>Total</p>
-                    </div>
-                </div>
-                }
             </div>
-            <div className='overflow-y-auto h-full flex flex-col gap-4'>
+            <div className="p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed">
-                <p className='text-base text-white-body font-bold'>Recent Login</p>
+              <p className="text-base font-bold text-white-body">
-                {isFetching ?
+                <CustomCounter
-                <div className='w-full flex justify-center'>
+                  targetNumber={recentPayment?.verified}
-                    <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+                  timeInSeconds={1}
-                </div>
+                />
-                :
+              </p>
-                isError ?
+              <p className="text-sm text-slate-500">Verified</p>
-                <p className='text-base text-white-body font-bold'>{error?.message}</p>
-                :
-                <div className='flex flex-col gap-4'>
-                    {recentLogin.map((item, index)=> {
-                        return (
-                            <Link 
-                                to={`/account-view/${item?.member_uid}`}
-                                state={{customerID: item?.id, memberUID: item?.member_uid}} 
-                                key={index} 
-                                className='flex gap-3 items-center'
-                            >
-                                <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                                    <img src={Img} className='w-8' alt="Order" />
-                                </div>
-                                <div className='flex-col'>
-                                    <p className='text-base font-bold text-white-body'>{item.firstname} {item.lastname}</p>
-                                    <p className='text-sm text-slate-500'>{item.username}</p>
-                                </div>
-                            </Link>
-                        )
-                    }
-                    )}
-                </div>
-                }
             </div>
-        </div>
+            <div className="p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed">
-    )
+              <p className="text-base font-bold text-white-body">
+                <CustomCounter
+                  targetNumber={recentPayment?.failed}
+                  timeInSeconds={1}
+                />
+              </p>
+              <p className="text-sm text-slate-500">Failed</p>
+            </div>
+            <div className="p-2 sm:p-3 large:p-4 flex flex-col border border-slate-500 border-dashed">
+              <p className="text-base font-bold text-white-body">
+                <CustomCounter
+                  targetNumber={recentPayment?.total}
+                  timeInSeconds={1}
+                />
+              </p>
+              <p className="text-sm text-slate-500">Total</p>
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="overflow-y-auto h-full flex flex-col gap-4">
+        <p className="text-base text-white-body font-bold">Systems</p>
+        {isFetching ? (
+          <div className="w-full flex justify-center">
+            <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+          </div>
+        ) : isError ? (
+          <p className="text-base text-white-body font-bold">
+            {error?.message}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {systemList.map((item, index) => {
+              return (
+                <Link
+                  to={item.url}
+                  key={index}
+                  className="flex gap-3 items-center"
+                >
+                  <div className="px-4 py-2 bg-[#0E172E] rounded-md">
+                    <img src={Img} className="w-8" alt="Order" />
+                  </div>
+                  <div className="flex-col">
+                    <p className="text-base font-bold text-white-body">
+                      {item.name} 
+                    </p>
+                    <p className="text-sm text-slate-500">{item.url}</p>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div className="overflow-y-auto h-full flex flex-col gap-4">
+        <p className="text-base text-white-body font-bold">Recent Login</p>
+        {isFetching ? (
+          <div className="w-full flex justify-center">
+            <div className="w-6 h-6 border-2 border-gray-300 border-b-gray-500 rounded-full animate-spin"></div>
+          </div>
+        ) : isError ? (
+          <p className="text-base text-white-body font-bold">
+            {error?.message}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {recentLogin.map((item, index) => {
+              return (
+                <Link
+                  to={`/account-view/${item?.member_uid}`}
+                  state={{ customerID: item?.id, memberUID: item?.member_uid }}
+                  key={index}
+                  className="flex gap-3 items-center"
+                >
+                  <div className="px-4 py-2 bg-[#0E172E] rounded-md">
+                    <img src={Img} className="w-8" alt="Order" />
+                  </div>
+                  <div className="flex-col">
+                    <p className="text-base font-bold text-white-body">
+                      {item.firstname} {item.lastname}
+                    </p>
+                    <p className="text-sm text-slate-500">{item.username}</p>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }

src/pages/AccountEditPage.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import AccountEditCom from "../components/account_edit/AccountEditCom";
+export default function AccountEditPage() {
+    return (
+        <AccountEditCom />
+    )
+}