Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
43e8b9601a | ||
|
CHIEFSOFT\ameye
|
a2c7ecd1f5 | ||
 ameye
|
0113f047dd | ||
|
victorAnumudu
|
d131e981cf | ||
|
CHIEFSOFT\ameye
|
85a07427e5 | ||
|
CHIEFSOFT\ameye
|
647f9473a0 | ||
|
ameye
|
95ea5aaabf |
@@ -1,5 +1,5 @@
|
||||
import {useEffect, useState} from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
|
||||
import {useLocation, useNavigate, Link} from 'react-router-dom'
|
||||
|
||||
@@ -14,6 +14,8 @@ import CustomerPaymentsView from "./CustomerPaymentsView";
|
||||
|
||||
export default function AccountViewCom() {
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const {state} = useLocation()
|
||||
const navigate = useNavigate()
|
||||
|
||||
@@ -43,6 +45,14 @@ export default function AccountViewCom() {
|
||||
const payments = accountsViewData?.payments
|
||||
// console.log('DATA', payments, subscriptions)
|
||||
|
||||
useEffect(()=>{
|
||||
queryClient.refetchQueries({
|
||||
queryKey: [...queryKeys.account_view],
|
||||
// type: 'active',
|
||||
// exact: true,
|
||||
})
|
||||
},[state?.memberUID])
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-col gap-8'>
|
||||
<BreadcrumbCom title={`Account View [${state?.memberUID}]`} paths={['Dashboard', 'Account View']}/>
|
||||
|
||||
@@ -71,7 +71,7 @@ export default function CustomerSubscriptionsView({subscriptions}) {
|
||||
|
||||
<br/>
|
||||
<span className="badge badge-warning">
|
||||
<a href={`https://${item?.external_url}`}
|
||||
<a href={`${item?.external_url}`}
|
||||
target='_blank'
|
||||
rel="noreferrer">{item?.external_url}</a>
|
||||
</span>
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
import React from 'react'
|
||||
import {Link} from 'react-router-dom'
|
||||
import Img from '../../../assets/user_avatar.jpg'
|
||||
import CustomCounter from '../../CustomCounter'
|
||||
import RouteLinks from '../../../RouteLinks'
|
||||
|
||||
export default function RecentPaymentsBar({data, isFetching, isError, error}) {
|
||||
|
||||
const recentPayment = data?.data?.recent_payment_summary
|
||||
const recentLogin = data?.data?.recent_login
|
||||
|
||||
return (
|
||||
<div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
|
||||
<div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 aside-scroll-design'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Recent Payments [7 days]</p>
|
||||
{isFetching ?
|
||||
@@ -18,32 +24,32 @@ export default function RecentPaymentsBar({data, isFetching, isError, error}) {
|
||||
<div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
|
||||
<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={18} timeInSeconds={1} />
|
||||
<CustomCounter targetNumber={recentPayment?.approved} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Approved</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={5} timeInSeconds={1} />
|
||||
<CustomCounter targetNumber={recentPayment?.verified} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Verified</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={1} timeInSeconds={1} />
|
||||
<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={1} timeInSeconds={1} />
|
||||
<CustomCounter targetNumber={recentPayment?.total} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Total</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<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'>
|
||||
@@ -54,42 +60,25 @@ export default function RecentPaymentsBar({data, isFetching, isError, error}) {
|
||||
<p className='text-base text-white-body font-bold'>{error?.message}</p>
|
||||
:
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div 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'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div 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'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div 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'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div 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'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
{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>
|
||||
|
||||
@@ -29,14 +29,9 @@ export default function RightAsideBar() {
|
||||
},
|
||||
// staleTime: 0 //0 mins
|
||||
})
|
||||
const recentData = [] // RECENT LIST
|
||||
|
||||
// const recentData = data?.data // RECENT LIST
|
||||
// const pagination = data?.data?.pagination
|
||||
// console.log('RIGHT', data?.data)
|
||||
|
||||
return (
|
||||
<div className='w-full h-full flex flex-col gap-8'>
|
||||
<div className='w-full h-full pb-8 flex flex-col gap-8'>
|
||||
{/* Menu */}
|
||||
<div className='grid grid-cols-3 gap-8'>
|
||||
<button name='orders' onClick={() => handleActiveMenu('orders')} className={`flex justify-center items-center px-2 py-3 large:px-4 large:py-5 rounded-md shadow-round_white bg-[#0E172E] text-white-body hover:scale-[1.1] ${active === 'orders' && 'scale-[1.2]'}`}>
|
||||
@@ -51,9 +46,9 @@ export default function RightAsideBar() {
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
{active === 'orders' && <RecentPaymentsBar data={recentData} isFetching={isFetching} isError={isError} error={error} />}
|
||||
{active === 'tickets' && <Tickets data={recentData} isFetching={isFetching} isError={isError} error={error} />}
|
||||
{active === 'tasks' && <Tasks data={recentData} isFetching={isFetching} isError={isError} error={error} />}
|
||||
{active === 'orders' && <RecentPaymentsBar data={data} isFetching={isFetching} isError={isError} error={error} />}
|
||||
{active === 'tickets' && <Tickets data={data} isFetching={isFetching} isError={isError} error={error} />}
|
||||
{active === 'tasks' && <Tasks data={data} isFetching={isFetching} isError={isError} error={error} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,10 +1,16 @@
|
||||
import React from 'react'
|
||||
import {Link} from 'react-router-dom'
|
||||
import Img from '../../../assets/user_avatar.jpg'
|
||||
import CustomCounter from '../../CustomCounter'
|
||||
|
||||
export default function Tickets({data, isFetching, isError, error}) {
|
||||
|
||||
const recentDeployment = data?.data?.recent_deployment_summary
|
||||
const recentSignup = data?.data?.recent_signup
|
||||
|
||||
|
||||
return (
|
||||
<div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
|
||||
<div className='h-full p-2 sm:p-4 large:p-8 flex flex-col gap-16 aside-scroll-design'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Recent Deployments</p>
|
||||
{isFetching ?
|
||||
@@ -18,33 +24,33 @@ export default function Tickets({data, isFetching, isError, error}) {
|
||||
<div className='grid grid-cols-2 gap-4 sm:gap-6 large:gap-8'>
|
||||
<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={18} timeInSeconds={1} />
|
||||
<CustomCounter targetNumber={recentDeployment?.pending} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Pending</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={2} timeInSeconds={1} />
|
||||
<CustomCounter targetNumber={recentDeployment?.started} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Offers</p>
|
||||
<p className='text-sm text-slate-500'>Started</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={3} timeInSeconds={1} />
|
||||
<CustomCounter targetNumber={recentDeployment?.stuck} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Created</p>
|
||||
<p className='text-sm text-slate-500'>Stuck</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={1} timeInSeconds={1} />
|
||||
<CustomCounter targetNumber={recentDeployment?.completed} timeInSeconds={1} />
|
||||
</p>
|
||||
<p className='text-sm text-slate-500'>Rejected</p>
|
||||
<p className='text-sm text-slate-500'>Completed</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Tracked Errors</p>
|
||||
<div className='overflow-y-auto h-full flex flex-col gap-4'>
|
||||
<p className='text-base text-white-body font-bold'>Recent Signup</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>
|
||||
@@ -54,42 +60,25 @@ export default function Tickets({data, isFetching, isError, error}) {
|
||||
<p className='text-base text-white-body font-bold'>{error?.message}</p>
|
||||
:
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div 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'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div 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'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div 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'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
<div 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'>Project Briefing</p>
|
||||
<p className='text-sm text-slate-500'>Project Manager</p>
|
||||
</div>
|
||||
</div>
|
||||
{recentSignup.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>
|
||||
|
||||
@@ -150,20 +150,43 @@ export default function SubscriptionViewCom() {
|
||||
<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">{getDateTimeFromDateString(selectedSubscription?.added)}</div>
|
||||
<div className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.added)}</div>
|
||||
<div className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.updated)}</div>
|
||||
<div className="text-base font-semibold">ID: {selectedSubscription?.id}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
<div
|
||||
className="text-base font-semibold">{selectedSubscription?.product_id}</div>
|
||||
<div><a href={`http://${selectedSubscription?.primary_server}:${selectedSubscription?.provision_port}`}
|
||||
target='_blank'
|
||||
rel="noreferrer">{selectedSubscription?.primary_server}:{selectedSubscription?.provision_port}</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
<div
|
||||
className="text-base font-semibold">{selectedSubscription?.internal_url}
|
||||
|
||||
|
||||
<span className="text-base font-semibold">
|
||||
<a href={`https://${selectedSubscription?.internal_url}`}
|
||||
target='_blank'
|
||||
rel="noreferrer">{selectedSubscription?.internal_url}</a>
|
||||
</span>
|
||||
|
||||
<br/>
|
||||
<span className="text-base font-semibold">
|
||||
<a href={`${selectedSubscription?.external_url}`}
|
||||
target='_blank'
|
||||
rel="noreferrer">{selectedSubscription?.external_url}</a>
|
||||
</span>
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
<div className="text-base font-semibold">
|
||||
<br/><span>Template :</span> {selectedSubscription?.product_template}
|
||||
<br/><span>Custom :</span> {selectedSubscription?.custom_template}
|
||||
</div>
|
||||
@@ -177,7 +200,8 @@ export default function SubscriptionViewCom() {
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<button name='template' onClick={()=>setRebuildStatus({status: true, data:{}})}
|
||||
<button name='template'
|
||||
onClick={() => setRebuildStatus({status: true, data: {}})}
|
||||
className={`rounded-md p-2 bg-primary text-white text-center`}>
|
||||
Rebuild
|
||||
</button>
|
||||
@@ -240,8 +264,10 @@ export default function SubscriptionViewCom() {
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
{ rebuildStatus?.status && <RebuildModal data={{}} templateRebuild={templateRebuild} proceedFunc={handleRebuildTemplate} closeModal={()=>setRebuildStatus({status: false, data:{}})} />}
|
||||
}
|
||||
{rebuildStatus?.status &&
|
||||
<RebuildModal data={{}} templateRebuild={templateRebuild} proceedFunc={handleRebuildTemplate}
|
||||
closeModal={() => setRebuildStatus({status: false, data: {}})}/>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user