added recent payments

src/components/account_view/CustomerSubscriptionsView.jsx

@@ -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>

src/components/layouts/rightaside/RecentPaymentsBar.jsx

@@ -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,22 @@ 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'>
+                    {recentLogin.map((item, index)=> {
-                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                        if(index < 5){
-                            <img src={Img} className='w-8' alt="Order" />
+                            return (
-                        </div>
+                                <div key={index} className='flex gap-3 items-center'>
-                        <div className='flex-col'>
+                                    <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
-                            <p className='text-base font-bold text-white-body'>Project Briefing</p>
+                                        <img src={Img} className='w-8' alt="Order" />
-                            <p className='text-sm text-slate-500'>Project Manager</p>
+                                    </div>
-                        </div>
+                                    <div className='flex-col'>
-                    </div>
+                                        <p className='text-base font-bold text-white-body'>{item.firstname} {item.lastname}</p>
-                    <div className='flex gap-3 items-center'>
+                                        <p className='text-sm text-slate-500'>{item.username}</p>
-                        <div className='px-4 py-2 bg-[#0E172E] rounded-md'>
+                                    </div>
-                            <img src={Img} className='w-8' alt="Order" />
+                                </div>
-                        </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>
                 }
             </div>

src/components/layouts/rightaside/RightAsideBar.jsx

@@ -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 === 'orders' && <RecentPaymentsBar data={data} isFetching={isFetching} isError={isError} error={error}  />}
-        {active === 'tickets' && <Tickets data={recentData} isFetching={isFetching} isError={isError} error={error}  />}
+        {active === 'tickets' && <Tickets data={data} isFetching={isFetching} isError={isError} error={error}  />}
-        {active === 'tasks' && <Tasks data={recentData} isFetching={isFetching} isError={isError} error={error}  />}
+        {active === 'tasks' && <Tasks data={data} isFetching={isFetching} isError={isError} error={error}  />}
     </div>
   )
 }

src/components/layouts/rightaside/Tickets.jsx

@@ -3,6 +3,9 @@ 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
+
   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='flex flex-col gap-4'>
@@ -18,27 +21,27 @@ 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>
                 }

src/components/subscription_view/SubscriptionViewCom.jsx

@@ -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
+                                            <div className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.added)}</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>
     )
 }