Fix: design and few function
This commit is contained in:
@@ -21,6 +21,7 @@ export default function Home() {
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const router = useRouter();
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
const [userName, setUserName] = useState<string>("");
|
||||
const [accountData, SetAccountData] = useState<accountData[]>([]);
|
||||
const depositAccounts = accountData.filter(acc => acc.stAccountType !== "LN");
|
||||
const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || "");
|
||||
@@ -33,31 +34,31 @@ export default function Home() {
|
||||
const [loadingAccountNo, setLoadingAccountNo] = useState<string | null>(null);
|
||||
|
||||
// If back and forward button is clicked
|
||||
// useEffect(() => {
|
||||
// window.history.pushState(null, "", window.location.href);
|
||||
// const handlePopState = () => {
|
||||
// localStorage.removeItem("access_token");
|
||||
// sessionStorage.removeItem("access_token");
|
||||
// localStorage.removeItem("remitter_name");
|
||||
// localStorage.removeItem("pswExpiryDate");
|
||||
// localStorage.clear();
|
||||
// sessionStorage.clear();
|
||||
// router.push("/login");
|
||||
// };
|
||||
// const handleBeforeUnload = () => {
|
||||
// // logout on tab close / refresh
|
||||
// localStorage.removeItem("access_token");
|
||||
// sessionStorage.removeItem("access_token");
|
||||
// localStorage.clear();
|
||||
// sessionStorage.clear();
|
||||
// };
|
||||
// window.addEventListener("popstate", handlePopState);
|
||||
// window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
// return () => {
|
||||
// window.removeEventListener("popstate", handlePopState);
|
||||
// window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
// };
|
||||
// }, []);
|
||||
useEffect(() => {
|
||||
window.history.pushState(null, "", window.location.href);
|
||||
const handlePopState = () => {
|
||||
localStorage.removeItem("access_token");
|
||||
sessionStorage.removeItem("access_token");
|
||||
localStorage.removeItem("remitter_name");
|
||||
localStorage.removeItem("pswExpiryDate");
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
router.push("/login");
|
||||
};
|
||||
const handleBeforeUnload = () => {
|
||||
// logout on tab close / refresh
|
||||
localStorage.removeItem("access_token");
|
||||
sessionStorage.removeItem("access_token");
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
};
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
return () => {
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
};
|
||||
}, []);
|
||||
|
||||
async function handleFetchUserDetails() {
|
||||
try {
|
||||
@@ -66,7 +67,7 @@ export default function Home() {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
"X-Login-Type": "IB",
|
||||
"X-Login-Type": "IB",
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
});
|
||||
@@ -117,6 +118,9 @@ export default function Home() {
|
||||
useEffect(() => {
|
||||
if (authorized) {
|
||||
handleFetchUserDetails();
|
||||
const fullName = localStorage.getItem("remitter_name") || "User";
|
||||
// const first = fullName.split(" ")[0];
|
||||
setUserName(fullName);
|
||||
}
|
||||
}, [authorized]);
|
||||
|
||||
@@ -124,38 +128,188 @@ export default function Home() {
|
||||
return (
|
||||
<Providers>
|
||||
<Box p={isMobile ? "8px" : "10px"}>
|
||||
<Title order={4} style={{ fontSize: isMobile ? "18px" : "22px" }}>
|
||||
|
||||
{/* ---------------------- WELCOME CARD ---------------------- */}
|
||||
<Title
|
||||
order={2}
|
||||
style={{
|
||||
marginTop: "4px",
|
||||
fontSize: isMobile ? "20px" : "28px",
|
||||
fontWeight: 800,
|
||||
background: "linear-gradient(56deg, rgba(16,114,152,1) 0%, rgba(62,230,132,1) 86%)",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
}}
|
||||
>
|
||||
Welcome, {userName}
|
||||
</Title>
|
||||
|
||||
{/* -------------------- ACCOUNT OVERVIEW HEADER -------------------- */}
|
||||
<Title
|
||||
order={4}
|
||||
style={{
|
||||
fontSize: isMobile ? "18px" : "22px",
|
||||
marginTop: isMobile ? "6px" : "10px", // ⭐ ADD THIS GAP
|
||||
}}
|
||||
>
|
||||
Accounts Overview
|
||||
</Title>
|
||||
|
||||
{/* Show Balance Switch */}
|
||||
|
||||
<Text size="sm" c="dimmed" mb={isMobile ? 10 : 14}>
|
||||
Your accounts at a glance
|
||||
</Text>
|
||||
|
||||
{/* --------------------- SHOW BALANCE TOGGLE ---------------------- */}
|
||||
<Group
|
||||
style={{
|
||||
flex: 1,
|
||||
// padding: isMobile ? "5px" : "10px 10px 4px 10px",
|
||||
marginLeft: isMobile ? 0 : "10px",
|
||||
display: "flex",
|
||||
marginBottom: isMobile ? "10px" : "14px",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
height: "auto",
|
||||
gap: isMobile ? 5 : 10,
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<IconEye size={isMobile ? 16 : 20} />
|
||||
<Text fw={700} style={{ fontFamily: "inter", fontSize: isMobile ? "14px" : "17px" }}>
|
||||
<Text fw={700} style={{ fontSize: isMobile ? "14px" : "18px" }}>
|
||||
Show Balance
|
||||
</Text>
|
||||
|
||||
<Switch
|
||||
size={isMobile ? "sm" : "md"}
|
||||
onLabel="ON"
|
||||
offLabel="OFF"
|
||||
checked={showBalance}
|
||||
onChange={(event) => setShowBalance(event.currentTarget.checked)}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
{/* Cards Section */}
|
||||
{isMobile ? (
|
||||
{/* ----------------------- DESKTOP VIEW ------------------------ */}
|
||||
{!isMobile && (
|
||||
<Group align="flex-start" grow gap="md">
|
||||
|
||||
{/* ----------------------- DEPOSIT CARD ----------------------- */}
|
||||
<Paper p="md" radius="md"
|
||||
style={{
|
||||
background: "linear-gradient(56deg,rgba(179,214,227,1) 0%, rgba(142,230,179,1) 86%)",
|
||||
height: 195,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<Group gap="xs">
|
||||
<IconBuildingBank size={25} />
|
||||
<Text fw={700}>Deposit Account</Text>
|
||||
|
||||
<Select
|
||||
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">{selectedDAData?.stAccountNo}</Text>
|
||||
|
||||
<Title order={2}>
|
||||
{showBalance
|
||||
? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString("en-IN")}`
|
||||
: "****"}
|
||||
</Title>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
disabled={loadingAccountNo === selectedDA}
|
||||
onClick={() => handleGetAccountStatement(selectedDA)}
|
||||
>
|
||||
{loadingAccountNo === selectedDA ? "Loading...Please Wait" : "Get Statement"}
|
||||
</Button>
|
||||
</Paper>
|
||||
|
||||
{/* ----------------------- LOAN CARD ----------------------- */}
|
||||
<Paper p="md" radius="md"
|
||||
style={{
|
||||
background: "linear-gradient(56deg,rgba(179,214,227,1) 0%, rgba(142,230,179,1) 86%)",
|
||||
height: 195,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<Group gap="xs">
|
||||
<IconBuildingBank size={25} />
|
||||
<Text fw={700}>Loan Account</Text>
|
||||
|
||||
<Select
|
||||
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">{selectedLNData?.stAccountNo}</Text>
|
||||
|
||||
<Title order={2}>
|
||||
{showBalance
|
||||
? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString("en-IN")}`
|
||||
: "****"}
|
||||
</Title>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
disabled={loadingAccountNo === selectedLN}
|
||||
onClick={() => handleGetAccountStatement(selectedLN)}
|
||||
>
|
||||
{loadingAccountNo === selectedLN ? "Loading...Please Wait" : "Get Statement"}
|
||||
</Button>
|
||||
</Paper>
|
||||
|
||||
{/* ----------------------- QUICK LINKS ----------------------- */}
|
||||
<Paper p="md" radius="md" style={{ width: 300, backgroundColor: "#FFFFFF", border: "1px solid grey" }}>
|
||||
<Title order={5} mb="sm">Quick Links</Title>
|
||||
|
||||
<Stack gap="xs">
|
||||
<Button
|
||||
variant="light"
|
||||
color="green"
|
||||
fullWidth
|
||||
onClick={() => window.open("https://kccbhp.bank.in/about-us/history-of-kccb/", "_blank")}
|
||||
>
|
||||
About Us
|
||||
</Button>
|
||||
<Button variant="light" color="green" fullWidth component="a" href="/BranchLocator" target="_blank">
|
||||
Branch Locator
|
||||
</Button>
|
||||
<Button variant="light" color="green" fullWidth component="a" href="/ATMLocator" target="_blank">
|
||||
ATM Locator
|
||||
</Button>
|
||||
<Button variant="light" color="green" fullWidth component="a" href="/CustomerCare" target="_blank">
|
||||
Customer Care
|
||||
</Button>
|
||||
<Button variant="light" color="green" fullWidth component="a" href="/FAQs" target="_blank">
|
||||
FAQs
|
||||
</Button>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
</Group>
|
||||
)}
|
||||
|
||||
{/* ----------------------- MOBILE VERSION STAYS SAME ----------------------- */}
|
||||
{isMobile && (
|
||||
<Stack gap="md" style={{ width: "100%", marginTop: "10px" }}>
|
||||
{/* Deposit Account Card */}
|
||||
<Paper
|
||||
@@ -189,7 +343,7 @@ export default function Home() {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 5,
|
||||
width: "120px",
|
||||
width: "150px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@@ -262,7 +416,7 @@ export default function Home() {
|
||||
backgroundColor: "white",
|
||||
color: "black",
|
||||
marginLeft: 5,
|
||||
width: "120px",
|
||||
width: "150px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@@ -333,157 +487,19 @@ export default function Home() {
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
) : (
|
||||
<Group grow gap="md" style={{ width: "100%", marginTop: "10px" }}>
|
||||
{/* Desktop Cards */}
|
||||
{/* Deposit Account Card */}
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: "#c1e0f0", width: 350, height: 195, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
|
||||
<Group gap="xs">
|
||||
<IconBuildingBank size={25} />
|
||||
<Text fw={700}>Deposit Account</Text>
|
||||
{depositAccounts.length > 0 ? (
|
||||
<Select
|
||||
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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm" ml="sm">
|
||||
No deposit account available
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
{depositAccounts.length > 0 ? (
|
||||
<>
|
||||
<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"
|
||||
// loading={loadingAccountNo === selectedDA}
|
||||
disabled={loadingAccountNo === selectedDA}
|
||||
onClick={() => handleGetAccountStatement(selectedDA)}
|
||||
>
|
||||
{loadingAccountNo === selectedDA ? "Loading... Please Wait" : "Get Statement"}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text c="dimmed" mt="md">
|
||||
Apply for a deposit account to get started
|
||||
</Text>
|
||||
<Button fullWidth mt="xs">
|
||||
Apply Now
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Loan Account Card */}
|
||||
<Paper p="md" radius="md" style={{ backgroundColor: "#c1e0f0", width: 355, height: 195, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
|
||||
<Group gap="xs">
|
||||
<IconBuildingBank size={25} />
|
||||
<Text fw={700}>Loan Account</Text>
|
||||
{loanAccounts.length > 0 ? (
|
||||
<Select
|
||||
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,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Text c="dimmed" size="sm" ml="sm">
|
||||
No loan account available
|
||||
</Text>
|
||||
)}
|
||||
</Group>
|
||||
|
||||
{loanAccounts.length > 0 ? (
|
||||
<>
|
||||
<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"
|
||||
// loading={loadingAccountNo === selectedLN}
|
||||
disabled={loadingAccountNo === selectedLN}
|
||||
onClick={() => handleGetAccountStatement(selectedLN)}
|
||||
>
|
||||
{/* Get Statement */}
|
||||
{loadingAccountNo === selectedLN ? "Loading...Please Wait.." : "Get Statement"}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Text c="dimmed" mt="md">
|
||||
Apply for a loan account to get started
|
||||
</Text>
|
||||
<Button fullWidth mt="xs">
|
||||
Apply Now
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Paper>
|
||||
|
||||
{/* Important Links Card */}
|
||||
<Paper p="md" radius="md" style={{ width: 300, backgroundColor: "#FFFFFF", border: "1px solid grey" }}>
|
||||
<Title order={5} mb="sm">
|
||||
Quick Links
|
||||
</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>
|
||||
</Paper>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
{/* Notes Section */}
|
||||
<Box style={{ padding: "5px", display: "flex", justifyContent: "left" }}>
|
||||
{/* -------------------- NOTES SECTION (BOTTOM) --------------------- */}
|
||||
<Box mt="md">
|
||||
<Stack>
|
||||
<Text fw={700}> ** Book Balance includes uncleared effect.</Text>
|
||||
<Text fw={700}> ** Click on the "Show Balance" to display balance for the Deposit and Loan account.</Text>
|
||||
<Text fw={700}> ** Click "Show Balance" to display account balances.</Text>
|
||||
<Text fw={400} c="red">
|
||||
** Your Password will expire in {PassExpiryRemains} days.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Providers>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user