complated project

app/(dashboard)/_layout.tsx

@@ -1,10 +1,13 @@
+import Logo from '@/assets/images/logo.png';
 import { useTheme } from '@/components/ThemeContext';
 import { RefreshProvider } from '@/components/ui/RefreshContext';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { Image } from 'expo-image';
+import { LinearGradient } from 'expo-linear-gradient';
 import { Tabs } from 'expo-router';
 import { Home, Megaphone, PlusCircle, User } from 'lucide-react-native';
 import { useTranslation } from 'react-i18next';
-import { Text } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 export default function TabsLayout() {
@@ -13,37 +16,53 @@ export default function TabsLayout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <RefreshProvider>
-        <BottomSheetModalProvider>
+      <BottomSheetModalProvider>
+        <RefreshProvider>
           <Tabs
             screenOptions={{
               headerShown: false,
+              headerStyle: {
+                backgroundColor: isDark ? '#0f172a' : '#ffffff',
+                borderBottomWidth: 0.5,
+                borderBottomColor: isDark ? '#334155' : '#e2e8f0',
+              },
+              headerTitleStyle: {
+                fontSize: 24,
+                fontWeight: '700',
+                color: isDark ? '#f1f5f9' : '#0f172a',
+              },
+              headerShadowVisible: false,
               tabBarStyle: {
                 position: 'absolute',
                 left: 16,
                 right: 16,
-                bottom: 0,
+                bottom: 4,
                 height: 70,
-                borderTopLeftRadius: 16,
-                borderTopRightRadius: 16,
-                backgroundColor: isDark ? '#0f172a' : '#fff',
-                borderWidth: 1,
-                borderColor: isDark ? '#334155' : '#e2e8f0',
-                shadowColor: '#000',
-                shadowOpacity: isDark ? 0.5 : 0.1,
-                shadowOffset: { width: 0, height: -3 },
-                shadowRadius: isDark ? 12 : 10,
-                elevation: 8,
-                overflow: 'hidden',
+                paddingTop: 8,
+                paddingBottom: 12,
+                borderTopLeftRadius: 24,
+                borderTopRightRadius: 24,
+                backgroundColor: isDark ? 'rgba(15, 23, 42, 0.95)' : 'rgba(255, 255, 255, 0.95)', // #0f172a mos fon
+                borderWidth: 0.5,
+                borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(226, 232, 240, 0.8)', // quyuq fon uchun yengil oq
+                ...Platform.select({
+                  ios: {
+                    shadowColor: isDark ? '#0f172a' : '#0f172a', // shadow qora emas #0f172a bilan uyg‘un
+                    shadowOffset: { width: 0, height: 8 },
+                    shadowOpacity: isDark ? 0.5 : 0.15,
+                    shadowRadius: 24,
+                  },
+                  android: {
+                    elevation: 10,
+                  },
+                }),
+                overflow: 'visible',
               },
-              tabBarActiveTintColor: '#3b82f6',
-              tabBarInactiveTintColor: isDark ? '#64748b' : '#94a3b8',
-              tabBarLabelStyle: { fontSize: 12, fontWeight: '600' },
+              tabBarActiveTintColor: isDark ? '#3b82f6' : '#3b82f6', // active ko‘k
+              tabBarInactiveTintColor: isDark ? '#94a3b8' : '#64748b', // inactive ochiq kulrang
               tabBarItemStyle: {
-                flexDirection: 'row',
-                justifyContent: 'center',
-                alignItems: 'flex-start',
-                alignContent: 'center',
+                flex: 1,
+                paddingVertical: 4,
               },
               tabBarLabelPosition: 'below-icon',
             }}
@@ -51,93 +70,236 @@ export default function TabsLayout() {
             <Tabs.Screen
               name="index"
               options={{
-                tabBarLabel: ({ color }) => (
+                title: 'Bosh sahifa',
+                tabBarLabel: ({ color, focused }) => (
                   <Text
-                    style={{
-                      color: color,
-                      fontSize: 12,
-                      fontWeight: '600',
-                      textAlign: 'center',
-                      flexWrap: 'wrap',
-                      width: 80, // yetarli joy berish
-                    }}
-                    numberOfLines={2} // 2 qatorga sig‘adi
+                    numberOfLines={1}
+                    style={[
+                      styles.tabLabel,
+                      {
+                        marginLeft: 10,
+                        color,
+                        fontWeight: focused ? '700' : '600',
+                      },
+                    ]}
                   >
                     {t('Bosh sahifa')}
                   </Text>
                 ),
-                tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
+                tabBarIcon: ({ color, focused }) => (
+                  <View
+                    style={[
+                      styles.iconContainer,
+                      focused && styles.iconContainerActive,
+                      {
+                        marginLeft: 10,
+                      },
+                    ]}
+                  >
+                    <Home color={color} size={30} strokeWidth={2} />
+                  </View>
+                ),
               }}
             />
 
             <Tabs.Screen
               name="create-announcements"
               options={{
-                tabBarLabel: ({ focused, color }) => (
+                title: "Qo'shish",
+                tabBarLabel: ({ color, focused }) => (
                   <Text
-                    style={{
-                      color: color,
-                      fontSize: 12,
-                      fontWeight: '600',
-                      textAlign: 'center',
-                      flexWrap: 'wrap',
-                      width: 80, // yetarli joy berish
-                    }}
-                    numberOfLines={2} // 2 qatorga sig‘adi
+                    numberOfLines={1}
+                    style={[
+                      styles.tabLabel,
+                      {
+                        marginRight: 10,
+                        color,
+                        fontWeight: focused ? '700' : '600',
+                      },
+                    ]}
                   >
-                    {t("E'lon joylashtirish")}
+                    {t("Qo'shish")}
                   </Text>
                 ),
-                tabBarIcon: ({ color, size }) => <PlusCircle color={color} size={size} />,
+                tabBarIcon: ({ color, focused }) => (
+                  <View
+                    style={[
+                      styles.iconContainer,
+                      focused && styles.iconContainerActive,
+                      {
+                        marginRight: 10,
+                      },
+                    ]}
+                  >
+                    <PlusCircle color={color} size={30} strokeWidth={2} />
+                  </View>
+                ),
+              }}
+            />
+
+            <Tabs.Screen
+              name="e-services"
+              options={{
+                title: 'Davlat xizmatlari',
+                tabBarLabel: () => null,
+                tabBarItemStyle: {
+                  flex: 1.2,
+                  top: -10,
+                },
+                tabBarIcon: ({ focused }) => (
+                  <View style={styles.centerTabContainer}>
+                    <LinearGradient
+                      colors={focused ? ['#3b82f6', '#2563eb'] : ['#1e40af', '#1e3a8a']} // dark mod uchun quyuq ko‘k
+                      start={{ x: 0, y: 0 }}
+                      end={{ x: 1, y: 1 }}
+                      style={styles.centerTabGradient}
+                    >
+                      <View style={styles.centerTabInner}>
+                        <Image source={Logo} style={{ width: 60, height: 60 }} />
+                      </View>
+                    </LinearGradient>
+                    <Text
+                      numberOfLines={1} // 1 qatorda
+                      adjustsFontSizeToFit
+                      minimumFontScale={0.85}
+                      style={[
+                        styles.centerTabLabel,
+                        {
+                          color: focused ? '#3b82f6' : isDark ? '#94a3b8' : '#64748b',
+                          fontWeight: focused ? '700' : '600',
+                          fontSize: 13, // kattalashtirildi
+                          width: 100, // kenglik oshirildi
+                          textAlign: 'center',
+                        },
+                      ]}
+                    >
+                      {t('Davlat xizmatlari')}
+                    </Text>
+                  </View>
+                ),
               }}
             />
 
             <Tabs.Screen
               name="announcements"
               options={{
-                tabBarLabel: ({ focused, color }) => (
+                title: "E'lonlar",
+                tabBarLabel: ({ color, focused }) => (
                   <Text
-                    style={{
-                      color: color,
-                      fontSize: 12,
-                      fontWeight: '600',
-                      textAlign: 'center',
-                      flexWrap: 'wrap',
-                      width: 80, // yetarli joy berish
-                    }}
-                    numberOfLines={2} // 2 qatorga sig‘adi
+                    numberOfLines={1}
+                    style={[
+                      styles.tabLabel,
+                      {
+                        marginLeft: 20,
+                        color,
+                        fontWeight: focused ? '700' : '600',
+                      },
+                    ]}
                   >
                     {t("E'lonlar")}
                   </Text>
                 ),
-                tabBarIcon: ({ color, size }) => <Megaphone color={color} size={size} />,
+                tabBarIcon: ({ color, focused }) => (
+                  <View
+                    style={[
+                      styles.iconContainer,
+                      focused && styles.iconContainerActive,
+                      {
+                        marginLeft: 20,
+                      },
+                    ]}
+                  >
+                    <Megaphone color={color} size={30} strokeWidth={2} />
+                  </View>
+                ),
               }}
             />
 
             <Tabs.Screen
               name="profile"
               options={{
-                tabBarLabel: ({ focused, color }) => (
+                title: 'Profil',
+                tabBarLabel: ({ color, focused }) => (
                   <Text
-                    style={{
-                      color: color,
-                      fontSize: 12,
-                      fontWeight: '600',
-                      textAlign: 'center',
-                      flexWrap: 'wrap',
-                      width: 80, // yetarli joy berish
-                    }}
-                    numberOfLines={2} // 2 qatorga sig‘adi
+                    numberOfLines={1}
+                    style={[
+                      styles.tabLabel,
+                      {
+                        marginRight: 20,
+                        color,
+                        fontWeight: focused ? '700' : '600',
+                      },
+                    ]}
                   >
                     {t('Profil')}
                   </Text>
                 ),
-                tabBarIcon: ({ color, size }) => <User color={color} size={size} />,
+                tabBarIcon: ({ color, focused }) => (
+                  <View
+                    style={[
+                      styles.iconContainer,
+                      focused && styles.iconContainerActive,
+                      { marginRight: 20 },
+                    ]}
+                  >
+                    <User color={color} size={30} strokeWidth={2} />
+                  </View>
+                ),
               }}
             />
           </Tabs>
-        </BottomSheetModalProvider>
-      </RefreshProvider>
+        </RefreshProvider>
+      </BottomSheetModalProvider>
     </GestureHandlerRootView>
   );
 }
+
+const styles = StyleSheet.create({
+  tabLabel: {
+    fontSize: 11,
+    textAlign: 'center',
+    marginTop: 4,
+  },
+  iconContainer: {
+    paddingVertical: 4,
+  },
+  iconContainerActive: {
+    transform: [{ scale: 1.05 }],
+  },
+  centerTabContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  centerTabGradient: {
+    width: 72,
+    height: 72,
+    borderRadius: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#3b82f6',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.4,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 12,
+      },
+    }),
+  },
+  centerTabInner: {
+    width: 68,
+    height: 68,
+    borderRadius: 34,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  centerTabLabel: {
+    marginTop: 8,
+    fontSize: 11,
+    textAlign: 'center',
+    maxWidth: 110,
+  },
+});

app/(dashboard)/announcements.tsx

@@ -2,7 +2,6 @@ import { useTheme } from '@/components/ThemeContext';
 import { FilterProvider } from '@/components/ui/FilterContext';
 import { CustomHeader } from '@/components/ui/Header';
 import DashboardScreen from '@/screens/announcements/ui/AnnouncementsList';
-import { Stack } from 'expo-router';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 export default function Announcements() {
@@ -10,10 +9,9 @@ export default function Announcements() {
   return (
     <FilterProvider>
       <SafeAreaView
-        style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 50 }}
+        style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 80 }}
       >
         <CustomHeader />
-        <Stack.Screen options={{ title: "E'lonlar" }} />
         <DashboardScreen />
       </SafeAreaView>
     </FilterProvider>

app/(dashboard)/create-announcements.tsx

@@ -8,7 +8,9 @@ export default function CreateAnnouncements() {
   const { isDark } = useTheme();
   return (
     <FilterProvider>
-      <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff' }}>
+      <SafeAreaView
+        style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 30 }}
+      >
         <CustomHeader />
         <CreateAdsScreens />
       </SafeAreaView>

app/(dashboard)/e-services.tsx

@@ -0,0 +1,17 @@
+import { useTheme } from '@/components/ThemeContext';
+import { CustomHeader } from '@/components/ui/Header';
+import EServicesScreen from '@/screens/e-services/ui/EServices';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function EServices() {
+  const { isDark } = useTheme();
+  return (
+    <SafeAreaView
+      style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 30 }}
+      edges={['top']}
+    >
+      <CustomHeader />
+      <EServicesScreen />
+    </SafeAreaView>
+  );
+}

