From 7a42cd5c6567c0c8e037ac377c34ca685e23e896 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Sun, 28 Sep 2025 06:54:04 +0100 Subject: [PATCH] account view subscription table added --- src/RouteLinks.js | 1 + src/SiteRoutes.jsx | 2 + .../account_view/AccountViewCom.jsx | 15 +- .../account_view/CustomerAccountView.jsx | 114 ++++++++----- .../account_view/CustomerPaymentsView.jsx | 103 +++++++----- .../CustomerSubscriptionsView.jsx | 156 +++++++++--------- .../SubscriptionDetailViewCom.jsx | 56 +++++++ src/pages/SubscriptionDetailViewPage.jsx | 7 + 8 files changed, 294 insertions(+), 160 deletions(-) create mode 100644 src/components/subscription_view/SubscriptionDetailViewCom.jsx create mode 100644 src/pages/SubscriptionDetailViewPage.jsx diff --git a/src/RouteLinks.js b/src/RouteLinks.js index 3b838e3..f73623c 100644 --- a/src/RouteLinks.js +++ b/src/RouteLinks.js @@ -4,6 +4,7 @@ const RouteLinks = { customerPage: '/customer', accountDetails: '/account-view/*', subscriptions: '/subscriptions', + subscriptionDetails: '/subscription-view/*', billings: '/billings', recentSignup: '/recent-signup', loansPage: '/loans', diff --git a/src/SiteRoutes.jsx b/src/SiteRoutes.jsx index 1048150..2288633 100644 --- a/src/SiteRoutes.jsx +++ b/src/SiteRoutes.jsx @@ -20,6 +20,7 @@ import TransactionDetailsPage from './pages/TransactionDetailsPage' import AccountDetailsPage from "./pages/AccountDetailsPage"; import ProductTemplatePage from "./pages/ProductTemplatePage"; import CustomTemplatePage from "./pages/CustomTemplatePage"; // TRANSACTION DETAILS PAGE +import SubscriptionDetailViewPage from './pages/SubscriptionDetailViewPage' // SUBSCRIPTION DETAIL VIEW PAGE // const Home = lazy(() => import('./pages/Home')); @@ -41,6 +42,7 @@ export default function SiteRoutes() { }/> {`*/PRODUCTS TEMPLATE PAGE*/`} }/> {`*/CUSTOM TEMPLATES PAGE*/`} + }/> {`*/SUBSCRIPTION DETAIL VIEW PAGE*/`} }/> {`*/LOANS PAGE*/`} @@ -53,10 +56,10 @@ export default function AccountViewCom() {

{error.message}

: <> - + - - + + } diff --git a/src/components/account_view/CustomerAccountView.jsx b/src/components/account_view/CustomerAccountView.jsx index e7fdb5b..8c971ad 100644 --- a/src/components/account_view/CustomerAccountView.jsx +++ b/src/components/account_view/CustomerAccountView.jsx @@ -1,51 +1,91 @@ +import {Link} from 'react-router-dom' import Icons from "../Icons"; -export default function CustomerAccountView() { +export default function CustomerAccountView({accountInfo}) { return <> -
-
-
-
-
-

Account Info

-
-
-
-
- - - - - - - - - - - - - - - - - - +
+
+
+

Account Info

+
+
+ <> +
idFirstnameLastnameUsernameEmailAction
1MarkOtto@mdoOtto
+ + + + + + + + + + + + {(accountInfo && Object.keys(accountInfo).length > 0) ? + + + + + + - - -
+ # + + Firstname + + Lastname + + Username + + Email + + Action +
+
+
{1}
+
+ 		+
+
{accountInfo?.firstname}
+
+ 		+
+
{accountInfo?.lastname}
+
+ 		+
+
{accountInfo?.username}
+
+ 		+
+
{accountInfo?.email}
+
+
- {/**/} - - {/**/} + + +
-
-
+ : + + +
+ No Record Found +
+ + + } + + +
diff --git a/src/components/account_view/CustomerPaymentsView.jsx b/src/components/account_view/CustomerPaymentsView.jsx index 7d39ea9..47084a2 100644 --- a/src/components/account_view/CustomerPaymentsView.jsx +++ b/src/components/account_view/CustomerPaymentsView.jsx @@ -1,48 +1,67 @@ -export default function CustomerPaymentsView() { +export default function CustomerPaymentsView({payments}) { return <> -
-
-
-
-
-

Payments

-
-
-
-
- - - - - - - +
+
+
+

Payments

+
+
+ <> +
#FirstLastHandle
+ + + + + + + + + + {(payments && payments.length > 0) ? payments?.map((item, index) => ( + + + + + + + )) + : + + - - - - - - - - - - - - - - - - - - - - - -
+ # + + First + + Last + + Handle +
+
+
{index+1}
+
+ 		+
+
{item?.first}
+
+ 		+
+
{item?.last}
+
+ 		+
+
{item?.handle}
+
+
+
+ No Record Found +
+
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
+ } + + +
diff --git a/src/components/account_view/CustomerSubscriptionsView.jsx b/src/components/account_view/CustomerSubscriptionsView.jsx index b22bdb3..d2e7215 100644 --- a/src/components/account_view/CustomerSubscriptionsView.jsx +++ b/src/components/account_view/CustomerSubscriptionsView.jsx @@ -1,86 +1,92 @@ +import getDateTimeFromDateString from "../../helpers/getDateTimeFromDateString"; +import RouteLinks from "../../RouteLinks"; import Icons from "../Icons"; import {Link} from 'react-router-dom' -export default function CustomerSubscriptionsView() { +export default function CustomerSubscriptionsView({subscriptions, memberUID}) { return <> -
-
-
-
-
-

Subscriptions

-
-
-
-
- - - - - - - - - - - - - - - - - - - +
IDAddedProductURLStatusAction
1Sat, Sep 27th 2025 7:29AMA000002bobmarleya2.devprov.mermsemr.com7 -
-
- - - +
+
+
+

Subscriptions

+
+
+ <> + + + + + + + + + + + + + {(subscriptions && subscriptions.length > 0) ? subscriptions?.map((item, index) => ( + + + + + + + + + )) + : + + - - - - - - - - - - - - - - - - - -
+ # + + Added + + Product + + URL + + Status + + Action +
+
+
{index+1}
+ 		+
+
{getDateTimeFromDateString(item?.added)}
+
+ 		+
+
{item?.product_id}
+
+ 		+
+
{item?.internal_url}
+
+ 		+
+
{item?.status}
+
+ 		+
+
+ + + +
+
+
+
+ No Record Found
2Sat, Sep 27th 2025 7:29AMA000002bobmarleya2.devprov.mermsemr.com7 -
-
- - - -
-
-
3Sat, Sep 27th 2025 7:29AMA000002bobmarleya2.devprov.mermsemr.com7 -
-
- - - -
-
-
-
-
+ } +
+
diff --git a/src/components/subscription_view/SubscriptionDetailViewCom.jsx b/src/components/subscription_view/SubscriptionDetailViewCom.jsx new file mode 100644 index 0000000..43405e3 --- /dev/null +++ b/src/components/subscription_view/SubscriptionDetailViewCom.jsx @@ -0,0 +1,56 @@ +import {useEffect, useState} from 'react' +import { useQuery } from '@tanstack/react-query' + +import {useLocation, useNavigate, Link} from 'react-router-dom' + +import BreadcrumbCom from '../breadcrumb/BreadcrumbCom' +import RouteLinks from '../../RouteLinks' +import { getAccountView } from '../../services/siteServices' +import queryKeys from '../../services/queryKeys' + +export default function SubscriptionDetailViewCom() { + + const {state:{memberUID}} = useLocation() + const navigate = useNavigate() + + useEffect(()=>{ + if(!memberUID){ + navigate(`/account-view/${memberUID}`, {replace: true, 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: memberUID + // page, + // ...filterData + } + // return getAccountView(reqData) + }, + staleTime: 0 //0 mins + }) + const subscriptionViewData = data?.data // SUBSCRIPTION VIEW DATA + // console.log('DATA', payments, subscriptions) + + return ( +
+ + +
+ {isFetching ? + <> +

Loading...

+ + : isError ? +

{error.message}

+ : +

Coming soon

+ } + +
+
+ ) +} \ No newline at end of file diff --git a/src/pages/SubscriptionDetailViewPage.jsx b/src/pages/SubscriptionDetailViewPage.jsx new file mode 100644 index 0000000..bcbda17 --- /dev/null +++ b/src/pages/SubscriptionDetailViewPage.jsx @@ -0,0 +1,7 @@ +import React from 'react' +import SubscriptionDetailViewCom from "../components/subscription_view/SubscriptionDetailViewCom"; +export default function SubscriptionDetailViewPage() { + return ( + + ) +} -- 2.34.1