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"; "use client";
import React from 'react'; 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 { 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, IconCoinRupee, IconCurrencyRupee, IconHome, IconLogout, IconSettings, IconUserCircle } from '@tabler/icons-react'; import { IconBook, IconBuildingBank, IconCurrencyRupee, IconEye, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Providers } from "../providers"; import { Providers } from "../providers";
@@ -46,8 +46,11 @@ export default function Home() {
if (authorized) { if (authorized) {
return ( return (
<Providers> <Providers>
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: '100vh' }}> <div
<Box style={{ position: 'relative', width: '100%', height: '12%' }}> style={{
backgroundColor: "#e6ffff", width: "100%", height: '100vh',
}}>
<Box style={{ position: 'relative', width: '100%', height: '11%' }}>
<Image <Image
// radius="md" // radius="md"
fit="cover" fit="cover"
@@ -61,23 +64,20 @@ export default function Home() {
position: 'absolute', position: 'absolute',
top: '60%', top: '60%',
left: '80%', left: '80%',
// transform: 'translate(-50%, -50%)', color: 'white',
color: 'yellow',
// fontSize: '24px',
// fontWeight: 'bold',
textShadow: '1px 1px 2px black', textShadow: '1px 1px 2px black',
}} }}
> >
<IconPhoneFilled size={20} />
Toll Free No : 1800-180-8008 Toll Free No : 1800-180-8008
</Text> </Text>
</Box> </Box>
<div <div
style={{ style={{
flex: 1, flex: 1,
display: "flex", display: "flex",
alignItems: "left", alignItems: "left",
justifyContent: "center", justifyContent: "right",
}} }}
> >
<Group mt="md" gap="sm"> <Group mt="md" gap="sm">
@@ -98,23 +98,26 @@ export default function Home() {
justifyContent: "left", justifyContent: "left",
}} }}
> >
<Title order={3}>Welcome, Rajat Kumar Maharana</Title> <Title order={3} style={{ fontFamily: "inter", fontSize: '28px' }}>Welcome, Rajat Kumar Maharana</Title>
<Text size="xs" c="gray">Last logged in at 29/06/25, 05:35 PM</Text> {/* &nbsp; */}
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: '15px' }}>Last logged in at 29/06/25, 05:35 PM</Text>
</div> </div>
<Group <Group
style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '20px', display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}> 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} <Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
onChange={(event) => setShowBalance(event.currentTarget.checked)} /> onChange={(event) => setShowBalance(event.currentTarget.checked)} />
</Group> </Group>
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '20px' }}> <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '20px'}}>
<Group grow gap="lg"> <Group grow gap="xl">
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}> <Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350}}>
{/* <IconBuildingBank /> */}
<Group justify="space-between"> <Group gap='xs'>
<Text size="sm">Deposit Account</Text> <IconBuildingBank size={25} />
<Text fw={700}>Deposit Account</Text>
<Select <Select
placeholder="Select A/C No" // placeholder="Select A/C No"
data={depositAccounts.map(acc => ({ data={depositAccounts.map(acc => ({
value: acc.stAccountNo, value: acc.stAccountNo,
label: acc.stAccountNo label: acc.stAccountNo
@@ -127,7 +130,8 @@ export default function Home() {
input: { input: {
backgroundColor: "white", backgroundColor: "white",
color: "black", color: "black",
width: 150 marginLeft: 20,
width: 125
} }
}} }}
/> />
@@ -138,10 +142,11 @@ export default function Home() {
</Title> </Title>
<Button fullWidth mt="xs">Get Statement</Button> <Button fullWidth mt="xs">Get Statement</Button>
</Paper> </Paper>
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}> <Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350}}>
{/* <IconCoinRupee /> */}
<Group justify="space-between"> <Group gap='xs'>
<Text size="sm">Loan Account</Text> <IconBuildingBank size={25} />
<Text fw={700}>Loan Account</Text>
<Select <Select
placeholder="Select A/C No" placeholder="Select A/C No"
data={loanAccounts.map(acc => ({ data={loanAccounts.map(acc => ({
@@ -156,7 +161,8 @@ export default function Home() {
input: { input: {
backgroundColor: "white", backgroundColor: "white",
color: "black", color: "black",
width: 150 marginLeft: 25,
width: 125
} }
}} }}
/> />
@@ -167,14 +173,30 @@ export default function Home() {
</Title> </Title>
<Button fullWidth mt="xs">Get Statement</Button> <Button fullWidth mt="xs">Get Statement</Button>
</Paper> </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">Important Links</Title>
{/* <Title order={5} mb="sm" style={{ textAlign: 'center' }}>Loan EMI Calculator</Title> */}
<Stack gap="xs"> <Stack gap="xs">
<Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button> <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>Branch Locator</Button>
<Button variant="light" color="blue" fullWidth>Customer Care</Button> <Button variant="light" color="blue" fullWidth>Customer Care</Button>
<Button variant="light" color="blue" fullWidth>FAQs</Button> <Button variant="light" color="blue" fullWidth>FAQs</Button>
</Stack> </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> </Paper>
</Group> </Group>
</div> </div>
@@ -184,7 +206,7 @@ export default function Home() {
marginTop: 0, marginTop: 0,
padding: "20px", padding: "20px",
display: "flex", display: "flex",
alignItems: "center", // alignItems: "center",
justifyContent: "left", 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 { Box, Image, ActionIcon } from '@mantine/core';
import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'; 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 DICGC from '@/app/image/DICGC_image.jpg';
import objective from '@/app/image/objective.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() { export default function CustomCarousel() {
const scrollRef = useRef<HTMLDivElement>(null); const scrollRef = useRef<HTMLDivElement>(null);
const scrollBy = 300; // px per click const images = [DICGC, objective, vision];
const [currentIndex, setCurrentIndex] = useState(0);
const scrollLeft = () => { const scrollToIndex = (index: number) => {
scrollRef.current?.scrollBy({ left: -scrollBy, behavior: 'smooth' }); const container = scrollRef.current;
if (!container) return;
const slideWidth = container.offsetWidth; // full width per slide
container.scrollTo({
left: slideWidth * index,
behavior: 'smooth',
});
}; };
const scrollRight = () => { 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 ( return (
<Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}> <Box style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
@@ -28,10 +46,8 @@ export default function CustomCarousel() {
ref={scrollRef} ref={scrollRef}
style={{ style={{
display: 'flex', display: 'flex',
overflowX: 'auto', overflowX: 'hidden',
scrollSnapType: 'x mandatory', scrollSnapType: 'x mandatory',
gap: '1rem',
padding: '1rem',
scrollBehavior: 'smooth', scrollBehavior: 'smooth',
}} }}
> >
@@ -64,7 +80,7 @@ export default function CustomCarousel() {
{/* Left Scroll Button */} {/* Left Scroll Button */}
<ActionIcon <ActionIcon
variant="filled" variant="filled"
color="blue" color="grey"
onClick={scrollLeft} onClick={scrollLeft}
style={{ style={{
position: 'absolute', position: 'absolute',
@@ -80,7 +96,7 @@ export default function CustomCarousel() {
{/* Right Scroll Button */} {/* Right Scroll Button */}
<ActionIcon <ActionIcon
variant="filled" variant="filled"
color="blue" color="grey"
onClick={scrollRight} onClick={scrollRight}
style={{ style={{
position: 'absolute', position: 'absolute',

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

@@ -1,17 +1,15 @@
"use client"; "use client";
import React, { useState, useEffect } from "react"; 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 { notifications } from "@mantine/notifications";
import { Carousel } from '@mantine/carousel';
import { Providers } from "@/app/providers"; import { Providers } from "@/app/providers";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import NextImage from "next/image"; import NextImage from "next/image";
import myImage from '@/app/image/ebanking.jpg'; import myImage from '@/app/image/ebanking.jpg';
import frontPage from '@/app/image/ib_front_page.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'; import dynamic from 'next/dynamic';
function generateCaptcha(length = 6) { function generateCaptcha(length = 6) {
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join(""); return Array.from({ length }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
@@ -24,11 +22,8 @@ export default function Login() {
const [psw, SetPsw] = useState(""); const [psw, SetPsw] = useState("");
const [captcha, setCaptcha] = useState(""); const [captcha, setCaptcha] = useState("");
const [inputCaptcha, setInputCaptcha] = useState(""); const [inputCaptcha, setInputCaptcha] = useState("");
const ClientCarousel =dynamic(() => import ('./clientCarousel'),{ssr:false}); const [isLogging, setIsLogging] = useState(false);
// const [isClient,SetIsClient] =useState(false); const ClientCarousel = dynamic(() => import('./clientCarousel'), { ssr: false });
// useEffect(()=> SetIsClient(true),[]);
useEffect(() => { useEffect(() => {
setCaptcha(generateCaptcha()); setCaptcha(generateCaptcha());
@@ -41,6 +36,7 @@ export default function Login() {
async function handleLogin(e: React.FormEvent) { async function handleLogin(e: React.FormEvent) {
e.preventDefault(); e.preventDefault();
setIsLogging(false);
const onlyDigit = /^\d{11}$/; const onlyDigit = /^\d{11}$/;
if (!onlyDigit.test(CIF)) { if (!onlyDigit.test(CIF)) {
setError('Input value must be 11 digit'); setError('Input value must be 11 digit');
@@ -62,6 +58,7 @@ export default function Login() {
localStorage.setItem("customerNumber", CIF); localStorage.setItem("customerNumber", CIF);
localStorage.setItem("password", psw); localStorage.setItem("password", psw);
localStorage.setItem("access_token", token); localStorage.setItem("access_token", token);
setIsLogging(true);
router.push("/home"); router.push("/home");
} else { } else {
// SetCIF(''); // SetCIF('');
@@ -82,13 +79,24 @@ export default function Login() {
<div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}> <div style={{ backgroundColor: "#f8f9fa", width: "100%", height: "auto", paddingTop: "5%" }}>
<Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}> <Box style={{ position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100 }}>
<Image <Image
// radius="md"
fit="cover" fit="cover"
src={myImage} src={myImage}
component={NextImage} component={NextImage}
alt="ebanking" alt="ebanking"
style={{ width: "100%", height: "100%" }} 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> </Box>
<div style={{ marginTop: '10px' }}> <div style={{ marginTop: '10px' }}>
<Box <Box
@@ -227,8 +235,9 @@ export default function Login() {
onChange={(e) => setInputCaptcha(e.currentTarget.value)} onChange={(e) => setInputCaptcha(e.currentTarget.value)}
required required
/> />
<Button type="submit" fullWidth variant="filled" mt="md"> <Button type="submit" disabled={isLogging} fullWidth variant="filled" mt="md">
Login {/* Login */}
{isLogging ? "Logging.." :"Login"}
</Button> </Button>
</form> </form>
</Flex> </Flex>
@@ -239,11 +248,12 @@ export default function Login() {
</div> </div>
<Box style={{ <Box style={{
width: "100%", width: "100%",
height: '60vh', height: '50vh',
textAlign: "left", textAlign: "left",
marginTop:0, marginTop: 10,
// border: "1px solid blue"
}}> }}>
<ClientCarousel/> <ClientCarousel />
</Box> </Box>
<Box <Box
component="footer" 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/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/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/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> </Text>
</Box> </Box>
</div> </div>