fix: design in view profile and account overview

feat : page add for e mandate otp
2025-12-06 13:54:20 +05:30
parent cf9faf2e82
commit ad758eb14d
25 changed files with 1027 additions and 175 deletions
--- a/src/app/(main)/settings/change_login_password/page.tsx
+++ b/src/app/(main)/settings/change_login_password/page.tsx
@@ -229,7 +229,7 @@ export default function ChangePassword() {

    return (
        <Paper shadow="sm" radius="md" p="md" withBorder h={500}>
-            <Title order={3} mb="sm">
+            <Title order={4} mb="sm">
                Change Login Password
            </Title>
            {/* Scrollable form area */}
--- a/src/app/(main)/settings/change_txn_password/page.tsx
+++ b/src/app/(main)/settings/change_txn_password/page.tsx
@@ -241,7 +241,7 @@ export default function ChangePassword() {

    return (
        <Paper shadow="sm" radius="md" p="md" withBorder h={500}>
-            <Title order={3} mb="sm">
+            <Title order={4} mb="sm">
                Change Transaction Password
            </Title>

--- a/src/app/(main)/settings/page.tsx
+++ b/src/app/(main)/settings/page.tsx
@@ -10,9 +10,10 @@ import {
    Divider,
    Loader,
    Center,
+    ActionIcon,
 } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
-import { useRouter } from "next/navigation";
+import { IconEye, IconEyeOff } from "@tabler/icons-react";

 // Response structure from backend
 interface ProfileData {
@@ -24,13 +25,13 @@ interface ProfileData {
    id: string;
    custaddress: string;
    pincode: string;
-
 }

 export default function ViewProfile() {
-    const router = useRouter();
    const [profileData, setProfileData] = useState<ProfileData | null>(null);
    const [loading, setLoading] = useState(true);
+    const [showCIF, setShowCIF] = useState(false);
+    const [showPrimaryID, setShowPrimaryID] = useState(false);

    // Fetch API with same style as RootLayout
    async function handleFetchProfile() {
@@ -40,7 +41,7 @@ export default function ViewProfile() {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
-                     "X-Login-Type": "IB",
+                    "X-Login-Type": "IB",
                    Authorization: `Bearer ${token}`,
                },
            });
@@ -79,39 +80,90 @@ export default function ViewProfile() {
        handleFetchProfile();
    }, []);

+    const maskValue = (value: string) => {
+        if (!value || value.length <= 4) return value;
+        return "*".repeat(value.length - 4) + value.slice(-4);
+    };
+
+    const formatDOB = (dob?: string) => {
+        if (!dob || dob.length !== 8) return dob;
+        const dd = dob.slice(0, 2);
+        const mm = dob.slice(2, 4);
+        const yyyy = dob.slice(4, 8);
+        return `${dd}-${mm}-${yyyy}`;
+    };
+
+    const formatMobile = (mobile?: string): string => {
+        if (!mobile) return "";
+        // If number starts with country code 91
+        if (mobile.startsWith("91") && mobile.length === 12) {
+            return `+91 ${mobile.slice(2, 7)} ${mobile.slice(7)}`;
+        }
+
+        // If already 10-digit number
+        if (mobile.length === 10) {
+            return `${mobile.slice(0, 5)} ${mobile.slice(5)}`;
+        }
+
+        return mobile; // fallback
+    };
+
+
    const Row = ({
        label,
        value,
        link,
+        masked,
+        showValue,
+        onToggle,
    }: {
        label: string;
        value: string;
        link?: string;
-    }) => (
-        <Grid align="flex-start" gutter="xs" mb={6}>
-            <Grid.Col span={3}>
-                <Text c="dimmed" size="sm" fw={500}>
-                    {label}
-                </Text>
-            </Grid.Col>
-            <Grid.Col span={9}>
-                {link ? (
-                    <Anchor size="sm" href={link} target="_blank" rel="noopener noreferrer">
-                        {value}
-                    </Anchor>
-                ) : (
-                    <Text size="sm">{value}</Text>
-                )}
-            </Grid.Col>
-        </Grid>
-    );
+        masked?: boolean;
+        showValue?: boolean;
+        onToggle?: () => void;
+    }) => {
+        const displayValue = masked && !showValue ? maskValue(value) : value;
+
+        return (
+            <Grid align="flex-start" gutter="xs" mb={6}>
+                <Grid.Col span={3}>
+                    <Text c="dimmed" size="sm" fw={500}>
+                        {label}
+                    </Text>
+                </Grid.Col>
+                <Grid.Col span={9}>
+                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                        {link ? (
+                            <Anchor size="sm" href={link} target="_blank" rel="noopener noreferrer">
+                                {displayValue}
+                            </Anchor>
+                        ) : (
+                            <Text size="sm">{displayValue}</Text>
+                        )}
+                        {masked && onToggle && (
+                            <ActionIcon
+                                variant="subtle"
+                                size="sm"
+                                onClick={onToggle}
+                                aria-label={showValue ? "Hide" : "Show"}
+                            >
+                                {showValue ? <IconEyeOff size={16} /> : <IconEye size={16} />}
+                            </ActionIcon>
+                        )}
+                    </div>
+                </Grid.Col>
+            </Grid>
+        );
+    };

    return (
        <Paper shadow="xs" radius="md" p="md" withBorder h={500}>
-            <Title order={4} mb="sm">
+            {/* <Title order={4} mb="sm">
                View Profile
            </Title>
-            <Divider mb="sm" />
+            <Divider mb="sm" /> */}

            {loading ? (
                <Center>
@@ -119,22 +171,39 @@ export default function ViewProfile() {
                </Center>
            ) : profileData ? (
                <>
-                    <Row label="Customer ID (CIF)" value={profileData.cifNumber} />
-                    <Row label="Customer Name" value={profileData.custname} />
-                    <Row label="ID" value={profileData.id} />
-                    <Row label="Branch No" value={profileData.stBranchNo} />
-                    <Row label="Date of Birth" value={profileData.custdob} />
-                    <Row label="Mobile Number" value={profileData.mobileno} />
+                    {/* Personal Details Section */}
+                    <Title order={4} mb="sm" mt="md">
+                        Personal Details
+                    </Title>
+                    <Divider mb="sm" />

                    <Row
-                        label="Address"
-                        value={profileData.custaddress}
-                    // link={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(
-                    //     profileData.custaddress
-                    // )}`}
+                        label="Customer ID (CIF)"
+                        value={profileData.cifNumber}
+                        masked={true}
+                        showValue={showCIF}
+                        onToggle={() => setShowCIF(!showCIF)}
                    />
+                    <Row label="Customer Name" value={profileData.custname} />
+                    <Row label="Branch No" value={profileData.stBranchNo} />
+                    <Row label="Date of Birth" value={formatDOB(profileData.custdob) ?? ""} />
+                    <Row label="Mobile Number" value={formatMobile(profileData.mobileno) ?? ""} />
+                    <Row label="Address" value={profileData.custaddress} />
                    <Row label="Pincode" value={profileData.pincode} />

+                    {/* KYC Details Section */}
+                    <Title order={4} mb="sm" mt="md">
+                        KYC Details
+                    </Title>
+                    <Divider mb="sm" />
+
+                    <Row
+                        label="Primary ID"
+                        value={profileData.id}
+                        masked={true}
+                        showValue={showPrimaryID}
+                    // onToggle={() => setShowPrimaryID(!showPrimaryID)}
+                    />
                </>
            ) : (
                <Text c="red" size="sm">
--- a/src/app/(main)/settings/set_txn_limit/page.tsx
+++ b/src/app/(main)/settings/set_txn_limit/page.tsx
@@ -225,7 +225,7 @@ export default function SetTransactionLimit() {

    return (
        <Paper shadow="sm" radius="md" p="md" withBorder h={500}>
-            <Title order={3} mb="sm">
+            <Title order={4} mb="sm">
                Set Transaction Limit
            </Title>

--- a/src/app/(main)/settings/set_txn_password/page.tsx
+++ b/src/app/(main)/settings/set_txn_password/page.tsx
@@ -241,7 +241,7 @@ export default function ChangePassword() {

    return (
        <Paper shadow="sm" radius="md" p="md" withBorder h={500} >
-            <Title order={3} mb="sm">
+            <Title order={4} mb="sm">
                Set Transaction Password
            </Title>

--- a/src/app/(main)/settings/user_name/page.tsx
+++ b/src/app/(main)/settings/user_name/page.tsx
@@ -262,7 +262,7 @@ export default function SetPreferredNameSimple() {

  return (
    <Paper shadow="sm" radius="md" p="md" withBorder h={500}>
-      <Title order={3} mb="sm">
+      <Title order={4} mb="sm">
        Set Preferred Name
      </Title>