@propknot/shared-ui 1.0.6 → 1.0.8

package/dist/index.mjs

@@ -1489,7 +1489,6 @@ var CustomThemeProvider = ({ children }) => {
       if (!event.origin.startsWith("http://localhost:")) return;
       const { type, theme } = event.data;
       if (type === "THEME_CHANGE" && theme && ["light", "dark"].includes(theme)) {
-        console.log("Embedded app received theme change:", theme);
         setCurrentTheme(theme);
       }
     };
@@ -1513,7 +1512,7 @@ var CustomThemeProvider = ({ children }) => {
     const newTheme = currentTheme === "light" ? "dark" : "light";
     setCurrentTheme(newTheme);
     try {
-      await api_default.put("/auth/theme-preference", { themePreference: newTheme });
+      await api_default.put("/users/me", { themePreference: newTheme });
     } catch (error) {
       console.error("Failed to save theme preference:", error);
       setCurrentTheme(currentTheme);
@@ -1523,7 +1522,7 @@ var CustomThemeProvider = ({ children }) => {
     if (!canModifyTheme || !["light", "dark"].includes(themeKey)) return;
     setCurrentTheme(themeKey);
     try {
-      await api_default.put("/auth/theme-preference", { themePreference: themeKey });
+      await api_default.put("/users/me", { themePreference: themeKey });
     } catch (error) {
       console.error("Failed to save theme preference:", error);
       setCurrentTheme(currentTheme);
@@ -1533,7 +1532,7 @@ var CustomThemeProvider = ({ children }) => {
     if (!canModifyTheme) return;
     setCurrentTheme("light");
     try {
-      await api_default.put("/auth/theme-preference", { themePreference: "light" });
+      await api_default.put("/users/me", { themePreference: "light" });
     } catch (error) {
       console.error("Failed to save theme preference:", error);
       setCurrentTheme(currentTheme);
@@ -3320,23 +3319,430 @@ var NotificationManager = () => {
 };
 var NotificationManager_default = NotificationManager;
 
-// src/components/ErrorBoundary/ErrorBoundary.js
-import React14 from "react";
+// src/components/Notifications/NotificationBell.js
+import React14, { useState as useState6, useEffect as useEffect5, useCallback as useCallback2 } from "react";
 import {
+  IconButton as IconButton3,
+  Badge as Badge2,
+  Menu as Menu2,
+  MenuItem as MenuItem2,
   Box as Box9,
   Typography as Typography7,
+  Divider as Divider2,
+  Avatar as Avatar2,
+  ListItemText as ListItemText2,
+  ListItemAvatar,
+  List as List2,
+  ListItem as ListItem2,
   Button as Button3,
+  Chip as Chip2,
+  CircularProgress as CircularProgress3,
+  Alert as Alert2
+} from "@mui/material";
+import {
+  Notifications as NotificationsIcon,
+  NotificationsNone,
+  CheckCircle as CheckCircle2,
+  Warning as Warning2,
+  Error as ErrorIcon,
+  Info as Info2,
+  Message,
+  Assignment,
+  Payment,
+  Home,
+  Build,
+  Close as Close2,
+  DoneAll,
+  Settings as SettingsIcon
+} from "@mui/icons-material";
+import { formatDistanceToNow } from "date-fns";
+var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 }) => {
+  const [anchorEl, setAnchorEl] = useState6(null);
+  const [notifications, setNotifications] = useState6([]);
+  const [unreadCount, setUnreadCount] = useState6(0);
+  const [loading, setLoading] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [page, setPage] = useState6(1);
+  const [hasMore, setHasMore] = useState6(true);
+  const { socket, isConnected } = useSocket2 ? useSocket2() : { socket: null, isConnected: false };
+  const { user } = useAuth2 ? useAuth2() : { user: null };
+  const open = Boolean(anchorEl);
+  const fetchNotifications = useCallback2(async (pageNum = 1, append = false) => {
+    if (!api2) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api2.get("/notifications", {
+        params: {
+          page: pageNum,
+          limit: 20,
+          sort: "-createdAt"
+        }
+      });
+      const newNotifications = response.data.notifications || [];
+      if (append) {
+        setNotifications((prev) => [...prev, ...newNotifications]);
+      } else {
+        setNotifications(newNotifications);
+      }
+      setHasMore(newNotifications.length === 20);
+      setUnreadCount(response.data.unreadCount || 0);
+    } catch (err) {
+      console.error("Failed to fetch notifications:", err);
+      setError("Failed to load notifications");
+    } finally {
+      setLoading(false);
+    }
+  }, [api2]);
+  const fetchUnreadCount = useCallback2(async () => {
+    if (!api2) return;
+    try {
+      const response = await api2.get("/notifications/unread");
+      setUnreadCount(response.data.count || 0);
+    } catch (err) {
+      console.error("Failed to fetch unread count:", err);
+    }
+  }, [api2]);
+  useEffect5(() => {
+    fetchNotifications();
+    fetchUnreadCount();
+  }, [fetchNotifications, fetchUnreadCount]);
+  useEffect5(() => {
+    if (!socket || !isConnected) return;
+    const handleNewNotification = (notification) => {
+      setNotifications((prev) => [notification, ...prev]);
+      setUnreadCount((prev) => prev + 1);
+    };
+    const handleNotificationRead = (notificationId) => {
+      setNotifications(
+        (prev) => prev.map((n) => n._id === notificationId ? { ...n, read: true } : n)
+      );
+      setUnreadCount((prev) => Math.max(0, prev - 1));
+    };
+    socket.on("notification", handleNewNotification);
+    socket.on("notification:read", handleNotificationRead);
+    return () => {
+      socket.off("notification", handleNewNotification);
+      socket.off("notification:read", handleNotificationRead);
+    };
+  }, [socket, isConnected]);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+    if (notifications.length === 0) {
+      fetchNotifications();
+    }
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleMarkAsRead = async (notificationId) => {
+    if (!api2) return;
+    try {
+      await api2.put(`/notifications/${notificationId}/read`);
+      setNotifications(
+        (prev) => prev.map((n) => n._id === notificationId ? { ...n, read: true, readAt: /* @__PURE__ */ new Date() } : n)
+      );
+      setUnreadCount((prev) => Math.max(0, prev - 1));
+    } catch (err) {
+      console.error("Failed to mark notification as read:", err);
+    }
+  };
+  const handleMarkAllAsRead = async () => {
+    if (!api2) return;
+    try {
+      await api2.put("/notifications/mark-all-read");
+      setNotifications(
+        (prev) => prev.map((n) => ({ ...n, read: true, readAt: /* @__PURE__ */ new Date() }))
+      );
+      setUnreadCount(0);
+    } catch (err) {
+      console.error("Failed to mark all as read:", err);
+    }
+  };
+  const handleNotificationClick = async (notification) => {
+    if (!notification.read) {
+      await handleMarkAsRead(notification._id);
+    }
+    if (notification.actionUrl) {
+      window.location.href = notification.actionUrl;
+    }
+    handleClose();
+  };
+  const handleLoadMore = () => {
+    const nextPage = page + 1;
+    setPage(nextPage);
+    fetchNotifications(nextPage, true);
+  };
+  const getNotificationIcon = (type) => {
+    const iconProps = { fontSize: "small" };
+    switch (type) {
+      case "TICKET_CREATED":
+      case "TICKET_UPDATED":
+      case "TICKET_ASSIGNED":
+      case "TICKET_RESOLVED":
+      case "TICKET_COMMENTED":
+      case "TICKET_STATUS_CHANGED":
+        return /* @__PURE__ */ React14.createElement(Assignment, { ...iconProps });
+      case "MESSAGE_RECEIVED":
+      case "MENTION_RECEIVED":
+        return /* @__PURE__ */ React14.createElement(Message, { ...iconProps });
+      case "PAYMENT_DUE":
+      case "PAYMENT_OVERDUE":
+        return /* @__PURE__ */ React14.createElement(Payment, { ...iconProps });
+      case "PROPERTY_UPDATED":
+      case "LEASE_EXPIRING":
+        return /* @__PURE__ */ React14.createElement(Home, { ...iconProps });
+      case "APPLIANCE_MAINTENANCE_DUE":
+      case "MAINTENANCE_SCHEDULED":
+        return /* @__PURE__ */ React14.createElement(Build, { ...iconProps });
+      case "SYSTEM_ALERT":
+        return /* @__PURE__ */ React14.createElement(Warning2, { ...iconProps });
+      case "SUCCESS":
+        return /* @__PURE__ */ React14.createElement(CheckCircle2, { ...iconProps });
+      case "ERROR":
+        return /* @__PURE__ */ React14.createElement(ErrorIcon, { ...iconProps });
+      case "WARNING":
+        return /* @__PURE__ */ React14.createElement(Warning2, { ...iconProps });
+      case "INFO":
+      default:
+        return /* @__PURE__ */ React14.createElement(Info2, { ...iconProps });
+    }
+  };
+  const getNotificationColor = (type) => {
+    if ((type == null ? void 0 : type.includes("ERROR")) || (type == null ? void 0 : type.includes("OVERDUE"))) return "error.main";
+    if ((type == null ? void 0 : type.includes("WARNING")) || (type == null ? void 0 : type.includes("DUE"))) return "warning.main";
+    if ((type == null ? void 0 : type.includes("SUCCESS")) || (type == null ? void 0 : type.includes("RESOLVED"))) return "success.main";
+    return "primary.main";
+  };
+  const getPriorityChip = (priority) => {
+    if (!priority || priority === "NORMAL" || priority === "LOW") return null;
+    const colors = {
+      HIGH: "warning",
+      URGENT: "error"
+    };
+    return /* @__PURE__ */ React14.createElement(
+      Chip2,
+      {
+        label: priority,
+        size: "small",
+        color: colors[priority] || "default",
+        sx: { ml: 1, height: 20, fontSize: "0.7rem" }
+      }
+    );
+  };
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+    IconButton3,
+    {
+      color: "inherit",
+      onClick: handleClick,
+      sx: {
+        ml: 1,
+        "&:hover": {
+          bgcolor: "action.hover"
+        }
+      }
+    },
+    /* @__PURE__ */ React14.createElement(
+      Badge2,
+      {
+        badgeContent: unreadCount,
+        color: "error",
+        max: 99
+      },
+      unreadCount > 0 ? /* @__PURE__ */ React14.createElement(NotificationsIcon, null) : /* @__PURE__ */ React14.createElement(NotificationsNone, null)
+    )
+  ), /* @__PURE__ */ React14.createElement(
+    Menu2,
+    {
+      anchorEl,
+      open,
+      onClose: handleClose,
+      PaperProps: {
+        sx: {
+          width: 420,
+          maxHeight: 600,
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column"
+        }
+      },
+      transformOrigin: { horizontal: "right", vertical: "top" },
+      anchorOrigin: { horizontal: "right", vertical: "bottom" }
+    },
+    /* @__PURE__ */ React14.createElement(
+      Box9,
+      {
+        sx: {
+          p: 2,
+          pb: 1.5,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          borderBottom: "1px solid",
+          borderColor: "divider"
+        }
+      },
+      /* @__PURE__ */ React14.createElement(Box9, { sx: { display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ React14.createElement(NotificationsIcon, { color: "primary" }), /* @__PURE__ */ React14.createElement(Typography7, { variant: "h6", sx: { fontWeight: 600 } }, "Notifications"), unreadCount > 0 && /* @__PURE__ */ React14.createElement(
+        Chip2,
+        {
+          label: unreadCount,
+          size: "small",
+          color: "primary",
+          sx: { height: 22, fontSize: "0.75rem" }
+        }
+      )),
+      /* @__PURE__ */ React14.createElement(Box9, null, unreadCount > 0 && /* @__PURE__ */ React14.createElement(
+        Button3,
+        {
+          size: "small",
+          startIcon: /* @__PURE__ */ React14.createElement(DoneAll, null),
+          onClick: handleMarkAllAsRead,
+          sx: { textTransform: "none", fontSize: "0.75rem" }
+        },
+        "Mark all read"
+      ), /* @__PURE__ */ React14.createElement(IconButton3, { size: "small", onClick: handleClose }, /* @__PURE__ */ React14.createElement(Close2, { fontSize: "small" })))
+    ),
+    error && /* @__PURE__ */ React14.createElement(Alert2, { severity: "error", sx: { m: 2 } }, error),
+    /* @__PURE__ */ React14.createElement(
+      Box9,
+      {
+        sx: {
+          flex: 1,
+          overflow: "auto",
+          maxHeight: 450
+        }
+      },
+      loading && notifications.length === 0 ? /* @__PURE__ */ React14.createElement(Box9, { sx: { display: "flex", justifyContent: "center", p: 4 } }, /* @__PURE__ */ React14.createElement(CircularProgress3, { size: 32 })) : notifications.length === 0 ? /* @__PURE__ */ React14.createElement(
+        Box9,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            p: 4,
+            textAlign: "center"
+          }
+        },
+        /* @__PURE__ */ React14.createElement(NotificationsNone, { sx: { fontSize: 64, color: "text.secondary", mb: 2 } }),
+        /* @__PURE__ */ React14.createElement(Typography7, { variant: "body1", color: "text.secondary", sx: { fontWeight: 500 } }, "No notifications yet"),
+        /* @__PURE__ */ React14.createElement(Typography7, { variant: "body2", color: "text.secondary" }, "You're all caught up!")
+      ) : /* @__PURE__ */ React14.createElement(List2, { sx: { p: 0 } }, notifications.map((notification, index) => /* @__PURE__ */ React14.createElement(React14.Fragment, { key: notification._id }, /* @__PURE__ */ React14.createElement(
+        ListItem2,
+        {
+          button: true,
+          onClick: () => handleNotificationClick(notification),
+          sx: {
+            py: 1.5,
+            px: 2,
+            bgcolor: notification.read ? "transparent" : "action.hover",
+            "&:hover": {
+              bgcolor: notification.read ? "action.hover" : "action.selected"
+            },
+            borderLeft: notification.read ? "none" : "3px solid",
+            borderLeftColor: getNotificationColor(notification.type),
+            transition: "all 0.2s"
+          }
+        },
+        /* @__PURE__ */ React14.createElement(ListItemAvatar, null, /* @__PURE__ */ React14.createElement(
+          Avatar2,
+          {
+            sx: {
+              bgcolor: notification.read ? "grey.300" : getNotificationColor(notification.type),
+              width: 40,
+              height: 40
+            }
+          },
+          getNotificationIcon(notification.type)
+        )),
+        /* @__PURE__ */ React14.createElement(
+          ListItemText2,
+          {
+            primary: /* @__PURE__ */ React14.createElement(Box9, { sx: { display: "flex", alignItems: "center", mb: 0.5 } }, /* @__PURE__ */ React14.createElement(
+              Typography7,
+              {
+                variant: "body2",
+                sx: {
+                  fontWeight: notification.read ? 400 : 600,
+                  flex: 1
+                }
+              },
+              notification.title
+            ), getPriorityChip(notification.priority)),
+            secondary: /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+              Typography7,
+              {
+                variant: "body2",
+                color: "text.secondary",
+                sx: {
+                  display: "-webkit-box",
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden",
+                  mb: 0.5
+                }
+              },
+              notification.message
+            ), /* @__PURE__ */ React14.createElement(Typography7, { variant: "caption", color: "text.secondary" }, formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true })))
+          }
+        )
+      ), index < notifications.length - 1 && /* @__PURE__ */ React14.createElement(Divider2, null)))),
+      hasMore && notifications.length > 0 && /* @__PURE__ */ React14.createElement(Box9, { sx: { p: 2, textAlign: "center", borderTop: "1px solid", borderColor: "divider" } }, /* @__PURE__ */ React14.createElement(
+        Button3,
+        {
+          onClick: handleLoadMore,
+          disabled: loading,
+          size: "small",
+          sx: { textTransform: "none" }
+        },
+        loading ? "Loading..." : "Load more"
+      ))
+    ),
+    /* @__PURE__ */ React14.createElement(
+      Box9,
+      {
+        sx: {
+          p: 1.5,
+          borderTop: "1px solid",
+          borderColor: "divider",
+          textAlign: "center"
+        }
+      },
+      /* @__PURE__ */ React14.createElement(
+        Button3,
+        {
+          size: "small",
+          startIcon: /* @__PURE__ */ React14.createElement(SettingsIcon, null),
+          onClick: () => {
+            window.location.href = "/settings?tab=general";
+            handleClose();
+          },
+          sx: { textTransform: "none" }
+        },
+        "Notification Settings"
+      )
+    )
+  ));
+};
+var NotificationBell_default = NotificationBell;
+
+// src/components/ErrorBoundary/ErrorBoundary.js
+import React15 from "react";
+import {
+  Box as Box10,
+  Typography as Typography8,
+  Button as Button4,
   Card as Card2,
   CardContent as CardContent2,
-  Alert as Alert2,
+  Alert as Alert3,
   Stack as Stack6
 } from "@mui/material";
 import {
   Refresh as Refresh2,
   BugReport,
-  Home
+  Home as Home2
 } from "@mui/icons-material";
