Fix: Home design
This commit is contained in:
@@ -4,9 +4,11 @@
|
||||
|
||||
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["8080"],"localPortNumber"=["8080"]
|
||||
|
||||
- run the api in localhost
|
||||
- run the api in localhost then port forward to Postgres
|
||||
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["5432"],"localPortNumber"=["5431"]
|
||||
|
||||
|
||||
- For CBS port forward
|
||||
aws ssm start-session --target i-0c850dcf8b85b1447 --document-name --profile kccb AWS-StartPortForwardingSession --parameters "portNumber"=["8686"],"localPortNumber"=["8686"]
|
||||
______________________________________________________________________
|
||||
|
||||
For database:
|
||||
|
||||
87
src/app/home/layout.tsx
Normal file
87
src/app/home/layout.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
import React from 'react';
|
||||
import { Box, Button, Flex, Group, Image, Text } from '@mantine/core';
|
||||
import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Providers } from '../providers';
|
||||
import logo from '@/app/image/logo.jpg';
|
||||
import NextImage from 'next/image';
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
|
||||
async function handleLogout(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
localStorage.removeItem("access_token");
|
||||
router.push("/login")
|
||||
}
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#e6ffff", width: "100%", height: '100vh' }}>
|
||||
{/* Image -Logo */}
|
||||
<Box style={{
|
||||
position: 'relative', width: '100%', height: '11%',
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
}}>
|
||||
<Image
|
||||
// radius="md"
|
||||
fit="cover"
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '60%',
|
||||
left: '80%',
|
||||
color: 'white',
|
||||
textShadow: '1px 1px 2px black',
|
||||
}}
|
||||
>
|
||||
<IconPhoneFilled size={20} />
|
||||
Toll Free No : 1800-180-8008
|
||||
</Text>
|
||||
</Box>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "left",
|
||||
justifyContent: "right",
|
||||
}}>
|
||||
<Group mt="md" gap="sm">
|
||||
<Link href="/">
|
||||
<Button leftSection={<IconHome />} variant="light" color="blue">Home</Button>
|
||||
</Link>
|
||||
<Link href="/accounts">
|
||||
<Button leftSection={<IconBook />} variant="subtle">Accounts</Button>
|
||||
</Link>
|
||||
<Link href="/send-money">
|
||||
<Button leftSection={<IconCurrencyRupee />} variant="subtle">Send Money</Button>
|
||||
</Link>
|
||||
<Link href="/settings">
|
||||
<Button leftSection={<IconSettings />} variant="subtle">Settings</Button>
|
||||
</Link>
|
||||
|
||||
<Button leftSection={<IconLogout />} variant="subtle" onClick={handleLogout}>Logout</Button>
|
||||
|
||||
</Group>
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
{/* Footer */}
|
||||
<Flex justify="center" align="center">
|
||||
<Text c="dimmed" size="xs">© 2025 Kangra Central Co- Operative Bank</Text>
|
||||
</Flex>
|
||||
</div>
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { AppShell, Button, Input, Group, Stack, Tooltip, UnstyledButton, Text, Avatar, Title, Divider, Box, Select, Paper, Image, Switch, Flex, TextInput, Center } from '@mantine/core';
|
||||
import { IconBook, IconBuildingBank, IconCurrencyRupee, IconEye, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-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 logo from '@/app/image/logo.jpg';
|
||||
import NextImage from 'next/image';
|
||||
|
||||
|
||||
export default function Home() {
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
@@ -43,201 +42,151 @@ export default function Home() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (authorized) {
|
||||
return (
|
||||
<Providers>
|
||||
if (authorized) {
|
||||
return (
|
||||
<Providers>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#e6ffff", width: "100%", height: '100vh',
|
||||
}}>
|
||||
<Box style={{
|
||||
position: 'relative', width: '100%', height: '11%',
|
||||
flex: 1,
|
||||
marginLeft: '20px',
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
}}>
|
||||
<Image
|
||||
// radius="md"
|
||||
fit="cover"
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '60%',
|
||||
left: '80%',
|
||||
color: 'white',
|
||||
textShadow: '1px 1px 2px black',
|
||||
}}
|
||||
>
|
||||
<IconPhoneFilled size={20} />
|
||||
Toll Free No : 1800-180-8008
|
||||
</Text>
|
||||
</Box>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "left",
|
||||
justifyContent: "right",
|
||||
}}
|
||||
>
|
||||
<Group mt="md" gap="sm">
|
||||
<Button leftSection={<IconHome />} variant="light" color="blue">Home</Button>
|
||||
<Button leftSection={<IconBook />} variant="subtle">Accounts</Button>
|
||||
<Button leftSection={<IconCurrencyRupee />} variant="subtle">Send Money</Button>
|
||||
{/* <Button variant="subtle">IMPS</Button> */}
|
||||
<Button leftSection={<IconSettings />} variant="subtle">Settings</Button>
|
||||
<Button leftSection={<IconLogout />} variant="subtle" onClick={handleLogout}>Logout</Button>
|
||||
</Group>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
marginLeft: '20px',
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "left",
|
||||
}}
|
||||
>
|
||||
<Title order={3} style={{ fontFamily: "inter", fontSize: '28px' }}>Welcome, Rajat Kumar Maharana</Title>
|
||||
{/* */}
|
||||
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: '15px' }}>Last logged in at 29/06/25, 05:35 PM</Text>
|
||||
</div>
|
||||
<Group
|
||||
style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '20px', display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}>
|
||||
<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: '20px' }}>
|
||||
<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.stAccountNo
|
||||
}))}
|
||||
value={selectedDA}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedDA}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 20,
|
||||
width: 125
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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">Get Statement</Button>
|
||||
</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.stAccountNo
|
||||
}))}
|
||||
value={selectedLN}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedLN}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 25,
|
||||
width: 125
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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">Get Statement</Button>
|
||||
</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>
|
||||
<Flex justify="center" align="center">
|
||||
<Text c="dimmed" size="xs">© 2025 Kangra Central Co- Operative Bank</Text>
|
||||
</Flex>
|
||||
flexDirection: "column",
|
||||
justifyContent: "left",
|
||||
}}
|
||||
>
|
||||
<Title order={3} style={{ fontFamily: "inter", fontSize: '28px' }}>Welcome, Rajat Kumar Maharana</Title>
|
||||
{/* */}
|
||||
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: '15px' }}>Last logged in at 29/06/25, 05:35 PM</Text>
|
||||
</div>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
<Group
|
||||
style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '20px', display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}>
|
||||
<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: '20px' }}>
|
||||
<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.stAccountNo
|
||||
}))}
|
||||
value={selectedDA}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedDA}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 20,
|
||||
width: 125
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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">Get Statement</Button>
|
||||
</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.stAccountNo
|
||||
}))}
|
||||
value={selectedLN}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedLN}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 25,
|
||||
width: 125
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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">Get Statement</Button>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -40,13 +40,10 @@ export default function Login() {
|
||||
|
||||
async function handleLogin(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
setIsLogging(true);
|
||||
|
||||
const onlyDigit = /^\d{11}$/;
|
||||
if (!onlyDigit.test(CIF)) {
|
||||
setError('Input value must be 11 digit');
|
||||
}
|
||||
|
||||
if (inputCaptcha !== captcha) {
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
@@ -68,6 +65,7 @@ export default function Login() {
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
setIsLogging(true);
|
||||
if (response.ok) {
|
||||
console.log(data);
|
||||
const token = data.token;
|
||||
@@ -81,6 +79,7 @@ export default function Login() {
|
||||
|
||||
}
|
||||
else {
|
||||
setIsLogging(false);
|
||||
notifications.show({
|
||||
withBorder: true,
|
||||
color: "red",
|
||||
@@ -255,7 +254,7 @@ export default function Login() {
|
||||
/>
|
||||
<Button type="submit" disabled={isLogging} fullWidth variant="filled" mt="md">
|
||||
{/* Login */}
|
||||
{isLogging ? "Logging.." : "Login"}
|
||||
{isLogging ? "Logging...." : "Login"}
|
||||
</Button>
|
||||
</form>
|
||||
</Flex>
|
||||
|
||||
Reference in New Issue
Block a user