feat : implement the quick pay screen

src/app/(main)/accounts/account_details/page.tsx

@@ -0,0 +1,179 @@
+"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<string | null>(null);
+    const [authorized, setAuthorized] = useState<boolean | null>(null);
+    const [accountDetails, setAccountDetails] = useState<accountData | null>(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 (
+        <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
+            <Title order={3} mb="md">
+                Account Details
+            </Title>
+
+            <Stack gap="md">
+                <Select
+                    label="Select Account Number"
+                    placeholder="Choose account number"
+                    data={accountOptions}
+                    value={selectedAccNo}
+                    onChange={handleAccountSelection}
+                    searchable
+                />
+
+                {accountDetails && (
+                    <Paper withBorder p="md" radius="md" bg="gray.0">
+                        <Stack gap="sm">
+                            <Group p="apart">
+                                <Text size="sm" fw={500} c="dimmed">Account Number</Text>
+                                <Text size="md">{accountDetails.stAccountNo}</Text>
+                            </Group>
+
+                            <Group p="apart">
+                                <Text size="sm" fw={500} c="dimmed">Account Type</Text>
+                                <Text size="md">{accountDetails.stAccountType}</Text>
+                            </Group>
+
+                            <Group p="apart">
+                                <Text size="sm" fw={500} c="dimmed">Description</Text>
+                                <Text size="md">{accountDetails.stBookingNumber}</Text>
+                            </Group>
+
+                            {/* Show Loan-specific fields */}
+                            {accountDetails.stAccountType.toUpperCase().includes("LN") ? (
+                                <>
+                                    <Group p="apart">
+                                        <Text size="sm" fw={500} c="dimmed">Approved Balance</Text>
+                                        <Text size="md" c="gray.8">
+                                            ₹{parseFloat(accountDetails.stApprovedAmount || "0").toLocaleString("en-IN", {
+                                                minimumFractionDigits: 2,
+                                            })}
+                                        </Text>
+                                    </Group>
+                                    <Group p="apart">
+                                        <Text size="sm" fw={500} c="dimmed">Available Balance</Text>
+                                        <Text size="md" c="red">
+                                            – ₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
+                                                minimumFractionDigits: 2,
+                                            })}
+                                        </Text>
+                                    </Group>
+                                </>
+                            ) : (
+                                <Group p="apart">
+                                    <Text size="sm" fw={500} c="dimmed">Balance</Text>
+                                    <Text size="md" c="green">
+                                        ₹{parseFloat(accountDetails.stAvailableBalance).toLocaleString("en-IN", {
+                                            minimumFractionDigits: 2,
+                                        })}
+                                    </Text>
+                                </Group>
+                            )}
+                        </Stack>
+                    </Paper>
+                )}
+            </Stack>
+        </Paper>
+    );
+}

src/app/(main)/accounts/account_statement/accountStatement.tsx

@@ -61,7 +61,6 @@ export default function AccountStatementPage() {
         }
     }, [passedAccNo]);
 
