feat: update settings feature

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

@@ -147,11 +147,11 @@ export default function ChangePassword() {
     };
 
     return (
-        <Paper shadow="sm" radius="md" p="md" withBorder>
+        <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>
-
             {/* Scrollable form area */}
             <div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
                 <PasswordInput

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

@@ -147,7 +147,8 @@ export default function ChangePassword() {
     };
 
     return (
-        <Paper shadow="sm" radius="md" p="md" withBorder>
+        <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 Transaction Password
             </Title>

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

@@ -1,22 +1,34 @@
 "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,
+} from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { IconLock } from "@tabler/icons-react";
 import { generateCaptcha } from "@/app/captcha";
+import { useRouter } from "next/navigation";
 
 export default function ChangePassword() {
-    const [oldPassword, setOldPassword] = useState("");
     const [newPassword, setNewPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
     const [captcha, setCaptcha] = useState("");
     const [captchaInput, setCaptchaInput] = useState("");
     const [otp, setOtp] = useState("");
     const [otpValidated, setOtpValidated] = useState(false);
+    const [step, setStep] = useState<"form" | "otp" | "final">("form");
 
-    const [step, setStep] = useState<"form" | "otp" | "final">("form"); // ✅ steps control
-    const [passwordHistory] = useState(["Pass@1234", "OldPass@123", "MyPass#2023"]);
+    const router = useRouter();
+    const [passwordHistory] = useState([
+        "Pass@1234",
+        "OldPass@123",
+        "MyPass#2023",
+    ]);
     const icon = <IconLock size={18} stroke={1.5} />;
 
     useEffect(() => {
@@ -30,10 +42,12 @@ export default function ChangePassword() {
     };
 
     const validatePasswordPolicy = (password: string) => {
-        return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(password);
+        return /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$/.test(
+            password
+        );
     };
 
-    const handleSubmit = () => {
+    const handleSubmit = async () => {
         // Step 1 → validate form
         if (step === "form") {
             if (!newPassword || !confirmPassword || !captchaInput) {
@@ -45,8 +59,6 @@ export default function ChangePassword() {
                 return;
             }
 
-
-
             if (!validatePasswordPolicy(newPassword)) {
                 notifications.show({
                     title: "Invalid Password",
@@ -85,7 +97,7 @@ export default function ChangePassword() {
                 return;
             }
 
-            // ✅ Passed → move to OTP
+            // ✅ Passed → move to OTP step
             setStep("otp");
             notifications.show({
                 title: "OTP Sent",
@@ -116,19 +128,56 @@ export default function ChangePassword() {
             return;
         }
 
-        // Step 3 → Final Change Password
+        // Step 3 → Final API call to set transaction password
         if (step === "final") {
+            const token = localStorage.getItem("access_token");
+            if (!token) {
+                router.push("/login");
+                return;
+            }
+
+            try {
+                const response = await fetch("/api/auth/transaction_password", {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                    body: JSON.stringify({
+                        transaction_password: newPassword,
+                    }),
+                });
+
+                if (response.status === 401) {
+                    localStorage.removeItem("access_token");
+                    router.push("/login");
+                    return;
+                }
+
+                const result = await response.json();
+
+                if (!response.ok) {
+                    throw new Error(result.message || "Failed to set transaction password");
+                }
+
                 notifications.show({
-                title: "Password Changed",
-                message: "Your password has been successfully updated.",
+                    title: "Success",
+                    message: "Transaction password set successfully.",
                     color: "green",
                 });
+
                 resetForm();
+            } catch (err: any) {
+                notifications.show({
+                    title: "Error",
+                    message: err.message || "Server error, please try again later",
+                    color: "red",
+                });
+            }
         }
     };
 
     const resetForm = () => {
-        setOldPassword("");
         setNewPassword("");
         setConfirmPassword("");
         setCaptchaInput("");
@@ -139,21 +188,12 @@ export default function ChangePassword() {
     };
 
     return (
-        <Paper shadow="sm" radius="md" p="md" withBorder>
+        <Paper shadow="sm" radius="md" p="md" withBorder h={400} >
             <Title order={3} mb="sm">
                 Set Transaction Password
             </Title>
 
-            {/* Scrollable form area */}
             <div style={{ overflowY: "auto", maxHeight: "280px", paddingRight: 8 }}>
-                {/* <PasswordInput
-                    label="Old Password"
-                    placeholder="Enter old password"
-                    value={oldPassword}
-                    onChange={(e) => setOldPassword(e.currentTarget.value)}
-                    withAsterisk
-                    mb="xs"
-                /> */}
                 <Group grow>
                     <PasswordInput
                         label="New Password"
@@ -177,17 +217,23 @@ export default function ChangePassword() {
                         onPaste={(e) => e.preventDefault()}
                         onCut={(e) => e.preventDefault()}
                     />
-
                 </Group>
 
                 {/* CAPTCHA */}
-
                 <div style={{ marginTop: 5 }}>
-                    <label style={{ display: "block", marginBottom: 4, fontSize: "14px" }}>
-
+                    <label
+                        style={{ display: "block", marginBottom: 4, fontSize: "14px" }}
+                    >
                         Enter CAPTCHA <span style={{ color: "red" }}>*</span>
                     </label>
-                    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 5 }}>
+                    <div
+                        style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 10,
+                            marginBottom: 5,
+                        }}
+                    >
                         <div
                             style={{
                                 fontSize: "18px",
@@ -224,6 +270,7 @@ export default function ChangePassword() {
                         />
                     </div>
                 </div>
+
                 {step !== "form" && (
                     <PasswordInput
                         label="Enter OTP"
@@ -236,15 +283,13 @@ export default function ChangePassword() {
                         readOnly={otpValidated}
                     />
                 )}
-
             </div>
 
-            {/* Buttons */}
             <Group mt="md" gap="sm">
                 <Button onClick={handleSubmit}>
                     {step === "form" && "Submit"}
                     {step === "otp" && "Validate OTP"}
-                    {step === "final" && "Change Password"}
+                    {step === "final" && "Set Password"}
                 </Button>
                 <Button variant="outline" color="gray" onClick={resetForm}>
                     Reset