@dashadmin/dash-components 1.3.25 → 1.3.28

package/dist/components/notifications/NotificationsCenter.js

@@ -1 +1,597 @@
-import{Fragment as ut,jsx as o,jsxs as d}from"react/jsx-runtime";import{useState as w,useCallback as x,useEffect as X}from"react";import{Button as z,Badge as j,Menu as G,MenuItem as E,Typography as b,Divider as q,Box as y,IconButton as M,Chip as B,Snackbar as J,Alert as K,Stack as Q,Paper as V,Portal as _}from"@mui/material";import{NotificationsNone as tt,NotificationsActive as H,Close as L,Clear as ot,Person as et,Store as it,DragIndicator as nt}from"@mui/icons-material";const R={maxNotifications:50,toastAutoHideDuration:8e3,baseZIndex:1e5,menuMaxHeight:480,menuWidth:360,labels:{title:"Notifications",markAll:"Mark all",noNotifications:"No notifications",close:"Close",acknowledge:"Got it",customer:"Customer:",store:"Store:",received:"Received:",now:"Now",minutesAgo:"m",hoursAgo:"h",daysAgo:"d"},icons:{}},$=(t,i)=>{const l=new Date,e=new Date(t),n=Math.floor((l.getTime()-e.getTime())/(1e3*60)),m={...R.labels,...i};return n<1?m.now||"Now":n<60?`${n}${m.minutesAgo}`:n<1440?`${Math.floor(n/60)}${m.hoursAgo}`:`${Math.floor(n/1440)}${m.daysAgo}`},at=()=>`${Date.now()}-${Math.random().toString(36).substr(2,9)}`,st=(t={})=>{const i={...R,...t},[l,e]=w([]),[n,m]=w([]),[v,f]=w([]),u=l.filter(a=>!a.isRead).length,s=x((a,r={})=>{const{showDialog:c=!0,showToast:N=!0,toastSeverity:Z="warning"}=r,D={...a,id:at(),timestamp:new Date().toISOString(),isRead:!1};if(e(I=>[D,...I.slice(0,i.maxNotifications-1)]),c&&f(I=>{const T=I.length,O=20,W=typeof window<"u"?window.innerHeight-250:600,Y=T*-220,U={...D,position:{x:O,y:W+Y},zIndex:i.baseZIndex+T+1};return[...I,U]}),N){const I=`toast-${D.id}`;m(T=>[...T,{id:I,title:D.title,message:`${D.customer||""} ${D.store?`- ${D.store}`:""}`.trim(),severity:Z}])}},[i.maxNotifications,i.baseZIndex]),p=x(a=>{e(r=>r.map(c=>c.id===a?{...c,isRead:!0}:c))},[]),k=x(()=>{e(a=>a.map(r=>({...r,isRead:!0})))},[]),h=x(a=>{e(r=>r.filter(c=>c.id!==a))},[]),C=x(()=>{e([])},[]),A=x(a=>{m(r=>r.filter(c=>c.id!==a))},[]),g=x(a=>{f(r=>r.filter(c=>c.id!==a)),p(a)},[p]),P=x(a=>{p(a),f(r=>r.filter(c=>c.id!==a))},[p]),S=x(a=>{f(r=>{const c=Math.max(...r.map(N=>N.zIndex),i.baseZIndex);return r.map(N=>N.id===a?{...N,zIndex:c+1}:N)})},[i.baseZIndex]),F=x((a,r)=>{f(c=>c.map(N=>N.id===a?{...N,position:r}:N))},[]);return{notifications:l,toastNotifications:n,dialogNotifications:v,unreadCount:u,addNotification:s,markAsRead:p,markAllAsRead:k,removeNotification:h,clearAllNotifications:C,closeToast:A,closeDialog:g,acknowledgeDialog:P,bringDialogToFront:S,updateDialogPosition:F}},rt=({unreadCount:t,onClick:i,icons:l})=>o(M,{onClick:i,"aria-label":"notifications",color:"inherit",children:o(j,{badgeContent:t,color:"error",max:99,children:t>0?l?.active||o(H,{}):l?.empty||o(tt,{})})}),lt=({notification:t,onMarkAsRead:i,onRemove:l,formatTimeAgo:e})=>o(E,{onClick:()=>i(t.id),sx:{backgroundColor:t.isRead?"transparent":"action.hover",borderLeft:t.isRead?"none":"4px solid #ff9800",whiteSpace:"normal",alignItems:"flex-start",py:1.5},children:d(y,{sx:{width:"100%"},children:[d(y,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",mb:.5},children:[o(b,{variant:"subtitle2",sx:{fontWeight:t.isRead?"normal":"bold"},children:t.title}),d(y,{sx:{display:"flex",alignItems:"center",gap:.5},children:[o(b,{variant:"caption",color:"text.secondary",children:e(t.timestamp)}),o(M,{size:"small",onClick:n=>{n.stopPropagation(),l(t.id)},children:o(L,{fontSize:"small"})})]})]}),o(b,{variant:"body2",color:"text.secondary",sx:{mb:1},children:t.message}),d(y,{sx:{display:"flex",gap:.5,flexWrap:"wrap"},children:[t.customer&&o(B,{label:t.customer,size:"small",variant:"outlined",color:"primary"}),t.store&&o(B,{label:t.store,size:"small",variant:"outlined",color:"secondary"})]})]})}),ct=({anchorEl:t,notifications:i,onClose:l,onMarkAsRead:e,onMarkAllAsRead:n,onRemove:m,onClearAll:v,config:f={}})=>{const u={...R,...f},s={...R.labels,...f.labels},p=!!t,k=i.filter(h=>!h.isRead).length;return d(G,{anchorEl:t,open:p,onClose:l,PaperProps:{style:{maxHeight:u.menuMaxHeight,width:u.menuWidth}},transformOrigin:{horizontal:"right",vertical:"top"},anchorOrigin:{horizontal:"right",vertical:"bottom"},children:[d(y,{sx:{p:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[o(b,{variant:"h6",children:s.title}),i.length>0&&d(y,{children:[k>0&&o(z,{size:"small",onClick:n,sx:{mr:1},children:s.markAll}),o(M,{size:"small",onClick:v,children:o(ot,{fontSize:"small"})})]})]}),o(q,{}),i.length===0?o(E,{disabled:!0,children:o(b,{color:"text.secondary",children:s.noNotifications})}):i.map(h=>o(lt,{notification:h,onMarkAsRead:e,onRemove:m,formatTimeAgo:C=>$(C,s)},h.id))]})},dt=({toasts:t,onClose:i,autoHideDuration:l=8e3,baseZIndex:e=1e5})=>o(Q,{spacing:1,sx:{position:"fixed",top:16,right:16,zIndex:e,maxWidth:400},children:t.map(n=>o(J,{open:!0,autoHideDuration:l,onClose:()=>i(n.id),anchorOrigin:{vertical:"top",horizontal:"right"},sx:{position:"relative",zIndex:e},children:d(K,{onClose:()=>i(n.id),severity:n.severity,variant:"filled",sx:{width:"100%"},children:[o(b,{variant:"subtitle2",children:n.title}),o(b,{variant:"body2",children:n.message})]})},n.id))}),gt=({notification:t,onClose:i,onAcknowledge:l,onFocus:e,onPositionChange:n,config:m={}})=>{const v={...R.labels,...m.labels},f={...R.icons,...m.icons},[u,s]=w(!1),[p,k]=w({x:0,y:0}),h=x(g=>{g.target.closest(".drag-handle")&&(g.preventDefault(),e(),s(!0),k({x:g.clientX-t.position.x,y:g.clientY-t.position.y}))},[e,t.position]),C=x(g=>{if(u){g.preventDefault();const P=Math.max(0,Math.min(window.innerWidth-400,g.clientX-p.x)),S=Math.max(0,Math.min(window.innerHeight-200,g.clientY-p.y));n({x:P,y:S})}},[u,p,n]),A=x(()=>{u&&s(!1)},[u]);return X(()=>{if(u)return document.addEventListener("mousemove",C),document.addEventListener("mouseup",A),document.body.style.userSelect="none",()=>{document.removeEventListener("mousemove",C),document.removeEventListener("mouseup",A),document.body.style.userSelect=""}},[u,C,A]),o(_,{children:o("div",{style:{position:"fixed",left:t.position.x,top:t.position.y,zIndex:t.zIndex,pointerEvents:"auto"},onMouseDown:h,children:d(V,{elevation:8,sx:{width:400,borderRadius:2,overflow:"hidden",boxShadow:"0 8px 32px rgba(0,0,0,0.24)",cursor:u?"grabbing":"default","&:hover":{boxShadow:"0 12px 40px rgba(0,0,0,0.3)"}},children:[d(y,{className:"drag-handle",sx:{backgroundColor:"warning.main",color:"warning.contrastText",p:2,display:"flex",alignItems:"center",gap:1,cursor:u?"grabbing":"grab",userSelect:"none"},children:[o(nt,{sx:{mr:1}}),o(H,{}),o(b,{variant:"h6",sx:{flexGrow:1,fontSize:"1rem"},children:t.title}),o(M,{size:"small",onClick:g=>{g.stopPropagation(),i()},sx:{color:"warning.contrastText"},children:o(L,{fontSize:"small"})})]}),d(y,{sx:{p:2},children:[o(b,{variant:"body1",sx:{mb:2},children:t.message}),d(y,{sx:{display:"flex",flexDirection:"column",gap:1.5},children:[t.customer&&d(y,{sx:{display:"flex",alignItems:"center",gap:1},children:[f.customer||o(et,{color:"primary"}),o(b,{variant:"body2",color:"text.secondary",children:v.customer}),o(B,{label:t.customer,size:"small",color:"primary",variant:"outlined"})]}),t.store&&d(y,{sx:{display:"flex",alignItems:"center",gap:1},children:[f.store||o(it,{color:"secondary"}),o(b,{variant:"body2",color:"text.secondary",children:v.store}),o(B,{label:t.store,size:"small",color:"secondary",variant:"outlined"})]}),o(y,{sx:{display:"flex",alignItems:"center",gap:1,mt:1},children:d(b,{variant:"caption",color:"text.secondary",children:[v.received," ",$(t.timestamp,v)]})})]})]}),d(y,{sx:{p:2,pt:0,display:"flex",gap:1,justifyContent:"flex-end"},children:[o(z,{onClick:g=>{g.stopPropagation(),i()},color:"inherit",variant:"outlined",size:"small",children:v.close}),o(z,{onClick:g=>{g.stopPropagation(),l()},color:"primary",variant:"contained",size:"small",children:v.acknowledge})]})]})})})},mt=({config:t={},notificationsHook:i})=>{const l=st(t),e=i||l,[n,m]=w(null),v=s=>{m(s.currentTarget)},f=()=>{m(null)},u=()=>{e.clearAllNotifications(),f()};return d(ut,{children:[o(rt,{unreadCount:e.unreadCount,onClick:v,icons:t.icons}),o(ct,{anchorEl:n,notifications:e.notifications,onClose:f,onMarkAsRead:e.markAsRead,onMarkAllAsRead:e.markAllAsRead,onRemove:e.removeNotification,onClearAll:u,config:t}),e.dialogNotifications.map(s=>o(gt,{notification:s,onClose:()=>e.closeDialog(s.id),onAcknowledge:()=>e.acknowledgeDialog(s.id),onFocus:()=>e.bringDialogToFront(s.id),onPositionChange:p=>e.updateDialogPosition(s.id,p),config:t},s.id)),o(dt,{toasts:e.toastNotifications,onClose:e.closeToast,autoHideDuration:t.toastAutoHideDuration,baseZIndex:t.baseZIndex})]})};var vt=mt;export{gt as DraggableNotificationDialog,rt as NotificationButton,lt as NotificationMenuItem,mt as NotificationsCenter,ct as NotificationsMenu,dt as ToastNotificationsStack,vt as default,$ as formatTimeAgo,at as generateNotificationId,st as useNotificationsCenter};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import {
+  Button,
+  Badge,
+  Menu,
+  MenuItem,
+  Typography,
+  Divider,
+  Box,
+  IconButton,
+  Chip,
+  Snackbar,
+  Alert,
+  Stack,
+  Paper,
+  Portal
+} from "@mui/material";
+import {
+  NotificationsNone,
+  NotificationsActive,
+  Close as CloseIcon,
+  Clear as ClearIcon,
+  Person as PersonIcon,
+  Store as StoreIcon,
+  DragIndicator as DragIcon
+} from "@mui/icons-material";
+const defaultConfig = {
+  maxNotifications: 50,
+  toastAutoHideDuration: 8e3,
+  baseZIndex: 1e5,
+  menuMaxHeight: 480,
+  menuWidth: 360,
+  labels: {
+    title: "Notifications",
+    markAll: "Mark all",
+    noNotifications: "No notifications",
+    close: "Close",
+    acknowledge: "Got it",
+    customer: "Customer:",
+    store: "Store:",
+    received: "Received:",
+    now: "Now",
+    minutesAgo: "m",
+    hoursAgo: "h",
+    daysAgo: "d"
+  },
+  icons: {}
+};
+const formatTimeAgo = (timestamp, labels) => {
+  const now = /* @__PURE__ */ new Date();
+  const notificationTime = new Date(timestamp);
+  const diffInMinutes = Math.floor((now.getTime() - notificationTime.getTime()) / (1e3 * 60));
+  const l = __spreadValues(__spreadValues({}, defaultConfig.labels), labels);
+  if (diffInMinutes < 1) return l.now || "Now";
+  if (diffInMinutes < 60) return `${diffInMinutes}${l.minutesAgo}`;
+  if (diffInMinutes < 1440) return `${Math.floor(diffInMinutes / 60)}${l.hoursAgo}`;
+  return `${Math.floor(diffInMinutes / 1440)}${l.daysAgo}`;
+};
+const generateNotificationId = () => {
+  return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+};
+const useNotificationsCenter = (config = {}) => {
+  const mergedConfig = __spreadValues(__spreadValues({}, defaultConfig), config);
+  const [notifications, setNotifications] = useState([]);
+  const [toastNotifications, setToastNotifications] = useState([]);
+  const [dialogNotifications, setDialogNotifications] = useState([]);
+  const unreadCount = notifications.filter((n) => !n.isRead).length;
+  const addNotification = useCallback((notification, options = {}) => {
+    const { showDialog = true, showToast = true, toastSeverity = "warning" } = options;
+    const processedNotification = __spreadProps(__spreadValues({}, notification), {
+      id: generateNotificationId(),
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      isRead: false
+    });
+    setNotifications((prev) => [processedNotification, ...prev.slice(0, mergedConfig.maxNotifications - 1)]);
+    if (showDialog) {
+      setDialogNotifications((prev) => {
+        const dialogCount = prev.length;
+        const baseX = 20;
+        const baseY = typeof window !== "undefined" ? window.innerHeight - 250 : 600;
+        const offsetY = dialogCount * -220;
+        const dialogNotification = __spreadProps(__spreadValues({}, processedNotification), {
+          position: { x: baseX, y: baseY + offsetY },
+          zIndex: mergedConfig.baseZIndex + dialogCount + 1
+        });
+        return [...prev, dialogNotification];
+      });
+    }
+    if (showToast) {
+      const toastId = `toast-${processedNotification.id}`;
+      setToastNotifications((prev) => [...prev, {
+        id: toastId,
+        title: processedNotification.title,
+        message: `${processedNotification.customer || ""} ${processedNotification.store ? `- ${processedNotification.store}` : ""}`.trim(),
+        severity: toastSeverity
+      }]);
+    }
+  }, [mergedConfig.maxNotifications, mergedConfig.baseZIndex]);
+  const markAsRead = useCallback((notificationId) => {
+    setNotifications(
+      (prev) => prev.map((n) => n.id === notificationId ? __spreadProps(__spreadValues({}, n), { isRead: true }) : n)
+    );
+  }, []);
+  const markAllAsRead = useCallback(() => {
+    setNotifications((prev) => prev.map((n) => __spreadProps(__spreadValues({}, n), { isRead: true })));
+  }, []);
+  const removeNotification = useCallback((notificationId) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== notificationId));
+  }, []);
+  const clearAllNotifications = useCallback(() => {
+    setNotifications([]);
+  }, []);
+  const closeToast = useCallback((toastId) => {
+    setToastNotifications((prev) => prev.filter((t) => t.id !== toastId));
+  }, []);
+  const closeDialog = useCallback((notificationId) => {
+    setDialogNotifications((prev) => prev.filter((d) => d.id !== notificationId));
+    markAsRead(notificationId);
+  }, [markAsRead]);
+  const acknowledgeDialog = useCallback((notificationId) => {
+    markAsRead(notificationId);
+    setDialogNotifications((prev) => prev.filter((d) => d.id !== notificationId));
+  }, [markAsRead]);
+  const bringDialogToFront = useCallback((notificationId) => {
+    setDialogNotifications((prev) => {
+      const maxZ = Math.max(...prev.map((p) => p.zIndex), mergedConfig.baseZIndex);
+      return prev.map(
+        (d) => d.id === notificationId ? __spreadProps(__spreadValues({}, d), { zIndex: maxZ + 1 }) : d
+      );
+    });
+  }, [mergedConfig.baseZIndex]);
+  const updateDialogPosition = useCallback((notificationId, newPosition) => {
+    setDialogNotifications(
+      (prev) => prev.map(
+        (d) => d.id === notificationId ? __spreadProps(__spreadValues({}, d), { position: newPosition }) : d
+      )
+    );
+  }, []);
+  return {
+    notifications,
+    toastNotifications,
+    dialogNotifications,
+    unreadCount,
+    addNotification,
+    markAsRead,
+    markAllAsRead,
+    removeNotification,
+    clearAllNotifications,
+    closeToast,
+    closeDialog,
+    acknowledgeDialog,
+    bringDialogToFront,
+    updateDialogPosition
+  };
+};
+const NotificationButton = ({
+  unreadCount,
+  onClick,
+  icons
+}) => {
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      onClick,
+      "aria-label": "notifications",
+      color: "inherit",
+      children: /* @__PURE__ */ jsx(Badge, { badgeContent: unreadCount, color: "error", max: 99, children: unreadCount > 0 ? (icons == null ? void 0 : icons.active) || /* @__PURE__ */ jsx(NotificationsActive, {}) : (icons == null ? void 0 : icons.empty) || /* @__PURE__ */ jsx(NotificationsNone, {}) })
+    }
+  );
+};
+const NotificationMenuItem = ({
+  notification,
+  onMarkAsRead,
+  onRemove,
+  formatTimeAgo: formatTimeAgo2
+}) => {
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      onClick: () => onMarkAsRead(notification.id),
+      sx: {
+        backgroundColor: notification.isRead ? "transparent" : "action.hover",
+        borderLeft: notification.isRead ? "none" : "4px solid #ff9800",
+        whiteSpace: "normal",
+        alignItems: "flex-start",
+        py: 1.5
+      },
+      children: /* @__PURE__ */ jsxs(Box, { sx: { width: "100%" }, children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 0.5 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", sx: { fontWeight: notification.isRead ? "normal" : "bold" }, children: notification.title }),
+          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: formatTimeAgo2(notification.timestamp) }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRemove(notification.id);
+                },
+                children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: notification.message }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 0.5, flexWrap: "wrap" }, children: [
+          notification.customer && /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: notification.customer,
+              size: "small",
+              variant: "outlined",
+              color: "primary"
+            }
+          ),
+          notification.store && /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: notification.store,
+              size: "small",
+              variant: "outlined",
+              color: "secondary"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+const NotificationsMenu = ({
+  anchorEl,
+  notifications,
+  onClose,
+  onMarkAsRead,
+  onMarkAllAsRead,
+  onRemove,
+  onClearAll,
+  config = {}
+}) => {
+  const mergedConfig = __spreadValues(__spreadValues({}, defaultConfig), config);
+  const labels = __spreadValues(__spreadValues({}, defaultConfig.labels), config.labels);
+  const open = Boolean(anchorEl);
+  const unreadCount = notifications.filter((n) => !n.isRead).length;
+  return /* @__PURE__ */ jsxs(
+    Menu,
+    {
+      anchorEl,
+      open,
+      onClose,
+      PaperProps: {
+        style: {
+          maxHeight: mergedConfig.menuMaxHeight,
+          width: mergedConfig.menuWidth
+        }
+      },
+      transformOrigin: { horizontal: "right", vertical: "top" },
+      anchorOrigin: { horizontal: "right", vertical: "bottom" },
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { p: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", children: labels.title }),
+          notifications.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+            unreadCount > 0 && /* @__PURE__ */ jsx(Button, { size: "small", onClick: onMarkAllAsRead, sx: { mr: 1 }, children: labels.markAll }),
+            /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onClearAll, children: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        notifications.length === 0 ? /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: labels.noNotifications }) }) : notifications.map((notification) => /* @__PURE__ */ jsx(
+          NotificationMenuItem,
+          {
+            notification,
+            onMarkAsRead,
+            onRemove,
+            formatTimeAgo: (ts) => formatTimeAgo(ts, labels)
+          },
+          notification.id
+        ))
+      ]
+    }
+  );
+};
+const ToastNotificationsStack = ({
+  toasts,
+  onClose,
+  autoHideDuration = 8e3,
+  baseZIndex = 1e5
+}) => {
+  return /* @__PURE__ */ jsx(
+    Stack,
+    {
+      spacing: 1,
+      sx: {
+        position: "fixed",
+        top: 16,
+        right: 16,
+        zIndex: baseZIndex,
+        maxWidth: 400
+      },
+      children: toasts.map((toast) => /* @__PURE__ */ jsx(
+        Snackbar,
+        {
+          open: true,
+          autoHideDuration,
+          onClose: () => onClose(toast.id),
+          anchorOrigin: { vertical: "top", horizontal: "right" },
+          sx: { position: "relative", zIndex: baseZIndex },
+          children: /* @__PURE__ */ jsxs(
+            Alert,
+            {
+              onClose: () => onClose(toast.id),
+              severity: toast.severity,
+              variant: "filled",
+              sx: { width: "100%" },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: toast.title }),
+                /* @__PURE__ */ jsx(Typography, { variant: "body2", children: toast.message })
+              ]
+            }
+          )
+        },
+        toast.id
+      ))
+    }
+  );
+};
+const DraggableNotificationDialog = ({
+  notification,
+  onClose,
+  onAcknowledge,
+  onFocus,
+  onPositionChange,
+  config = {}
+}) => {
+  const labels = __spreadValues(__spreadValues({}, defaultConfig.labels), config.labels);
+  const icons = __spreadValues(__spreadValues({}, defaultConfig.icons), config.icons);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const handleMouseDown = useCallback((e) => {
+    if (e.target.closest(".drag-handle")) {
+      e.preventDefault();
+      onFocus();
+      setIsDragging(true);
+      setDragOffset({
+        x: e.clientX - notification.position.x,
+        y: e.clientY - notification.position.y
+      });
+    }
+  }, [onFocus, notification.position]);
+  const handleMouseMove = useCallback((e) => {
+    if (isDragging) {
+      e.preventDefault();
+      const newX = Math.max(0, Math.min(window.innerWidth - 400, e.clientX - dragOffset.x));
+      const newY = Math.max(0, Math.min(window.innerHeight - 200, e.clientY - dragOffset.y));
+      onPositionChange({ x: newX, y: newY });
+    }
+  }, [isDragging, dragOffset, onPositionChange]);
+  const handleMouseUp = useCallback(() => {
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  }, [isDragging]);
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.userSelect = "none";
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        document.body.style.userSelect = "";
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        left: notification.position.x,
+        top: notification.position.y,
+        zIndex: notification.zIndex,
+        pointerEvents: "auto"
+      },
+      onMouseDown: handleMouseDown,
+      children: /* @__PURE__ */ jsxs(
+        Paper,
+        {
+          elevation: 8,
+          sx: {
+            width: 400,
+            borderRadius: 2,
+            overflow: "hidden",
+            boxShadow: "0 8px 32px rgba(0,0,0,0.24)",
+            cursor: isDragging ? "grabbing" : "default",
+            "&:hover": {
+              boxShadow: "0 12px 40px rgba(0,0,0,0.3)"
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                className: "drag-handle",
+                sx: {
+                  backgroundColor: "warning.main",
+                  color: "warning.contrastText",
+                  p: 2,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  cursor: isDragging ? "grabbing" : "grab",
+                  userSelect: "none"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(DragIcon, { sx: { mr: 1 } }),
+                  /* @__PURE__ */ jsx(NotificationsActive, {}),
+                  /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { flexGrow: 1, fontSize: "1rem" }, children: notification.title }),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onClose();
+                      },
+                      sx: { color: "warning.contrastText" },
+                      children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { sx: { p: 2 }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2 }, children: notification.message }),
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
+                notification.customer && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  icons.customer || /* @__PURE__ */ jsx(PersonIcon, { color: "primary" }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: labels.customer }),
+                  /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      label: notification.customer,
+                      size: "small",
+                      color: "primary",
+                      variant: "outlined"
+                    }
+                  )
+                ] }),
+                notification.store && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+                  icons.store || /* @__PURE__ */ jsx(StoreIcon, { color: "secondary" }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: labels.store }),
+                  /* @__PURE__ */ jsx(
+                    Chip,
+                    {
+                      label: notification.store,
+                      size: "small",
+                      color: "secondary",
+                      variant: "outlined"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", gap: 1, mt: 1 }, children: /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+                  labels.received,
+                  " ",
+                  formatTimeAgo(notification.timestamp, labels)
+                ] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { sx: { p: 2, pt: 0, display: "flex", gap: 1, justifyContent: "flex-end" }, children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onClose();
+                  },
+                  color: "inherit",
+                  variant: "outlined",
+                  size: "small",
+                  children: labels.close
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onAcknowledge();
+                  },
+                  color: "primary",
+                  variant: "contained",
+                  size: "small",
+                  children: labels.acknowledge
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  ) });
+};
+const NotificationsCenter = ({
+  config = {},
+  notificationsHook
+}) => {
+  const internalHook = useNotificationsCenter(config);
+  const hook = notificationsHook || internalHook;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const handleNotificationClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleClearAll = () => {
+    hook.clearAllNotifications();
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NotificationButton,
+      {
+        unreadCount: hook.unreadCount,
+        onClick: handleNotificationClick,
+        icons: config.icons
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NotificationsMenu,
+      {
+        anchorEl,
+        notifications: hook.notifications,
+        onClose: handleClose,
+        onMarkAsRead: hook.markAsRead,
+        onMarkAllAsRead: hook.markAllAsRead,
+        onRemove: hook.removeNotification,
+        onClearAll: handleClearAll,
+        config
+      }
+    ),
+    hook.dialogNotifications.map((dialogNotification) => /* @__PURE__ */ jsx(
+      DraggableNotificationDialog,
+      {
+        notification: dialogNotification,
+        onClose: () => hook.closeDialog(dialogNotification.id),
+        onAcknowledge: () => hook.acknowledgeDialog(dialogNotification.id),
+        onFocus: () => hook.bringDialogToFront(dialogNotification.id),
+        onPositionChange: (newPosition) => hook.updateDialogPosition(dialogNotification.id, newPosition),
+        config
+      },
+      dialogNotification.id
+    )),
+    /* @__PURE__ */ jsx(
+      ToastNotificationsStack,
+      {
+        toasts: hook.toastNotifications,
+        onClose: hook.closeToast,
+        autoHideDuration: config.toastAutoHideDuration,
+        baseZIndex: config.baseZIndex
+      }
+    )
+  ] });
+};
+var NotificationsCenter_default = NotificationsCenter;
+export {
+  DraggableNotificationDialog,
+  NotificationButton,
+  NotificationMenuItem,
+  NotificationsCenter,
+  NotificationsMenu,
+  ToastNotificationsStack,
+  NotificationsCenter_default as default,
+  formatTimeAgo,
+  generateNotificationId,
+  useNotificationsCenter
+};