app/(dashboard)/index.tsx

@@ -24,7 +24,9 @@ export default function Index() {
 
   return (
     <FilterProvider>
-      <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff' }}>
+      <SafeAreaView
+        style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 85 }}
+      >
         <CustomHeader />
         <HomeScreen />
       </SafeAreaView>

app/(dashboard)/profile.tsx

@@ -7,10 +7,10 @@ export default function ProfileScreen() {
   const { isDark } = useTheme();
   return (
     <SafeAreaView
-      style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 30 }}
+      style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#ffffff', paddingBottom: 70 }}
       edges={['top']}
     >
-      <CustomHeader logoutbtn={true} />
+      <CustomHeader logoutbtn={true} notif={false} />
       <Profile />
     </SafeAreaView>
   );

app/_layout.tsx

@@ -1,18 +1,25 @@
 import { AuthProvider } from '@/components/AuthProvider';
 import QueryProvider from '@/components/QueryProvider';
-import { ThemeProvider } from '@/components/ThemeContext';
+import { ThemeProvider, useTheme } from '@/components/ThemeContext';
+import { useNotifications } from '@/hooks/useNotifications';
 import i18n from '@/i18n/i18n';
 import { ProfileDataProvider } from '@/screens/profile/lib/ProfileDataContext';
 import { Stack } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
 import { I18nextProvider } from 'react-i18next';
