reg complete

package-lock.json

@@ -86,7 +86,6 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -424,7 +423,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -468,7 +466,6 @@
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
       "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -1171,7 +1168,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.14.9.tgz",
       "integrity": "sha512-3gtUX0e584MYkKBQMgSECMvE1Dwzg+eONefDQ0wxVSe5YMBsZwdN5pL7UapwWBlV8+i8QCztF9TP947tEjZAGA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/component": "0.7.1",
         "@firebase/logger": "0.5.0",
@@ -1238,7 +1234,6 @@
       "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.5.9.tgz",
       "integrity": "sha512-e5LzqjO69/N2z7XcJeuMzIp4wWnW696dQeaHAUpQvGk89gIWHAIvG6W+mA3UotGW6jBoqdppEJ9DnuwbcBByug==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@firebase/app": "0.14.9",
         "@firebase/component": "0.7.1",
@@ -1254,8 +1249,7 @@
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.3.tgz",
       "integrity": "sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==",
-      "license": "Apache-2.0",
+      "license": "Apache-2.0"
-      "peer": true
     },
     "node_modules/@firebase/auth-compat": {
       "version": "0.6.3",
@@ -1712,7 +1706,6 @@
       "integrity": "sha512-/gnejm7MKkVIXnSJGpc9L2CvvvzJvtDPeAEq5jAwgVlf/PeNxot+THx/bpD20wQ8uL5sz0xqgXy1nisOYMU+mw==",
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       },
@@ -1984,7 +1977,6 @@
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
       "integrity": "sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@mui/core-downloads-tracker": "^7.3.5",
@@ -2095,7 +2087,6 @@
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.5.tgz",
       "integrity": "sha512-yPaf5+gY3v80HNkJcPi6WT+r9ebeM4eJzrREXPxMt7pNTV/1eahyODO4fbH3Qvd8irNxDFYn5RQ3idHW55rA6g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@mui/private-theming": "^7.3.5",
@@ -3052,8 +3043,7 @@
         }
       ],
       "hasInstallScript": true,
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/@tsparticles/interaction-external-attract": {
       "version": "3.9.1",
@@ -3621,18 +3611,6 @@
         "@types/unist": "^2"
       }
     },
-    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz",
-      "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
-      "license": "MIT",
-      "dependencies": {
-        "hoist-non-react-statics": "^3.3.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3671,7 +3649,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.4.tgz",
       "integrity": "sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -3700,18 +3677,11 @@
       "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
       "license": "MIT"
     },
