fix: api issue and merge styles problem

src/features/profile/components/userInformation/PersonalInformation.tsx

@@ -15,6 +15,7 @@ export function PersonalInformation() {
   const { t } = useTranslation('setting');
   const [isEditing, setIsEditing] = useState(false);
   const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
+  const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
   const [data, setData] = useState<InfoRowData>({
     firstName: '',
     lastName: '',
@@ -51,7 +52,15 @@ export function PersonalInformation() {
       };
       setData(fetchedData);
       setOriginalData(fetchedData);
-      setUploadedImageUrl(profileData.profileImageUrl || null);
+
+      if (profileData.profileImageUrl) {
+        const imageBaseUrl = 'https://accounts.business-harmony.com/uploads/';
+        setUploadedImageUrl(`${imageBaseUrl}${profileData.profileImageUrl}`);
+      } else {
+        setUploadedImageUrl(null);
+      }
+
+      setUploadedImageFile(null);
     }
   }, [profileData]);
 
@@ -63,6 +72,7 @@ export function PersonalInformation() {
       });
       setIsEditing(false);
       setOriginalData(data);
+      setUploadedImageFile(null);
     }
   }, [saveData, data, showToast, t]);
 
@@ -78,11 +88,12 @@ export function PersonalInformation() {
     if (originalData) {
       setData(originalData);
     }
+    setUploadedImageFile(null);
   };
 
   const handleSaveClick = async () => {
     if (!data) return;
-    executeSaveProfile({ data, imageUrl: uploadedImageUrl });
+    executeSaveProfile({ data, imageUrl: uploadedImageFile });
   };
 
   const getErrorMessage = (error: unknown): string | null => {
@@ -90,6 +101,7 @@ export function PersonalInformation() {
     if (error instanceof Error) return error.message;
     return String(error);
   };
+
   useEffect(() => {
     if (saveProfileError) {
       showToast({
@@ -212,12 +224,16 @@ export function PersonalInformation() {
                   initials={initials}
                   uploadedImageUrl={uploadedImageUrl}
                   onImageChange={(file) => {
+                    setUploadedImageFile(file);
                     const reader = new FileReader();
                     reader.onload = () =>
                       setUploadedImageUrl(reader.result as string);
                     reader.readAsDataURL(file);
                   }}
-                  onRemoveImage={() => setUploadedImageUrl(null)}
+                  onRemoveImage={() => {
+                    setUploadedImageFile(null);
+                    setUploadedImageUrl(null);
+                  }}
                 />
               )}
               {data &&