@vention/machine-apps-components 0.2.8

package/index.esm.js

@@ -0,0 +1,1711 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useTheme, Typography, Box, Button, InputAdornment, IconButton, Divider, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
+import { tss } from 'tss-react/mui';
+import { COLORS, VentionModalBase, VentionIcon, VentionTextInput, VentionButton, VentionStatusIndicator, VentionSpinner, VentionAlert, VentionSelect } from '@ventionco/machine-ui';
+import React, { useState, useEffect, memo, useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
+import dayjs from 'dayjs';
+
+function TimeLabel({
+  className,
+  color
+}) {
+  const theme = useTheme();
+  const [timeLabel, setTimeLabel] = useState(() => new Date().toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit"
+  }).toLowerCase().replace(" ", ""));
+  useEffect(function updateTimeLabel() {
+    const intervalId = setInterval(() => {
+      setTimeLabel(new Date().toLocaleTimeString([], {
+        hour: "numeric",
+        minute: "2-digit"
+      }).toLowerCase().replace(" ", ""));
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, []);
+  return jsx(Typography, {
+    className: className,
+    color: color !== null && color !== void 0 ? color : theme.palette.common.white,
+    children: timeLabel
+  });
+}
+
+/**
+ * Detects if the current device has touch screen capabilities
+ * @returns true if the device supports touch events, false otherwise
+ */
+const isTouchScreenDevice = () => {
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+};
+/**
+ * Closes the custom UI by sending a message to the parent window
+ */
+const closeCustomUi = () => {
+  window.parent.postMessage("closeCustomUi", "*");
+};
+/**
+ * Navigates to a specific route in the Control Center
+ * @param route - The route to navigate to (remoteSupport or controlCenterHomepage)
+ */
+const navigateControlCenter = route => {
+  const capitalizedRoute = route.charAt(0).toUpperCase() + route.slice(1);
+  window.parent.postMessage(`navigateTo${capitalizedRoute}`, "*");
+};
+
+const NavigationConfirmationModal = props => {
+  const {
+    isOpen,
+    destination,
+    onClose
+  } = props;
+  const {
+    classes
+  } = useStyles$a();
+  const handleConfirm = () => {
+    if (!destination) return;
+    onClose();
+    if (destination === "controlCenter") {
+      closeCustomUi();
+    } else {
+      navigateControlCenter(destination);
+    }
+  };
+  const getButtonText = () => {
+    if (destination === "controlCenter") {
+      return "Go to Control Center";
+    }
+    return "Go to Remote Support";
+  };
+  return jsx(VentionModalBase, {
+    isOpen: isOpen,
+    onClose: onClose,
+    modalSize: "xx-large",
+    isTouchDevice: isTouchScreenDevice(),
+    width: "1312px",
+    children: jsxs(Box, {
+      className: classes.modalContent,
+      children: [jsx(Box, {
+        className: classes.iconContainer,
+        children: jsx(VentionIcon, {
+          type: "alert-triangle-filled",
+          size: 56,
+          color: "#F59E0B"
+        })
+      }), jsx(Typography, {
+        className: classes.title,
+        children: "You are about to exit the application"
+      }), jsx(Typography, {
+        className: classes.body,
+        children: "Please make sure your changes are saved before you leave the app."
+      }), jsx(Button, {
+        onClick: handleConfirm,
+        className: classes.button,
+        disableRipple: true,
+        children: jsx(Box, {
+          className: classes.buttonLabel,
+          children: jsx(Typography, {
+            className: classes.buttonText,
+            children: getButtonText()
+          })
+        })
+      })]
+    })
+  });
+};
+const useStyles$a = tss.create(({
+  theme
+}) => ({
+  modalContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "0 96px 24px 96px",
+    height: "360px",
+    boxSizing: "border-box"
+  },
+  iconContainer: {
+    marginBottom: theme.spacing(7)
+  },
+  title: Object.assign(Object.assign({}, theme.typography.hmiText28SemiBold), {
+    textAlign: "center",
+    marginBottom: theme.spacing(6)
+  }),
+  body: Object.assign(Object.assign({}, theme.typography.hmiText22Regular), {
+    textAlign: "center"
+  }),
+  button: {
+    width: "320px",
+    height: "80px",
+    backgroundColor: COLORS.slate[800],
+    borderRadius: "4px",
+    padding: "8px",
+    boxSizing: "border-box",
+    marginTop: "auto"
+  },
+  buttonLabel: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 8px",
+    boxSizing: "border-box"
+  },
+  buttonText: {
+    fontFamily: "Inter",
+    fontSize: "24px",
+    fontWeight: 600,
+    lineHeight: "32px",
+    color: theme.palette.common.white,
+    textAlign: "center",
+    whiteSpace: "nowrap"
+  }
+}));
+
+const PasswordProtectionModal = props => {
+  const {
+    isOpen,
+    onClose,
+    onSuccess,
+    correctPassword
+  } = props;
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+  const {
+    classes
+  } = useStyles$9();
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState(false);
+  const handleConfirm = () => {
+    if (password === correctPassword) {
+      setPassword("");
+      setError(false);
+      onSuccess();
+      onClose();
+    } else {
+      setError(true);
+    }
+  };
+  const handleClose = () => {
+    setPassword("");
+    setError(false);
+    onClose();
+  };
+  const handleKeyPress = event => {
+    if (event.key === "Enter") {
+      handleConfirm();
+    }
+  };
+  useEffect(() => {
+    if (!isOpen || !isTouchScreenDevice()) {
+      setIsKeyboardVisible(false);
+      return;
+    }
+    const checkKeyboard = () => {
+      const keyboard = document.getElementById("virtual_keyboard");
+      setIsKeyboardVisible(keyboard !== null);
+    };
+    checkKeyboard();
+    const observer = new MutationObserver(checkKeyboard);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+      setIsKeyboardVisible(false);
+    };
+  }, [isOpen]);
+  return jsxs(Fragment, {
+    children: [jsx("style", {
+      children: isKeyboardVisible && `
+          [data-testid="vention-modal-container"] {
+            transform: translateY(-22.5vh) !important;
+            transition: transform 0.3s ease-out;
+          }
+        `
+    }), jsx(VentionModalBase, {
+      isOpen: isOpen,
+      onClose: handleClose,
+      modalSize: "x-large",
+      isTouchDevice: isTouchScreenDevice(),
+      width: "1120px",
+      backDropClickClosable: false,
+      children: jsxs(Box, {
+        className: classes.modalContent,
+        children: [jsx(Typography, {
+          className: classes.title,
+          children: "Administrator login required"
+        }), jsx(Box, {
+          className: classes.inputContainer,
+          children: jsx(VentionTextInput, {
+            label: "Password",
+            type: showPassword ? "text" : "password",
+            value: password,
+            onChange: event => {
+              setPassword(event.target.value);
+              setError(false);
+            },
+            onKeyPress: handleKeyPress,
+            state: error ? "error" : "default",
+            helperText: error ? "Incorrect password" : "",
+            fullWidth: true,
+            size: "xx-large",
+            InputProps: {
+              endAdornment: jsx(InputAdornment, {
+                position: "end",
+                children: jsx(IconButton, {
+                  onClick: () => setShowPassword(!showPassword),
+                  edge: "end",
+                  disableRipple: true,
+                  children: jsx(VentionIcon, {
+                    type: showPassword ? "eye-closed" : "eye",
+                    size: 28,
+                    color: COLORS.slate[900]
+                  })
+                })
+              })
+            }
+          })
+        }), jsx(Button, {
+          onClick: handleConfirm,
+          className: classes.button,
+          disableRipple: true,
+          children: jsx(Box, {
+            className: classes.buttonLabel,
+            children: jsx(Typography, {
+              className: classes.buttonText,
+              children: "Confirm"
+            })
+          })
+        })]
+      })
+    })]
+  });
+};
+const useStyles$9 = tss.create(({
+  theme
+}) => ({
+  modalContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "64px 96px 64px 96px",
+    gap: theme.spacing(7),
+    boxSizing: "border-box",
+    height: "324px"
+  },
+  title: {
+    fontFamily: "Inter",
+    fontSize: "36px",
+    fontWeight: 700,
+    lineHeight: "48px",
+    textAlign: "center",
+    color: COLORS.slate[900]
+  },
+  inputContainer: {
+    width: "499px",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1)
+  },
+  button: {
+    width: "250px",
+    height: "64px",
+    backgroundColor: COLORS.slate[800],
+    borderRadius: "4px",
+    padding: "8px",
+    boxSizing: "border-box",
+    "&:hover": {
+      backgroundColor: COLORS.slate[700]
+    }
+  },
+  buttonLabel: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 8px",
+    boxSizing: "border-box"
+  },
+  buttonText: {
+    fontFamily: "Inter",
+    fontSize: "24px",
+    fontWeight: 600,
+    lineHeight: "32px",
+    color: theme.palette.common.white,
+    textAlign: "center",
+    whiteSpace: "nowrap"
+  }
+}));
+
+const NavigationBarItem = props => {
+  const {
+    icon,
+    iconDisabled,
+    label,
+    path,
+    onClick,
+    password,
+    isDisabled = false,
+    location,
+    handleNavigate,
+    currentPassword,
+    setPasswordProtectedItem
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles$8();
+  const isActive = (location === null || location === void 0 ? void 0 : location.pathname) === path;
+  const currentIcon = isDisabled && iconDisabled ? iconDisabled : icon;
+  const handleItemClick = () => {
+    if (isDisabled || !handleNavigate || !setPasswordProtectedItem) return;
+    // If destination has a password and it's different from current password, show modal
+    if (password && password !== currentPassword) {
+      setPasswordProtectedItem(props);
+      return;
+    }
+    // Otherwise navigate directly
+    onClick ? onClick() : handleNavigate(path);
+  };
+  return jsxs(Button, {
+    disableRipple: true,
+    disabled: isDisabled,
+    onClick: handleItemClick,
+    className: cx(classes.tabButton, {
+      [classes.active]: isActive,
+      [classes.disabled]: isDisabled
+    }),
+    children: [jsx(Box, {
+      className: classes.navIcon,
+      children: currentIcon
+    }), jsx(Typography, {
+      className: classes.navLabel,
+      children: label
+    })]
+  });
+};
+const useStyles$8 = tss.create(({
+  theme
+}) => ({
+  tabButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    height: "96px",
+    width: 184,
+    gap: theme.spacing(2),
+    borderRadius: 8,
+    backgroundColor: "transparent",
+    transition: "background-color 0.2s",
+    "&:hover": {
+      backgroundColor: COLORS.slate[700]
+    },
+    color: theme.palette.common.white,
+    "&.Mui-disabled": {
+      color: theme.palette.common.white
+    }
+  },
+  active: {
+    backgroundColor: COLORS.slate[600]
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: "not-allowed",
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
+  },
+  navIcon: {
+    width: 32,
+    height: 32,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  navLabel: Object.assign({}, theme.typography.hmiText22Regular)
+}));
+
+const iconSize = 32;
+const NavigationBarRoot = props => {
+  var _a;
+  const {
+    children,
+    showTimer = true,
+    onControlCenterClick,
+    onSupportClick,
+    disabledNavigationItems = [],
+    isControlCenterDisabled = false,
+    isSupportDisabled = false,
+    showControlCenterButton = true,
+    showSupportButton = true
+  } = props;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const {
+    classes
+  } = useStyles$7();
+  const [modalDestination, setModalDestination] = useState(null);
+  const [passwordProtectedItem, setPasswordProtectedItem] = useState(null);
+  const [currentPassword, setCurrentPassword] = useState(null);
+  const disabledSet = new Set(disabledNavigationItems);
+  const getFadedColor = (color, opacity = 1) => {
+    return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
+  };
+  const handleNavigate = path => {
+    if (location.pathname !== path) navigate(path);
+  };
+  useEffect(function updateCurrentPassword() {
+    const currentPage = React.Children.toArray(children).find(child => React.isValidElement(child) && child.type === NavigationBarItem && child.props.path === location.pathname);
+    const currentPagePassword = React.isValidElement(currentPage) ? currentPage.props.password : undefined;
+    setCurrentPassword(currentPagePassword !== null && currentPagePassword !== void 0 ? currentPagePassword : null);
+  }, [location.pathname, children]);
+  const handleControlCenterClick = () => {
+    if (isControlCenterDisabled) return;
+    if (onControlCenterClick) {
+      onControlCenterClick();
+    } else {
+      setModalDestination("controlCenter");
+    }
+  };
+  const handleSupportClick = () => {
+    if (isSupportDisabled) return;
+    if (onSupportClick) {
+      onSupportClick();
+    } else {
+      setModalDestination("remoteSupport");
+    }
+  };
+  const handlePasswordSuccess = () => {
+    if (passwordProtectedItem) {
+      if (passwordProtectedItem.onClick) {
+        passwordProtectedItem.onClick();
+      } else {
+        handleNavigate(passwordProtectedItem.path);
+      }
+    }
+  };
+  const processedChildren = React.Children.map(children, child => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type !== NavigationBarItem) return child;
+    const itemId = child.props.id;
+    const isDisabled = disabledSet.has(itemId);
+    return React.cloneElement(child, Object.assign(Object.assign({}, child.props), {
+      isDisabled: isDisabled,
+      location: location,
+      handleNavigate: handleNavigate,
+      currentPassword: currentPassword,
+      setPasswordProtectedItem: setPasswordProtectedItem
+    }));
+  });
+  return jsxs(Fragment, {
+    children: [jsx(NavigationConfirmationModal, {
+      isOpen: modalDestination !== null,
+      destination: modalDestination,
+      onClose: () => setModalDestination(null)
+    }), jsx(PasswordProtectionModal, {
+      isOpen: passwordProtectedItem !== null,
+      onClose: () => setPasswordProtectedItem(null),
+      onSuccess: handlePasswordSuccess,
+      correctPassword: (_a = passwordProtectedItem === null || passwordProtectedItem === void 0 ? void 0 : passwordProtectedItem.password) !== null && _a !== void 0 ? _a : ""
+    }), jsx("footer", {
+      className: classes.root,
+      children: jsxs(Box, {
+        className: classes.container,
+        children: [jsx(Box, {
+          className: classes.sideClusterLeft,
+          children: showControlCenterButton && jsx(VentionButton, {
+            disableRipple: true,
+            onClick: handleControlCenterClick,
+            disabled: isControlCenterDisabled,
+            className: classes.sideButton,
+            style: {
+              backgroundColor: isControlCenterDisabled ? getFadedColor(COLORS.slate[800]) : COLORS.slate[800],
+              borderColor: isControlCenterDisabled ? getFadedColor(COLORS.slate[600]) : COLORS.slate[600],
+              opacity: isControlCenterDisabled ? 0.5 : 1,
+              cursor: isControlCenterDisabled ? "not-allowed" : "pointer"
+            },
+            children: jsx(Typography, {
+              className: classes.sideButtonLabel,
+              style: {
+                color: isControlCenterDisabled ? getFadedColor(theme.palette.common.white) : theme.palette.common.white
+              },
+              children: "Control Center"
+            })
+          })
+        }), jsx("nav", {
+          className: classes.tabBarButtonContainer,
+          children: processedChildren
+        }), jsxs(Box, {
+          className: classes.sideClusterRight,
+          children: [showSupportButton && jsx(VentionButton, {
+            disableRipple: true,
+            onClick: handleSupportClick,
+            disabled: isSupportDisabled,
+            className: classes.sideButton,
+            style: {
+              backgroundColor: isSupportDisabled ? getFadedColor(COLORS.slate[800]) : COLORS.slate[800],
+              borderColor: isSupportDisabled ? getFadedColor(COLORS.slate[600]) : COLORS.slate[600],
+              opacity: isSupportDisabled ? 0.5 : 1,
+              cursor: isSupportDisabled ? "not-allowed" : "pointer"
+            },
+            iconLeft: jsx(VentionIcon, {
+              size: iconSize,
+              color: isSupportDisabled ? getFadedColor(theme.palette.common.white) : theme.palette.common.white,
+              type: "headset-filled"
+            }),
+            children: jsx(Typography, {
+              className: classes.sideButtonLabel,
+              style: {
+                color: isSupportDisabled ? getFadedColor(theme.palette.common.white) : theme.palette.common.white
+              },
+              children: "Support"
+            })
+          }), showTimer && jsx(TimeLabel, {
+            className: classes.timeLabel,
+            color: theme.palette.common.white
+          })]
+        })]
+      })
+    })]
+  });
+};
+const useStyles$7 = tss.create(({
+  theme
+}) => ({
+  root: {
+    boxSizing: "border-box",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "120px",
+    padding: theme.spacing(2, 6),
+    backgroundColor: COLORS.slate[900],
+    position: "fixed",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTop: `1px solid ${COLORS.slate[800]}`
+  },
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    position: "relative",
+    width: "100%",
+    gap: "20px",
+    height: theme.spacing(13)
+  },
+  sideClusterLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(8)
+  },
+  sideClusterRight: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(8)
+  },
+  sideButton: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    height: theme.spacing(11),
+    padding: theme.spacing(2, 4),
+    backgroundColor: COLORS.slate[800],
+    borderRadius: 4,
+    border: `2px solid ${COLORS.slate[600]}`,
+    color: theme.palette.common.white,
+    textTransform: "none",
+    minWidth: 0,
+    "&:hover": {
+      backgroundColor: COLORS.slate[700]
+    },
+    "&.Mui-disabled": {
+      color: theme.palette.common.white
+    }
+  },
+  sideButtonLabel: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    fontSize: 24,
+    fontFamily: "Inter",
+    fontStyle: "normal",
+    fontWeight: 600,
+    lineHeight: "32px"
+  },
+  timeLabel: Object.assign(Object.assign({}, theme.typography.hmiText22Regular), {
+    fontWeight: 600
+  }),
+  tabBarButtonContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+    left: "50%",
+    transform: "translateX(-50%)",
+    gap: theme.spacing(5),
+    height: "104px"
+  }
+}));
+const NavigationBar = Object.assign(NavigationBarRoot, {
+  Item: NavigationBarItem
+});
+
+const StatusTopBarButton = props => {
+  const {
+    label,
+    onClick,
+    backgroundColor,
+    backgroundColorHover,
+    borderColor,
+    textColor,
+    width = 208,
+    height = 80,
+    icon,
+    iconDisabled,
+    visible = true,
+    isDisabled = false
+  } = props;
+  const {
+    classes
+  } = useStyles$6();
+  if (!visible) return null;
+  const getFadedColor = (color, opacity = 1) => {
+    return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
+  };
+  const hasBackgroundColor = !!backgroundColor;
+  const variant = hasBackgroundColor ? "filled-brand" : "outline";
+  const finalBackgroundColor = isDisabled && backgroundColor ? getFadedColor(backgroundColor) : backgroundColor;
+  const finalBackgroundColorHover = isDisabled && backgroundColorHover ? getFadedColor(backgroundColorHover) : backgroundColorHover;
+  const finalBorderColor = isDisabled && borderColor ? getFadedColor(borderColor) : borderColor;
+  const finalTextColor = isDisabled && textColor ? getFadedColor(textColor) : textColor;
+  const finalIcon = isDisabled && iconDisabled ? iconDisabled : icon;
+  const handleClick = () => {
+    if (!isDisabled && onClick) {
+      onClick();
+    }
+  };
+  return jsx(VentionButton, {
+    variant: variant,
+    onClick: handleClick,
+    disabled: isDisabled || !onClick,
+    className: classes.actionButton,
+    style: {
+      width,
+      height,
+      backgroundColor: finalBackgroundColor || "transparent",
+      border: finalBorderColor ? `1px solid ${finalBorderColor}` : undefined
+    },
+    sx: {
+      "&:hover": {
+        backgroundColor: finalBackgroundColorHover || finalBackgroundColor
+      }
+    },
+    iconLeft: finalIcon ? jsx(Box, {
+      className: classes.iconWrapper,
+      children: finalIcon
+    }) : undefined,
+    children: jsx(Typography, {
+      className: classes.actionLabel,
+      style: {
+        color: finalTextColor
+      },
+      children: label
+    })
+  });
+};
+const useStyles$6 = tss.create(({
+  theme
+}) => ({
+  actionButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(1, 2),
+    borderRadius: 4,
+    minHeight: 0,
+    minWidth: 0
+  },
+  iconWrapper: {
+    padding: "5px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  actionLabel: {
+    fontWeight: 600,
+    fontSize: 24,
+    lineHeight: "32px",
+    textTransform: "none",
+    padding: theme.spacing(1)
+  }
+}));
+
+const StatusTopBarRoot = props => {
+  const {
+    children,
+    statusLabel,
+    dotColor,
+    visibleButtons,
+    disabledButtons = []
+  } = props;
+  const {
+    classes
+  } = useStyles$5();
+  const visibleSet = visibleButtons ? new Set(visibleButtons) : null;
+  const disabledSet = new Set(disabledButtons);
+  const processedChildren = React.Children.map(children, child => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type !== StatusTopBarButton) return child;
+    const buttonId = child.props.id;
+    const visible = visibleSet === null || visibleSet.has(buttonId);
+    const isDisabled = disabledSet.has(buttonId);
+    return React.cloneElement(child, Object.assign(Object.assign({}, child.props), {
+      visible: visible,
+      isDisabled: isDisabled
+    }));
+  });
+  const hasVisibleButtons = React.Children.toArray(children).some(child => {
+    if (!React.isValidElement(child) || child.type !== StatusTopBarButton) return false;
+    const buttonId = child.props.id;
+    const visible = visibleSet === null || visibleSet.has(buttonId);
+    return visible;
+  });
+  return jsxs("header", {
+    className: classes.root,
+    children: [jsxs("div", {
+      className: classes.content,
+      children: [jsx("div", {
+        className: classes.leftArea,
+        children: jsx(VentionStatusIndicator, {
+          size: "xx-large",
+          dotColor: dotColor,
+          label: statusLabel
+        })
+      }), hasVisibleButtons && jsx("div", {
+        className: classes.rightArea,
+        children: processedChildren
+      }), !hasVisibleButtons && jsx("div", {
+        style: {
+          display: "none"
+        },
+        children: processedChildren
+      })]
+    }), jsx("div", {
+      className: classes.bottomBorder
+    })]
+  });
+};
+const useStyles$5 = tss.create(({
+  theme
+}) => ({
+  root: {
+    boxSizing: "border-box",
+    position: "fixed",
+    top: 0,
+    right: 0,
+    left: 0,
+    backgroundColor: theme.palette.common.white,
+    height: "128px"
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.spacing(5, 4)
+  },
+  leftArea: {
+    display: "flex",
+    alignItems: "center"
+  },
+  rightArea: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    height: theme.spacing(10)
+  },
+  bottomBorder: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 1,
+    backgroundColor: theme.palette.divider
+  }
+}));
+const StatusTopBar = Object.assign(StatusTopBarRoot, {
+  Button: StatusTopBarButton
+});
+
+const Sidebar = props => {
+  const {
+    classes
+  } = useStyles$4();
+  return jsx(Box, {
+    className: classes.container,
+    children: props.items.map((item, index) => jsxs(React.Fragment, {
+      children: [jsx(SidebarItemComponent, {
+        item: item
+      }), index < props.items.length - 1 && jsx(Divider, {
+        className: classes.divider
+      })]
+    }, item.id))
+  });
+};
+const ICON_SIZE = 32;
+const SidebarItemComponent = props => {
+  const {
+    item
+  } = props;
+  const {
+    classes
+  } = useSidebarItemStyles({
+    state: item.state
+  });
+  const isDisabled = item.state === "disabled";
+  return jsx(Button, {
+    className: classes.button,
+    onClick: item.onClick,
+    disabled: isDisabled,
+    disableRipple: true,
+    disableFocusRipple: true,
+    disableTouchRipple: true,
+    "data-testid": `sidebar-item-${item.id}`,
+    children: jsxs(Box, {
+      className: classes.content,
+      children: [jsxs(Box, {
+        className: classes.leftSection,
+        children: [item.icon ? item.icon : jsx(Box, {
+          className: classes.iconPlaceholder
+        }), jsxs(Box, {
+          className: classes.textContainer,
+          children: [jsx(Typography, {
+            className: classes.title,
+            children: item.title
+          }), item.subtitle && jsx(Typography, {
+            className: classes.subtitle,
+            children: item.subtitle
+          })]
+        })]
+      }), item.iconType && jsx(Box, {
+        className: classes.rightSection,
+        children: jsx(Box, {
+          className: classes.rightIcon,
+          children: jsx(VentionIcon, {
+            type: item.iconType,
+            size: ICON_SIZE
+          })
+        })
+      })]
+    })
+  });
+};
+const useStyles$4 = tss.create(({
+  theme
+}) => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%"
+  },
+  divider: {
+    borderColor: theme.palette.border.main
+  }
+}));
+const useSidebarItemStyles = tss.withParams().create(({
+  theme,
+  state
+}) => {
+  const isActive = state === "active";
+  const isDisabled = state === "disabled";
+  return {
+    button: {
+      width: "100%",
+      height: theme.spacing(14),
+      padding: theme.spacing(7, 5),
+      textAlign: "left",
+      textTransform: "none",
+      borderRadius: 0,
+      backgroundColor: isActive ? theme.palette.background.surface1active : "transparent",
+      border: isActive ? `1px solid ${theme.palette.border.main}` : "1px solid transparent",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      transition: "background-color 0.2s ease",
+      "&:hover": {
+        backgroundColor: isDisabled ? "transparent" : isActive ? theme.palette.background.surface1active : theme.palette.action.hover
+      }
+    },
+    content: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      height: "100%"
+    },
+    leftSection: {
+      display: "flex",
+      alignItems: "center",
+      gap: theme.spacing(3),
+      flex: 1
+    },
+    iconPlaceholder: {
+      width: theme.spacing(4)
+    },
+    textContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: theme.spacing(1)
+    },
+    title: Object.assign(Object.assign({}, theme.typography.heading24SemiBold), {
+      color: isDisabled ? theme.palette.text.disabled : theme.palette.text.primary
+    }),
+    subtitle: Object.assign(Object.assign({}, theme.typography.hmiText20Regular), {
+      color: isDisabled ? theme.palette.text.disabled : theme.palette.text.primary
+    }),
+    rightSection: {
+      display: "flex",
+      alignItems: "center",
+      marginLeft: theme.spacing(2)
+    },
+    rightIcon: {
+      display: "flex",
+      alignItems: "center",
+      color: isActive ? theme.palette.icon.primary : theme.palette.icon.tertiary,
+      "& svg": {
+        color: isActive ? theme.palette.icon.primary : theme.palette.icon.tertiary
+      }
+    }
+  };
+});
+
+const LogsTable = memo(({
+  logs = [],
+  isLoading = false,
+  error = null,
+  onLoadMoreLogs,
+  hasMoreLogs,
+  onLogClick,
+  tableHeight,
+  emptyStateMessage = "You have no logs",
+  emptyStateIcon
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles$3({
+    tableHeight
+  });
+  const theme = useTheme();
+  const loadMoreRef = useRef(null);
+  useEffect(function setupInfiniteScroll() {
+    if (!onLoadMoreLogs || !hasMoreLogs || !loadMoreRef.current) return;
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting && hasMoreLogs) {
+        onLoadMoreLogs();
+      }
+    }, {
+      threshold: 0.1
+    });
+    observer.observe(loadMoreRef.current);
+    return function cleanupInfiniteScroll() {
+      observer.disconnect();
+    };
+  }, [onLoadMoreLogs, hasMoreLogs]);
+  if (isLoading) {
+    return jsx(Box, {
+      className: classes.tableSection,
+      children: jsxs(Box, {
+        className: classes.centerState,
+        children: [jsx(VentionSpinner, {
+          size: "large"
+        }), jsx(Typography, {
+          variant: "heading24Medium",
+          sx: {
+            marginTop: 2
+          },
+          children: "Loading logs..."
+        })]
+      })
+    });
+  }
+  if (error) {
+    return jsx(Box, {
+      className: classes.tableSection,
+      children: jsx(Box, {
+        className: classes.errorState,
+        children: jsx(VentionAlert, {
+          severity: "error",
+          title: "Error loading logs",
+          descriptionText: error,
+          size: "large"
+        })
+      })
+    });
+  }
+  if (!logs || logs.length === 0) {
+    return jsx(Box, {
+      className: classes.tableSection,
+      children: jsxs(Box, {
+        className: classes.centerState,
+        children: [emptyStateIcon && jsx(Box, {
+          className: classes.emptyStateIcon,
+          children: emptyStateIcon
+        }), jsx(Typography, {
+          variant: "heading24Medium",
+          children: emptyStateMessage
+        })]
+      })
+    });
+  }
+  const getTypeClassName = type => {
+    switch (type) {
+      case "error":
+        return classes.errorType;
+      case "warning":
+        return classes.warningType;
+      case "info":
+        return classes.infoType;
+      default:
+        return "";
+    }
+  };
+  const renderTypeIcon = type => {
+    if (type === "error") {
+      return jsx(VentionIcon, {
+        size: 20,
+        type: "alert-circle-filled",
+        color: theme.palette.error.main
+      });
+    }
+    if (type === "warning") {
+      return jsx(VentionIcon, {
+        size: 20,
+        type: "alert-triangle-filled",
+        color: theme.palette.warning.main
+      });
+    }
+    return jsx(VentionIcon, {
+      size: 20,
+      type: "info-circle-filled",
+      color: theme.palette.info.main
+    });
+  };
+  const formatDate = dateStr => {
+    return dayjs(dateStr).format("YYYY-MM-DD h:mm:ssa");
+  };
+  return jsxs(Box, {
+    className: classes.tableSection,
+    children: [jsx(TableContainer, {
+      component: Paper,
+      className: classes.tableContainer,
+      children: jsxs(Table, {
+        stickyHeader: true,
+        children: [jsx(TableHead, {
+          className: classes.tableHead,
+          children: jsxs(TableRow, {
+            children: [jsx(TableCell, {
+              className: classes.iconHeaderCell
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: "Date"
+              })
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: "Type"
+              })
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: "Code"
+              })
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: "Message"
+              })
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: "Description"
+              })
+            })]
+          })
+        }), jsx(TableBody, {
+          children: logs.map(log => jsxs(TableRow, {
+            hover: true,
+            onClick: onLogClick ? () => onLogClick(log) : undefined,
+            className: onLogClick ? classes.clickableRow : undefined,
+            children: [jsx(TableCell, {
+              className: classes.iconCell,
+              children: jsx(Box, {
+                className: classes.iconWrapper,
+                children: renderTypeIcon(log.type)
+              })
+            }), jsx(TableCell, {
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: formatDate(log.date)
+              })
+            }), jsx(TableCell, {
+              className: cx(classes.typeCell, getTypeClassName(log.type)),
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: log.type
+              })
+            }), jsx(TableCell, {
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: log.code
+              })
+            }), jsx(TableCell, {
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: log.message
+              })
+            }), jsx(TableCell, {
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: log.description
+              })
+            })]
+          }, log.id))
+        })]
+      })
+    }), onLoadMoreLogs && hasMoreLogs && jsxs(Box, {
+      ref: loadMoreRef,
+      className: classes.loadMoreTrigger,
+      children: [jsx(VentionSpinner, {
+        size: "medium"
+      }), jsx(Typography, {
+        variant: "uiText14Regular",
+        className: classes.loadMoreText,
+        children: "Loading more logs..."
+      })]
+    }), onLoadMoreLogs && !hasMoreLogs && logs.length > 0 && jsx(Box, {
+      className: classes.endMessage,
+      children: jsx(Typography, {
+        variant: "uiText14Regular",
+        children: "No more logs to load"
+      })
+    })]
+  });
+});
+LogsTable.displayName = "LogsTable";
+const useStyles$3 = tss.withParams().create(({
+  theme,
+  tableHeight
+}) => ({
+  tableSection: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.spacing(4),
+    alignSelf: "stretch",
+    flex: 1,
+    height: "auto"
+  },
+  centerState: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    color: theme.palette.text.secondary
+  },
+  errorState: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    padding: theme.spacing(4)
+  },
+  tableContainer: Object.assign({
+    width: "100%",
+    flex: 1,
+    overflow: "auto",
+    minHeight: "560px"
+  }, tableHeight && {
+    maxHeight: tableHeight
+  }),
+  tableHead: {
+    backgroundColor: theme.palette.background.default,
+    borderBottom: `1px solid ${theme.palette.background.mutedSlate}`
+  },
+  iconHeaderCell: {
+    width: 40,
+    backgroundColor: theme.palette.background.default
+  },
+  tableHeaderCell: {
+    fontWeight: 200,
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.tertiary
+  },
+  iconCell: {
+    width: 40
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  typeCell: {
+    textTransform: "capitalize",
+    fontWeight: 500
+  },
+  errorType: {
+    color: theme.palette.error.main
+  },
+  warningType: {
+    color: theme.palette.warning.main
+  },
+  infoType: {
+    color: theme.palette.info.main
+  },
+  loadMoreTrigger: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing(4),
+    color: theme.palette.text.secondary
+  },
+  loadMoreText: {
+    marginTop: theme.spacing(1)
+  },
+  clickableRow: {
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    }
+  },
+  emptyStateIcon: {
+    marginBottom: theme.spacing(2),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  endMessage: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing(4),
+    color: theme.palette.text.secondary
+  },
+  tableText: {
+    fontSize: "20px",
+    lineHeight: "24px"
+  }
+}));
+
+const LogFilterForm = memo(({
+  onFilterChange,
+  onReset,
+  initialFilters
+}) => {
+  var _a, _b, _c, _d;
+  const {
+    classes
+  } = useStyles$2();
+  const [fromDate, setFromDate] = useState((_a = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.fromDate) !== null && _a !== void 0 ? _a : "");
+  const [toDate, setToDate] = useState((_b = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.toDate) !== null && _b !== void 0 ? _b : "");
+  const [logType, setLogType] = useState((_c = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.logType) !== null && _c !== void 0 ? _c : null);
+  const [sortOrder, setSortOrder] = useState((_d = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.sortOrder) !== null && _d !== void 0 ? _d : "latest");
+  const typeOptions = [{
+    value: "",
+    displayText: "All"
+  }, {
+    value: "error",
+    displayText: "Error"
+  }, {
+    value: "warning",
+    displayText: "Warning"
+  }, {
+    value: "info",
+    displayText: "Info"
+  }];
+  const sortOptions = [{
+    value: "latest",
+    displayText: "From latest"
+  }, {
+    value: "oldest",
+    displayText: "From oldest"
+  }];
+  const handleReset = () => {
+    setFromDate("");
+    setToDate("");
+    setLogType(null);
+    setSortOrder("latest");
+    onReset === null || onReset === void 0 ? void 0 : onReset();
+  };
+  useEffect(function notifyFilterChange() {
+    onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange({
+      fromDate,
+      toDate,
+      logType,
+      sortOrder
+    });
+  }, [fromDate, toDate, logType, sortOrder, onFilterChange]);
+  return jsxs(Box, {
+    className: classes.filterSection,
+    children: [jsx(Box, {
+      className: classes.filterInput,
+      children: jsx(VentionTextInput, {
+        size: "xx-large",
+        label: "From",
+        value: fromDate,
+        onChange: event => setFromDate(event.target.value),
+        type: "date"
+      })
+    }), jsx(Box, {
+      className: classes.filterInput,
+      children: jsx(VentionTextInput, {
+        size: "xx-large",
+        label: "To",
+        value: toDate,
+        onChange: event => setToDate(event.target.value),
+        type: "date"
+      })
+    }), jsx(Box, {
+      className: classes.filterInput,
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: "Type",
+        value: logType,
+        onChange: event => setLogType(event.target.value),
+        placeholder: "Choose type",
+        menuItems: typeOptions
+      })
+    }), jsx(Box, {
+      className: classes.filterInput,
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: "Sort",
+        value: sortOrder,
+        onChange: event => setSortOrder(event.target.value),
+        menuItems: sortOptions
+      })
+    }), jsx(VentionButton, {
+      size: "x-large",
+      onClick: handleReset,
+      className: classes.resetButton,
+      children: "Reset"
+    })]
+  });
+});
+LogFilterForm.displayName = "LogFilterForm";
+const useStyles$2 = tss.create(({
+  theme
+}) => ({
+  filterSection: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: theme.spacing(4),
+    alignSelf: "stretch",
+    flexWrap: "wrap"
+  },
+  filterInput: {
+    flex: "1 1 200px",
+    minWidth: "200px"
+  },
+  resetButton: {
+    width: "103px",
+    height: "64px",
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: theme.palette.background.default
+    }
+  }
+}));
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const LogsPagination = memo(({
+  currentPage,
+  totalPages,
+  onPageChange
+}) => {
+  const {
+    classes
+  } = useStyles$1();
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  return jsxs(Box, {
+    className: classes.paginationSection,
+    children: [jsx(VentionButton, {
+      size: "x-large",
+      className: classes.paginationButton,
+      onClick: handlePrevious,
+      disabled: currentPage === 1,
+      children: "\u2190"
+    }), jsxs(Typography, {
+      variant: "heading18SemiBold",
+      children: ["Page ", currentPage, " / ", totalPages]
+    }), jsx(VentionButton, {
+      size: "x-large",
+      className: classes.paginationButton,
+      onClick: handleNext,
+      disabled: currentPage === totalPages,
+      children: "\u2192"
+    })]
+  });
+});
+LogsPagination.displayName = "LogsPagination";
+const useStyles$1 = tss.create(({
+  theme
+}) => ({
+  paginationSection: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: theme.spacing(4)
+  },
+  paginationButton: {
+    width: "64px",
+    height: "64px",
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: theme.palette.grey[300]
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+      backgroundColor: theme.palette.background.slate
+    }
+  }
+}));
+
+const formatDateToInput = date => {
+  return dayjs(date).format("YYYY-MM-DD");
+};
+const parseLogDate = dateStr => {
+  const parsed = dayjs(dateStr);
+  return parsed.isValid() ? parsed.valueOf() : 0;
+};
+const LogsPanel = forwardRef((props, ref) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    dataFetcher,
+    initialFilters,
+    onError,
+    pagination,
+    onFilterChange,
+    onLogClick,
+    className,
+    tableHeight,
+    emptyStateMessage,
+    emptyStateIcon
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const [logs, setLogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [filters, setFilters] = useState({
+    fromDate: (_a = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.fromDate) !== null && _a !== void 0 ? _a : null,
+    toDate: (_b = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.toDate) !== null && _b !== void 0 ? _b : null,
+    logType: (_c = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.logType) !== null && _c !== void 0 ? _c : null,
+    sortOrder: (_d = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.sortOrder) !== null && _d !== void 0 ? _d : "latest"
+  });
+  const paginationMode = (_e = pagination === null || pagination === void 0 ? void 0 : pagination.mode) !== null && _e !== void 0 ? _e : "none";
+  const pageSize = (_f = pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) !== null && _f !== void 0 ? _f : 10;
+  const [currentPage, setCurrentPage] = useState((_g = pagination === null || pagination === void 0 ? void 0 : pagination.initialPage) !== null && _g !== void 0 ? _g : 1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [hasMorePages, setHasMorePages] = useState(false);
+  const fetchData = useCallback(page => __awaiter(void 0, void 0, void 0, function* () {
+    let isCancelled = false;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = yield dataFetcher({
+        filters,
+        page,
+        pageSize
+      });
+      if (!isCancelled) {
+        if (paginationMode === "infinite-scroll" && page > 1) {
+          setLogs(prev => [...prev, ...result.logs]);
+        } else {
+          setLogs(result.logs);
+        }
+        setTotalPages(result.totalPages);
+        setHasMorePages(result.hasMorePages);
+        setCurrentPage(result.currentPage);
+        setIsLoading(false);
+      }
+    } catch (error) {
+      if (!isCancelled) {
+        const errorMessage = error instanceof Error ? error.message : "Failed to load logs";
+        setError(errorMessage);
+        setIsLoading(false);
+        if (onError) {
+          onError(error);
+        }
+      }
+    }
+    return function cleanup() {
+      isCancelled = true;
+    };
+  }), [dataFetcher, filters, pageSize, paginationMode, onError]);
+  useEffect(function fetchDataOnChange() {
+    fetchData(currentPage);
+  }, [fetchData, currentPage]);
+  const handlePageChange = useCallback(page => {
+    setCurrentPage(page);
+  }, []);
+  const handleLoadMorePages = useCallback(() => {
+    if (hasMorePages) {
+      setCurrentPage(prev => prev + 1);
+    }
+  }, [hasMorePages]);
+  const handleFilterChange = useCallback(next => {
+    setFilters(next);
+    setCurrentPage(1);
+    if (paginationMode === "infinite-scroll") {
+      setLogs([]);
+    }
+    if (onFilterChange) {
+      onFilterChange(next);
+    }
+  }, [onFilterChange, paginationMode]);
+  const handleReset = useCallback(() => {
+    const resetFilters = {
+      fromDate: null,
+      toDate: null,
+      logType: null,
+      sortOrder: "latest"
+    };
+    setFilters(resetFilters);
+    setCurrentPage(1);
+    if (paginationMode === "infinite-scroll") {
+      setLogs([]);
+    }
+    if (onFilterChange) {
+      onFilterChange(resetFilters);
+    }
+  }, [onFilterChange, paginationMode]);
+  const refresh = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    yield fetchData(currentPage);
+  }), [fetchData, currentPage]);
+  const resetFilters = useCallback(() => {
+    handleReset();
+  }, [handleReset]);
+  const applyFilters = useCallback(newFilters => {
+    const updatedFilters = Object.assign(Object.assign({}, filters), newFilters);
+    setFilters(updatedFilters);
+    if (onFilterChange) {
+      onFilterChange(updatedFilters);
+    }
+  }, [filters, onFilterChange]);
+  const getCurrentFilters = useCallback(() => filters, [filters]);
+  const exportLogs = useCallback(() => logs, [logs]);
+  useImperativeHandle(ref, () => ({
+    refresh,
+    resetFilters,
+    applyFilters,
+    getCurrentFilters,
+    exportLogs
+  }), [refresh, resetFilters, applyFilters, getCurrentFilters, exportLogs]);
+  return jsxs(Box, {
+    className: cx(classes.root, className),
+    children: [jsx(LogFilterForm, {
+      onFilterChange: handleFilterChange,
+      onReset: handleReset,
+      initialFilters: filters
+    }), jsx(LogsTable, {
+      logs: logs,
+      isLoading: isLoading,
+      error: error,
+      onLoadMoreLogs: paginationMode === "infinite-scroll" ? handleLoadMorePages : undefined,
+      hasMoreLogs: paginationMode === "infinite-scroll" ? hasMorePages : undefined,
+      onLogClick: onLogClick,
+      tableHeight: tableHeight,
+      emptyStateMessage: emptyStateMessage,
+      emptyStateIcon: emptyStateIcon
+    }), paginationMode === "pagination" && !isLoading && !error && logs.length > 0 && jsx(LogsPagination, {
+      currentPage: currentPage,
+      totalPages: totalPages,
+      onPageChange: handlePageChange
+    })]
+  });
+});
+LogsPanel.displayName = "LogsPanel";
+const useStyles = tss.create(({
+  theme
+}) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(4),
+    alignSelf: "stretch"
+  }
+}));
+
+export { LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, Sidebar, StatusTopBar, TimeLabel, formatDateToInput, parseLogDate };