complated project

app/profile/personal-info.tsx

@@ -17,6 +17,7 @@ import {
   Text,
   TextInput,
   ToastAndroid,
+  TouchableOpacity,
   View,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -92,6 +93,8 @@ export default function PersonalInfoScreen() {
       stir: editData.data.stir,
       director_full_name: editData.data.director_full_name,
       address: editData.data.address,
+      gender: editData.data.gender,
+      age: editData.data.age,
     });
   };
 
@@ -117,7 +120,13 @@ export default function PersonalInfoScreen() {
   }
 
   /* ===================== EDIT MODE ===================== */
+  const [showGenderOptions, setShowGenderOptions] = useState(false);
   if (isEditing && editData) {
+    const genderOptions: { label: string; value: 'male' | 'female' }[] = [
+      { label: t('Erkak'), value: 'male' },
+      { label: t('Ayol'), value: 'female' },
+    ];
+
     return (
       <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
         <View style={styles.topHeader}>
@@ -136,13 +145,18 @@ export default function PersonalInfoScreen() {
 
         <ScrollView style={styles.content}>
           <View style={styles.editSection}>
+            {/* First Name */}
             <Text style={[styles.label, { color: theme.textSecondary }]}>{t('Ism')}</Text>
             <TextInput
               style={[styles.input, { backgroundColor: theme.inputBg, color: theme.text }]}
               value={editData?.data.first_name}
-              onChangeText={(text) => setEditData((prev) => prev && { ...prev, first_name: text })}
+              onChangeText={(text) =>
+                setEditData((prev) => prev && { ...prev, data: { ...prev.data, first_name: text } })
+              }
               placeholderTextColor={theme.placeholder}
             />
+
+            {/* Phone */}
             <Text style={[styles.label, { color: theme.textSecondary }]}>
               {t('Telefon raqami')}
             </Text>
@@ -161,18 +175,59 @@ export default function PersonalInfoScreen() {
                 onChangeText={(text) => setPhone(normalizeDigits(text))}
                 onFocus={() => setFocused(true)}
                 onBlur={() => setFocused(false)}
-                keyboardType="phone-pad"
+                keyboardType="numeric"
                 placeholder="90 123 45 67"
                 maxLength={12}
                 placeholderTextColor={theme.placeholder}
               />
             </View>
+
+            {/* Age */}
+            <Text style={[styles.label, { color: theme.textSecondary }]}>{t('Yoshi')}</Text>
+            <TextInput
+              style={[styles.input, { backgroundColor: theme.inputBg, color: theme.text }]}
+              value={editData?.data.age?.toString() || ''}
+              placeholder="18"
+              keyboardType="numeric"
+              onChangeText={(text) =>
+                setEditData(
+                  (prev) => prev && { ...prev, data: { ...prev.data, age: Number(text) } }
+                )
+              }
+              placeholderTextColor={theme.placeholder}
+            />
+
+            {/* Gender as buttons */}
+            <Text style={[styles.label, { color: theme.textSecondary }]}>{t('Jinsi')}</Text>
+            <View style={{ flexDirection: 'row', gap: 12, marginTop: 4 }}>
+              {genderOptions.map((option) => {
+                const isSelected = editData.data.gender === option.value;
+                return (
+                  <TouchableOpacity
+                    key={option.value}
+                    onPress={() =>
+                      setEditData((prev) =>
+                        prev ? { ...prev, data: { ...prev.data, gender: option.value } } : prev
+                      )
+                    }
+                    style={{
+                      flex: 1,
+                      paddingVertical: 12,
+                      borderRadius: 12,
+                      alignItems: 'center',
+                      backgroundColor: isSelected ? theme.primary : theme.inputBg,
+                    }}
+                  >
+                    <Text style={{ color: isSelected ? '#fff' : theme.text }}>{option.label}</Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
           </View>
         </ScrollView>
       </SafeAreaView>
     );
   }
-
   /* ===================== VIEW MODE ===================== */
   return (
     <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
@@ -191,6 +246,16 @@ export default function PersonalInfoScreen() {
           <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Ism')}</Text>
           <Text style={[styles.infoValue, { color: theme.text }]}>{me?.data.data.first_name}</Text>
 
+          <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Yoshi')}</Text>
+          <Text style={[styles.infoValue, { color: theme.text }]}>
+            {me?.data.data.age ? me?.data.data.age : t("Noma'lum")}
+          </Text>
+
+          <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Jinsi')}</Text>
+          <Text style={[styles.infoValue, { color: theme.text }]}>
+            {me?.data.data.gender ? t(me?.data.data.gender) : t("Noma'lum")}
+          </Text>
+
           <Text style={[styles.infoLabel, { color: theme.textSecondary }]}>
             {t('Telefon raqami')}
           </Text>
@@ -267,7 +332,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  fieldsContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  fieldsContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 20 },
   fieldChip: {
     paddingHorizontal: 16,
     paddingVertical: 10,