feat : Screen fund transfer

src/app/FundsTransfer/page.tsx

@@ -1,170 +0,0 @@
-"use client";
-
-import React from 'react';
-import { Card, Button, Grid, Title, Text, Container, Box, Image } from '@mantine/core';
-import NextImage from "next/image";
-import logo from "@/app/image/logo.jpg";
-
-import { IconBan, IconRefresh, IconExchange, IconCreditCard, IconBuildingBank, IconMobiledata, IconWallet, IconTransferIn } from '@tabler/icons-react';
-import { IconLogout } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-
-
-
-
-const options = [
-    {
-        title: 'Transfer within the bank',
-        subtitle: '₹1 to ₹25 Lacs per day',
-    },
-    {
-        title: 'IMPS P2A - Instant Transfer',
-        subtitle: '365 days, 24x7',
-    },
-    {
-        title: 'Transfer to other bank (NEFT)',
-        subtitle: 'Also for Credit Cards',
-    },
-    {
-        title: 'Transfer to other bank (RTGS)',
-        subtitle: '₹2 Lacs to ₹25 Lacs per day',
-    },
-    {
-        title: 'IMPS P2P - Instant Transfer',
-        subtitle: '(IMPS: Mobile No.)',
-    },
-
-];
-
-
-interface TransactionOptionProps {
-    title: string;
-    description: string;
-    icon: React.ReactNode;
-}
-
-const TransactionOption: React.FC<TransactionOptionProps> = ({ title, description, icon }) => (
-    <Card shadow="sm" padding="lg" radius="md" withBorder>
-        <Grid align="center" justify="center" gutter="sm">
-            <Grid.Col span={12} style={{ textAlign: 'center' }}>
-                {icon}
-            </Grid.Col>
-            <Grid.Col span={12} style={{ textAlign: 'center' }}>
-                <Title order={4}>{title}</Title>
-                <Text size="sm" mt="xs">{description}</Text>
-                <Button fullWidth mt="md" variant="light">Go</Button>
-            </Grid.Col>
-        </Grid>
-    </Card>
-);
-
-const FundsTransferPage: React.FC = () => {
-
-    const router = useRouter();
-    
-    async function handleLogout(e: React.FormEvent) {
-        e.preventDefault();
-        localStorage.removeItem("access_token");
-        router.push("/login")
-    }
-
-    return (
-        <div style={{ backgroundColor: "#c1e0f0", width: "100%", height: "100%", paddingTop: "5%" }}>
-            <Box style={{
-                position: 'fixed', width: '100%', height: '12%', top: 0, left: 0, zIndex: 100,
-                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%" }}
-                />
-                <Button style={{
-                    position: 'absolute',
-                    top: '50%',
-                    left: '90%',
-                    color: 'white',
-                    textShadow: '1px 1px 2px black',
-                    fontSize: "20px"
-                }}
-                    leftSection={<IconLogout color='white' />} variant="subtle" onClick={handleLogout}>Logout</Button>
-            </Box>
-            <div style={{ marginTop: '10px' }}>
-                <Box mt="lg" p="xl">
-                    {/* @ts-ignore */}
-                    <Title order={2} align="center" mb="md">Select Transaction Type</Title>
-                    <Grid gutter="lg">
-                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-                            <TransactionOption
-                                title="Transfer within the bank"
-                                description="(Re. 1 to Rs. 25 Lacs per day)"
-                                //icon={<IconBan size={40} stroke={1.5} />}
-                                icon={<IconTransferIn size={40} stroke={1.5} />}
-                            />
-                        </Grid.Col>
-
-                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-                            <TransactionOption
-                                title="IMPS P2A - Instant Transfer"
-                                description="(365 days, 24X7) (Re. 1 to Rs. 25 Lacs)"
-                                icon={<IconExchange size={40} stroke={1.5} />}
-                            />
-                        </Grid.Col>
-
-                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-                            <TransactionOption
-                                title="Transfer to other bank (NEFT)"
-                                description="(Also for Credit Cards Payment)"
-                                icon={<IconCreditCard size={40} stroke={1.5} />}
-                            />
-                        </Grid.Col>
-
-                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-                            <TransactionOption
-                                title="Transfer to other bank (RTGS)"
-                                description="(Rs. 2 Lacs to Rs. 25 Lacs per day)"
-                                icon={<IconBuildingBank size={40} stroke={1.5} />}
-                            />
-                        </Grid.Col>
-
-                        <Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
-                            <TransactionOption
-                                title="IMPS P2P - Instant Transfer"
-                                description="(365 days, 24X7) (IMPS: Mobile No.)"
-                                icon={<IconMobiledata size={40} stroke={1.5} />}
-                            />
-                        </Grid.Col>
-
-
-                    </Grid>
-                </Box>
-
-                <Box
-                    component="footer"
-                    style={{
-                        width: "100%",
-                        textAlign: "center",
-                        padding: "10px 0",
-                        bottom: 0,
-                        left: 0,
-                        zIndex: 1000,
-                        fontSize: "14px",
-                    }}
-                >
-                    <Text>
-                        © 2025 KCC Bank. All rights reserved. {" "}
-
-                    </Text>
-                </Box>
-            </div>
-
-        </div>
-    );
-};
-
-export default FundsTransferPage;

src/app/LayoutWithSidebar.tsx

@@ -0,0 +1,56 @@
+'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;

src/app/home/FundsTransfer/layout.tsx

@@ -0,0 +1,71 @@
+"use client";
+import { Button, Group } from '@mantine/core';
+import { IconHome } from '@tabler/icons-react';
+import Link from 'next/link';
+import React from 'react';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+    return (
+        <div style={{ display: "flex" }}>
+            <div
+                style={{
+                    // width: "250px",
+                    backgroundColor: '#c5e4f9',
+                    padding: "20px",
+                    display: "flex",
+                    flexDirection: "column",
+                    justifyContent: "flex-start",
+                    gap: "20px",
+                    borderRight:"1px solid #ccc",
+                }}
+            >
+                <h2 style={{ fontSize: "20px", marginBottom: "10px" }}>Menu</h2>
+
+                <Link href="/" passHref>
+                    <Button
+                        component="a"
+                        leftSection={<IconHome size={16} />}
+                        variant="light"
+                        color="blue"
+                        fullWidth
+                    >
+                        Quick Pay
+                    </Button>
+                </Link>
+
+                <Link href="/" passHref>
+                    <Button
+                        component="a"
+                        leftSection={<IconHome size={16} />}
+                        variant="light"
+                        color="blue"
+                        fullWidth
+                    >
+                        Send to Beneficiary
+                    </Button>
+                </Link>
+
+                <Link href="/" passHref>
+                    <Button
+                        component="a"
+                        leftSection={<IconHome size={16} />}
+                        variant="light"
+                        color="blue"
+                        fullWidth
+                    >
+                        Transfer within the bank
+                    </Button>
+                </Link>
+            </div>
+
+            {/* Main content */}
+            <div style={{
+                // width: '80%',
+                // padding: '20px',
+                // border:'1px solid red'
+            }}>
+                {children}
+            </div>
+        </div>
+    );
+}

src/app/home/FundsTransfer/page.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import {
+    Box,
+  Button,
+  Flex,
+  Group,
+  Radio,
+  Select,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useState } from "react";
+
+export default function FundTransferForm() {
+  const [paymentMethod, setPaymentMethod] = useState("imps");
+
+  return (
+    <Box
+                maw={1000}
+                p="lg"
+                w="1000px"
+                style={{
+                    // borderRadius: 9,
+                    // boxShadow: '0 0 12px rgba(0, 0, 0, 0.05)',
+                    // backgroundColor: '#c5e4f9',
+                    width:'150%',
+                    marginRight: 100
+                }}
+            >
+    <Flex
+      direction="column"
+      gap={12}
+      style={{ maxWidth: 1000, margin: "0 auto", padding: "1rem 0" }}
+    >
+      <Title order={4} mb={4}>
+        Enter Transaction Details
+      </Title>
+
+      {/* Transfer From */}
+      <div>
+        <Text size="sm" fw={500}>
+          Transfer from
+        </Text>
+        <Select
+          placeholder="Select account"
+          data={["Savings - 1234"]}
+          size="sm"
+          mt={4}
+        />
+        {/* <Text size="xs" c="red" mt={2}>
+          * Total available amount is ₹ *****
+        </Text> */}
+      </div>
+
+      {/* Amount + Remarks */}
+      <Group grow gap="sm">
+        <TextInput label="Amount" placeholder="Enter amount" size="sm" />
+        <TextInput
+          label="Remarks (optional)"
+          placeholder="Remarks"
+          size="sm"
+        />
+      </Group>
+
+      {/* Payment Method */}
+      <div>
+        <Text size="sm" fw={500} mb={4}>
+          Payment Method
+        </Text>
+        <Radio.Group
+          value={paymentMethod}
+          onChange={setPaymentMethod}
+          name="payment-method"
+        >
+          <Flex direction="column" gap={4}>
+            <Radio
+              value="imps"
+              label="IMPS (Instant Transfer up to 2 Lakh, Available 24x7 365 Days)"
+            />
+            <Radio
+              value="neft"
+              label="NEFT (Regular Transfer, Available 24x7 365 Days)"
+            />
+            <Radio
+              value="rtgs"
+              label="RTGS (Transfer above 2 lakh, 7AM - 6PM on RBI Working Days)"
+            />
+          </Flex>
+        </Radio.Group>
+      </div>
+
+      {/* IFSC + Bank Name */}
+      <Group grow gap="sm">
+        <TextInput label="Payee Bank IFSC" placeholder="Enter IFSC code" size="sm" />
+        <TextInput label="Payee Bank Name" placeholder="Enter bank name" size="sm" />
+      </Group>
+
+      {/* Buttons */}
+      <Group justify="flex-end" mt="sm">
+        <Button variant="default" size="sm">
+          Cancel
+        </Button>
+        <Button size="sm">PROCEED TO PAY</Button>
+      </Group>
+    </Flex>
+    </Box>
+  );
+}

src/app/home/layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from 'react';
-import { Box, Button, Flex, Group, Image, Text } from '@mantine/core';
+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";
@@ -20,7 +20,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <html lang="en">
             <body>
                 <Providers>
-                    <div style={{ backgroundColor: "#e6ffff", width: "100%", height: '100vh' }}>
+                    <div style={{ backgroundColor: "#e6ffff", width: "100%", height: '100%' }}>
                         {/* Image -Logo */}
                         <Box style={{
                             position: 'relative', width: '100%', height: '11%',
@@ -63,7 +63,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                                 <Link href="/accounts">
                                     <Button leftSection={<IconBook />} variant="subtle">Accounts</Button>
                                 </Link>
-                                <Link href="/send-money">
+                                <Link href="/FundsTransfer">
                                     <Button leftSection={<IconCurrencyRupee />} variant="subtle">Send Money</Button>
                                 </Link>
                                 <Link href="/settings">
@@ -74,7 +74,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
                             </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>

src/app/layout/page.tsx

@@ -0,0 +1,71 @@
+"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>
+  );
+}

src/app/test/layout.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Box, Grid } from "@mantine/core"
+
+export default function Layout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    return <Grid bg="gray">
+        <Grid.Col span={3}>
+            <Box bg="blue">
+                <p>Test Layout</p>
+            </Box>
+        </Grid.Col>
+        <Grid.Col span={9}>
+            <Box bg="yellow">
+                {children}
+            </Box>
+        </Grid.Col>
+    </Grid>
+}

src/app/test/test1/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+    return <p>Test Page 1</p>
+}

src/app/test/test2/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+    return <p>Test Page 2</p>
+}