feat :Home page design
This commit is contained in:
@@ -1,14 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@mantine/core";
|
||||
import React from 'react';
|
||||
import { AppShell, Button, Input, Group, Stack, Tooltip, UnstyledButton, Text, Avatar, Title, Divider, Box, Select, Paper, Image, Switch, Flex } from '@mantine/core';
|
||||
import { IconBook, IconBuildingBank, IconCoinRupee, IconCurrencyRupee, IconHome, IconLogout, IconSettings, IconUserCircle } from '@tabler/icons-react';
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
|
||||
import { Providers } from "../providers";
|
||||
import myImage from '@/app/image/ebanking.jpg';
|
||||
import NextImage from 'next/image';
|
||||
|
||||
export default function Home() {
|
||||
const[authorized,SetAuthorized] =useState<boolean|null>(null);
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const router = useRouter();
|
||||
const accountData = [
|
||||
{ "stAccountNo": "50078975412", "stAccountType": "SA", "stAvailableBalance": "10000.0" },
|
||||
{ "stAccountNo": "50078975413", "stAccountType": "SA", "stAvailableBalance": "12000.0" },
|
||||
{ "stAccountNo": "50078975414", "stAccountType": "SA", "stAvailableBalance": "14000.0" },
|
||||
{ "stAccountNo": "60078975412", "stAccountType": "LN", "stAvailableBalance": "100000.0" },
|
||||
{ "stAccountNo": "60078975413", "stAccountType": "LN", "stAvailableBalance": "120000.0" }
|
||||
]
|
||||
const savingsAccounts = accountData.filter(acc => acc.stAccountType === "SA");
|
||||
const [selectedSA, setSelectedSA] = useState(savingsAccounts[0]?.stAccountNo || "");
|
||||
const selectedSAData = savingsAccounts.find(acc => acc.stAccountNo === selectedSA);
|
||||
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);
|
||||
|
||||
async function handleLogout(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
@@ -21,18 +38,153 @@ export default function Home() {
|
||||
SetAuthorized(false);
|
||||
router.push("/login");
|
||||
}
|
||||
else{
|
||||
else {
|
||||
SetAuthorized(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
if(authorized){
|
||||
|
||||
if (authorized) {
|
||||
return (
|
||||
<>
|
||||
<p>Welcome to IB portal</p>
|
||||
<Button onClick={handleLogout}>Logout</Button>
|
||||
</>
|
||||
);
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: '100vh'}}>
|
||||
<Image
|
||||
// radius="md"
|
||||
fit="cover"
|
||||
src={myImage}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "12%" }}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
alignItems: "left",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<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,
|
||||
padding: "20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "left",
|
||||
}}
|
||||
>
|
||||
<Title order={3}>Welcome, Rajat Kumar Maharana</Title>
|
||||
<Text size="xs" c="gray">Last logged in at 29/06/25, 05:35 PM</Text>
|
||||
</div>
|
||||
<Group
|
||||
style={{ flex: 1, padding: "10px 10px 4px 10px", display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}>
|
||||
<Text fw={700}>Show Balance </Text>
|
||||
<Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
|
||||
onChange={(event) => setShowBalance(event.currentTarget.checked)} />
|
||||
</Group>
|
||||
<div style={{ flex: 1, padding: "10px", display: "flex", alignItems: "center", justifyContent: "left" }}>
|
||||
<Group grow gap="lg">
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 300 }}>
|
||||
{/* <IconBuildingBank /> */}
|
||||
<Group justify="space-between">
|
||||
<Text size="sm">Savings Account</Text>
|
||||
<Select
|
||||
placeholder="Select A/C No"
|
||||
data={savingsAccounts.map(acc => ({
|
||||
value: acc.stAccountNo,
|
||||
label: acc.stAccountNo
|
||||
}))}
|
||||
value={selectedSA}
|
||||
// @ts-ignore
|
||||
onChange={setSelectedSA}
|
||||
size="xs"
|
||||
styles={{
|
||||
input: {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
width: 150
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Text c="dimmed">{Number(selectedSAData?.stAccountNo || 0)}</Text>
|
||||
<Title order={2} mt="md">
|
||||
{showBalance ? `₹${Number(selectedSAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
|
||||
</Title>
|
||||
<Button fullWidth mt="xs">Get Statement</Button>
|
||||
</Paper>
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0' }}>
|
||||
{/* <IconCoinRupee /> */}
|
||||
<Group justify="space-between">
|
||||
<Text size="sm">Current 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",
|
||||
width: 150
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
</Group>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
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>
|
||||
</div>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -42,14 +42,11 @@ export default function Login() {
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#f8f9fa",
|
||||
padding: "20px",
|
||||
fontFamily: "sans-serif",
|
||||
width:"100%",
|
||||
height: '100vh',
|
||||
// border: "solid black"
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
radius="md"
|
||||
fit="cover"
|
||||
src={myImage}
|
||||
component={NextImage}
|
||||
@@ -87,7 +84,6 @@ export default function Login() {
|
||||
<div style={{ display: "flex", height: "70vh" }}>
|
||||
<div style={{ flex: 1, backgroundColor: "#c1e0f0", display: "flex" }}>
|
||||
<Image
|
||||
radius="md"
|
||||
fit="cover"
|
||||
src={frontPage}
|
||||
component={NextImage}
|
||||
|
||||
Reference in New Issue
Block a user