Fix notifikasi system

Add:
- screens/Admin/AdminNotificationBell.tsx

Fix:
- app.config.js
- app/(application)/(user)/home.tsx
- app/(application)/(user)/test-notifications.tsx
- app/(application)/admin/_layout.tsx
- app/_layout.tsx
- components/Notification/NotificationInitializer.tsx
- context/AuthContext.tsx
- hooks/use-notification-store.tsx
- ios/HIPMIBadungConnect/Info.plist
- screens/Home/HeaderBell.tsx
- service/api-device-token.ts
- service/api-notifications.ts

### No Issue

app.config.js

@@ -21,7 +21,7 @@ export default {
         "Aplikasi membutuhkan akses lokasi untuk menampilkan peta.",
     },
     associatedDomains: ["applinks:cld-dkr-staging-hipmi.wibudev.com"],
-    buildNumber: "15",
+    buildNumber: "17",
   },
 
   android: {

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

@@ -1,4 +1,6 @@
 import { BackButton } from "@/components";
+import { IconPlus } from "@/components/_Icon";
+import { IconDot } from "@/components/_Icon/IconComponent";
 import LeftButtonCustom from "@/components/Button/BackButton";
 import { MainColor } from "@/constants/color-palet";
 import { ICON_SIZE_SMALL } from "@/constants/constans-value";
@@ -56,6 +58,12 @@ export default function UserLayout() {
           options={{
             title: "Notifikasi",
             headerLeft: () => <BackButton />,
+            headerRight: () => (
+              <IconPlus
+                color={MainColor.yellow}
+                onPress={() => router.push("/test-notifications")}
+              />
+            ),
           }}
         />
 

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

@@ -14,25 +14,23 @@ import { apiUser } from "@/service/api-client/api-user";
 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, Text, View } from "react-native";
+import { useCallback, useState } from "react";
+import { RefreshControl } 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));
+  const { syncUnreadCount } = useNotificationStore();
+
 
-  // const { notifications } = useNotificationStore();
-  // const unreadCount = notifications.filter((n) => !n.read).length;
-  // console.log("UNREAD", notifications)
-  // ‼️ Untuk cek apakah: 1. user ada, 2. user punya profile, 3. accept temrs of forum nya ada atau tidak
 
   useFocusEffect(
     useCallback(() => {
       onLoadData();
       checkVersion();
       userData(token as string);
+      syncUnreadCount()
     }, [user?.id, token])
   );
 
@@ -89,46 +87,6 @@ export default function Application() {
             />
           ),
           headerRight: () => <HeaderBell />,
-          // 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
@@ -145,7 +103,9 @@ export default function Application() {
         }
       >
         <StackCustom>
-          {/* <ButtonCustom onPress={() => router.push("./test-notifications")}>Test Notif</ButtonCustom> */}
+          <ButtonCustom onPress={() => router.push("./test-notifications")}>
+            Test Notif
+          </ButtonCustom>
 
           <Home_ImageSection />
 

app/(application)/(user)/test-notifications.tsx

@@ -4,23 +4,42 @@ import {
   StackCustom,
   TextInputCustom,
 } from "@/components";
+import { useAuth } from "@/hooks/use-auth";
 import { apiNotificationsSend } from "@/service/api-notifications";
 import { useState } from "react";
