tomosa.sarkar/IB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : upgrade the home screen

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-07-03 10:57:21 +05:30
parent a46670be1f
commit 74e6394797
5 changed files with 106 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/document/grievance.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

78
src/app/home/page.tsx
View File

@@ -1,8 +1,8 @@
"use client";
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 { 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 { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { Providers } from "../providers";
@@ -46,8 +46,11 @@ export default function Home() {
if (authorized) {
return (
<Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: '100vh' }}>
<Box style={{ position: 'relative', width: '100%', height: '12%' }}>
<div
style={{
backgroundColor: "#e6ffff", width: "100%", height: '100vh',
}}>
<Box style={{ position: 'relative', width: '100%', height: '11%' }}>
<Image
// radius="md"
fit="cover"
@@ -61,23 +64,20 @@ export default function Home() {
position: 'absolute',
top: '60%',
left: '80%',
// transform: 'translate(-50%, -50%)',
color: 'yellow',
// fontSize: '24px',
// fontWeight: 'bold',
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: "center",
justifyContent: "right",
}}
>
<Group mt="md" gap="sm">
@@ -98,23 +98,26 @@ export default function Home() {
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>
<Title order={3} style={{ fontFamily: "inter", fontSize: '28px' }}>Welcome, Rajat Kumar Maharana</Title>
{/* &nbsp; */}
<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" }}>
<Text fw={700}>Show Balance </Text>
<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="lg">
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
{/* <IconBuildingBank /> */}
<Group justify="space-between">
<Text size="sm">Deposit Account</Text>
<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"
// placeholder="Select A/C No"
data={depositAccounts.map(acc => ({
value: acc.stAccountNo,
label: acc.stAccountNo
@@ -127,7 +130,8 @@ export default function Home() {
input: {
backgroundColor: "white",
color: "black",
width: 150
marginLeft: 20,
width: 125
}
}}
/>
@@ -138,10 +142,11 @@ export default function Home() {
</Title>
<Button fullWidth mt="xs">Get Statement</Button>
</Paper>
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
{/* <IconCoinRupee /> */}
<Group justify="space-between">
<Text size="sm">Loan Account</Text>
<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 => ({
@@ -156,7 +161,8 @@ export default function Home() {
input: {
backgroundColor: "white",
color: "black",
width: 150
marginLeft: 25,
width: 125
}
}}
/>
@@ -167,14 +173,30 @@ export default function Home() {
</Title>
<Button fullWidth mt="xs">Get Statement</Button>
</Paper>
<Paper p="md" radius="md" style={{ width: 250, backgroundColor: '#f5f5f5', marginLeft: '170px' }}>
<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>
@@ -184,7 +206,7 @@ export default function Home() {
marginTop: 0,
padding: "20px",
display: "flex",
alignItems: "center",
// alignItems: "center",
justifyContent: "left",
}}
>

BIN
src/app/image/vision.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 132 KiB

40
src/app/login/clientCarousel.tsx
View File

@@ -2,24 +2,42 @@
import { Box, Image, ActionIcon } from '@mantine/core';
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
import { useRef } from 'react';
import { useRef, useState, useEffect } from 'react';
import DICGC from '@/app/image/DICGC_image.jpg';
import objective from '@/app/image/objective.jpg';
import frontPage from '@/app/image/ib_front_page.jpg';
import vision from '@/app/image/vision.jpg';
export default function CustomCarousel() {
const scrollRef = useRef<HTMLDivElement>(null);
const scrollBy = 300; // px per click
const images = [DICGC, objective, vision];
const [currentIndex, setCurrentIndex] = useState(0);
const scrollLeft = () => {
scrollRef.current?.scrollBy({ left: -scrollBy, behavior: 'smooth' });
const scrollToIndex = (index: number) => {
const container = scrollRef.current;
if (!container) return;
const slideWidth = container.offsetWidth; // full width per slide
container.scrollTo({
left: slideWidth * index,
behavior: 'smooth',
});
};
const scrollRight = () => {
scrollRef.current?.scrollBy({ left: scrollBy, behavior: 'smooth' });
const nextIndex = (currentIndex + 1) % images.length;
setCurrentIndex(nextIndex);
scrollToIndex(nextIndex);
};
const images = [DICGC, objective, frontPage];
const scrollLeft = () => {
const prevIndex = (currentIndex - 1 + images.length) % images.length;
setCurrentIndex(prevIndex);
scrollToIndex(prevIndex);
};
useEffect(() => {
scrollToIndex(currentIndex);
}, [currentIndex]);
return (
<Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
@@ -28,10 +46,8 @@ export default function CustomCarousel() {
ref={scrollRef}
style={{
display: 'flex',
overflowX: 'auto',
overflowX: 'hidden',
scrollSnapType: 'x mandatory',
gap: '1rem',
padding: '1rem',
scrollBehavior: 'smooth',
}}
>
@@ -64,7 +80,7 @@ export default function CustomCarousel() {
{/* Left Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
color="grey"
onClick={scrollLeft}
style={{
position: 'absolute',
@@ -80,7 +96,7 @@ export default function CustomCarousel() {
{/* Right Scroll Button */}
<ActionIcon
variant="filled"
color="blue"
color="grey"
onClick={scrollRight}
style={{
position: 'absolute',

45
src/app/login/page.tsx
View File

@@ -1,17 +1,15 @@
"use client";
import React, { useState, useEffect } from "react";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack } from "@mantine/core";
import { Text, Button, TextInput, PasswordInput, Title, Card, Group, Flex, Box, Image, Anchor, Stack, Popover, ActionIcon } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import { Carousel } from '@mantine/carousel';
import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation";
import NextImage from "next/image";
import myImage from '@/app/image/ebanking.jpg';
import frontPage from '@/app/image/ib_front_page.jpg';
import DICGC from '@/app/image/DICGC_image.jpg';
import objective from '@/app/image/objective.jpg';
import dynamic from 'next/dynamic';
function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
@@ -24,12 +22,9 @@ export default function Login() {
const [psw, SetPsw] = useState("");
const [captcha, setCaptcha] = useState("");
const [inputCaptcha, setInputCaptcha] = useState("");
const ClientCarousel =dynamic(() => import ('./clientCarousel'),{ssr:false});
// const [isClient,SetIsClient] =useState(false);
// useEffect(()=> SetIsClient(true),[]);
const [isLogging, setIsLogging] = useState(false);
const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
useEffect(() => {
setCaptcha(generateCaptcha());
}, []);
@@ -41,6 +36,7 @@ export default function Login() {
async function handleLogin(e: React.FormEvent) {
e.preventDefault();
setIsLogging(false);
const onlyDigit = /^\d{11}$/;
if (!onlyDigit.test(CIF)) {
setError('Input value must be 11 digit');
@@ -62,6 +58,7 @@ export default function Login() {
localStorage.setItem("customerNumber", CIF);
localStorage.setItem("password", psw);
localStorage.setItem("access_token", token);
setIsLogging(true);
router.push("/home");
} else {
// SetCIF('');
@@ -82,13 +79,24 @@ export default function Login() {
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
<Image
// radius="md"
fit="cover"
src={myImage}
component={NextImage}
alt="ebanking"
style={{ width: "100%", height: "100%" }}
/>
<Text
style={{
position: 'absolute',
top: '50%',
left: '64%',
color: 'black',
textShadow: '1px 1px 2px blue',
}}
>
{/* <IconBuildingBank/> */}
Head Office : Dharmshala, District: Kangra(H.P), Pincode: 176215
</Text>
</Box>
<div style={{ marginTop: '10px' }}>
<Box
@@ -227,8 +235,9 @@ export default function Login() {
onChange={(e) => setInputCaptcha(e.currentTarget.value)}
required
/>
<Button type="submit" fullWidth variant="filled" mt="md">
Login
<Button type="submit" disabled={isLogging} fullWidth variant="filled" mt="md">
{/* Login */}
{isLogging ? "Logging.." :"Login"}
</Button>
</form>
</Flex>
@@ -239,11 +248,12 @@ export default function Login() {
</div>
<Box style={{
width: "100%",
height: '60vh',
height: '50vh',
textAlign: "left",
marginTop:0,
marginTop: 10,
// border: "1px solid blue"
}}>
<ClientCarousel/>
<ClientCarousel />
</Box>
<Box
component="footer"
@@ -262,7 +272,8 @@ export default function Login() {
<Anchor href="document/disclaimer.pdf" target="_blank" rel="noopener noreferrer">Disclaimer</Anchor> |{" "}
<Anchor href="document/privacy_policy.pdf" target="_blank" rel="noopener noreferrer">Privacy Policy</Anchor> |{" "}
<Anchor href="document/phishing.pdf" target="_blank" rel="noopener noreferrer">Phishing</Anchor> |{" "}
<Anchor href="document/security_tips.pdf" target="_blank" rel="noopener noreferrer">Security Tips</Anchor>
<Anchor href="document/security_tips.pdf" target="_blank" rel="noopener noreferrer">Security Tips</Anchor> |{" "}
<Anchor href="document/grievance.jpg" target="_blank" rel="noopener noreferrer">Grievances</Anchor>
</Text>
</Box>
</div>