@propknot/shared-ui 1.0.6 → 1.0.8

package/dist/index.js

@@ -211,6 +211,7 @@ __export(index_exports, {
   NOTIFICATION_CHANNELS: () => NOTIFICATION_CHANNELS,
   NOTIFICATION_TYPES: () => NOTIFICATION_TYPES,
   Navbar: () => Navbar_default,
+  NotificationBell: () => NotificationBell_default,
   NotificationManager: () => NotificationManager_default,
   NotificationPatterns: () => NotificationPatterns,
   NotificationProvider: () => NotificationProvider,
@@ -1553,7 +1554,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);
       }
     };
@@ -1577,7 +1577,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);
@@ -1587,7 +1587,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);
@@ -1597,7 +1597,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);
@@ -3348,11 +3348,386 @@ var NotificationManager = () => {
 };
 var NotificationManager_default = NotificationManager;
 
-// src/components/ErrorBoundary/ErrorBoundary.js
+// src/components/Notifications/NotificationBell.js
 var import_react13 = __toESM(require("react"));
 var import_material9 = require("@mui/material");
 var import_icons_material3 = require("@mui/icons-material");
-var ErrorBoundary = class extends import_react13.default.Component {
+var import_date_fns2 = require("date-fns");
+var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 }) => {
+  const [anchorEl, setAnchorEl] = (0, import_react13.useState)(null);
+  const [notifications, setNotifications] = (0, import_react13.useState)([]);
+  const [unreadCount, setUnreadCount] = (0, import_react13.useState)(0);
+  const [loading, setLoading] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const [page, setPage] = (0, import_react13.useState)(1);
+  const [hasMore, setHasMore] = (0, import_react13.useState)(true);
+  const { socket, isConnected } = useSocket2 ? useSocket2() : { socket: null, isConnected: false };
+  const { user } = useAuth2 ? useAuth2() : { user: null };
+  const open = Boolean(anchorEl);
+  const fetchNotifications = (0, import_react13.useCallback)(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 = (0, import_react13.useCallback)(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]);
+  (0, import_react13.useEffect)(() => {
+    fetchNotifications();
+    fetchUnreadCount();
+  }, [fetchNotifications, fetchUnreadCount]);
+  (0, import_react13.useEffect)(() => {
+    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__ */ import_react13.default.createElement(import_icons_material3.Assignment, { ...iconProps });
+      case "MESSAGE_RECEIVED":
+      case "MENTION_RECEIVED":
+        return /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Message, { ...iconProps });
+      case "PAYMENT_DUE":
+      case "PAYMENT_OVERDUE":
+        return /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Payment, { ...iconProps });
+      case "PROPERTY_UPDATED":
+      case "LEASE_EXPIRING":
+        return /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Home, { ...iconProps });
+      case "APPLIANCE_MAINTENANCE_DUE":
+      case "MAINTENANCE_SCHEDULED":
+        return /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Build, { ...iconProps });
+      case "SYSTEM_ALERT":
+        return /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Warning, { ...iconProps });
+      case "SUCCESS":
+        return /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.CheckCircle, { ...iconProps });
+      case "ERROR":
+        return /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Error, { ...iconProps });
+      case "WARNING":
+        return /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Warning, { ...iconProps });
+      case "INFO":
+      default:
+        return /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Info, { ...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__ */ import_react13.default.createElement(
+      import_material9.Chip,
+      {
+        label: priority,
+        size: "small",
+        color: colors[priority] || "default",
+        sx: { ml: 1, height: 20, fontSize: "0.7rem" }
+      }
+    );
+  };
+  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
+    import_material9.IconButton,
+    {
+      color: "inherit",
+      onClick: handleClick,
+      sx: {
+        ml: 1,
+        "&:hover": {
+          bgcolor: "action.hover"
+        }
+      }
+    },
+    /* @__PURE__ */ import_react13.default.createElement(
+      import_material9.Badge,
+      {
+        badgeContent: unreadCount,
+        color: "error",
+        max: 99
+      },
+      unreadCount > 0 ? /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Notifications, null) : /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.NotificationsNone, null)
+    )
+  ), /* @__PURE__ */ import_react13.default.createElement(
+    import_material9.Menu,
+    {
+      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__ */ import_react13.default.createElement(
+      import_material9.Box,
+      {
+        sx: {
+          p: 2,
+          pb: 1.5,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          borderBottom: "1px solid",
+          borderColor: "divider"
+        }
+      },
+      /* @__PURE__ */ import_react13.default.createElement(import_material9.Box, { sx: { display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Notifications, { color: "primary" }), /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { variant: "h6", sx: { fontWeight: 600 } }, "Notifications"), unreadCount > 0 && /* @__PURE__ */ import_react13.default.createElement(
+        import_material9.Chip,
+        {
+          label: unreadCount,
+          size: "small",
+          color: "primary",
+          sx: { height: 22, fontSize: "0.75rem" }
+        }
+      )),
+      /* @__PURE__ */ import_react13.default.createElement(import_material9.Box, null, unreadCount > 0 && /* @__PURE__ */ import_react13.default.createElement(
+        import_material9.Button,
+        {
+          size: "small",
+          startIcon: /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.DoneAll, null),
+          onClick: handleMarkAllAsRead,
+          sx: { textTransform: "none", fontSize: "0.75rem" }
+        },
+        "Mark all read"
+      ), /* @__PURE__ */ import_react13.default.createElement(import_material9.IconButton, { size: "small", onClick: handleClose }, /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Close, { fontSize: "small" })))
+    ),
+    error && /* @__PURE__ */ import_react13.default.createElement(import_material9.Alert, { severity: "error", sx: { m: 2 } }, error),
+    /* @__PURE__ */ import_react13.default.createElement(
+      import_material9.Box,
+      {
+        sx: {
+          flex: 1,
+          overflow: "auto",
+          maxHeight: 450
+        }
+      },
+      loading && notifications.length === 0 ? /* @__PURE__ */ import_react13.default.createElement(import_material9.Box, { sx: { display: "flex", justifyContent: "center", p: 4 } }, /* @__PURE__ */ import_react13.default.createElement(import_material9.CircularProgress, { size: 32 })) : notifications.length === 0 ? /* @__PURE__ */ import_react13.default.createElement(
+        import_material9.Box,
+        {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            p: 4,
+            textAlign: "center"
+          }
+        },
+        /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.NotificationsNone, { sx: { fontSize: 64, color: "text.secondary", mb: 2 } }),
+        /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { variant: "body1", color: "text.secondary", sx: { fontWeight: 500 } }, "No notifications yet"),
+        /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { variant: "body2", color: "text.secondary" }, "You're all caught up!")
+      ) : /* @__PURE__ */ import_react13.default.createElement(import_material9.List, { sx: { p: 0 } }, notifications.map((notification, index) => /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: notification._id }, /* @__PURE__ */ import_react13.default.createElement(
+        import_material9.ListItem,
+        {
+          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__ */ import_react13.default.createElement(import_material9.ListItemAvatar, null, /* @__PURE__ */ import_react13.default.createElement(
+          import_material9.Avatar,
+          {
+            sx: {
+              bgcolor: notification.read ? "grey.300" : getNotificationColor(notification.type),
+              width: 40,
+              height: 40
+            }
+          },
+          getNotificationIcon(notification.type)
+        )),
+        /* @__PURE__ */ import_react13.default.createElement(
+          import_material9.ListItemText,
+          {
+            primary: /* @__PURE__ */ import_react13.default.createElement(import_material9.Box, { sx: { display: "flex", alignItems: "center", mb: 0.5 } }, /* @__PURE__ */ import_react13.default.createElement(
+              import_material9.Typography,
+              {
+                variant: "body2",
+                sx: {
+                  fontWeight: notification.read ? 400 : 600,
+                  flex: 1
+                }
+              },
+              notification.title
+            ), getPriorityChip(notification.priority)),
+            secondary: /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
+              import_material9.Typography,
+              {
+                variant: "body2",
+                color: "text.secondary",
+                sx: {
+                  display: "-webkit-box",
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden",
+                  mb: 0.5
+                }
+              },
+              notification.message
+            ), /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { variant: "caption", color: "text.secondary" }, (0, import_date_fns2.formatDistanceToNow)(new Date(notification.createdAt), { addSuffix: true })))
+          }
+        )
+      ), index < notifications.length - 1 && /* @__PURE__ */ import_react13.default.createElement(import_material9.Divider, null)))),
+      hasMore && notifications.length > 0 && /* @__PURE__ */ import_react13.default.createElement(import_material9.Box, { sx: { p: 2, textAlign: "center", borderTop: "1px solid", borderColor: "divider" } }, /* @__PURE__ */ import_react13.default.createElement(
+        import_material9.Button,
+        {
+          onClick: handleLoadMore,
+          disabled: loading,
+          size: "small",
+          sx: { textTransform: "none" }
+        },
+        loading ? "Loading..." : "Load more"
+      ))
+    ),
+    /* @__PURE__ */ import_react13.default.createElement(
+      import_material9.Box,
+      {
+        sx: {
+          p: 1.5,
+          borderTop: "1px solid",
+          borderColor: "divider",
+          textAlign: "center"
+        }
+      },
+      /* @__PURE__ */ import_react13.default.createElement(
+        import_material9.Button,
+        {
+          size: "small",
+          startIcon: /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Settings, null),
+          onClick: () => {
+            window.location.href = "/settings?tab=general";
+            handleClose();
+          },
+          sx: { textTransform: "none" }
+        },
+        "Notification Settings"
+      )
+    )
+  ));
+};
+var NotificationBell_default = NotificationBell;
+
+// src/components/ErrorBoundary/ErrorBoundary.js
+var import_react14 = __toESM(require("react"));
+var import_material10 = require("@mui/material");
+var import_icons_material4 = require("@mui/icons-material");
+var ErrorBoundary = class extends import_react14.default.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -3393,8 +3768,8 @@ var ErrorBoundary = class extends import_react13.default.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__ */ import_react13.default.createElement(
-        import_material9.Box,
+      return /* @__PURE__ */ import_react14.default.createElement(
+        import_material10.Box,
         {
           sx: {
             display: "flex",
@@ -3405,32 +3780,32 @@ var ErrorBoundary = class extends import_react13.default.Component {
             p: 3
           }
         },
-        /* @__PURE__ */ import_react13.default.createElement(import_material9.Card, { sx: { maxWidth: 600, width: "100%" } }, /* @__PURE__ */ import_react13.default.createElement(import_material9.CardContent, null, /* @__PURE__ */ import_react13.default.createElement(import_material9.Stack, { spacing: 3, alignItems: "center" }, /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.BugReport, { sx: { fontSize: 64, color: "error.main" } }), /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { variant: "h5", component: "h2", textAlign: "center" }, "Oops! Something went wrong"), /* @__PURE__ */ import_react13.default.createElement(import_material9.Alert, { severity: "error", sx: { width: "100%" } }, /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { variant: "body2" }, isNavigationError && /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("strong", null, "UI Component Error:"), " A component tried to access an element before it was ready. This is usually temporary."), isDOMError && !isNavigationError && /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("strong", null, "DOM Error:"), " A component couldn't find an expected element. This might be due to rapid state changes."), !isNavigationError && !isDOMError && /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("strong", null, "Application Error:"), " An unexpected error occurred while rendering the component."))), process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ import_react13.default.createElement(import_material9.Alert, { severity: "warning", sx: { width: "100%" } }, /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { variant: "body2", component: "div" }, /* @__PURE__ */ import_react13.default.createElement("strong", null, "Debug Info:"), /* @__PURE__ */ import_react13.default.createElement("br", null), /* @__PURE__ */ import_react13.default.createElement("code", { style: { fontSize: "0.75rem", wordBreak: "break-word" } }, this.state.error.toString()))), /* @__PURE__ */ import_react13.default.createElement(import_material9.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ import_react13.default.createElement(
-          import_material9.Button,
+        /* @__PURE__ */ import_react14.default.createElement(import_material10.Card, { sx: { maxWidth: 600, width: "100%" } }, /* @__PURE__ */ import_react14.default.createElement(import_material10.CardContent, null, /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { spacing: 3, alignItems: "center" }, /* @__PURE__ */ import_react14.default.createElement(import_icons_material4.BugReport, { sx: { fontSize: 64, color: "error.main" } }), /* @__PURE__ */ import_react14.default.createElement(import_material10.Typography, { variant: "h5", component: "h2", textAlign: "center" }, "Oops! Something went wrong"), /* @__PURE__ */ import_react14.default.createElement(import_material10.Alert, { severity: "error", sx: { width: "100%" } }, /* @__PURE__ */ import_react14.default.createElement(import_material10.Typography, { variant: "body2" }, isNavigationError && /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("strong", null, "UI Component Error:"), " A component tried to access an element before it was ready. This is usually temporary."), isDOMError && !isNavigationError && /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("strong", null, "DOM Error:"), " A component couldn't find an expected element. This might be due to rapid state changes."), !isNavigationError && !isDOMError && /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("strong", null, "Application Error:"), " An unexpected error occurred while rendering the component."))), process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ import_react14.default.createElement(import_material10.Alert, { severity: "warning", sx: { width: "100%" } }, /* @__PURE__ */ import_react14.default.createElement(import_material10.Typography, { variant: "body2", component: "div" }, /* @__PURE__ */ import_react14.default.createElement("strong", null, "Debug Info:"), /* @__PURE__ */ import_react14.default.createElement("br", null), /* @__PURE__ */ import_react14.default.createElement("code", { style: { fontSize: "0.75rem", wordBreak: "break-word" } }, this.state.error.toString()))), /* @__PURE__ */ import_react14.default.createElement(import_material10.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ import_react14.default.createElement(
+          import_material10.Button,
           {
             variant: "contained",
-            startIcon: /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Refresh, null),
+            startIcon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material4.Refresh, null),
             onClick: this.handleRetry,
             color: "primary"
           },
           "Try Again"
-        ), /* @__PURE__ */ import_react13.default.createElement(
-          import_material9.Button,
+        ), /* @__PURE__ */ import_react14.default.createElement(
+          import_material10.Button,
           {
             variant: "outlined",
-            startIcon: /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Refresh, null),
+            startIcon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material4.Refresh, null),
             onClick: this.handleReload
           },
           "Reload Page"
