tomosa.sarkar/IB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : implement the quick pay screen

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-07-19 16:38:11 +05:30
parent f67319762f
commit eae989642b
7 changed files with 482 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/app/(main)/accounts/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
import { Group, Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
@@ -30,7 +30,7 @@ export default function AccountSummary() {
const data = await response.json();
if (response.ok && Array.isArray(data)) {
setAccountData(data);
sessionStorage.setItem('accountData',JSON.stringify(data))
sessionStorage.setItem("accountData", JSON.stringify(data));
}
} catch {
notifications.show({
@@ -64,45 +64,75 @@ export default function AccountSummary() {
padding: "10px",
};
const rows = accountData.map((acc, index) => (
<tr key={index}>
<td style={{ ...cellStyle, textAlign: "left" }}>{acc.custname}</td>
<td style={{ ...cellStyle, textAlign: "left" }}>{acc.stAccountType}</td>
<td style={{ ...cellStyle, textAlign: "right", color: '#1c7ed6', cursor: "pointer" }}
onClick={() => router.push(`/accounts/account_statement?accNo=${acc.stAccountNo}`)}>
{acc.stAccountNo}</td>
<td style={{ ...cellStyle, textAlign: "right" }}>
{parseFloat(acc.stAvailableBalance).toLocaleString("en-IN", {
minimumFractionDigits: 2,
})}
</td>
</tr>
));
// Filter accounts
const depositAccounts = accountData.filter(
(acc) => !acc.stAccountType.toUpperCase().includes("LN")
);
const loanAccounts = accountData.filter((acc) =>
acc.stAccountType.toUpperCase().includes("LN")
);
// Function to render table rows
const renderRows = (data: accountData[]) =>
data.map((acc, index) => (
<tr key={index}>
<td style={{ ...cellStyle, textAlign: "left" }}>{acc.stAccountType}</td>
<td
style={{ ...cellStyle, textAlign: "right", color: "#1c7ed6", cursor: "pointer" }}
onClick={() => router.push(`/accounts/account_details?accNo=${acc.stAccountNo}`)}
>
{acc.stAccountNo}
</td>
<td style={{ ...cellStyle, textAlign: "right" }}>
{parseFloat(acc.stAvailableBalance).toLocaleString("en-IN", {
minimumFractionDigits: 2,
})}
</td>
</tr>
));
// Table component
const renderTable = (title: string, rows: JSX.Element[]) => (
<Paper shadow="sm" radius="md" p="md" withBorder w="100%"
// bg="#97E6B8"
>
<Title order={4} mb="sm">
{title}
</Title>
<ScrollArea>
<Table style={{ borderCollapse: "collapse", width: "100%" }}>
<thead>
<tr style={{ backgroundColor: "#3385ff" }}>
<th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
<th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
<th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</Table>
</ScrollArea>
</Paper>
);
if (authorized) {
return (
<Paper shadow="sm" radius="md" p="md" withBorder>
<Title order={3} mb="sm">
Account Summary (Currency - INR)
</Title>
<ScrollArea>
<Table style={{ borderCollapse: "collapse", width: "100%" }}>
<thead>
<tr style={{ backgroundColor: "#3385ff" }}>
<th style={{ ...cellStyle, textAlign: "left" }}>Customer Name</th>
<th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
<th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
<th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</Table>
</ScrollArea>
<Paper shadow="sm" radius="md" p="md" withBorder h={400}
// bg="linear-gradient(90deg,rgba(195, 218, 227, 1) 0%, rgba(151, 230, 184, 1) 50%)"
>
<Title order={3} mb="md">Account Summary</Title>
<Group align="flex-start" grow>
{/* Left table for Deposit Accounts */}
{depositAccounts.length > 0 && renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
{/* Right table for Loan Accounts (only shown if available) */}
{loanAccounts.length > 0 && renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
</Group>
<Text mt="sm" size="xs" c="dimmed">
* Book Balance includes uncleared effects.
</Text>
</Paper>
);
}
return null;
}