@serhii.olishevskyi/docs 1.2.24 → 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,12 +2334,369 @@ 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 useEffect6, useState as useState14 } from "react";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import {
+  Box as Box10,
+  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 jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var LanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation3();
+  const [languages, setLanguages] = useState14([]);
+  const [loading, setLoading] = useState14(true);
+  const { changeLanguage } = useLocalization();
+  const { settings: userSettings, setLanguage } = useUserSettings();
+  const [anchorEl, setAnchorEl] = useState14(null);
+  const open = Boolean(anchorEl);
+  useEffect6(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+        if (userSettings.language) changeLanguage(userSettings.language);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    setLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    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__ */ jsx20(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx20(
+      IconButton8,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx20(
+          Box10,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx20(
+      Menu2,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ jsxs13(
+            MenuItem3,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx20(
+                  Box10,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ jsx20(Typography10, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+var PublicLanguageSelector = () => {
+  const supabase = useSupabase();
+  const { i18n } = useTranslation3();
+  const { changeLanguage } = useLocalization();
+  const [languages, setLanguages] = useState14([]);
+  const [loading, setLoading] = useState14(true);
+  const [anchorEl, setAnchorEl] = useState14(null);
+  const open = Boolean(anchorEl);
+  useEffect6(() => {
+    const fetchLanguages = async () => {
+      try {
+        const { data, error } = await supabase.from("languages").select("code, name, svg_flag").eq("enabled", true);
+        if (error) throw error;
+        setLanguages(data || []);
+      } catch (err) {
+        console.error("\u041F\u043E\u043C\u0438\u043B\u043A\u0430 \u0437\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F \u043C\u043E\u0432:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchLanguages();
+  }, []);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleSelectLanguage = (langCode) => {
+    changeLanguage(langCode);
+    handleClose();
+  };
+  if (loading) {
+    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__ */ jsx20(Tooltip8, { title: currentLang ? currentLang.name : "\u041C\u043E\u0432\u0430", arrow: true, placement: "bottom", children: /* @__PURE__ */ jsx20(
+      IconButton8,
+      {
+        onClick: handleClick,
+        size: "small",
+        "aria-controls": open ? "language-menu" : void 0,
+        "aria-haspopup": "true",
+        "aria-expanded": open ? "true" : void 0,
+        sx: {
+          p: 1,
+          borderRadius: 2,
+          transition: "background-color 0.2s",
+          "&:hover": {
+            backgroundColor: "action.hover"
+          }
+        },
+        children: currentLang?.svg_flag && /* @__PURE__ */ jsx20(
+          Box10,
+          {
+            sx: {
+              width: 24,
+              height: 16,
+              borderRadius: "3px",
+              overflow: "hidden",
+              flexShrink: 0,
+              boxShadow: "0 0 2px rgba(0,0,0,0.3)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              "& svg": { width: "100%", height: "100%", display: "block", objectFit: "cover" }
+            },
+            dangerouslySetInnerHTML: { __html: currentLang.svg_flag }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx20(
+      Menu2,
+      {
+        id: "language-menu",
+        anchorEl,
+        open,
+        onClose: handleClose,
+        slotProps: {
+          paper: {
+            elevation: 3,
+            sx: {
+              mt: 1,
+              minWidth: 150,
+              borderRadius: 2
+            }
+          }
+        },
+        transformOrigin: { horizontal: "right", vertical: "top" },
+        anchorOrigin: { horizontal: "right", vertical: "bottom" },
+        children: languages.map((lang) => {
+          const isSelected = lang.code === currentLangCode;
+          return /* @__PURE__ */ jsxs13(
+            MenuItem3,
+            {
+              selected: isSelected,
+              onClick: () => handleSelectLanguage(lang.code),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1.5,
+                py: 1,
+                px: 2
+              },
+              children: [
+                /* @__PURE__ */ jsx20(
+                  Box10,
+                  {
+                    sx: {
+                      width: 22,
+                      height: 15,
+                      borderRadius: "2px",
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      boxShadow: "0 0 1px rgba(0,0,0,0.4)",
+                      "& svg": { width: "100%", height: "100%", display: "block" }
+                    },
+                    dangerouslySetInnerHTML: { __html: lang.svg_flag }
+                  }
+                ),
+                /* @__PURE__ */ jsx20(Typography10, { variant: "body2", sx: { fontWeight: isSelected ? 600 : 400 }, children: lang.name })
+              ]
+            },
+            lang.code
+          );
+        })
+      }
+    )
+  ] });
+};
+
+// 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: {
@@ -2292,14 +2712,14 @@ var Services = {
 };
 
 // src/hooks/useUserStatus.ts
-import { useEffect as useEffect5, useRef, useState as useState13 } 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] = useState13("offline");
-  const [lastSeen, setLastSeen] = useState13(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";
@@ -2315,7 +2735,7 @@ var useUserStatus = (userId, initialLastSeenAt, currentAuthUserId) => {
     }
     return "offline";
   };
-  useEffect5(() => {
+  useEffect7(() => {
     if (!userId) return;
     let isMounted = true;
     const isSelf = currentAuthUserId && userId === currentAuthUserId;
@@ -2431,13 +2851,16 @@ export {
   NumberInputComponent,
   PageComponent,
   PageLinkComponent,
+  LanguageSelector as ProtectedLanguageSelector,
   Providers,
+  PublicLanguageSelector,
   RefreshButtonComponent,
   SearchComponent,
   SelectComponent,
   Services,
   SupabaseProvider,
   SwitchComponent,
+  TablePaginationComponent,
   TextFieldComponent,
   ThemeProvider,
   ToastProvider,
@@ -2445,6 +2868,7 @@ export {
   TranslateProvider,
   TranslateText,
   TranslationEditProvider,
+  TruncatedTypography,
   UrlComponent,
   UserAvatarComponent,
   UserPopoverComponent,