Fix: design and few function
This commit is contained in:
232
src/app/ATMLocator/page.tsx
Normal file
232
src/app/ATMLocator/page.tsx
Normal file
@@ -0,0 +1,232 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Box, Button, Group, Stack, Text, Paper, Collapse, Title, Image } from "@mantine/core";
|
||||
import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMediaQuery } from "@mantine/hooks";
|
||||
import NextImage from "next/image";
|
||||
import logo from "@/app/image/logo1.jpg";
|
||||
|
||||
export default function ATMListPage() {
|
||||
const [atms, setAtms] = useState([]);
|
||||
const [openedIndex, setOpenedIndex] = useState<number | null>(null);
|
||||
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
const router = useRouter();
|
||||
|
||||
// ✔ Authorization Check
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (!token) {
|
||||
setAuthorized(false);
|
||||
router.push("/login");
|
||||
} else {
|
||||
setAuthorized(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ✔ Fetch ATM Data
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const token = localStorage.getItem("access_token");
|
||||
const response = await fetch("/api/atm", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Login-Type": "IB",
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
const list = Array.isArray(result)
|
||||
? result
|
||||
: Array.isArray(result.data)
|
||||
? result.data
|
||||
: [];
|
||||
|
||||
setAtms(list);
|
||||
} catch (error) {
|
||||
console.error("ATM list API error:", error);
|
||||
setAtms([]);
|
||||
}
|
||||
}
|
||||
|
||||
if (authorized) fetchData();
|
||||
}, [authorized]);
|
||||
|
||||
// Wait until auth is checked
|
||||
if (authorized === null) return null;
|
||||
|
||||
const toggleRow = (index: number) => {
|
||||
setOpenedIndex((prev) => (prev === index ? null : index));
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
height: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* HEADER */}
|
||||
<Box
|
||||
component="header"
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: isMobile ? "0.6rem 1rem" : "0.8rem 2rem",
|
||||
background:
|
||||
"linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
color: "white",
|
||||
boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Group gap="md" wrap="nowrap" align="center">
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{ width: isMobile ? "45px" : "60px", height: "auto" }}
|
||||
/>
|
||||
<div>
|
||||
<Title
|
||||
order={isMobile ? 4 : 3}
|
||||
style={{ fontFamily: "Roboto", color: "white", marginBottom: 2 }}
|
||||
>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
{!isMobile && (
|
||||
<Text size="xs" c="white" style={{ opacity: 0.85 }}>
|
||||
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</Group>
|
||||
</Box>
|
||||
|
||||
{/* SECOND FIXED BAR */}
|
||||
<Box
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: isMobile ? "0.5rem 1rem" : "0.6rem 1.5rem",
|
||||
background: "#ffffff",
|
||||
borderBottom: "1px solid #ddd",
|
||||
position: "sticky",
|
||||
top: isMobile ? "65px" : "70px",
|
||||
zIndex: 200,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
fw={700}
|
||||
size={isMobile ? "md" : "lg"}
|
||||
ta="center"
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
List of Available ATMs
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
variant="light"
|
||||
color="red"
|
||||
size={isMobile ? "xs" : "sm"}
|
||||
onClick={() => window.close()}
|
||||
style={{ marginLeft: "auto" }}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* SCROLLABLE CONTENT */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: "auto",
|
||||
padding: isMobile ? "0.5rem" : "1rem",
|
||||
paddingTop: isMobile ? "60px" : "40px",
|
||||
}}
|
||||
>
|
||||
<Stack>
|
||||
{atms.map((atm: any, index: number) => {
|
||||
const isOpen = openedIndex === index;
|
||||
|
||||
return (
|
||||
<Paper
|
||||
key={index}
|
||||
p={isMobile ? "sm" : "md"}
|
||||
radius="md"
|
||||
withBorder
|
||||
shadow="xs"
|
||||
>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Text fw={600} size={isMobile ? "sm" : "md"}>
|
||||
{atm.name}
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
variant="subtle"
|
||||
size={isMobile ? "xs" : "md"}
|
||||
onClick={() => toggleRow(index)}
|
||||
leftSection={
|
||||
isOpen ? <IconChevronUp size={18} /> : <IconChevronDown size={18} />
|
||||
}
|
||||
>
|
||||
{isOpen ? "Hide" : "View"}
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{/* ATM Extra Info */}
|
||||
<Collapse in={isOpen}>
|
||||
<Box mt="md" ml="md">
|
||||
<Text size={isMobile ? "xs" : "sm"}>
|
||||
<b>ATM Name:</b> {atm.name}
|
||||
</Text>
|
||||
|
||||
<Text size={isMobile ? "xs" : "sm"}>
|
||||
<b>Availability:</b> 24x7
|
||||
</Text>
|
||||
|
||||
<Text size={isMobile ? "xs" : "sm"}>
|
||||
<b>Type:</b> Cash Withdrawal Only
|
||||
</Text>
|
||||
|
||||
<Text size={isMobile ? "xs" : "sm"}>
|
||||
<b>Status:</b>{" "}
|
||||
<span style={{ color: "green", fontWeight: 600 }}>Active</span>
|
||||
</Text>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* FOOTER */}
|
||||
<Box
|
||||
component="footer"
|
||||
style={{
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
padding: isMobile ? "8px" : "12px 0",
|
||||
background: "#ffffff",
|
||||
borderTop: "1px solid #ddd",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Text size={isMobile ? "xs" : "sm"} c="dimmed">
|
||||
© 2025 KCC Bank. All rights reserved.
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user