-    "node_modules/@types/stylis": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
-      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
-      "license": "MIT"
-    },
     "node_modules/@types/three": {
       "version": "0.181.0",
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.181.0.tgz",
       "integrity": "sha512-MLF1ks8yRM2k71D7RprFpDb9DOX0p22DbdPqT/uAkc6AtQXjxWCVDjCy23G9t1o8HcQPk7woD2NIyiaWcWPYmA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@dimforge/rapier3d-compat": "~0.12.0",
         "@tweenjs/tween.js": "~23.1.3",
@@ -3984,7 +3954,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4269,7 +4238,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4345,15 +4313,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/camelize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/camera-controls": {
       "version": "2.10.1",
       "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-2.10.1.tgz",
@@ -4665,26 +4624,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/css-to-react-native": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
-      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
-      "license": "MIT",
-      "dependencies": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4701,8 +4640,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
@@ -4830,7 +4768,6 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
       "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -4945,8 +4882,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -5129,7 +5065,6 @@
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6863,7 +6798,6 @@
       "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.18.0.tgz",
       "integrity": "sha512-FYZZqD0UUHUswKz3LQl2Z7H24AhD14XGTsIRw3SJaXUxyfVMi+1yiZGmqTcPt/CkPpdU7rrxqcyQ1zJE5DjvIQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8",
         "@types/react-reconciler": "^0.26.7",
@@ -6946,7 +6880,6 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -7554,7 +7487,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7663,7 +7595,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7940,7 +7871,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7950,7 +7880,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -8048,7 +7977,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -8275,8 +8203,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -8515,7 +8442,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -8582,12 +8508,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "license": "MIT"
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -9200,7 +9120,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
       "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -9353,7 +9272,6 @@
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
       "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.2.0",
@@ -9592,7 +9510,6 @@
       "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

src/api/register.api.js

@@ -1,11 +1,11 @@
-import axiosInstance from "./axiosInstance";
+import axiosInstance, { apiForFiles } from "./axiosInstance";
 import { API_ENDPOINTS } from "./apiEndpoints";
 
 /**
  * STEP 1 – Personal Details
  */
 export const registerStep1API = async (payload) => {
-  const res = await axiosInstance.post(API_ENDPOINTS.REGISTER_STEP1, payload);
+  const res = await apiForFiles.post(API_ENDPOINTS.REGISTER_STEP1, payload);
   return res.data;
 };
 

src/feature/AdvancedDropzone.jsx

@@ -17,6 +17,10 @@ const AdvancedDropzone = ({ value, onChange }) => {
   const [videoSrc, setVideoSrc] = React.useState(undefined);
   const [hoveredId, setHoveredId] = React.useState(null);
 
+  React.useEffect(() => {
+    setExtFiles(value || []);
+  }, [value]);
+
   const updateFiles = (incomingFiles) => {
     console.log("incoming files", incomingFiles);
     setExtFiles(incomingFiles);

src/feature/LifestyleDetailsForm.jsx

@@ -372,6 +372,11 @@ const LifestyleDetailsForm = ({
                 Add Rasi
               </h3>
               {renderChartGrid("graha")}
+              {errors.graha_duplicate && (
+                <p style={{ color: "#d32f2f", fontSize: "0.75rem", marginTop: "4px" }}>
+                  {errors.graha_duplicate}
+                </p>
+              )}
             </div>
           </div>
 
@@ -381,6 +386,11 @@ const LifestyleDetailsForm = ({
                 Add Navamsam
               </h3>
               {renderChartGrid("amsam")}
+              {errors.amsam_duplicate && (
+                <p style={{ color: "#d32f2f", fontSize: "0.75rem", marginTop: "4px" }}>
+                  {errors.amsam_duplicate}
+                </p>
+              )}
             </div>
           </div>
         </div>

src/feature/PreviewScreen.jsx

@@ -1,5 +1,10 @@
 import React from "react";
 import { useSelector } from 'react-redux';
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Pagination } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
 import { Edit2,Info  } from 'lucide-react';
 import {
   Card,
@@ -75,10 +80,10 @@ const PreviewScreen = ({ onEdit, onSubmit }) => {
       ];
 
   const renderValue = (key, value) => {
-    if (key === "profiles" || key === "profile") {
+    if (key === "profiles" || key === "profile" || key === "profile_images" || key === "images") {
-      const list = Array.isArray(value) ? value : [];
+      const list = Array.isArray(value) ? value : (value ? [value] : []);
       return (
-        <Box display="flex" gap={0} flexWrap="wrap">
+        <Box display="flex" gap={1} flexWrap="wrap">
           {list.length > 0 ? (
             list.map((imgObj, index) => {
               const src =
@@ -99,7 +104,7 @@ const PreviewScreen = ({ onEdit, onSubmit }) => {
                     objectFit: "cover",
                     borderRadius: "50%",
                     border: "1px solid #ccc",
-                    marginLeft: "-20px",
+                    // marginLeft: "-20px",
                   }}
                 />
               );
@@ -183,9 +188,69 @@ const PreviewScreen = ({ onEdit, onSubmit }) => {
               <Divider />
               <CardContent sx={{ pt: 1, }}>
                 {Object.entries(section.data || {}).map(([key, value]) => {
-                  // if (value && key !== 'profiles') {
+                    // Handle brothers and sisters arrays specifically
-
+                    if ((key === 'brothers' || key === 'sisters') && Array.isArray(value) && value.length > 0) {
-
+                      return (
+                        <Box key={key} sx={{ py: 2, borderBottom: "1px solid #e0e0e0" }}>
+                          <Typography color="text.secondary" sx={{ fontWeight: 600, mb: 1 }}>
+                            {key === 'brothers' ? 'Brothers Details' : 'Sisters Details'}
+                          </Typography>
+                          <style>
+                            {`
+                              .custom-swiper-${key} .swiper-button-next,
+                              .custom-swiper-${key} .swiper-button-prev {
+                                color: #d32f2f;
+                                width: 25px;
+                                height: 25px;
+                                background: rgba(255, 255, 255, 0.9);
+                                border-radius: 50%;
+                                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                              }
+                              .custom-swiper-${key} .swiper-button-next::after,
+                              .custom-swiper-${key} .swiper-button-prev::after {
+                                font-size: 12px;
+                                font-weight: bold;
+                              }
+                              .custom-swiper-${key} .swiper-pagination-bullet-active {
+                                background-color: #d32f2f;
+                              }
+                            `}
+                          </style>
+                          <Swiper
+                            className={`custom-swiper-${key}`}
+                            modules={[Navigation, Pagination]}
+                            spaceBetween={15}
+                            slidesPerView={1}
+                            navigation
+                            pagination={{ clickable: true }}
+                            style={{ padding: "4px 4px 30px 4px" }}
+                          >
+                            {value.map((sibling, idx) => (
+                              <SwiperSlide key={idx}>
+                                <Card variant="outlined" sx={{ bgcolor: '#fff', height: '100%' }}>
+                                  <CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>
+                                    {Object.entries(sibling).map(([sKey, sVal]) => (
+                                      <Box key={sKey} display="grid" gridTemplateColumns="45% 55%" gap={1} mb={0.8} alignItems="start">
+                                        <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 500 }}>
+                                          {sKey
+                                            .replace(/([A-Z])/g, ' $1')
+                                            .replace(/_/g, ' ')
+                                            .replace(/\b\w/g, (l) => l.toUpperCase())
+                                            .trim()}
+                                        </Typography>
+                                        <Typography variant="body2" fontWeight={600} sx={{ wordBreak: 'break-word' }}>
+                                          {sVal || '-'}
+                                        </Typography>
+                                      </Box>
+                                    ))}
+                                  </CardContent>
+                                </Card>
+                              </SwiperSlide>
+                            ))}
+                          </Swiper>
+                        </Box>
+                      );
+                    }
                     // Convert camelCase or camel_Snake_case to readable words
                     const formattedKey = key
                       .replace(/([A-Z])/g, ' $1')
@@ -214,7 +279,7 @@ const PreviewScreen = ({ onEdit, onSubmit }) => {
   </Typography>
 
   {/* Special Case: Profiles Image Preview */}
-  {key === "profiles" || key === "profile" ? (
+  {key === "profiles" || key === "profile" || key === "profile_images" || key === "images" ? (
     content
   ) : value ? (
     <Typography

src/feature/StepperForm.jsx

@@ -114,6 +114,7 @@ const STEP1_SERVER_FIELD_MAP = {
   confirm_password: "confirmPassword",
   confirmPassword: "confirmPassword",
   profiles: "profiles",
+  profile_images: "profiles",
 };
 const Stepper = ({ currentStep, onStepClick }) => {
   
@@ -191,6 +192,12 @@ const StepperForm = () => {
     if (!key) return key;
     const trimmed = String(key).trim();
     if (!trimmed) return trimmed;
+
+    // Map backend profile_images errors (e.g., profile_images.0) to the profiles field
+    if (trimmed.startsWith("profile_images")) {
+      return "profiles";
+    }
+
     return (
       STEP1_SERVER_FIELD_MAP[trimmed] ||
       STEP1_SERVER_FIELD_MAP[trimmed.toLowerCase()] ||
@@ -446,92 +453,117 @@ const StepperForm = () => {
     return Object.keys(newErrors).length === 0;
   };
 
-  const buildRegisterStep1Payload = () => ({
+  const buildRegisterStep1Payload = async () => {
-    name: personalDetails.name,
+    const formData = new FormData();
-    mobile: personalDetails.mobileNumber,
+    formData.append("name", personalDetails.name);
-    email: personalDetails.email,
+    formData.append("mobile", personalDetails.mobileNumber);
-    pincode: personalDetails.pincode,
+    formData.append("email", personalDetails.email);
-    gender: personalDetails.gender,
+    formData.append("pincode", personalDetails.pincode);
-    dob: personalDetails.dob,
+    formData.append("gender", personalDetails.gender);
-    height: personalDetails.height || "",
+    formData.append("dob", personalDetails.dob);
-    weight: personalDetails.weight || "",
+    formData.append("height", personalDetails.height || "");
-    marital_status: personalDetails.maritalStatus,
+    formData.append("weight", personalDetails.weight || "");
-    religion: personalDetails.religion,
+    formData.append("marital_status", personalDetails.maritalStatus);
-    profile_for: personalDetails.profileFor || "",
+    formData.append("religion", personalDetails.religion);
-    caste: personalDetails.caste,
+    formData.append("profile_for", personalDetails.profileFor || "");
-    sub_caste: personalDetails.subCaste || "",
+    formData.append("caste", personalDetails.caste);
-    gothram: personalDetails.gothram || "",
+    formData.append("sub_caste", personalDetails.subCaste || "");
-    raasi: personalDetails.raasi || "",
+    formData.append("gothram", personalDetails.gothram || "");
-    star: personalDetails.star || "",
+    formData.append("raasi", personalDetails.raasi || "");
-    state: personalDetails.state,
+    formData.append("star", personalDetails.star || "");
-    district: personalDetails.city,
+    formData.append("state", personalDetails.state);
-    password: personalDetails.password || "",
+    formData.append("district", personalDetails.city);
-    fcm_token: localStorage.getItem("fcm_token") || "",
+    formData.append("password", personalDetails.password || "");
-  });
+    formData.append("fcm_token", localStorage.getItem("fcm_token") || "");
 
-  const buildRegisterStep2Payload = () => ({
+    if (personalDetails.profiles && Array.isArray(personalDetails.profiles)) {
-    college_name: educationalDetails.collegeName || "",
+      for (const [index, item] of personalDetails.profiles.entries()) {
-    study_field: educationalDetails.fieldOfStudy,
+        // If the file object is intact (e.g., just added), use it directly.
-    education: educationalDetails.qualification,
+        if (item.file && (item.file instanceof Blob || (typeof item.file === 'object' && item.file !== null && item.file.name))) {
-    occupation: educationalDetails.occupation,
+          formData.append(`profile_images[${index}]`, item.file);
-    company_name: educationalDetails.organization || "",
+        }
-    employee_type: educationalDetails.employeeType,
+        // If the file object was lost due to Redux serialization,
-    annual_income: educationalDetails.income,
+        // try to recover it from the blob URL preview.
-    work_location: educationalDetails.workLocation || "",
+        else if (
-  });
+          item.preview &&
+          typeof item.preview === "string"
+        ) {
+          try {
+            const response = await fetch(item.preview);
+            const blob = await response.blob();
+            const fileName = item.name || `profile_image_${index}.jpg`;
+            const fileType = item.type || "image/jpeg";
+            const recoveredFile = new File([blob], fileName, { type: fileType });
+            formData.append(`profile_images[${index}]`, recoveredFile);
+          } catch (e) {
+            console.error(`Could not recover file from blob URL: ${item.preview}`, e);
+          }
+        }
+      }
+    }
+    return formData;
+  };
+
+  const buildRegisterStep2Payload = () => {
+    const formData = new FormData();
+    formData.append("college_name", educationalDetails.collegeName || "");
+    formData.append("study_field", educationalDetails.fieldOfStudy || "");
+    formData.append("education", educationalDetails.qualification || "");
+    formData.append("occupation", educationalDetails.occupation || "");
+    formData.append("company_name", educationalDetails.organization || "");
+    formData.append("employee_type", educationalDetails.employeeType || "");
+    formData.append("annual_income", educationalDetails.income || "");
+    formData.append("work_location", educationalDetails.workLocation || "");
+    return formData;
+  };
 
   const buildRegisterStep3Payload = () => {
-    const payload = {
+    const formData = new FormData();
-      father_name: familyDetails.fatherName,
+    formData.append("father_name", familyDetails.fatherName);
-      father_occupation: familyDetails.fatherOccupation || "",
+    formData.append("father_occupation", familyDetails.fatherOccupation || "");
-      mother_name: familyDetails.motherName,
+    formData.append("mother_name", familyDetails.motherName);
-      mother_occupation: familyDetails.motherOccupation || "",
+    formData.append("mother_occupation", familyDetails.motherOccupation || "");
-      family_status: familyDetails.familyStatus,
+    formData.append("family_status", familyDetails.familyStatus);
-      native_place: familyDetails.nativePlace || "",
+    formData.append("native_place", familyDetails.nativePlace || "");
-      brother_count: familyDetails.brotherCount || 0,
+    formData.append("brother_count", familyDetails.brotherCount || 0);
-      sister_count: familyDetails.sisterCount || 0,
+    formData.append("sister_count", familyDetails.sisterCount || 0);
-    };
 
     (familyDetails.brothers || []).forEach((brother, index) => {
-      payload[`brothers[${index}][name]`] = brother?.name || "";
+      formData.append(`brothers[${index}][name]`, brother?.name || "");
-      payload[`brothers[${index}][occupation]`] = brother?.occupation || "";
+      formData.append(`brothers[${index}][occupation]`, brother?.occupation || "");
-      payload[`brothers[${index}][marital_status]`] =
+      formData.append(`brothers[${index}][marital_status]`, brother?.maritalStatus || "");
-        brother?.maritalStatus || "";
+      formData.append(`brothers[${index}][have_childrens]`, brother?.haveChildrens ?? "");
-      payload[`brothers[${index}][have_childrens]`] =
-        brother?.haveChildrens ?? "";
     });
 
     (familyDetails.sisters || []).forEach((sister, index) => {
-      payload[`sisters[${index}][name]`] = sister?.name || "";
+      formData.append(`sisters[${index}][name]`, sister?.name || "");
-      payload[`sisters[${index}][occupation]`] = sister?.occupation || "";
+      formData.append(`sisters[${index}][occupation]`, sister?.occupation || "");
-      payload[`sisters[${index}][marital_status]`] =
+      formData.append(`sisters[${index}][marital_status]`, sister?.maritalStatus || "");
-        sister?.maritalStatus || "";
+      formData.append(`sisters[${index}][have_childrens]`, sister?.haveChildrens ?? "");
-      payload[`sisters[${index}][have_childrens]`] =
-        sister?.haveChildrens ?? "";
     });
 
-    return payload;
+    return formData;
   };
 
   const buildRegisterStep4Payload = () => {
-    const payload = {
+    const formData = new FormData();
-      dob: lifestyleDetails.dob,
+    formData.append("dob", lifestyleDetails.dob || "");
-      tob: lifestyleDetails.tob,
+    formData.append("tob", lifestyleDetails.tob || "");
-    };
+    formData.append("place_of_birth", lifestyleDetails.placeOfBirth || "");
 
     (lifestyleDetails.diets || []).forEach((id, index) => {
-      payload[`diets[${index}]`] = id;
+      formData.append(`diets[${index}]`, id);
     });
 
     (lifestyleDetails.hobbies || []).forEach((id, index) => {
-      payload[`hobbies[${index}]`] = id;
+      formData.append(`hobbies[${index}]`, id);
     });
 
     const graha = lifestyleDetails.graha || {};
     Object.keys(graha).forEach((house) => {
       const values = graha[house] || [];
       values.forEach((value, index) => {
-        payload[`graha_${house}[${index}]`] = value;
+        formData.append(`graha_${house}[${index}]`, value);
       });
     });
 
@@ -539,48 +571,47 @@ const StepperForm = () => {
     Object.keys(amsam).forEach((house) => {
       const values = amsam[house] || [];
       values.forEach((value, index) => {
-        payload[`amsam_${house}[${index}]`] = value;
+        formData.append(`amsam_${house}[${index}]`, value);
       });
     });
 
-    return payload;
+    return formData;
   };
 
   const buildRegisterStep5Payload = () => {
-    const payload = {
+    const formData = new FormData();
-      age_range: partnerPreferences.ageRange,
+    formData.append("age_range", partnerPreferences.ageRange || "");
-      annual_income: partnerPreferences.annualIncome,
+    formData.append("annual_income", partnerPreferences.annualIncome || "");
-    };
 
     (partnerPreferences.castes || []).forEach((id, index) => {
-      payload[`castes[${index}]`] = id;
+      formData.append(`castes[${index}]`, id);
     });
 
     (partnerPreferences.subCastes || []).forEach((id, index) => {
-      payload[`sub_castes[${index}]`] = id;
+      formData.append(`sub_castes[${index}]`, id);
     });
 
     (partnerPreferences.occupations || []).forEach((id, index) => {
-      payload[`occupations[${index}]`] = id;
+      formData.append(`occupations[${index}]`, id);
     });
 
     (partnerPreferences.educations || []).forEach((id, index) => {
-      payload[`educations[${index}]`] = id;
+      formData.append(`educations[${index}]`, id);
     });
 
     (partnerPreferences.hobbies || []).forEach((id, index) => {
-      payload[`hobbies[${index}]`] = id;
+      formData.append(`hobbies[${index}]`, id);
     });
 
     (partnerPreferences.states || []).forEach((id, index) => {
-      payload[`states[${index}]`] = id;
+      formData.append(`states[${index}]`, id);
     });
 
     (partnerPreferences.districts || []).forEach((id, index) => {
-      payload[`districts[${index}]`] = id;
+      formData.append(`districts[${index}]`, id);
     });
 
-    return payload;
+    return formData;
   };
 
   const extractAccessToken = (res) =>
@@ -601,7 +632,7 @@ const StepperForm = () => {
 
     try {
       if (currentStep === 1) {
-        const payload = buildRegisterStep1Payload();
+        const payload = await buildRegisterStep1Payload();
         const res = await registerStep1.mutateAsync(payload);
         const token = extractAccessToken(res);
         if (token) {
@@ -624,24 +655,29 @@ const StepperForm = () => {
       setCurrentStep((prev) => Math.min(prev + 1, 6));
       window.scrollTo(0, 0);
     } catch (e) {
-      if (currentStep === 1) {
+      const serverErrors = mapServerErrors(e);
-        const serverErrors = mapServerErrors(e);
+      let handled = false;
-        if (Object.keys(serverErrors).length > 0) {
+
-          const hasFieldErrors = Object.keys(serverErrors).some(
+      if (Object.keys(serverErrors).length > 0) {
-            (key) => key !== "_form"
+        const hasFieldErrors = Object.keys(serverErrors).some(
-          );
+          (key) => key !== "_form"
-          if (hasFieldErrors) {
+        );
-            setErrors(serverErrors);
+        if (hasFieldErrors) {
-            focusFirstError(serverErrors, STEP_FIELD_ORDER[1]);
+          setErrors(serverErrors);
-            return;
+          focusFirstError(serverErrors, STEP_FIELD_ORDER[currentStep]);
-          }
+          // For step 1, we know mapping is correct so field errors are sufficient feedback
-          if (serverErrors._form) {
+          if (currentStep === 1) handled = true;
-            toast.error(serverErrors._form, { position: "top-right" });
+        }
-            return;
+        if (serverErrors._form) {
-          }
+          toast.error(serverErrors._form, { position: "top-right" });
+          handled = true;
         }
       }
-      alert("Failed to submit step. Please try again.");
+
+      if (!handled) {
+        const msg = e?.response?.data?.message || e?.message || "Failed to submit step. Please try again.";
+        toast.error(msg, { position: "top-right" });
+      }
     }
   };
 
@@ -675,9 +711,9 @@ const StepperForm = () => {
     try {
       // final combined API call - replace with your final API
       await new Promise((resolve) => setTimeout(resolve, 500));
-      alert("Form submitted successfully!");
+      toast.success("Form submitted successfully!", { position: "top-right" });
     } catch (e) {
-      alert("Failed to submit form.");
+      toast.error("Failed to submit form.", { position: "top-right" });
     }
   };