fix: merge errors

src/features/profile/api/settingsApi.ts

@@ -14,160 +14,93 @@ import {
 } from '../types/settingsApiType';
 import { type InfoRowData } from '../types/settingsType';
 
-export async function fetchProfile(): Promise<{ data: GetProfileApiResponse }> {
-  const res = await apiClient.post<GetProfileApiResponse>(
-    '/Profile/GetProfile',
-    {},
-  );
-  return { data: res.data };
+export async function fetchProfile() {
+  return apiClient.post<GetProfileApiResponse>('/Profile/GetProfile');
 }
 
-export async function saveProfile(payload?: {
+export async function saveProfile(payload: {
   data: InfoRowData;
   imageUrl: string | null;
-}): Promise<{ data: SaveProfileApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for saving profile is missing.');
-  }
-  const res = await apiClient.post<SaveProfileApiResponse>(
+}) {
+  return apiClient.post<SaveProfileApiResponse>(
     '/Profile/SaveProfilePersonalInforamtion',
     payload,
   );
-  return { data: res.data };
 }
 
-export async function sendVerificationCode(payload?: {
-  phoneNumber: string;
-}): Promise<{ data: PhoneNumberApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for sending verification code is missing.');
-  }
-  const res = await apiClient.post<PhoneNumberApiResponse>(
+export async function sendVerificationCode(payload: { phoneNumber: string }) {
+  return apiClient.post<PhoneNumberApiResponse>(
     '/Profile/SendVerfiyPhoneNumberCode',
     payload,
   );
-  return { data: res.data };
 }
 
-export async function confirmPhoneNumberCode(payload?: {
+export async function confirmPhoneNumberCode(payload: {
   phoneNumber: string;
   verifyCode: string;
-}): Promise<{ data: ConfirmPhoneNumberApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for confirming phone number is missing.');
-  }
-  const res = await apiClient.post<ConfirmPhoneNumberApiResponse>(
+}) {
+  return apiClient.post<ConfirmPhoneNumberApiResponse>(
     '/Profile/ConfirmPhoneNumberChangeCode',
     payload,
   );
-  return { data: res.data };
 }
 
-export async function changePhoneNumber(payload?: {
-  phoneNumber: string;
-}): Promise<{ data: PhoneNumberApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for changing phone number is missing.');
-  }
-  const res = await apiClient.post<PhoneNumberApiResponse>(
+export async function changePhoneNumber(payload: { phoneNumber: string }) {
+  return apiClient.post<PhoneNumberApiResponse>(
     '/Profile/ChangePhoneNumber',
     payload,
   );
-  return { data: res.data };
 }
 
-export async function saveSettings(payload?: {
+export async function saveSettings(payload: {
   theme: number;
   calendarType: number;
   language: number;
-}): Promise<{ data: SaveSettingsApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for saving settings is missing.');
-  }
-  const res = await apiClient.post<SaveSettingsApiResponse>(
+}) {
+  return apiClient.post<SaveSettingsApiResponse>(
     '/Profile/SaveSetting',
     payload,
   );
-  return { data: res.data };
 }
 
-export async function deleteSessions(payload?: {
-  keys: string[];
-}): Promise<{ data: DeleteSessionsApiResponse }> {
-  if (!payload || payload.keys.length === 0) {
-    throw new Error('Payload with session keys is missing or empty.');
-  }
-  const res = await apiClient.post<DeleteSessionsApiResponse>(
+export async function deleteSessions(payload: { keys: string[] }) {
+  return apiClient.post<DeleteSessionsApiResponse>(
     '/Profile/DeleteSessions',
     payload,
   );
-  return { data: res.data };
 }
 
-export async function addPassword(payload?: {
-  password: string;
-}): Promise<{ data: PasswordApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for adding password is missing.');
-  }
-  const res = await apiClient.post<PasswordApiResponse>(
-    '/Profile/AddPassword',
-    payload,
-  );
-  return { data: res.data };
+export async function addPassword(payload: { password: string }) {
+  return apiClient.post<PasswordApiResponse>('/Profile/AddPassword', payload);
 }
 
-export async function changePassword(payload?: {
+export async function changePassword(payload: {
   oldPassword: string;
   newPassword: string;
-}): Promise<{ data: PasswordApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for changing password is missing.');
-  }
-  const res = await apiClient.post<PasswordApiResponse>(
+}) {
+  return apiClient.post<PasswordApiResponse>(
     '/Profile/ChangePassword',
     payload,
   );
-  return { data: res.data };
 }
 
-// ✅ NEW FUNCTIONS
-export async function sendEmailCode(payload?: {
-  email: string;
-}): Promise<{ data: SendEmailCodeApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for sending email code is missing.');
-  }
-  const res = await apiClient.post<SendEmailCodeApiResponse>(
+export async function sendEmailCode(payload: { email: string }) {
+  return apiClient.post<SendEmailCodeApiResponse>(
     'Profile/SendEmailChangeCode',
     payload,
   );
-  return { data: res.data };
 }
 
-export async function confirmEmailCode(payload?: {
+export async function confirmEmailCode(payload: {
   email: string;
   verifyCode: string;
-}): Promise<{ data: ConfirmEmailCodeApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for confirming email code is missing.');
-  }
-  const res = await apiClient.post<ConfirmEmailCodeApiResponse>(
+}) {
+  return apiClient.post<ConfirmEmailCodeApiResponse>(
     'Profile/ConfirmEmailChangeCode',
     payload,
   );
-  return { data: res.data };
 }
 
-export async function changeEmail(payload?: {
-  email: string;
-}): Promise<{ data: ChangeEmailApiResponse }> {
-  if (!payload) {
-    throw new Error('Payload for changing email is missing.');
-  }
-  const res = await apiClient.post<ChangeEmailApiResponse>(
-    'Profile/ChangeEmail',
-    payload,
-  );
-  return { data: res.data };
+export async function changeEmail(payload: { email: string }) {
+  return apiClient.post<ChangeEmailApiResponse>('Profile/ChangeEmail', payload);
 }

src/features/profile/components/CountryCodeSelector.tsx

@@ -13,7 +13,7 @@ import { useMemo, useRef, useState, type RefObject } from 'react';
 import { ArrowDown2 } from 'iconsax-react';
 import ReactCountryFlag from 'react-country-flag';
 import { useTranslation } from 'react-i18next';
-import { countries, type Country } from '../data/countries';
+import { countries, type Country } from '@/data/countries';
 
 interface CountryCodeSelectorProps {
   show: boolean;

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

@@ -11,13 +11,16 @@ import { useTranslation } from 'react-i18next';
 import { CardContainer } from '@/components/CardContainer';
 import { PageWrapper } from '../PageWrapper';
 import { PasswordDialog } from './PasswordDialog';
-import { regex } from '@/utils/regex';
-import { useManualApi } from '@/hooks/useApi';
+import { useApi } from '@/hooks/useApi';
 import {
   addPassword,
   changePassword,
   fetchProfile,
 } from '../../api/settingsApi';
+import { containsNumber } from '@/utils/regexes/containsNumber';
+import { least8Chars } from '@/utils/regexes/least8Chars';
+import { hasUpperAndLowerLetter } from '@/utils/regexes/hasUpperAndLowerLetter';
+import { containsSymbol } from '@/utils/regexes/containsSymbol';
 
 export function PasswordSecurity() {
   const theme = useTheme();
@@ -29,36 +32,36 @@ export function PasswordSecurity() {
   const [confirmPassword, setConfirmPassword] = useState('');
   const [currentPassword, setCurrentPassword] = useState('');
   const [showValidation, setShowValidation] = useState(false);
-  const [showPasswordAlert, setShowPasswordAlert] = useState(false);
   const [changePasswordUI, setChangePasswordUI] = useState(false);
 
-  const { validPassword } = regex(password);
+  const hasNumber = containsNumber(password);
+  const hasMinLength = least8Chars(password);
+  const hasUpperAndLower = hasUpperAndLowerLetter(password);
+  const hasSpecialChar = containsSymbol(password);
+  const validPassword =
+    hasNumber && hasMinLength && hasUpperAndLower && hasSpecialChar;
+
   const matchPassword = password === confirmPassword;
 
   const {
     data: profileData,
     loading: isFetching,
     error: fetchError,
-    execute: executeFetchProfile,
-  } = useManualApi(fetchProfile);
+  } = useApi(fetchProfile, { immediate: true });
 
   const {
     data: addData,
     loading: isAdding,
     error: addError,
     execute: executeAddPassword,
-  } = useManualApi(addPassword);
+  } = useApi(addPassword);
 
   const {
     data: changeData,
     loading: isChanging,
     error: changeError,
     execute: executeChangePassword,
-  } = useManualApi(changePassword);
-
-  useEffect(() => {
-    executeFetchProfile();
-  }, []);
+  } = useApi(changePassword);
 
   useEffect(() => {
     if (profileData?.success) {
@@ -76,7 +79,6 @@ export function PasswordSecurity() {
 
   useEffect(() => {
     if (addData?.success || changeData?.success) {
-      setShowPasswordAlert(true);
       if (!changePasswordUI) {
         setChangePasswordUI(true);
       }
@@ -90,14 +92,14 @@ export function PasswordSecurity() {
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
-  const handlePasswordSubmit = () => {
+  const handlePasswordSubmit = async () => {
     if (changePasswordUI) {
-      executeChangePassword({
+      await executeChangePassword({
         oldPassword: currentPassword,
         newPassword: password,
       });
     } else {
-      executeAddPassword({ password });
+      await executeAddPassword({ password });
     }
   };
 

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

@@ -11,7 +11,7 @@ import { CardContainer } from '@/components/CardContainer';
 import { PageWrapper } from '../PageWrapper';
 import { fetchProfile } from '../../api/settingsApi';
 import type { LoginLog } from '../../types/settingsApiType';
-import { useManualApi } from '@/hooks/useApi';
+import { useApi } from '@/hooks/useApi';
 import { formatDate } from '@/utils/formatSessionDate';
 
 export function RecentLogins() {
@@ -24,12 +24,7 @@ export function RecentLogins() {
     data: profileData,
     loading: isLoading,
     error: fetchError,
-    execute: executeFetchProfile,
-  } = useManualApi(fetchProfile);
-
-  useEffect(() => {
-    executeFetchProfile();
-  }, [i18n.language]);
+  } = useApi(fetchProfile, { immediate: true });
 
   useEffect(() => {
     if (profileData?.success && Array.isArray(profileData.loginLogs)) {

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

@@ -6,7 +6,7 @@ import { ProfileImage } from './personalInformation/ProfileImage';
 import { InfoRowDisplay } from './personalInformation/InfoRowDisplay';
 import { InfoRowEdit } from './personalInformation/InfoRowEdit';
 import { PageWrapper } from '../PageWrapper';
-import { useManualApi } from '@/hooks/useApi';
+import { useApi } from '@/hooks/useApi';
 import { Gender, type InfoRowData } from '../../types/settingsType';
 import { fetchProfile, saveProfile } from '../../api/settingsApi';
 
@@ -27,19 +27,14 @@ export function PersonalInformation() {
     data: profileData,
     loading: isLoadingProfile,
     error: fetchProfileError,
-    execute: executeFetchProfile,
-  } = useManualApi(fetchProfile);
+  } = useApi(fetchProfile, { immediate: true });
 
   const {
     data: saveData,
     loading: isSavingProfile,
     error: saveProfileError,
     execute: executeSaveProfile,
-  } = useManualApi(saveProfile);
-
-  useEffect(() => {
-    executeFetchProfile();
-  }, []);
+  } = useApi(saveProfile);
 
   useEffect(() => {
     if (profileData?.success) {

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

@@ -8,7 +8,7 @@ import PhoneEditForm from './phoneNumber/PhoneEditForm';
 import PhoneActionButtons from './phoneNumber/PhoneActionButtons';
 import { CircularProgress, Box, Typography } from '@mui/material';
 import { toLocaleDigits } from '@/utils/persianDigit';
-import { useManualApi } from '@/hooks/useApi';
+import { useApi } from '@/hooks/useApi';
 import {
   fetchProfile,
   sendVerificationCode,
@@ -39,35 +39,28 @@ export function PhoneNumber() {
     data: profileData,
     loading: isLoading,
     error: fetchError,
-    execute: executeFetchProfile,
-  } = useManualApi(fetchProfile);
+  } = useApi(fetchProfile, { immediate: true });
 
   const {
     data: sendCodeData,
     loading: isSendingCode,
     error: sendCodeError,
     execute: executeSendCode,
-  } = useManualApi(sendVerificationCode);
+  } = useApi(sendVerificationCode);
 
   const {
     data: confirmData,
     loading: isVerifying,
     error: confirmError,
     execute: executeConfirmCode,
-  } = useManualApi(confirmPhoneNumberCode);
+  } = useApi(confirmPhoneNumberCode);
 
   const {
     data: changePhoneData,
     loading: isChangingPhone,
     error: changePhoneError,
     execute: executeChangePhone,
-  } = useManualApi(changePhoneNumber);
-
-  useEffect(() => {
-    if (!isEditing) {
-      executeFetchProfile();
-    }
-  }, [isEditing]);
+  } = useApi(changePhoneNumber);
 
   useEffect(() => {
     if (profileData?.success && profileData.phoneNumber) {

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

@@ -8,7 +8,7 @@ import SocialMediaDialog from './socialMedia/SocialMediaDialog';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import type { Theme } from '@mui/material/styles';
 import { Box, CircularProgress, Typography } from '@mui/material';
-import { useManualApi } from '@/hooks/useApi';
+import { useApi } from '@/hooks/useApi';
 import {
   fetchProfile,
   sendEmailCode,
@@ -33,29 +33,28 @@ export function SocialMedia() {
     data: profileData,
     loading: isFetching,
     error: fetchError,
-    execute: executeFetchProfile,
-  } = useManualApi(fetchProfile);
+  } = useApi(fetchProfile, { immediate: true });
 
   const {
     data: sendCodeData,
     loading: isSendingCode,
     error: sendCodeError,
     execute: executeSendCode,
-  } = useManualApi(sendEmailCode);
+  } = useApi(sendEmailCode);
 
   const {
     data: confirmData,
     loading: isConfirming,
     error: confirmError,
     execute: executeConfirmCode,
-  } = useManualApi(confirmEmailCode);
+  } = useApi(confirmEmailCode);
 
   const {
     data: changeEmailData,
     loading: isChangingEmail,
     error: changeEmailError,
     execute: executeChangeEmail,
-  } = useManualApi(changeEmail);
+  } = useApi(changeEmail);
 
   const fullScreen = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down('sm'),
@@ -68,10 +67,6 @@ export function SocialMedia() {
     | 'lg'
     | 'xl';
 
-  useEffect(() => {
-    executeFetchProfile();
-  }, []);
-
   useEffect(() => {
     if (profileData?.success && profileData.email) {
       const { email } = profileData;

src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx

@@ -1,9 +1,9 @@
 import { Box, Typography, Avatar } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { DisplayField } from './DisplayField';
-import { CountryFlag } from '@/components/CountryFlag';
 import { Gender } from '@/features/profile/types/settingsType';
 import { type InfoRowDisplayProps } from '@/features/profile/types/settingsType';
+import ReactCountryFlag from 'react-country-flag';
 
 export function InfoRowDisplay({
   data,
@@ -72,7 +72,17 @@ export function InfoRowDisplay({
             </Typography>
             <Box sx={{ mt: 0.5 }}>
               {data.country ? (
-                <CountryFlag code={data.country} />
+                <ReactCountryFlag
+                  countryCode={data.country}
+                  svg
+                  style={{
+                    height: '1.5rem',
+                    width: '1.5rem',
+                    // TODO: Check alignment for better styling definition
+                    marginTop: '-2px',
+                    marginRight: '4px',
+                  }}
+                />
               ) : (
                 <Typography variant="body1" color="text.primary">
                   {t('settingForm.notDetermined')}

src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx

@@ -8,10 +8,10 @@ import {
   Autocomplete,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { countries } from '@/features/profile/data/countries';
-import { CountryFlag } from '@/components/CountryFlag';
+import { countries } from '@/data/countries';
 import { Gender } from '@/features/profile/types/settingsType';
 import { type InfoRowEditProps } from '@/features/profile/types/settingsType';
+import ReactCountryFlag from 'react-country-flag';
 
 export function InfoRowEdit({ data, setData }: InfoRowEditProps) {
   const { t } = useTranslation(['countries', 'setting']);
@@ -101,7 +101,17 @@ export function InfoRowEdit({ data, setData }: InfoRowEditProps) {
         }
         renderOption={(props, option) => (
           <Box component="li" {...props} key={option.code}>
-            <CountryFlag code={option.code} />
+            <ReactCountryFlag
+              countryCode={option.code}
+              svg
+              style={{
+                height: '1.5rem',
+                width: '1.5rem',
+                // TODO: Check alignment for better styling definition
+                marginTop: '-2px',
+                marginRight: '4px',
+              }}
+            />
             {option.label}
           </Box>
         )}

src/features/profile/data/countries.ts

@@ -1,271 +0,0 @@
-export interface Country {
-  code: string;
-  label: string;
-  phone: string;
-}
-
-export interface Country {
-  code: string;
-  label: string;
-  phone: string;
-}
-
-export const countries: readonly Country[] = [
-  { code: 'AF', label: 'country.afghanistan', phone: '+93' },
-  { code: 'AX', label: 'country.aland_islands', phone: '+358' },
-  { code: 'AL', label: 'country.albania', phone: '+355' },
-  { code: 'DZ', label: 'country.algeria', phone: '+213' },
-  { code: 'AS', label: 'country.american_samoa', phone: '+1684' },
-  { code: 'AD', label: 'country.andorra', phone: '+376' },
-  { code: 'AO', label: 'country.angola', phone: '+244' },
-  { code: 'AI', label: 'country.anguilla', phone: '+1264' },
-  { code: 'AQ', label: 'country.antarctica', phone: '+672' },
-  { code: 'AG', label: 'country.antigua_and_barbuda', phone: '+1268' },
-  { code: 'AR', label: 'country.argentina', phone: '+54' },
-  { code: 'AM', label: 'country.armenia', phone: '+374' },
-  { code: 'AW', label: 'country.aruba', phone: '+297' },
-  { code: 'AU', label: 'country.australia', phone: '+61' },
-  { code: 'AT', label: 'country.austria', phone: '+43' },
-  { code: 'AZ', label: 'country.azerbaijan', phone: '+994' },
-  { code: 'BS', label: 'country.bahamas', phone: '+1242' },
-  { code: 'BH', label: 'country.bahrain', phone: '+973' },
-  { code: 'BD', label: 'country.bangladesh', phone: '+880' },
-  { code: 'BB', label: 'country.barbados', phone: '+1246' },
-  { code: 'BY', label: 'country.belarus', phone: '+375' },
-  { code: 'BE', label: 'country.belgium', phone: '+32' },
-  { code: 'BZ', label: 'country.belize', phone: '+501' },
-  { code: 'BJ', label: 'country.benin', phone: '+229' },
-  { code: 'BM', label: 'country.bermuda', phone: '+1441' },
-  { code: 'BT', label: 'country.bhutan', phone: '+975' },
-  { code: 'BO', label: 'country.bolivia', phone: '+591' },
-  { code: 'BA', label: 'country.bosnia_and_herzegovina', phone: '+387' },
-  { code: 'BW', label: 'country.botswana', phone: '+267' },
-  { code: 'BR', label: 'country.brazil', phone: '+55' },
-  {
-    code: 'IO',
-    label: 'country.british_indian_ocean_territory',
-    phone: '+246',
-  },
-  { code: 'VG', label: 'country.british_virgin_islands', phone: '+1284' },
-  { code: 'BN', label: 'country.brunei', phone: '+673' },
-  { code: 'BG', label: 'country.bulgaria', phone: '+359' },
-  { code: 'BF', label: 'country.burkina_faso', phone: '+226' },
-  { code: 'BI', label: 'country.burundi', phone: '+257' },
-  { code: 'KH', label: 'country.cambodia', phone: '+855' },
-  { code: 'CM', label: 'country.cameroon', phone: '+237' },
-  { code: 'CA', label: 'country.canada', phone: '+1' },
-  { code: 'CV', label: 'country.cape_verde', phone: '+238' },
-  { code: 'KY', label: 'country.cayman_islands', phone: '+1345' },
-  { code: 'CF', label: 'country.central_african_republic', phone: '+236' },
-  { code: 'TD', label: 'country.chad', phone: '+235' },
-  { code: 'CL', label: 'country.chile', phone: '+56' },
-  { code: 'CN', label: 'country.china', phone: '+86' },
-  { code: 'CX', label: 'country.christmas_island', phone: '+61' },
-  { code: 'CC', label: 'country.cocos_keeling_islands', phone: '+61' },
-  { code: 'CO', label: 'country.colombia', phone: '+57' },
-  { code: 'KM', label: 'country.comoros', phone: '+269' },
-  { code: 'CG', label: 'country.congo_brazzaville', phone: '+242' },
-  { code: 'CD', label: 'country.congo_kinshasa', phone: '+243' },
-  { code: 'CK', label: 'country.cook_islands', phone: '+682' },
-  { code: 'CR', label: 'country.costa_rica', phone: '+506' },
-  { code: 'CI', label: 'country.cote_divoire', phone: '+225' },
-  { code: 'HR', label: 'country.croatia', phone: '+385' },
-  { code: 'CU', label: 'country.cuba', phone: '+53' },
-  { code: 'CW', label: 'country.curacao', phone: '+599' },
-  { code: 'CY', label: 'country.cyprus', phone: '+357' },
-  { code: 'CZ', label: 'country.czech_republic', phone: '+420' },
-  { code: 'DK', label: 'country.denmark', phone: '+45' },
-  { code: 'DJ', label: 'country.djibouti', phone: '+253' },
-  { code: 'DM', label: 'country.dominica', phone: '+1767' },
-  { code: 'DO', label: 'country.dominican_republic', phone: '+1' },
-  { code: 'EC', label: 'country.ecuador', phone: '+593' },
-  { code: 'EG', label: 'country.egypt', phone: '+20' },
-  { code: 'SV', label: 'country.el_salvador', phone: '+503' },
-  { code: 'GQ', label: 'country.equatorial_guinea', phone: '+240' },
-  { code: 'ER', label: 'country.eritrea', phone: '+291' },
-  { code: 'EE', label: 'country.estonia', phone: '+372' },
-  { code: 'SZ', label: 'country.eswatini', phone: '+268' },
-  { code: 'ET', label: 'country.ethiopia', phone: '+251' },
-  { code: 'FK', label: 'country.falkland_islands', phone: '+500' },
-  { code: 'FO', label: 'country.faroe_islands', phone: '+298' },
-  { code: 'FJ', label: 'country.fiji', phone: '+679' },
-  { code: 'FI', label: 'country.finland', phone: '+358' },
-  { code: 'FR', label: 'country.france', phone: '+33' },
-  { code: 'GF', label: 'country.french_guiana', phone: '+594' },
-  { code: 'PF', label: 'country.french_polynesia', phone: '+689' },
-  { code: 'GA', label: 'country.gabon', phone: '+241' },
-  { code: 'GM', label: 'country.gambia', phone: '+220' },
-  { code: 'GE', label: 'country.georgia', phone: '+995' },
-  { code: 'DE', label: 'country.germany', phone: '+49' },
-  { code: 'GH', label: 'country.ghana', phone: '+233' },
-  { code: 'GI', label: 'country.gibraltar', phone: '+350' },
-  { code: 'GR', label: 'country.greece', phone: '+30' },
-  { code: 'GL', label: 'country.greenland', phone: '+299' },
-  { code: 'GD', label: 'country.grenada', phone: '+1473' },
-  { code: 'GP', label: 'country.guadeloupe', phone: '+590' },
-  { code: 'GU', label: 'country.guam', phone: '+1671' },
-  { code: 'GT', label: 'country.guatemala', phone: '+502' },
-  { code: 'GG', label: 'country.guernsey', phone: '+44' },
-  { code: 'GN', label: 'country.guinea', phone: '+224' },
-  { code: 'GW', label: 'country.guinea_bissau', phone: '+245' },
-  { code: 'GY', label: 'country.guyana', phone: '+592' },
-  { code: 'HT', label: 'country.haiti', phone: '+509' },
-  { code: 'HN', label: 'country.honduras', phone: '+504' },
-  { code: 'HK', label: 'country.hong_kong', phone: '+852' },
-  { code: 'HU', label: 'country.hungary', phone: '+36' },
-  { code: 'IS', label: 'country.iceland', phone: '+354' },
-  { code: 'IN', label: 'country.india', phone: '+91' },
-  { code: 'ID', label: 'country.indonesia', phone: '+62' },
-  { code: 'IR', label: 'country.iran', phone: '+98' },
-  { code: 'IQ', label: 'country.iraq', phone: '+964' },
-  { code: 'IE', label: 'country.ireland', phone: '+353' },
-  { code: 'IM', label: 'country.isle_of_man', phone: '+44' },
-  { code: 'IL', label: 'country.israel', phone: '+972' },
-  { code: 'IT', label: 'country.italy', phone: '+39' },
-  { code: 'JM', label: 'country.jamaica', phone: '+1876' },
-  { code: 'JP', label: 'country.japan', phone: '+81' },
-  { code: 'JE', label: 'country.jersey', phone: '+44' },
-  { code: 'JO', label: 'country.jordan', phone: '+962' },
-  { code: 'KZ', label: 'country.kazakhstan', phone: '+7' },
-  { code: 'KE', label: 'country.kenya', phone: '+254' },
-  { code: 'KI', label: 'country.kiribati', phone: '+686' },
-  { code: 'XK', label: 'country.kosovo', phone: '+383' },
-  { code: 'KW', label: 'country.kuwait', phone: '+965' },
-  { code: 'KG', label: 'country.kyrgyzstan', phone: '+996' },
-  { code: 'LA', label: 'country.laos', phone: '+856' },
-  { code: 'LV', label: 'country.latvia', phone: '+371' },
-  { code: 'LB', label: 'country.lebanon', phone: '+961' },
-  { code: 'LS', label: 'country.lesotho', phone: '+266' },
-  { code: 'LR', label: 'country.liberia', phone: '+231' },
-  { code: 'LY', label: 'country.libya', phone: '+218' },
-  { code: 'LI', label: 'country.liechtenstein', phone: '+423' },
-  { code: 'LT', label: 'country.lithuania', phone: '+370' },
-  { code: 'LU', label: 'country.luxembourg', phone: '+352' },
-  { code: 'MO', label: 'country.macau', phone: '+853' },
-  { code: 'MG', label: 'country.madagascar', phone: '+261' },
-  { code: 'MW', label: 'country.malawi', phone: '+265' },
-  { code: 'MY', label: 'country.malaysia', phone: '+60' },
-  { code: 'MV', label: 'country.maldives', phone: '+960' },
-  { code: 'ML', label: 'country.mali', phone: '+223' },
-  { code: 'MT', label: 'country.malta', phone: '+356' },
-  { code: 'MH', label: 'country.marshall_islands', phone: '+692' },
-  { code: 'MQ', label: 'country.martinique', phone: '+596' },
-  { code: 'MR', label: 'country.mauritania', phone: '+222' },
-  { code: 'MU', label: 'country.mauritius', phone: '+230' },
-  { code: 'YT', label: 'country.mayotte', phone: '+262' },
-  { code: 'MX', label: 'country.mexico', phone: '+52' },
-  { code: 'FM', label: 'country.micronesia', phone: '+691' },
-  { code: 'MD', label: 'country.moldova', phone: '+373' },
-  { code: 'MC', label: 'country.monaco', phone: '+377' },
-  { code: 'MN', label: 'country.mongolia', phone: '+976' },
-  { code: 'ME', label: 'country.montenegro', phone: '+382' },
-  { code: 'MS', label: 'country.montserrat', phone: '+1664' },
-  { code: 'MA', label: 'country.morocco', phone: '+212' },
-  { code: 'MZ', label: 'country.mozambique', phone: '+258' },
-  { code: 'MM', label: 'country.myanmar', phone: '+95' },
-  { code: 'NA', label: 'country.namibia', phone: '+264' },
-  { code: 'NR', label: 'country.nauru', phone: '+674' },
-  { code: 'NP', label: 'country.nepal', phone: '+977' },
-  { code: 'NL', label: 'country.netherlands', phone: '+31' },
-  { code: 'NC', label: 'country.new_caledonia', phone: '+687' },
-  { code: 'NZ', label: 'country.new_zealand', phone: '+64' },
-  { code: 'NI', label: 'country.nicaragua', phone: '+505' },
-  { code: 'NE', label: 'country.niger', phone: '+227' },
-  { code: 'NG', label: 'country.nigeria', phone: '+234' },
-  { code: 'NU', label: 'country.niue', phone: '+683' },
-  { code: 'NF', label: 'country.norfolk_island', phone: '+672' },
-  { code: 'KP', label: 'country.north_korea', phone: '+850' },
-  { code: 'MK', label: 'country.north_macedonia', phone: '+389' },
-  { code: 'MP', label: 'country.northern_mariana_islands', phone: '+1670' },
-  { code: 'NO', label: 'country.norway', phone: '+47' },
-  { code: 'OM', label: 'country.oman', phone: '+968' },
-  { code: 'PK', label: 'country.pakistan', phone: '+92' },
-  { code: 'PW', label: 'country.palau', phone: '+680' },
-  { code: 'PS', label: 'country.palestine', phone: '+970' },
-  { code: 'PA', label: 'country.panama', phone: '+507' },
-  { code: 'PG', label: 'country.papua_new_guinea', phone: '+675' },
-  { code: 'PY', label: 'country.paraguay', phone: '+595' },
-  { code: 'PE', label: 'country.peru', phone: '+51' },
-  { code: 'PH', label: 'country.philippines', phone: '+63' },
-  { code: 'PN', label: 'country.pitcairn_islands', phone: '+64' },
-  { code: 'PL', label: 'country.poland', phone: '+48' },
-  { code: 'PT', label: 'country.portugal', phone: '+351' },
-  { code: 'PR', label: 'country.puerto_rico', phone: '+1' },
-  { code: 'QA', label: 'country.qatar', phone: '+974' },
-  { code: 'RE', label: 'country.reunion', phone: '+262' },
-  { code: 'RO', label: 'country.romania', phone: '+40' },
-  { code: 'RU', label: 'country.russia', phone: '+7' },
-  { code: 'RW', label: 'country.rwanda', phone: '+250' },
-  { code: 'BL', label: 'country.saint_barthelemy', phone: '+590' },
-  { code: 'SH', label: 'country.saint_helena', phone: '+290' },
-  { code: 'KN', label: 'country.saint_kitts_and_nevis', phone: '+1869' },
-  { code: 'LC', label: 'country.saint_lucia', phone: '+1758' },
-  { code: 'MF', label: 'country.saint_martin', phone: '+590' },
-  { code: 'PM', label: 'country.saint_pierre_and_miquelon', phone: '+508' },
-  {
-    code: 'VC',
-    label: 'country.saint_vincent_and_the_grenadines',
-    phone: '+1784',
-  },
-  { code: 'WS', label: 'country.samoa', phone: '+685' },
-  { code: 'SM', label: 'country.san_marino', phone: '+378' },
-  { code: 'ST', label: 'country.sao_tome_and_principe', phone: '+239' },
-  { code: 'SA', label: 'country.saudi_arabia', phone: '+966' },
-  { code: 'SN', label: 'country.senegal', phone: '+221' },
-  { code: 'RS', label: 'country.serbia', phone: '+381' },
-  { code: 'SC', label: 'country.seychelles', phone: '+248' },
-  { code: 'SL', label: 'country.sierra_leone', phone: '+232' },
-  { code: 'SG', label: 'country.singapore', phone: '+65' },
-  { code: 'SX', label: 'country.sint_maarten', phone: '+1721' },
-  { code: 'SK', label: 'country.slovakia', phone: '+421' },
-  { code: 'SI', label: 'country.slovenia', phone: '+386' },
-  { code: 'SB', label: 'country.solomon_islands', phone: '+677' },
-  { code: 'SO', label: 'country.somalia', phone: '+252' },
-  { code: 'ZA', label: 'country.south_africa', phone: '+27' },
-  {
-    code: 'GS',
-    label: 'country.south_georgia_and_south_sandwich_islands',
-    phone: '+500',
-  },
-  { code: 'KR', label: 'country.south_korea', phone: '+82' },
-  { code: 'SS', label: 'country.south_sudan', phone: '+211' },
-  { code: 'ES', label: 'country.spain', phone: '+34' },
-  { code: 'LK', label: 'country.sri_lanka', phone: '+94' },
-  { code: 'SD', label: 'country.sudan', phone: '+249' },
-  { code: 'SR', label: 'country.suriname', phone: '+597' },
-  { code: 'SJ', label: 'country.svalbard_and_jan_mayen', phone: '+47' },
-  { code: 'SE', label: 'country.sweden', phone: '+46' },
-  { code: 'CH', label: 'country.switzerland', phone: '+41' },
-  { code: 'SY', label: 'country.syria', phone: '+963' },
-  { code: 'TW', label: 'country.taiwan', phone: '+886' },
-  { code: 'TJ', label: 'country.tajikistan', phone: '+992' },
-  { code: 'TZ', label: 'country.tanzania', phone: '+255' },
-  { code: 'TH', label: 'country.thailand', phone: '+66' },
-  { code: 'TL', label: 'country.timor_leste', phone: '+670' },
-  { code: 'TG', label: 'country.togo', phone: '+228' },
-  { code: 'TK', label: 'country.tokelau', phone: '+690' },
-  { code: 'TO', label: 'country.tonga', phone: '+676' },
-  { code: 'TT', label: 'country.trinidad_and_tobago', phone: '+1868' },
-  { code: 'TN', label: 'country.tunisia', phone: '+216' },
-  { code: 'TR', label: 'country.turkey', phone: '+90' },
-  { code: 'TM', label: 'country.turkmenistan', phone: '+993' },
-  { code: 'TC', label: 'country.turks_and_caicos_islands', phone: '+1649' },
-  { code: 'TV', label: 'country.tuvalu', phone: '+688' },
-  { code: 'VI', label: 'country.us_virgin_islands', phone: '+1340' },
-  { code: 'UG', label: 'country.uganda', phone: '+256' },
-  { code: 'UA', label: 'country.ukraine', phone: '+380' },
-  { code: 'AE', label: 'country.united_arab_emirates', phone: '+971' },
-  { code: 'GB', label: 'country.united_kingdom', phone: '+44' },
-  { code: 'US', label: 'country.united_states', phone: '+1' },
-  { code: 'UY', label: 'country.uruguay', phone: '+598' },
-  { code: 'UZ', label: 'country.uzbekistan', phone: '+998' },
-  { code: 'VU', label: 'country.vanuatu', phone: '+678' },
-  { code: 'VA', label: 'country.vatican_city', phone: '+39' },
-  { code: 'VE', label: 'country.venezuela', phone: '+58' },
-  { code: 'VN', label: 'country.vietnam', phone: '+84' },
-  { code: 'WF', label: 'country.wallis_and_futuna', phone: '+681' },
-  { code: 'EH', label: 'country.western_sahara', phone: '+212' },
-  { code: 'YE', label: 'country.yemen', phone: '+967' },
-  { code: 'ZM', label: 'country.zambia', phone: '+260' },
-  { code: 'ZW', label: 'country.zimbabwe', phone: '+263' },
-];

src/features/profile/index.ts

@@ -0,0 +1,4 @@
+export * from './routes/UserInformationPage';
+export * from './routes/ActiveDevicesPage';
+export * from './routes/SettingPage';
+export * from './routes/SecurityPage';

src/features/profile/routes/ActiveDevicesPage.tsx

@@ -10,15 +10,15 @@ import {
 import { useTranslation } from 'react-i18next';
 import { DeviceMessage, Logout } from 'iconsax-react';
 import { CardContainer } from '@/components/CardContainer';
-import { PageWrapper } from '../PageWrapper';
+import { PageWrapper } from '../components/PageWrapper';
 import { Icon } from '@rkheftan/harmony-ui';
-import { fetchProfile, deleteSessions } from '../../api/settingsApi';
-import { type ApiSession } from '../../types/settingsApiType';
-import { useManualApi } from '@/hooks/useApi';
+import { fetchProfile, deleteSessions } from '../api/settingsApi';
+import { type ApiSession } from '../types/settingsApiType';
+import { useApi } from '@/hooks/useApi';
 import { formatDate } from '@/utils/formatSessionDate';
-import { type Device } from '../../types/settingsType';
+import { type Device } from '../types/settingsType';
 
-export function ActiveDevices() {
+export function ActiveDevicesPage() {
   const { t, i18n } = useTranslation('setting');
   const [devices, setDevices] = useState<Device[]>([]);
   const [loadingDeleteIds, setLoadingDeleteIds] = useState<string[]>([]);
@@ -29,18 +29,13 @@ export function ActiveDevices() {
     data: profileData,
     loading: isLoading,
     error: fetchError,
-    execute: executeFetchProfile,
-  } = useManualApi(fetchProfile);
+  } = useApi(fetchProfile, { immediate: true });
 
   const {
     data: terminateData,
     loading: isTerminating,
     execute: executeTerminateAll,
-  } = useManualApi(deleteSessions);
-
-  useEffect(() => {
-    executeFetchProfile();
-  }, [i18n.language]);
+  } = useApi(deleteSessions);
 
   useEffect(() => {
     if (profileData?.success && profileData.activeSessions) {

src/features/profile/routes/SecurityPage.tsx

@@ -0,0 +1,16 @@
+import { PasswordSecurity } from '../components/security/PasswordSecurity';
+import { RecentLogins } from '../components/security/RecentLogins';
+import { Box } from '@mui/material';
+
+export function SecurityPage() {
+  return (
+    <>
+      <Box component={'div'} id="password">
+        <PasswordSecurity />
+      </Box>
+      <Box component={'div'} id="confirmed-ips">
+        <RecentLogins />
+      </Box>
+    </>
+  );
+}

src/features/profile/routes/SettingPage.tsx

@@ -11,11 +11,11 @@ import {
 import { CardContainer } from '@/components/CardContainer';
 import { useTranslation } from 'react-i18next';
 import { ThemeToggleButton } from '@/components/ThemToggle';
-import { PageWrapper } from '../PageWrapper';
+import { PageWrapper } from '../components/PageWrapper';
 import { Icon } from '@rkheftan/harmony-ui';
 import { Sun1, Moon, Calendar1 } from 'iconsax-react';
-import { useManualApi } from '@/hooks/useApi';
-import { fetchProfile, saveSettings } from '../../api/settingsApi';
+import { useApi } from '@/hooks/useApi';
+import { fetchProfile, saveSettings } from '../api/settingsApi';
 
 type ThemeMode = 'light' | 'dark';
 type CalendarType = 'christian' | 'solar' | 'lunar';
@@ -39,7 +39,7 @@ const calendarOptions: { key: CalendarType; apiValue: number }[] = [
 
 const themeApiMap: Record<ThemeMode, number> = { light: 1, dark: 2 };
 
-export function Setting() {
+export function SettingPage() {
   const { t, i18n } = useTranslation(['setting']);
   const { mode, setMode } = useColorScheme();
 
@@ -56,19 +56,14 @@ export function Setting() {
     data: profileData,
     loading: isFetching,
     error: fetchError,
-    execute: executeFetchProfile,
-  } = useManualApi(fetchProfile);
+  } = useApi(fetchProfile, { immediate: true });
 
   const {
     data: saveData,
     loading: isSaving,
     error: saveError,
     execute: executeSaveSettings,
-  } = useManualApi(saveSettings);
-
-  useEffect(() => {
-    executeFetchProfile();
-  }, []);
+  } = useApi(saveSettings);
 
   useEffect(() => {
     if (profileData?.success && profileData.userSettings) {
@@ -254,11 +249,9 @@ export function Setting() {
                   <Autocomplete
                     options={languageOptions}
                     getOptionLabel={(o) => o.label}
-                    value={
-                      languageOptions.find(
-                        (o) => o.code === draftSettings.language,
-                      ) // ✅ FIX: Removed '|| null'
-                    }
+                    value={languageOptions.find(
+                      (o) => o.code === draftSettings.language,
+                    )}
                     onChange={(_, v) =>
                       v &&
                       setDraftSettings((prev) => ({

src/features/profile/routes/UserInformationPage.tsx

@@ -0,0 +1,20 @@
+import { PersonalInformation } from '../components/userInformation/PersonalInformation';
+import { PhoneNumber } from '../components/userInformation/PhoneNumber';
+import { SocialMedia } from '../components/userInformation/SocialMedia';
+import { Box } from '@mui/material';
+
+export function UserInformationPage() {
+  return (
+    <>
+      <Box component={'div'} id="info">
+        <PersonalInformation />
+      </Box>
+      <Box component={'div'} id="contact-info">
+        <PhoneNumber />
+      </Box>
+      <Box component={'div'} id="email">
+        <SocialMedia />
+      </Box>
+    </>
+  );
+}