-var ErrorBoundary = class extends React14.Component {
+var ErrorBoundary = class extends React15.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -3377,8 +3783,8 @@ var ErrorBoundary = class extends React14.Component {
     if (this.state.hasError) {
       const isNavigationError = (_b = (_a = this.state.error) == null ? void 0 : _a.message) == null ? void 0 : _b.includes("getBoundingClientRect");
       const isDOMError = ((_d = (_c = this.state.error) == null ? void 0 : _c.message) == null ? void 0 : _d.includes("null")) || ((_f = (_e = this.state.error) == null ? void 0 : _e.message) == null ? void 0 : _f.includes("undefined"));
-      return /* @__PURE__ */ React14.createElement(
-        Box9,
+      return /* @__PURE__ */ React15.createElement(
+        Box10,
         {
           sx: {
             display: "flex",
@@ -3389,32 +3795,32 @@ var ErrorBoundary = class extends React14.Component {
             p: 3
           }
         },
-        /* @__PURE__ */ React14.createElement(Card2, { sx: { maxWidth: 600, width: "100%" } }, /* @__PURE__ */ React14.createElement(CardContent2, null, /* @__PURE__ */ React14.createElement(Stack6, { spacing: 3, alignItems: "center" }, /* @__PURE__ */ React14.createElement(BugReport, { sx: { fontSize: 64, color: "error.main" } }), /* @__PURE__ */ React14.createElement(Typography7, { variant: "h5", component: "h2", textAlign: "center" }, "Oops! Something went wrong"), /* @__PURE__ */ React14.createElement(Alert2, { severity: "error", sx: { width: "100%" } }, /* @__PURE__ */ React14.createElement(Typography7, { variant: "body2" }, isNavigationError && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("strong", null, "UI Component Error:"), " A component tried to access an element before it was ready. This is usually temporary."), isDOMError && !isNavigationError && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("strong", null, "DOM Error:"), " A component couldn't find an expected element. This might be due to rapid state changes."), !isNavigationError && !isDOMError && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("strong", null, "Application Error:"), " An unexpected error occurred while rendering the component."))), process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ React14.createElement(Alert2, { severity: "warning", sx: { width: "100%" } }, /* @__PURE__ */ React14.createElement(Typography7, { variant: "body2", component: "div" }, /* @__PURE__ */ React14.createElement("strong", null, "Debug Info:"), /* @__PURE__ */ React14.createElement("br", null), /* @__PURE__ */ React14.createElement("code", { style: { fontSize: "0.75rem", wordBreak: "break-word" } }, this.state.error.toString()))), /* @__PURE__ */ React14.createElement(Stack6, { direction: "row", spacing: 2 }, /* @__PURE__ */ React14.createElement(
-          Button3,
+        /* @__PURE__ */ React15.createElement(Card2, { sx: { maxWidth: 600, width: "100%" } }, /* @__PURE__ */ React15.createElement(CardContent2, null, /* @__PURE__ */ React15.createElement(Stack6, { spacing: 3, alignItems: "center" }, /* @__PURE__ */ React15.createElement(BugReport, { sx: { fontSize: 64, color: "error.main" } }), /* @__PURE__ */ React15.createElement(Typography8, { variant: "h5", component: "h2", textAlign: "center" }, "Oops! Something went wrong"), /* @__PURE__ */ React15.createElement(Alert3, { severity: "error", sx: { width: "100%" } }, /* @__PURE__ */ React15.createElement(Typography8, { variant: "body2" }, isNavigationError && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("strong", null, "UI Component Error:"), " A component tried to access an element before it was ready. This is usually temporary."), isDOMError && !isNavigationError && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("strong", null, "DOM Error:"), " A component couldn't find an expected element. This might be due to rapid state changes."), !isNavigationError && !isDOMError && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("strong", null, "Application Error:"), " An unexpected error occurred while rendering the component."))), process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ React15.createElement(Alert3, { severity: "warning", sx: { width: "100%" } }, /* @__PURE__ */ React15.createElement(Typography8, { variant: "body2", component: "div" }, /* @__PURE__ */ React15.createElement("strong", null, "Debug Info:"), /* @__PURE__ */ React15.createElement("br", null), /* @__PURE__ */ React15.createElement("code", { style: { fontSize: "0.75rem", wordBreak: "break-word" } }, this.state.error.toString()))), /* @__PURE__ */ React15.createElement(Stack6, { direction: "row", spacing: 2 }, /* @__PURE__ */ React15.createElement(
+          Button4,
           {
             variant: "contained",
-            startIcon: /* @__PURE__ */ React14.createElement(Refresh2, null),
+            startIcon: /* @__PURE__ */ React15.createElement(Refresh2, null),
             onClick: this.handleRetry,
             color: "primary"
           },
           "Try Again"
-        ), /* @__PURE__ */ React14.createElement(
-          Button3,
+        ), /* @__PURE__ */ React15.createElement(
+          Button4,
           {
             variant: "outlined",
-            startIcon: /* @__PURE__ */ React14.createElement(Refresh2, null),
+            startIcon: /* @__PURE__ */ React15.createElement(Refresh2, null),
             onClick: this.handleReload
           },
           "Reload Page"
-        ), this.props.onNavigateHome && /* @__PURE__ */ React14.createElement(
-          Button3,
+        ), this.props.onNavigateHome && /* @__PURE__ */ React15.createElement(
+          Button4,
           {
             variant: "outlined",
-            startIcon: /* @__PURE__ */ React14.createElement(Home, null),
+            startIcon: /* @__PURE__ */ React15.createElement(Home2, null),
             onClick: this.props.onNavigateHome
           },
           "Go Home"
-        )), /* @__PURE__ */ React14.createElement(Typography7, { variant: "body2", color: "text.secondary", textAlign: "center" }, "If this problem persists, try refreshing the page or clearing your browser cache. The error has been logged for debugging."))))
+        )), /* @__PURE__ */ React15.createElement(Typography8, { variant: "body2", color: "text.secondary", textAlign: "center" }, "If this problem persists, try refreshing the page or clearing your browser cache. The error has been logged for debugging."))))
       );
     }
     return this.props.children;
