Fix: layout of the application
Feat: Create page for account Summary
This commit is contained in:
273
src/app/(main)/home/page.tsx
Normal file
273
src/app/(main)/home/page.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
"use client";
|
||||
|
||||
import React 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';
|
||||
import StatementModel from './statementModel';
|
||||
|
||||
interface accountData {
|
||||
stAccountNo: string;
|
||||
stAccountType: string;
|
||||
stAvailableBalance: string;
|
||||
custname: string;
|
||||
activeAccounts: string;
|
||||
}
|
||||
|
||||
interface statementData {
|
||||
name: string;
|
||||
date: string;
|
||||
amount: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const router = useRouter();
|
||||
const [accountData, SetAccountData] = useState<accountData[]>([]);
|
||||
const depositAccounts = accountData.filter(acc => acc.stAccountType !== "LN");
|
||||
const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || "");
|
||||
const selectedDAData = depositAccounts.find(acc => acc.stAccountNo === selectedDA);
|
||||
const loanAccounts = accountData.filter(acc => acc.stAccountType === "LN");
|
||||
const [selectedLN, setSelectedLN] = useState(loanAccounts[0]?.stAccountNo || "");
|
||||
const selectedLNData = loanAccounts.find(acc => acc.stAccountNo === selectedLN);
|
||||
const [showBalance, setShowBalance] = useState(false);
|
||||
const [openStatement, setOpenStatement] = useState(false);
|
||||
const [statementData, setStatementData] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
|
||||
async function handleFetchUserDetails() {
|
||||
// e.preventDefault();
|
||||
try {
|
||||
const token = localStorage.getItem("access_token");
|
||||
const response = await fetch('api/customer', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
});
|
||||
const data = await response.json();
|
||||
if (response.ok && Array.isArray(data)) {
|
||||
SetAccountData(data);
|
||||
if (data.length > 0) {
|
||||
const firstDeposit = data.find(acc => acc.stAccountType !== "LN");
|
||||
const firstLoan = data.find(acc => acc.stAccountType === "LN");
|
||||
if (firstDeposit) setSelectedDA(firstDeposit.stAccountNo);
|
||||
if (firstLoan) setSelectedLN(firstLoan.stAccountNo);
|
||||
}
|
||||
}
|
||||
else { throw new Error(); }
|
||||
}
|
||||
catch {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Please try again later",
|
||||
message: "Unable to Fetch, Please try again later",
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function handleGetAccountStatement(accountNo: string) {
|
||||
// e.preventDefault();
|
||||
setOpenStatement(true);
|
||||
setLoading(true);
|
||||
try {
|
||||
const token = localStorage.getItem("access_token");
|
||||
const response = await fetch(`api//transactions/account/${accountNo}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
});
|
||||
const data = await response.json();
|
||||
if (response.ok) {
|
||||
console.log(data);
|
||||
setStatementData(data);
|
||||
}
|
||||
else { throw new Error(); }
|
||||
}
|
||||
catch {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
title: "Please try again later",
|
||||
message: "Unable to Fetch the statement, Please try again later",
|
||||
autoClose: 5000,
|
||||
});
|
||||
}
|
||||
finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (!token) {
|
||||
SetAuthorized(false);
|
||||
router.push("/login");
|
||||
}
|
||||
else {
|
||||
SetAuthorized(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (authorized) {
|
||||
handleFetchUserDetails();
|
||||
}
|
||||
}, [authorized]);
|
||||
|
||||
if (authorized) {
|
||||
return (
|
||||
<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" }}>
|
||||
<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' }}>
|
||||
<Group grow gap="xl">
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350}}>
|
||||
<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
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
<StatementModel
|
||||
opened={openStatement}
|
||||
onClose={() => setOpenStatement(false)}
|
||||
loading={loading}
|
||||
data={statementData} error={''} />
|
||||
</Paper>
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
|
||||
<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
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
<StatementModel
|
||||
opened={openStatement}
|
||||
onClose={() => setOpenStatement(false)}
|
||||
loading={loading}
|
||||
data={statementData} error={''} />
|
||||
</Paper>
|
||||
<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",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Title order={4}>Send Money</Title>
|
||||
<Group mt="sm">
|
||||
<Select
|
||||
placeholder="Own / Other Accounts"
|
||||
data={[{ value: 'own', label: 'Own' }, { value: 'other', label: 'Other' }]}
|
||||
style={{ width: 180 }}
|
||||
/>
|
||||
<Select
|
||||
placeholder="Select Account"
|
||||
data={[{ value: 'acc1', label: 'Account 1' }, { value: 'acc2', label: 'Account 2' }]}
|
||||
style={{ width: 180 }}
|
||||
/>
|
||||
<Input placeholder="₹0.00" style={{ width: 100 }} />
|
||||
<Button>Proceed</Button>
|
||||
</Group>
|
||||
</Box>
|
||||
</div>
|
||||
</div>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
}
|
||||
51
src/app/(main)/home/statementModel.tsx
Normal file
51
src/app/(main)/home/statementModel.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
'use client';
|
||||
import React from "react";
|
||||
import { Modal, Text, Loader } from "@mantine/core";
|
||||
|
||||
type StatementItem = {
|
||||
date: string;
|
||||
type: string;
|
||||
amount: number;
|
||||
};
|
||||
|
||||
interface StatementModalProps {
|
||||
opened: boolean;
|
||||
onClose: () => void;
|
||||
loading: boolean;
|
||||
error: string;
|
||||
data: StatementItem[] | null;
|
||||
}
|
||||
|
||||
const StatementModal: React.FC<StatementModalProps> = ({
|
||||
opened,
|
||||
onClose,
|
||||
loading,
|
||||
error,
|
||||
data,
|
||||
}) => {
|
||||
return (
|
||||
<Modal opened={opened} onClose={onClose} title="Account Statement" size="lg">
|
||||
{loading && <Loader />}
|
||||
{error && <Text c="red">{error}</Text>}
|
||||
|
||||
{!loading && !error && data && data.length > 0 && (
|
||||
<div>
|
||||
{data.map((item, index) => (
|
||||
<div key={index} style={{ marginBottom: 10 }}>
|
||||
<Text>Date: {item.date}</Text>
|
||||
<Text>Type: {item.type}</Text>
|
||||
<Text>Amount: ₹{item.amount}</Text>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && data && data.length === 0 && (
|
||||
<Text>No transactions found.</Text>
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatementModal;
|
||||
|
||||
Reference in New Issue
Block a user