diff --git a/app/ClientLayout.js b/app/ClientLayout.js
index 9b594f7..1a3645c 100644
--- a/app/ClientLayout.js
+++ b/app/ClientLayout.js
@@ -41,6 +41,7 @@ import { motion, AnimatePresence } from "framer-motion";
import AuthService from "./services/AuthService";
import { UserRole, UserRoleLabels } from "./enums/UserRole";
import "./i18n/config";
+import NotificationHandler from "./components/NotificationHandler";
export default function ClientLayout({ children }) {
const { t, i18n } = useTranslation();
@@ -798,6 +799,7 @@ export default function ClientLayout({ children }) {
)}
+
);
}
diff --git a/app/components/NotificationHandler.js b/app/components/NotificationHandler.js
new file mode 100644
index 0000000..9e34f69
--- /dev/null
+++ b/app/components/NotificationHandler.js
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { requestNotificationPermission, onForegroundMessage } from "../utils/firebase";
+
+export default function NotificationHandler() {
+ const [notification, setNotification] = useState(null);
+
+ useEffect(() => {
+ // Request permission and get token
+ requestNotificationPermission().then((token) => {
+ if (token) {
+ console.log("[Notifications] FCM token obtained");
+ // TODO: Send token to your backend to register the device
+ // e.g. apiFetch('/Notifications/RegisterDevice', { method: 'POST', body: { token } })
+ }
+ });
+
+ // Listen for foreground messages
+ const unsubscribe = onForegroundMessage((payload) => {
+ const title = payload.notification?.title || payload.data?.title || "Sweet Home";
+ const body = payload.notification?.body || payload.data?.body || "";
+ setNotification({ title, body });
+
+ // Auto-dismiss after 5 seconds
+ setTimeout(() => setNotification(null), 5000);
+ });
+
+ return () => unsubscribe();
+ }, []);
+
+ if (!notification) return null;
+
+ return (
+
+
+
+ 🏠
+
+
+
{notification.title}
+
{notification.body}
+
+
+
+