Fix admin profile image removal

.env.production

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_APP_VERSION=2.3.1
+NEXT_PUBLIC_APP_VERSION=2.3.2
 NEXT_PUBLIC_TOAST_AUTO_CLOSE_DURATION=2500
 NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyCTjdsk2jE34IfnvSKP1JMTIf_Abd7tbt0
 NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=opplens-270d1.firebaseapp.com

src/components/forms/admins/useCreateAdminPresenter.ts

@@ -5,7 +5,7 @@ import { normalizePhoneFieldValue } from "@/components/FormElements/PhoneNumberI
 import { validateImageFile } from "@/utils/shared";
 import { useIsMutating } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
-import { ChangeEvent, useEffect, useState } from "react";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "react-toastify";
 
@@ -33,8 +33,9 @@ const useCreateAdminPresenter = ({
   const [isUploadingImage, setIsUploadingImage] = useState(false);
   const [uploadProgress, setUploadProgress] = useState<number>(0);
   const [uploadedProfileImageUrl, setUploadedProfileImageUrl] = useState<
-    string | undefined
+    string | null | undefined
   >(defaultValues?.profile_image);
+  const profileImageInputRef = useRef<HTMLInputElement | null>(null);
   // The existing image rendered as a local (authenticated) object URL — used as
   // the preview baseline so "remove/replace" can fall back to it.
   const [defaultPreviewUrl, setDefaultPreviewUrl] = useState<string | null>(
@@ -144,8 +145,15 @@ const useCreateAdminPresenter = ({
   };
 
   const clearSelectedProfileImage = () => {
+    if (profileImageInputRef.current) {
+      profileImageInputRef.current.value = "";
+    }
     setValue("profile_image", undefined);
-    resetToDefaultProfileImage();
+    setSelectedFileName("");
+    setSelectedFileSize(null);
+    setUploadProgress(0);
+    setUploadedProfileImageUrl(null);
+    setPreviewUrl(null);
     clearErrors("profile_image");
   };
 
@@ -204,10 +212,17 @@ const useCreateAdminPresenter = ({
   const profileImageRegister = register("profile_image", {
     onChange: onProfileImageChange,
   });
+  const profileImageFileRegister = {
+    ...profileImageRegister,
+    ref: (element: HTMLInputElement | null) => {
+      profileImageInputRef.current = element;
+      profileImageRegister.ref(element);
+    },
+  };
 
   const onSubmit: SubmitHandler<CreateAdminFormValues> = async (data) => {
     const file = data.profile_image?.[0];
-    const profileImageUrl = uploadedProfileImageUrl ?? defaultValues?.profile_image;
+    const profileImageUrl = uploadedProfileImageUrl;
 
     if (file && !profileImageUrl) {
       toast.error("Please wait for profile image upload to finish");
@@ -244,7 +259,7 @@ const useCreateAdminPresenter = ({
     selectedFileSize,
     previewUrl,
     clearSelectedProfileImage,
-    profileImageRegister,
+    profileImageRegister: profileImageFileRegister,
     passwordFieldInputType,
     setPasswordFieldInputType,
   };

src/lib/api/types/User.ts

@@ -41,7 +41,7 @@ export const CreateAdminSchema = z.object({
     .regex(/\d/, "Password must contain at least one number")
     .regex(/[\W_]/, "Password must contain at least one special character"),
 
-  profile_image: z.string().optional(),
+  profile_image: z.string().nullable().optional(),
 
   department: z.string().min(1, "Department is required"),
   position: z.string().min(1, "Position is required"),