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

app/_layout.tsx

@@ -4,7 +4,14 @@ import { useEffect } from "react";
 import "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import Toast from "react-native-toast-message";
-import messaging from "@react-native-firebase/messaging";
+import messaging, {
+  FirebaseMessagingTypes,
+} from "@react-native-firebase/messaging";
+import { useForegroundNotifications } from "@/hooks/use-foreground-notifications";
+import {
+  NotificationProvider,
+  useNotificationStore,
+} from "@/hooks/use-notification-store";
 
 export default function RootLayout() {
   useEffect(() => {
@@ -27,14 +34,41 @@ export default function RootLayout() {
     testFCM();
   }, []);
 
+  const { addNotification } = useNotificationStore();
+
+  const handleForegroundNotification = (
+    message: FirebaseMessagingTypes.RemoteMessage
+  ) => {
+    const title = message.notification?.title || "Notifikasi";
+    const body = message.notification?.body || "";
+    const rawData = message.data || {};
+
+    const safeData: Record<string, string> = {};
+    for (const key in rawData) {
+      if (typeof rawData[key] === "string") {
+        safeData[key] = rawData[key] as string;
+      } else {
+        // Jika object/array/number → ubah ke JSON string
+        safeData[key] = JSON.stringify(rawData[key]);
+      }
+    }
+
+    // ✅ Simpan ke state → akan trigger update UI (termasuk icon bell)
+    addNotification({ body, title, data: safeData });
+  };
+
+  useForegroundNotifications(handleForegroundNotification);
+
   return (
     <>
-      <SafeAreaProvider>
-        <AuthProvider>
-          <AppRoot />
-        </AuthProvider>
-      </SafeAreaProvider>
-      <Toast />
+      <NotificationProvider>
+        <SafeAreaProvider>
+          <AuthProvider>
+            <AppRoot />
+          </AuthProvider>
+        </SafeAreaProvider>
+        <Toast />
+      </NotificationProvider>
     </>
   );
 }

hooks/use-foreground-notifications.ts

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import messaging, {
+  FirebaseMessagingTypes,
+} from "@react-native-firebase/messaging";
+
+// Gunakan tipe resmi dari library
+type RemoteMessage = FirebaseMessagingTypes.RemoteMessage;
+
+export function useForegroundNotifications(
+  onMessageReceived: (message: RemoteMessage) => void
+) {
+  useEffect(() => {
+    const unsubscribe = messaging().onMessage((remoteMessage) => {
+      console.log(
+        "🔔 Notifikasi diterima saat app aktif:",
+        JSON.stringify(remoteMessage, null, 2)
+      );
+      onMessageReceived(remoteMessage);
+    });
+
+    return unsubscribe;
+  }, [onMessageReceived]);
+}

hooks/use-notification-store.tsx

@@ -0,0 +1,52 @@
+// hooks/useNotificationStore.ts
+import { createContext, useContext, useState, ReactNode } from 'react';
+import type { FirebaseMessagingTypes } from '@react-native-firebase/messaging';
+
+type AppNotification = {
+  id: string;
+  title: string;
+  body: string;
+  data?: Record<string, string>;
+  read: boolean;
+  timestamp: number;
+};
+
+const NotificationContext = createContext<{
+  notifications: AppNotification[];
+  addNotification: (notif: Omit<AppNotification, 'id' | 'read' | 'timestamp'>) => void;
+  markAsRead: (id: string) => void;
+}>({
+  notifications: [],
+  addNotification: () => {},
+  markAsRead: () => {},
+});
+
+export const NotificationProvider = ({ children }: { children: ReactNode }) => {
+  const [notifications, setNotifications] = useState<AppNotification[]>([]);
+
+  const addNotification = (notif: Omit<AppNotification, 'id' | 'read' | 'timestamp'>) => {
+    setNotifications(prev => [
+      {
+        ...notif,
+        id: Date.now().toString(),
+        read: false,
+        timestamp: Date.now(),
+      },
+      ...prev,
+    ]);
+  };
+
+  const markAsRead = (id: string) => {
+    setNotifications(prev =>
+      prev.map(n => (n.id === id ? { ...n, read: true } : n))
+    );
+  };
+
+  return (
+    <NotificationContext.Provider value={{ notifications, addNotification, markAsRead }}>
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotificationStore = () => useContext(NotificationContext);

screens/Authentication/LoginView.tsx

@@ -134,10 +134,10 @@ export default function LoginView() {
 
   if (token && token !== "" && isAdmin) {
     // Akan di aktifkan jika sudah losos review
-    // return <Redirect href={"/(application)/admin/dashboard"} />;
+    return <Redirect href={"/(application)/admin/dashboard"} />;
 
     // Sementara gunakan ini
-    return <Redirect href={"/(application)/(user)/home"} />;
+    // return <Redirect href={"/(application)/(user)/home"} />;
   }
 
   return (