register1

src/feature/PersonalDetailsForm.jsx

@@ -13,8 +13,11 @@ import {
   Typography,
   Link,
   InputAdornment,
+  IconButton,
 } from "@mui/material";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import AdvancedDropzone from "./AdvancedDropzone";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import toast from "react-hot-toast";
@@ -44,6 +47,8 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
   const [otpError, setOtpError] = useState("");
   const [mobileOtpVerified, setMobileOtpVerified] = useState(false);
   const [mobileNumberError, setMobileNumberError] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const sendOtp = useSendOtp();
   const verifyOtp = useVerifyOtp();
 
@@ -102,7 +107,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
     const raw = cityQuery.data;
     if (!raw) return [];
     if (Array.isArray(raw)) return raw;
-    return raw.city || raw.district || raw.data || [];
+    return raw.subCaste || raw.district || raw.data || [];
   }, [cityQuery.data]);
 
   const starOptions = useMemo(() => {
@@ -194,9 +199,10 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
       const res = await sendOtp.mutateAsync(data.mobileNumber);
       const successMessage =
         res?.message ||
+        res?.otp ||
         res?.status ||
         "OTP sent successfully";
-      toast.success(successMessage);
+      toast.success(successMessage, { position: "top-right" });
       setShowOtp(true);
       resetOtp();
       setMobileOtpVerified(false);
@@ -207,7 +213,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
         error?.response?.data?.otp ||
         error?.message ||
         "Failed to send OTP";
-      toast.error(message);
+      toast.error(message, { position: "top-right" });
     }
   };
 
@@ -251,20 +257,21 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
       });
       const successMessage =
         res?.message ||
+        res?.otp ||
         res?.status ||
         "OTP verified successfully";
-      toast.success(successMessage);
+      toast.success(successMessage, { position: "top-right" });
       setMobileOtpVerified(true);
       setMobileNumberError("");
       setOtpError("");
     } catch (error) {
       const message =
-        error?.response?.data?.otp ||
         error?.response?.data?.message ||
+        error?.response?.data?.otp ||
         error?.message ||
         "Invalid or expired OTP";
       setOtpError(message);
-      toast.error(message);
+      toast.error(message, { position: "top-right" });
     }
   };
 
@@ -506,7 +513,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
 
                   <Typography sx={{ ml: 2, minWidth: 56 }}>
                     {otpTimer > 0 ? (
-                      formatTimer(otpTimer)
+                     ` ${formatTimer(otpTimer) } Seconds`
                     ) : (
                       <Link
                         component="button"
@@ -520,7 +527,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
                   </Typography>
 
                   {otpError && (
-                    <Typography color="error" variant="caption" sx={{ mt: 1 }}>
+                    <Typography color="error" variant="caption" sx={{ mt: "-10px", fontSize:"12px" }}>
                       {otpError}
                     </Typography>
                   )}
@@ -925,13 +932,26 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
             </label>
             <TextField
               fullWidth
-              type="password"
+              type={showPassword ? "text" : "password"}
               name="password"
               label="Enter Password"
               value={data.password}
               onChange={(e) => handleChange("password", e.target.value)}
               error={Boolean(errors.password)}
               helperText={errors.password}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={() => setShowPassword((prev) => !prev)}
+                      edge="end"
+                      aria-label="toggle password visibility"
+                    >
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
               variant="outlined"
             />
           </div>
@@ -943,13 +963,26 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
             </label>
             <TextField
               fullWidth
-              type="password"
+              type={showConfirmPassword ? "text" : "password"}
               name="confirmPassword"
               label="Confirm Password"
               value={data.confirmPassword}
               onChange={(e) => handleChange("confirmPassword", e.target.value)}
               error={Boolean(errors.confirmPassword)}
               helperText={errors.confirmPassword}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={() => setShowConfirmPassword((prev) => !prev)}
+                      edge="end"
+                      aria-label="toggle confirm password visibility"
+                    >
+                      {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
               variant="outlined"
             />
           </div>
@@ -1022,7 +1055,7 @@ const PersonalDetailsForm = ({ onSubmitStep, errors }) => {
               >
                 {cityOptions.map((city) => (
                   <MenuItem key={city.id} value={city.id}>
-                    {getOptionLabel(city, "City")}
+                    {getOptionLabel(city.district_name, "City")}
                   </MenuItem>
                 ))}
               </Select>