{profiles.map((profile) => (
))}
diff --git a/src/feature/AdvancedDropzone.jsx b/src/feature/AdvancedDropzone.jsx
new file mode 100644
index 0000000..4523b3d
--- /dev/null
+++ b/src/feature/AdvancedDropzone.jsx
@@ -0,0 +1,114 @@
+import React from "react";
+import {
+ Dropzone,
+ FileMosaic,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+} from "@files-ui/react";
+
+const BASE_URL = "https://www.myserver.com";
+
+const AdvancedDropzone = ({ value, onChange }) => {
+ const [extFiles, setExtFiles] = React.useState(value || []);
+ const [imageSrc, setImageSrc] = React.useState(undefined);
+ const [videoSrc, setVideoSrc] = React.useState(undefined);
+
+ const updateFiles = (incomingFiles) => {
+ console.log("incoming files", incomingFiles);
+ setExtFiles(incomingFiles);
+ onChange && onChange(incomingFiles); // pass back to parent (e.g. Redux)
+ };
+
+ const onDelete = (id) => {
+ const updated = extFiles.filter((x) => x.id !== id);
+ setExtFiles(updated);
+ onChange && onChange(updated);
+ };
+
+ const handleSee = (imageSource) => setImageSrc(imageSource);
+ const handleWatch = (videoSource) => setVideoSrc(videoSource);
+
+ const handleStart = (filesToUpload) => {
+ console.log("advanced demo start upload", filesToUpload);
+ };
+
+ const handleFinish = (uploadedFiles) => {
+ console.log("advanced demo finish upload", uploadedFiles);
+ };
+
+ const handleAbort = (id) => {
+ setExtFiles((prev) =>
+ prev.map((ef) =>
+ ef.id === id ? { ...ef, uploadStatus: "aborted" } : ef
+ )
+ );
+ };
+
+ const handleCancel = (id) => {
+ setExtFiles((prev) =>
+ prev.map((ef) =>
+ ef.id === id ? { ...ef, uploadStatus: undefined } : ef
+ )
+ );
+ };
+
+ return (
+ <>
+
+ {extFiles.map((file) => (
+
+ ))}
+
+
+
setImageSrc(undefined)}
+ >
+
+
+
+
setVideoSrc(undefined)}
+ >
+
+
+
+ );
+};
+
+export default AdvancedDropzone;
diff --git a/src/feature/EducationalDetailsForm.jsx b/src/feature/EducationalDetailsForm.jsx
new file mode 100644
index 0000000..5d96171
--- /dev/null
+++ b/src/feature/EducationalDetailsForm.jsx
@@ -0,0 +1,144 @@
+import React, { useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { updateEducationalDetails } from "../redux/registrationFormSlice";
+import { TextField, Button, Grid } from "@mui/material";
+
+const EducationalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
+ const dispatch = useDispatch();
+ const data = useSelector((state) => state.registerform.educationalDetails);
+ const inputRef = useRef(null);
+
+ useEffect(() => {
+ inputRef.current?.focus();
+ }, []);
+
+ const handleChange = (field, value) => {
+ dispatch(updateEducationalDetails({ [field]: value }));
+ };
+
+ const handleSubmit = () => {
+ console.log("Submitting educational details:", data);
+ onSubmitStep();
+ };
+
+ return (
+ <>
+
+
+ );
+};
+
+export default EducationalDetailsForm;
diff --git a/src/feature/FamilyDetailsForm.jsx b/src/feature/FamilyDetailsForm.jsx
new file mode 100644
index 0000000..48d3bfc
--- /dev/null
+++ b/src/feature/FamilyDetailsForm.jsx
@@ -0,0 +1,164 @@
+import React, { useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { updateFamilyDetails } from "../redux/registrationFormSlice";
+import {
+ Grid,
+ TextField,
+ FormControl,
+ InputLabel,
+ Select,
+ MenuItem,
+ Button,
+} from "@mui/material";
+
+const FamilyDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
+ const dispatch = useDispatch();
+ const data = useSelector((state) => state.registerform.familyDetails);
+ const inputRef = useRef(null);
+
+ useEffect(() => {
+ inputRef.current?.focus();
+ }, []);
+
+ const handleChange = (field, value) => {
+ dispatch(updateFamilyDetails({ [field]: value }));
+ };
+
+ return (
+
+ <>
+
+
+
+
+
+
+ );
+};
+
+export default FamilyDetailsForm;
diff --git a/src/feature/FilterForm.jsx b/src/feature/FilterForm.jsx
new file mode 100644
index 0000000..f5bfc65
--- /dev/null
+++ b/src/feature/FilterForm.jsx
@@ -0,0 +1,623 @@
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+ setAge,
+ setHeight,
+ setMaritalStatus,
+ setMotherTongue,
+ setReligion,
+ setMatchesWithHoroscope,
+ setCaste,
+ setSubCaste,
+ updateFilter,
+} from "../redux/filterSlice";
+import {
+ Slider,
+ FormControl,
+ InputLabel,
+ Select,
+ MenuItem,
+ Chip,
+ Box,
+ Button,
+ Typography,
+ FormControlLabel,
+ Checkbox,
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+} from "@mui/material";
+import { ChevronDown } from "lucide-react";
+
+const FilterForm = () => {
+ const dispatch = useDispatch();
+ const filters = useSelector((state) => state.filters);
+
+ const [expandedSections, setExpandedSections] = useState({
+ basic: true,
+ religious: false,
+ professional: false,
+ location: false,
+ lifestyle: false,
+ family: false,
+ });
+
+ const handleAccordionChange = (section) => (event, isExpanded) => {
+ setExpandedSections((prev) => ({ ...prev, [section]: isExpanded }));
+ };
+
+ const casteOptions = ["Agamudayar", "Pillai", "Vellalar"];
+ const motherTongueOptions = [
+ "Tamil",
+ "Telugu",
+ "Malayalam",
+ "Kannada",
+ "Hindi",
+ ];
+
+ const handleSubmit = () => {
+ console.log("Filter Values:", filters);
+ };
+
+ const handleSelectionChange = (field, value) => {
+ console.log(`${field} selected:`, value);
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
+ Filter Options
+
+
+
+
+ {/* Basic Details Section */}
+
+ }>
+
+ Basic Details
+
+
+
+
+ {/* Age Slider */}
+
+
Age
+
+
{
+ dispatch(setAge(newValue));
+ handleSelectionChange("Age", newValue);
+ }}
+ valueLabelDisplay="on"
+ min={18}
+ max={70}
+ />
+
+ 18 Age
+ 70 Age
+
+
+
+
+ {/* Height Slider */}
+
+
Height
+
+
{
+ dispatch(setHeight(newValue));
+ handleSelectionChange("Height", newValue);
+ }}
+ valueLabelDisplay="on"
+ min={4.0}
+ max={7.11}
+ step={0.01}
+ valueLabelFormat={(value) => `${value.toFixed(2)}'`}
+ />
+
+ 4'0"
+ 7'11"
+
+
+
+
+ {/* Marital Status */}
+
+ Marital Status
+
+
+
+ {/* Mother Tongue */}
+
+ Mother Tongue
+
+
+
+
+ {/* Religious Details Section */}
+
+ }>
+
+ Religious Details
+
+
+
+
+ {/* Religion */}
+
+ Religion
+
+
+
+ {/* Matches with Horoscope */}
+ {
+ dispatch(setMatchesWithHoroscope(e.target.checked));
+ handleSelectionChange(
+ "Matches with Horoscope",
+ e.target.checked
+ );
+ }}
+ />
+ }
+ label="Matches with horoscope"
+ />
+
+ {/* Caste */}
+
+ Caste (Multi Select)
+
+
+
+ {/* Sub-Caste */}
+
+ Sub-Caste (Multi Select)
+
+
+
+ {/* Star */}
+
+ Star
+
+
+
+ {/* Dasham */}
+
+ Dasham
+
+
+
+
+
+
+ {/* Professional Details */}
+
+ }>
+
+ Professional Details
+
+
+
+
+
+ Occupation
+
+
+
+
+ Annual Income
+
+
+
+
+ Employee Type
+
+
+
+
+ Education
+
+
+
+
+
+
+ {/* Location Details */}
+
+ }>
+
+ Location Details
+
+
+
+
+
+ State
+
+
+
+
+ Country
+
+
+
+
+ Citizenship
+
+
+
+
+
+
+ {/* Lifestyle Details */}
+
+ }>
+
+ Lifestyle Details
+
+
+
+
+
+ Eating Habits
+
+
+
+
+ Smoking Habits
+
+
+
+
+ Drinking Habits
+
+
+
+
+
+
+ {/* Family Details */}
+
+ }>
+
+ Family Details
+
+
+
+
+
+ Family Type
+
+
+
+
+ Family Status
+
+
+
+
+ Family Value
+
+
+
+
+
+
+ {/* Submit Button */}
+
+
+
+
+
+
+ );
+};
+
+export default FilterForm;
diff --git a/src/feature/FilterModal.jsx b/src/feature/FilterModal.jsx
new file mode 100644
index 0000000..fd1ad83
--- /dev/null
+++ b/src/feature/FilterModal.jsx
@@ -0,0 +1,50 @@
+// FilterModal.jsx
+import React, { useState } from "react";
+import { IconButton, Dialog, DialogTitle, DialogContent, Box } from "@mui/material";
+import { X, SlidersHorizontal } from "lucide-react";
+import FilterForm from "./FilterForm";
+
+const FilterModal = () => {
+ const [open, setOpen] = useState(false);
+
+ const handleOpen = () => setOpen(true);
+ const handleClose = () => setOpen(false);
+
+ return (
+ <>
+ {/* Filter Icon Button (place this in your page header / toolbar) */}
+
+
+
+
+ {/* Modal */}
+
+
+ );
+};
+
+export default FilterModal;
diff --git a/src/feature/LifestyleDetailsForm.jsx b/src/feature/LifestyleDetailsForm.jsx
new file mode 100644
index 0000000..cc83a48
--- /dev/null
+++ b/src/feature/LifestyleDetailsForm.jsx
@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { updateLifestyleDetails } from "../redux/registrationFormSlice";
+import {
+ Grid,
+ FormControl,
+ InputLabel,
+ Select,
+ MenuItem,
+ Button,
+} from "@mui/material";
+
+const LifestyleDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
+ const dispatch = useDispatch();
+ const data = useSelector((state) => state.registerform.lifestyleDetails);
+ const inputRef = useRef(null);
+
+ useEffect(() => {
+ inputRef.current?.focus();
+ }, []);
+
+ const handleChange = (field, value) => {
+ dispatch(updateLifestyleDetails({ [field]: value }));
+ };
+
+ const handleSubmit = () => {
+ console.log("Submitting lifestyle details:", data);
+ onSubmitStep();
+ };
+
+ const fields = [
+ { name: "diet", label: "Diet", options: ["Veg", "Non-Veg", "Eggetarian"] },
+ {
+ name: "drinking",
+ label: "Drinking Habits",
+ options: ["No", "Occasionally", "Regularly"],
+ },
+ {
+ name: "smoking",
+ label: "Smoking Habits",
+ options: ["No", "Occasionally", "Regularly"],
+ },
+ {
+ name: "hobbies",
+ label: "Hobbies & Interests",
+ options: ["Song", "Reading", "Sports", "Travel"],
+ },
+ ];
+
+ return (
+
+ );
+};
+
+export default LifestyleDetailsForm;
diff --git a/src/feature/PartnerPreferencesForm.jsx b/src/feature/PartnerPreferencesForm.jsx
new file mode 100644
index 0000000..6010b16
--- /dev/null
+++ b/src/feature/PartnerPreferencesForm.jsx
@@ -0,0 +1,308 @@
+import React, { useEffect, useRef } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { updatePartnerPreferences } from "../redux/registrationFormSlice";
+import {
+ Grid,
+ TextField,
+ FormControl,
+ InputLabel,
+ Select,
+ MenuItem,
+ Button,
+} from "@mui/material";
+
+const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => {
+ const dispatch = useDispatch();
+ const data = useSelector((state) => state.registerform.partnerPreferences);
+ const inputRef = useRef(null);
+
+ useEffect(() => {
+ inputRef.current?.focus();
+ }, []);
+
+ const handleChange = (field, value) => {
+ dispatch(updatePartnerPreferences({ [field]: value }));
+ };
+
+ const handleSubmit = () => {
+ console.log("Submitting partner preferences:", data);
+ onSubmitStep();
+ };
+
+ return (
+
+ );
+};
+
+export default PartnerPreferencesForm;
diff --git a/src/feature/PersonalDetailsForm.jsx b/src/feature/PersonalDetailsForm.jsx
new file mode 100644
index 0000000..03dafdd
--- /dev/null
+++ b/src/feature/PersonalDetailsForm.jsx
@@ -0,0 +1,777 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { updatePersonalDetails } from "../redux/registrationFormSlice";
+import {
+ Grid,
+ TextField,
+ FormControl,
+ InputLabel,
+ Select,
+ MenuItem,
+ Button,
+ Box,
+ Typography,
+ Link,
+} from "@mui/material";
+import AdvancedDropzone from "./AdvancedDropzone";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+const OTP_LENGTH = 4;
+const OTP_TIMER_SEC = 120; // 2 minutes
+
+const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
+ const dispatch = useDispatch();
+ const data = useSelector((state) => state.registerform.personalDetails);
+ const nameInputRef = useRef(null);
+
+ const [showOtp, setShowOtp] = useState(false);
+ const [otp, setOtp] = useState(new Array(OTP_LENGTH).fill(""));
+ const [otpTimer, setOtpTimer] = useState(0);
+ const [otpError, setOtpError] = useState("");
+ const [mobileOtpVerified, setMobileOtpVerified] = useState(false);
+ const [mobileNumberError, setMobileNumberError] = useState("");
+
+ const startOtpTimer = useCallback(() => {
+ setOtpTimer(OTP_TIMER_SEC);
+ }, []);
+
+ useEffect(() => {
+ if (otpTimer <= 0) return;
+ const timerId = setInterval(() => {
+ setOtpTimer((sec) => sec - 1);
+ }, 1000);
+ return () => clearInterval(timerId);
+ }, [otpTimer]);
+
+ useEffect(() => {
+ nameInputRef.current?.focus();
+ }, []);
+
+ const handleOtpChange = (index, value) => {
+ if (!/^\d*$/.test(value)) return;
+ const newOtp = [...otp];
+ newOtp[index] = value.slice(-1);
+ setOtp(newOtp);
+ if (value && index < OTP_LENGTH - 1) {
+ const next = document.getElementById(`otp-${index + 1}`);
+ if (next) next.focus();
+ }
+ };
+
+ const resetOtp = () => {
+ setOtp(new Array(OTP_LENGTH).fill(""));
+ setOtpError("");
+ startOtpTimer();
+ };
+
+ const handleMobileSubmit = () => {
+ if (!data.mobileNumber || data.mobileNumber.length !== 10) {
+ setMobileNumberError(
+ "Please enter a valid 10-digit mobile number before sending OTP"
+ );
+ return;
+ }
+ setMobileNumberError("");
+ setShowOtp(true);
+ resetOtp();
+ setMobileOtpVerified(false);
+ };
+
+ const handleChange = (field, value) => {
+ dispatch(updatePersonalDetails({ [field]: value }));
+ if (field === "mobileNumber") {
+ setMobileNumberError("");
+ setShowOtp(false);
+ setOtp(new Array(OTP_LENGTH).fill(""));
+ setOtpError("");
+ setOtpTimer(0);
+ setMobileOtpVerified(false);
+ }
+ };
+
+ const isOtpComplete = otp.every((digit) => digit !== "");
+
+ // Simulated API OTP verification (replace with actual)
+ const verifyOtpApi = async (mobile, otpValue) => {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ if (otpValue === "1234") resolve(true);
+ else reject("Invalid OTP");
+ }, 1000);
+ });
+ };
+
+ const handleOtpSubmit = async () => {
+ if (!isOtpComplete) {
+ setOtpError("Complete OTP is required");
+ return;
+ }
+ try {
+ await verifyOtpApi(data.mobileNumber, otp.join(""));
+ setMobileOtpVerified(true);
+ setMobileNumberError("");
+ } catch (error) {
+ setOtpError(error || "OTP verification failed");
+ }
+ };
+
+
+// file upload
+
+
+
+
+
+
+
+
+
+
+ // const handleSubmit = async () => {
+ // if (showOtp && !isOtpComplete) {
+ // setOtpError("OTP is required and must be complete");
+ // return;
+ // }
+ // if (showOtp && !mobileOtpVerified) {
+ // try {
+ // await verifyOtpApi(data.mobileNumber, otp.join(""));
+ // setMobileOtpVerified(true);
+ // setOtpError("");
+ // onSubmitStep();
+ // console.log("OTP verified on submit");
+ // } catch (err) {
+ // setOtpError(err || "OTP verification failed");
+ // }
+ // return;
+ // }
+ // onSubmitStep();
+
+ // };
+
+
+ const handleSubmit = async () => {
+ if (showOtp && !isOtpComplete) {
+ setOtpError("OTP is required and must be complete");
+ return;
+ }
+
+ if (showOtp && !mobileOtpVerified) {
+ try {
+ await verifyOtpApi(data.mobileNumber, otp.join(""));
+ setMobileOtpVerified(true);
+ setOtpError("");
+ console.log("Submitting personal details:", data); // log here
+ onSubmitStep();
+ console.log("OTP verified on submit");
+ } catch (err) {
+ setOtpError(err || "OTP verification failed");
+ }
+ return;
+ }
+
+ // no OTP or already verified
+ console.log("Submitting personal details:", data); // log here
+ onSubmitStep();
+};
+
+
+ const formatTimer = (sec) => {
+ const m = Math.floor(sec / 60)
+ .toString()
+ .padStart(2, "0");
+ const s = (sec % 60).toString().padStart(2, "0");
+ return `${m}:${s}`;
+ };
+ const parseDobValue = data.dob ? new Date(data.dob) : null;
+ return (
+ <>
+
+
+ );
+};
+
+export default PersonalDetailsForm;
diff --git a/src/feature/PreviewScreen.jsx b/src/feature/PreviewScreen.jsx
new file mode 100644
index 0000000..eaf5b3e
--- /dev/null
+++ b/src/feature/PreviewScreen.jsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Edit2 } from 'lucide-react';
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ Typography,
+ Box,
+ Divider,
+ IconButton,
+ Button,
+ Grid,
+} from '@mui/material';
+
+const PreviewScreen = ({ onEdit, onSubmit }) => {
+ const formData = useSelector((state) => state.registerform);
+
+ const sections = [
+ {
+ title: 'Personal Details',
+ step: 1,
+ data: formData.personalDetails,
+ },
+ {
+ title: 'Educational & Professional Details',
+ step: 2,
+ data: formData.educationalDetails,
+ },
+ {
+ title: 'Family Details',
+ step: 3,
+ data: formData.familyDetails,
+ },
+ {
+ title: 'Lifestyle & Habits',
+ step: 4,
+ data: formData.lifestyleDetails,
+ },
+ {
+ title: 'Partner Preferences',
+ step: 5,
+ data: formData.partnerPreferences,
+ },
+ ];
+
+ return (
+
+
+ {sections.map((section) => (
+
+
+
+ {section.title}
+
+ }
+ action={
+ onEdit(section.step)}
+ size="large"
+ >
+
+
+ }
+ sx={{ pb: 0 }}
+ />
+
+
+ {Object.entries(section.data).map(([key, value]) => {
+ if (value && key !== 'profiles') {
+ // Convert camelCase or camel_Snake_case to readable words
+ const formattedKey = key
+ .replace(/([A-Z])/g, ' $1')
+ .replace(/_/g, ' ')
+ .replace(/\b\w/g, (l) => l.toUpperCase())
+ .trim();
+
+ return (
+
+
+ {formattedKey}:
+
+
+ {value}
+
+
+ );
+ }
+ return null;
+ })}
+
+
+
+ ))}
+
+
+
+
+
+ );
+};
+
+export default PreviewScreen;
diff --git a/src/feature/StepperForm.jsx b/src/feature/StepperForm.jsx
new file mode 100644
index 0000000..515178b
--- /dev/null
+++ b/src/feature/StepperForm.jsx
@@ -0,0 +1,329 @@
+import React, { useState } from "react";
+import { ChevronLeft } from "lucide-react";
+import { useDispatch, useSelector } from "react-redux";
+import {
+ updatePersonalDetails,
+ updateEducationalDetails,
+ updateFamilyDetails,
+ updateLifestyleDetails,
+ updatePartnerPreferences,
+ submitForm,
+} from "../redux/registrationFormSlice";
+import PersonalDetailsForm from "./PersonalDetailsForm";
+import EducationalDetailsForm from "./EducationalDetailsForm";
+import FamilyDetailsForm from "./FamilyDetailsForm";
+import LifestyleDetailsForm from "./LifestyleDetailsForm";
+import PartnerPreferencesForm from "./PartnerPreferencesForm";
+import PreviewScreen from "./PreviewScreen";
+
+const Stepper = ({ currentStep, onStepClick }) => {
+ const steps = [
+ { num: 1, label: "Personal" },
+ { num: 2, label: "Educational" },
+ { num: 3, label: "Family" },
+ { num: 4, label: "Lifestyle" },
+ { num: 5, label: "Partner" },
+ { num: 6, label: "Preview" },
+ ];
+
+ return (
+
+ {steps.map((step, index) => (
+
+ onStepClick(step.num)}
+ >
+
= step.num
+ ? "bg-red-600 text-white"
+ : "bg-gray-300 text-gray-600"
+ }`}
+ >
+ {step.num}
+
+
step.num ? "bg-red-600" : "bg-gray-300"
+ }`}
+ />
+ )}
+
+ ))}
+
+ );
+};
+
+const StepperForm = () => {
+ const dispatch = useDispatch();
+
+ const personalDetails = useSelector(
+ (state) => state.registerform.personalDetails
+ );
+ const educationalDetails = useSelector(
+ (state) => state.registerform.educationalDetails
+ );
+ const familyDetails = useSelector((state) => state.registerform.familyDetails);
+ const lifestyleDetails = useSelector(
+ (state) => state.registerform.lifestyleDetails
+ );
+ const partnerPreferences = useSelector(
+ (state) => state.registerform.partnerPreferences
+ );
+
+ const [currentStep, setCurrentStep] = useState(1);
+ const [errors, setErrors] = useState({});
+
+ const validateStep = (step) => {
+ const newErrors = {};
+
+ if (step === 1) {
+ const required = [
+ "name",
+ "mobileNumber",
+ "gender",
+ "dob",
+ "height",
+ "weight",
+ "maritalStatus",
+ "religion",
+ "caste",
+ "email",
+ "state",
+ "city",
+ "pincode",
+ ];
+
+ required.forEach((field) => {
+ if (!personalDetails[field]) {
+ newErrors[field] = "This field is required";
+ }
+ });
+
+ if (
+ personalDetails.email &&
+ !/\S+@\S+\.\S+/.test(personalDetails.email)
+ ) {
+ newErrors.email = "Invalid email format";
+ }
+ if (
+ personalDetails.mobileNumber &&
+ personalDetails.mobileNumber.length !== 10
+ ) {
+ newErrors.mobileNumber = "Mobile number must be 10 digits";
+ }
+ } else if (step === 2) {
+ const required = [
+ "qualification",
+ "fieldOfStudy",
+ "occupation",
+ "organization",
+ "income",
+ "workLocation",
+ ];
+ required.forEach((field) => {
+ if (!educationalDetails[field]) {
+ newErrors[field] = "This field is required";
+ }
+ });
+ } else if (step === 3) {
+ const required = [
+ "fatherName",
+ "fatherOccupation",
+ "motherName",
+ "motherOccupation",
+ "siblings",
+ "siblingsStatus",
+ "familyType",
+ "nativePlace",
+ ];
+ required.forEach((field) => {
+ if (!familyDetails[field]) {
+ newErrors[field] = "This field is required";
+ }
+ });
+ } else if (step === 4) {
+ const required = ["diet", "drinking", "smoking", "hobbies"];
+ required.forEach((field) => {
+ if (!lifestyleDetails[field]) {
+ newErrors[field] = "This field is required";
+ }
+ });
+ } else if (step === 5) {
+ const required = [
+ "ageRange",
+ "religionCaste",
+ "occupationPref",
+ "lifestylePref",
+ "qualificationPref",
+ "occupationText",
+ "incomePref",
+ "locationPref",
+ ];
+ required.forEach((field) => {
+ if (!partnerPreferences[field]) {
+ newErrors[field] = "This field is required";
+ }
+ });
+ }
+
+ setErrors(newErrors);
+
+ // Autofocus first invalid field
+ if (Object.keys(newErrors).length > 0) {
+ const firstKey = Object.keys(newErrors)[0];
+ const el = document.querySelector(`[name="${firstKey}"]`);
+ if (el) el.focus();
+ }
+
+ return Object.keys(newErrors).length === 0;
+ };
+
+ // API call simulation for each step submit
+ const submitStepAPI = async (step) => {
+ // Replace with actual API call
+ return new Promise((resolve) => setTimeout(resolve, 500));
+ };
+
+ const handleStepSubmit = async () => {
+ const isValid = validateStep(currentStep);
+ if (!isValid) return;
+
+ try {
+ await submitStepAPI(currentStep);
+ setCurrentStep((prev) => Math.min(prev + 1, 6));
+ window.scrollTo(0, 0);
+ } catch (e) {
+ alert("Failed to submit step. Please try again.");
+ }
+ };
+
+ const handleSkip = () => {
+ setErrors({});
+ setCurrentStep((prev) => Math.min(prev + 1, 6));
+ window.scrollTo(0, 0);
+ };
+
+ const handleStepClick = (step) => {
+ setCurrentStep(step);
+ setErrors({});
+ window.scrollTo(0, 0);
+ };
+
+ const handleEdit = (step) => {
+ setCurrentStep(step);
+ setErrors({});
+ window.scrollTo(0, 0);
+ };
+
+ const handleFinalSubmit = async () => {
+ for (let i = 1; i <= 5; i++) {
+ const ok = validateStep(i);
+ if (!ok) {
+ setCurrentStep(i);
+ return;
+ }
+ }
+
+ try {
+ // final combined API call - replace with your final API
+ await new Promise((resolve) => setTimeout(resolve, 500));
+ alert("Form submitted successfully!");
+ } catch (e) {
+ alert("Failed to submit form.");
+ }
+ };
+
+ const renderStepContent = () => {
+ switch (currentStep) {
+ case 1:
+ return (
+
+ );
+ case 2:
+ return (
+
+ );
+ case 3:
+ return (
+
+ );
+ case 4:
+ return (
+
+ );
+ case 5:
+ return (
+
+ );
+ case 6:
+ return ;
+ default:
+ return null;
+ }
+ };
+
+ const getTitle = () => {
+ const titles = {
+ 1: "Personal Details",
+ 2: "Educational & Professional Details",
+ 3: "Family Details",
+ 4: "Lifestyle & Habits",
+ 5: "Partner Preferences",
+ 6: "Details Preview",
+ };
+ return titles[currentStep] || "";
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
+
+
+ {currentStep > 1 && currentStep < 6 && (
+
+ )}
+
{getTitle()}
+
+
+
+
+ {/* Content */}
+
{renderStepContent()}
+
+