feat : APi integrated foe change password and change trans password

feat: Change the UI design

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

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { Button, Input, Group, Stack, Text, Title, Box, Select, Paper, Switch } from '@mantine/core';
-import { IconBuildingBank, IconEye } from '@tabler/icons-react';
+import { IconBuildingBank, IconEye, IconLink } from '@tabler/icons-react';
 import { useRouter } from "next/navigation";
 import { Providers } from "../../providers";
 import { notifications } from '@mantine/notifications';
@@ -192,7 +192,7 @@ export default function Home() {
 
                             {/* Important Links Card */}
                             <Paper p="md" radius="md" style={{ width: 300, backgroundColor: '#FFFFFF', marginLeft: '130px', border: '1px solid grey' }}>
-                                <Title order={5} mb="sm">Quick Links</Title>
+                                <Title order={5} mb="sm">Quick Links </Title>
                                 <Stack gap="xs">
                                     <Button variant="light" color="blue" fullWidth>Loan EMI Calculator</Button>
                                     <Button variant="light" color="blue" fullWidth>Branch Locator</Button>
@@ -202,30 +202,11 @@ export default function Home() {
                             </Paper>
                         </Group>
                     </div>
-
-                    {/* Send Money Section */}
                     <div style={{ padding: "20px", display: "flex", 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> */}
                         <Stack>
                             <Text fw={700}> ** Book Balance includes uncleared effect.</Text>
                             <Text fw={700}> ** Click on the &quot;Show Balance&quot;to display balance for the Deposit and Loan account.</Text>
-                            {/* <Text fw={700}> ** Click on the "Get Statement" to display last 5 transactions.</Text> */}
+                            <Text fw={400} c="red"> ** Your Password will expire in 85 days.</Text>
                             <Text></Text>
                         </Stack>
                     </div>

src/app/(main)/settings/change_login_password/page.tsx

@@ -177,7 +177,6 @@ export default function ChangePassword() {
 
     return (
         <Paper shadow="sm" radius="md" p="md" withBorder h={400}>
-            <Title order={3} style={{ color: "red" }}>More Updates comming soon .....</Title>
             <Title order={3} mb="sm">
                 Change Login Password
             </Title>
@@ -286,7 +285,7 @@ export default function ChangePassword() {
                 </Group>
             </div>
             <Text size="sm" c="dimmed" style={{ marginTop: "40px" }}>
-                Note: Your new password must be 8–15 characters long and contain at least one number and one special character.
+                Note: Your new Login password must be 8–15 characters long and contain at least one number and one special character.
             </Text>
         </Paper>
     );

src/app/(main)/settings/change_txn_password/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { TextInput, PasswordInput, Button, Title, Paper, Group, Box } from "@mantine/core";
+import { TextInput, PasswordInput, Button, Title, Paper, Group, Box, Text } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { IconLock } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
@@ -183,16 +183,17 @@ export default function ChangePassword() {
             </Title>
 
             {/* Scrollable form area */}
-            <div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
+            <div style={{ overflowY: "auto", maxHeight: "280px" }}>
-                <PasswordInput
-                    label="Old Password"
-                    placeholder="Enter old password"
-                    value={oldPassword}
-                    onChange={(e) => setOldPassword(e.currentTarget.value)}
-                    withAsterisk
-                    mb="xs"
-                />
                 <Group grow>
+                    <PasswordInput
+                        label="Old Password"
+                        placeholder="Enter old password"
+                        value={oldPassword}
+                        onChange={(e) => setOldPassword(e.currentTarget.value)}
+                        withAsterisk
+                        mb="xs"
+                    />
+
                     <PasswordInput
                         label="New Password"
                         placeholder="Enter new password"
@@ -217,9 +218,7 @@ export default function ChangePassword() {
                     />
 
                 </Group>
-
                 {/* CAPTCHA */}
-
                 <div style={{ marginTop: 5 }}>
                     <label style={{ display: "block", marginBottom: 4, fontSize: "14px" }}>
 
@@ -274,20 +273,22 @@ export default function ChangePassword() {
                         readOnly={otpValidated}
                     />
                 )}
-
+                <Group mt="md" gap="sm">
+                    <Button onClick={handleSubmit}>
+                        {step === "form" && "Submit"}
+                        {step === "otp" && "Validate OTP"}
+                        {step === "final" && "Change Password"}
+                    </Button>
+                    <Button variant="outline" color="gray" onClick={resetForm}>
+                        Reset
+                    </Button>
+                </Group>
             </div>
 
-            {/* Buttons */}
+            <Text size="sm" c="dimmed" style={{ marginTop: "40px" }}>
-            <Group mt="md" gap="sm">
+                Note: Your new Transaction password must be 8–15 characters long and contain at least one number and one special character.
-                <Button onClick={handleSubmit}>
+            </Text>
-                    {step === "form" && "Submit"}
+
-                    {step === "otp" && "Validate OTP"}
-                    {step === "final" && "Change Password"}
-                </Button>
-                <Button variant="outline" color="gray" onClick={resetForm}>
-                    Reset
-                </Button>
-            </Group>
         </Paper>
     );
 }

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

@@ -15,6 +15,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         { label: "Change Login Password", href: "/settings/change_login_password" },
         { label: "Change transaction Password", href: "/settings/change_txn_password" },
         { label: "Set transaction Password", href: "/settings/set_txn_password" },
+        { label: "Set userId", href: "/settings/user_id" },
     ];
     useEffect(() => {
         const token = localStorage.getItem("access_token");

src/app/(main)/settings/set_txn_password/page.tsx

@@ -8,6 +8,7 @@ import {
     Title,
     Paper,
     Group,
+    Text
 } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { IconLock } from "@tabler/icons-react";
@@ -294,6 +295,10 @@ export default function ChangePassword() {
                     Reset
                 </Button>
             </Group>
+
+            <Text size="sm" c="dimmed" style={{ marginTop: "40px" }}>
+                Note: Your new Transaction password must be 8–15 characters long and contain at least one number and one special character.
+            </Text>
         </Paper>
     );
 }

src/app/(main)/settings/user_id/page.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Group, Loader, Paper, Text } from "@mantine/core";
+
+
+export default function ChangePassword() {
+    return (
+        <Paper shadow="sm" radius="md" p="md" withBorder h={400} >
+            <Group>
+                <Text fw={700} size="lg">
+                    The feature will be available soon...
+                </Text>
+                <Loader color="blue" type="bars" size="sm" />
+            </Group>
+        </Paper>
+    );
+}