package/dist/components/notifications/index.js

@@ -1 +1,24 @@
-import{NotificationsCenter as o,NotificationButton as e,NotificationsMenu as a,NotificationMenuItem as n,ToastNotificationsStack as f,DraggableNotificationDialog as c,useNotificationsCenter as s,formatTimeAgo as r,generateNotificationId as p}from"./NotificationsCenter";import{default as y}from"./NotificationsCenter";export{c as DraggableNotificationDialog,e as NotificationButton,n as NotificationMenuItem,o as NotificationsCenter,a as NotificationsMenu,f as ToastNotificationsStack,y as default,r as formatTimeAgo,p as generateNotificationId,s as useNotificationsCenter};
+import {
+  NotificationsCenter,
+  NotificationButton,
+  NotificationsMenu,
+  NotificationMenuItem,
+  ToastNotificationsStack,
+  DraggableNotificationDialog,
+  useNotificationsCenter,
+  formatTimeAgo,
+  generateNotificationId
+} from "./NotificationsCenter";
+import { default as default2 } from "./NotificationsCenter";
+export {
+  DraggableNotificationDialog,
+  NotificationButton,
+  NotificationMenuItem,
+  NotificationsCenter,
+  NotificationsMenu,
+  ToastNotificationsStack,
+  default2 as default,
+  formatTimeAgo,
+  generateNotificationId,
+  useNotificationsCenter
+};

package/dist/components/tables/PaginationComponent.js

@@ -1 +1,36 @@
-import{jsx as o}from"react/jsx-runtime";import{Pagination as i}from"react-admin";const n=a=>o("div",{className:"dash-pagination-component",children:o(i,{rowsPerPageOptions:[10,25,50,100,250,500,1e3],...a})});var f=n;export{f as default};
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsx } from "react/jsx-runtime";
+import { Pagination } from "react-admin";
+const PaginationComponent = (props) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "dash-pagination-component",
+      children: /* @__PURE__ */ jsx(
+        Pagination,
+        __spreadValues({
+          rowsPerPageOptions: [10, 25, 50, 100, 250, 500, 1e3]
+        }, props)
+      )
+    }
+  );
+};
+var PaginationComponent_default = PaginationComponent;
+export {
+  PaginationComponent_default as default
+};