@propknot/shared-ui 1.0.24 → 1.0.26

package/dist/index.js

@@ -204,10 +204,30 @@ var index_exports = {};
 __export(index_exports, {
   AuthLayout: () => AuthLayout_default,
   AuthProvider: () => AuthProvider,
+  Blockquote: () => Blockquote,
+  Button: () => Button2,
+  Card: () => Card2,
+  CardContent: () => CardContent2,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
   CustomThemeProvider: () => CustomThemeProvider,
   ErrorBoundary: () => ErrorBoundary_default,
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  Heading: () => Heading,
+  InlineCode: () => InlineCode,
+  Input: () => Input,
+  Label: () => Label,
+  Large: () => Large,
+  Lead: () => Lead,
+  List: () => List2,
   LoadingSpinner: () => LoadingSpinner_default,
   ModernCard: () => ModernCard_default,
+  Muted: () => Muted,
   NOTIFICATION_CHANNELS: () => NOTIFICATION_CHANNELS,
   NOTIFICATION_TYPES: () => NOTIFICATION_TYPES,
   Navbar: () => Navbar_default,
@@ -215,13 +235,17 @@ __export(index_exports, {
   NotificationManager: () => NotificationManager_default,
   NotificationPatterns: () => NotificationPatterns,
   NotificationProvider: () => NotificationProvider,
+  P: () => P,
   PageHeader: () => PageHeader_default,
   PageLayout: () => PageLayout_default,
+  Small: () => Small,
   SocketProvider: () => SocketProvider,
   TenantLayout: () => TenantLayout_default,
   TenantThemeProvider: () => TenantThemeProvider,
   api: () => api,
   auditNotifications: () => auditNotifications,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn,
   createContrastEnhancedComponents: () => createContrastEnhancedComponents,
   createNotificationAwareAPI: () => createNotificationAwareAPI,
   darkenColor: () => darkenColor,
@@ -277,6 +301,13 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/lib/utils.js
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
 // src/components/Navigation/Navbar.js
 var import_react4 = __toESM(require("react"));
 var import_material = require("@mui/material");
@@ -3231,6 +3262,281 @@ var ModernCardContent = ({ children, sx = {}, ...props }) => {
 ModernCard.Content = ModernCardContent;
 var ModernCard_default = ModernCard;
 
+// src/components/UI/button.jsx
+var React13 = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var buttonVariants = (0, import_class_variance_authority.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 ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ React13.createElement(
+    Comp,
+    {
+      className: cn(buttonVariants({ variant, size, className })),
+      ref,
+      ...props
+    }
+  );
+});
+Button2.displayName = "Button";
+
+// src/components/UI/card.jsx
+var React14 = __toESM(require("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
+var React15 = __toESM(require("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
+var React16 = __toESM(require("react"));
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"));
+var import_class_variance_authority2 = require("class-variance-authority");
+var labelVariants = (0, import_class_variance_authority2.cva)(
+  "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
+var React17 = __toESM(require("react"));
+var import_class_variance_authority3 = require("class-variance-authority");
+var headingVariants = (0, import_class_variance_authority3.cva)("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
 var import_react12 = __toESM(require("react"));
 var import_material8 = require("@mui/material");
@@ -3464,7 +3770,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));
     };
@@ -3489,7 +3795,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) {
@@ -3501,7 +3807,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) {
@@ -3509,11 +3815,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();
   };
@@ -3676,66 +3985,71 @@ var NotificationBell = ({ api: api2, useSocket: useSocket2, useAuth: useAuth2 })
         /* @__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,
+      ) : /* @__PURE__ */ import_react13.default.createElement(import_material9.List, { 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__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: notifId }, /* @__PURE__ */ import_react13.default.createElement(
+          import_material9.ListItem,
           {
+            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__ */ 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)))),
+          /* @__PURE__ */ import_react13.default.createElement(import_material9.ListItemAvatar, null, /* @__PURE__ */ import_react13.default.createElement(
+            import_material9.Avatar,
+            {
+              sx: {
+                bgcolor: isRead ? "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: isRead ? 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(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,
         {
@@ -3889,7 +4203,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 = (0, import_socket.io)(socketUrl, {
         auth: {
           token: authToken,
@@ -5383,10 +5697,30 @@ var isTenantAuthenticated = () => {
 0 && (module.exports = {
   AuthLayout,
   AuthProvider,
+  Blockquote,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
   CustomThemeProvider,
   ErrorBoundary,
+  H1,
+  H2,
+  H3,
+  H4,
+  Heading,
+  InlineCode,
+  Input,
+  Label,
+  Large,
+  Lead,
+  List,
   LoadingSpinner,
   ModernCard,
+  Muted,
   NOTIFICATION_CHANNELS,
   NOTIFICATION_TYPES,
   Navbar,
@@ -5394,13 +5728,17 @@ var isTenantAuthenticated = () => {
   NotificationManager,
   NotificationPatterns,
   NotificationProvider,
+  P,
   PageHeader,
   PageLayout,
+  Small,
   SocketProvider,
   TenantLayout,
   TenantThemeProvider,
   api,
   auditNotifications,
+  buttonVariants,
+  cn,
   createContrastEnhancedComponents,
   createNotificationAwareAPI,
   darkenColor,