fix: api issue and merge styles problem

src/features/profile/components/security/PasswordDialog.tsx

@@ -14,6 +14,7 @@ import {
 import { CloseCircle } from 'iconsax-react';
 import { Icon } from '@rkheftan/harmony-ui';
 import { type PasswordDialogProps } from '../../types/settingsType';
+import { PasswordValidationItem } from './PasswordValidation';
 
 export function PasswordDialog({
   open,
@@ -33,6 +34,10 @@ export function PasswordDialog({
   changePassword,
   apiError,
   t,
+  hasMinLength,
+  hasNumber,
+  hasUpperAndLower,
+  hasSpecialChar,
 }: PasswordDialogProps) {
   return (
     <Dialog
@@ -93,18 +98,28 @@ export function PasswordDialog({
           fullWidth
           value={password}
           onChange={(e) => setPassword(e.target.value)}
-          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
+          sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 }, mt: 2 }}
         />
 
         {showValidation && (
-          <Typography
-            variant="body2"
-            color={validPassword ? 'success.main' : 'error.main'}
-          >
-            {validPassword
-              ? t('securityForm.passwordIsValid')
-              : t('securityForm.passwordIsInvalid')}
-          </Typography>
+          <Box sx={{ mt: 1 }}>
+            <PasswordValidationItem
+              isValid={hasNumber}
+              label={t('securityForm.hasNumber')}
+            />
+            <PasswordValidationItem
+              isValid={hasMinLength}
+              label={t('securityForm.hasMinLength')}
+            />
+            <PasswordValidationItem
+              isValid={hasUpperAndLower}
+              label={t('securityForm.hasUpperAndLower')}
+            />
+            <PasswordValidationItem
+              isValid={hasSpecialChar}
+              label={t('securityForm.hasSpecialChar')}
+            />
+          </Box>
         )}
 
         <TextField

src/features/profile/components/security/PasswordSecurity.tsx

@@ -100,7 +100,8 @@ export function PasswordSecurity() {
   useEffect(() => {
     if (addError || changeError) {
       showToast({
-        message: getErrorMessage(addError || changeError) || t('error.general'),
+        message:
+          getErrorMessage(addError || changeError) || t('securityForm.general'),
         severity: 'error',
       });
     }
@@ -116,7 +117,7 @@ export function PasswordSecurity() {
         newPassword: password,
       });
     } else {
-      await executeAddPassword({ password });
+      await executeAddPassword({ newPassword: password });
     }
   };
 
@@ -206,6 +207,10 @@ export function PasswordSecurity() {
               changePassword={changePasswordUI}
               apiError={getErrorMessage(apiError)}
               t={t}
+              hasMinLength={hasMinLength}
+              hasNumber={hasNumber}
+              hasUpperAndLower={hasUpperAndLower}
+              hasSpecialChar={hasSpecialChar}
             />
           </Box>
         )}

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 &&