register1

src/feature/AdvancedDropzone.jsx

@@ -1,4 +1,6 @@
 import React from "react";
+import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import {
   Dropzone,
   FileMosaic,
@@ -13,6 +15,7 @@ const AdvancedDropzone = ({ value, onChange }) => {
   const [extFiles, setExtFiles] = React.useState(value || []);
   const [imageSrc, setImageSrc] = React.useState(undefined);
   const [videoSrc, setVideoSrc] = React.useState(undefined);
+  const [hoveredId, setHoveredId] = React.useState(null);
 
   const updateFiles = (incomingFiles) => {
     console.log("incoming files", incomingFiles);
@@ -53,6 +56,17 @@ const AdvancedDropzone = ({ value, onChange }) => {
     );
   };
 
+  const moveFile = (fromIndex, toIndex) => {
+    setExtFiles((prev) => {
+      if (toIndex < 0 || toIndex >= prev.length) return prev;
+      const updated = [...prev];
+      const [moved] = updated.splice(fromIndex, 1);
+      updated.splice(toIndex, 0, moved);
+      onChange && onChange(updated);
+      return updated;
+    });
+  };
+
   return (
     <>
       <Dropzone
@@ -77,20 +91,115 @@ const AdvancedDropzone = ({ value, onChange }) => {
           uploadButton: {},
         }}
       >
-        {extFiles.map((file) => (
+        {extFiles.map((file, index) => (
-          <FileMosaic
+          <div
-            {...file}
             key={file.id}
-            onDelete={onDelete}
+            style={{
-            onSee={handleSee}
+              position: "relative",
-            onWatch={handleWatch}
+              display: "inline-block",
-            onAbort={handleAbort}
+              marginBottom: 12,
-            onCancel={handleCancel}
+            }}
-            resultOnTooltip
+            onMouseEnter={() => setHoveredId(file.id)}
-            alwaysActive
+            onMouseLeave={() => setHoveredId(null)}
-            preview
+          >
-            info
+            <FileMosaic
-          />
+              {...file}
+              onDelete={onDelete}
+              onSee={handleSee}
+              onWatch={handleWatch}
+              onAbort={handleAbort}
+              onCancel={handleCancel}
+              resultOnTooltip
+              alwaysActive
+              preview
+              info={false}
+            />
+            {hoveredId === file.id && (
+            <div
+              style={{
+                position: "absolute",
+                left: 8,
+                right: 8,
+                bottom: 8,
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: "6px 8px",
+                borderRadius: 8,
+                background: "rgba(0,0,0,0.5)",
+                pointerEvents: "auto",
+                zIndex: 5,
+              }}
+            >
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  moveFile(index, index - 1);
+                }}
+                disabled={index === 0}
+                style={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  border: "1px solid rgba(255,255,255,0.6)",
+                  background: index === 0 ? "rgba(255,255,255,0.4)" : "#fff",
+                  cursor: index === 0 ? "not-allowed" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
+                }}
+                aria-label="Move left"
+              >
+                <ArrowLeftIcon fontSize="small" />
+              </button>
+              <span
+                style={{
+                  color: "#fff",
+                  fontSize: 12,
+                  opacity: 0.95,
+                  maxWidth: 140,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                }}
+                title={file.name}
+              >
+                {file.name}
+              </span>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  moveFile(index, index + 1);
+                }}
+                disabled={index === extFiles.length - 1}
+                style={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  border: "1px solid rgba(255,255,255,0.6)",
+                  background:
+                    index === extFiles.length - 1
+                      ? "rgba(255,255,255,0.4)"
+                      : "#fff",
+                  cursor:
+                    index === extFiles.length - 1 ? "not-allowed" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
+                }}
+                aria-label="Move right"
+              >
+                <ArrowRightIcon fontSize="small" />
+              </button>
+            </div>
+            )}
+          </div>
         ))}
       </Dropzone>
 

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>