Compare commits

...

1 Commits

Author SHA1 Message Date
victorAnumudu 7a42cd5c65 account view subscription table added 2025-09-28 06:54:04 +01:00
8 changed files with 294 additions and 160 deletions
+1
View File
@@ -4,6 +4,7 @@ const RouteLinks = {
customerPage: '/customer', customerPage: '/customer',
accountDetails: '/account-view/*', accountDetails: '/account-view/*',
subscriptions: '/subscriptions', subscriptions: '/subscriptions',
subscriptionDetails: '/subscription-view/*',
billings: '/billings', billings: '/billings',
recentSignup: '/recent-signup', recentSignup: '/recent-signup',
loansPage: '/loans', loansPage: '/loans',
+2
View File
@@ -20,6 +20,7 @@ import TransactionDetailsPage from './pages/TransactionDetailsPage'
import AccountDetailsPage from "./pages/AccountDetailsPage"; import AccountDetailsPage from "./pages/AccountDetailsPage";
import ProductTemplatePage from "./pages/ProductTemplatePage"; import ProductTemplatePage from "./pages/ProductTemplatePage";
import CustomTemplatePage from "./pages/CustomTemplatePage"; // TRANSACTION DETAILS PAGE import CustomTemplatePage from "./pages/CustomTemplatePage"; // TRANSACTION DETAILS PAGE
import SubscriptionDetailViewPage from './pages/SubscriptionDetailViewPage' // SUBSCRIPTION DETAIL VIEW PAGE
// const Home = lazy(() => import('./pages/Home')); // const Home = lazy(() => import('./pages/Home'));
@@ -41,6 +42,7 @@ export default function SiteRoutes() {
<Route path={RouteLinks.productTemplates} element={<ProductTemplatePage/>}/> {`*/PRODUCTS TEMPLATE PAGE*/`} <Route path={RouteLinks.productTemplates} element={<ProductTemplatePage/>}/> {`*/PRODUCTS TEMPLATE PAGE*/`}
<Route path={RouteLinks.customTemplates} element={<CustomTemplatePage/>}/> {`*/CUSTOM TEMPLATES PAGE*/`} <Route path={RouteLinks.customTemplates} element={<CustomTemplatePage/>}/> {`*/CUSTOM TEMPLATES PAGE*/`}
<Route path={RouteLinks.subscriptionDetails} element={<SubscriptionDetailViewPage/>}/> {`*/SUBSCRIPTION DETAIL VIEW PAGE*/`}
<Route path={RouteLinks.loansPage} element={<LoansPage/>}/> {`*/LOANS PAGE*/`} <Route path={RouteLinks.loansPage} element={<LoansPage/>}/> {`*/LOANS PAGE*/`}
<Route path={RouteLinks.transaction_details_page} <Route path={RouteLinks.transaction_details_page}
@@ -36,9 +36,12 @@ export default function AccountViewCom() {
}, },
staleTime: 0 //0 mins staleTime: 0 //0 mins
}) })
const accountsViewData = data?.data?.products // ACCOUNT VIEW DATA const accountsViewData = data?.data // ACCOUNT VIEW DATA
const pagination = data?.data?.pagination const account_info = accountsViewData?.account
console.log('DATA', data?.data) const account_profile = accountsViewData?.account_profile
const subscriptions = accountsViewData?.subscriptions
const payments = accountsViewData?.payments
// console.log('DATA', payments, subscriptions)
return ( return (
<div className='w-full flex flex-col gap-8'> <div className='w-full flex flex-col gap-8'>
@@ -53,10 +56,10 @@ export default function AccountViewCom() {
<p className='text-red-500'>{error.message}</p> <p className='text-red-500'>{error.message}</p>
: :
<> <>
<CustomerAccountView /> <CustomerAccountView accountInfo={account_info} />
<AccountProfileView /> <AccountProfileView />
<CustomerSubscriptionsView /> <CustomerSubscriptionsView subscriptions={subscriptions} memberUID={memberUID} />
<CustomerPaymentsView /> <CustomerPaymentsView payments={payments} />
</> </>
} }
@@ -1,51 +1,91 @@
import {Link} from 'react-router-dom'
import Icons from "../Icons"; import Icons from "../Icons";
export default function CustomerAccountView() { export default function CustomerAccountView({accountInfo}) {
return <> return <>
<div className="row" style={{paddingBottom:'20px'}}> <div className="pb-5">
<div className="col-12 col-lg-12"> <div className="flex flex-col gap-1">
<div className="card card-statistics"> <div className="w-full">
<div className="card-header"> <h4 className="font-semibold text-lg">Account Info</h4>
<div className="card-heading"> </div>
<h4 className="card-title"><b>Account Info</b></h4> <div className="w-full overflow-x-auto">
</div> <>
</div> <table className="py-2 w-full text-sm" style={{backgroundColor: 'aliceblue', borderRadius: '10px'}}>
<div className="card-body"> <thead className="py-2 text-sm text-slate-500 text-left">
<div className="table-responsive"> <tr>
<table className="table table-hover mb-0" style={{width:'100%', backgroundColor: 'aliceblue', borderRadius: '10px'}}> <th scope="col" className="px-2 py-2">
<thead> #
<tr> </th>
<th scope="col">id</th> <th scope="col" className="px-2">
<th scope="col">Firstname</th> Firstname
<th scope="col">Lastname</th> </th>
<th scope="col">Username</th> <th scope="col" className="px-2">
<th scope="col">Email</th> Lastname
<th scope="col">Action</th> </th>
</tr> <th scope="col" className="px-2">
</thead> Username
<tbody> </th>
<tr> <th scope="col" className="px-2">
<th scope="row">1</th> Email
<td>Mark</td> </th>
<td>Otto</td> <th scope="col" className="px-2 text-right">
<td>@mdo</td> Action
<td>Otto</td> </th>
</tr>
</thead>
<tbody>
{(accountInfo && Object.keys(accountInfo).length > 0) ?
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2">
<div className="text-left">
<div className="text-base font-semibold">{1}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{accountInfo?.firstname}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{accountInfo?.lastname}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{accountInfo?.username}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{accountInfo?.email}</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
className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'> 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 to={`/account-view/${item?.member_uid}`}>*/} <Link
<Icons name='eye'/> // to={`/subscription-view/63554d40-9ba1-4afe-80c2-ca147236f7ee`}
{/*</Link>*/} >
<Icons name='eye'/>
</Link>
</div> </div>
</div> </div>
</td> </td>
</tr> </tr>
:
</tbody> <tr className="py-2 border-t border-dashed border-slate-300">
</table> <td className="px-3 py-2" colSpan={6}>
</div> <div className="flex justify-center items-center">
</div> No Record Found
</div>
</td>
</tr>
}
</tbody>
</table>
</>
</div> </div>
</div> </div>
</div> </div>
@@ -1,48 +1,67 @@
export default function CustomerPaymentsView() { export default function CustomerPaymentsView({payments}) {
return <> return <>
<div className="row" style={{paddingBottom:'20px'}}> <div className="pb-5">
<div className="col-12 col-lg-12"> <div className="flex flex-col gap-1">
<div className="card card-statistics"> <div className="w-full">
<div className="card-header"> <h4 className="font-semibold text-lg">Payments</h4>
<div className="card-heading"> </div>
<h4 className="card-title"><b>Payments</b></h4> <div className="w-full overflow-x-auto">
</div> <>
</div> <table className="py-2 w-full text-sm" style={{backgroundColor: 'aliceblue', borderRadius: '10px'}}>
<div className="card-body"> <thead className="py-2 text-sm text-slate-500 text-left">
<div className="table-responsive"> <tr>
<table className="table table-hover mb-0" style={{width:'100%', backgroundColor: 'aliceblue', borderRadius: '10px'}}> <th scope="col" className="px-2 py-2">
<thead> #
<tr> </th>
<th scope="col">#</th> <th scope="col" className="px-2">
<th scope="col">First</th> First
<th scope="col">Last</th> </th>
<th scope="col">Handle</th> <th scope="col" className="px-2">
Last
</th>
<th scope="col" className="px-2">
Handle
</th>
</tr>
</thead>
<tbody>
{(payments && payments.length > 0) ? payments?.map((item, index) => (
<tr key={index} className="py-2 border-t border-dashed border-slate-300">
<td className="px-2 py-2">
<div className="text-left">
<div className="text-base font-semibold">{index+1}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{item?.first}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{item?.last}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{item?.handle}</div>
</div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={4}>
<div className="flex justify-center items-center">
No Record Found
</div>
</td>
</tr> </tr>
</thead> }
<tbody> </tbody>
<tr> </table>
<th scope="row">1</th> </>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -1,86 +1,92 @@
import getDateTimeFromDateString from "../../helpers/getDateTimeFromDateString";
import RouteLinks from "../../RouteLinks";
import Icons from "../Icons"; import Icons from "../Icons";
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
export default function CustomerSubscriptionsView() { export default function CustomerSubscriptionsView({subscriptions, memberUID}) {
return <> return <>
<div className="row" style={{paddingBottom: '20px'}}> <div className="pb-5">
<div className="col-12 col-lg-12"> <div className="flex flex-col gap-1">
<div className="card card-statistics"> <div className="w-full">
<div className="card-header"> <h4 className="font-semibold text-lg">Subscriptions</h4>
<div className="card-heading"> </div>
<h4 className="card-title"><b>Subscriptions</b></h4> <div className="w-full overflow-x-auto">
</div> <>
</div> <table className="py-2 w-full text-sm" style={{backgroundColor: 'aliceblue', borderRadius: '10px'}}>
<div className="card-body"> <thead className="py-2 text-sm text-slate-500 text-left">
<div className="table-responsive"> <tr>
<table className="table table-hover mb-0" <th scope="col" className="px-2 py-2">
style={{width: '100%', backgroundColor: 'aliceblue', borderRadius: '10px'}}> #
<thead> </th>
<tr> <th scope="col" className="px-2">
<th scope="col">ID</th> Added
<th scope="col">Added</th> </th>
<th scope="col">Product</th> <th scope="col" className="px-2">
<th scope="col">URL</th> Product
<th scope="col">Status</th> </th>
<th scope="col">Action</th> <th scope="col" className="px-2">
</tr> URL
</thead> </th>
<tbody> <th scope="col" className="px-2">
<tr> Status
<th scope="row">1</th> </th>
<td>Sat, Sep 27th 2025 7:29AM</td> <th scope="col" className="px-2 text-right">
<td>A000002</td> Action
<td>bobmarleya2.devprov.mermsemr.com</td> </th>
<td>7</td> </tr>
<td className="px-2 text-right"> </thead>
<div className='flex items-center justify-end gap-3 md:gap-4'> <tbody>
<div {(subscriptions && subscriptions.length > 0) ? subscriptions?.map((item, index) => (
className='p-2 flex justify-center items-center text-slate-500 bg-white-body dark:text-white-body dark:bg-black-body rounded-md'> <tr key={index} className="py-2 border-t border-dashed border-slate-300">
<Link to={`/subscription-view/63554d40-9ba1-4afe-80c2-ca147236f7ee`}> <td className="px-2 py-2">
<Icons name='eye'/> <div className="text-left">
</Link> <div className="text-base font-semibold">{index+1}</div>
</div> </div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{getDateTimeFromDateString(item?.added)}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{item?.product_id}</div>
</div>
</td>
<td className="px-2">
<div className="text-left">
<div className="text-base font-semibold">{item?.internal_url}</div>
</div>
</td>
<td className="px-2">
<div className="text-right">
<div className="text-base font-semibold">{item?.status}</div>
</div>
</td>
<td className="px-2 text-right">
<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 to={`/subscription-view/${memberUID}`} state={{customerID: item?.id, memberUID}}>
<Icons name='eye'/>
</Link>
</div>
</div>
</td>
</tr>
))
:
<tr className="py-2 border-t border-dashed border-slate-300">
<td className="px-3 py-2" colSpan={6}>
<div className="flex justify-center items-center">
No Record Found
</div> </div>
</td> </td>
</tr> </tr>
<tr> }
<th scope="row">2</th> </tbody>
<td>Sat, Sep 27th 2025 7:29AM</td> </table>
<td>A000002</td> </>
<td>bobmarleya2.devprov.mermsemr.com</td>
<td>7</td>
<td className="px-2 text-right">
<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 to={`/subscription-view/63554d40-9ba1-4afe-80c2-ca147236f7ee`}>
<Icons name='eye'/>
</Link>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sat, Sep 27th 2025 7:29AM</td>
<td>A000002</td>
<td>bobmarleya2.devprov.mermsemr.com</td>
<td>7</td>
<td className="px-2 text-right">
<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 to={`/subscription-view/63554d40-9ba1-4afe-80c2-ca147236f7ee`}>
<Icons name='eye'/>
</Link>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -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 (
<div className='w-full flex flex-col gap-8'>
<BreadcrumbCom title={`Subscription View [${memberUID}]`} paths={['Dashboard', 'Subscription 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>
:
<p className='text-slate-800'>Coming soon</p>
}
</div>
</div>
)
}
+7
View File
@@ -0,0 +1,7 @@
import React from 'react'
import SubscriptionDetailViewCom from "../components/subscription_view/SubscriptionDetailViewCom";
export default function SubscriptionDetailViewPage() {
return (
<SubscriptionDetailViewCom />
)
}