refactor: api integrate for NEFT,RTGS.IMPS and account statement

This commit is contained in:
2025-08-27 11:35:15 +05:30
parent 671ea780b3
commit eda57aae71
9 changed files with 137 additions and 80 deletions

View File

@@ -1,5 +1,5 @@
"use client";
import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider } from "@mantine/core";
import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack } from "@mantine/core";
import { DateInput } from '@mantine/dates';
import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
@@ -20,6 +20,7 @@ export default function AccountStatementPage() {
const [transactions, setTransactions] = useState<any[]>([]);
const searchParams = useSearchParams();
const passedAccNo = searchParams.get("accNo");
const [loading, setLoading] = useState(false);
useEffect(() => {
const saved = sessionStorage.getItem("accountData");
@@ -34,6 +35,7 @@ export default function AccountStatementPage() {
setSelectedAccNo(passedAccNo);
//Automatically fetch last 5 transactions if accNo is passed
const token = localStorage.getItem("access_token");
setLoading(true);
fetch(`/api/transactions/account/${passedAccNo}`, {
method: "GET",
headers: {
@@ -44,7 +46,7 @@ export default function AccountStatementPage() {
.then(res => res.json())
.then(data => {
if (Array.isArray(data)) {
const last5 = data.slice(0,5);
const last5 = data.slice(0, 5);
setTransactions(last5);
}
})
@@ -56,7 +58,8 @@ export default function AccountStatementPage() {
message: "Could not load recent transactions.",
autoClose: 5000,
});
});
})
.finally(() => setLoading(false));
}
}
}, [passedAccNo]);
@@ -107,20 +110,18 @@ export default function AccountStatementPage() {
}
try {
const token = localStorage.getItem("access_token");
const response = await fetch(`/api/transactions/account/${selectedAccNo}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
setLoading(true);
const response = await fetch(`/api/transactions/account/${selectedAccNo}?fromDate=${dayjs(start).format('DDMMYYYY')}&toDate=${dayjs(end).format('DDMMYYYY')}`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
});
const data = await response.json();
if (response.ok && Array.isArray(data)) {
const filterData = data.filter((txn: any) => {
const txnDate = dayjs(txn.date, 'DD/MM/YYYY');
return txnDate.isSameOrAfter(start) && txnDate.isSameOrBefore(end);
});
setTransactions(filterData);
setTransactions(data.reverse());
}
} catch {
notifications.show({
@@ -131,6 +132,9 @@ export default function AccountStatementPage() {
autoClose: 5000,
});
}
finally {
setLoading(false);
}
};
const cellStyle = {
border: "1px solid #ccc",
@@ -176,7 +180,14 @@ export default function AccountStatementPage() {
<Text fw={500} fs="italic" >Account No : {selectedAccNo}</Text>
<Divider size="xs" />
<ScrollArea style={{ flex: 1 }}>
{transactions.length === 0 ? (
{loading ? (
<Center h="100%">
<Stack align="center" gap="sm">
<Loader size="lg" color="cyan" type="bars" />
<Text>Please wait, details are being fetched .....</Text>
</Stack>
</Center>
) : transactions.length === 0 ? (
<p>No transactions found.</p>
) : (
<>
@@ -203,7 +214,7 @@ export default function AccountStatementPage() {
<td style={{ ...cellStyle, textAlign: "left", color: txn.type === "DR" ? "#e03131" : "#2f9e44" }}>
{parseFloat(txn.amount).toLocaleString("en-IN", {
minimumFractionDigits: 2,
})} <span style={{fontSize:'10px'}}>{txn.type==="DR"?"Dr.":"Cr."}</span>
})} <span style={{ fontSize: '10px' }}>{txn.type === "DR" ? "Dr." : "Cr."}</span>
</td>
</tr>
))}