Fix: layout of the application
Feat: Create page for account Summary
This commit is contained in:
56
src/app/(main)/accounts/layout.tsx
Normal file
56
src/app/(main)/accounts/layout.tsx
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
"use client";
|
||||||
|
import { Divider, Stack, Text } from '@mantine/core';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||||
|
const pathname = usePathname(); // get current route
|
||||||
|
|
||||||
|
const links = [
|
||||||
|
{ label: "Account Summary", href: "/accounts" },
|
||||||
|
{ label: "Statement of Account", href: "/accounts/account_statement" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ display: "flex", height: '100%' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "15%",
|
||||||
|
backgroundColor: '#c5e4f9',
|
||||||
|
borderRight: "1px solid #ccc",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}>
|
||||||
|
<Text fw={700} fs="italic" c='white' style={{ textAlign: 'center', marginTop: '10px' }}>
|
||||||
|
Accounts
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
|
||||||
|
{links.map(link => {
|
||||||
|
const isActive = pathname === link.href || pathname.startsWith(link.href + '/');
|
||||||
|
return (
|
||||||
|
<Text
|
||||||
|
key={link.href}
|
||||||
|
component={Link}
|
||||||
|
href={link.href}
|
||||||
|
c={isActive ? 'darkblue' : 'blue'}
|
||||||
|
style={{
|
||||||
|
textDecoration: isActive ? 'underline' : 'none',
|
||||||
|
fontWeight: isActive ? 600 : 400,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</Text>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Stack>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ flex: 1, padding: '1rem' }}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
105
src/app/(main)/accounts/page.tsx
Normal file
105
src/app/(main)/accounts/page.tsx
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Paper, ScrollArea, Table, Text, Title } from "@mantine/core";
|
||||||
|
import { notifications } from "@mantine/notifications";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
interface accountData {
|
||||||
|
stAccountNo: string;
|
||||||
|
stAccountType: string;
|
||||||
|
stAvailableBalance: string;
|
||||||
|
custname: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SavingsAccount() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [authorized, setAuthorized] = useState<boolean | null>(null);
|
||||||
|
const [accountData, setAccountData] = useState<accountData[]>([]);
|
||||||
|
|
||||||
|
async function FetchAccountDetails() {
|
||||||
|
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 = await response.json();
|
||||||
|
if (response.ok && Array.isArray(data)) {
|
||||||
|
setAccountData(data);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
notifications.show({
|
||||||
|
withBorder: true,
|
||||||
|
color: "red",
|
||||||
|
title: "Please try again later",
|
||||||
|
message: "Unable to Fetch, Please try again later",
|
||||||
|
autoClose: 5000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const token = localStorage.getItem("access_token");
|
||||||
|
if (!token) {
|
||||||
|
setAuthorized(false);
|
||||||
|
router.push("/login");
|
||||||
|
} else {
|
||||||
|
setAuthorized(true);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (authorized) {
|
||||||
|
FetchAccountDetails();
|
||||||
|
}
|
||||||
|
}, [authorized]);
|
||||||
|
|
||||||
|
const cellStyle = {
|
||||||
|
border: "1px solid #ccc",
|
||||||
|
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" }}>{acc.stAccountNo}</td>
|
||||||
|
<td style={{ ...cellStyle, textAlign: "right" }}>
|
||||||
|
{parseFloat(acc.stAvailableBalance).toLocaleString("en-IN", {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
})}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
));
|
||||||
|
|
||||||
|
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>
|
||||||
|
<Text mt="sm" size="xs" c="dimmed">
|
||||||
|
* Book Balance includes uncleared effects.
|
||||||
|
</Text>
|
||||||
|
</Paper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
273
src/app/(main)/home/page.tsx
Normal file
273
src/app/(main)/home/page.tsx
Normal file
@@ -0,0 +1,273 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Button, Input, Group, Stack, Text, Title, Box, Select, Paper, Switch } from '@mantine/core';
|
||||||
|
import { IconBuildingBank, IconEye } from '@tabler/icons-react';
|
||||||
|
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;
|
||||||
|
stAccountType: string;
|
||||||
|
stAvailableBalance: string;
|
||||||
|
custname: string;
|
||||||
|
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();
|
||||||
|
const [accountData, SetAccountData] = useState<accountData[]>([]);
|
||||||
|
const depositAccounts = accountData.filter(acc => acc.stAccountType !== "LN");
|
||||||
|
const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || "");
|
||||||
|
const selectedDAData = depositAccounts.find(acc => acc.stAccountNo === selectedDA);
|
||||||
|
const loanAccounts = accountData.filter(acc => acc.stAccountType === "LN");
|
||||||
|
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() {
|
||||||
|
// e.preventDefault();
|
||||||
|
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 = await response.json();
|
||||||
|
if (response.ok && Array.isArray(data)) {
|
||||||
|
SetAccountData(data);
|
||||||
|
if (data.length > 0) {
|
||||||
|
const firstDeposit = data.find(acc => acc.stAccountType !== "LN");
|
||||||
|
const firstLoan = data.find(acc => acc.stAccountType === "LN");
|
||||||
|
if (firstDeposit) setSelectedDA(firstDeposit.stAccountNo);
|
||||||
|
if (firstLoan) setSelectedLN(firstLoan.stAccountNo);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else { throw new Error(); }
|
||||||
|
}
|
||||||
|
catch {
|
||||||
|
notifications.show({
|
||||||
|
withBorder: true,
|
||||||
|
color: "red",
|
||||||
|
title: "Please try again later",
|
||||||
|
message: "Unable to Fetch, Please try again later",
|
||||||
|
autoClose: 5000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const token = localStorage.getItem("access_token");
|
||||||
|
if (!token) {
|
||||||
|
SetAuthorized(false);
|
||||||
|
router.push("/login");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
SetAuthorized(true);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (authorized) {
|
||||||
|
handleFetchUserDetails();
|
||||||
|
}
|
||||||
|
}, [authorized]);
|
||||||
|
|
||||||
|
if (authorized) {
|
||||||
|
return (
|
||||||
|
<Providers>
|
||||||
|
<div>
|
||||||
|
<Title order={4} style={{ padding: "10px" }}>Accounts Overview</Title>
|
||||||
|
<Group
|
||||||
|
style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '10px', display: "flex", alignItems: "center", justifyContent: "left", height: "1vh" }}>
|
||||||
|
<IconEye size={20} />
|
||||||
|
<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>
|
||||||
|
<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}}>
|
||||||
|
<Group gap='xs'>
|
||||||
|
<IconBuildingBank size={25} />
|
||||||
|
<Text fw={700}>Deposit Account</Text>
|
||||||
|
<Select
|
||||||
|
// placeholder="Select A/C No"
|
||||||
|
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">{Number(selectedDAData?.stAccountNo || 0)}</Text>
|
||||||
|
<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'>
|
||||||
|
<IconBuildingBank size={25} />
|
||||||
|
<Text fw={700}>Loan Account</Text>
|
||||||
|
<Select
|
||||||
|
placeholder="Select A/C No"
|
||||||
|
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">{Number(selectedLNData?.stAccountNo || 0)}</Text>
|
||||||
|
<Title order={2} mt="md">
|
||||||
|
{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>
|
||||||
|
{/* <Title order={5} mb="sm" style={{ textAlign: 'center' }}>Loan EMI Calculator</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>
|
||||||
|
{/* <Group>
|
||||||
|
<TextInput
|
||||||
|
label="Loan Amount"
|
||||||
|
placeholder=""
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
label="Interest Rate(%)"
|
||||||
|
placeholder=""
|
||||||
|
/>
|
||||||
|
<TextInput
|
||||||
|
label="Loan Tenure(Years)"
|
||||||
|
placeholder=""
|
||||||
|
/>
|
||||||
|
<Button fullWidth style={{textAlign:'center'}}>Calculate</Button>
|
||||||
|
</Group> */}
|
||||||
|
</Paper>
|
||||||
|
</Group>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
marginTop: 0,
|
||||||
|
padding: "20px",
|
||||||
|
display: "flex",
|
||||||
|
// alignItems: "center",
|
||||||
|
justifyContent: "left",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box>
|
||||||
|
<Title order={4}>Send Money</Title>
|
||||||
|
<Group mt="sm">
|
||||||
|
<Select
|
||||||
|
placeholder="Own / Other Accounts"
|
||||||
|
data={[{ value: 'own', label: 'Own' }, { value: 'other', label: 'Other' }]}
|
||||||
|
style={{ width: 180 }}
|
||||||
|
/>
|
||||||
|
<Select
|
||||||
|
placeholder="Select Account"
|
||||||
|
data={[{ value: 'acc1', label: 'Account 1' }, { value: 'acc2', label: 'Account 2' }]}
|
||||||
|
style={{ width: 180 }}
|
||||||
|
/>
|
||||||
|
<Input placeholder="₹0.00" style={{ width: 100 }} />
|
||||||
|
<Button>Proceed</Button>
|
||||||
|
</Group>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Providers>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
51
src/app/(main)/home/statementModel.tsx
Normal file
51
src/app/(main)/home/statementModel.tsx
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
'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;
|
||||||
|
|
||||||
174
src/app/(main)/layout.tsx
Normal file
174
src/app/(main)/layout.tsx
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
"use client";
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { Box, Button, Divider, Group, Image, Stack, Text, Title } from '@mantine/core';
|
||||||
|
import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter, usePathname } from "next/navigation";
|
||||||
|
import { Providers } from '../providers';
|
||||||
|
import logo from '@/app/image/logo.jpg';
|
||||||
|
import NextImage from 'next/image';
|
||||||
|
import { notifications } from '@mantine/notifications';
|
||||||
|
|
||||||
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
|
const [userLastLoginDetails, setUserLastLoginDetails] = useState(null);
|
||||||
|
|
||||||
|
async function handleLogout(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
localStorage.removeItem("access_token");
|
||||||
|
router.push("/login");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleFetchUserDetails(e: React.FormEvent) {
|
||||||
|
e.preventDefault();
|
||||||
|
const token = localStorage.getItem("access_token");
|
||||||
|
const response = await fetch('api/auth/user_details', {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${token}`
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
if (response.ok) {
|
||||||
|
return data;
|
||||||
|
} else {
|
||||||
|
notifications.show({
|
||||||
|
withBorder: true,
|
||||||
|
color: "red",
|
||||||
|
title: "Please try again later",
|
||||||
|
message: "Unable to fetch timestamp, please try again later",
|
||||||
|
autoClose: 5000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchLoginTime = async () => {
|
||||||
|
const result = await handleFetchUserDetails({ preventDefault: () => {} } as React.FormEvent);
|
||||||
|
if (result) {
|
||||||
|
setUserLastLoginDetails(result.last_login);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fetchLoginTime();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ href: "/home", label: "Home", icon: IconHome },
|
||||||
|
{ href: "/accounts", label: "Accounts", icon: IconBook },
|
||||||
|
{ href: "/funds_transfer", label: "Send Money", icon: IconCurrencyRupee },
|
||||||
|
{ href: "/settings", label: "Settings", icon: IconSettings },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<body>
|
||||||
|
<Providers>
|
||||||
|
<div style={{ backgroundColor: "#e6ffff", height: "100vh", display: "flex", flexDirection: "column", padding: 0, margin: 0 }}>
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
height: "60px",
|
||||||
|
position: 'relative',
|
||||||
|
width: '100%',
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "flex-start",
|
||||||
|
background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
fit="cover"
|
||||||
|
src={logo}
|
||||||
|
component={NextImage}
|
||||||
|
alt="ebanking"
|
||||||
|
style={{ width: "100%", height: "100%" }}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '80%',
|
||||||
|
color: 'white',
|
||||||
|
textShadow: '1px 1px 2px black',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<IconPhoneFilled size={20} /> Toll Free No : 1800-180-8008
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flexShrink: 0,
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack gap={0} align="flex-start">
|
||||||
|
<Title order={4} style={{ fontFamily: "inter", fontSize: '22px' }}>
|
||||||
|
Welcome, Rajat Kumar Maharana
|
||||||
|
</Title>
|
||||||
|
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: '13px' }}>
|
||||||
|
Last logged in at {userLastLoginDetails ? new Date(userLastLoginDetails).toLocaleString() : "N/A"}
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Group mt="md" gap="sm">
|
||||||
|
{navItems.map((item) => {
|
||||||
|
const isActive = pathname === item.href;
|
||||||
|
const Icon = item.icon;
|
||||||
|
return (
|
||||||
|
<Link key={item.href} href={item.href}>
|
||||||
|
<Button
|
||||||
|
leftSection={<Icon size={20} />}
|
||||||
|
variant={isActive ? "light" : "subtle"}
|
||||||
|
color={isActive ? "blue" : undefined}
|
||||||
|
>
|
||||||
|
{item.label}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
|
||||||
|
Logout
|
||||||
|
</Button>
|
||||||
|
</Group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider size="xs" color='#99c2ff' />
|
||||||
|
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
overflowY: "auto",
|
||||||
|
borderTop: '1px solid #ddd',
|
||||||
|
borderBottom: '1px solid #ddd',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider size="xs" color='blue' />
|
||||||
|
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
flexShrink: 0,
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
backgroundColor: "#f8f9fa",
|
||||||
|
marginTop: "0.5rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text c="dimmed" size="xs">
|
||||||
|
© 2025 Kangra Central Co-Operative Bank
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
</Providers>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
AppShell,
|
|
||||||
Navbar,
|
|
||||||
Title,
|
|
||||||
Stack,
|
|
||||||
Text,
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
} from '@mantine/core';
|
|
||||||
|
|
||||||
interface LayoutProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Sidebar = () => (
|
|
||||||
<Navbar width={{ base: 220 }} p="xs" style={{ backgroundColor: '#f4f6fa' }}>
|
|
||||||
<Box>
|
|
||||||
<Title order={5} color="blue" mb="md">
|
|
||||||
Funds Transfer
|
|
||||||
</Title>
|
|
||||||
<Stack spacing="xs">
|
|
||||||
<Button variant="filled" fullWidth color="blue" radius="xs">
|
|
||||||
Transact
|
|
||||||
</Button>
|
|
||||||
<Button variant="light" fullWidth color="blue" radius="xs">
|
|
||||||
Enquire
|
|
||||||
</Button>
|
|
||||||
<Button variant="light" fullWidth color="blue" radius="xs">
|
|
||||||
Request
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
</Navbar>
|
|
||||||
);
|
|
||||||
|
|
||||||
const LayoutWithSidebar: React.FC<LayoutProps> = ({ children }) => {
|
|
||||||
return (
|
|
||||||
<AppShell
|
|
||||||
padding="md"
|
|
||||||
navbar={<Sidebar />}
|
|
||||||
styles={{
|
|
||||||
main: {
|
|
||||||
backgroundColor: '#ffffff',
|
|
||||||
minHeight: '100vh',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</AppShell>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LayoutWithSidebar;
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
"use client";
|
|
||||||
import React from 'react';
|
|
||||||
import { Box, Button, Divider, Flex, Group, Image, Text } from '@mantine/core';
|
|
||||||
import { IconBook, IconCurrencyRupee, IconHome, IconLogout, IconPhoneFilled, IconSettings } from '@tabler/icons-react';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { Providers } from '../providers';
|
|
||||||
import logo from '@/app/image/logo.jpg';
|
|
||||||
import NextImage from 'next/image';
|
|
||||||
|
|
||||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
async function handleLogout(e: React.FormEvent) {
|
|
||||||
e.preventDefault();
|
|
||||||
localStorage.removeItem("access_token");
|
|
||||||
router.push("/login")
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<html lang="en">
|
|
||||||
<body>
|
|
||||||
<Providers>
|
|
||||||
<div style={{ backgroundColor: "#e6ffff", width: "100%", height: '100%' }}>
|
|
||||||
{/* Image -Logo */}
|
|
||||||
<Box style={{
|
|
||||||
position: 'relative', width: '100%', height: '11%',
|
|
||||||
display: "flex",
|
|
||||||
justifyContent: "flex-start",
|
|
||||||
background: "linear-gradient(15deg,rgba(2, 163, 85, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
|
||||||
}}>
|
|
||||||
<Image
|
|
||||||
// radius="md"
|
|
||||||
fit="cover"
|
|
||||||
src={logo}
|
|
||||||
component={NextImage}
|
|
||||||
alt="ebanking"
|
|
||||||
style={{ width: "100%", height: "100%" }}
|
|
||||||
/>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: '60%',
|
|
||||||
left: '80%',
|
|
||||||
color: 'white',
|
|
||||||
textShadow: '1px 1px 2px black',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IconPhoneFilled size={20} />
|
|
||||||
Toll Free No : 1800-180-8008
|
|
||||||
</Text>
|
|
||||||
</Box>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "left",
|
|
||||||
justifyContent: "right",
|
|
||||||
}}>
|
|
||||||
<Group mt="md" gap="sm">
|
|
||||||
<Link href="/">
|
|
||||||
<Button leftSection={<IconHome />} variant="light" color="blue">Home</Button>
|
|
||||||
</Link>
|
|
||||||
<Link href="/accounts">
|
|
||||||
<Button leftSection={<IconBook />} variant="subtle">Accounts</Button>
|
|
||||||
</Link>
|
|
||||||
<Link href="/FundsTransfer">
|
|
||||||
<Button leftSection={<IconCurrencyRupee />} variant="subtle">Send Money</Button>
|
|
||||||
</Link>
|
|
||||||
<Link href="/settings">
|
|
||||||
<Button leftSection={<IconSettings />} variant="subtle">Settings</Button>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Button leftSection={<IconLogout />} variant="subtle" onClick={handleLogout}>Logout</Button>
|
|
||||||
|
|
||||||
</Group>
|
|
||||||
</div>
|
|
||||||
<Divider size="xs" color ='blue' />
|
|
||||||
<div>{children}</div>
|
|
||||||
<Divider size="xs" color ='blue' />
|
|
||||||
{/* Footer */}
|
|
||||||
<Flex justify="center" align="center">
|
|
||||||
<Text c="dimmed" size="xs">© 2025 Kangra Central Co- Operative Bank</Text>
|
|
||||||
</Flex>
|
|
||||||
</div>
|
|
||||||
</Providers>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,192 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import { Button, Input, Group, Stack, Text, Title, Box, Select, Paper,Switch} from '@mantine/core';
|
|
||||||
import { IconBuildingBank, IconEye} from '@tabler/icons-react';
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Providers } from "../providers";
|
|
||||||
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
|
||||||
const router = useRouter();
|
|
||||||
const accountData = [
|
|
||||||
{ "stAccountNo": "50078975412", "stAccountType": "SA", "stAvailableBalance": "10000.0" },
|
|
||||||
{ "stAccountNo": "50078975413", "stAccountType": "SA", "stAvailableBalance": "12000.0" },
|
|
||||||
{ "stAccountNo": "50078975414", "stAccountType": "SA", "stAvailableBalance": "14000.0" },
|
|
||||||
{ "stAccountNo": "60078975412", "stAccountType": "LN", "stAvailableBalance": "100000.0" },
|
|
||||||
{ "stAccountNo": "60078975413", "stAccountType": "LN", "stAvailableBalance": "120000.0" }
|
|
||||||
]
|
|
||||||
const depositAccounts = accountData.filter(acc => acc.stAccountType === "SA");
|
|
||||||
const [selectedDA, setSelectedDA] = useState(depositAccounts[0]?.stAccountNo || "");
|
|
||||||
const selectedDAData = depositAccounts.find(acc => acc.stAccountNo === selectedDA);
|
|
||||||
const loanAccounts = accountData.filter(acc => acc.stAccountType === "LN");
|
|
||||||
const [selectedLN, setSelectedLN] = useState(loanAccounts[0]?.stAccountNo || "");
|
|
||||||
const selectedLNData = loanAccounts.find(acc => acc.stAccountNo === selectedLN);
|
|
||||||
const [showBalance, setShowBalance] = useState(false);
|
|
||||||
|
|
||||||
async function handleLogout(e: React.FormEvent) {
|
|
||||||
e.preventDefault();
|
|
||||||
localStorage.removeItem("access_token");
|
|
||||||
router.push("/login")
|
|
||||||
}
|
|
||||||
useEffect(() => {
|
|
||||||
const token = localStorage.getItem("access_token");
|
|
||||||
if (!token) {
|
|
||||||
SetAuthorized(false);
|
|
||||||
router.push("/login");
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
SetAuthorized(true);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
if (authorized) {
|
|
||||||
return (
|
|
||||||
<Providers>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
marginLeft: '20px',
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Title order={3} style={{ fontFamily: "inter", fontSize: '28px' }}>Welcome, Rajat Kumar Maharana</Title>
|
|
||||||
{/* */}
|
|
||||||
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: '15px' }}>Last logged in at 29/06/25, 05:35 PM</Text>
|
|
||||||
</div>
|
|
||||||
<Group
|
|
||||||
style={{ flex: 1, padding: "10px 10px 4px 10px", marginLeft: '20px', display: "flex", alignItems: "center", justifyContent: "left", height: "5vh" }}>
|
|
||||||
<IconEye size={20} />
|
|
||||||
<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>
|
|
||||||
<div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "flex-start", marginLeft: '20px' }}>
|
|
||||||
<Group grow gap="xl">
|
|
||||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
|
|
||||||
|
|
||||||
<Group gap='xs'>
|
|
||||||
<IconBuildingBank size={25} />
|
|
||||||
<Text fw={700}>Deposit Account</Text>
|
|
||||||
<Select
|
|
||||||
// placeholder="Select A/C No"
|
|
||||||
data={depositAccounts.map(acc => ({
|
|
||||||
value: acc.stAccountNo,
|
|
||||||
label: acc.stAccountNo
|
|
||||||
}))}
|
|
||||||
value={selectedDA}
|
|
||||||
// @ts-ignore
|
|
||||||
onChange={setSelectedDA}
|
|
||||||
size="xs"
|
|
||||||
styles={{
|
|
||||||
input: {
|
|
||||||
backgroundColor: "white",
|
|
||||||
color: "black",
|
|
||||||
marginLeft: 20,
|
|
||||||
width: 125
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<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">Get Statement</Button>
|
|
||||||
</Paper>
|
|
||||||
<Paper p="md" radius="md" style={{ backgroundColor: '#c1e0f0', width: 350 }}>
|
|
||||||
|
|
||||||
<Group gap='xs'>
|
|
||||||
<IconBuildingBank size={25} />
|
|
||||||
<Text fw={700}>Loan Account</Text>
|
|
||||||
<Select
|
|
||||||
placeholder="Select A/C No"
|
|
||||||
data={loanAccounts.map(acc => ({
|
|
||||||
value: acc.stAccountNo,
|
|
||||||
label: acc.stAccountNo
|
|
||||||
}))}
|
|
||||||
value={selectedLN}
|
|
||||||
// @ts-ignore
|
|
||||||
onChange={setSelectedLN}
|
|
||||||
size="xs"
|
|
||||||
styles={{
|
|
||||||
input: {
|
|
||||||
backgroundColor: "white",
|
|
||||||
color: "black",
|
|
||||||
marginLeft: 25,
|
|
||||||
width: 125
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<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">Get Statement</Button>
|
|
||||||
</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>
|
|
||||||
{/* <Title order={5} mb="sm" style={{ textAlign: 'center' }}>Loan EMI Calculator</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>
|
|
||||||
{/* <Group>
|
|
||||||
<TextInput
|
|
||||||
label="Loan Amount"
|
|
||||||
placeholder=""
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
label="Interest Rate(%)"
|
|
||||||
placeholder=""
|
|
||||||
/>
|
|
||||||
<TextInput
|
|
||||||
label="Loan Tenure(Years)"
|
|
||||||
placeholder=""
|
|
||||||
/>
|
|
||||||
<Button fullWidth style={{textAlign:'center'}}>Calculate</Button>
|
|
||||||
</Group> */}
|
|
||||||
</Paper>
|
|
||||||
</Group>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
marginTop: 0,
|
|
||||||
padding: "20px",
|
|
||||||
display: "flex",
|
|
||||||
// alignItems: "center",
|
|
||||||
justifyContent: "left",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box>
|
|
||||||
<Title order={4}>Send Money</Title>
|
|
||||||
<Group mt="sm">
|
|
||||||
<Select
|
|
||||||
placeholder="Own / Other Accounts"
|
|
||||||
data={[{ value: 'own', label: 'Own' }, { value: 'other', label: 'Other' }]}
|
|
||||||
style={{ width: 180 }}
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
placeholder="Select Account"
|
|
||||||
data={[{ value: 'acc1', label: 'Account 1' }, { value: 'acc2', label: 'Account 2' }]}
|
|
||||||
style={{ width: 180 }}
|
|
||||||
/>
|
|
||||||
<Input placeholder="₹0.00" style={{ width: 100 }} />
|
|
||||||
<Button>Proceed</Button>
|
|
||||||
</Group>
|
|
||||||
</Box>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Providers>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import {
|
|
||||||
AppShell,
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Flex,
|
|
||||||
Group,
|
|
||||||
Image,
|
|
||||||
Stack,
|
|
||||||
Text,
|
|
||||||
} from '@mantine/core';
|
|
||||||
|
|
||||||
export default function DashboardLayout() {
|
|
||||||
return (
|
|
||||||
<AppShell
|
|
||||||
header={{ height: 80 }}
|
|
||||||
footer={{ height: 60 }}
|
|
||||||
padding="md"
|
|
||||||
styles={{
|
|
||||||
main: {
|
|
||||||
paddingTop: 80,
|
|
||||||
paddingBottom: 60,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Header */}
|
|
||||||
<AppShell.Header withBorder={false}>
|
|
||||||
<Flex align="center" h="100%" px="md" justify="space-between">
|
|
||||||
<Image src="/logo.png" alt="Logo" height={40} />
|
|
||||||
<Text fw={600}>Fund Transfer Portal</Text>
|
|
||||||
</Flex>
|
|
||||||
</AppShell.Header>
|
|
||||||
|
|
||||||
{/* Sidebar + Content */}
|
|
||||||
<AppShell.Main>
|
|
||||||
<Flex h="100%" gap="md">
|
|
||||||
{/* Sidebar */}
|
|
||||||
<Box w={220} p="md" bg="gray.1" style={{ borderRadius: 8 }}>
|
|
||||||
<Stack spacing="md">
|
|
||||||
<Button fullWidth variant="light" color="blue">
|
|
||||||
Quick Pay
|
|
||||||
</Button>
|
|
||||||
<Button fullWidth variant="light" color="blue">
|
|
||||||
Send to Beneficiary
|
|
||||||
</Button>
|
|
||||||
<Button fullWidth variant="light" color="blue">
|
|
||||||
Transfer
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{/* Main content */}
|
|
||||||
<Box flex={1} p="md" bg="gray.0" style={{ borderRadius: 8 }}>
|
|
||||||
{/* You can import your FundTransferForm component here */}
|
|
||||||
<Text>Welcome to the Transfer Page</Text>
|
|
||||||
</Box>
|
|
||||||
</Flex>
|
|
||||||
</AppShell.Main>
|
|
||||||
|
|
||||||
{/* Footer */}
|
|
||||||
<AppShell.Footer withBorder={false}>
|
|
||||||
<Flex align="center" justify="center" h="100%">
|
|
||||||
<Text size="sm" c="dimmed">
|
|
||||||
© 2025 Your Company
|
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</AppShell.Footer>
|
|
||||||
</AppShell>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
|
|
||||||
export default function Root() {
|
export default function Root() {
|
||||||
//redirect('/home')
|
|
||||||
redirect('/login')
|
redirect('/login')
|
||||||
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user