complated project

components/ui/Header.tsx

@@ -1,30 +1,59 @@
 import Logo from '@/assets/images/logo.png';
+import LogoText from '@/assets/images/navbar.png';
 import { useTheme } from '@/components/ThemeContext';
-import { LogOut } from 'lucide-react-native';
-import { useTranslation } from 'react-i18next';
+import { user_api } from '@/screens/profile/lib/api';
+import { useQuery } from '@tanstack/react-query';
+import { router } from 'expo-router';
+import { Bell, LogOut } from 'lucide-react-native';
 import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useAuth } from '../AuthProvider';
 
-export const CustomHeader = ({ logoutbtn = false }: { logoutbtn?: boolean }) => {
+export const CustomHeader = ({
+  logoutbtn = false,
+  notif = true,
+}: {
+  logoutbtn?: boolean;
+  notif?: boolean;
+}) => {
   const { isDark } = useTheme();
-  const { t } = useTranslation();
   const { logout } = useAuth();
 
+  const { data, isLoading } = useQuery({
+    queryKey: ['notification-list'],
+    queryFn: () => user_api.notification_list({ page: 1, page_size: 1 }),
+  });
+  const unreadCount = data?.data?.data.unread_count ?? 0;
+
   return (
     <View style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
       <View style={styles.logoWrapper}>
         <View style={styles.logoContainer}>
           <Image source={Logo} style={styles.logo} />
         </View>
-        <Text style={[styles.title, isDark ? styles.darkText : styles.lightText]}>
-          {t('app.name', 'InfoTarget')}
-        </Text>
+        <Image source={LogoText} style={{ width: 160, height: 40, objectFit: 'cover' }} />
       </View>
       {logoutbtn && (
         <TouchableOpacity onPress={logout}>
           <LogOut color={'red'} />
         </TouchableOpacity>
       )}
+      {notif && (
+        <TouchableOpacity
+          onPress={() => router.push('/profile/notification')} // yoki '/notifications' sahifasiga
+          style={styles.bellContainer}
+        >
+          <Bell color={isDark ? '#e2e8f0' : '#334155'} size={24} />
+
+          {unreadCount > 0 && (
+            <View style={styles.badge}>
+              <Text style={styles.badgeText}>{unreadCount > 99 ? '99+' : unreadCount}</Text>
+            </View>
+          )}
+
+          {/* Agar yuklanayotgan bo'lsa kichik indikator (ixtiyoriy) */}
+          {isLoading && unreadCount === 0 && <View style={styles.loadingDot} />}
+        </TouchableOpacity>
+      )}
     </View>
   );
 };
@@ -57,7 +86,8 @@ const styles = StyleSheet.create({
   logoWrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 12,
+    alignContent: 'center',
+    gap: 5,
   },
 
   logoContainer: {
@@ -89,4 +119,38 @@ const styles = StyleSheet.create({
   lightText: {
     color: '#0f172a',
   },
+  bellContainer: {
+    position: 'relative',
+  },
+
+  badge: {
+    position: 'absolute',
+    top: -6,
+    right: -6,
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: '#ef4444', // qizil badge
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+    borderWidth: 1.5,
+  },
+
+  badgeText: {
+    color: '#ffffff',
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
+
+  loadingDot: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#3b82f6',
+    opacity: 0.7,
+  },
 });