government ui complated

screens/profile/ui/ProfileScreen.tsx

@@ -25,7 +25,13 @@ export default function Profile() {
   const { isDark } = useTheme();
   const { t } = useTranslation();
 
-  const { data: me, isLoading } = useQuery({
+  const { data } = useQuery({
+    queryKey: ['notification-list'],
+    queryFn: () => user_api.notification_list({ page: 1, page_size: 1 }),
+  });
+  const unreadCount = data?.data?.data.unread_count ?? 0;
+
+  const { data: me } = useQuery({
     queryKey: ['get_me'],
     queryFn: () => user_api.getMe(),
   });
@@ -36,7 +42,12 @@ export default function Profile() {
       items: [
         { icon: User, label: "Shaxsiy ma'lumotlar", route: '/profile/personal-info' },
         { icon: Users, label: 'Xodimlar', route: '/profile/employees' },
-        { icon: Bell, label: 'Bildirishnomalar', route: '/profile/notification' },
+        {
+          icon: Bell,
+          label: 'Bildirishnomalar',
+          route: '/profile/notification',
+          badge: unreadCount,
+        },
       ],
     },
     {
@@ -60,7 +71,7 @@ export default function Profile() {
       title: 'Sozlamalar',
       items: [
         { icon: Settings, label: 'Sozlamalar', route: '/profile/settings' },
-        { icon: BookAIcon, label: "Foydalanish qo'lanmasi", route: '/profile/manual' },
+        { icon: BookAIcon, label: "Foydalanish qo'llanmasi", route: '/profile/manual' },
       ],
     },
   ];
@@ -95,6 +106,12 @@ export default function Profile() {
                   style={[styles.iconContainer, isDark ? styles.darkIconBg : styles.lightIconBg]}
                 >
                   <item.icon size={24} color="#3b82f6" />
+
+                  {item.badge && (
+                    <View style={styles.badge}>
+                      <Text style={styles.badgeText}>{item.badge}</Text>
+                    </View>
+                  )}
                 </View>
 
                 <Text style={[styles.cardLabel, isDark ? styles.darkText : styles.lightText]}>
@@ -202,4 +219,23 @@ const styles = StyleSheet.create({
   lightText: {
     color: '#0f172a',
   },
+  badge: {
+    position: 'absolute',
+    top: -5,
+    right: -5,
+    backgroundColor: '#ef4444', // qizil badge
+    borderRadius: 8,
+    minWidth: 16,
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 3,
+  },
+
+  badgeText: {
+    color: '#ffffff',
+    fontSize: 10,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
 });