-
     const handleAccountTransaction = async () => {
         if (!selectedAccNo || !startDate || !endDate) {
             notifications.show({

src/app/(main)/accounts/layout.tsx

@@ -13,6 +13,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
     const links = [
         { label: "Account Summary", href: "/accounts" },
         { label: "Statement of Account", href: "/accounts/account_statement" },
+        { label: "Account Details", href: "/accounts/account_details" },
     ];
     useEffect(() => {
         const token = localStorage.getItem("access_token");

src/app/(main)/accounts/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
+import { Group, Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -30,7 +30,7 @@ export default function AccountSummary() {
       const data = await response.json();
       if (response.ok && Array.isArray(data)) {
         setAccountData(data);
-        sessionStorage.setItem('accountData',JSON.stringify(data))
+        sessionStorage.setItem("accountData", JSON.stringify(data));
       }
     } catch {
       notifications.show({
@@ -64,45 +64,75 @@ export default function AccountSummary() {
     padding: "10px",
   };
 
-  const rows = accountData.map((acc, index) => (
-    <tr key={index}>
-      <td style={{ ...cellStyle, textAlign: "left" }}>{acc.custname}</td>
-      <td style={{ ...cellStyle, textAlign: "left" }}>{acc.stAccountType}</td>
-      <td style={{ ...cellStyle, textAlign: "right", color: '#1c7ed6', cursor: "pointer" }}
-        onClick={() => router.push(`/accounts/account_statement?accNo=${acc.stAccountNo}`)}>
-        {acc.stAccountNo}</td>
-      <td style={{ ...cellStyle, textAlign: "right" }}>
-        {parseFloat(acc.stAvailableBalance).toLocaleString("en-IN", {
-          minimumFractionDigits: 2,
-        })}
-      </td>
-    </tr>
-  ));
+  // Filter accounts
+  const depositAccounts = accountData.filter(
+    (acc) => !acc.stAccountType.toUpperCase().includes("LN")
+  );
+  const loanAccounts = accountData.filter((acc) =>
+    acc.stAccountType.toUpperCase().includes("LN")
+  );
+
+  // Function to render table rows
+  const renderRows = (data: accountData[]) =>
+    data.map((acc, index) => (
+      <tr key={index}>
+        <td style={{ ...cellStyle, textAlign: "left" }}>{acc.stAccountType}</td>
+        <td
+          style={{ ...cellStyle, textAlign: "right", color: "#1c7ed6", cursor: "pointer" }}
+          onClick={() => router.push(`/accounts/account_details?accNo=${acc.stAccountNo}`)}
+        >
+          {acc.stAccountNo}
+        </td>
+        <td style={{ ...cellStyle, textAlign: "right" }}>
+          {parseFloat(acc.stAvailableBalance).toLocaleString("en-IN", {
+            minimumFractionDigits: 2,
+          })}
+        </td>
+      </tr>
+    ));
+
+  // Table component
+  const renderTable = (title: string, rows: JSX.Element[]) => (
+    <Paper shadow="sm" radius="md" p="md" withBorder w="100%"
+    // bg="#97E6B8"
+    >
+      <Title order={4} mb="sm">
+        {title}
+      </Title>
+      <ScrollArea>
+        <Table style={{ borderCollapse: "collapse", width: "100%" }}>
+          <thead>
+            <tr style={{ backgroundColor: "#3385ff" }}>
+              <th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
+              <th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
+              <th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
+            </tr>
+          </thead>
+          <tbody>{rows}</tbody>
+        </Table>
+      </ScrollArea>
+    </Paper>
+  );
 
   if (authorized) {
     return (
-      <Paper shadow="sm" radius="md" p="md" withBorder>
-        <Title order={3} mb="sm">
-          Account Summary (Currency - INR)
-        </Title>
-        <ScrollArea>
-          <Table style={{ borderCollapse: "collapse", width: "100%" }}>
-            <thead>
-              <tr style={{ backgroundColor: "#3385ff" }}>
-                <th style={{ ...cellStyle, textAlign: "left" }}>Customer Name</th>
-                <th style={{ ...cellStyle, textAlign: "left" }}>Account Type</th>
-                <th style={{ ...cellStyle, textAlign: "right" }}>Account No.</th>
-                <th style={{ ...cellStyle, textAlign: "right" }}>Book Balance</th>
-              </tr>
-            </thead>
-            <tbody>{rows}</tbody>
-          </Table>
-        </ScrollArea>
+      <Paper shadow="sm" radius="md" p="md" withBorder h={400}
+      // bg="linear-gradient(90deg,rgba(195, 218, 227, 1) 0%, rgba(151, 230, 184, 1) 50%)"
+      >
+        <Title order={3} mb="md">Account Summary</Title>
+        <Group align="flex-start" grow>
+          {/* Left table for Deposit Accounts */}
+          {depositAccounts.length > 0 && renderTable("Deposit Accounts (INR)", renderRows(depositAccounts))}
+
+          {/* Right table for Loan Accounts (only shown if available) */}
+          {loanAccounts.length > 0 && renderTable("Loan Accounts (INR)", renderRows(loanAccounts))}
+        </Group>
         <Text mt="sm" size="xs" c="dimmed">
           * Book Balance includes uncleared effects.
         </Text>
       </Paper>
     );
   }
+
   return null;
 }