test

app/(application)/(user)/home.tsx

@@ -3,6 +3,7 @@
 import { StackCustom, ViewWrapper } from "@/components";
 import { MainColor } from "@/constants/color-palet";
 import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
 import Home_BottomFeatureSection from "@/screens/Home/bottomFeatureSection";
 import Home_ImageSection from "@/screens/Home/imageSection";
 import TabSection from "@/screens/Home/tabSection";
@@ -13,13 +14,18 @@ import { apiVersion } from "@/service/api-config";
 import { Ionicons } from "@expo/vector-icons";
 import { Redirect, router, Stack, useFocusEffect } from "expo-router";
 import { useCallback, useEffect, useState } from "react";
-import { RefreshControl } from "react-native";
+import { RefreshControl, Text, View } from "react-native";
 
 export default function Application() {
   const { token, user, userData } = useAuth();
   const [data, setData] = useState<any>();
   const [refreshing, setRefreshing] = useState(false);
-  console.log("[User] >>", JSON.stringify(user?.id, null, 2));
+  // console.log("[User] >>", JSON.stringify(user?.id, null, 2));
+
+  const { notifications } = useNotificationStore();
+  const unreadCount = notifications.filter((n) => !n.read).length;
+
+  console.log("UNREAD", unreadCount)
 
   // ‼️ Untuk cek apakah: 1. user ada, 2. user punya profile, 3. accept temrs of forum nya ada atau tidak
   useFocusEffect(
@@ -82,17 +88,46 @@ export default function Application() {
               }}
             />
           ),
-          headerRight: () => (
-            <Ionicons
-              disabled={true}
-              name="notifications"
-              size={20}
-              color={MainColor.placeholder}
-              onPress={() => {
-                router.push("/notifications");
-              }}
-            />
-          ),
+          headerRight: () => {
+            return (
+              <View style={{ position: "relative" }}>
+                <Ionicons
+                  name="notifications"
+                  size={20}
+                  color={MainColor.yellow}
+                  onPress={() => {
+                    router.push("/notifications");
+                  }}
+                />
+                {unreadCount > 0 && (
+                  <View
+                    style={{
+                      position: "absolute",
+                      top: -4,
+                      right: -4,
+                      backgroundColor: "red",
+                      borderRadius: 8,
+                      minWidth: 16,
+                      height: 16,
+                      justifyContent: "center",
+                      alignItems: "center",
+                      paddingHorizontal: 2,
+                    }}
+                  >
+                    <Text
+                      style={{
+                        color: "white",
+                        fontSize: 10,
+                        fontWeight: "bold",
+                      }}
+                    >
+                      {unreadCount > 9 ? "9+" : unreadCount}
+                    </Text>
+                  </View>
+                )}
+              </View>
+            );
+          },
         }}
       />
       <ViewWrapper