chore: change styles and add Api for user profile

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

@@ -7,7 +7,7 @@ interface DisplayFieldProps {
 }
 
 export function DisplayField({ label, value }: DisplayFieldProps) {
-  const { t } = useTranslation('profileSetting');
+  const { t } = useTranslation('setting');
   const displayValue = value?.trim() || t('settingForm.notDetermined');
 
   return (

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

@@ -23,7 +23,7 @@ export function InfoRowDisplay({
   uploadedImageUrl,
   initials,
 }: InfoRowDisplayProps) {
-  const { t } = useTranslation('profileSetting');
+  const { t } = useTranslation('setting');
   const displayValue = (value: string) =>
     value?.trim() || t('settingForm.notDetermined');
 

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

@@ -2,6 +2,7 @@ import {
   Box,
   TextField,
   FormControl,
+  InputLabel,
   MenuItem,
   Select,
   Autocomplete,
@@ -15,17 +16,10 @@ import { type InfoRowData } from '@/features/profile/types';
 interface InfoRowEditProps {
   data: InfoRowData;
   setData: React.Dispatch<React.SetStateAction<InfoRowData>>;
-  gender: Gender;
-  setGender: React.Dispatch<React.SetStateAction<Gender>>;
 }
 
-export function InfoRowEdit({
-  data,
-  setData,
-  gender,
-  setGender,
-}: InfoRowEditProps) {
-  const { t } = useTranslation(['countries', 'profileSetting']);
+export function InfoRowEdit({ data, setData }: InfoRowEditProps) {
+  const { t } = useTranslation(['countries', 'setting']);
 
   const countryOptions = countries.map((c) => ({
     code: c.code,
@@ -34,26 +28,27 @@ export function InfoRowEdit({
 
   const currentCountry =
     countryOptions.find((c) => c.code === data.country) || null;
+  const fields = [
+    {
+      name: 'firstName' as const,
+      label: t('settingForm.name', { ns: 'profileSetting' }),
+      value: data.firstName,
+    },
+    {
+      name: 'lastName' as const,
+      label: t('settingForm.familyName', { ns: 'profileSetting' }),
+      value: data.lastName,
+    },
+    {
+      name: 'nationalCode' as const,
+      label: t('settingForm.nationalCode', { ns: 'profileSetting' }),
+      value: data.nationalCode,
+    },
+  ];
 
   return (
     <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-      {[
-        {
-          name: 'firstName' as keyof InfoRowData,
-          label: t('settingForm.name', { ns: 'profileSetting' }),
-          value: data.firstName,
-        },
-        {
-          name: 'lastName' as keyof InfoRowData,
-          label: t('settingForm.familyName', { ns: 'profileSetting' }),
-          value: data.lastName,
-        },
-        {
-          name: 'nationalCode' as keyof InfoRowData,
-          label: t('settingForm.nationalCode', { ns: 'profileSetting' }),
-          value: data.nationalCode,
-        },
-      ].map(({ name, label, value }) => (
+      {fields.map(({ name, label, value }) => (
         <Box
           key={name}
           sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}
@@ -75,22 +70,17 @@ export function InfoRowEdit({
 
       <Box sx={{ width: { xs: '100%', sm: '48%', md: 'calc(50% - 8px)' } }}>
         <FormControl fullWidth>
+          <InputLabel>
+            {t('settingForm.genderPlaceholder', { ns: 'profileSetting' })}
+          </InputLabel>
           <Select
-            value={gender}
-            onChange={(e) => setGender(e.target.value as Gender)}
-            displayEmpty
-            renderValue={(selected) =>
-              selected ? (
-                selected === Gender.Male ? (
-                  t('settingForm.man', { ns: 'profileSetting' })
-                ) : (
-                  t('settingForm.woman', { ns: 'profileSetting' })
-                )
-              ) : (
-                <span>
-                  {t('settingForm.genderPlaceholder', { ns: 'profileSetting' })}
-                </span>
-              )
+            value={data.gender === Gender.None ? '' : data.gender}
+            label={t('settingForm.genderPlaceholder', { ns: 'profileSetting' })}
+            onChange={(e) =>
+              setData((prev) => ({
+                ...prev,
+                gender: e.target.value as Gender,
+              }))
             }
           >
             <MenuItem value={Gender.Male}>
@@ -117,6 +107,7 @@ export function InfoRowEdit({
         renderOption={(props, option) => (
           <Box component="li" {...props} key={option.code}>
             <CountryFlag code={option.code} />
+            {option.label}
           </Box>
         )}
         renderInput={(params) => (

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

@@ -19,7 +19,7 @@ export function ProfileImage({
   onImageChange,
   onRemoveImage,
 }: ProfileImageProps) {
-  const { t } = useTranslation('profileSetting');
+  const { t } = useTranslation('setting');
   const [error, setError] = useState<string | null>(null);
 
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -80,7 +80,9 @@ export function ProfileImage({
                 Component={Camera}
                 size="small"
                 color={
-                  uploadedImageUrl && onRemoveImage ? 'primary.main' : 'white'
+                  uploadedImageUrl && onRemoveImage
+                    ? 'primary.main'
+                    : 'background.paper'
                 }
               />
             }