122 lines
5.8 KiB
TypeScript
122 lines
5.8 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
|
|
import api from '../../config/api';
|
|
import { Transaction } from '../transactions/Transactions';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
import { FaCheck } from 'react-icons/fa';
|
|
|
|
|
|
|
|
|
|
const formatDate = (timestamp: number) => {
|
|
return new Date(timestamp * 1000).toLocaleString();
|
|
};
|
|
|
|
const TransactionDataTable = () => {
|
|
const navigate = useNavigate()
|
|
const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
|
|
const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
|
|
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
|
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
|
);
|
|
|
|
const fetchTransactions = async () => {
|
|
console.log("fetchTransactions")
|
|
try {
|
|
const response = await api.get(`/api/accounts/${activeAccountId}/transactions?sortBy=lastModifiedAt desc`);
|
|
setTransactions(response.data || []);
|
|
} catch (error) {
|
|
console.error("Error fetching transactions:", error);
|
|
}
|
|
};
|
|
|
|
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
|
|
|
const handleTransactionClick = (id: number) => {
|
|
navigate(`/accounts/${activeAccountId}/transactions/${id}`);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (activeAccountId) {
|
|
fetchTransactions();
|
|
}
|
|
}, [activeAccountId]);
|
|
|
|
useEffect(() => {
|
|
const userDetails = JSON.parse(sessionStorage.getItem('userDetails'));
|
|
setCurrentEmailId(userDetails?.email)
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
{transactions.length > 0 && (
|
|
<div className="overflow-x-auto py-2">
|
|
<table className="min-w-full text-sm border border-gray-200 rounded bg-white shadow-sm">
|
|
<thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left"></th>
|
|
<th className="px-4 py-3 text-center">Name</th>
|
|
<th className="px-4 py-3 text-center">Status</th>
|
|
<th className="px-4 py-3 text-center">Active</th>
|
|
<th className="px-4 py-3 text-center">Last Change</th>
|
|
<th className="px-4 py-3 text-center">Expire After (days)</th>
|
|
<th className="px-4 py-3 text-center">Sign</th>
|
|
<th className="px-4 py-3 text-center">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-200">
|
|
{transactions.map((tx) => {
|
|
const lastModifiedAt = new Date(tx.lastModifiedAt, "DD/MM/YYYY");
|
|
return (
|
|
<tr
|
|
key={tx.id}
|
|
onClick={() => handleTransactionClick(tx.id)}
|
|
className="hover:bg-gray-50 cursor-pointer"
|
|
>
|
|
<td className="px-4 py-3">
|
|
<div className="w-5 h-5 rounded border border-slate-300 flex justify-center items-center">
|
|
{selectedTransactions.includes(tx.id) && (
|
|
<FaCheck className="text-purple-600 text-sm" />
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
{tx.subject || "Untitled"}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<span className="px-2 py-0.5 rounded-xl text-xs font-medium bg-blue-100 text-blue-700">
|
|
{tx.status}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
{tx.active ? "Yes" : "No"}
|
|
</td>
|
|
|
|
<td className="px-4 py-3 text-center">
|
|
{formatDate(tx.lastModifiedAt)}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
{tx.expireAfter ?? "-"}
|
|
</td>
|
|
<td className="px-4 py-3 text-center ">
|
|
{tx?.createdBy?.email === currentEmailId ? <button className="px-2 py-0.5 rounded-xl text-xs font-medium bg-green-100 text-green-700 cursor-pointer">Sign now</button> : "-"}
|
|
</td>
|
|
<td className="px-4 py-3 text-center">
|
|
<PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black mx-auto" />
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default TransactionDataTable |