@serhii.olishevskyi/docs 1.2.25 → 1.2.26

package/dist/index.mjs

@@ -1725,11 +1725,74 @@ var ErrorAlertComponent = ({
   );
 };
 
+// src/UI/components/data.display/TruncatedTypography.tsx
+import { useRef, useState as useState11, useEffect as useEffect5 } from "react";
+import { Typography as Typography6 } from "@mui/material";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var TruncatedTypography = ({
+  children,
+  lines = 1,
+  tooltipProps,
+  alwaysShowTooltip = false,
+  sx,
+  ...typographyProps
+}) => {
+  const textRef = useRef(null);
+  const [isTruncated, setIsTruncated] = useState11(false);
+  const checkOverflow = () => {
+    const element = textRef.current;
+    if (!element) return;
+    if (lines === 1) {
+      setIsTruncated(element.scrollWidth > element.clientWidth);
+    } else {
+      setIsTruncated(element.scrollHeight > element.clientHeight);
+    }
+  };
+  useEffect5(() => {
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [children, lines]);
+  const truncationStyles = lines > 1 ? {
+    display: "-webkit-box",
+    WebkitLineClamp: lines,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    wordBreak: "break-word"
+  } : {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+  const textContent = typeof children === "string" ? children : void 0;
+  return /* @__PURE__ */ jsx15(
+    TranslatableTooltipComponent,
+    {
+      title: alwaysShowTooltip || isTruncated ? textContent || children : "",
+      disableHoverListener: !alwaysShowTooltip && !isTruncated,
+      ...tooltipProps,
+      children: /* @__PURE__ */ jsx15(
+        Typography6,
+        {
+          ref: textRef,
+          sx: {
+            ...truncationStyles,
+            ...sx
+          },
+          ...typographyProps,
+          children
+        }
+      )
+    }
+  );
+};
+
 // src/UI/components/layout/PageComponent.tsx
-import React10, { useState as useState11 } from "react";
+import React11, { useState as useState12 } from "react";
 import {
   Box as Box8,
-  Typography as Typography6,
+  Typography as Typography7,
   Button as Button5,
   IconButton as IconButton6,
   Menu,
@@ -1746,7 +1809,7 @@ import {
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { Refresh as RefreshIcon } from "@mui/icons-material";
-import { Fragment as Fragment9, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var getTruncateStyles = (mode = "truncate") => {
   switch (mode) {
     case "truncate":
@@ -1777,7 +1840,7 @@ var PageHeader = ({
   const theme = useTheme2();
   const mediaIsMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint));
   const isMobile = forceMobileView ?? mediaIsMobile;
-  const [anchorEl, setAnchorEl] = useState11(null);
+  const [anchorEl, setAnchorEl] = useState12(null);
   const isMenuOpen = Boolean(anchorEl);
   const handleOpenMenu = (e) => setAnchorEl(e.currentTarget);
   const handleCloseMenu = () => setAnchorEl(null);
@@ -1807,7 +1870,7 @@ var PageHeader = ({
       ],
       children: [
         /* @__PURE__ */ jsxs10(Box8, { sx: { display: "flex", alignItems: "center", gap: { xs: 1.5, sm: 2 }, minWidth: 0, flex: 1 }, children: [
-          icon && /* @__PURE__ */ jsx15(
+          icon && /* @__PURE__ */ jsx16(
             Box8,
             {
               sx: {
@@ -1828,9 +1891,9 @@ var PageHeader = ({
             }
           ),
           /* @__PURE__ */ jsxs10(Box8, { sx: { minWidth: 0, flex: 1 }, children: [
-            tag && /* @__PURE__ */ jsx15(Box8, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
-            /* @__PURE__ */ jsx15(Tooltip6, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ jsx15(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx15(
-              Typography6,
+            tag && /* @__PURE__ */ jsx16(Box8, { sx: { mb: 0.5, display: "flex", alignItems: "center" }, children: tag }),
+            /* @__PURE__ */ jsx16(Tooltip6, { title: titleTruncateMode === "truncate" ? /* @__PURE__ */ jsx16(TranslateText, { children: title }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx16(
+              Typography7,
               {
                 variant: "h5",
                 component: "h1",
@@ -1841,11 +1904,11 @@ var PageHeader = ({
                   lineHeight: 1.3,
                   ...getTruncateStyles(titleTruncateMode)
                 },
-                children: /* @__PURE__ */ jsx15(TranslateText, { children: title })
+                children: /* @__PURE__ */ jsx16(TranslateText, { children: title })
               }
             ) }),
-            subtitle && /* @__PURE__ */ jsx15(Tooltip6, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ jsx15(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx15(
-              Typography6,
+            subtitle && /* @__PURE__ */ jsx16(Tooltip6, { title: subtitleTruncateMode === "truncate" ? /* @__PURE__ */ jsx16(TranslateText, { children: subtitle }) : void 0, arrow: true, placement: "top", children: /* @__PURE__ */ jsx16(
+              Typography7,
               {
                 variant: "body2",
                 sx: {
@@ -1855,20 +1918,20 @@ var PageHeader = ({
                   lineHeight: 1.4,
                   ...getTruncateStyles(subtitleTruncateMode)
                 },
-                children: /* @__PURE__ */ jsx15(TranslateText, { children: subtitle })
+                children: /* @__PURE__ */ jsx16(TranslateText, { children: subtitle })
               }
             ) })
           ] })
         ] }),
-        hasActions && /* @__PURE__ */ jsx15(Box8, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
+        hasActions && /* @__PURE__ */ jsx16(Box8, { sx: { flexShrink: 0, display: "flex", alignItems: "center", gap: 1 }, children: isMobile ? (
           /* MOBILE: IconButton with MoreVertIcon showing ALL actions inside Menu */
           /* @__PURE__ */ jsxs10(Fragment9, { children: [
-            /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx16(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Actions" }), children: /* @__PURE__ */ jsx16(
               IconButton6,
               {
                 onClick: handleOpenMenu,
                 sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                children: /* @__PURE__ */ jsx15(MoreVertIcon, {})
+                children: /* @__PURE__ */ jsx16(MoreVertIcon, {})
               }
             ) }),
             /* @__PURE__ */ jsxs10(
@@ -1896,15 +1959,15 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          primaryAction.icon && /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
-                          /* @__PURE__ */ jsx15(ListItemText2, { primary: /* @__PURE__ */ jsx15(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          primaryAction.icon && /* @__PURE__ */ jsx16(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: primaryAction.icon }),
+                          /* @__PURE__ */ jsx16(ListItemText2, { primary: /* @__PURE__ */ jsx16(TranslateText, { children: primaryAction.label }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     ),
-                    hasSecondaryActions && /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.75 } })
+                    hasSecondaryActions && /* @__PURE__ */ jsx16(Divider, { sx: { my: 0.75 } })
                   ] }),
-                  secondaryActions.map((action) => /* @__PURE__ */ jsxs10(React10.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.5 } }),
+                  secondaryActions.map((action) => /* @__PURE__ */ jsxs10(React11.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx16(Divider, { sx: { my: 0.5 } }),
                     /* @__PURE__ */ jsxs10(
                       MenuItem2,
                       {
@@ -1912,14 +1975,14 @@ var PageHeader = ({
                         disabled: action.disabled,
                         sx: { borderRadius: 1, py: 1, px: 1.5, color: action.color ? `${action.color}.main` : "text.primary" },
                         children: [
-                          action.icon && /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ jsx15(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ jsx16(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx16(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
                   ] }, action.id)),
                   refreshAction && /* @__PURE__ */ jsxs10(Fragment9, { children: [
-                    /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.5 } }),
+                    /* @__PURE__ */ jsx16(Divider, { sx: { my: 0.5 } }),
                     /* @__PURE__ */ jsxs10(
                       MenuItem2,
                       {
@@ -1933,8 +1996,8 @@ var PageHeader = ({
                           px: 1.5
                         },
                         children: [
-                          /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ jsx15(RefreshIcon, {}) }),
-                          /* @__PURE__ */ jsx15(ListItemText2, { primary: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
+                          /* @__PURE__ */ jsx16(ListItemIcon, { sx: { color: "inherit", minWidth: 32 }, children: /* @__PURE__ */ jsx16(RefreshIcon, {}) }),
+                          /* @__PURE__ */ jsx16(ListItemText2, { primary: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), slotProps: { primary: { sx: { fontWeight: 700, fontSize: "0.9rem" } } } })
                         ]
                       }
                     )
@@ -1947,7 +2010,7 @@ var PageHeader = ({
           /* DESKTOP: Primary Action Button + Secondary Actions Dropdown Button */
           /* @__PURE__ */ jsxs10(Box8, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
             (primaryAction || refreshAction) && /* @__PURE__ */ jsxs10(Stack, { direction: "row", spacing: 2, children: [
-              primaryAction && /* @__PURE__ */ jsx15(
+              primaryAction && /* @__PURE__ */ jsx16(
                 Button5,
                 {
                   variant: primaryAction.variant || "contained",
@@ -1956,10 +2019,10 @@ var PageHeader = ({
                   disabled: primaryAction.disabled,
                   startIcon: primaryAction.icon,
                   sx: { borderRadius: 2, textTransform: "none", fontWeight: 600, px: 2, py: 0.85 },
-                  children: /* @__PURE__ */ jsx15(TranslateText, { children: primaryAction.label })
+                  children: /* @__PURE__ */ jsx16(TranslateText, { children: primaryAction.label })
                 }
               ),
-              refreshAction && /* @__PURE__ */ jsx15(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx15(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx15(
+              refreshAction && /* @__PURE__ */ jsx16(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx16(TranslateText, { overrideNamespace: overrideNamespace || "form_components", children: "Refresh" }), children: /* @__PURE__ */ jsx16(
                 Fab2,
                 {
                   color: "default",
@@ -1967,20 +2030,20 @@ var PageHeader = ({
                   disabled: refreshAction.disabled,
                   "aria-label": "refresh",
                   size: "small",
-                  children: /* @__PURE__ */ jsx15(RefreshIcon, {})
+                  children: /* @__PURE__ */ jsx16(RefreshIcon, {})
                 }
               ) })
             ] }),
             hasSecondaryActions && /* @__PURE__ */ jsxs10(Fragment9, { children: [
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 IconButton6,
                 {
                   onClick: handleOpenMenu,
                   sx: { border: "1px solid", borderColor: "divider", borderRadius: 2, p: 1 },
-                  children: /* @__PURE__ */ jsx15(KeyboardArrowDownIcon, {})
+                  children: /* @__PURE__ */ jsx16(KeyboardArrowDownIcon, {})
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 Menu,
                 {
                   anchorEl,
@@ -1989,8 +2052,8 @@ var PageHeader = ({
                   transformOrigin: { horizontal: "right", vertical: "top" },
                   anchorOrigin: { horizontal: "right", vertical: "bottom" },
                   slotProps: { paper: { elevation: 4, sx: { minWidth: 180, borderRadius: 2, mt: 1, p: 0.5 } } },
-                  children: secondaryActions.map((action) => /* @__PURE__ */ jsxs10(React10.Fragment, { children: [
-                    action.divider && /* @__PURE__ */ jsx15(Divider, { sx: { my: 0.5 } }),
+                  children: secondaryActions.map((action) => /* @__PURE__ */ jsxs10(React11.Fragment, { children: [
+                    action.divider && /* @__PURE__ */ jsx16(Divider, { sx: { my: 0.5 } }),
                     /* @__PURE__ */ jsxs10(
                       MenuItem2,
                       {
@@ -1998,8 +2061,8 @@ var PageHeader = ({
                         disabled: action.disabled,
                         sx: { borderRadius: 1, py: 0.85, color: action.color ? `${action.color}.main` : "text.primary" },
                         children: [
-                          action.icon && /* @__PURE__ */ jsx15(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
-                          /* @__PURE__ */ jsx15(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
+                          action.icon && /* @__PURE__ */ jsx16(ListItemIcon, { sx: { color: action.color ? `${action.color}.main` : "text.secondary", minWidth: 32 }, children: action.icon }),
+                          /* @__PURE__ */ jsx16(ListItemText2, { primary: action.label, slotProps: { primary: { sx: { fontSize: "0.875rem" } } } })
                         ]
                       }
                     )
@@ -2009,13 +2072,13 @@ var PageHeader = ({
             ] })
           ] })
         ) }),
-        customFragment && /* @__PURE__ */ jsx15(Fragment9, { children: customFragment })
+        customFragment && /* @__PURE__ */ jsx16(Fragment9, { children: customFragment })
       ]
     }
   );
 };
 var PageContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     Box8,
     {
       sx: {
@@ -2032,7 +2095,7 @@ var PageComponent = ({
   header,
   children
 }) => {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     Box8,
     {
       sx: {
@@ -2043,7 +2106,7 @@ var PageComponent = ({
         boxSizing: "border-box"
       },
       children: /* @__PURE__ */ jsxs10(PageContainer, { children: [
-        header && /* @__PURE__ */ jsx15(PageHeader, { ...header }),
+        header && /* @__PURE__ */ jsx16(PageHeader, { ...header }),
         children
       ] })
     }
@@ -2051,15 +2114,15 @@ var PageComponent = ({
 };
 
 // src/UI/components/layout/FilterContainerComponent.tsx
-import React11 from "react";
+import React12 from "react";
 import { Grid, Paper } from "@mui/material";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var FilterContainerComponent = ({
   sections,
   children,
   sx
 }) => {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Paper,
     {
       variant: "outlined",
@@ -2067,7 +2130,7 @@ var FilterContainerComponent = ({
         { p: 2, mb: 3 },
         ...Array.isArray(sx) ? sx : [sx]
       ],
-      children: /* @__PURE__ */ jsx16(Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ jsx16(React11.Fragment, { children: sec }, idx)) : children })
+      children: /* @__PURE__ */ jsx17(Grid, { container: true, spacing: 2, sx: { alignItems: "center" }, children: sections ? sections.map((sec, idx) => /* @__PURE__ */ jsx17(React12.Fragment, { children: sec }, idx)) : children })
     }
   );
 };
@@ -2085,12 +2148,12 @@ import {
   ListItem,
   ListItemIcon as ListItemIcon2,
   ListItemText as ListItemText3,
-  Typography as Typography7,
+  Typography as Typography8,
   Link as MuiLink
 } from "@mui/material";
-import React12 from "react";
+import React13 from "react";
 import { Link as RouterLink, useNavigate } from "react-router-dom";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var PageLinkComponent = ({
   overrideNamespace,
   title,
@@ -2117,20 +2180,20 @@ var PageLinkComponent = ({
         ) : typeof bgcolor === "function" ? theme.palette.getContrastText(bgcolor(theme)) : theme.palette.getContrastText(bgcolor) : "text.primary"
       }),
       children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           CardHeader,
           {
-            avatar: icon ? React12.cloneElement(icon, {
+            avatar: icon ? React13.cloneElement(icon, {
               sx: { color: bgcolor ? "inherit" : "primary", ...icon.props.sx }
-            }) : /* @__PURE__ */ jsx17(Settings, { color: bgcolor ? "inherit" : "primary" }),
-            title: /* @__PURE__ */ jsx17(Typography7, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: title }) : title }),
-            subheader: subheader && /* @__PURE__ */ jsx17(Typography7, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: subheader }) : subheader })
+            }) : /* @__PURE__ */ jsx18(Settings, { color: bgcolor ? "inherit" : "primary" }),
+            title: /* @__PURE__ */ jsx18(Typography8, { variant: "h6", component: "div", color: "inherit", children: typeof title === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: title }) : title }),
+            subheader: subheader && /* @__PURE__ */ jsx18(Typography8, { variant: "body2", sx: { opacity: 0.8, color: "inherit" }, children: typeof subheader === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: subheader }) : subheader })
           }
         ),
-        /* @__PURE__ */ jsx17(Divider2, { sx: { borderColor: "inherit", opacity: 0.2 } }),
+        /* @__PURE__ */ jsx18(Divider2, { sx: { borderColor: "inherit", opacity: 0.2 } }),
         /* @__PURE__ */ jsxs11(CardContent, { sx: { flexGrow: 1 }, children: [
-          /* @__PURE__ */ jsx17(Typography7, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: description }) : description }),
-          links && links.length > 0 && /* @__PURE__ */ jsx17(List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ jsxs11(
+          /* @__PURE__ */ jsx18(Typography8, { variant: "body2", sx: { opacity: 0.85, color: "inherit" }, children: typeof description === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: description }) : description }),
+          links && links.length > 0 && /* @__PURE__ */ jsx18(List, { dense: true, disablePadding: true, children: links.filter((f) => !f.hidden).map((link, index) => /* @__PURE__ */ jsxs11(
             ListItem,
             {
               disablePadding: true,
@@ -2142,17 +2205,17 @@ var PageLinkComponent = ({
                 }
               },
               children: [
-                /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx18(
                   ListItemIcon2,
                   {
                     sx: { minWidth: 30, cursor: "pointer", color: "inherit" },
                     onClick: () => {
                       if (link?.href) navigate(link.href);
                     },
-                    children: /* @__PURE__ */ jsx17(ArrowRight, { fontSize: "small", color: "inherit" })
+                    children: /* @__PURE__ */ jsx18(ArrowRight, { fontSize: "small", color: "inherit" })
                   }
                 ),
-                /* @__PURE__ */ jsx17(ListItemText3, { children: link.onClick ? /* @__PURE__ */ jsx17(
+                /* @__PURE__ */ jsx18(ListItemText3, { children: link.onClick ? /* @__PURE__ */ jsx18(
                   Button6,
                   {
                     size: "small",
@@ -2176,9 +2239,9 @@ var PageLinkComponent = ({
                         // Эффект подчеркивания, как у ссылки
                       }
                     },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: link.text }) : link.text
                   }
-                ) : link.href ? /* @__PURE__ */ jsx17(
+                ) : link.href ? /* @__PURE__ */ jsx18(
                   MuiLink,
                   {
                     component: RouterLink,
@@ -2196,15 +2259,15 @@ var PageLinkComponent = ({
                         backgroundColor: "transparent"
                       }
                     },
-                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: link.text }) : link.text
+                    children: typeof link.text === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: link.text }) : link.text
                   }
-                ) : /* @__PURE__ */ jsx17(Typography7, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
+                ) : /* @__PURE__ */ jsx18(Typography8, { variant: "body2", sx: { fontWeight: 500, color: "inherit" }, children: typeof link.text === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: link.text }) : link.text }) })
               ]
             },
             index
           )) })
         ] }),
-        actionButtonText && onActionButtonClick && /* @__PURE__ */ jsx17(CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ jsx17(Button6, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ jsx17(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
+        actionButtonText && onActionButtonClick && /* @__PURE__ */ jsx18(CardActions, { sx: { justifyContent: "flex-end", padding: 2 }, children: /* @__PURE__ */ jsx18(Button6, { size: "small", variant: "contained", onClick: onActionButtonClick, children: typeof actionButtonText === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace, children: actionButtonText }) : actionButtonText }) })
       ]
     }
   );
@@ -2212,12 +2275,12 @@ var PageLinkComponent = ({
 
 // src/UI/components/layout/CollapsedContainerComponent.tsx
 import { ExpandMore as ExpandMoreIcon } from "@mui/icons-material";
-import { Avatar as Avatar3, Box as Box9, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider3, IconButton as IconButton7, styled as styled2, Tooltip as Tooltip7, Typography as Typography8 } from "@mui/material";
-import { useState as useState12 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Avatar as Avatar3, Box as Box9, Card as Card2, CardContent as CardContent2, CardHeader as CardHeader2, Collapse, Divider as Divider3, IconButton as IconButton7, styled as styled2, Tooltip as Tooltip7, Typography as Typography9 } from "@mui/material";
+import { useState as useState13 } from "react";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var ExpandMore = styled2((props) => {
   const { expand, ...other } = props;
-  return /* @__PURE__ */ jsx18(IconButton7, { size: "small", ...other, children: /* @__PURE__ */ jsx18(ExpandMoreIcon, {}) });
+  return /* @__PURE__ */ jsx19(IconButton7, { size: "small", ...other, children: /* @__PURE__ */ jsx19(ExpandMoreIcon, {}) });
 })(({ theme, expand }) => ({
   transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
   transition: theme.transitions.create("transform", {
@@ -2232,7 +2295,7 @@ var ExpandMore = styled2((props) => {
 }));
 var CollapsedContainerComponent = (props) => {
   const { displayState } = useAppTheme();
-  const [expanded, setExpanded] = useState12(props.expanded === void 0 ? false : props.expanded);
+  const [expanded, setExpanded] = useState13(props.expanded === void 0 ? false : props.expanded);
   const handleExpandClick = () => {
     setExpanded(!expanded);
     props.onExpanded && props.onExpanded(!expanded);
@@ -2250,16 +2313,16 @@ var CollapsedContainerComponent = (props) => {
           pr: 2
         },
         children: [
-          /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(
             CardHeader2,
             {
               sx: { flexGrow: 1 },
-              avatar: /* @__PURE__ */ jsx18(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
-              title: typeof props.title === "string" ? /* @__PURE__ */ jsx18(Typography8, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
-              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx18(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
+              avatar: /* @__PURE__ */ jsx19(Avatar3, { sx: { bgcolor: "primary.main" }, children: props.icon }),
+              title: typeof props.title === "string" ? /* @__PURE__ */ jsx19(Typography9, { variant: "subtitle1", sx: { fontWeight: "700" }, children: /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.title }) }) : props.title,
+              subheader: typeof props.subtitle === "string" ? /* @__PURE__ */ jsx19(TranslateText, { overrideNamespace: props.overrideNamespace, children: props.subtitle }) : props.subtitle
             }
           ),
-          /* @__PURE__ */ jsx18(Tooltip7, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ jsx18(Box9, { sx: { ml: 1 }, children: /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx19(Tooltip7, { title: expanded ? "Show Less" : "Show More", children: /* @__PURE__ */ jsx19(Box9, { sx: { ml: 1 }, children: /* @__PURE__ */ jsx19(
             ExpandMore,
             {
               expand: expanded,
@@ -2271,35 +2334,35 @@ var CollapsedContainerComponent = (props) => {
       }
     ),
     /* @__PURE__ */ jsxs12(Collapse, { in: expanded, timeout: "auto", children: [
-      /* @__PURE__ */ jsx18(Divider3, { variant: "middle" }),
-      /* @__PURE__ */ jsx18(CardContent2, { children: props.children })
+      /* @__PURE__ */ jsx19(Divider3, { variant: "middle" }),
+      /* @__PURE__ */ jsx19(CardContent2, { children: props.children })
     ] })
   ] });
 };
 
 // src/i18n/LanguageSelector.tsx
-import { useEffect as useEffect5, useState as useState13 } from "react";
+import { useEffect as useEffect6, useState as useState14 } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import {
   Box as Box10,
-  Typography as Typography9,
+  Typography as Typography10,
   CircularProgress,
   IconButton as IconButton8,
   Menu as Menu2,
   MenuItem as MenuItem3,
   Tooltip as Tooltip8
 } from "@mui/material";
-import { Fragment as Fragment10, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var LanguageSelector = () => {
   const supabase = useSupabase();
   const { i18n } = useTranslation3();
-  const [languages, setLanguages] = useState13([]);
-  const [loading, setLoading] = useState13(true);
+  const [languages, setLanguages] = useState14([]);
+  const [loading, setLoading] = useState14(true);
   const { changeLanguage } = useLocalization();
   const { settings: userSettings, setLanguage } = useUserSettings();
-  const [anchorEl, setAnchorEl] = useState13(null);
+  const [anchorEl, setAnchorEl] = useState14(null);
   const open = Boolean(anchorEl);
-  useEffect5(() => {
+  useEffect6(() => {
     const fetchLanguages = async () => {
       try {
         const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
@@ -2326,13 +2389,13 @@ var LanguageSelector = () => {
     handleClose();
   };
   if (loading) {
-    return /* @__PURE__ */ jsx19(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+    return /* @__PURE__ */ jsx20(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
   }
   const rawCurrentLang = i18n.language || "uk";
   const currentLangCode = rawCurrentLang.split("-")[0];
   const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
   return /* @__PURE__ */ jsxs13(Fragment10, { children: [
-    /* @__PURE__ */ jsx19(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx20(
       IconButton8,
       {
         onClick: handleClick,
@@ -2348,7 +2411,7 @@ var LanguageSelector = () => {
             backgroundColor: "action.hover"
           }
         },
-        children: currentLang?.svg_flag && /* @__PURE__ */ jsx19(
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx20(
           Box10,
           {
             sx: {
@@ -2368,7 +2431,7 @@ var LanguageSelector = () => {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       Menu2,
       {
         id: "language-menu",
@@ -2402,7 +2465,7 @@ var LanguageSelector = () => {
                 px: 2
               },
               children: [
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx20(
                   Box10,
                   {
                     sx: {
@@ -2417,7 +2480,7 @@ var LanguageSelector = () => {
                     dangerouslySetInnerHTML: { __html: lang.svg_flag }
                   }
                 ),
-                /* @__PURE__ */ jsx19(Typography9, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+                /* @__PURE__ */ jsx20(Typography10, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
               ]
             },
             lang.code
@@ -2431,11 +2494,11 @@ var PublicLanguageSelector = () => {
   const supabase = useSupabase();
   const { i18n } = useTranslation3();
   const { changeLanguage } = useLocalization();
-  const [languages, setLanguages] = useState13([]);
-  const [loading, setLoading] = useState13(true);
-  const [anchorEl, setAnchorEl] = useState13(null);
+  const [languages, setLanguages] = useState14([]);
+  const [loading, setLoading] = useState14(true);
+  const [anchorEl, setAnchorEl] = useState14(null);
   const open = Boolean(anchorEl);
-  useEffect5(() => {
+  useEffect6(() => {
     const fetchLanguages = async () => {
       try {
         const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
@@ -2460,13 +2523,13 @@ var PublicLanguageSelector = () => {
     handleClose();
   };
   if (loading) {
-    return /* @__PURE__ */ jsx19(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
+    return /* @__PURE__ */ jsx20(CircularProgress, { size: 20, color: "inherit", sx: { mx: 1 } });
   }
   const rawCurrentLang = i18n.language || "uk";
   const currentLangCode = rawCurrentLang.split("-")[0];
   const currentLang = languages.find((l) => l.code === currentLangCode) || languages[0];
   return /* @__PURE__ */ jsxs13(Fragment10, { children: [
-    /* @__PURE__ */ jsx19(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx20(
       IconButton8,
       {
         onClick: handleClick,
@@ -2482,7 +2545,7 @@ var PublicLanguageSelector = () => {
             backgroundColor: "action.hover"
           }
         },
-        children: currentLang?.svg_flag && /* @__PURE__ */ jsx19(
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx20(
           Box10,
           {
             sx: {
@@ -2502,7 +2565,7 @@ var PublicLanguageSelector = () => {
         )
       }
     ) }),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20(
       Menu2,
       {
         id: "language-menu",
@@ -2536,7 +2599,7 @@ var PublicLanguageSelector = () => {
                 px: 2
               },
               children: [
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx20(
                   Box10,
                   {
                     sx: {
@@ -2551,7 +2614,7 @@ var PublicLanguageSelector = () => {
                     dangerouslySetInnerHTML: { __html: lang.svg_flag }
                   }
                 ),
-                /* @__PURE__ */ jsx19(Typography9, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+                /* @__PURE__ */ jsx20(Typography10, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
               ]
             },
             lang.code
@@ -2562,6 +2625,78 @@ var PublicLanguageSelector = () => {
   ] });
 };
 
+// src/UI/components/tables/TablePaginationComponent.tsx
+import {
+  Box as Box11,
+  IconButton as IconButton9,
+  TablePagination
+} from "@mui/material";
+import FirstPageIcon from "@mui/icons-material/FirstPage";
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import LastPageIcon from "@mui/icons-material/LastPage";
+import { Fragment as Fragment11, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var CustomPaginationActions = (props) => {
+  const {
+    count,
+    page,
+    rowsPerPage,
+    onPageChange,
+    showFirstButton,
+    showLastButton,
+    overrideNamespace
+  } = props;
+  const ns = overrideNamespace || "form_components";
+  const handleFirstPage = (e) => onPageChange(e, 0);
+  const handleBack = (e) => onPageChange(e, page - 1);
+  const handleNext = (e) => onPageChange(e, page + 1);
+  const handleLast = (e) => onPageChange(e, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  const isFirstDisabled = page === 0;
+  const isLastDisabled = page >= Math.ceil(count / rowsPerPage) - 1;
+  return /* @__PURE__ */ jsxs14(Box11, { sx: { flexShrink: 0, ml: 2, display: "flex", alignItems: "center" }, children: [
+    showFirstButton && /* @__PURE__ */ jsx21(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: ns, children: "First page" }), children: /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsx21(IconButton9, { onClick: handleFirstPage, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ jsx21(FirstPageIcon, {}) }) }) }),
+    /* @__PURE__ */ jsx21(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: ns, children: "Previous page" }), children: /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsx21(IconButton9, { onClick: handleBack, disabled: isFirstDisabled, size: "small", children: /* @__PURE__ */ jsx21(KeyboardArrowLeft, {}) }) }) }),
+    /* @__PURE__ */ jsx21(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: ns, children: "Next page" }), children: /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsx21(IconButton9, { onClick: handleNext, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ jsx21(KeyboardArrowRight, {}) }) }) }),
+    showLastButton && /* @__PURE__ */ jsx21(TranslatableTooltipComponent, { title: /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: ns, children: "Last page" }), children: /* @__PURE__ */ jsx21("span", { children: /* @__PURE__ */ jsx21(IconButton9, { onClick: handleLast, disabled: isLastDisabled, size: "small", children: /* @__PURE__ */ jsx21(LastPageIcon, {}) }) }) })
+  ] });
+};
+var TablePaginationComponent = ({
+  overrideNamespace,
+  rowsPerPageOptions = [5, 10, 25, 50],
+  count,
+  rowsPerPage,
+  page,
+  onPageChange,
+  onRowsPerPageChange
+}) => {
+  const { displayState } = useAppTheme();
+  const activeNamespace = overrideNamespace || "form_components";
+  return /* @__PURE__ */ jsx21(
+    TablePagination,
+    {
+      rowsPerPageOptions,
+      component: "div",
+      count,
+      rowsPerPage,
+      page,
+      onPageChange,
+      onRowsPerPageChange,
+      showFirstButton: true,
+      showLastButton: true,
+      labelRowsPerPage: displayState.isMobile ? /* @__PURE__ */ jsx21(Fragment11, {}) : /* @__PURE__ */ jsxs14(Fragment11, { children: [
+        /* @__PURE__ */ jsx21(TranslateText, { overrideNamespace: activeNamespace, children: "Rows per page" }),
+        ":"
+      ] }),
+      ActionsComponent: CustomPaginationActions,
+      slotProps: {
+        actions: {
+          overrideNamespace: activeNamespace
+        }
+      }
+    }
+  );
+};
+
 // src/services/index.ts
 var Services = {
   SessionService: {
@@ -2577,14 +2712,14 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-import { useEffect as useEffect6, useRef, useState as useState14 } from "react";
+import { useEffect as useEffect7, useRef as useRef2, useState as useState15 } from "react";
 var ONLINE_THRESHOLD_MINUTES = 2;
 var AWAY_THRESHOLD_MINUTES = 15;
 var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
   const supabase = useSupabase();
-  const [status, setStatus] = useState14("offline");
-  const [lastSeen, setLastSeen] = useState14(initialLastSeenAt ?? null);
-  const lastSeenRef = useRef(initialLastSeenAt ?? null);
+  const [status, setStatus] = useState15("offline");
+  const [lastSeen, setLastSeen] = useState15(initialLastSeenAt ?? null);
+  const lastSeenRef = useRef2(initialLastSeenAt ?? null);
   lastSeenRef.current = lastSeen;
   const calculateStatus = (isOnline, lastSeenIso) => {
     if (isOnline) return "online";
@@ -2600,7 +2735,7 @@ var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -2725,6 +2860,7 @@ export {
   Services,
   SupabaseProvider,
   SwitchComponent,
+  TablePaginationComponent,
   TextFieldComponent,
   ThemeProvider,
   ToastProvider,
@@ -2732,6 +2868,7 @@ export {
   TranslateProvider,
   TranslateText,
   TranslationEditProvider,
+  TruncatedTypography,
   UrlComponent,
   UserAvatarComponent,
   UserPopoverComponent,