Fix: layout of the application

Feat: Create page for account Summary

src/app/(main)/funds_transfer/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/(main)/funds_transfer/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>
+  );
+}