From ad758eb14dfd75087341bd8fbad926b89d379c93 Mon Sep 17 00:00:00 2001 From: "tomosa.sarkar" Date: Sat, 6 Dec 2025 13:54:20 +0530 Subject: [PATCH] fix: design in view profile and account overview feat : page add for e mandate otp --- .../(main)/accounts/account_details/page.tsx | 353 ++++++++++++---- .../account_statement/accountStatement.tsx | 35 +- src/app/(main)/accounts/page.tsx | 2 +- .../beneficiary/add_beneficiary/page.tsx | 2 +- .../beneficiary/view_beneficiary/page.tsx | 2 +- src/app/(main)/funds_transfer/page.tsx | 2 +- .../funds_transfer/send_beneficiary/page.tsx | 2 +- src/app/(main)/home/page.tsx | 18 +- src/app/(main)/layout.tsx | 46 +- .../settings/change_login_password/page.tsx | 2 +- .../settings/change_txn_password/page.tsx | 2 +- src/app/(main)/settings/page.tsx | 139 ++++-- .../(main)/settings/set_txn_limit/page.tsx | 2 +- .../(main)/settings/set_txn_password/page.tsx | 2 +- src/app/(main)/settings/user_name/page.tsx | 2 +- src/app/eMandate/authUtils.ts | 40 ++ src/app/eMandate/login/page/page.tsx | 5 +- src/app/eMandate/otpUtils.ts | 65 +++ src/app/eMandate/otp_page/page.tsx | 394 ++++++++++++++++++ src/app/image/DICGC_image - Copy.jpg | Bin 0 -> 136805 bytes src/app/image/DICGC_image.jpg | Bin 136805 -> 93231 bytes src/app/image/ib_front_3.jpg | Bin 0 -> 139452 bytes src/app/image/objective.jpg | Bin 99503 -> 103309 bytes src/app/login/clientCarousel.tsx | 47 ++- src/app/login/page.tsx | 40 +- 25 files changed, 1027 insertions(+), 175 deletions(-) create mode 100644 src/app/eMandate/authUtils.ts create mode 100644 src/app/eMandate/otpUtils.ts create mode 100644 src/app/eMandate/otp_page/page.tsx create mode 100644 src/app/image/DICGC_image - Copy.jpg create mode 100644 src/app/image/ib_front_3.jpg diff --git a/src/app/(main)/accounts/account_details/page.tsx b/src/app/(main)/accounts/account_details/page.tsx index e7f0795..cf639d6 100644 --- a/src/app/(main)/accounts/account_details/page.tsx +++ b/src/app/(main)/accounts/account_details/page.tsx @@ -2,16 +2,36 @@ import React, { useEffect, useState } from "react"; import { - Group, + Container, Paper, Select, Stack, Text, Title, + Group, + Badge, + Divider, + Loader, + Center, + Card, + SimpleGrid, + ThemeIcon, + Box, + rem, + Grid, } from "@mantine/core"; import { notifications } from "@mantine/notifications"; -import { useRouter } from "next/navigation"; -import { useSearchParams } from "next/navigation"; +import { + IconCreditCard, + IconWallet, + IconTrendingUp, + IconBuilding, + IconCircleCheck, + IconAlertCircle, + IconUser, + IconFileText, + IconCircleDot, +} from "@tabler/icons-react"; interface accountData { stAccountNo: string; @@ -19,23 +39,21 @@ interface accountData { stAvailableBalance: string; custname: string; stBookingNumber: string; - stApprovedAmount?: string; // optional for loan accounts + stApprovedAmount?: string; } -export default function AccountDetails() { - const router = useRouter(); +export default function App() { const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]); const [selectedAccNo, setSelectedAccNo] = useState(null); const [authorized, setAuthorized] = useState(null); const [accountDetails, setAccountDetails] = useState(null); - const searchParams = useSearchParams(); - const passedAccNo = searchParams.get("accNo"); + const [loading, setLoading] = useState(false); useEffect(() => { const token = localStorage.getItem("access_token"); if (!token) { setAuthorized(false); - router.push("/login"); + // router.push("/login"); } else { setAuthorized(true); } @@ -51,9 +69,6 @@ export default function AccountDetails() { value: acc.stAccountNo, })); setAccountOptions(options); - if (passedAccNo) { - handleAccountSelection(passedAccNo); - } } } }, [authorized]); @@ -62,6 +77,8 @@ export default function AccountDetails() { setSelectedAccNo(accNo); setAccountDetails(null); if (!accNo) return; + + setLoading(true); try { const token = localStorage.getItem("access_token"); const response = await fetch("/api/customer", { @@ -77,11 +94,10 @@ export default function AccountDetails() { if (response.ok && Array.isArray(data)) { const matched = data.find((acc) => acc.stAccountNo === accNo); if (matched) { - // Simulate approvedBalance for loan accounts if (matched.stAccountType.toUpperCase().includes("LN")) { matched.stApprovedAmount = ( parseFloat(matched.stAvailableBalance) + 20000 - ).toFixed(2); // dummy logic + ).toFixed(2); } setAccountDetails(matched); } else { @@ -102,79 +118,270 @@ export default function AccountDetails() { title: "Fetch failed", message: "Could not fetch account details. Try again.", }); + } finally { + setLoading(false); } }; + const getAccountIcon = (accountType: string) => { + const type = accountType.toUpperCase(); + if (type.includes("LN")) return IconTrendingUp; + if (type.includes("SA") || type.includes("SB") || type.includes("CC") || type.includes("OD") || type.includes("CA")) return IconWallet; + return IconBuilding; + }; + + const getAccountColor = (accountType: string) => { + const type = accountType.toUpperCase(); + if (type.includes("LN")) return "violet"; + if (type.includes("SA") || type.includes("SB") || type.includes("CC") || type.includes("OD") || type.includes("CA")) return "blue"; + return "cyan"; + }; + + const isLoanAccount = accountDetails?.stAccountType.toUpperCase().includes("LN"); + const AccountIcon = accountDetails ? getAccountIcon(accountDetails.stAccountType) : IconCreditCard; + const accountColor = accountDetails ? getAccountColor(accountDetails.stAccountType) : "blue"; + if (!authorized) return null; return ( - - - Account Details - - - } + styles={{ + input: { + borderRadius: rem(12), + }, + }} + /> + + - {accountDetails && ( - - - - Account Number - {accountDetails.stAccountNo} - + {/* Right side – Account Details */} + + + + Account Details + - - Account Type - {accountDetails.stAccountType} - + {/* Loading State */} + {loading && ( +
+ + + Loading account details... + +
+ )} - - Description - {accountDetails.stBookingNumber} - - - {/* Show Loan-specific fields */} - {accountDetails.stAccountType.toUpperCase().includes("LN") ? ( - <> - - Approved Balance - - ₹{parseFloat(accountDetails.stApprovedAmount || "0").toLocaleString("en-IN", { - minimumFractionDigits: 2, - })} - + {/* Account Details */} + {!loading && accountDetails && ( + + {/* Account Header Card */} + + + + + + + + + Account Number + + + {accountDetails.stAccountNo} + + - - Available Balance - - – ₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", { - minimumFractionDigits: 2, - })} - - - + + {accountDetails.stAccountType} + + + + + + + + Description + + {accountDetails.stBookingNumber} + + + + {/* Balance Cards */} + {isLoanAccount ? ( + + {/* Approved Balance */} + + + + + + + Approved Balance + + + + ₹ + {parseFloat(accountDetails.stApprovedAmount || "0").toLocaleString( + "en-IN", + { + minimumFractionDigits: 2, + } + )} + + + + {/* Outstanding Amount */} + + + + + + + Outstanding Amount + + + + – ₹ + {parseFloat(accountDetails.stAvailableBalance).toLocaleString( + "en-IN", + { + minimumFractionDigits: 2, + } + )} + + + ) : ( - - Available Balance - - ₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", { + + + + + + + Available Balance + + + + ₹ + {parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", { minimumFractionDigits: 2, })} - </Text> - </Group> + + )} + + {/* Account Information */} + + + Account Information + + + + + + + + + Account Holder + + + {accountDetails.custname} + + + + + + + + + Account Type + + + {accountDetails.stAccountType} + + + + + + + + + Booking Number + + + {accountDetails.stBookingNumber} + + + + + + + + + Status + + + } + > + Active + + + + - - )} - - + )} + + {/* Empty State */} + {!loading && !accountDetails && ( +
+ + + + + + {selectedAccNo + ? "No account details available" + : "Please select an account to view details"} + + +
+ )} + + + + ); -} +} \ No newline at end of file diff --git a/src/app/(main)/accounts/account_statement/accountStatement.tsx b/src/app/(main)/accounts/account_statement/accountStatement.tsx index a857460..a8565a5 100644 --- a/src/app/(main)/accounts/account_statement/accountStatement.tsx +++ b/src/app/(main)/accounts/account_statement/accountStatement.tsx @@ -1,11 +1,11 @@ "use client"; -import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack, Group, Card } from "@mantine/core"; +import { Paper, Select, Title, Button, Text, Grid, ScrollArea, Table, Divider, Center, Loader, Stack, Group, Card, ThemeIcon } from "@mantine/core"; import { DateInput } from '@mantine/dates'; import { useEffect, useRef, useState } from "react"; import { useSearchParams } from "next/navigation"; import { notifications } from "@mantine/notifications"; import dayjs from 'dayjs'; -import { IconFileSpreadsheet, IconFileText, IconFileTypePdf } from "@tabler/icons-react"; +import { IconCopy, IconFileSpreadsheet, IconFileText, IconFileTypePdf } from "@tabler/icons-react"; import { generatePDF } from "@/app/_components/statement_download/PdfGenerator"; import { generateExcel } from "@/app/_components/statement_download/CsvGenerator"; import { useMediaQuery } from "@mantine/hooks"; @@ -169,7 +169,7 @@ export default function AccountStatementPage() { {/* Left side – form */} - Account Transactions + Transaction Filters