@@ -3423,7 +3829,7 @@ var ErrorBoundary = class extends React14.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/contexts/SocketContext.js
-import React15, { createContext as createContext5, useContext as useContext5, useEffect as useEffect5, useState as useState6 } from "react";
+import React16, { createContext as createContext5, useContext as useContext5, useEffect as useEffect6, useState as useState7 } from "react";
 import { io } from "socket.io-client";
 var SocketContext = createContext5();
 var useSocket = () => {
@@ -3434,15 +3840,15 @@ var useSocket = () => {
   return context;
 };
 var SocketProvider = ({ children }) => {
-  const [socket, setSocket] = useState6(null);
-  const [isConnected, setIsConnected] = useState6(false);
-  const [tenantToken, setTenantToken] = useState6(null);
+  const [socket, setSocket] = useState7(null);
+  const [isConnected, setIsConnected] = useState7(false);
+  const [tenantToken, setTenantToken] = useState7(null);
   const { user } = useAuth();
-  useEffect5(() => {
+  useEffect6(() => {
     const token = localStorage.getItem("tenantToken");
     setTenantToken(token);
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (user || tenantToken) {
       const userType = user ? "property_manager" : "tenant";
       const authToken = user ? localStorage.getItem("token") : tenantToken;
@@ -3469,15 +3875,15 @@ var SocketProvider = ({ children }) => {
     socket,
     isConnected
   };
-  return /* @__PURE__ */ React15.createElement(SocketContext.Provider, { value }, children);
+  return /* @__PURE__ */ React16.createElement(SocketContext.Provider, { value }, children);
 };
 
 // src/hooks/useNotifications.js
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 import { Refresh as Refresh3, CloudUpload as CloudUpload2, Download, ContentCopy } from "@mui/icons-material";
 var useNotifications = () => {
   const notification = useNotification();
-  const notifyApiSuccess = useCallback2((operation, entityName) => {
+  const notifyApiSuccess = useCallback3((operation, entityName) => {
     const messages = {
       create: `${entityName} created successfully`,
       update: `${entityName} updated successfully`,
@@ -3488,7 +3894,7 @@ var useNotifications = () => {
     };
     return notification.showSuccess(messages[operation] || `${operation} completed successfully`);
   }, [notification]);
-  const notifyApiError = useCallback2((operation, entityName, error) => {
+  const notifyApiError = useCallback3((operation, entityName, error) => {
     var _a, _b;
     const baseMessages = {
       create: `Failed to create ${entityName}`,
@@ -3505,7 +3911,7 @@ var useNotifications = () => {
       { persistent: true }
     );
   }, [notification]);
-  const notifyFileUploadStart = useCallback2((fileName) => {
+  const notifyFileUploadStart = useCallback3((fileName) => {
     return notification.showProgress(`Uploading ${fileName}...`, 0, {
       title: "File Upload",
       actions: [{
@@ -3515,10 +3921,10 @@ var useNotifications = () => {
       }]
     });
   }, [notification]);
-  const notifyFileUploadProgress = useCallback2((notificationId, progress, fileName) => {
+  const notifyFileUploadProgress = useCallback3((notificationId, progress, fileName) => {
     notification.updateProgress(notificationId, progress, `Uploading ${fileName}... ${Math.round(progress)}%`);
   }, [notification]);
-  const notifyFileUploadComplete = useCallback2((notificationId, fileName) => {
+  const notifyFileUploadComplete = useCallback3((notificationId, fileName) => {
     notification.updateNotification(notificationId, {
       type: "success",
       message: `${fileName} uploaded successfully`,
@@ -3528,7 +3934,7 @@ var useNotifications = () => {
       actions: []
     });
   }, [notification]);
-  const notifyFileUploadError = useCallback2((notificationId, fileName, error) => {
+  const notifyFileUploadError = useCallback3((notificationId, fileName, error) => {
     notification.updateNotification(notificationId, {
       type: "error",
       message: `Failed to upload ${fileName}: ${error}`,
@@ -3541,7 +3947,7 @@ var useNotifications = () => {
       }]
     });
   }, [notification]);
-  const notifyValidationError = useCallback2((errors) => {
+  const notifyValidationError = useCallback3((errors) => {
     const errorCount = Array.isArray(errors) ? errors.length : Object.keys(errors).length;
     const message = errorCount === 1 ? "Please fix the validation error" : `Please fix ${errorCount} validation errors`;
     return notification.showWarning(message, {
@@ -3549,7 +3955,7 @@ var useNotifications = () => {
       duration: 6e3
     });
   }, [notification]);
-  const notifyConfirmAction = useCallback2((message, onConfirm, onCancel = null) => {
+  const notifyConfirmAction = useCallback3((message, onConfirm, onCancel = null) => {
     return notification.showAction(message, [
       {
         label: "Confirm",
@@ -3568,13 +3974,13 @@ var useNotifications = () => {
       title: "Confirmation Required"
     });
   }, [notification]);
-  const notifyLoading = useCallback2((message) => {
+  const notifyLoading = useCallback3((message) => {
     return notification.showLoading(message);
   }, [notification]);
-  const stopLoading = useCallback2((notificationId) => {
+  const stopLoading = useCallback3((notificationId) => {
     notification.removeNotification(notificationId);
   }, [notification]);
-  const notifyNetworkError = useCallback2(() => {
+  const notifyNetworkError = useCallback3(() => {
     return notification.showError("Network connection lost. Please check your internet connection.", {
       title: "Connection Error",
       persistent: true,
@@ -3586,10 +3992,10 @@ var useNotifications = () => {
       }]
     });
   }, [notification]);
-  const notifyNetworkReconnected = useCallback2(() => {
+  const notifyNetworkReconnected = useCallback3(() => {
     return notification.showSuccess("Connection restored");
   }, [notification]);
-  const notifyMaintenance = useCallback2((message, scheduledTime) => {
+  const notifyMaintenance = useCallback3((message, scheduledTime) => {
     return notification.showWarning(message, {
       title: "Scheduled Maintenance",
       persistent: true,
@@ -3600,13 +4006,13 @@ var useNotifications = () => {
       }]
     });
   }, [notification]);
-  const notifyPermissionDenied = useCallback2((action = "perform this action") => {
+  const notifyPermissionDenied = useCallback3((action = "perform this action") => {
     return notification.showError(`You don't have permission to ${action}`, {
       title: "Access Denied",
       duration: 6e3
     });
   }, [notification]);
-  const notifyDataOutOfSync = useCallback2((onRefresh) => {
+  const notifyDataOutOfSync = useCallback3((onRefresh) => {
     return notification.showWarning("Data may be outdated", {
       title: "Sync Warning",
       actions: [{
@@ -3639,7 +4045,7 @@ var useNotifications = () => {
 };
 
 // src/hooks/useUnifiedNotifications.js
-import { useEffect as useEffect6, useContext as useContext6, useCallback as useCallback3 } from "react";
+import { useEffect as useEffect7, useContext as useContext6, useCallback as useCallback4 } from "react";
 
 // src/utils/unifiedNotifications.js
 var NOTIFICATION_TYPES = {
@@ -4009,17 +4415,17 @@ var setSocketContext = (context) => unifiedNotificationManager.setSocketContext(
 var useUnifiedNotifications = () => {
   const toastContext = useNotification();
   const socketContext = useSocket();
-  useEffect6(() => {
+  useEffect7(() => {
     if (toastContext) {
       setToastContext(toastContext);
     }
   }, [toastContext]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (socketContext) {
       setSocketContext(socketContext);
     }
   }, [socketContext]);
-  const initializePushNotifications = useCallback3(async () => {
+  const initializePushNotifications = useCallback4(async () => {
     try {
       await requestNotificationPermission();
       await subscribeToPushNotifications();
@@ -4029,21 +4435,21 @@ var useUnifiedNotifications = () => {
       return false;
     }
   }, []);
-  const showSuccess = useCallback3((message, title, options = {}) => {
+  const showSuccess = useCallback4((message, title, options = {}) => {
     return notifySuccess(message, title, {
       channels: [NOTIFICATION_CHANNELS.TOAST],
       sound: true,
       ...options
     });
   }, []);
-  const showError = useCallback3((message, title, options = {}) => {
+  const showError = useCallback4((message, title, options = {}) => {
     return notifyError(message, title, {
       channels: [NOTIFICATION_CHANNELS.TOAST, NOTIFICATION_CHANNELS.BROWSER],
       persistent: true,
       ...options
     });
   }, []);
-  const showWarning = useCallback3((message, title, options = {}) => {
+  const showWarning = useCallback4((message, title, options = {}) => {
     return notify({
       message,
       title,
@@ -4052,7 +4458,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const showInfo = useCallback3((message, title, options = {}) => {
+  const showInfo = useCallback4((message, title, options = {}) => {
     return notify({
       message,
       title,
@@ -4061,7 +4467,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifyTicket = useCallback3((ticket, changeType, options = {}) => {
+  const notifyTicket = useCallback4((ticket, changeType, options = {}) => {
     return notifyTicketUpdate(ticket, changeType, {
       channels: [
         NOTIFICATION_CHANNELS.TOAST,
@@ -4071,7 +4477,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifyNewMessage = useCallback3((senderName, messageContent, propertyAddress, options = {}) => {
+  const notifyNewMessage = useCallback4((senderName, messageContent, propertyAddress, options = {}) => {
     return notifyMessage(senderName, messageContent, propertyAddress, {
       channels: [
         NOTIFICATION_CHANNELS.BROWSER,
@@ -4081,7 +4487,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifySystemAlert = useCallback3((message, title, options = {}) => {
+  const notifySystemAlert = useCallback4((message, title, options = {}) => {
     return notify({
       message,
       title,
@@ -4096,7 +4502,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const showLoading = useCallback3((message, options = {}) => {
+  const showLoading = useCallback4((message, options = {}) => {
     return notify({
       message,
       type: NOTIFICATION_TYPES.LOADING,
@@ -4105,7 +4511,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifyImportant = useCallback3((message, title, options = {}) => {
+  const notifyImportant = useCallback4((message, title, options = {}) => {
     return notify({
       message,
       title,
@@ -4120,7 +4526,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifyBatch = useCallback3(async (notifications) => {
+  const notifyBatch = useCallback4(async (notifications) => {
     const results = [];
     for (const notification of notifications) {
       try {
@@ -4946,6 +5352,7 @@ export {
   NOTIFICATION_CHANNELS,
   NOTIFICATION_TYPES,
   Navbar_default as Navbar,
+  NotificationBell_default as NotificationBell,
   NotificationManager_default as NotificationManager,
   NotificationPatterns,
   NotificationProvider,