@propknot/shared-ui 1.0.24 → 1.0.26

package/dist/index.mjs

@@ -173,6 +173,13 @@ var require_notificationTypes = __commonJS({
   }
 });
 
+// src/lib/utils.js
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
 // src/components/Navigation/Navbar.js
 import React5, { useState as useState4, useEffect as useEffect3 } from "react";
 import {
@@ -3180,15 +3187,290 @@ var ModernCardContent = ({ children, sx = {}, ...props }) => {
 ModernCard.Content = ModernCardContent;
 var ModernCard_default = ModernCard;
 
+// src/components/UI/button.jsx
+import * as React13 from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button2 = React13.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ React13.createElement(
+    Comp,
+    {
+      className: cn(buttonVariants({ variant, size, className })),
+      ref,
+      ...props
+    }
+  );
+});
+Button2.displayName = "Button";
+
+// src/components/UI/card.jsx
+import * as React14 from "react";
+var Card2 = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+Card2.displayName = "Card";
+var CardHeader = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent2 = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent2.displayName = "CardContent";
+var CardFooter = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React14.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+
+// src/components/UI/input.jsx
+import * as React15 from "react";
+var Input = React15.forwardRef(({ className, type, ...props }, ref) => {
+  return /* @__PURE__ */ React15.createElement(
+    "input",
+    {
+      type,
+      className: cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Input.displayName = "Input";
+
+// src/components/UI/label.jsx
+import * as React16 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva2 } from "class-variance-authority";
+var labelVariants = cva2(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React16.createElement(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/UI/typography.jsx
+import * as React17 from "react";
+import { cva as cva3 } from "class-variance-authority";
+var headingVariants = cva3("scroll-m-20 tracking-tight", {
+  variants: {
+    level: {
+      h1: "text-4xl font-extrabold lg:text-5xl",
+      h2: "text-3xl font-semibold",
+      h3: "text-2xl font-semibold",
+      h4: "text-xl font-semibold",
+      h5: "text-lg font-semibold",
+      h6: "text-base font-semibold"
+    }
+  },
+  defaultVariants: {
+    level: "h2"
+  }
+});
+var Heading = React17.forwardRef(({ className, level = "h2", ...props }, ref) => {
+  const Comp = level;
+  return /* @__PURE__ */ React17.createElement(
+    Comp,
+    {
+      ref,
+      className: cn(headingVariants({ level, className })),
+      ...props
+    }
+  );
+});
+Heading.displayName = "Heading";
+var H1 = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "h1",
+  {
+    ref,
+    className: cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className),
+    ...props
+  }
+));
+H1.displayName = "H1";
+var H2 = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "h2",
+  {
+    ref,
+    className: cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", className),
+    ...props
+  }
+));
+H2.displayName = "H2";
+var H3 = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "h3",
+  {
+    ref,
+    className: cn("scroll-m-20 text-2xl font-semibold tracking-tight", className),
+    ...props
+  }
+));
+H3.displayName = "H3";
+var H4 = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "h4",
+  {
+    ref,
+    className: cn("scroll-m-20 text-xl font-semibold tracking-tight", className),
+    ...props
+  }
+));
+H4.displayName = "H4";
+var P = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "p",
+  {
+    ref,
+    className: cn("leading-7 [&:not(:first-child)]:mt-6", className),
+    ...props
+  }
+));
+P.displayName = "P";
+var Blockquote = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "blockquote",
+  {
+    ref,
+    className: cn("mt-6 border-l-2 pl-6 italic", className),
+    ...props
+  }
+));
+Blockquote.displayName = "Blockquote";
+var List2 = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "ul",
+  {
+    ref,
+    className: cn("my-6 ml-6 list-disc [&>li]:mt-2", className),
+    ...props
+  }
+));
+List2.displayName = "List";
+var InlineCode = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "code",
+  {
+    ref,
+    className: cn(
+      "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+      className
+    ),
+    ...props
+  }
+));
+InlineCode.displayName = "InlineCode";
+var Lead = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "p",
+  {
+    ref,
+    className: cn("text-xl text-muted-foreground", className),
+    ...props
+  }
+));
+Lead.displayName = "Lead";
+var Large = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "div",
+  {
+    ref,
+    className: cn("text-lg font-semibold", className),
+    ...props
+  }
+));
+Large.displayName = "Large";
+var Small = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "small",
+  {
+    ref,
+    className: cn("text-sm font-medium leading-none", className),
+    ...props
+  }
+));
+Small.displayName = "Small";
+var Muted = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React17.createElement(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+Muted.displayName = "Muted";
+
 // src/components/Notifications/NotificationManager.js
-import React13 from "react";
+import React18 from "react";
 import {
   Box as Box8,
   Snackbar,
   Alert,
   AlertTitle,
   IconButton as IconButton2,
-  Button as Button2,
+  Button as Button3,
   LinearProgress,
   Typography as Typography6,
   Slide,
@@ -3214,12 +3496,12 @@ var NotificationItem = ({ notification, onClose, onAction }) => {
   }
   const getSeverityIcon = (type) => {
     const icons = {
-      success: /* @__PURE__ */ React13.createElement(CheckCircle, null),
-      error: /* @__PURE__ */ React13.createElement(Error2, null),
-      warning: /* @__PURE__ */ React13.createElement(Warning, null),
-      info: /* @__PURE__ */ React13.createElement(Info, null)
+      success: /* @__PURE__ */ React18.createElement(CheckCircle, null),
+      error: /* @__PURE__ */ React18.createElement(Error2, null),
+      warning: /* @__PURE__ */ React18.createElement(Warning, null),
+      info: /* @__PURE__ */ React18.createElement(Info, null)
     };
-    return icons[type] || /* @__PURE__ */ React13.createElement(Info, null);
+    return icons[type] || /* @__PURE__ */ React18.createElement(Info, null);
   };
   const handleActionClick = (action) => {
     if (action && action.onClick) {
@@ -3234,13 +3516,13 @@ var NotificationItem = ({ notification, onClose, onAction }) => {
       onClose();
     }
   };
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React18.createElement(
     Alert,
     {
       severity: notification.type,
       icon: getSeverityIcon(notification.type),
-      action: /* @__PURE__ */ React13.createElement(Box8, { display: "flex", alignItems: "center", gap: 1 }, (_a = notification.actions) == null ? void 0 : _a.map((action, index) => /* @__PURE__ */ React13.createElement(
-        Button2,
+      action: /* @__PURE__ */ React18.createElement(Box8, { display: "flex", alignItems: "center", gap: 1 }, (_a = notification.actions) == null ? void 0 : _a.map((action, index) => /* @__PURE__ */ React18.createElement(
+        Button3,
         {
           key: index,
           size: "small",
@@ -3255,14 +3537,14 @@ var NotificationItem = ({ notification, onClose, onAction }) => {
           }
         },
         action.label
-      )), typeof notification.progress === "number" && /* @__PURE__ */ React13.createElement(Box8, { sx: { minWidth: 120 } }, /* @__PURE__ */ React13.createElement(
+      )), typeof notification.progress === "number" && /* @__PURE__ */ React18.createElement(Box8, { sx: { minWidth: 120 } }, /* @__PURE__ */ React18.createElement(
         LinearProgress,
         {
           variant: "determinate",
           value: notification.progress,
           sx: { height: 6, borderRadius: 3 }
         }
-      ), /* @__PURE__ */ React13.createElement(Typography6, { variant: "caption", sx: { fontSize: "0.7rem" } }, Math.round(notification.progress), "%")), notification.timestamp && /* @__PURE__ */ React13.createElement(
+      ), /* @__PURE__ */ React18.createElement(Typography6, { variant: "caption", sx: { fontSize: "0.7rem" } }, Math.round(notification.progress), "%")), notification.timestamp && /* @__PURE__ */ React18.createElement(
         Chip,
         {
           label: (() => {
@@ -3280,14 +3562,14 @@ var NotificationItem = ({ notification, onClose, onAction }) => {
             opacity: 0.7
           }
         }
-      ), notification.dismissible && /* @__PURE__ */ React13.createElement(
+      ), notification.dismissible && /* @__PURE__ */ React18.createElement(
         IconButton2,
         {
           size: "small",
           onClick: safeOnClose,
           sx: { ml: 1 }
         },
-        /* @__PURE__ */ React13.createElement(Close, { fontSize: "small" })
+        /* @__PURE__ */ React18.createElement(Close, { fontSize: "small" })
       )),
       sx: {
         mb: 1,
@@ -3297,8 +3579,8 @@ var NotificationItem = ({ notification, onClose, onAction }) => {
         }
       }
     },
-    notification.title && /* @__PURE__ */ React13.createElement(AlertTitle, { sx: { fontSize: "0.875rem", mb: 0.5 } }, notification.title),
-    /* @__PURE__ */ React13.createElement(Typography6, { variant: "body2", sx: { fontSize: "0.8rem" } }, notification.message)
+    notification.title && /* @__PURE__ */ React18.createElement(AlertTitle, { sx: { fontSize: "0.875rem", mb: 0.5 } }, notification.title),
+    /* @__PURE__ */ React18.createElement(Typography6, { variant: "body2", sx: { fontSize: "0.8rem" } }, notification.message)
   );
 };
 var NotificationManager = () => {
@@ -3309,7 +3591,7 @@ var NotificationManager = () => {
   if (notifications.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, persistentNotifications.length > 0 && /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, persistentNotifications.length > 0 && /* @__PURE__ */ React18.createElement(
     Box8,
     {
       sx: {
@@ -3323,8 +3605,8 @@ var NotificationManager = () => {
         overflow: "auto"
       }
     },
-    /* @__PURE__ */ React13.createElement(Stack5, { spacing: 1 }, persistentNotifications.length > 1 && /* @__PURE__ */ React13.createElement(Box8, { display: "flex", justifyContent: "flex-end", mb: 1 }, /* @__PURE__ */ React13.createElement(
-      Button2,
+    /* @__PURE__ */ React18.createElement(Stack5, { spacing: 1 }, persistentNotifications.length > 1 && /* @__PURE__ */ React18.createElement(Box8, { display: "flex", justifyContent: "flex-end", mb: 1 }, /* @__PURE__ */ React18.createElement(
+      Button3,
       {
         size: "small",
         variant: "outlined",
@@ -3336,7 +3618,7 @@ var NotificationManager = () => {
       ")"
     )), persistentNotifications.map((notification) => {
       if (!notification || !notification.id) return null;
-      return /* @__PURE__ */ React13.createElement(Fade, { key: `notification-${notification.id}`, in: true, timeout: 300 }, /* @__PURE__ */ React13.createElement(Box8, null, /* @__PURE__ */ React13.createElement(
+      return /* @__PURE__ */ React18.createElement(Fade, { key: `notification-${notification.id}`, in: true, timeout: 300 }, /* @__PURE__ */ React18.createElement(Box8, null, /* @__PURE__ */ React18.createElement(
         NotificationItem,
         {
           notification,
@@ -3344,7 +3626,7 @@ var NotificationManager = () => {
         }
       )));
     }))
-  ), latestTemporary && /* @__PURE__ */ React13.createElement(
+  ), latestTemporary && /* @__PURE__ */ React18.createElement(
     Snackbar,
     {
       key: `temp-notification-${latestTemporary.id}`,
@@ -3360,7 +3642,7 @@ var NotificationManager = () => {
         }
       }
     },
-    /* @__PURE__ */ React13.createElement(Box8, null, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React18.createElement(Box8, null, /* @__PURE__ */ React18.createElement(
       NotificationItem,
       {
         notification: latestTemporary,
@@ -3372,7 +3654,7 @@ var NotificationManager = () => {
 var NotificationManager_default = NotificationManager;
 
 // src/components/Notifications/NotificationBell.js
-import React14, { useState as useState6, useEffect as useEffect5, useCallback as useCallback2 } from "react";
+import React19, { useState as useState6, useEffect as useEffect5, useCallback as useCallback2 } from "react";
 import {
   IconButton as IconButton3,
   Badge as Badge2,
@@ -3384,9 +3666,9 @@ import {
   Avatar as Avatar2,
   ListItemText as ListItemText2,
   ListItemAvatar,
-  List as List2,
+  List as List3,
   ListItem as ListItem2,
-  Button as Button3,
+  Button as Button4,
   Chip as Chip2,
   CircularProgress as CircularProgress3,
   Alert as Alert2
@@ -3467,7 +3749,7 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
     };
     const handleNotificationRead = (notificationId) => {
       setNotifications(
-        (prev) => prev.map((n) => n._id === notificationId ? { ...n, read: true } : n)
+        (prev) => prev.map((n) => (n.id || n._id) === notificationId ? { ...n, is_read: true, read: true } : n)
       );
       setUnreadCount((prev) => Math.max(0, prev - 1));
     };
@@ -3492,7 +3774,7 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
     try {
       await api2.put(`/notifications/${notificationId}/read`);
       setNotifications(
-        (prev) => prev.map((n) => n._id === notificationId ? { ...n, read: true, readAt: /* @__PURE__ */ new Date() } : n)
+        (prev) => prev.map((n) => (n.id || n._id) === notificationId ? { ...n, is_read: true, read: true, read_at: /* @__PURE__ */ new Date(), readAt: /* @__PURE__ */ new Date() } : n)
       );
       setUnreadCount((prev) => Math.max(0, prev - 1));
     } catch (err) {
@@ -3504,7 +3786,7 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
     try {
       await api2.put("/notifications/mark-all-read");
       setNotifications(
-        (prev) => prev.map((n) => ({ ...n, read: true, readAt: /* @__PURE__ */ new Date() }))
+        (prev) => prev.map((n) => ({ ...n, is_read: true, read: true, read_at: /* @__PURE__ */ new Date(), readAt: /* @__PURE__ */ new Date() }))
       );
       setUnreadCount(0);
     } catch (err) {
@@ -3512,11 +3794,14 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
     }
   };
   const handleNotificationClick = async (notification) => {
-    if (!notification.read) {
-      await handleMarkAsRead(notification._id);
+    const isRead = notification.is_read || notification.read;
+    const notifId = notification.id || notification._id;
+    if (!isRead) {
+      await handleMarkAsRead(notifId);
     }
-    if (notification.actionUrl) {
-      window.location.href = notification.actionUrl;
+    const actionUrl = notification.action_url || notification.actionUrl;
+    if (actionUrl) {
+      window.location.href = actionUrl;
     }
     handleClose();
   };
@@ -3534,30 +3819,30 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
       case "TICKET_RESOLVED":
       case "TICKET_COMMENTED":
       case "TICKET_STATUS_CHANGED":
-        return /* @__PURE__ */ React14.createElement(Assignment, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(Assignment, { ...iconProps });
       case "MESSAGE_RECEIVED":
       case "MENTION_RECEIVED":
-        return /* @__PURE__ */ React14.createElement(Message, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(Message, { ...iconProps });
       case "PAYMENT_DUE":
       case "PAYMENT_OVERDUE":
-        return /* @__PURE__ */ React14.createElement(Payment, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(Payment, { ...iconProps });
       case "PROPERTY_UPDATED":
       case "LEASE_EXPIRING":
-        return /* @__PURE__ */ React14.createElement(Home, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(Home, { ...iconProps });
       case "APPLIANCE_MAINTENANCE_DUE":
       case "MAINTENANCE_SCHEDULED":
-        return /* @__PURE__ */ React14.createElement(Build, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(Build, { ...iconProps });
       case "SYSTEM_ALERT":
-        return /* @__PURE__ */ React14.createElement(Warning2, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(Warning2, { ...iconProps });
       case "SUCCESS":
-        return /* @__PURE__ */ React14.createElement(CheckCircle2, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(CheckCircle2, { ...iconProps });
       case "ERROR":
-        return /* @__PURE__ */ React14.createElement(ErrorIcon, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(ErrorIcon, { ...iconProps });
       case "WARNING":
-        return /* @__PURE__ */ React14.createElement(Warning2, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(Warning2, { ...iconProps });
       case "INFO":
       default:
-        return /* @__PURE__ */ React14.createElement(Info2, { ...iconProps });
+        return /* @__PURE__ */ React19.createElement(Info2, { ...iconProps });
     }
   };
   const getNotificationColor = (type) => {
@@ -3572,7 +3857,7 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
       HIGH: "warning",
       URGENT: "error"
     };
-    return /* @__PURE__ */ React14.createElement(
+    return /* @__PURE__ */ React19.createElement(
       Chip2,
       {
         label: priority,
@@ -3582,7 +3867,7 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
       }
     );
   };
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
     IconButton3,
     {
       color: "inherit",
@@ -3594,16 +3879,16 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
         }
       }
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React19.createElement(
       Badge2,
       {
         badgeContent: unreadCount,
         color: "error",
         max: 99
       },
-      unreadCount > 0 ? /* @__PURE__ */ React14.createElement(NotificationsIcon, null) : /* @__PURE__ */ React14.createElement(NotificationsNone, null)
+      unreadCount > 0 ? /* @__PURE__ */ React19.createElement(NotificationsIcon, null) : /* @__PURE__ */ React19.createElement(NotificationsNone, null)
     )
-  ), /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React19.createElement(
     Menu2,
     {
       anchorEl,
@@ -3621,7 +3906,7 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
       transformOrigin: { horizontal: "right", vertical: "top" },
       anchorOrigin: { horizontal: "right", vertical: "bottom" }
     },
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React19.createElement(
       Box9,
       {
         sx: {
@@ -3634,7 +3919,7 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
           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(
+      /* @__PURE__ */ React19.createElement(Box9, { sx: { display: "flex", alignItems: "center", gap: 1 } }, /* @__PURE__ */ React19.createElement(NotificationsIcon, { color: "primary" }), /* @__PURE__ */ React19.createElement(Typography7, { variant: "h6", sx: { fontWeight: 600 } }, "Notifications"), unreadCount > 0 && /* @__PURE__ */ React19.createElement(
         Chip2,
         {
           label: unreadCount,
@@ -3643,19 +3928,19 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
           sx: { height: 22, fontSize: "0.75rem" }
         }
       )),
-      /* @__PURE__ */ React14.createElement(Box9, null, unreadCount > 0 && /* @__PURE__ */ React14.createElement(
-        Button3,
+      /* @__PURE__ */ React19.createElement(Box9, null, unreadCount > 0 && /* @__PURE__ */ React19.createElement(
+        Button4,
         {
           size: "small",
-          startIcon: /* @__PURE__ */ React14.createElement(DoneAll, null),
+          startIcon: /* @__PURE__ */ React19.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" })))
+      ), /* @__PURE__ */ React19.createElement(IconButton3, { size: "small", onClick: handleClose }, /* @__PURE__ */ React19.createElement(Close2, { fontSize: "small" })))
     ),
-    error && /* @__PURE__ */ React14.createElement(Alert2, { severity: "error", sx: { m: 2 } }, error),
-    /* @__PURE__ */ React14.createElement(
+    error && /* @__PURE__ */ React19.createElement(Alert2, { severity: "error", sx: { m: 2 } }, error),
+    /* @__PURE__ */ React19.createElement(
       Box9,
       {
         sx: {
@@ -3664,7 +3949,7 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
           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(
+      loading && notifications.length === 0 ? /* @__PURE__ */ React19.createElement(Box9, { sx: { display: "flex", justifyContent: "center", p: 4 } }, /* @__PURE__ */ React19.createElement(CircularProgress3, { size: 32 })) : notifications.length === 0 ? /* @__PURE__ */ React19.createElement(
         Box9,
         {
           sx: {
@@ -3676,71 +3961,76 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
             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,
+        /* @__PURE__ */ React19.createElement(NotificationsNone, { sx: { fontSize: 64, color: "text.secondary", mb: 2 } }),
+        /* @__PURE__ */ React19.createElement(Typography7, { variant: "body1", color: "text.secondary", sx: { fontWeight: 500 } }, "No notifications yet"),
+        /* @__PURE__ */ React19.createElement(Typography7, { variant: "body2", color: "text.secondary" }, "You're all caught up!")
+      ) : /* @__PURE__ */ React19.createElement(List3, { sx: { p: 0 } }, notifications.map((notification, index) => {
+        const isRead = notification.is_read || notification.read;
+        const notifId = notification.id || notification._id;
+        const createdAt = notification.created_at || notification.createdAt;
+        return /* @__PURE__ */ React19.createElement(React19.Fragment, { key: notifId }, /* @__PURE__ */ React19.createElement(
+          ListItem2,
           {
+            button: true,
+            onClick: () => handleNotificationClick(notification),
             sx: {
-              bgcolor: notification.read ? "grey.300" : getNotificationColor(notification.type),
-              width: 40,
-              height: 40
+              py: 1.5,
+              px: 2,
+              bgcolor: isRead ? "transparent" : "action.hover",
+              "&:hover": {
+                bgcolor: isRead ? "action.hover" : "action.selected"
+              },
+              borderLeft: isRead ? "none" : "3px solid",
+              borderLeftColor: getNotificationColor(notification.type),
+              transition: "all 0.2s"
             }
           },
-          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,
+          /* @__PURE__ */ React19.createElement(ListItemAvatar, null, /* @__PURE__ */ React19.createElement(
+            Avatar2,
+            {
+              sx: {
+                bgcolor: isRead ? "grey.300" : getNotificationColor(notification.type),
+                width: 40,
+                height: 40
+              }
+            },
+            getNotificationIcon(notification.type)
+          )),
+          /* @__PURE__ */ React19.createElement(
+            ListItemText2,
+            {
+              primary: /* @__PURE__ */ React19.createElement(Box9, { sx: { display: "flex", alignItems: "center", mb: 0.5 } }, /* @__PURE__ */ React19.createElement(
+                Typography7,
+                {
+                  variant: "body2",
+                  sx: {
+                    fontWeight: isRead ? 400 : 600,
+                    flex: 1
+                  }
+                },
+                notification.title
+              ), getPriorityChip(notification.priority)),
+              secondary: /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+                Typography7,
+                {
+                  variant: "body2",
+                  color: "text.secondary",
+                  sx: {
+                    display: "-webkit-box",
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden",
+                    mb: 0.5
+                  }
+                },
+                notification.message
+              ), /* @__PURE__ */ React19.createElement(Typography7, { variant: "caption", color: "text.secondary" }, formatDistanceToNow(new Date(createdAt), { addSuffix: true })))
+            }
+          )
+        ), index < notifications.length - 1 && /* @__PURE__ */ React19.createElement(Divider2, null));
+      })),
+      hasMore && notifications.length > 0 && /* @__PURE__ */ React19.createElement(Box9, { sx: { p: 2, textAlign: "center", borderTop: "1px solid", borderColor: "divider" } }, /* @__PURE__ */ React19.createElement(
+        Button4,
         {
           onClick: handleLoadMore,
           disabled: loading,
@@ -3750,7 +4040,7 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
         loading ? "Loading..." : "Load more"
       ))
     ),
-    /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React19.createElement(
       Box9,
       {
         sx: {
@@ -3760,11 +4050,11 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
           textAlign: "center"
         }
       },
-      /* @__PURE__ */ React14.createElement(
-        Button3,
+      /* @__PURE__ */ React19.createElement(
+        Button4,
         {
           size: "small",
-          startIcon: /* @__PURE__ */ React14.createElement(SettingsIcon, null),
+          startIcon: /* @__PURE__ */ React19.createElement(SettingsIcon, null),
           onClick: () => {
             window.location.href = "/settings?tab=general";
             handleClose();
@@ -3779,13 +4069,13 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
 var NotificationBell_default = NotificationBell;
 
 // src/components/ErrorBoundary/ErrorBoundary.js
-import React15 from "react";
+import React20 from "react";
 import {
   Box as Box10,
   Typography as Typography8,
-  Button as Button4,
-  Card as Card2,
-  CardContent as CardContent2,
+  Button as Button5,
+  Card as Card3,
+  CardContent as CardContent3,
   Alert as Alert3,
   Stack as Stack6
 } from "@mui/material";
@@ -3794,7 +4084,7 @@ import {
   BugReport,
   Home as Home2
 } from "@mui/icons-material";
-var ErrorBoundary = class extends React15.Component {
+var ErrorBoundary = class extends React20.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -3835,7 +4125,7 @@ var ErrorBoundary = class extends React15.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__ */ React15.createElement(
+      return /* @__PURE__ */ React20.createElement(
         Box10,
         {
           sx: {
@@ -3847,32 +4137,32 @@ var ErrorBoundary = class extends React15.Component {
             p: 3
           }
         },
-        /* @__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,
+        /* @__PURE__ */ React20.createElement(Card3, { sx: { maxWidth: 600, width: "100%" } }, /* @__PURE__ */ React20.createElement(CardContent3, null, /* @__PURE__ */ React20.createElement(Stack6, { spacing: 3, alignItems: "center" }, /* @__PURE__ */ React20.createElement(BugReport, { sx: { fontSize: 64, color: "error.main" } }), /* @__PURE__ */ React20.createElement(Typography8, { variant: "h5", component: "h2", textAlign: "center" }, "Oops! Something went wrong"), /* @__PURE__ */ React20.createElement(Alert3, { severity: "error", sx: { width: "100%" } }, /* @__PURE__ */ React20.createElement(Typography8, { variant: "body2" }, isNavigationError && /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement("strong", null, "UI Component Error:"), " A component tried to access an element before it was ready. This is usually temporary."), isDOMError && !isNavigationError && /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement("strong", null, "DOM Error:"), " A component couldn't find an expected element. This might be due to rapid state changes."), !isNavigationError && !isDOMError && /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement("strong", null, "Application Error:"), " An unexpected error occurred while rendering the component."))), process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ React20.createElement(Alert3, { severity: "warning", sx: { width: "100%" } }, /* @__PURE__ */ React20.createElement(Typography8, { variant: "body2", component: "div" }, /* @__PURE__ */ React20.createElement("strong", null, "Debug Info:"), /* @__PURE__ */ React20.createElement("br", null), /* @__PURE__ */ React20.createElement("code", { style: { fontSize: "0.75rem", wordBreak: "break-word" } }, this.state.error.toString()))), /* @__PURE__ */ React20.createElement(Stack6, { direction: "row", spacing: 2 }, /* @__PURE__ */ React20.createElement(
+          Button5,
           {
             variant: "contained",
-            startIcon: /* @__PURE__ */ React15.createElement(Refresh2, null),
+            startIcon: /* @__PURE__ */ React20.createElement(Refresh2, null),
             onClick: this.handleRetry,
             color: "primary"
           },
           "Try Again"
-        ), /* @__PURE__ */ React15.createElement(
-          Button4,
+        ), /* @__PURE__ */ React20.createElement(
+          Button5,
           {
             variant: "outlined",
-            startIcon: /* @__PURE__ */ React15.createElement(Refresh2, null),
+            startIcon: /* @__PURE__ */ React20.createElement(Refresh2, null),
             onClick: this.handleReload
           },
           "Reload Page"
-        ), this.props.onNavigateHome && /* @__PURE__ */ React15.createElement(
-          Button4,
+        ), this.props.onNavigateHome && /* @__PURE__ */ React20.createElement(
+          Button5,
           {
             variant: "outlined",
-            startIcon: /* @__PURE__ */ React15.createElement(Home2, null),
+            startIcon: /* @__PURE__ */ React20.createElement(Home2, null),
             onClick: this.props.onNavigateHome
           },
           "Go Home"
-        )), /* @__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."))))
+        )), /* @__PURE__ */ React20.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;
@@ -3881,7 +4171,7 @@ var ErrorBoundary = class extends React15.Component {
 var ErrorBoundary_default = ErrorBoundary;
 
 // src/contexts/SocketContext.js
-import React16, { createContext as createContext5, useContext as useContext5, useEffect as useEffect6, useState as useState7 } from "react";
+import React21, { 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 = () => {
@@ -3904,7 +4194,7 @@ var SocketProvider = ({ children }) => {
     if (user || tenantToken) {
       const userType = user ? "property_manager" : "tenant";
       const authToken = user ? localStorage.getItem("token") : tenantToken;
-      const socketUrl = process.env.REACT_APP_API_URL ? process.env.REACT_APP_API_URL.replace("/api", "") : "http://localhost:5000";
+      const socketUrl = process.env.REACT_APP_API_URL ? process.env.REACT_APP_API_URL.replace("/api", "") : `${window.location.protocol}//${window.location.hostname}:5000`;
       const newSocket = io(socketUrl, {
         auth: {
           token: authToken,
@@ -3927,7 +4217,7 @@ var SocketProvider = ({ children }) => {
     socket,
     isConnected
   };
-  return /* @__PURE__ */ React16.createElement(SocketContext.Provider, { value }, children);
+  return /* @__PURE__ */ React21.createElement(SocketContext.Provider, { value }, children);
 };
 
 // src/hooks/useNotifications.js
@@ -5397,10 +5687,30 @@ var isTenantAuthenticated = () => {
 export {
   AuthLayout_default as AuthLayout,
   AuthProvider,
+  Blockquote,
+  Button2 as Button,
+  Card2 as Card,
+  CardContent2 as CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
   CustomThemeProvider,
   ErrorBoundary_default as ErrorBoundary,
+  H1,
+  H2,
+  H3,
+  H4,
+  Heading,
+  InlineCode,
+  Input,
+  Label,
+  Large,
+  Lead,
+  List2 as List,
   LoadingSpinner_default as LoadingSpinner,
   ModernCard_default as ModernCard,
+  Muted,
   NOTIFICATION_CHANNELS,
   NOTIFICATION_TYPES,
   Navbar_default as Navbar,
@@ -5408,13 +5718,17 @@ export {
   NotificationManager_default as NotificationManager,
   NotificationPatterns,
   NotificationProvider,
+  P,
   PageHeader_default as PageHeader,
   PageLayout_default as PageLayout,
+  Small,
   SocketProvider,
   TenantLayout_default as TenantLayout,
   TenantThemeProvider,
   api,
   auditNotifications,
+  buttonVariants,
+  cn,
   createContrastEnhancedComponents,
   createNotificationAwareAPI,
   darkenColor,