chore: change styles and add Api for user profile

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) => (