feat: api integration for account tab

fix: layout design
feat : add screen for account tab

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

@@ -7,7 +7,6 @@ import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { Providers } from "../../providers";
 import { notifications } from '@mantine/notifications';
-import StatementModel from './statementModel';
 
 interface accountData {
     stAccountNo: string;
@@ -17,13 +16,6 @@ interface accountData {
     activeAccounts: string;
 }
 
-interface statementData {
-    name: string;
-    date: string;
-    amount: string;
-    type: string;
-}
-
 export default function Home() {
     const [authorized, SetAuthorized] = useState<boolean | null>(null);
     const router = useRouter();
@@ -35,9 +27,6 @@ export default function Home() {
     const [selectedLN, setSelectedLN] = useState(loanAccounts[0]?.stAccountNo || "");
     const selectedLNData = loanAccounts.find(acc => acc.stAccountNo === selectedLN);
     const [showBalance, setShowBalance] = useState(false);
-    const [openStatement, setOpenStatement] = useState(false);
-    const [statementData, setStatementData] = useState(null);
-    const [loading, setLoading] = useState(false);
 
 
     async function handleFetchUserDetails() {
@@ -75,40 +64,9 @@ export default function Home() {
     }
 
     async function handleGetAccountStatement(accountNo: string) {
-        // e.preventDefault();
-        setOpenStatement(true);
-        setLoading(true);
-        try {
-            const token = localStorage.getItem("access_token");
-            const response = await fetch(`api//transactions/account/${accountNo}`, {
-                method: 'GET',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${token}`
-                },
-            });
-            const data = await response.json();
-            if (response.ok) {
-                console.log(data);
-                setStatementData(data);
-            }
-            else { throw new Error(); }
-        }
-        catch {
-            notifications.show({
-                withBorder: true,
-                color: "red",
-                title: "Please try again later",
-                message: "Unable to Fetch the statement, Please try again later",
-                autoClose: 5000,
-            });
-        }
-        finally {
-            setLoading(false);
-        }
+        router.push(`/accounts/account_statement?accNo=${accountNo}`);
     }
 
-
     useEffect(() => {
         const token = localStorage.getItem("access_token");
         if (!token) {
@@ -137,10 +95,10 @@ export default function Home() {
                         <Text fw={700} style={{ fontFamily: "inter", fontSize: '17px' }}>Show Balance </Text>
                         <Switch size="md" onLabel="ON" offLabel="OFF" checked={showBalance}
                             onChange={(event) => setShowBalance(event.currentTarget.checked)} />
-                    </Group>               
+                    </Group>
                     <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '15px' }}>
                         <Group grow gap="xl">
-                            <Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350}}>
+                            <Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
                                 <Group gap='xs'>
                                     <IconBuildingBank size={25} />
                                     <Text fw={700}>Deposit Account</Text>
@@ -168,13 +126,7 @@ export default function Home() {
                                 <Title order={2} mt="md">
                                     {showBalance ? `₹${Number(selectedDAData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
                                 </Title>
-
                                 <Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedDA)}>Get Statement</Button>
-                                <StatementModel
-                                    opened={openStatement}
-                                    onClose={() => setOpenStatement(false)}
-                                    loading={loading}
-                                    data={statementData} error={''} />
                             </Paper>
                             <Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
                                 <Group gap='xs'>
@@ -205,11 +157,6 @@ export default function Home() {
                                     {showBalance ? `₹${Number(selectedLNData?.stAvailableBalance || 0).toLocaleString('en-IN')}` : "****"}
                                 </Title>
                                 <Button fullWidth mt="xs" onClick={() => handleGetAccountStatement(selectedLN)}>Get Statement</Button>
-                                <StatementModel
-                                    opened={openStatement}
-                                    onClose={() => setOpenStatement(false)}
-                                    loading={loading}
-                                    data={statementData} error={''} />
                             </Paper>
                             <Paper p="md" radius="md" style={{ width: 300, backgroundColor: '#FFFFFF', marginLeft: '130px', border: '1px solid grey' }}>
                                 <Title order={5} mb="sm">Important Links</Title>

src/app/(main)/home/statementModel.tsx

@@ -1,51 +0,0 @@
-'use client';
-import React from "react";
-import { Modal, Text, Loader } from "@mantine/core";
- 
-type StatementItem = {
-  date: string;
-  type: string;
-  amount: number;
-};
- 
-interface StatementModalProps {
-  opened: boolean;
-  onClose: () => void;
-  loading: boolean;
-  error: string;
-  data: StatementItem[] | null;
-}
- 
-const StatementModal: React.FC<StatementModalProps> = ({
-  opened,
-  onClose,
-  loading,
-  error,
-  data,
-}) => {
-  return (
-    <Modal opened={opened} onClose={onClose} title="Account Statement" size="lg">
-      {loading && <Loader />}
-      {error && <Text c="red">{error}</Text>}
- 
-      {!loading && !error && data && data.length > 0 && (
-        <div>
-          {data.map((item, index) => (
-            <div key={index} style={{ marginBottom: 10 }}>
-              <Text>Date: {item.date}</Text>
-              <Text>Type: {item.type}</Text>
-              <Text>Amount: ₹{item.amount}</Text>
-            </div>
-          ))}
-        </div>
-      )}
- 
-      {!loading && !error && data && data.length === 0 && (
-        <Text>No transactions found.</Text>
-      )}
-    </Modal>
-  );
-};
- 
-export default StatementModal;
-