From 26e6dea82bfbfbf16f89e2b84b96cafeb4f417bb Mon Sep 17 00:00:00 2001 From: "tomosa.sarkar" Date: Sun, 13 Jul 2025 19:21:53 +0530 Subject: [PATCH] feat: api integration for account tab fix: layout design feat : add screen for account tab --- .../account_statement/accountStatement.tsx | 222 ++++++++++++++++ .../accounts/account_statement/page.tsx | 28 +++ src/app/(main)/accounts/layout.tsx | 105 ++++---- src/app/(main)/accounts/page.tsx | 7 +- src/app/(main)/home/page.tsx | 59 +---- src/app/(main)/home/statementModel.tsx | 51 ---- src/app/(main)/layout.tsx | 236 +++++++++--------- 7 files changed, 442 insertions(+), 266 deletions(-) create mode 100644 src/app/(main)/accounts/account_statement/accountStatement.tsx create mode 100644 src/app/(main)/accounts/account_statement/page.tsx delete mode 100644 src/app/(main)/home/statementModel.tsx diff --git a/src/app/(main)/accounts/account_statement/accountStatement.tsx b/src/app/(main)/accounts/account_statement/accountStatement.tsx new file mode 100644 index 0000000..50a9fed --- /dev/null +++ b/src/app/(main)/accounts/account_statement/accountStatement.tsx @@ -0,0 +1,222 @@ +"use client"; +import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider } from "@mantine/core"; +import { DateInput } from '@mantine/dates'; +import { useEffect, useState } from "react"; +import { useSearchParams } from "next/navigation"; +import { notifications } from "@mantine/notifications"; +import dayjs from 'dayjs'; +import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'; +import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; +import customParseFormat from 'dayjs/plugin/customParseFormat'; +dayjs.extend(isSameOrAfter); +dayjs.extend(isSameOrBefore); +dayjs.extend(customParseFormat); + +export default function AccountStatementPage() { + const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]); + const [selectedAccNo, setSelectedAccNo] = useState(null); + const [startDate, setStartDate] = useState(null); + const [endDate, setEndDate] = useState(null); + const [transactions, setTransactions] = useState([]); + const searchParams = useSearchParams(); + const passedAccNo = searchParams.get("accNo"); + + useEffect(() => { + const saved = sessionStorage.getItem("accountData"); + if (saved) { + const parsed = JSON.parse(saved); + const options = parsed.map((acc: any) => ({ + label: `${acc.stAccountNo} - ${acc.stAccountType}`, + value: acc.stAccountNo, + })); + setAccountOptions(options); + if (passedAccNo) { + setSelectedAccNo(passedAccNo); + //Automatically fetch last 5 transactions if accNo is passed + const token = localStorage.getItem("access_token"); + fetch(`/api/transactions/account/${passedAccNo}`, { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }, + }) + .then(res => res.json()) + .then(data => { + if (Array.isArray(data)) { + const last5 = data.slice(-5).reverse(); + setTransactions(last5); + } + }) + .catch(() => { + notifications.show({ + withBorder: true, + color: "red", + title: "Fetch Failed", + message: "Could not load recent transactions.", + autoClose: 5000, + }); + }); + } + } + }, [passedAccNo]); + + + const handleAccountTransaction = async () => { + if (!selectedAccNo || !startDate || !endDate) { + notifications.show({ + withBorder: true, + color: "red", + title: "Missing field", + message: "Please select Account number,Start date and End date", + autoClose: 5000, + }); + return; + } + const start = dayjs(startDate); + const end = dayjs(endDate); + const today = dayjs().startOf('day'); + if (end.isAfter(today)) { + notifications.show({ + withBorder: true, + color: "red", + title: "Invalid End Date", + message: "End date can not be the future date.", + autoClose: 4000, + }); + return; + } + if (start.isAfter(end)) { + notifications.show({ + withBorder: true, + color: "red", + title: "Invalid Start Date", + message: "Start date can not be less than end date", + autoClose: 4000, + }); + return; + } + if (end.diff(start, "day") > 60) { + notifications.show({ + withBorder: true, + color: "red", + title: "Invalid Date range", + message: "End date must be within 60 days from start date", + autoClose: 4000, + }); + return; + } + 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}`, + }, + }); + 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); + } + } catch { + notifications.show({ + withBorder: true, + color: "red", + title: "Please try again later", + message: "Unable to Fetch Account Transaction, Please try again later", + autoClose: 5000, + }); + } + }; + const cellStyle = { + border: "1px solid #ccc", + padding: "8px", + }; + + return ( + + {/* Left side – form */} + + + Account Statement +