first commit

2025-07-21 05:51:52 -04:00
commit 7e28fc8f51
114 changed files with 23749 additions and 0 deletions
@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+
+import Icons from '../Icons'
+
+import queryKeys from '../../services/queryKeys'
+import { getTransactions } from '../../services/siteServices'
+import getDateFromDateString from '../../helpers/GetDateFromDateString';
+import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
+import localImgLoader from '../../helpers/localImageLoader';
+
+export default function TransactionDetails({transactionID}) {
+
+    const [page, setPage] = useState(1)
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.transactions, page],
+        queryFn: () => getTransactions({transaction_id: transactionID, page}),
+        staleTime: 0,
+        // placeholderData: keepPreviousData,
+    })
+
+    const transactions = data?.data?.transactions // TRANSACTIONS LIST
+    // const pagination = data?.data?.pagination
+
+    return (
+        <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
+            <p className='pb-4 font-bold text-base'>Transactions</p>
+            {isFetching ? 
+            <>
+                <p className='text-slate-800'>Loading...</p>
+            </>
+            : isError ?
+                <p className='text-red-500'>{error.message}</p>
+            :   
+                <table className="py-2 w-full text-sm">
+                    <thead className="py-2 text-sm text-slate-500 text-left">
+                        <tr>
+                            <th scope="col" className="px-2 py-2">
+                                Request
+                            </th>
+                            <th scope="col" className="px-2">
+                                Account
+                            </th>
+                            <th scope="col" className="px-2">
+                                Activity
+                            </th>
+                            <th scope="col" className="px-2 text-right">
+                                Action
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {(transactions && transactions.length > 0) ? transactions?.map((item, index) => (
+                            <tr key={index} className="py-2 border-t border-dashed border-slate-300">
+                                <td className="px-2 py-2">
+                                    <div className='w-full min-w-48 flex items-center gap-2 whitespace-nowrap'>
+                                    <img className="w-10 h-10 rounded-md" src={localImgLoader(`loan_icons/${item?.type}.png`)} alt="Icon" />
+                                    <div className="text-left">
+                                        <div className="text-base font-semibold">{item?.transaction_id}</div>
+                                        <div className="font-normal text-gray-500">{getDateFromDateString(item?.created_at)} {getTimeFromDateString(item?.created_at)}</div>
+                                    </div>  
+                                    </div>
+                                </td>
+                                <td className="px-2">
+                                    <div className="text-left">
+                                        <div className="text-base font-semibold">{item?.account_id}</div>
+                                        <div className="font-normal text-gray-500">{item?.type}</div>
+                                    </div> 
+                                </td>
+                                <td className="px-2">
+                                    <div className="text-left">
+                                        <div className="font-normal text-gray-500">50%</div>
+                                        <div className="relative h-[6px] w-full bg-white-body dark:bg-black-body rounded-full overflow-hidden">
+                                        <div className={`absolute left-0 h-full w-1/2 bg-emerald-600`}></div>
+                                        </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'>
+                                            <Icons name='eye' />
+                                        </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>
+                        }
+                    </tbody>
+                </table>
+            }
+        </div>
+    )
+}