+import { StatusBar } from 'react-native';
 import 'react-native-reanimated';
 
 function AppContent() {
+  const { isDark } = useTheme();
+  useNotifications();
   return (
     <>
       <Stack screenOptions={{ headerShown: false }} />
-      <StatusBar style={'light'} />
+      <StatusBar
+        barStyle={isDark ? 'light-content' : 'dark-content'}
+        backgroundColor={isDark ? '#0f172a' : '#ffffff'}
+        translucent={false}
+      />
     </>
   );
 }

app/profile/added-referalls.tsx

@@ -0,0 +1,9 @@
+import CreateReferrals from '@/screens/profile/ui/CreateReferrals';
+
+export default function AddEmployeeScreen() {
+  return (
+    <>
+      <CreateReferrals />
+    </>
+  );
+}

app/profile/manual.tsx

@@ -0,0 +1,12 @@
+import { useTheme } from '@/components/ThemeContext';
+import { ManualTab } from '@/screens/profile/ui/ManualTab';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function MyAds() {
+  const { isDark } = useTheme();
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
+      <ManualTab />
+    </SafeAreaView>
+  );
+}

app/profile/my-referrals.tsx

@@ -0,0 +1,12 @@
+import { useTheme } from '@/components/ThemeContext';
+import { ReferralsTab } from '@/screens/profile/ui/RefferallsTab';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function MyReffrals() {
+  const { isDark } = useTheme();
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
+      <ReferralsTab />
+    </SafeAreaView>
+  );
+}

app/profile/notification.tsx

@@ -0,0 +1,12 @@
+import { useTheme } from '@/components/ThemeContext';
+import { NotificationTab } from '@/screens/profile/ui/NotificationTab';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function MyAds() {
+  const { isDark } = useTheme();
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
+      <NotificationTab />
+    </SafeAreaView>
+  );
+}

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,