"use client"; import React, { useEffect, useState } from "react"; import { Group, Paper, Select, Stack, Text, Title, } from "@mantine/core"; import { notifications } from "@mantine/notifications"; import { useRouter } from "next/navigation"; import { useSearchParams } from "next/navigation"; interface accountData { stAccountNo: string; stAccountType: string; stAvailableBalance: string; custname: string; stBookingNumber: string; stApprovedAmount?: string; // optional for loan accounts } export default function AccountDetails() { const router = useRouter(); const [accountOptions, setAccountOptions] = useState<{ value: string; label: string }[]>([]); const [selectedAccNo, setSelectedAccNo] = useState(null); const [authorized, setAuthorized] = useState(null); const [accountDetails, setAccountDetails] = useState(null); const searchParams = useSearchParams(); const passedAccNo = searchParams.get("accNo"); useEffect(() => { const token = localStorage.getItem("access_token"); if (!token) { setAuthorized(false); router.push("/login"); } else { setAuthorized(true); } }, []); useEffect(() => { if (authorized) { const saved = sessionStorage.getItem("accountData"); if (saved) { const parsed: accountData[] = JSON.parse(saved); const options = parsed.map((acc) => ({ label: `${acc.stAccountNo} - ${acc.stAccountType}`, value: acc.stAccountNo, })); setAccountOptions(options); if (passedAccNo) { handleAccountSelection(passedAccNo); } } } }, [authorized]); const handleAccountSelection = async (accNo: string | null) => { setSelectedAccNo(accNo); setAccountDetails(null); if (!accNo) return; try { const token = localStorage.getItem("access_token"); const response = await fetch("/api/customer", { method: "GET", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, }, }); const data: accountData[] = await response.json(); if (response.ok && Array.isArray(data)) { const matched = data.find((acc) => acc.stAccountNo === accNo); if (matched) { // Simulate approvedBalance for loan accounts if (matched.stAccountType.toUpperCase().includes("LN")) { matched.stApprovedAmount = ( parseFloat(matched.stAvailableBalance) + 20000 ).toFixed(2); // dummy logic } setAccountDetails(matched); } else { notifications.show({ withBorder: true, color: "orange", title: "Account not found", message: "Selected account was not found in the response.", }); } } else { throw new Error("Invalid response"); } } catch (err) { notifications.show({ withBorder: true, color: "red", title: "Fetch failed", message: "Could not fetch account details. Try again.", }); } }; if (!authorized) return null; return ( Account Details