-        ), this.props.onNavigateHome && /* @__PURE__ */ import_react13.default.createElement(
-          import_material9.Button,
+        ), this.props.onNavigateHome && /* @__PURE__ */ import_react14.default.createElement(
+          import_material10.Button,
           {
             variant: "outlined",
-            startIcon: /* @__PURE__ */ import_react13.default.createElement(import_icons_material3.Home, null),
+            startIcon: /* @__PURE__ */ import_react14.default.createElement(import_icons_material4.Home, null),
             onClick: this.props.onNavigateHome
           },
           "Go Home"
-        )), /* @__PURE__ */ import_react13.default.createElement(import_material9.Typography, { 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__ */ import_react14.default.createElement(import_material10.Typography, { 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;
@@ -3439,26 +3814,26 @@ var ErrorBoundary = class extends import_react13.default.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/contexts/SocketContext.js
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_socket = require("socket.io-client");
-var SocketContext = (0, import_react14.createContext)();
+var SocketContext = (0, import_react15.createContext)();
 var useSocket = () => {
-  const context = (0, import_react14.useContext)(SocketContext);
+  const context = (0, import_react15.useContext)(SocketContext);
   if (!context) {
     throw new Error("useSocket must be used within SocketProvider");
   }
   return context;
 };
 var SocketProvider = ({ children }) => {
-  const [socket, setSocket] = (0, import_react14.useState)(null);
-  const [isConnected, setIsConnected] = (0, import_react14.useState)(false);
-  const [tenantToken, setTenantToken] = (0, import_react14.useState)(null);
+  const [socket, setSocket] = (0, import_react15.useState)(null);
+  const [isConnected, setIsConnected] = (0, import_react15.useState)(false);
+  const [tenantToken, setTenantToken] = (0, import_react15.useState)(null);
   const { user } = useAuth();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const token = localStorage.getItem("tenantToken");
     setTenantToken(token);
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (user || tenantToken) {
       const userType = user ? "property_manager" : "tenant";
       const authToken = user ? localStorage.getItem("token") : tenantToken;
@@ -3485,15 +3860,15 @@ var SocketProvider = ({ children }) => {
     socket,
     isConnected
   };
-  return /* @__PURE__ */ import_react14.default.createElement(SocketContext.Provider, { value }, children);
+  return /* @__PURE__ */ import_react15.default.createElement(SocketContext.Provider, { value }, children);
 };
 
 // src/hooks/useNotifications.js
-var import_react15 = require("react");
-var import_icons_material4 = require("@mui/icons-material");
+var import_react16 = require("react");
+var import_icons_material5 = require("@mui/icons-material");
 var useNotifications = () => {
   const notification = useNotification();
-  const notifyApiSuccess = (0, import_react15.useCallback)((operation, entityName) => {
+  const notifyApiSuccess = (0, import_react16.useCallback)((operation, entityName) => {
     const messages = {
       create: `${entityName} created successfully`,
       update: `${entityName} updated successfully`,
@@ -3504,7 +3879,7 @@ var useNotifications = () => {
     };
     return notification.showSuccess(messages[operation] || `${operation} completed successfully`);
   }, [notification]);
-  const notifyApiError = (0, import_react15.useCallback)((operation, entityName, error) => {
+  const notifyApiError = (0, import_react16.useCallback)((operation, entityName, error) => {
     var _a, _b;
     const baseMessages = {
       create: `Failed to create ${entityName}`,
@@ -3521,20 +3896,20 @@ var useNotifications = () => {
       { persistent: true }
     );
   }, [notification]);
-  const notifyFileUploadStart = (0, import_react15.useCallback)((fileName) => {
+  const notifyFileUploadStart = (0, import_react16.useCallback)((fileName) => {
     return notification.showProgress(`Uploading ${fileName}...`, 0, {
       title: "File Upload",
       actions: [{
         label: "Cancel",
-        icon: /* @__PURE__ */ React.createElement(import_icons_material4.ContentCopy, null),
+        icon: /* @__PURE__ */ React.createElement(import_icons_material5.ContentCopy, null),
         color: "error"
       }]
     });
   }, [notification]);
-  const notifyFileUploadProgress = (0, import_react15.useCallback)((notificationId, progress, fileName) => {
+  const notifyFileUploadProgress = (0, import_react16.useCallback)((notificationId, progress, fileName) => {
     notification.updateProgress(notificationId, progress, `Uploading ${fileName}... ${Math.round(progress)}%`);
   }, [notification]);
-  const notifyFileUploadComplete = (0, import_react15.useCallback)((notificationId, fileName) => {
+  const notifyFileUploadComplete = (0, import_react16.useCallback)((notificationId, fileName) => {
     notification.updateNotification(notificationId, {
       type: "success",
       message: `${fileName} uploaded successfully`,
@@ -3544,7 +3919,7 @@ var useNotifications = () => {
       actions: []
     });
   }, [notification]);
-  const notifyFileUploadError = (0, import_react15.useCallback)((notificationId, fileName, error) => {
+  const notifyFileUploadError = (0, import_react16.useCallback)((notificationId, fileName, error) => {
     notification.updateNotification(notificationId, {
       type: "error",
       message: `Failed to upload ${fileName}: ${error}`,
@@ -3552,12 +3927,12 @@ var useNotifications = () => {
       persistent: true,
       actions: [{
         label: "Retry",
-        icon: /* @__PURE__ */ React.createElement(import_icons_material4.Refresh, null),
+        icon: /* @__PURE__ */ React.createElement(import_icons_material5.Refresh, null),
         color: "error"
       }]
     });
   }, [notification]);
-  const notifyValidationError = (0, import_react15.useCallback)((errors) => {
+  const notifyValidationError = (0, import_react16.useCallback)((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, {
@@ -3565,7 +3940,7 @@ var useNotifications = () => {
       duration: 6e3
     });
   }, [notification]);
-  const notifyConfirmAction = (0, import_react15.useCallback)((message, onConfirm, onCancel = null) => {
+  const notifyConfirmAction = (0, import_react16.useCallback)((message, onConfirm, onCancel = null) => {
     return notification.showAction(message, [
       {
         label: "Confirm",
@@ -3584,28 +3959,28 @@ var useNotifications = () => {
       title: "Confirmation Required"
     });
   }, [notification]);
-  const notifyLoading = (0, import_react15.useCallback)((message) => {
+  const notifyLoading = (0, import_react16.useCallback)((message) => {
     return notification.showLoading(message);
   }, [notification]);
-  const stopLoading = (0, import_react15.useCallback)((notificationId) => {
+  const stopLoading = (0, import_react16.useCallback)((notificationId) => {
     notification.removeNotification(notificationId);
   }, [notification]);
-  const notifyNetworkError = (0, import_react15.useCallback)(() => {
+  const notifyNetworkError = (0, import_react16.useCallback)(() => {
     return notification.showError("Network connection lost. Please check your internet connection.", {
       title: "Connection Error",
       persistent: true,
       actions: [{
         label: "Retry",
-        icon: /* @__PURE__ */ React.createElement(import_icons_material4.Refresh, null),
+        icon: /* @__PURE__ */ React.createElement(import_icons_material5.Refresh, null),
         color: "error",
         onClick: () => window.location.reload()
       }]
     });
   }, [notification]);
-  const notifyNetworkReconnected = (0, import_react15.useCallback)(() => {
+  const notifyNetworkReconnected = (0, import_react16.useCallback)(() => {
     return notification.showSuccess("Connection restored");
   }, [notification]);
-  const notifyMaintenance = (0, import_react15.useCallback)((message, scheduledTime) => {
+  const notifyMaintenance = (0, import_react16.useCallback)((message, scheduledTime) => {
     return notification.showWarning(message, {
       title: "Scheduled Maintenance",
       persistent: true,
@@ -3616,18 +3991,18 @@ var useNotifications = () => {
       }]
     });
   }, [notification]);
-  const notifyPermissionDenied = (0, import_react15.useCallback)((action = "perform this action") => {
+  const notifyPermissionDenied = (0, import_react16.useCallback)((action = "perform this action") => {
     return notification.showError(`You don't have permission to ${action}`, {
       title: "Access Denied",
       duration: 6e3
     });
   }, [notification]);
-  const notifyDataOutOfSync = (0, import_react15.useCallback)((onRefresh) => {
+  const notifyDataOutOfSync = (0, import_react16.useCallback)((onRefresh) => {
     return notification.showWarning("Data may be outdated", {
       title: "Sync Warning",
       actions: [{
         label: "Refresh",
-        icon: /* @__PURE__ */ React.createElement(import_icons_material4.Refresh, null),
+        icon: /* @__PURE__ */ React.createElement(import_icons_material5.Refresh, null),
         onClick: onRefresh
       }]
     });
@@ -3655,7 +4030,7 @@ var useNotifications = () => {
 };
 
 // src/hooks/useUnifiedNotifications.js
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // src/utils/unifiedNotifications.js
 var NOTIFICATION_TYPES = {
@@ -4025,17 +4400,17 @@ var setSocketContext = (context) => unifiedNotificationManager.setSocketContext(
 var useUnifiedNotifications = () => {
   const toastContext = useNotification();
   const socketContext = useSocket();
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (toastContext) {
       setToastContext(toastContext);
     }
   }, [toastContext]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (socketContext) {
       setSocketContext(socketContext);
     }
   }, [socketContext]);
-  const initializePushNotifications = (0, import_react16.useCallback)(async () => {
+  const initializePushNotifications = (0, import_react17.useCallback)(async () => {
     try {
       await requestNotificationPermission();
       await subscribeToPushNotifications();
@@ -4045,21 +4420,21 @@ var useUnifiedNotifications = () => {
       return false;
     }
   }, []);
-  const showSuccess = (0, import_react16.useCallback)((message, title, options = {}) => {
+  const showSuccess = (0, import_react17.useCallback)((message, title, options = {}) => {
     return notifySuccess(message, title, {
       channels: [NOTIFICATION_CHANNELS.TOAST],
       sound: true,
       ...options
     });
   }, []);
-  const showError = (0, import_react16.useCallback)((message, title, options = {}) => {
+  const showError = (0, import_react17.useCallback)((message, title, options = {}) => {
     return notifyError(message, title, {
       channels: [NOTIFICATION_CHANNELS.TOAST, NOTIFICATION_CHANNELS.BROWSER],
       persistent: true,
       ...options
     });
   }, []);
-  const showWarning = (0, import_react16.useCallback)((message, title, options = {}) => {
+  const showWarning = (0, import_react17.useCallback)((message, title, options = {}) => {
     return notify({
       message,
       title,
@@ -4068,7 +4443,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const showInfo = (0, import_react16.useCallback)((message, title, options = {}) => {
+  const showInfo = (0, import_react17.useCallback)((message, title, options = {}) => {
     return notify({
       message,
       title,
@@ -4077,7 +4452,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifyTicket = (0, import_react16.useCallback)((ticket, changeType, options = {}) => {
+  const notifyTicket = (0, import_react17.useCallback)((ticket, changeType, options = {}) => {
     return notifyTicketUpdate(ticket, changeType, {
       channels: [
         NOTIFICATION_CHANNELS.TOAST,
@@ -4087,7 +4462,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifyNewMessage = (0, import_react16.useCallback)((senderName, messageContent, propertyAddress, options = {}) => {
+  const notifyNewMessage = (0, import_react17.useCallback)((senderName, messageContent, propertyAddress, options = {}) => {
     return notifyMessage(senderName, messageContent, propertyAddress, {
       channels: [
         NOTIFICATION_CHANNELS.BROWSER,
@@ -4097,7 +4472,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifySystemAlert = (0, import_react16.useCallback)((message, title, options = {}) => {
+  const notifySystemAlert = (0, import_react17.useCallback)((message, title, options = {}) => {
     return notify({
       message,
       title,
@@ -4112,7 +4487,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const showLoading = (0, import_react16.useCallback)((message, options = {}) => {
+  const showLoading = (0, import_react17.useCallback)((message, options = {}) => {
     return notify({
       message,
       type: NOTIFICATION_TYPES.LOADING,
@@ -4121,7 +4496,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifyImportant = (0, import_react16.useCallback)((message, title, options = {}) => {
+  const notifyImportant = (0, import_react17.useCallback)((message, title, options = {}) => {
     return notify({
       message,
       title,
@@ -4136,7 +4511,7 @@ var useUnifiedNotifications = () => {
       ...options
     });
   }, []);
-  const notifyBatch = (0, import_react16.useCallback)(async (notifications) => {
+  const notifyBatch = (0, import_react17.useCallback)(async (notifications) => {
     const results = [];
     for (const notification of notifications) {
       try {
@@ -4277,11 +4652,11 @@ var useAccessibleColors = () => {
 };
 
 // src/hooks/useContrastText.js
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_styles4 = require("@mui/material/styles");
 var useContrastText = () => {
   const theme = (0, import_styles4.useTheme)();
-  const utils = (0, import_react17.useMemo)(() => ({
+  const utils = (0, import_react18.useMemo)(() => ({
     /**
      * Get accessible text color for any background color
      * @param {string} backgroundColor - Background color in hex format
@@ -4963,6 +5338,7 @@ var isTenantAuthenticated = () => {
   NOTIFICATION_CHANNELS,
   NOTIFICATION_TYPES,
   Navbar,
+  NotificationBell,
   NotificationManager,
   NotificationPatterns,
   NotificationProvider,