src/components/layouts/rightaside/Orders.jsx

@@ -1,24 +1,31 @@
 import React from 'react'
+import {Link} from 'react-router-dom'
 import Img from '../../../assets/user_avatar.jpg'
+import formatNumber from '../../../helpers/formatNumber'
 import CustomCounter from '../../CustomCounter'
+import RouteLinks from '../../../RouteLinks'
 
 export default function Orders({data}) {
     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 flex flex-col gap-16 overflow-y-auto aside-scroll-design'>
             <div className='flex flex-col gap-4'>
                 <p className='text-base text-white-body font-bold'>Recent Loans</p>
                 <div className='flex flex-col gap-4'>
                     {data.map((item, index)=>{
                         return (
-                            <div key={index} className='flex gap-3 items-center'>
+                            <Link 
+                                to={RouteLinks.transaction_details_page}
+                                state={{transactionID: item?.transaction_id}}
+                                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 Image" />
                                 </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>
+                                    <p className='text-sm font-bold text-white-body'>{item?.customer_id}</p>
+                                    <p className='text-sm text-slate-500'>{formatNumber(item?.current_loan_amount)}</p>
                                 </div>
-                            </div>
+                            </Link>
                         )
                     })}
                 </div>

src/components/layouts/rightaside/RightAsideBar.jsx

@@ -21,7 +21,7 @@ export default function RightAsideBar() {
         queryFn: () => getRecentLoans()
     })
 
-    console.log('data', data?.data)
+    const loanList = data?.data?.loans
 
     return (
         <div className='w-full h-full flex flex-col gap-8'>
@@ -46,7 +46,7 @@ export default function RightAsideBar() {
                 </div>
                 :
                 <div className='w-full'>
-                    {active === 'orders' && <Orders data={[1,2,3,4,5]} />}
+                    {active === 'orders' && <Orders data={loanList} />}
                     {/*{active == 'tickets' && <Tickets />}*/}
                     {/*{active == 'tasks' && <Tasks />}*/}
                 </div>