step 1 api

src/feature/AdvancedDropzone.jsx

@@ -59,10 +59,10 @@ const AdvancedDropzone = ({ value, onChange }) => {
         onChange={updateFiles}
         minHeight="195px"
         value={extFiles}
-        accept="image/*, video/*"
+        accept="image/*"
         maxFiles={3}
-        maxFileSize={2 * 1024 * 1024}
-        label="Drag'n drop files here or click to browse"
+        maxFileSize={10 * 1024 * 1024}
+        label="Drag'n drop up to 3 images (max 10 MB each)"
         uploadConfig={{
           url: BASE_URL + "/file",
           cleanOnUpload: true,

src/feature/PersonalDetailsForm.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { updatePersonalDetails } from "../redux/registrationFormSlice";
 import {
@@ -12,19 +12,31 @@ import {
   Box,
   Typography,
   Link,
+  InputAdornment,
 } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import AdvancedDropzone from "./AdvancedDropzone";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import toast from "react-hot-toast";
 
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import {
+  usePersonalDetailsMasters,
+  useCasteMasters,
+  useSubCasteMasters,
+  useCityMasters,
+  useStarMasters,
+} from "../hooks/useDependentMasters";
+import { useSendOtp, useVerifyOtp } from "../hooks/useAuth";
 const OTP_LENGTH = 4;
 const OTP_TIMER_SEC = 120; // 2 minutes
 
-const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
+const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
   const dispatch = useDispatch();
   const data = useSelector((state) => state.registerform.personalDetails);
   const nameInputRef = useRef(null);
+  const requiredMark = <span style={{ color: "#d32f2f" }}> *</span>;
 
   const [showOtp, setShowOtp] = useState(false);
   const [otp, setOtp] = useState(new Array(OTP_LENGTH).fill(""));
@@ -32,6 +44,93 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
   const [otpError, setOtpError] = useState("");
   const [mobileOtpVerified, setMobileOtpVerified] = useState(false);
   const [mobileNumberError, setMobileNumberError] = useState("");
+  const sendOtp = useSendOtp();
+  const verifyOtp = useVerifyOtp();
+
+  const { data: personalMasters, isLoading: isPersonalMastersLoading } =
+    usePersonalDetailsMasters();
+
+  const genderOptions = useMemo(
+    () => personalMasters?.gender ?? [],
+    [personalMasters]
+  );
+  const maritalStatusOptions = useMemo(
+    () => personalMasters?.marital_status ?? [],
+    [personalMasters]
+  );
+  const religionOptions = useMemo(
+    () => personalMasters?.religion ?? [],
+    [personalMasters]
+  );
+  const profileCreatedForOptions = useMemo(
+    () => personalMasters?.profileCreatedFor ?? [],
+    [personalMasters]
+  );
+  const gothramOptions = useMemo(
+    () => personalMasters?.gothram ?? [],
+    [personalMasters]
+  );
+  const raasiOptions = useMemo(
+    () => personalMasters?.raasi ?? [],
+    [personalMasters]
+  );
+  const stateOptions = useMemo(
+    () => personalMasters?.state ?? [],
+    [personalMasters]
+  );
+
+  const casteQuery = useCasteMasters(data.religion);
+  const subCasteQuery = useSubCasteMasters(data.caste);
+  const cityQuery = useCityMasters(data.state);
+  const starQuery = useStarMasters(data.raasi);
+
+  const casteOptions = useMemo(() => {
+    const raw = casteQuery.data;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw;
+    return raw.caste || raw.data || [];
+  }, [casteQuery.data]);
+
+  const subCasteOptions = useMemo(() => {
+    const raw = subCasteQuery.data;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw;
+    return raw.sub_caste || raw.subCaste || raw.data || [];
+  }, [subCasteQuery.data]);
+
+  const cityOptions = useMemo(() => {
+    const raw = cityQuery.data;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw;
+    return raw.city || raw.district || raw.data || [];
+  }, [cityQuery.data]);
+
+  const starOptions = useMemo(() => {
+    const raw = starQuery.data;
+    if (!raw) return [];
+    if (Array.isArray(raw)) return raw;
+    return raw.star || raw.data || [];
+  }, [starQuery.data]);
+
+  const getOptionLabel = useCallback((item, fallback = "") => {
+    if (!item) return fallback;
+    if (typeof item === "string") return item;
+    return (
+      item.name ||
+      item.caste_name ||
+      item.sub_caste_name ||
+      item.district_name ||
+      item.city_name ||
+      item.state_name ||
+      item.religion_name ||
+      item.marital_status_name ||
+      item.gothram_name ||
+      item.raasi_name ||
+      item.profile_for_name ||
+      item.star_name ||
+      fallback
+    );
+  }, []);
 
   const startOtpTimer = useCallback(() => {
     setOtpTimer(OTP_TIMER_SEC);
@@ -60,27 +159,60 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
     }
   };
 
+  const handleOtpKeyDown = (index, event) => {
+    if (event.key !== "Backspace") return;
+    event.preventDefault();
+    const newOtp = [...otp];
+    if (newOtp[index]) {
+      newOtp[index] = "";
+      setOtp(newOtp);
+      return;
+    }
+    if (index > 0) {
+      newOtp[index - 1] = "";
+      setOtp(newOtp);
+      const prev = document.getElementById(`otp-${index - 1}`);
+      if (prev) prev.focus();
+    }
+  };
+
   const resetOtp = () => {
     setOtp(new Array(OTP_LENGTH).fill(""));
     setOtpError("");
     startOtpTimer();
   };
 
-  const handleMobileSubmit = () => {
+  const handleMobileSubmit = async () => {
     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);
+    try {
+      setMobileNumberError("");
+      const res = await sendOtp.mutateAsync(data.mobileNumber);
+      const successMessage =
+        res?.message ||
+        res?.status ||
+        "OTP sent successfully";
+      toast.success(successMessage);
+      setShowOtp(true);
+      resetOtp();
+      setMobileOtpVerified(false);
+    } catch (error) {
+      setMobileNumberError("Failed to send OTP. Please try again.");
+      const message =
+        error?.response?.data?.message ||
+        error?.response?.data?.otp ||
+        error?.message ||
+        "Failed to send OTP";
+      toast.error(message);
+    }
   };
 
   const handleChange = (field, value) => {
-    dispatch(updatePersonalDetails({ [field]: value }));
+    const updates = { [field]: value };
     if (field === "mobileNumber") {
       setMobileNumberError("");
       setShowOtp(false);
@@ -89,31 +221,50 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
       setOtpTimer(0);
       setMobileOtpVerified(false);
     }
+    if (field === "religion") {
+      updates.caste = "";
+      updates.subCaste = "";
+    }
+    if (field === "caste") {
+      updates.subCaste = "";
+    }
+    if (field === "state") {
+      updates.city = "";
+    }
+    if (field === "raasi") {
+      updates.star = "";
+    }
+    dispatch(updatePersonalDetails(updates));
   };
 
   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(""));
+      const res = await verifyOtp.mutateAsync({
+        mobile: data.mobileNumber,
+        otp: otp.join(""),
+      });
+      const successMessage =
+        res?.message ||
+        res?.status ||
+        "OTP verified successfully";
+      toast.success(successMessage);
       setMobileOtpVerified(true);
       setMobileNumberError("");
+      setOtpError("");
     } catch (error) {
-      setOtpError(error || "OTP verification failed");
+      const message =
+        error?.response?.data?.otp ||
+        error?.response?.data?.message ||
+        error?.message ||
+        "Invalid or expired OTP";
+      setOtpError(message);
+      toast.error(message);
     }
   };
 
@@ -159,7 +310,10 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
   if (showOtp && !mobileOtpVerified) {
     try {
-      await verifyOtpApi(data.mobileNumber, otp.join(""));
+      await verifyOtp.mutateAsync({
+        mobile: data.mobileNumber,
+        otp: otp.join(""),
+      });
       setMobileOtpVerified(true);
       setOtpError("");
       console.log("Submitting personal details:", data); // log here
@@ -193,7 +347,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
             {/* Name */}
             <div className="flex flex-col gap-4">
               <label className="text-gray-900 text-[17px]">
-                Enter the Name
+                Enter the Name{requiredMark}
               </label>
               <TextField
                 fullWidth
@@ -212,7 +366,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
             {/* Gender */}
             <div className="flex flex-col gap-6">
               <label className="text-gray-900 text-[17px]">
-                Enter the Gender
+                Enter the Gender{requiredMark}
               </label>
               <FormControl
                 fullWidth
@@ -227,8 +381,11 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                   value={data.gender}
                   onChange={(e) => handleChange("gender", e.target.value)}
                 >
-                  <MenuItem value="Male">Male</MenuItem>
-                  <MenuItem value="Female">Female</MenuItem>
+                  {genderOptions.map((gender) => (
+                    <MenuItem key={gender} value={gender}>
+                      {gender}
+                    </MenuItem>
+                  ))}
                 </Select>
                 {errors.gender && (
                   <p
@@ -246,36 +403,60 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
             {/* Mobile Number and Send OTP Button */}
             <div className="flex flex-col gap-6 relative">
-              <TextField
-                fullWidth
-                name="mobileNumber"
-                label="Mobile Number"
-                type="tel"
-                value={data.mobileNumber}
-                onChange={(e) => handleChange("mobileNumber", e.target.value)}
-                error={
-                  Boolean(errors.mobileNumber) || Boolean(mobileNumberError)
-                }
-                helperText={mobileNumberError || errors.mobileNumber}
-                placeholder="Enter Mobile Number"
-                inputProps={{ maxLength: 10 }}
-                variant="outlined"
-                disabled={mobileOtpVerified}
-                // sx={{ maxWidth: "430px" }}
-              />
-              <Box sx={{ position: "absolute", right: 0 }}>
-                {!showOtp && !mobileOtpVerified && (
-                  <Button
-                    variant="outlined"
-                    color="primary"
-                    onClick={handleMobileSubmit}
+              <label className="text-gray-900 text-[17px]">
+                Mobile Number{requiredMark}
+              </label>
+              <Box sx={{ display: "flex", alignItems: "start", gap: 2 }}>
+                <TextField
+                  fullWidth
+                  name="mobileNumber"
+                  label="Mobile Number"
+                  type="tel"
+                  value={data.mobileNumber}
+                  onChange={(e) => handleChange("mobileNumber", e.target.value)}
+                  error={
+                    Boolean(errors.mobileNumber) || Boolean(mobileNumberError)
+                  }
+                  helperText={mobileNumberError || errors.mobileNumber}
+                  placeholder="Enter Mobile Number"
+                  inputProps={{ maxLength: 10 }}
+                  InputProps={{
+                    endAdornment: mobileOtpVerified ? (
+                      <InputAdornment position="end">
+                        <CheckCircleIcon
+                          sx={{
+                            color: "#2e7d32",
+                            animation: "verifiedPulse 1.2s ease-in-out infinite",
+                            "@keyframes verifiedPulse": {
+                              "0%": { transform: "scale(1)", opacity: 0.8 },
+                              "50%": { transform: "scale(1.08)", opacity: 1 },
+                              "100%": { transform: "scale(1)", opacity: 0.8 },
+                            },
+                          }}
+                        />
+                      </InputAdornment>
+                    ) : null,
+                  }}
+                  variant="outlined"
+                  sx={{
+                    "& .MuiInputBase-input.Mui-disabled": {
+                      cursor: "not-allowed",
+                    },
+                  }}
+                />
+                  {!showOtp && !mobileOtpVerified && (
+                    <Button
+                      variant="outlined"
+                      color="primary"
+                      onClick={handleMobileSubmit}
                     sx={{
-                      padding: "15px 10px",
+                      whiteSpace: "nowrap",
+                      height: "56px",
                       background: "green",
                       color: "#fff",
                     }}
                   >
-                    Send OTP
+                    Verify
                   </Button>
                 )}
               </Box>
@@ -296,10 +477,16 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                             textAlign: "center",
                             width: 40,
                             fontSize: 20,
+                            borderRadius: 4,
+                            backgroundColor:  digit
+                              ? "#028f02"
+                              : "transparent",
+                            color:  digit ? "#fff" : "#000",
                           },
                         }}
                         value={digit}
                         onChange={(e) => handleOtpChange(index, e.target.value)}
+                        onKeyDown={(e) => handleOtpKeyDown(index, e)}
                         error={Boolean(otpError)}
                         autoFocus={index === 0}
                         variant="outlined"
@@ -340,22 +527,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 </>
               )}
 
-              {mobileOtpVerified && (
-                <Typography
-                  color="primary"
-                  variant="body2"
-                  sx={{
-                    background: "green",
-                    padding: "17px 15px",
-                    width: "fit-content",
-                    borderRadius: "5px",
-                    color: "#fff",
-                    fontSize: "18px",
-                  }}
-                >
-                  Mobile number verified
-                </Typography>
-              )}
+              
             </div>
 
             {/* Other fields like DOB, height, marital status, etc. */}
@@ -378,7 +550,9 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
             {/* DOB with MUI DatePicker */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Date of Birth</label>
+            <label className="text-gray-900 text-[15px]">
+              Date of Birth{requiredMark}
+            </label>
              <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DatePicker
               format="dd/MM/yyyy"
@@ -411,10 +585,12 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
               fullWidth
               name="height"
               label="Enter Height"
+              type="number"
               value={data.height}
               onChange={(e) => handleChange("height", e.target.value)}
               error={Boolean(errors.height)}
               helperText={errors.height}
+              inputProps={{ min: 0, max: 10, step: "0.1" }}
               variant="outlined"
             />
           </div>
@@ -426,17 +602,21 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
               fullWidth
               name="weight"
               label="Enter Weight"
+              type="number"
               value={data.weight}
               onChange={(e) => handleChange("weight", e.target.value)}
               error={Boolean(errors.weight)}
               helperText={errors.weight}
+              inputProps={{ min: 0, max: 300, step: "0.1" }}
               variant="outlined"
             />
           </div>
 
           {/* Marital Status */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Marital Status</label>
+            <label className="text-gray-900 text-[15px]">
+              Marital Status{requiredMark}
+            </label>
             <FormControl
               fullWidth
               variant="outlined"
@@ -454,9 +634,11 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                   handleChange("maritalStatus", e.target.value)
                 }
               >
-                <MenuItem value="Single">Single</MenuItem>
-                <MenuItem value="Divorced">Divorced</MenuItem>
-                <MenuItem value="Widowed">Widowed</MenuItem>
+                {maritalStatusOptions.map((status) => (
+                  <MenuItem key={status.id} value={status.id}>
+                    {status.marital_status_name}
+                  </MenuItem>
+                ))}
               </Select>
               {errors.maritalStatus && (
                 <Typography
@@ -472,7 +654,9 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
           {/* Religion */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Religion</label>
+            <label className="text-gray-900 text-[15px]">
+              Religion
+            </label>
             <FormControl
               fullWidth
               variant="outlined"
@@ -486,10 +670,11 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 value={data.religion}
                 onChange={(e) => handleChange("religion", e.target.value)}
               >
-                <MenuItem value="Hindu">Hindu</MenuItem>
-                <MenuItem value="Muslim">Muslim</MenuItem>
-                <MenuItem value="Christian">Christian</MenuItem>
-                <MenuItem value="Others">Others</MenuItem>
+                {religionOptions.map((religion) => (
+                  <MenuItem key={religion.id} value={religion.id}>
+                    {religion.religion_name}
+                  </MenuItem>
+                ))}
               </Select>
               {errors.religion && (
                 <Typography
@@ -503,10 +688,48 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
             </FormControl>
           </div>
 
+          {/* Profile Created For */}
+          <div className="flex flex-col gap-2">
+            <label className="text-gray-900 text-[15px]">
+              Profile Created For{requiredMark}
+            </label>
+            <FormControl
+              fullWidth
+              variant="outlined"
+              error={Boolean(errors.profileFor)}
+            >
+              <InputLabel id="profileFor-label">
+                Select Profile Created For
+              </InputLabel>
+              <Select
+                labelId="profileFor-label"
+                label="Select Profile Created For"
+                name="profileFor"
+                value={data.profileFor}
+                onChange={(e) => handleChange("profileFor", e.target.value)}
+              >
+                {profileCreatedForOptions.map((profileFor) => (
+                  <MenuItem key={profileFor.id} value={profileFor.id}>
+                    {profileFor.profile_for_name}
+                  </MenuItem>
+                ))}
+              </Select>
+              {errors.profileFor && (
+                <Typography
+                  color="error"
+                  variant="caption"
+                  sx={{ mt: 0.5, ml: 1.8 }}
+                >
+                  {errors.profileFor}
+                </Typography>
+              )}
+            </FormControl>
+          </div>
+
           {/* Caste / Community */}
           <div className="flex flex-col gap-2">
             <label className="text-gray-900 text-[15px]">
-              Caste / Community
+              Caste / Community{requiredMark}
             </label>
             <FormControl
               fullWidth
@@ -520,10 +743,18 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 name="caste"
                 value={data.caste}
                 onChange={(e) => handleChange("caste", e.target.value)}
+                disabled={!data.religion || casteQuery.isLoading}
+                sx={{
+                  "& .MuiSelect-select.Mui-disabled": {
+                    cursor: "not-allowed",
+                  },
+                }}
               >
-                <MenuItem value="Agamudayar">Agamudayar</MenuItem>
-                <MenuItem value="Brahmin">Brahmin</MenuItem>
-                <MenuItem value="Others">Others</MenuItem>
+                {casteOptions.map((caste) => (
+                  <MenuItem key={caste.id} value={caste.id}>
+                    {getOptionLabel(caste, "Caste")}
+                  </MenuItem>
+                ))}
               </Select>
               {errors.caste && (
                 <Typography
@@ -552,11 +783,21 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 name="subCaste"
                 value={data.subCaste}
                 onChange={(e) => handleChange("subCaste", e.target.value)}
+                disabled={!data.caste || subCasteQuery.isLoading}
+                sx={{
+                  "& .MuiSelect-select.Mui-disabled": {
+                    cursor: "not-allowed",
+                  },
+                }}
               >
                 <MenuItem value="">
                   <em>None</em>
                 </MenuItem>
-                <MenuItem value="Thuluva vellala">Thuluva vellala</MenuItem>
+                {subCasteOptions.map((subCaste) => (
+                  <MenuItem key={subCaste.id} value={subCaste.id}>
+                    {getOptionLabel(subCaste, "Sub Caste")}
+                  </MenuItem>
+                ))}
               </Select>
             </FormControl>
           </div>
@@ -580,41 +821,91 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 <MenuItem value="">
                   <em>None</em>
                 </MenuItem>
-                <MenuItem value="Siva Gotheram">Siva Gotheram</MenuItem>
+                {gothramOptions.map((gothram) => (
+                  <MenuItem key={gothram.id} value={gothram.id}>
+                    {gothram.gothram_name}
+                  </MenuItem>
+                ))}
               </Select>
             </FormControl>
           </div>
 
-          {/* Blood Group (optional) */}
+          {/* Raasi */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">
-              Blood Group (optional)
-            </label>
-            <FormControl fullWidth variant="outlined">
-              <InputLabel id="blood-label">
-                Select Blood Group (optional)
-              </InputLabel>
+            <label className="text-gray-900 text-[15px]">Raasi</label>
+            <FormControl
+              fullWidth
+              variant="outlined"
+              error={Boolean(errors.raasi)}
+            >
+              <InputLabel id="raasi-label">Select Raasi</InputLabel>
               <Select
-                labelId="blood-label"
-                label="Select Blood Group (optional)"
-                name="bloodGroup"
-                value={data.bloodGroup}
-                onChange={(e) => handleChange("bloodGroup", e.target.value)}
+                labelId="raasi-label"
+                label="Select Raasi"
+                name="raasi"
+                value={data.raasi}
+                onChange={(e) => handleChange("raasi", e.target.value)}
               >
-                <MenuItem value="">
-                  <em>None</em>
-                </MenuItem>
-                <MenuItem value="O+">O+</MenuItem>
-                <MenuItem value="A+">A+</MenuItem>
-                <MenuItem value="B+">B+</MenuItem>
-                <MenuItem value="AB+">AB+</MenuItem>
+                {raasiOptions.map((raasi) => (
+                  <MenuItem key={raasi.id} value={raasi.id}>
+                    {raasi.raasi_name}
+                  </MenuItem>
+                ))}
               </Select>
+              {errors.raasi && (
+                <Typography
+                  color="error"
+                  variant="caption"
+                  sx={{ mt: 0.5, ml: 1.8 }}
+                >
+                  {errors.raasi}
+                </Typography>
+              )}
             </FormControl>
           </div>
 
+          {/* Star */}
+          <div className="flex flex-col gap-2">
+            <label className="text-gray-900 text-[15px]">Star</label>
+            <FormControl
+              fullWidth
+              variant="outlined"
+              error={Boolean(errors.star)}
+            >
+              <InputLabel id="star-label">Select Star</InputLabel>
+              <Select
+                labelId="star-label"
+                label="Select Star"
+                name="star"
+                value={data.star}
+                onChange={(e) => handleChange("star", e.target.value)}
+                disabled={!data.raasi || starQuery.isLoading}
+              >
+                {starOptions.map((star) => (
+                  <MenuItem key={star.id} value={star.id}>
+                    {getOptionLabel(star, "Star")}
+                  </MenuItem>
+                ))}
+              </Select>
+              {errors.star && (
+                <Typography
+                  color="error"
+                  variant="caption"
+                  sx={{ mt: 0.5, ml: 1.8 }}
+                >
+                  {errors.star}
+                </Typography>
+              )}
+            </FormControl>
+          </div>
+
+          
+
           {/* Email Id */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Email Id</label>
+            <label className="text-gray-900 text-[15px]">
+              Email Id{requiredMark}
+            </label>
             <TextField
               fullWidth
               name="email"
@@ -627,9 +918,47 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
             />
           </div>
 
+          {/* Password */}
+          <div className="flex flex-col gap-2">
+            <label className="text-gray-900 text-[15px]">
+              Password{requiredMark}
+            </label>
+            <TextField
+              fullWidth
+              type="password"
+              name="password"
+              label="Enter Password"
+              value={data.password}
+              onChange={(e) => handleChange("password", e.target.value)}
+              error={Boolean(errors.password)}
+              helperText={errors.password}
+              variant="outlined"
+            />
+          </div>
+
+          {/* Confirm Password */}
+          <div className="flex flex-col gap-2">
+            <label className="text-gray-900 text-[15px]">
+              Confirm Password{requiredMark}
+            </label>
+            <TextField
+              fullWidth
+              type="password"
+              name="confirmPassword"
+              label="Confirm Password"
+              value={data.confirmPassword}
+              onChange={(e) => handleChange("confirmPassword", e.target.value)}
+              error={Boolean(errors.confirmPassword)}
+              helperText={errors.confirmPassword}
+              variant="outlined"
+            />
+          </div>
+
           {/* State */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">State</label>
+            <label className="text-gray-900 text-[15px]">
+              State{requiredMark}
+            </label>
             <FormControl
               fullWidth
               variant="outlined"
@@ -642,10 +971,18 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 name="state"
                 value={data.state}
                 onChange={(e) => handleChange("state", e.target.value)}
+                disabled={isPersonalMastersLoading}
+                sx={{
+                  "& .MuiSelect-select.Mui-disabled": {
+                    cursor: "not-allowed",
+                  },
+                }}
               >
-                <MenuItem value="Tamil Nadu">Tamil Nadu</MenuItem>
-                <MenuItem value="Kerala">Kerala</MenuItem>
-                <MenuItem value="Karnataka">Karnataka</MenuItem>
+                {stateOptions.map((state) => (
+                  <MenuItem key={state.id} value={state.id}>
+                    {state.state_name}
+                  </MenuItem>
+                ))}
               </Select>
               {errors.state && (
                 <Typography
@@ -661,7 +998,9 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
           {/* City */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">City</label>
+            <label className="text-gray-900 text-[15px]">
+              City{requiredMark}
+            </label>
             <FormControl
               fullWidth
               variant="outlined"
@@ -674,10 +1013,18 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
                 name="city"
                 value={data.city}
                 onChange={(e) => handleChange("city", e.target.value)}
+                disabled={!data.state || cityQuery.isLoading}
+                sx={{
+                  "& .MuiSelect-select.Mui-disabled": {
+                    cursor: "not-allowed",
+                  },
+                }}
               >
-                <MenuItem value="Chennai">Chennai</MenuItem>
-                <MenuItem value="Coimbatore">Coimbatore</MenuItem>
-                <MenuItem value="Madurai">Madurai</MenuItem>
+                {cityOptions.map((city) => (
+                  <MenuItem key={city.id} value={city.id}>
+                    {getOptionLabel(city, "City")}
+                  </MenuItem>
+                ))}
               </Select>
               {errors.city && (
                 <Typography
@@ -693,7 +1040,9 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
           {/* Pin code */}
           <div className="flex flex-col gap-2">
-            <label className="text-gray-900 text-[15px]">Pin code</label>
+            <label className="text-gray-900 text-[15px]">
+              Pin code{requiredMark}
+            </label>
             <TextField
               fullWidth
               name="pincode"
@@ -722,7 +1071,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
 
           <div className="flex flex-col gap-2 md:col-span-2 w-full">
   <label className="text-gray-900 text-[15px]">
-    Upload Profile (Multi - Select)
+    Upload Profile (Max 3 images, 10 MB each)
   </label>
   <AdvancedDropzone
     value={data.profiles || []}
@@ -752,13 +1101,7 @@ const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
               justifyContent: "center",
             }}
           >
-            <Button
-              variant="outlined"
-              onClick={onSkipStep}
-              disabled={mobileOtpVerified}
-            >
-              Skip
-            </Button>
+            
             <Button
               variant="contained"
               color="primary"

src/feature/StepperForm.jsx

@@ -16,6 +16,7 @@ import LifestyleDetailsForm from "./LifestyleDetailsForm";
 import PartnerPreferencesForm from "./PartnerPreferencesForm";
 import PreviewScreen from "./PreviewScreen";
 import { useLocation } from "react-router-dom";
+import { useRegisterStep1 } from "../hooks/useRegister";
 const Stepper = ({ currentStep, onStepClick }) => {
   
 
@@ -82,6 +83,7 @@ const StepperForm = () => {
   const [currentStep, setCurrentStep] = useState(initialStep);
   const [errors, setErrors] = useState({});
 
+  const registerStep1 = useRegisterStep1();
 
 
    useEffect(() => {
@@ -104,12 +106,12 @@ const StepperForm = () => {
         "mobileNumber",
         "gender",
         "dob",
-        "height",
-        "weight",
         "maritalStatus",
-        "religion",
+        "profileFor",
         "caste",
         "email",
+        "password",
+        "confirmPassword",
         "state",
         "city",
         "pincode",
@@ -133,6 +135,19 @@ const StepperForm = () => {
       ) {
         newErrors.mobileNumber = "Mobile number must be 10 digits";
       }
+      if (personalDetails.height && Number(personalDetails.height) > 10) {
+        newErrors.height = "Height must be 10 or less";
+      }
+      if (personalDetails.weight && Number(personalDetails.weight) > 300) {
+        newErrors.weight = "Weight must be 300 or less";
+      }
+      if (
+        personalDetails.password &&
+        personalDetails.confirmPassword &&
+        personalDetails.password !== personalDetails.confirmPassword
+      ) {
+        newErrors.confirmPassword = "Passwords do not match";
+      }
     } else if (step === 2) {
       const required = [
         "qualification",
@@ -199,18 +214,38 @@ const StepperForm = () => {
     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 buildRegisterStep1Payload = () => ({
+    name: personalDetails.name,
+    mobile: personalDetails.mobileNumber,
+    email: personalDetails.email,
+    pincode: personalDetails.pincode,
+    gender: personalDetails.gender,
+    dob: personalDetails.dob,
+    height: personalDetails.height || "",
+    weight: personalDetails.weight || "",
+    marital_status: personalDetails.maritalStatus,
+    religion: personalDetails.religion,
+    profile_for: personalDetails.profileFor || "",
+    caste: personalDetails.caste,
+    sub_caste: personalDetails.subCaste || "",
+    gothram: personalDetails.gothram || "",
+    raasi: personalDetails.raasi || "",
+    star: personalDetails.star || "",
+    state: personalDetails.state,
+    district: personalDetails.city,
+    password: personalDetails.password || "",
+    fcm_token: localStorage.getItem("fcm_token") || "",
+  });
 
   const handleStepSubmit = async () => {
     const isValid = validateStep(currentStep);
     if (!isValid) return;
 
     try {
-      await submitStepAPI(currentStep);
+      if (currentStep === 1) {
+        const payload = buildRegisterStep1Payload();
+        await registerStep1.mutateAsync(payload);
+      }
       setCurrentStep((prev) => Math.min(prev + 1, 6));
       window.scrollTo(0, 0);
     } catch (e) {
@@ -260,7 +295,6 @@ const StepperForm = () => {
         return (
           <PersonalDetailsForm
             onSubmitStep={handleStepSubmit}
-            onSkipStep={handleSkip}
             errors={errors}
           />
         );