110 lines
5.0 KiB
TypeScript
110 lines
5.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
|
|
import AccountNav from "./AccountNav";
|
|
import api from "../../config/api";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { FaCheck } from "react-icons/fa";
|
|
|
|
interface Transaction {
|
|
id: number;
|
|
status: string;
|
|
active: boolean;
|
|
subject: string | null;
|
|
createdAt: number;
|
|
expireAfter: number | null;
|
|
}
|
|
|
|
const formatDate = (timestamp: number) => {
|
|
return new Date(timestamp * 1000).toLocaleString();
|
|
};
|
|
|
|
const Account = () => {
|
|
const { accountId } = useParams<{ accountId: string }>();
|
|
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
|
const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
|
|
|
|
const fetchTransactions = async () => {
|
|
try {
|
|
const response = await api(`/api/accounts/${accountId}/transactions`);
|
|
setTransactions(response.data || []);
|
|
} catch (error) {
|
|
console.error("Error fetching transactions:", error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (accountId) fetchTransactions();
|
|
}, [accountId]);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const handleTransactionClick = (id: number) => {
|
|
navigate(`/accounts/${accountId}/transactions/${id}`);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{transactions.length > 0 && (
|
|
<div className="overflow-x-auto py-4">
|
|
<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"></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">
|
|
<PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black mx-auto" />
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Account;
|