feat: Implemented page for quick pay and send to beneficiary feature for own and outside bank
ci: Modify the design of login page ci : modify the logic of home page, If no account is present then statement button change to apply now
This commit is contained in:
@@ -1,10 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button, Input, Group, Stack, Text, Title, Box, Select, Paper, Switch } from '@mantine/core';
|
||||
import { IconBuildingBank, IconEye } from '@tabler/icons-react';
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Providers } from "../../providers";
|
||||
import { notifications } from '@mantine/notifications';
|
||||
|
||||
@@ -28,9 +27,7 @@ export default function Home() {
|
||||
const selectedLNData = loanAccounts.find(acc => acc.stAccountNo === selectedLN);
|
||||
const [showBalance, setShowBalance] = useState(false);
|
||||
|
||||
|
||||
async function handleFetchUserDetails() {
|
||||
// e.preventDefault();
|
||||
try {
|
||||
const token = localStorage.getItem("access_token");
|
||||
const response = await fetch('api/customer', {
|
||||
@@ -49,10 +46,10 @@ export default function Home() {
|
||||
if (firstDeposit) setSelectedDA(firstDeposit.stAccountNo);
|
||||
if (firstLoan) setSelectedLN(firstLoan.stAccountNo);
|
||||
}
|
||||
} else {
|
||||
throw new Error();
|
||||
}
|
||||
else { throw new Error(); }
|
||||
}
|
||||
catch {
|
||||
} catch {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
@@ -72,8 +69,7 @@ export default function Home() {
|
||||
if (!token) {
|
||||
SetAuthorized(false);
|
||||
router.push("/login");
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
SetAuthorized(true);
|
||||
}
|
||||
}, []);
|
||||
@@ -89,112 +85,126 @@ export default function Home() {
|
||||
<Providers>
|
||||
<div>
|
||||
<Title order={4} style={{ padding: "10px" }}>Accounts Overview</Title>
|
||||
<Group
|
||||
style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '10px', display: "flex", alignItems: "center", justifyContent: "left", height: "1vh" }}>
|
||||
<Group style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '10px', display: "flex", alignItems: "center", justifyContent: "left", height: "1vh" }}>
|
||||
<IconEye size={20} />
|
||||
<Text fw={700} style={{ fontFamily: "inter", fontSize: '17px' }}>Show Balance </Text>
|
||||
<Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
|
||||
onChange={(event) => setShowBalance(event.currentTarget.checked)} />
|
||||
</Group>
|
||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '15px' }}>
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '15px' }}>
|
||||
<Group grow gap="xl">
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
|
||||
{/* Deposit Account Card */}
|
||||
<Paper p="md" radius="md" style={{
|
||||
backgroundColor: '#c1e0f0', width: 350, height: 195, display: 'flex',
|
||||
flexDirection: 'column', justifyContent: 'space-between'
|
||||
}}>
|
||||
<Group gap='xs'>
|
||||
<IconBuildingBank size={25} />
|
||||
<Text fw={700}>Deposit Account</Text>
|
||||
<Select
|
||||
// placeholder="Select A/C No"
|
||||
data={depositAccounts.map(acc => ({
|
||||
value: acc.stAccountNo,
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`
|
||||
}))}
|
||||
value={selectedDA}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedDA}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 5,
|
||||
width: 140
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{depositAccounts.length > 0 ? (
|
||||
<Select
|
||||
data={depositAccounts.map(acc => ({
|
||||
value: acc.stAccountNo,
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`
|
||||
}))}
|
||||
value={selectedDA}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedDA}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 5,
|
||||
width: 140
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm" ml="sm">No deposit account available</Text>
|
||||
)}
|
||||
</Group>
|
||||
<Text c="dimmed">{Number(selectedDAData?.stAccountNo || 0)}</Text>
|
||||
<Title order={2} mt="md">
|
||||
{showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
||||
</Title>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedDA)}>Get Statement</Button>
|
||||
|
||||
{depositAccounts.length > 0 ? (
|
||||
<>
|
||||
<Text c="dimmed">{Number(selectedDAData?.stAccountNo || 0)}</Text>
|
||||
<Title order={2} mt="md">
|
||||
{showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
||||
</Title>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedDA)}>Get Statement</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text c="dimmed" mt="md">Apply for a deposit account to get started</Text>
|
||||
<Button fullWidth mt="xs">Apply Now</Button>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
|
||||
|
||||
{/* Loan Account Card */}
|
||||
<Paper p="md" radius="md" style={{
|
||||
backgroundColor: '#c1e0f0', width: 350, height: 195, display: 'flex',
|
||||
flexDirection: 'column', justifyContent: 'space-between'
|
||||
}}
|
||||
>
|
||||
<Group gap='xs'>
|
||||
<IconBuildingBank size={25} />
|
||||
<Text fw={700}>Loan Account</Text>
|
||||
<Select
|
||||
placeholder="Select A/C No"
|
||||
data={loanAccounts.map(acc => ({
|
||||
value: acc.stAccountNo,
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`
|
||||
}))}
|
||||
value={selectedLN}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedLN}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 30,
|
||||
width: 140
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{loanAccounts.length > 0 ? (
|
||||
<Select
|
||||
data={loanAccounts.map(acc => ({
|
||||
value: acc.stAccountNo,
|
||||
label: `${acc.stAccountType}- ${acc.stAccountNo}`
|
||||
}))}
|
||||
value={selectedLN}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedLN}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 30,
|
||||
width: 140
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm" ml="sm">No loan account available</Text>
|
||||
)}
|
||||
</Group>
|
||||
<Text c="dimmed">{Number(selectedLNData?.stAccountNo || 0)}</Text>
|
||||
<Title order={2} mt="md">
|
||||
{showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
||||
</Title>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedLN)}>Get Statement</Button>
|
||||
|
||||
{loanAccounts.length > 0 ? (
|
||||
<>
|
||||
<Text c="dimmed">{Number(selectedLNData?.stAccountNo || 0)}</Text>
|
||||
<Title order={2} mt="md">
|
||||
{showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
||||
</Title>
|
||||
<Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedLN)}>Get Statement</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text c="dimmed" mt="md">Apply for a loan account to get started</Text>
|
||||
<Button fullWidth mt="xs">Apply Now</Button>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Important Links Card */}
|
||||
<Paper p="md" radius="md" style={{ width: 300, backgroundColor: '#FFFFFF', marginLeft: '130px', border: '1px solid grey' }}>
|
||||
<Title order={5} mb="sm">Important Links</Title>
|
||||
{/* <Title order={5} mb="sm" style={{ textAlign: 'center' }}>Loan EMI Calculator</Title> */}
|
||||
<Stack gap="xs">
|
||||
<Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button>
|
||||
<Button variant="light" color="blue" fullWidth>Branch Locator</Button>
|
||||
<Button variant="light" color="blue" fullWidth>Customer Care</Button>
|
||||
<Button variant="light" color="blue" fullWidth>FAQs</Button>
|
||||
</Stack>
|
||||
{/* <Group>
|
||||
<TextInput
|
||||
label="Loan Amount"
|
||||
placeholder=""
|
||||
/>
|
||||
<TextInput
|
||||
label="Interest Rate(%)"
|
||||
placeholder=""
|
||||
/>
|
||||
<TextInput
|
||||
label="Loan Tenure(Years)"
|
||||
placeholder=""
|
||||
/>
|
||||
<Button fullWidth style={{textAlign:'center'}}>Calculate</Button>
|
||||
</Group> */}
|
||||
</Paper>
|
||||
</Group>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
marginTop: 0,
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
// alignItems: "center",
|
||||
justifyContent: "left",
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Send Money Section */}
|
||||
<div style={{ padding: "20px", display: "flex", justifyContent: "left" }}>
|
||||
<Box>
|
||||
<Title order={4}>Send Money</Title>
|
||||
<Group mt="sm">
|
||||
@@ -217,4 +227,6 @@ export default function Home() {
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user