refactor: api integrate for NEFT,RTGS.IMPS and account statement
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user