+import Toast from "react-native-toast-message";
 
 export default function TestNotification() {
+  const { user } = useAuth();
   const [data, setData] = useState("");
+
   const handleSubmit = async () => {
     console.log("[Data Dikirim]", data);
     const response = await apiNotificationsSend({
       data: {
-        fcmToken:
-          "cVmHm-3P4E-1vjt6AA9kSF:APA91bHTkHjGTLxrFsb6Le6bZmzboZhwMGYXU4p0FP9yEeXixLDXNKS4F5vLuZV3sRgSnjjQsPpLOgstVLHJB8VJTObctKLdN-CxAp4dnP7Jbc_mH53jWvs",
         title: "Test dari Backend (App Router)!",
         body: data,
+        userLoginId: user?.id || "",
+        appId: "hipmi",
+        status: "publish",
+        kategoriApp: "EVENT",
+        type: "announcement",
+        deepLink: "event/23189913801",
       },
     });
 
-    console.log("[RES SEND NOTIF]", JSON.stringify(response.data, null, 2));
+    if (response.success) {
+      console.log("[RES SEND NOTIF]", JSON.stringify(response, null, 2));
+      Toast.show({
+        type: "success",
+        text1: "Notifikasi berhasil dikirim",
+      });
+    } else {
+      Toast.show({
+        type: "error",
+        text1: "Gagal mengirim notifikasi",
+      });
+    }
   };
 
   return (

app/(application)/_layout.tsx

@@ -1,15 +1,26 @@
 import { BackButton } from "@/components";
+import NotificationInitializer from "@/components/Notification/NotificationInitializer";
+import { NotificationProvider } from "@/hooks/use-notification-store";
 import { HeaderStyles } from "@/styles/header-styles";
 import { Stack } from "expo-router";
 
 export default function ApplicationLayout() {
+  return (
+    <>
+      <NotificationProvider>
+        <NotificationInitializer />
+        <ApplicationStack />
+      </NotificationProvider>
+    </>
+  );
+}
+
+function ApplicationStack() {
   return (
     <>
       <Stack screenOptions={HeaderStyles}>
         <Stack.Screen name="(user)" options={{ headerShown: false }} />
         <Stack.Screen name="admin" options={{ headerShown: false }} />
-        
-        
 
         {/* Take Picture */}
         <Stack.Screen

app/(application)/admin/_layout.tsx

@@ -15,6 +15,7 @@ import {
   ICON_SIZE_XLARGE,
 } from "@/constants/constans-value";
 import { useAuth } from "@/hooks/use-auth";
+import AdminNotificationBell from "@/screens/Admin/AdminNotificationBell";
 import {
   adminListMenu,
   superAdminListMenu,
@@ -192,11 +193,12 @@ export default function AdminLayout() {
                 label: "Notifikasi",
                 value: "notification",
                 icon: (
-                  <Ionicons
-                    name="notifications"
-                    size={ICON_SIZE_SMALL}
-                    color={MainColor.white}
-                  />
+                  // <Ionicons
+                  //   name="notifications"
+                  //   size={ICON_SIZE_SMALL}
+                  //   color={MainColor.white}
+                  // />
+                  <AdminNotificationBell/>
                 ),
                 path: "/admin/notification",
               },

app/_layout.tsx

@@ -1,15 +1,5 @@
-import NotificationInitializer from "@/components/_ShareComponent/NotificationInitializer";
 import { AuthProvider } from "@/context/AuthContext";
-import { useForegroundNotifications } from "@/hooks/use-foreground-notifications";
-import {
-  NotificationProvider,
-  useNotificationStore,
-} from "@/hooks/use-notification-store";
 import AppRoot from "@/screens/RootLayout/AppRoot";
-import messaging, {
-  FirebaseMessagingTypes,
-} from "@react-native-firebase/messaging";
-import { useEffect } from "react";
 import "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import Toast from "react-native-toast-message";
@@ -17,15 +7,12 @@ import Toast from "react-native-toast-message";
 export default function RootLayout() {
   return (
     <>
-      <NotificationProvider>
-        <SafeAreaProvider>
-          <AuthProvider>
-            <NotificationInitializer />
-            <AppRoot />
-          </AuthProvider>
-        </SafeAreaProvider>
-        <Toast />
-      </NotificationProvider>
+      <SafeAreaProvider>
+        <AuthProvider>
+          <AppRoot />
+        </AuthProvider>
+      </SafeAreaProvider>
+      <Toast />
     </>
   );
 }

components/Notification/NotificationInitializer.tsx

@@ -1,6 +1,5 @@
 // src/components/NotificationInitializer.tsx
 import { useEffect } from "react";
-import messaging from "@react-native-firebase/messaging";
 import { useForegroundNotifications } from "@/hooks/use-foreground-notifications";
 import { useNotificationStore } from "@/hooks/use-notification-store";
 import type { FirebaseMessagingTypes } from "@react-native-firebase/messaging";
@@ -8,12 +7,19 @@ import { useAuth } from "@/hooks/use-auth";
 import { Platform } from "react-native";
 import * as Device from "expo-device";
 import * as Application from "expo-application";
-import { apiDeviceRegisterToken } from "@/service/api-notifications";
+import { apiDeviceRegisterToken } from "@/service/api-device-token";
+import messaging, {
+  isSupported,
+  requestPermission,
+  getToken,
+  AuthorizationStatus,
+} from "@react-native-firebase/messaging";
 
+// ✅ Modular imports (sesuai v22+)
 
 export default function NotificationInitializer() {
   // Setup handler notifikasi
-  const { user } = useAuth(); // dari AuthContext
+  const { user, logout } = useAuth(); // dari AuthContext
   const { addNotification } = useNotificationStore();
 
   // Ambil token FCM (opsional, hanya untuk log)
@@ -23,56 +29,42 @@ export default function NotificationInitializer() {
       return;
     }
 
-    // if (user?.id) {
-    //   syncDeviceToken({ userId: user.id });
-    // }
-
     const registerDeviceToken = async () => {
       try {
-        // 1. Minta izin & ambil FCM token
-        if (!messaging().isSupported()) return;
-        const authStatus = await messaging().requestPermission();
-        if (authStatus === messaging.AuthorizationStatus.AUTHORIZED) {
-          const token = await messaging().getToken();
-          console.log("✅ FCM Token:", token);
-        } else {
-          console.warn("Izin notifikasi ditolak");
-          return;
-        }
-        const fcmToken = await messaging().getToken();
-        if (!fcmToken) {
-          console.warn("Gagal mendapatkan FCM token");
+        // ✅ Dapatkan instance messaging
+        const messagingInstance = messaging();
+
+        // ✅ Gunakan instance sebagai argumen
+        const supported = await isSupported(messagingInstance);
+        if (!supported) {
+          console.log("‼️ FCM tidak didukung");
           return;
         }
 
-        // 2. Ambil info device
+        const authStatus = await requestPermission(messagingInstance);
+        if (authStatus !== AuthorizationStatus.AUTHORIZED) {
+          console.warn("Izin telah ditolak");
+          return;
+        }
+
+        const fcmToken = await getToken(messagingInstance);
+        if (!fcmToken) {
+          logout();
+          return;
+        }
+
+        console.log("✅ FCM Token:", fcmToken);
+
         const platform = Platform.OS; // "ios" | "android"
-        // ? await Device.getUdid()
-        // : "unknown";
         const model = Device.modelName || "unknown";
         const appVersion =
           (Application.nativeApplicationVersion || "unknown") +
           "-" +
           (Application.nativeBuildVersion || "unknown");
         const deviceId =
-          Device.osInternalBuildId || Device.modelName + "-" + Date.now();
+          Device.osInternalBuildId || Device.modelName || "unknown";
 
-        console.log(
-          "📱 Device info:",
-          JSON.stringify(
-            {
-              fcmToken,
-              platform,
-              deviceId,
-              model,
-              appVersion,
-            },
-            null,
-            2
-          )
-        );
-
-        // 3. Kirim ke backend
+        // Kirim ke backend
         await apiDeviceRegisterToken({
           data: {
             fcmToken,
@@ -109,7 +101,7 @@ export default function NotificationInitializer() {
     }
 
     console.log("📥 Menambahkan ke store:", { title, body, safeData });
-    addNotification({ title, body, data: safeData });
+    addNotification({ title, body, data: safeData, type: "notification" });
     console.log("✅ Notifikasi ditambahkan ke state");
   };
 

components/_Icon/IconComponent.tsx

@@ -98,13 +98,14 @@ export const IconView = ({
   );
 };
 
-export const IconDot = ({ size, color }: { size?: number; color?: string }) => {
+export const IconDot = ({ size, color, onPress }: { size?: number; color?: string , onPress?: () => void}) => {
   return (
     <>
       <Ionicons
         name="ellipsis-vertical"
         size={size || ICON_SIZE_MEDIUM}
         color={color || MainColor.darkblue}
+        onPress={onPress}
       />
     </>
   );

components/_Icon/IconPlus.tsx

@@ -4,12 +4,21 @@ import { Octicons } from "@expo/vector-icons";
 
 export { IconPlus };
 
-function IconPlus({ color, size }: { color?: string; size?: number }) {
+function IconPlus({
+  color,
+  size,
+  onPress,
+}: {
+  color?: string;
+  size?: number;
+  onPress?: () => void;
+}) {
   return (
     <Octicons
       name="plus-circle"
       size={size || ICON_SIZE_MEDIUM}
       color={color || MainColor.white}
+      onPress={onPress}
     />
   );
 }

context/AuthContext.tsx

@@ -4,11 +4,13 @@ import {
   apiRegister,
   apiValidationCode,
 } from "@/service/api-config";
+import { apiDeviceTokenDeleted } from "@/service/api-device-token";
 import { IUser } from "@/types/User";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { router } from "expo-router";
 import { createContext, useEffect, useState } from "react";
 import Toast from "react-native-toast-message";
+import * as Device from "expo-device";
 
 // --- Types ---
 type AuthContextType = {
@@ -76,7 +78,6 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       const response = await apiLogin({ nomor: nomor });
       console.log("[RESPONSE AUTH]", JSON.stringify(response));
 
-
       if (response.success) {
         console.log("[Keluar provider]", nomor);
         Toast.show({
@@ -139,13 +140,15 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
         await AsyncStorage.setItem("userData", JSON.stringify(dataUser));
 
         if (response.active) {
-          if (response.roleId === "1") {
-            router.replace("/(application)/(user)/home");
-            return;
-          } else {
-            router.replace("/(application)/admin/dashboard");
-            return;
-          }
+          // if (response.roleId === "1") {
+          //   router.replace("/(application)/(user)/home");
+          //   return;
+          // } else {
+          //   router.replace("/(application)/admin/dashboard");
+          //   return;
+          // }
+          router.replace("/(application)/(user)/home");
+          return;
         } else {
           router.replace("/(application)/(user)/waiting-room");
           return;
@@ -280,9 +283,12 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
       setIsLoading(true);
       setToken(null);
       setUser(null);
+
+      const deviceId = Device.osInternalBuildId || Device.modelName || "unknown";
+
       await AsyncStorage.removeItem("authToken");
       await AsyncStorage.removeItem("userData");
-      setIsLoading(false);
+      await apiDeviceTokenDeleted({ userId: user?.id as any, deviceId });
 
       Toast.show({
         type: "success",

hooks/use-foreground-notifications.ts

@@ -1,5 +1,7 @@
 import { useEffect } from "react";
-import messaging, {
+import {
+  getMessaging,
+  onMessage,
   FirebaseMessagingTypes,
 } from "@react-native-firebase/messaging";
 
@@ -10,7 +12,9 @@ export function useForegroundNotifications(
   onMessageReceived: (message: RemoteMessage) => void
 ) {
   useEffect(() => {
-    const unsubscribe = messaging().onMessage((remoteMessage) => {
+    const messaging = getMessaging();
+
+    const unsubscribe = onMessage(messaging, (remoteMessage) => {
       console.log(
         "🔔 Notifikasi diterima saat app aktif:",
         JSON.stringify(remoteMessage, null, 2)
@@ -20,4 +24,4 @@ export function useForegroundNotifications(
 
     return unsubscribe;
   }, [onMessageReceived]);
-}
+}

hooks/use-notification-store.tsx

@@ -1,52 +1,134 @@
 // hooks/useNotificationStore.ts
-import { createContext, useContext, useState, ReactNode } from 'react';
-import type { FirebaseMessagingTypes } from '@react-native-firebase/messaging';
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { useAuth } from "./use-auth";
+import {
+  apiGetNotificationsById,
+  apiNotificationUnreadCount,
+} from "@/service/api-notifications";
 
 type AppNotification = {
   id: string;
   title: string;
   body: string;
   data?: Record<string, string>;
-  read: boolean;
+  isRead: boolean;
   timestamp: number;
+  type: "notification" | "trigger";
+  // untuk id dari setiap kategori app
+  appId?: string;
+  kategoriApp?:
+    | "JOB"
+    | "VOTING"
+    | "EVENT"
+    | "DONASI"
+    | "INVESTASI"
+    | "COLLABORATION"
+    | "FORUM"
+    | "ACCESS"; // Untuk trigger akses user;
 };
 
-const NotificationContext = createContext<{
+type NotificationContextType = {
   notifications: AppNotification[];
-  addNotification: (notif: Omit<AppNotification, 'id' | 'read' | 'timestamp'>) => void;
+  unreadCount: number;
+  addNotification: (
+    notif: Omit<AppNotification, "id" | "isRead" | "timestamp">
+  ) => void;
   markAsRead: (id: string) => void;
-}>({
+  syncUnreadCount: () => Promise<void>;
+};
+
+const NotificationContext = createContext<NotificationContextType>({
   notifications: [],
+  unreadCount: 0,
   addNotification: () => {},
   markAsRead: () => {},
+  syncUnreadCount: async () => {},
 });
 
 export const NotificationProvider = ({ children }: { children: ReactNode }) => {
+  const { user } = useAuth();
   const [notifications, setNotifications] = useState<AppNotification[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
 
-  const addNotification = (notif: Omit<AppNotification, 'id' | 'read' | 'timestamp'>) => {
-    setNotifications(prev => [
+  console.log(
+    "🚀 Notifications Masuk:",
+    JSON.stringify(notifications, null, 2)
+  );
+
+  // Sync unread count dari backend saat provider di-mount
+  useEffect(() => {
+    fetchUnreadCount();
+  }, [user?.id]);
+
+  const fetchUnreadCount = async () => {
+    try {
+      const count = await apiNotificationUnreadCount({
+        id: user?.id as any,
+        role: user?.masterUserRoleId as any
+      }); // ← harus return number
+      const result = count.data;
+      console.log("📖 Unread count:", result);
+      setUnreadCount(result);
+    } catch (error) {
+      console.error("Gagal fetch unread count:", error);
+    }
+  };
+
+  const addNotification = (
+    notif: Omit<AppNotification, "id" | "isRead" | "timestamp">
+  ) => {
+    setNotifications((prev) => [
       {
         ...notif,
         id: Date.now().toString(),
-        read: false,
+        isRead: false,
         timestamp: Date.now(),
       },
       ...prev,
     ]);
+
+    setUnreadCount((prev) => prev + 1);
   };
 
   const markAsRead = (id: string) => {
-    setNotifications(prev =>
-      prev.map(n => (n.id === id ? { ...n, read: true } : n))
+    setNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
     );
   };
 
+  const syncUnreadCount = async () => {
+    try {
+      const count = await apiNotificationUnreadCount({
+        id: user?.id as any,
+        role: user?.masterUserRoleId as any,
+      }); // ← harus return number
+      const result = count.data;
+      console.log("📖 Unread count sync:", result);
+      setUnreadCount(result);
+    } catch (error) {
+      console.warn("⚠️ Gagal sync unread count:", error);
+    }
+  };
+
   return (
-    <NotificationContext.Provider value={{ notifications, addNotification, markAsRead }}>
+    <NotificationContext.Provider
+      value={{
+        notifications,
+        addNotification,
+        markAsRead,
+        unreadCount,
+        syncUnreadCount,
+      }}
+    >
       {children}
     </NotificationContext.Provider>
   );
 };
 
-export const useNotificationStore = () => useContext(NotificationContext);
+export const useNotificationStore = () => useContext(NotificationContext);

hooks/use-notification-store.tsx.back

@@ -0,0 +1,113 @@
+// hooks/useNotificationStore.ts
+import { apiGetNotificationsById } from "@/service/api-notifications";
+import { createContext, ReactNode, useContext, useState, useEffect } from "react";
+import { useAuth } from "./use-auth";
+
+type AppNotification = {
+  id: string;
+  title: string;
+  body: string;
+  data?: Record<string, string>;
+  isRead: boolean;
+  timestamp: number;
+  type: "notification" | "trigger";
+  appId?: string;
+  kategoriApp?:
+    | "JOB"
+    | "VOTING"
+    | "EVENT"
+    | "DONASI"
+    | "INVESTASI"
+    | "COLLABORATION"
+    | "FORUM"
+    | "ACCESS";
+};
+
+type NotificationContextType = {
+  notifications: AppNotification[];
+  unreadCount: number;
+  addNotification: (
+    notif: Omit<AppNotification, "id" | "isRead" | "timestamp">
+  ) => void;
+  markAsRead: (id: string) => void;
+  syncUnreadCount: () => Promise<void>;
+};
+
+const NotificationContext = createContext<NotificationContextType>({
+  notifications: [],
+  unreadCount: 0,
+  addNotification: () => {},
+  markAsRead: () => {},
+  syncUnreadCount: async () => {},
+});
+
+export const NotificationProvider = ({ children }: { children: ReactNode }) => {
+  const {user} = useAuth()
+  const [notifications, setNotifications] = useState<AppNotification[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  // 🔔 Sync unread count dari backend saat provider di-mount
+  useEffect(() => {
+    const fetchUnreadCount = async () => {
+      try {
+        const count = await apiGetNotificationsById({
+          id: user?.id as any,
+          category: "count-as-unread"
+        }); // ← harus return number
+        const result = count.data
+        setUnreadCount(result);
+      } catch (error) {
+        console.erro("⚠️ Gagal fetch unread count:", error);
+      }
+    };
+
+    fetchUnreadCount();
+  }, []);
+
+  const addNotification = (
+    notif: Omit<AppNotification, "id" | "isRead" | "timestamp">
+  ) => {
+    setNotifications((prev) => [
+      {
+        ...notif,
+        id: Date.now().toString(),
+        isRead: false,
+        timestamp: Date.now(),
+      },
+      ...prev,
+    ]);
+    // Tambahkan ke unread count (untuk notifikasi foreground)
+    setUnreadCount((prev) => prev + 1);
+  };
+
+  const markAsRead = (id: string) => {
+    setNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
+    );
+    // Kurangi unread count
+    setUnreadCount((prev) => Math.max(0, prev - 1));
+  };
+
+  const syncUnreadCount = async () => {
+    try {
+        const count = await apiGetNotificationsById({
+          id: user?.id as any,
+          category: "count-as-unread"
+        }); // ← harus return number
+        const result = count.data
+        setUnreadCount(result);
+    } catch (error) {
+      console.warn("⚠️ Gagal sync unread count:", error);
+    }
+  };
+
+  return (
+    <NotificationContext.Provider
+      value={{ notifications, unreadCount, addNotification, markAsRead, syncUnreadCount }}
+    >
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotificationStore = () => useContext(NotificationContext);

ios/HIPMIBadungConnect/Info.plist

@@ -39,7 +39,7 @@
       </dict>
     </array>
     <key>CFBundleVersion</key>
-    <string>15</string>
+    <string>17</string>
     <key>ITSAppUsesNonExemptEncryption</key>
     <false/>
     <key>LSMinimumSystemVersion</key>

screens/Admin/AdminNotificationBell.tsx

@@ -0,0 +1,41 @@
+// components/HeaderBell.tsx
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { useNotificationStore } from "@/hooks/use-notification-store";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Text, View } from "react-native";
+
+export default function AdminNotificationBell() {
+  const { unreadCount } = useNotificationStore();
+
+  return (
+    <View style={{ position: "relative" }}>
+      <Ionicons
+        name="notifications"
+        size={ICON_SIZE_SMALL}
+        color={MainColor.white}
+      />
+      {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>
+  );
+}

screens/Home/HeaderBell.tsx

@@ -1,14 +1,17 @@
 // components/HeaderBell.tsx
-import { Ionicons } from "@expo/vector-icons";
-import { View, Text } from "react-native";
-import { router } from "expo-router";
-import { useNotificationStore } from "@/hooks/use-notification-store";
 import { MainColor } from "@/constants/color-palet";
+import { useAuth } from "@/hooks/use-auth";
+import { useNotificationStore } from "@/hooks/use-notification-store";
+import { Ionicons } from "@expo/vector-icons";
+import { router } from "expo-router";
+import { Text, View } from "react-native";
 
 export default function HeaderBell() {
-  const { notifications } = useNotificationStore();
-  const unreadCount = notifications.filter((n) => !n.read).length;
-  console.log("NOTIF:", JSON.stringify(notifications, null, 2));
+  const { unreadCount } = useNotificationStore();
+  const { user } = useAuth();
+
+  const pathDetector =
+    user?.masterUserRoleId === "1" ? "/notifications" : "/admin/notification";
 
   return (
     <View style={{ position: "relative" }}>
@@ -17,7 +20,7 @@ export default function HeaderBell() {
         size={20}
         color={MainColor.yellow}
         onPress={() => {
-          router.push("/notifications");
+          router.push(pathDetector);
         }}
       />
       {unreadCount > 0 && (

service/api-device-token.ts

@@ -0,0 +1,51 @@
+import { apiConfig } from "./api-config";
+
+type DeviceTokenData = {
+  fcmToken: string;
+  platform: string;
+  deviceId: string;
+  model: string;
+  appVersion: string;
+  userId: string;
+};
+
+export async function apiDeviceRegisterToken({
+  data,
+}: {
+  data: DeviceTokenData;
+}) {
+  try {
+    const response = await apiConfig.post(`/mobile/auth/device-tokens`, {
+      data: data,
+    });
+
+    return response.data;
+  } catch (error) {
+    console.error("Failed to register device token:", error);
+    throw error;
+  }
+}
+
+export async function apiDeviceTokenDeleted({ userId, deviceId }: { userId: string, deviceId: string }) {
+  try {
+    const response = await apiConfig.delete(
+      `/mobile/auth/device-tokens/${userId}?deviceId=${deviceId}`
+    );
+    console.log("Device token deleted:", response.data);
+    return response.data;
+  } catch (error) {
+    console.error("Failed to delete device token:", error);
+    throw error;
+  }
+}
+
+export async function apiGetAllTokenDevice() {
+  try {
+    const response = await apiConfig.get(`/mobile/auth/device-tokens`);
+    console.log("Device token deleted:", response.data);
+    return response.data;
+  } catch (error) {
+    console.error("Failed to delete device token:", error);
+    throw error;
+  }
+}

service/api-notifications.ts

@@ -1,9 +1,22 @@
 import { apiConfig } from "./api-config";
 
 type NotificationProp = {
-  fcmToken: string;
   title: string;
-  body: Object;
+  body: string;
+  userLoginId: string;
+  appId?: string;
+  status?: string;
+  type?: "announcement" | "trigger";
+  deepLink?: string;
+  kategoriApp?:
+    | "JOB"
+    | "VOTING"
+    | "EVENT"
+    | "DONASI"
+    | "INVESTASI"
+    | "COLLABORATION"
+    | "FORUM"
+    | "ACCESS"; // Untuk trigger akses user;
 };
 
 export async function apiNotificationsSend({
@@ -12,40 +25,46 @@ export async function apiNotificationsSend({
   data: NotificationProp;
 }) {
   try {
-    const response = await apiConfig.post(`/mobile/notifications`, {
+    const response = await apiConfig.post(`/mobile/notification`, {
       data: data,
     });
 
-    console.log("Fecth Notif", response.data);
-
     return response.data;
   } catch (error) {
     throw error;
   }
 }
 
-type DeviceTokenData = {
-  fcmToken: string;
-  platform: string;
-  deviceId: string;
-  model: string;
-  appVersion: string;
-  userId: string;
-};
-
-export async function apiDeviceRegisterToken({
-  data,
+export async function apiGetNotificationsById({
+  id,
+  category,
 }: {
-  data: DeviceTokenData;
+  id: string;
+  category: "count-as-unread" | "all";
 }) {
+  console.log("ID", id);
+  console.log("Category", category);
+
   try {
-    const response = await apiConfig.post(`/mobile/auth/device-tokens`, {
-      data: data,
-    });
-    console.log("Device token registered:", response.data);
+    const response = await apiConfig.get(
+      `/mobile/notification/${id}?category=${category}`
+    );
+
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+}
+
+export async function apiNotificationUnreadCount({ id, role }: { id: string, role: "user" | "admin" }) {
+  try {
+    const response = await apiConfig.get(
+      `/mobile/notification/${id}/unread-count?role=${role}`
+    );
+
+    console.log("Response Unread Count", response.data);
     return response.data;
   } catch (error) {
-    console.error("Failed to register device token:", error);
     throw error;
   }
 }